/* PO Overview — horizontal calendar view.
   Visual language: medusajs.com — warm off-white, Instrument Serif headlines,
   Inter for body, JetBrains Mono for numbers and SKUs. */

:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --bg-elev: #fbf9f4;
  --ink: #0a0a0a;
  --ink-soft: #4a4a4a;
  --ink-mute: #8a877f;
  --line: #e6e2d8;
  --line-strong: #cdc7b9;
  --accent: #111111;
  --accent-fg: #f6f4ef;
  --positive: #1f6b3a;
  --warn: #a26b00;
  --bad: #8a1f1f;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Georgia", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --topbar-h: 56px;
  --nav-h: 52px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* one-page layout (Planner/History) */
}
/* Bestseller + Forecast are taller than the viewport → allow the page to scroll. */
body.page-scroll { overflow-y: auto; }

/* ------- Top bar ------- */
.topbar {
  position: relative;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  height: 100%;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; }
.brand-logo {
  height: 18px;
  width: auto;
  display: block;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  height: 30px;
  width: 320px;
  flex: 0 0 auto;
  margin: 0 6px;
  transition: border-color 0.15s ease;
}
.search:focus-within { border-color: var(--ink); }
.search-icon { width: 14px; height: 14px; color: var(--ink-mute); margin-right: 8px; flex: 0 0 14px; }
.search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: var(--ink); }
.search input::placeholder { color: var(--ink-mute); }
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--bg);
}

.meta-label {
  color: var(--ink-mute);
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-email {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.signout-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 28px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.signout-btn:hover { border-color: var(--line-strong); color: var(--ink); }

.bell-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.bell-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.bell-btn.has-unread { color: var(--ink); }
.bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--bad);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.bell-badge[hidden] { display: none !important; }
.bell-btn.bell-ok { color: var(--positive); border-color: rgba(31, 107, 58, 0.3); background: rgba(31, 107, 58, 0.05); }

.notifications {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.notifications[aria-hidden="false"] { pointer-events: auto; }
.notif-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0);
  transition: background 0.15s ease;
}
.notifications[aria-hidden="false"] .notif-scrim { background: rgba(10, 10, 10, 0.18); }
.notif-panel {
  position: absolute;
  top: calc(var(--topbar-h) + 6px);
  right: 14px;
  width: min(380px, 92vw);
  max-height: 70vh;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notifications[aria-hidden="false"] .notif-panel {
  transform: translateY(0);
  opacity: 1;
}
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px 14px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.notif-tabs {
  display: flex;
  gap: 2px;
}
.notif-tab {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.notif-tab:hover { background: var(--bg-elev); color: var(--ink); }
.notif-tab.is-active {
  background: var(--accent);
  color: var(--accent-fg);
}
.notif-tab.is-active .notif-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--accent-fg);
}
.notif-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  letter-spacing: 0;
}
.notif-clear {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.notif-clear:hover { color: var(--ink); }
.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.notif-empty {
  text-align: center;
  padding: 30px 18px;
  color: var(--ink-mute);
  font-size: 12px;
}
.notif-item {
  padding: 10px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid transparent;
  transition: background 0.1s ease;
}
.notif-item:hover { background: var(--bg-elev); }
.notif-item.unseen { border-left-color: var(--bad); background: var(--bg-elev); }
.notif-item-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.notif-item-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.notif-item-changes {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 2px;
}
.notif-item-changes [data-color="ok"]   { color: var(--positive); font-weight: 500; }
.notif-item-changes [data-color="warn"] { color: var(--warn);     font-weight: 500; }
.notif-item-changes [data-color="bad"]  { color: var(--bad);      font-weight: 500; }
.notif-item-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}

/* ------- Nav bar ------- */
.nav {
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30; /* keep dropdown panels above the calendar below */
}
.nav-inner {
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-spacer { flex: 1 1 auto; min-width: 14px; }
.nav-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--bg); }
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nav-today { font-weight: 500; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.nav-range {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.empty-jump {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.empty-jump-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.empty-jump-btn:hover { opacity: 0.85; }

/* ------- Stock rail (collapsible search-driven stock lookup) ------- */
.stock-rail {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.stock-rail[hidden] { display: none; }
.stock-rail-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: background 0.1s ease;
}
.stock-rail-details > summary:hover { background: var(--bg-elev); }
.stock-rail-details > summary::-webkit-details-marker { display: none; }
.stock-rail-summary-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.stock-rail-chevron {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-mute);
  border-bottom: 1px solid var(--ink-mute);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  display: inline-block;
  margin-bottom: 2px;
}
.stock-rail-details[open] .stock-rail-chevron { transform: rotate(45deg); }
.stock-rail-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.stock-rail-title .stock-rail-count {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0;
}
.stock-list {
  display: flex;
  flex-direction: column;
  padding: 4px 24px 14px;
  max-height: 200px;
  overflow-y: auto;
}
.stock-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s ease;
  cursor: pointer;
}
.stock-item:last-child { border-bottom: 0; }
.stock-item:hover { background: var(--bg-elev); }
.stock-item-sku {
  flex: 0 0 60px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.stock-item-name {
  flex: 0 1 360px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-item-name mark {
  background: rgba(255, 222, 89, 0.55);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
/* Bundle badge slot — always reserved (60px) so stats column stays aligned
   across rows. Empty span when item isn't a bundle. */
.stock-badge-slot {
  margin-left: auto;
  flex: 0 0 60px;
  text-align: right;
  white-space: nowrap;
}
.stock-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(162, 107, 0, 0.08);
  color: #8a5a14;
  border: 1px solid rgba(162, 107, 0, 0.22);
}
.stock-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.stock-stats-secondary {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 8px;
}
/* Bundles aren't physically stocked, so reserved + in stock are always 0
   and would just be noise. We hide them with visibility (not display) so
   the row still reserves the space — "available" stays in the same
   column position across bundle and non-bundle rows. */
.stock-item.is-bundle .stock-stats-secondary { visibility: hidden; }
.stock-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.stock-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.stock-num,
.stock-avail {
  font-weight: 500;
  color: var(--ink);
  display: inline-block;
  min-width: 4ch;
  text-align: right;
}
.stock-sep { color: var(--ink-mute); opacity: 0.55; }
.stock-avail[data-state="ok"] { color: var(--positive); }
.stock-avail[data-state="low"] { color: var(--warn); }
.stock-avail[data-state="zero"] { color: var(--bad); }
.stock-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  padding: 12px;
}

/* ------- Country toggle (DK / US) — segmented mono control ------- */
.country-toggle {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
  height: 28px;
  align-items: center;
  flex-shrink: 0;
}
.country-btn {
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  height: 22px;
  padding: 0 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.country-btn:hover:not(.is-active) { color: var(--ink); background: var(--bg); }
.country-btn.is-active { background: var(--accent); color: var(--accent-fg); }
.country-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.country-dot--dk { background: #C8102E; }
.country-dot--us { background: #3C3B6E; }

/* ------- Filter pills (inline in nav bar) ------- */
.filter-pill {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  height: 28px;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.filter-pill:hover {
  background: var(--bg-elev);
  color: var(--ink);
}
.filter-pill.is-active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.filter-pill.is-active .filter-pill-count {
  color: var(--accent-fg);
  opacity: 0.6;
}
.filter-pill-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  font-weight: 400;
}

/* ------- Calendar grid ------- */
.calendar {
  height: calc(100vh - var(--topbar-h) - var(--nav-h));
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  overflow: hidden;
}

.empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  text-align: center;
}
.empty-title {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0;
}
.empty-sub {
  color: var(--ink-mute);
  margin: 6px 0 0;
}
.empty.error .empty-title { color: var(--bad); }

/* ------- Month column ------- */
.col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.col.is-past { opacity: 0.55; }

.col-head {
  display: flex;
  align-items: baseline;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.col-month {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* US container header — container name on top, PO + month + warehouse + status below */
.col-head--container {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.col-head-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.col-container-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.col-container-meta .sep { margin: 0 4px; opacity: 0.5; }
.col-status {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.col-status[data-status="ok"]   { color: var(--positive); background: rgba(31, 107, 58, 0.08); border-color: rgba(31, 107, 58, 0.25); }
.col-status[data-status="warn"] { color: var(--warn);     background: rgba(162, 107, 0, 0.08); border-color: rgba(162, 107, 0, 0.25); }
.col-status[data-status="bad"]  { color: var(--bad);      background: rgba(138, 31, 31, 0.08); border-color: rgba(138, 31, 31, 0.25); }

.col { position: relative; }
.col-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  padding-bottom: 18px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.col-body::-webkit-scrollbar { width: 6px; }
.col-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* Fade + chevron at bottom of column when there's more content below */
.col-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(246, 244, 239, 0), var(--bg) 70%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.col-fade::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.2px solid var(--ink-mute);
  border-bottom: 1.2px solid var(--ink-mute);
  transform: rotate(45deg);
  margin-bottom: 4px;
  display: block;
}
.col.has-overflow .col-fade { opacity: 1; }
.col.has-overflow.scrolled-bottom .col-fade { opacity: 0; }

/* ------- Tile (compact) ------- */
.tile {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease;
}
.tile:hover { border-color: var(--line-strong); }

.tile-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.tile-name {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tile-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tile-sku {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tile-status {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tile-status[data-status="ok"] {
  color: var(--positive);
  background: rgba(31, 107, 58, 0.08);
  border-color: rgba(31, 107, 58, 0.25);
}
.tile-status[data-status="warn"] {
  color: var(--warn);
  background: rgba(162, 107, 0, 0.08);
  border-color: rgba(162, 107, 0, 0.25);
}
.tile-status[data-status="bad"] {
  color: var(--bad);
  background: rgba(138, 31, 31, 0.08);
  border-color: rgba(138, 31, 31, 0.25);
}

.tile-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.tile-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.tile-bar-fill {
  display: block;
  height: 100%;
  background: var(--positive);
  transition: width 0.2s ease;
}
.tile-bar-fill[data-state="low"] { background: var(--warn); }
.tile-bar-fill[data-state="zero"] { background: var(--bad); }

.tile-stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.tile-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tile-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.tile-incoming,
.tile-avail {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.tile-incoming { color: var(--ink-soft); font-weight: 400; }
.tile-avail[data-state="ok"]   { color: var(--positive); }
.tile-avail[data-state="low"]  { color: var(--warn); }
.tile-avail[data-state="zero"] { color: var(--bad); }
.tile-sep { color: var(--ink-mute); }

/* ------- Highlight ------- */
mark {
  background: rgba(255, 222, 89, 0.55);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ------- Empty column state ------- */
.col-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  padding: 24px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

/* ------- Detail panel (slides in from right) ------- */
.panel {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.panel[aria-hidden="false"] { pointer-events: auto; }

.panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0);
  transition: background 0.2s ease;
}
.panel[aria-hidden="false"] .panel-scrim {
  background: rgba(10, 10, 10, 0.18);
}

.panel-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 96vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.06);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel[aria-hidden="false"] .panel-card { transform: translateX(0); }
/* Pending/approve: wider so the decision + savings + freight table fits. */
.panel-card.is-approve { width: min(760px, 96vw); }
/* Drag-to-reschedule (Placed axis, Pending): draggable quote tiles + drop target. */
.tile.is-draggable { cursor: grab; }
.tile.is-draggable:active { cursor: grabbing; }
.tile.is-dragging { opacity: 0.4; }
/* Highlight only the drop zone (the tile area), not the month header/counter. Background
   tint only — no ring, so it never clips a tile's own border. */
.col.col-drop .col-body { background: rgba(17, 17, 17, 0.05); border-radius: 10px; transition: background 0.12s ease; }
/* Approvals-tile tags = exact same look as Replenishment (which is #replenishmentView-scoped). */
.tile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tile-badges .tile-topseller { margin: 0; font-family: var(--font-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; color: #8a6d1f; background: rgba(191, 148, 42, .16); border: 1px solid rgba(191, 148, 42, .45); }
.tile-badges .tile-flag { display: inline-block; font-family: var(--font-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; }
.tile-badges .tile-flag.rp-strategic { color: #37516b; background: rgba(108, 140, 175, .16); border: 1px solid rgba(108, 140, 175, .45); }
.tile-badges .tile-flag.tile-edited { font-weight: 700; color: #8a5a00; background: rgba(214, 158, 46, .18); border: 1px solid rgba(214, 158, 46, .55); }
.tile.is-edited { border-color: rgba(214, 158, 46, .55); box-shadow: inset 0 0 0 1px rgba(214, 158, 46, .28); }
/* Made-to-order — distinct violet so it stands apart from strategic/bestseller; "bring to stock ASAP". */
.tile-badges .tile-flag.tile-mto { font-weight: 700; color: #6b3fa0; background: rgba(124, 77, 175, .14); border: 1px solid rgba(124, 77, 175, .5); }
.tile-badges .tile-flag.tile-negotiate { font-weight: 700; color: #0b6e6e; background: rgba(15, 138, 138, .14); border: 1px solid rgba(15, 138, 138, .5); }
.tile.has-mto { border-color: rgba(124, 77, 175, .45); }

/* Stock-out chip — own row below the other tags. Same tag design as strategic/bestseller (font,
   size, radius), ~double width, date in bold. Neutral by default, red when run-out is near. */
.tile-runout-row { margin-top: 6px; }
.tile-stockout { display: inline-block; font-family: var(--font-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line-strong); }
.tile-stockout b { font-weight: 700; }
.tile-stockout.is-urgent { color: var(--bad); background: rgba(138, 31, 31, .08); border-color: rgba(138, 31, 31, .4); }

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head-text { min-width: 0; flex: 1; }
.panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.panel-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.panel-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.panel-close {
  font: inherit;
  font-size: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.panel-close:hover { border-color: var(--line-strong); color: var(--ink); }

.panel-card {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Keep the header pinned while the rest of the panel scrolls, so long POs
   (many shipments) can be scrolled all the way to the last one. */
.panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
}
.panel-card > .panel-section + .panel-section { border-top: 1px solid var(--line); }
.panel-section {
  padding: 18px 24px;
}
.panel-section[hidden] { display: none; }

/* Selected line: always visible at top, never cropped */
#panelSelectedSection { flex: 0 0 auto; }
/* Reservations: prominent middle block, scrolls if very long */
#panelReservationsSection {
  flex: 0 1 auto;
  overflow-y: auto;
  max-height: 45vh;
}
/* Other items on PO: bottom, can take remaining space and scroll */
#panelOtherSection {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 80px;
  padding-bottom: 32px;
}

.panel-section-title {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 500;
}

.panel-line {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.panel-line code {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-weight: 400;
}

.panel-stats {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.panel-stats > div { display: flex; flex-direction: column; gap: 2px; }
.panel-stats dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin: 0;
}
.panel-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
}
.panel-stats dd[data-state="ok"]   { color: var(--positive); }
.panel-stats dd[data-state="low"]  { color: var(--warn); }
.panel-stats dd[data-state="zero"] { color: var(--bad); }

/* Value + location moved up under the sub line — exactly the old stat cell (uppercase label
   above, mono value below), just the two cells side by side. */
.panel-headline { margin-top: 14px; margin-bottom: 2px; display: flex; flex-wrap: wrap; gap: 10px 44px; }
.panel-headline .ph-cell { display: flex; flex-direction: column; gap: 3px; }
.panel-headline .ph-k { font-family: var(--font-sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.panel-headline .ph-val { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--ink); }
.panel-headline .ph-fcy { font-size: 12px; font-weight: 400; color: var(--ink-mute); }

/* Vendor spend/qty analytics box */
.panel-vendor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-vendor-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.pv-tog { font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 3px 9px; border: 0; background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; }
.pv-tog + .pv-tog { border-left: 1px solid var(--line); }
.pv-tog.is-active { background: var(--accent); color: var(--accent-fg); }
.panel-vendor { margin-top: 6px; }
.pv-stats { display: grid; grid-template-columns: auto auto auto auto; justify-content: start; gap: 8px 48px; }
.pv-cell { display: flex; flex-direction: column; gap: 2px; }
.pv-cell dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin: 0; white-space: nowrap; }
.pv-cell dd { margin: 0; font-family: var(--font-mono); font-size: 16px; font-weight: 500; white-space: nowrap; }
.pv-d { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.pv-d0 { color: var(--ink-mute); }
/* Same graded trend arrow as Replenishment (rotated →, green / amber / red), reused in the panel. */
.panel-vendor .rp-trend { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; transform-origin: 50% 50%; color: #bf942a; }
.panel-vendor .rp-trend[data-t="up2"] { transform: rotate(-90deg); color: var(--positive); }
.panel-vendor .rp-trend[data-t="up1"] { transform: rotate(-45deg); color: var(--positive); }
.panel-vendor .rp-trend[data-t="flat"] { transform: rotate(0deg); color: #bf942a; }
.panel-vendor .rp-trend[data-t="down1"] { transform: rotate(45deg); color: var(--bad); }
.panel-vendor .rp-trend[data-t="down2"] { transform: rotate(90deg); color: var(--bad); }
.pv-sub { font-family: var(--font-sans); font-size: 10px; color: var(--ink-mute); }
.pv-foot { margin-top: 10px; font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-mute); }
.pv-empty { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); padding: 6px 0; }

.panel-reservations {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-reservation {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.panel-reservation-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.panel-reservation-meta {
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.panel-reservation-qty {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  align-self: center;
  text-align: right;
  white-space: nowrap;
}
.panel-reservation-qty small {
  font-weight: 400;
  color: var(--ink-mute);
  margin-left: 3px;
}

.panel-reservations-empty {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}

.panel-other {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panel-other-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  transition: border-color 0.15s ease;
}
.panel-other-row:hover { border-color: var(--line-strong); cursor: pointer; }
.panel-other-name { font-size: 12.5px; font-weight: 500; }
.panel-other-meta {
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.panel-other-qty {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  font-family: var(--font-mono);
  font-size: 12.5px;
  align-self: center;
  white-space: nowrap;
}
.panel-other-empty {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}

.tile { cursor: pointer; position: relative; }

.tile-watch {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-mute);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  z-index: 1;
}
.tile:hover .tile-watch { opacity: 0.7; }
.tile-watch:hover { opacity: 1 !important; color: var(--ink); background: var(--bg); }
.tile.is-watched .tile-watch {
  opacity: 1;
  color: var(--warn);
}
.tile.is-watched .tile-watch svg { fill: var(--warn); }

.panel-watch {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.panel-watch:hover { border-color: var(--line-strong); color: var(--ink); }
.panel-watch.is-watched {
  color: var(--warn);
  background: rgba(162, 107, 0, 0.06);
  border-color: rgba(162, 107, 0, 0.3);
}
.panel-watch.is-watched svg { fill: var(--warn); }

/* ------- Responsive ------- */
@media (max-width: 1100px) {
  .calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { overflow: auto; }
  .calendar {
    grid-template-columns: 1fr;
    height: auto;
  }
  .topbar-inner { grid-template-columns: 1fr; gap: 10px; padding: 10px 18px; height: auto; }
  .topbar { height: auto; }
}


/* ===================================================================
   PROCUREMENT PLANNER — additions that mirror PO Overview's scale,
   fonts, colors and tokens. Tiles reuse the original .tile anatomy
   verbatim; new chrome (KPI rail, axis toggle, budget header) is
   styled on the existing type scale only — no new sizes invented.
   =================================================================== */

.brand-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* ------- KPI summary rail — reuses the detail panel's stat type scale
   (.panel-stats dt/dd): 10.5px uppercase label + 16px mono value ------- */
:root { --kpi-h: 92px; }
.kpi-rail {
  height: var(--kpi-h);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  overflow: hidden; /* never let a box's content spill into the nav */
}
/* Clickable action box (Confirm status) */
.kpi--action { cursor: pointer; transition: background 0.12s ease; }
.kpi--action:hover { background: var(--bg-elev); }
.kpi--action:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.kpi--action .kpi-label {
  display: inline-flex; align-items: center; gap: 5px;
}
.kpi-action-arrow { color: var(--ink-mute); }
.kpi--action:hover .kpi-action-arrow { color: var(--ink); }

/* Confirm-status follow-up rows (with mark-as-done check) */
.confirm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.confirm-row:hover { border-color: var(--line-strong); }
.confirm-row-main { flex: 1; min-width: 0; cursor: pointer; }
.confirm-row-name {
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.confirm-row-meta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.confirm-row-val {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap;
}
.confirm-check {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--bg); cursor: pointer; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.confirm-check:hover { border-color: var(--positive); color: var(--positive); }
.confirm-row.is-done { opacity: 0.65; }
.confirm-row.is-done .confirm-check { background: var(--positive); border-color: var(--positive); color: #fff; }
.confirm-row.is-done .confirm-row-name { text-decoration: line-through; color: var(--ink-mute); }
.confirm-row.is-done .confirm-row-val { color: var(--ink-mute); }
/* Confirm list scrolls within the panel */
#confirmListSection { flex: 1 1 auto; overflow-y: auto; padding-bottom: 28px; }
/* Headline number with its Posted/Pending breakdown hugging it on the right,
   divided by a short line — so the split clearly belongs to THIS figure. The
   dead space then falls to the far right of the pair. */
/* Stack shrinks to the figure's width so the bar (100%) spans the full figure
   — under the headline number AND the Posted/Pending breakdown. */
.kpi-stack { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: max-content; max-width: 100%; }
.kpi-figure { display: flex; align-items: center; gap: 16px; }
.kpi-breakdown {
  display: flex; flex-direction: column; gap: 3px;
  padding-left: 16px; border-left: 1px solid var(--line);
}
/* Fixed label column so both values start at the same x (the two leading
   digits line up); "POSTED" then has more space to its value than "PENDING". */
.kpi-bd { display: grid; grid-template-columns: 52px auto; align-items: baseline; white-space: nowrap; }
.kpi-bd-k { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.kpi-bd-v { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

/* Progress bar inside a KPI box — same treatment as the column budget bar */
.kpi-bar {
  width: 100%;
  max-width: none; /* spans the whole figure (number + breakdown) via .kpi-stack */
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0 1px;
}
.kpi-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--positive);
  transition: width 0.25s ease;
}
.kpi-bar-fill[data-state="warn"] { background: var(--warn); }
.kpi-bar-fill[data-state="bad"]  { background: var(--bad); }
.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}
.kpi:first-child { padding-left: 0; }
.kpi:last-child { border-right: 0; }
.kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.kpi-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.kpi-sub[data-state="ok"]   { color: var(--positive); }
.kpi-sub[data-state="warn"] { color: var(--warn); }
.kpi-sub[data-state="bad"]  { color: var(--bad); }

/* Recompute calendar height to account for the KPI rail */
.calendar {
  height: calc(100vh - var(--topbar-h) - var(--kpi-h) - var(--nav-h));
}

/* ------- Date-axis selector — rendered with the same .filter-pill control
   as the category filter, so it's the same design. This container just
   holds the pills on the left side of the nav bar. ------- */
.nav-axis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}
/* status view pills sit just after the date-axis pills, lightly divided */
.nav-view {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* ------- Procurement column header — month is identical to the base
   .col-month; the budget meta below reuses the US-container meta scale
   (mono 10px) and the .tile-bar treatment (4px) ------- */
.col-head--proc {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.col-budget { display: flex; flex-direction: column; gap: 4px; }
.col-budget-total {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.col-budget-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.col-budget-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--positive);
  transition: width 0.25s ease;
}
.col-budget-fill[data-state="warn"] { background: var(--warn); }
.col-budget-fill[data-state="bad"]  { background: var(--bad); }
.col-budget-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  /* Always reserve one line so columns line up whether or not there's a
     delta / "Pending:" note under the budget bar. */
  display: block;
  min-height: 1.4em;
}
.col-budget-delta[data-state="ok"]   { color: var(--positive); }
.col-budget-delta[data-state="warn"] { color: var(--warn); }
.col-budget-delta[data-state="bad"]  { color: var(--bad); }

/* ------- PO tile = base .tile anatomy verbatim. Only two hooks added,
   neither of which affects PO Overview's own tiles:
     - a status pill living in the SKU row (right-aligned)
     - the foreign-currency note reuses .tile-incoming muted styling ------- */
.tile-sku .tile-status { margin-left: auto; }
.tile-cur {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
/* Shipment badge — shown only when a PO is split across exit dates */
.tile-shp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tile-shp[hidden] { display: none; }
/* Complete = every line fully received. Stays on the board (awaiting posting /
   payment) but matted so it's clearly only here for payment reasons. */
.tile.is-complete { opacity: 0.55; }
.tile.is-complete:hover { opacity: 0.82; }
/* PAID = posted/booked in BC — distinct dark pill so it's clearly that state */
.tile-status[data-status="paid"] {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}
/* Amount + supplier on one line: amount left, supplier pushed right */
.tile-stats--split { width: 100%; }
.tile-supplier {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  text-align: right;
  padding-left: 8px;
}
/* Selected shipment row in the detail panel */
.panel-other-row.is-selected {
  border-color: var(--ink);
  background: var(--bg);
}

/* ------- Panel timeline (PO dates) — type scale matches panel rows ------- */
.panel-timeline { display: flex; flex-direction: column; gap: 0; }
.tl-step {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.tl-step:last-of-type { border-bottom: 0; }
.tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  justify-self: center;
}
.tl-step.is-active .tl-dot { background: var(--accent); border-color: var(--accent); }
.tl-label { font-size: 12.5px; color: var(--ink-soft); }
.tl-step.is-active .tl-label { color: var(--ink); font-weight: 500; }
.tl-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.tl-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .kpi-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .kpi { border-bottom: 1px solid var(--line); padding: 12px 16px; }
}

/* ------- Settings modal (annual budget, extensible) ------- */
.settings { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.settings[aria-hidden="false"] { pointer-events: auto; }
.settings-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0);
  transition: background 0.15s ease;
}
.settings[aria-hidden="false"] .settings-scrim { background: rgba(10, 10, 10, 0.18); }
.settings-card {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -47%);
  width: min(760px, 94vw);
  max-height: 90vh;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: flex; flex-direction: column;
}
.settings[aria-hidden="false"] .settings-card { opacity: 1; transform: translate(-50%, -50%); }
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.settings-title { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 400; }
.settings-body { padding: 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; overflow-y: auto; flex: 1 1 auto; }
.settings-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.settings-field--wide { grid-column: 1 / -1; } /* tall fields span the full width */
@media (max-width: 560px) { .settings-body { grid-template-columns: 1fr; } }
.settings-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute);
}
.settings-field input,
.settings-field textarea {
  font: inherit; font-family: var(--font-mono); font-size: 15px;
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink); outline: none;
}
.settings-field textarea { resize: vertical; min-height: 44px; line-height: 1.5; }
.settings-field input:focus,
.settings-field textarea:focus { border-color: var(--ink); }
/* Repeatable account rows (one field per account + add/remove). */
.excl-list { display: flex; flex-direction: column; gap: 8px; }
.excl-list:empty { display: none; }
.excl-row { display: flex; align-items: center; gap: 8px; }
.excl-row input { flex: 1 1 auto; }
/* SKU supersession table (retired → replacement). */
.merge-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.merge-row { display: grid; grid-template-columns: 1fr 22px 1fr 34px; align-items: center; gap: 8px; }
.merge-row input { width: 100%; }
.merge-arrow { text-align: center; color: var(--ink-mute); font-family: var(--font-mono); }
.merge-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.merge-head span { padding: 0 2px; }
.merge-empty { font-size: 12px; color: var(--ink-mute); padding: 4px 0; }

/* What-if scenarios: grouped tab bar over the decision-factors table in the pending sideboard. */
.scn-wrap { margin-bottom: 6px; }
.scn-groups { display: flex; flex-wrap: wrap; gap: 10px 48px; margin-bottom: 12px; align-items: flex-start; }
.scn-group { min-width: 0; }
.scn-group--alt { padding-left: 16px; border-left: 1px solid var(--line); }
.scn-df { margin-top: 24px; }
.scn-grouplbl { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); font-weight: 600; margin: 0 0 5px 2px; }
.scn-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.scn-tab { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.scn-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.scn-tab.is-sel { background: #2f5aa0; color: #fff; border-color: #24487f; }
.scn-tab.is-sel .scn-tab-stat { color: #d4e0f2; }
/* The live active scenario always carries a bold ring so it's obvious while clicking through. */
.scn-tab.is-activecase { border-color: #2f5aa0; box-shadow: 0 0 0 2px rgba(47,90,160,.35); }
.scn-tab.is-activecase.is-sel { box-shadow: 0 0 0 2px rgba(47,90,160,.55); }
.scn-tab-stat { font-weight: 600; color: var(--ink-mute); font-size: 10px; }
.scn-tab-add { color: #24487f; background: #eef3fb; border-color: #cfdcf1; box-shadow: none; }
.scn-tab-add:hover { background: #e0eaf7; }
.scn-tab-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.scn-tab-acts .scn-sp { flex: 1 1 auto; }
.scn-by { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.scn-active-lbl { font-family: var(--font-sans); font-size: 12px; color: var(--positive); font-weight: 600; }
.scn-del { color: var(--ink-mute); }
.cq-scen-badge { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #24487f; background: #eef3fb; border: 1px solid #cfdcf1; border-radius: 4px; padding: 2px 6px; vertical-align: middle; }
body.is-readonly .scn-tab-add, body.is-readonly .scn-tab-acts .appr-btn { opacity: .5; pointer-events: none; }

/* Site-styled modal (replaces browser prompt/confirm). */
.ui-modal-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(28,27,25,.38); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-modal { width: min(420px, 94vw); background: var(--bg-elev, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.22); padding: 22px; }
.ui-modal-title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ui-modal-body { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 14px; }
.ui-modal-input { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; margin-bottom: 14px; }
.ui-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.ui-modal-btn { font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-soft); }
.ui-modal-cancel:hover { border-color: var(--line-strong); color: var(--ink); }
.ui-modal-ok { background: #2f5aa0; color: #fff; border-color: #24487f; }
.ui-modal-ok:hover { background: #24487f; }
.ui-modal-ok.is-danger { background: var(--bad); border-color: #a52717; }
.excl-del {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink-mute); cursor: pointer; font-size: 14px; line-height: 1;
}
.excl-del:hover { color: var(--ink); border-color: var(--line-strong); }
.excl-add {
  font: inherit; font-size: 12.5px; color: var(--ink-soft);
  background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px; cursor: pointer; width: 100%; transition: all 0.15s ease;
}
.excl-add:hover { color: var(--ink); background: var(--bg-elev); }
.settings-hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
/* Read-only users: hide approve + settings-save controls; disable settings inputs. */
.settings-readonly-note { display: none; font-family: var(--font-mono); font-size: 11px; color: var(--warn); margin-right: auto; align-self: center; }
body.is-readonly .settings-readonly-note { display: inline; }
body.is-readonly .settings-save { display: none; }
body.is-readonly .settings-body input,
body.is-readonly .settings-body textarea,
body.is-readonly .excl-add,
body.is-readonly .excl-del,
body.is-readonly .settings-families input { pointer-events: none; opacity: 0.55; }
body.is-readonly .appr-btn { pointer-events: none; opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }
/* Users & access admin (only admins see it). */
body.is-readonly #usersAdmin { display: none; }
.users-list { display: flex; flex-direction: column; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 8px; }
.user-row .u-email { flex: 1 1 auto; font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.user-row select, .user-add select {
  font: inherit; font-size: 12.5px; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--ink);
}
.u-boot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.user-add { display: flex; gap: 8px; align-items: center; }
.user-add input { flex: 1 1 auto; }
.user-add-btn { width: auto; white-space: nowrap; }
.settings-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}
.settings-cancel, .settings-save {
  font: inherit; font-size: 12.5px; height: 32px; padding: 0 16px;
  border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.settings-cancel { background: var(--bg-elev); color: var(--ink-soft); }
.settings-cancel:hover { border-color: var(--line-strong); color: var(--ink); }
.settings-save { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.settings-save:hover { opacity: 0.9; }

/* ------- Top-level tabs (Planner / History) ------- */
/* Centered segmented menu in the top bar */
.tabs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; gap: 2px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.tab {
  font: inherit; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  background: transparent; border: 0; color: var(--ink-mute);
  padding: 6px 18px; border-radius: 999px; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  /* Flatten line-height so the label and the badge share one centre line. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; position: relative; line-height: 1;
}
.tab:hover:not(.is-active) { color: var(--ink); }
.tab.is-active { background: var(--accent); color: var(--accent-fg); }

/* Red alert badge on the Pending tab (count of items needing approval) */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #d64545; color: #fff;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700; line-height: 1;
}
.tab-badge[hidden] { display: none; }
.tab-badge--green { background: var(--positive); }

/* Approvals mode hides the Pending/Posted view pills + Confirm box, and swaps
   the 4th KPI slot to the "Approved" overview instead. */
body.is-approvals #viewBar,
body.is-approvals #kpiConfirm { display: none !important; }
#kpiApproved { display: none; }
body.is-approvals #kpiApproved { display: flex; }

/* Approve button + approved-by markers on tiles */
.tile-approval { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Keep Pending tiles the SAME height whether they show an Approve button (awaiting) or just the
   "✓ Approved by" text (confirmed): give the footer a fixed content height and center it. */
body.is-approvals .tile-approval { min-height: 30px; display: flex; flex-direction: column; justify-content: center; }
.appr-btn {
  width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-fg);
  font: inherit; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s ease;
}
.appr-btn:hover { opacity: 0.85; }
.appr-by, .appr-auto {
  display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
}
.appr-by { color: #2f7d4f; }
.tile.is-approved { opacity: 0.72; }
.tile-approved-by {
  margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: #2f7d4f;
}

/* Approval action bar in the detail panel */
.panel-approval { background: var(--bg-elev); }
.panel-appr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-appr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panel-appr-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
.panel-appr-pending { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.panel-approval .appr-btn { width: auto; flex: 0 0 auto; padding: 8px 16px; }
.appr-btn--ghost {
  background: transparent; color: #d64545;
  border: 1px solid var(--line-strong);
}
.appr-btn--ghost:hover { background: rgba(214, 69, 69, 0.08); opacity: 1; }
/* ------- Bestseller tab: sortable top-30 table ------- */
.bestseller { padding: 8px 24px 40px; }
.bs-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 16px; }
.bs-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
/* Two-tier hierarchy: primary = what to group by; secondary = how to slice it. */
.bs-head-secondary { border-top: 1px solid var(--line); padding-top: 10px; }
.bs-head-secondary .bs-export { margin-left: auto; }
.bs-title { font-family: var(--font-sans); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.bs-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.bs-modes { display: inline-flex; gap: 2px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.bs-mode {
  font: inherit; font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  background: transparent; border: 0; color: var(--ink-mute);
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
}
.bs-mode:hover:not(.is-active) { color: var(--ink); }
.bs-mode.is-active { background: var(--accent); color: var(--accent-fg); }
.bs-groups { margin-right: 4px; }
.bs-catchips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bs-chip { font: inherit; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-soft); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.bs-chip:hover:not(.is-active) { border-color: var(--line-strong); color: var(--ink); }
.bs-chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.bs-export {
  margin-left: auto; font: inherit; font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer;
}
.bs-export:hover { background: var(--bg); }
.bs-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.bs-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }
.bs-table th, .bs-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bs-table thead th {
  position: sticky; top: 0; background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink-mute); user-select: none;
}
.bs-table th.bs-sortable { cursor: pointer; }
.bs-table th.bs-sortable:hover { color: var(--ink); }
.bs-table th.is-sorted { color: var(--ink); }
.bs-table td.bs-num, .bs-table th.bs-num { text-align: right; font-family: var(--font-mono); }
.bs-table td.bs-rank { color: var(--ink-mute); }
/* Divider before each period group (value+qty of the same period read together) */
.bs-table th.bs-group-start, .bs-table td.bs-group-start { border-left: 1px solid var(--line); }
.bs-table th.bs-group-start { padding-left: 16px; }
.bs-table td.bs-group-start { padding-left: 16px; }
.bs-table tbody tr:hover { background: var(--bg-elev); }
.bs-table tbody tr:last-child td { border-bottom: 0; }
.bs-table tfoot .bs-total td { border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--bg-elev); font-weight: 600; color: var(--ink); position: sticky; bottom: 0; }
.bs-empty { padding: 24px; color: var(--ink-mute); text-align: center; font-family: var(--font-mono); font-size: 12px; }
.bs-table tr.bs-row { cursor: pointer; }
.bs-table tr.bs-row.is-expanded { background: var(--bg-elev); }
.bs-table tr.bs-detail td { padding: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
/* Clean KPI cards (overview) — sans font, big light numbers. */
.fc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.fc-kpi { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.fc-kpi-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.fc-kpi-val { font-family: var(--font-sans); font-size: 24px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.fc-kpi-val em { font-style: normal; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.fc-kpi-val em.bs-up { color: var(--positive); }
.fc-kpi-val em.bs-down { color: var(--bad); }
.fc-kpi-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.fc-chart { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); padding: 12px 16px; margin: 0 0 14px; }
.fc-chart .bs-chart-svg { width: 100%; height: auto; }
.fc-bar { fill: var(--accent); opacity: 0.85; }
.fc-bar:hover { opacity: 1; }
.fc-outlier { color: var(--warn); cursor: help; }
.fc-line-fcst { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.8; }
.fc-dot-fcst { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 2; opacity: 0.8; }
.fc-divider { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.fc-now-label { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; }
.fc-stats { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 2px 0 12px; }
.fc-stat { display: flex; flex-direction: column; gap: 2px; }
.fc-stat b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.fc-stat b.bs-up { color: var(--positive); }
.fc-stat b.bs-down { color: var(--bad); }
.fc-stat em { font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.fc-legend { display: flex; gap: 18px; margin: 2px 0 6px; }
.fc-leg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.fc-leg i { width: 22px; height: 4px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.fc-leg b { color: var(--ink); font-weight: 600; }
.fc-leg-actual { background: var(--accent); }
.fc-leg-fcst { background: repeating-linear-gradient(90deg, #111 0 6px, transparent 6px 10px); }
.fc-leg-inc { width: 13px; height: 10px; border-radius: 2px; border-top: 2px solid #2f6fae; background: linear-gradient(#2f6fae 0%, rgba(47,111,174,0.12) 100%); opacity: 0.85; }
#forecastView .bs-line, #forecastView .fc-line-fcst { stroke-width: 2.6; }
#forecastView .bs-chart-svg { max-height: 320px; }
.fc-inc-bar { opacity: 1; }
.fc-inc-cap { fill: #2f6fae; }
.fc-inc-tick { fill: #2f6fae; opacity: 0.7; }
.fc-inc-lbl { fill: #2f6fae; font-family: var(--font-mono); font-size: 10px; }
.app-version { position: fixed; bottom: 8px; right: 10px; z-index: 40; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.03em; opacity: 0.45; pointer-events: none; user-select: none; }
.settings-card.beta-card { width: min(460px, 92vw); height: auto; }
.beta-modal-body { padding: 20px 22px 24px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.beta-modal-body p { margin: 0 0 12px; }
.beta-modal-body p:last-child { margin: 0; color: var(--ink-mute); }
.fc-help { display: block; margin-top: 2px; }
.fc-ctl-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); align-self: center; }
.fc-search { font: inherit; font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink); outline: none; min-width: 150px; }
.fc-search:focus { border-color: var(--ink); }
.fc-trend { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); margin: 0 0 12px; }
.fc-trend b.bs-up { color: var(--positive); } .fc-trend b.bs-down { color: var(--bad); }
.bs-qtyscope { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.bs-qtyscope-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.bs-qtyscope-hint { font-size: 12px; color: var(--ink-mute); }
.bs-cat-chart { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); margin: 0 0 14px; }
.bs-cat-chart-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); padding: 12px 20px 0; }
/* The expanded chart sits in a cell that starts at the name column (a spacer cell
   fills the # column), so a normal cell-sized inset lines it up with the columns. */
.bs-chart { padding: 16px 14px 18px; }
.bs-detail-pad { padding: 0; }
/* Stats column on the left, chart on the right — balanced, never squeezed. */
.bs-chart-main { display: flex; flex-wrap: wrap; gap: 22px 34px; align-items: flex-end; }
/* Stats column sizes to its content (so year columns never overlap), with a min width
   to keep the chart start reasonably stable between single- and multi-series. */
.bs-chart-side { flex: 0 0 auto; min-width: 300px; }
.bs-chart-plot { flex: 1 1 320px; min-width: 300px; }
.bs-chart-plot .bs-chart-svg { width: 100%; height: auto; max-height: 230px; display: block; }
/* One consistent stats matrix: metric rows × series columns. Same in every view. */
.bs-matrix { display: inline-grid; gap: 7px 40px; margin: 0 0 12px; align-items: baseline; }
.bs-mh { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.bs-mh i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.bs-ml { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.bs-mv { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.bs-mv .bs-up { color: var(--positive); }
.bs-mv .bs-down { color: var(--bad); }
.bs-shares { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-bottom: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.bs-shares span { display: flex; flex-direction: column; gap: 2px; }
.bs-shares em { font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.bs-shares b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.bs-trend { margin-left: 6px; font-size: 10px; cursor: help; vertical-align: middle; }
.bs-trend--up { color: var(--positive); }
.bs-trend--down { color: var(--ink-mute); }
.bs-sku { }
.bs-chart-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bs-seg { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.bs-seg-btn { font: inherit; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; background: transparent; border: 0; color: var(--ink-mute); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.bs-seg-btn:hover:not(.is-active) { color: var(--ink); }
.bs-seg-btn.is-active { background: var(--accent); color: var(--accent-fg); }
.bs-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.bs-chart-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.bs-chart-avg { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.bs-chart-svg { width: 100%; height: auto; display: block; max-height: 210px; }
.bs-chart-empty { padding: 18px 4px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; }
.bs-area { stroke: none; }
.bs-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bs-dot { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 2; }
.bs-avg { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 5 4; }
.bs-vlabel { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 10px; }
.bs-xlabel { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 9.5px; }

/* Top-seller highlight — a PO/quote that contains a top-30 best-selling SKU */
.tile.has-topseller {
  border-color: #b07d2b;
  box-shadow: inset 0 0 0 1px #b07d2b, 0 0 0 1px rgba(176, 125, 43, 0.25);
}
/* Strategic is the priority view: a SKU that is both counts/renders as strategic. */
.tile.has-strategic {
  border-color: #6c8caf;
  box-shadow: inset 0 0 0 1px #6c8caf, 0 0 0 1px rgba(108, 140, 175, 0.25);
}
.tile-topseller {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em;
  color: #8a5a12; background: rgba(176, 125, 43, 0.12);
  border: 1px solid rgba(176, 125, 43, 0.35); border-radius: 999px;
  padding: 2px 7px;
}
.panel-other-row.is-topseller {
  background: rgba(176, 125, 43, 0.07);
  border-left: 2px solid #b07d2b;
}
.line-topseller {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  color: #8a5a12; margin-left: 6px; white-space: nowrap;
}

/* Approved overview panel — grouped by approval day, PO number prominent */
.appr-day { margin-bottom: 18px; }
.appr-day-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-mute); padding: 0 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.appr-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 2px;
}
.appr-row + .appr-row { border-top: 1px solid var(--line); }
.appr-row-main { min-width: 0; }
.appr-row-no { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.appr-row-ref { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.appr-row-meta { font-family: var(--font-mono); font-size: 10.5px; color: #2f7d4f; margin-top: 3px; }
.appr-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.appr-row-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.appr-row.is-unseen { border-left: 2px solid var(--positive); padding-left: 8px; margin-left: -10px; background: rgba(31, 107, 58, 0.05); }
.appr-new { display: inline-block; margin-left: 8px; vertical-align: middle; background: var(--positive); color: #fff; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 999px; }
.appr-day-new { color: var(--positive); }
.appr-seen-btn { font: inherit; font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.appr-seen-btn:hover { background: var(--bg); color: var(--ink); }
.appr-seen-tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-mute); }
.appr-markall { margin-top: 8px; font: inherit; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; background: transparent; color: var(--positive); border: 1px solid var(--positive); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.appr-markall:hover { background: rgba(31, 107, 58, 0.08); }
/* The "New approvals" count turns green while there are unseen approvals */
#kpiApproved.has-unseen .kpi-value { color: var(--positive); }

/* Full-width muted note shown when a quote has been converted to a PO */
.panel-appr-note {
  margin-top: 10px; padding: 9px 12px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
}

/* ------- History view ------- */
.history { height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 20px 24px 40px; }
.history[hidden] { display: none; }
.history-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.history-search { width: min(420px, 100%); margin: 0; }
.history-hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.history-results { display: flex; flex-direction: column; gap: 14px; }

.hist-empty {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute);
  text-align: center; padding: 48px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.hist-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); padding: 14px 16px;
}
.hist-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 8px;
}
.hist-sku { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.hist-name { font-size: 13px; color: var(--ink-soft); margin-left: 8px; }
.hist-tot { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.hist-tot b { color: var(--ink); font-weight: 500; }

.hist-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr auto 0.6fr 0.8fr 1fr;
  gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.hist-row:last-child { border-bottom: 0; }
.hist-row .mono { font-family: var(--font-mono); font-size: 11.5px; }
.hist-row .num { text-align: right; font-family: var(--font-mono); }
.hist-ref { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-row--head {
  font-family: var(--font-sans); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-mute); border-bottom: 1px solid var(--line);
}
.hist-row--head .num { font-family: var(--font-sans); }
.hist-tag {
  font-family: var(--font-sans); font-size: 8px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--ink-mute); background: var(--bg);
}
.hist-tag.paid { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }

/* ------- History: calendar-style columns of SKU-purchase tiles ------- */
.history-summary { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.history-summary b { color: var(--ink); font-weight: 500; }
.history-cal {
  display: flex; gap: 12px; overflow-x: auto;
  height: calc(100vh - var(--topbar-h) - 96px);
  padding-bottom: 8px;
}
.history-cal .col { flex: 0 0 230px; width: 230px; background: var(--bg); height: 100%; }
.hist-tile .tile-sku { gap: 8px; }
.hist-tile .tile-sku .hist-tag { margin-left: auto; }
.hist-tile-ref {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* GLOBAL hidden override — must beat .calendar/.kpi-rail display:grid so tab
   switching (and any [hidden] toggle) actually hides the element. */
[hidden] { display: none !important; }

/* ------- History multi-select token box (SKUs + families) ------- */
.tokenbox {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 10px; min-height: 30px; width: min(540px, 56vw); margin: 0 6px;
  transition: border-color 0.15s ease;
}
.tokenbox:focus-within { border-color: var(--ink); }
.token-chips { display: contents; }
.token-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; background: var(--accent); color: var(--accent-fg);
  border-radius: 999px; padding: 2px 4px 2px 9px; white-space: nowrap;
}
.token-chip--family { background: var(--ink-soft); }
.token-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 10px; padding: 0 2px; opacity: 0.8; line-height: 1; }
.token-x:hover { opacity: 1; }
.tokenbox input { flex: 1; min-width: 120px; border: 0; background: transparent; outline: none; font: inherit; color: var(--ink); height: 22px; }
.token-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  width: min(540px, 56vw); max-height: 300px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 4px;
}
.token-suggest[hidden] { display: none; }
.token-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.token-opt:hover { background: var(--bg-elev); }
.token-opt-tag {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; flex: 0 0 auto;
}

/* ------- History filter dropdowns (Family / SKU) ------- */
.dd { position: relative; display: inline-block; }
.dd-btn { cursor: pointer; white-space: nowrap; }
.dd-count { font-family: inherit; font-size: inherit; }
.dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 6px;
}
.dd-panel[hidden] { display: none; }
.dd-search {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev); padding: 6px 8px; font: inherit; font-size: 12px; outline: none; margin-bottom: 6px;
}
.dd-search:focus { border-color: var(--ink); }
.dd-list { display: flex; flex-direction: column; }
.dd-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.dd-opt:hover { background: var(--bg-elev); }
.dd-opt input { accent-color: var(--accent); }
.dd-empty { font-size: 12px; color: var(--ink-mute); padding: 8px; }

/* Settings: active-families checklist */
.settings-families {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px;
}

/* ------- History filter popover (behind the Filters icon) ------- */
.filter-pop {
  position: fixed; z-index: 80; width: 340px; max-height: 64vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16); padding: 8px 10px 12px;
}
.filter-pop[hidden] { display: none; }
.filter-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute);
}
.filter-clear { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.filter-clear:hover { color: var(--ink); }
.filter-pop-sec { padding: 6px 0; }
.filter-pop-sec + .filter-pop-sec { border-top: 1px solid var(--line); }
.filter-pop-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); padding: 4px 4px 6px; }
.dd-list--scroll { max-height: 210px; overflow-y: auto; }
.dd-btn svg { vertical-align: -1px; margin-right: 2px; }

/* History: Filter toggle reveals Family + SKU buttons */
.filter-btns { display: inline-flex; gap: 6px; align-items: center; }
.filter-btns[hidden] { display: none; }
.dd-opt-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.dd-opt input[type=checkbox] { flex: 0 0 auto; }

/* History date-range popover */
.date-presets { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.date-preset { text-align: left; font: inherit; font-size: 12.5px; background: transparent; border: 0; color: var(--ink); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.date-preset:hover { background: var(--bg-elev); }
.date-custom { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.date-custom label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.date-custom input { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev); padding: 4px 6px; color: var(--ink); }
.date-apply { font: inherit; font-size: 12px; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 6px; cursor: pointer; margin-top: 2px; }
.date-apply:hover { opacity: 0.9; }

/* History date popover: month tiles */
.date-yearnav { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; }
#dateYearLabel { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px; }
.month-tile { font: inherit; font-size: 11.5px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 0; cursor: pointer; color: var(--ink); }
.month-tile:hover { border-color: var(--line-strong); }
.month-tile.is-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* Mutually-exclusive category options (disabled when another category is active) */
.dd-opt.is-disabled { opacity: 0.4; cursor: not-allowed; }
.dd-opt.is-disabled input { cursor: not-allowed; }

/* History window arrows: stay in place, muted when a filter is active */
.hist-winnav { display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.15s ease; }
.hist-winnav.is-muted { opacity: 0.4; pointer-events: none; }

/* Clear-filters button (shows only when filters are active) */
.clear-filters {
  font: inherit; font-size: 12px; background: transparent; border: 1px solid var(--line);
  border-radius: 999px; height: 26px; padding: 0 12px; cursor: pointer; color: var(--ink-soft);
  white-space: nowrap; transition: all 0.15s ease;
}
.clear-filters:hover { border-color: var(--line-strong); color: var(--ink); }
.clear-filters[hidden] { display: none; }

/* ============================================================================
 * Replenishment tab — scoped under #replenishmentView so it never affects the
 * Planner / History / Bestseller / Forecast views. Reuses the global .tile,
 * .fc-kpi, .bs-* base styles; adds the reorder-tile internals + Create-quote /
 * Units-list modals. (Ported from the Replenishment prototype.)
 * ==========================================================================*/
#replenishmentView .rp-kpi-action{cursor:pointer}
#replenishmentView .rp-kpi-action:hover{border-color:var(--line-strong)}
#replenishmentView .sa-sec{display:flex;align-items:baseline;gap:10px;margin:24px 0 8px}
#replenishmentView .sa-sec h2{font-family:var(--font-sans);font-size:13px;font-weight:600;margin:0;color:var(--ink)}
/* Supplier divider — same understated style as before, just larger + black so the shift
   from one supplier to the next reads clearly. */
#replenishmentView .sa-supplier{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line-strong)}
#replenishmentView .sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:stretch}
#replenishmentView .tile-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:22px}
#replenishmentView .tile-flag{display:inline-block;font-family:var(--font-sans);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:3px}
#replenishmentView .tile-flag.new{color:var(--accent-fg);background:var(--accent);border:1px solid var(--accent)}
#replenishmentView .rtag{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 9px;border-radius:4px}
#replenishmentView .rtag[data-k="bad"]{color:var(--bad);background:rgba(138,31,31,.08);border:1px solid rgba(138,31,31,.25)}
#replenishmentView .rtag[data-k="warn"]{color:var(--warn);background:rgba(162,107,0,.08);border:1px solid rgba(162,107,0,.25)}
#replenishmentView .rtag[data-k="ok"]{color:var(--positive);background:rgba(31,107,58,.08);border:1px solid rgba(31,107,58,.25)}
#replenishmentView .tile-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:2px}
#replenishmentView .tile-metrics--sep{margin-top:8px}
#replenishmentView .mrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted rgba(0,0,0,.06)}
#replenishmentView .mrow .k{font-family:var(--font-sans);font-size:10.5px;color:var(--ink-mute)}
#replenishmentView .mrow .v{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink)}
#replenishmentView .mrow .v[data-c="bad"]{color:var(--bad)}
#replenishmentView .mrow .v[data-c="warn"]{color:var(--warn)}
#replenishmentView .mrow .v[data-c="ok"]{color:var(--positive)}
#replenishmentView .tile-metrics .mrow.moneyrow{grid-column:1}
#replenishmentView .tile-metrics .mrow.moneyrow .k{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#replenishmentView .tile-metrics .mrow.moneyrow .v{flex:0 0 auto;white-space:nowrap}
#replenishmentView .tile-hint{margin-top:7px;font-family:var(--font-sans);font-size:10.5px;line-height:1.4;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
#replenishmentView .tile-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:8px}
#replenishmentView .tile-foot .tile-topseller{margin:0;align-self:flex-start}
#replenishmentView .tile-approval{margin:0;padding-top:8px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
#replenishmentView .tile-approval .appr-btn{width:auto;flex:0 0 auto;padding:6px 12px;font-size:11px}
#replenishmentView .tile-order{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);line-height:1.45}
#replenishmentView .tile-order b{color:var(--ink);font-weight:500}
#replenishmentView .tile.is-ordered{opacity:.62}
/* Create-quote (consolidation) modal */
#replenishmentView .cq{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center}
#replenishmentView .cq.open{display:flex}
/* Portal: when the create-quote modal is opened from the Pending tab, reveal the RP section
   but show ONLY the modal (its own header/grid/other drawers stay hidden behind the scrim). */
#replenishmentView.cq-portal{display:block!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
#replenishmentView.cq-portal > :not(#rpCq){display:none!important}
#replenishmentView .cq-scrim{position:absolute;inset:0;background:rgba(10,10,10,.32)}
#replenishmentView .cq-card{position:relative;width:min(1000px,95vw);max-height:90vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden}
#replenishmentView .cq-head{padding:18px 22px 4px}
#replenishmentView .cq-head h2{font-family:var(--font-sans);font-size:17px;font-weight:700;margin:0}
#replenishmentView .cq-head .sup{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);margin-top:4px}
#replenishmentView .cq-note{font-size:12px;color:var(--ink-soft);margin:10px 22px 0;line-height:1.5}
#replenishmentView .cq-note b{color:var(--ink);font-weight:600}
#replenishmentView .cq-body{overflow:auto;padding:12px 22px 4px}
#replenishmentView .cq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:10px}
#replenishmentView .cq-tile{transition:opacity .12s ease}
#replenishmentView .cq-tile.is-off{opacity:.38}
#replenishmentView .cq-bottom{margin-top:auto}
#replenishmentView .cq-tile .tile-foot{margin-top:8px}
#replenishmentView .cq-tilefoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding-top:8px}
#replenishmentView .cq-add{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--ink);cursor:pointer}
#replenishmentView .cq-qty{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:5px}
#replenishmentView .cq-qty input{width:60px;height:28px;border:1px solid var(--line);border-radius:6px;font-family:var(--font-mono);font-size:12px;text-align:right;padding:0 6px;background:var(--bg-elev);color:var(--ink)}
#replenishmentView .cq-cap{grid-column:1/-1;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding-bottom:1px}
#replenishmentView .cq-tsslot{min-height:18px;display:flex;align-items:flex-start}
#replenishmentView .cq-tsslot .tile-topseller{margin:0}
#replenishmentView .cq-foot{display:flex;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg-elev)}
#replenishmentView .cq-foot .tot{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
#replenishmentView .cq-foot .tot b{color:var(--ink)}
#replenishmentView .cq-foot .sp{margin-left:auto}
#replenishmentView .cq-cancel{font-family:var(--font-sans);font-size:13px;border:1px solid var(--line-strong);background:var(--bg-elev);border-radius:8px;padding:9px 15px;cursor:pointer;color:var(--ink)}
#replenishmentView .cq-create{font-family:var(--font-sans);font-size:13px;font-weight:500;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);border-radius:8px;padding:9px 16px;cursor:pointer}
#replenishmentView .cq-create:disabled{opacity:.4;cursor:not-allowed}
#replenishmentView .cq-form{padding:14px 22px 6px;display:flex;flex-direction:column}
#replenishmentView .cq-form .set-field input{width:100%;max-width:360px}
#replenishmentView .cq-done{padding:34px 26px;text-align:center}
#replenishmentView .cq-done .big{font-family:var(--font-serif),Georgia,serif;font-size:24px;margin-bottom:8px}
#replenishmentView .cq-done .sub{font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:460px;margin:0 auto}
#replenishmentView .set-field{display:flex;flex-direction:column;gap:5px;padding:14px 0;border-bottom:1px solid var(--line)}
#replenishmentView .set-field .l{font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--ink)}
#replenishmentView .set-field .h{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);line-height:1.5}
#replenishmentView .set-field input{width:200px;height:34px;border:1px solid var(--line);border-radius:7px;font-family:var(--font-mono);font-size:13px;padding:0 10px;background:var(--bg-elev);color:var(--ink)}
/* Units-to-order list drawer */
#replenishmentView .uv{position:fixed;inset:0;z-index:80;display:none}
#replenishmentView .uv.open{display:block}
#replenishmentView .uv-scrim{position:absolute;inset:0;background:rgba(10,10,10,.28)}
#replenishmentView .uv-card{position:absolute;top:0;right:0;height:100%;width:min(600px,94vw);background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.10)}
#replenishmentView .uv-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
#replenishmentView .uv-head h2{font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0}
#replenishmentView .uv-head .bs-export{margin-left:auto}
#replenishmentView .uv-close{border:0;background:transparent;font-size:18px;color:var(--ink-mute);cursor:pointer}
#replenishmentView .uv-body{overflow:auto}
#replenishmentView .uv-total{display:flex;align-items:baseline;justify-content:space-between;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg-elev)}
#replenishmentView .uv-total .k{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
#replenishmentView .uv-total .v{font-family:var(--font-mono);font-size:16px;font-weight:600}

/* Replenishment: tile action buttons, what-if + snooze modals (scoped) */
#replenishmentView .rp-foot{display:flex;flex-direction:column;gap:8px;width:100%}
#replenishmentView .rp-btnrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#replenishmentView .rp-btnrow .appr-btn{width:auto;flex:0 0 auto}
#replenishmentView .appr-btn.rp-mini{padding:5px 9px;font-size:10.5px}
#replenishmentView .rp-kpi-action{cursor:pointer}
#replenishmentView .cq-card.rp-wi-card{width:min(560px,95vw)}
#replenishmentView .cq-card.rp-sn-card{width:min(430px,95vw)}
#replenishmentView .rp-wi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:12px 22px 4px}
#replenishmentView .rp-wi-field{display:flex;flex-direction:column;gap:4px}
#replenishmentView .rp-wi-field label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute)}
#replenishmentView .rp-wi-field input{height:32px;border:1px solid var(--line);border-radius:7px;font-family:var(--font-mono);font-size:13px;padding:0 10px;background:var(--bg-elev);color:var(--ink)}
#replenishmentView .rp-wi-res{margin:6px 22px 2px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elev)}
#replenishmentView .rp-sn-opts{display:flex;flex-direction:column;gap:8px;padding:14px 22px 4px}
#replenishmentView .rp-sn-opts button{text-align:left;padding:11px 13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-elev);cursor:pointer;font-size:13px;color:var(--ink);font-family:var(--font-sans)}
#replenishmentView .rp-sn-opts button:hover{border-color:var(--accent)}
#replenishmentView .tile-flag.rp-snoozed-tag{color:var(--ink-mute);background:var(--bg);border:1px solid var(--line-strong)}
/* Replenishment: gear dropdown (What-if / Snooze) next to Create quote */
#replenishmentView .rp-gearwrap{position:relative;display:inline-flex}
#replenishmentView .appr-btn.rp-gear{padding:5px 10px;font-size:14px;line-height:1}
#replenishmentView .rp-menu{position:absolute;right:0;bottom:calc(100% + 4px);background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:4px;min-width:160px;z-index:40;display:flex;flex-direction:column;gap:2px}
#replenishmentView .rp-menu[hidden]{display:none}
#replenishmentView .rp-menu button{text-align:left;padding:8px 10px;border:0;background:transparent;border-radius:6px;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:var(--font-sans)}
#replenishmentView .rp-menu button:hover{background:var(--bg-elev)}

/* Settings modal — tabbed layout (General / Bestseller data / Master data / Users) */
.settings-tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.settings-tab{border:0;background:transparent;padding:10px 12px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--ink-mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.settings-tab:hover{color:var(--ink)}
.settings-tab.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.stab-panel[hidden]{display:none}
.md-note{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);margin:0 0 12px;line-height:1.5}
.md-search{width:100%;max-width:320px;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--bg-elev);padding:0 12px;font-size:13px;color:var(--ink);margin-bottom:12px}
.md-table-wrap{max-height:52vh;overflow:auto}

/* --- Replenishment tweaks: gear button (grey, far right, same height), dialog scroll, stable settings size --- */
#replenishmentView .rp-btnrow{align-items:stretch;flex-wrap:nowrap}
#replenishmentView .rp-gearwrap{margin-left:auto}
#replenishmentView .appr-btn.rp-gear{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-mute);background:var(--bg-elev);border:1px solid var(--line);padding:0 11px}
#replenishmentView .appr-btn.rp-gear:hover{color:var(--ink);border-color:var(--line-strong)}
/* Create-quote dialog: make the tile grid scroll INSIDE the modal, not the page behind */
#replenishmentView .cq-body{flex:1 1 auto;min-height:0}
/* Settings modal: hold a fixed body height so it doesn't resize when switching tabs */
.settings-body{height:min(62vh,540px);overflow-y:auto}
/* Replenishment: clickable "On order" value + on-order detail modal width */
#replenishmentView .mrow .v.rp-link{color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
#replenishmentView .mrow .v.rp-link:hover{opacity:.75}
#replenishmentView .cq-card.rp-inc-card{width:min(680px,95vw)}
/* On-order detail modal: balance summary + running availability, colour-coded */
#replenishmentView .rp-inc-sum{margin:12px 22px 4px}
#replenishmentView .rp-inc-cap{margin:12px 22px 0;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
#replenishmentView #rpIncoming .cq-body{padding-top:6px}
#replenishmentView .rp-inc-plus{color:var(--positive)}
#replenishmentView .rp-inc-ref{color:var(--ink-mute);font-size:11.5px}
#rpIncoming [data-c="bad"]{color:var(--bad);font-weight:600}
#rpIncoming [data-c="warn"]{color:var(--warn)}
#rpIncoming [data-c="ok"]{color:var(--positive)}

/* Settings modal: wider + taller, and fix the tabbed layout (panels are block; General is a 2-col grid) */
.settings-card{width:min(940px,96vw)}
.settings-body{display:block;height:min(76vh,720px);overflow-y:auto;padding:20px 22px}
.stab-panel[data-stabpanel="general"]{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;align-content:start}
.stab-panel[data-stabpanel="general"] .settings-field--wide{grid-column:1 / -1}
@media (max-width:640px){.stab-panel[data-stabpanel="general"]{grid-template-columns:1fr}}
#replenishmentView .cq-card.rp-inc-card{width:min(820px,96vw)}
#replenishmentView .rp-inc-recv{color:var(--ink-mute)}
#replenishmentView .rp-inc-pct{color:var(--ink-mute);font-size:10.5px}
/* On-order modal: clean single-padding wrapper so summary + table align */
#replenishmentView .rp-inc-wrap{padding:16px 22px;overflow:auto;flex:1 1 auto;min-height:0}
#replenishmentView .rp-inc-sum{margin:0 0 16px}
#replenishmentView .rp-inc-tbl{width:100%}

/* Create-quote: click the whole tile to add/remove; no checkbox */
#replenishmentView .cq-tile{position:relative;cursor:pointer}
#replenishmentView .cq-tile.is-done{cursor:default}
#replenishmentView .cq-tile.is-on:not(.has-topseller):not(.has-strategic){opacity:1;border-color:var(--positive);box-shadow:inset 0 0 0 1px var(--positive)}
#replenishmentView .cq-tile.is-off{opacity:1}                 /* override old dim; use veil instead */
#replenishmentView .cq-tile.is-off .cq-bottom,
#replenishmentView .cq-tile.is-off .tile-metrics,
#replenishmentView .cq-tile.is-off .tile-tags{filter:grayscale(.4)}
#replenishmentView .cq-addhint{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(252,251,249,.55);border-radius:var(--radius-sm)}
#replenishmentView .cq-addhint span{background:var(--bg);border:1px solid var(--line-strong);border-radius:20px;padding:7px 15px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.10)}
#replenishmentView .cq-tile:hover .cq-addhint{background:rgba(252,251,249,.35)}
#replenishmentView .cq-tilefoot{align-items:center}
#replenishmentView .cq-state-added{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--positive)}
#replenishmentView .cq-state-done{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--ink-mute)}
#replenishmentView .cq-state-hint{font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--ink-mute)}

/* Fix modal scrolling: the inner wrapper must be a flex column so cq-body / rp-inc-wrap scroll INSIDE the card (not the page behind) */
#replenishmentView .cq-card > div{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;max-height:90vh}

/* "Click to add" = plain text (no pill) */
#replenishmentView .cq-addhint span{background:none;border:0;box-shadow:none;padding:0;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink)}
/* On-order table: uniform mono numbers + date aligned on the same baseline */
#replenishmentView .rp-inc-tbl td{font-family:var(--font-mono);font-size:12px;vertical-align:middle}
#replenishmentView .rp-inc-tbl .rp-inc-ref{font-family:var(--font-sans);font-size:11px}

/* Strategic tag (Commercial Strategic Focus) — dusty blue */
#replenishmentView .tile-flag.rp-strategic{color:#37516b;background:rgba(108,140,175,.16);border:1px solid rgba(108,140,175,.45)}
#replenishmentView .cq-strat{margin:8px 22px 0;padding:9px 12px;border-radius:8px;background:rgba(108,140,175,.12);border:1px solid rgba(108,140,175,.38);color:#37516b;font-family:var(--font-sans);font-size:12px;font-weight:500}
/* Settings textarea (strategic SKUs) */
.settings-textarea{width:100%;min-height:80px;border:1px solid var(--line);border-radius:7px;background:var(--bg-elev);padding:8px 10px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);resize:vertical}

/* Bottom-of-tile badges — Top seller + Strategic styled alike, side by side */
#replenishmentView .tile-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#replenishmentView .tile-topseller{display:inline-block;margin:0;font-family:var(--font-sans);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:3px;color:#8a6d1f;background:rgba(191,148,42,.16);border:1px solid rgba(191,148,42,.45)}
#replenishmentView .tile-flag.rp-strategic{font-size:9px;padding:2px 7px}
#replenishmentView .cq-tsslot{gap:6px;flex-wrap:wrap}

/* Replenishment: trend arrow, next-ladder hint, KPI bars + to-order breakdown */
#replenishmentView .rp-trend{font-size:10px;font-weight:700}
#replenishmentView .rp-trend.up{color:var(--positive)}
#replenishmentView .rp-trend.down{color:var(--bad)}
#replenishmentView .rp-trend.flat{color:var(--ink-mute)}
#replenishmentView .rp-nextladder{grid-column:1/-1;margin-top:6px;padding-top:6px;border-top:1px dotted rgba(0,0,0,.10);font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);line-height:1.4;min-height:8px}
#replenishmentView .rp-nextladder b{color:var(--ink);font-weight:600}
#replenishmentView .rp-nextladder .rp-save{color:var(--positive)}
#replenishmentView .rp-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0 6px}
#replenishmentView .rp-bar-fill{display:block;height:100%;border-radius:4px}
#replenishmentView .rp-stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line);margin:8px 0 8px;gap:1px}
#replenishmentView .rp-stack span{display:block;height:100%}
#replenishmentView .rp-legend{display:flex;flex-wrap:wrap;gap:4px 12px}
#replenishmentView .rp-legend-i{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#replenishmentView .rp-dot{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}

/* Replenishment KPI rail: same card design as the Planner, but auto height + 3 columns */
#rpKpis.kpi-rail{height:auto;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr))}
#rpKpis .kpi-bar.rp-stackbar{display:flex;gap:1px}
#rpKpis .kpi-bar.rp-stackbar span{display:block;height:100%}

/* Replenishment KPI: stack value over breakdown so long labels don't overlap; top-align cards */
#rpKpis.kpi-rail{align-items:start}
/* Keep the Planner card layout (value + breakdown side by side); just let the label column
   size to its text and right-align the value, so longer labels don't overlap. */
#rpKpis .kpi-bd{grid-template-columns:auto auto;column-gap:14px;justify-content:space-between}
#rpKpis .kpi-bd-k{display:inline-flex;align-items:center;gap:5px}
#rpKpis .kpi-bd-v{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
/* Trend arrow — one amber arrow, rotated for up / flat / down */
#replenishmentView .rp-trend{color:#bf942a;display:inline-block;font-weight:700;line-height:1}
#replenishmentView .rp-trend{transform-origin:50% 50%}
#replenishmentView .rp-trend[data-t="up2"]{transform:rotate(-90deg);color:var(--positive)}
#replenishmentView .rp-trend[data-t="up1"]{transform:rotate(-45deg);color:var(--positive)}
#replenishmentView .rp-trend[data-t="flat"]{transform:rotate(0deg);color:#bf942a}
#replenishmentView .rp-trend[data-t="down1"]{transform:rotate(45deg);color:var(--bad)}
#replenishmentView .rp-trend[data-t="down2"]{transform:rotate(90deg);color:var(--bad)}
/* Next-ladder mirror block */
#replenishmentView .rp-ladderblock{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
#replenishmentView .rp-ladderblock .cq-cap{color:var(--positive)}

/* Price-ladder table (Create quote) — compact, current tier highlighted, click to snap qty */
#replenishmentView .rp-ladder{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
#replenishmentView .rp-ladder .cq-cap{margin-bottom:4px}
#replenishmentView .rp-ladder-tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11px}
#replenishmentView .rp-ladder-tbl th{font-family:var(--font-sans);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);font-weight:600;text-align:right;padding:2px 4px 3px}
#replenishmentView .rp-ladder-tbl td{padding:3px 4px;color:var(--ink-soft);text-align:right}
#replenishmentView .rp-ladder-tbl td.rp-save{color:var(--positive)}
#replenishmentView .rp-ladder-tbl tr[data-ladderq]{cursor:pointer}
#replenishmentView .rp-ladder-tbl tr[data-ladderq]:hover td{background:rgba(0,0,0,.04)}
#replenishmentView .rp-ladder-tbl tr.is-current td{color:var(--ink);font-weight:600;background:rgba(191,148,42,.12)}

/* Amount-to-order breakdown in a 2+2 grid (wide, not tall — aligns with the other tiles) */
#rpKpis .rp-bd-grid{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:20px;row-gap:3px}
/* Create-quote: ladder scenario chips + 12-mo demand in the decision area */
#replenishmentView .rp-decide{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
#replenishmentView .rp-decide-cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
#replenishmentView .rp-12mo{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);white-space:nowrap}
#replenishmentView .rp-12mo b{color:var(--ink);font-weight:600}
#replenishmentView .rp-chips{display:flex;flex-wrap:wrap;gap:6px}
#replenishmentView .rp-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line-strong);background:var(--bg-elev);border-radius:8px;padding:5px 9px;cursor:pointer}
#replenishmentView .rp-chip .q{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink)}
#replenishmentView .rp-chip .u{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-mute);white-space:nowrap}
#replenishmentView .rp-chip:hover{border-color:var(--accent)}
#replenishmentView .rp-chip.is-active{border-color:var(--accent);background:rgba(31,107,58,.08);box-shadow:inset 0 0 0 1px var(--accent)}
#replenishmentView .rp-chip.is-active .u{color:var(--positive)}

/* KPI: a bit more air above the progress bar */
#rpKpis .kpi-bar{margin-top:16px;height:6px}
/* Bigger, more prominent replenishment KPI tiles + more breathing room under the sub-text */
#rpKpis.kpi-rail{padding-top:18px;padding-bottom:20px}
#rpKpis .kpi{gap:7px;padding:0 30px}
#rpKpis .kpi-label{font-size:11.5px;letter-spacing:.07em}
#rpKpis .kpi-value{font-size:23px;font-weight:400}
#rpKpis .kpi-sub{font-size:12px;margin-top:2px}
/* Create-quote: wide 2-column tiles — context left, decision right; locked layout */
#replenishmentView .cq-card{width:min(1040px,96vw)}
#replenishmentView .cq-grid{grid-template-columns:1fr;gap:12px}
#replenishmentView .cq-wide{padding:14px 16px}
#replenishmentView .cq-wide-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:0 22px;align-items:stretch}
#replenishmentView .cq-left{border-right:1px solid var(--line);padding-right:20px}
#replenishmentView .cq-badges{margin-top:8px}
#replenishmentView .cq-right{display:flex;flex-direction:column}
#replenishmentView .cq-right .rp-decide{margin-top:0;border-top:0;padding-top:0}
/* Reserve room for up to two rows of ladder chips so the master-detail pane doesn't jump
   when switching between products with different numbers of price-ladder tiers. */
#replenishmentView .cq-md-tile .rp-chips{min-height:84px;align-content:flex-start}

/* ---- Master-detail create-quote tile: row grid so the two blocks sit side by side ---- */
/* Fixed min-height so the window is ONE size regardless of which product is focused. */
#replenishmentView .cq-md-tile{min-height:500px;padding:12px 16px}
/* The focused product stays fully readable even when it isn't (yet) in the order. */
#replenishmentView .cq-md-tile.is-off{opacity:1}
/* [head-L | head-R] · [metrics-L | after-R] · [sales-L | foot-R]; rows top-align so
   "Sold / mo" lines up horizontally with "New net avail.". Last row pushed to the bottom. */
/* Row 1 is a FIXED height so neither a 1- vs 2-line product name NOR a 1- vs 2-row price
   ladder shifts row 2 — "Current" / "After this order" always start at the same Y. */
#replenishmentView .cq-md-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);grid-template-rows:minmax(158px,auto) auto 1fr;column-gap:26px;row-gap:16px;align-items:start;padding-top:0;min-height:472px}
#replenishmentView .cq-md-grid .cq-cell{min-width:0}
#replenishmentView .cq-md-tile .tile-name{font-size:16px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#replenishmentView .cq-md-tile .tile-sku{margin-top:5px}
#replenishmentView .cq-md-tile .tile-tags{margin-top:9px}
#replenishmentView .cq-md-tile .tile-badges{margin-top:10px}
#replenishmentView .cq-md-tile .cq-metrics-l .cq-cap{margin-bottom:2px}
#replenishmentView .cq-md-tile .cq-metrics-l .tile-metrics--sep{margin-top:12px}
#replenishmentView .cq-md-tile .cq-sales-slot{align-self:end}
#replenishmentView .cq-md-tile .cq-foot-r{align-self:end}
/* QTY stepper — clean −/+ control; the number is medium weight (not bold). */
#replenishmentView .cq-md-tile .cq-tilefoot{align-items:flex-end}
#replenishmentView .cq-md-tile .cq-qty{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#replenishmentView .cq-md-tile .cq-qty-l{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--ink-soft)}
#replenishmentView .cq-md-tile .cq-qty-l b{color:var(--ink);font-weight:700}
#replenishmentView .cq-md-tile .cq-step{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--bg-elev)}
#replenishmentView .cq-md-tile .cq-step-b{border:0;background:var(--bg-elev);color:var(--ink);font-size:18px;font-weight:600;width:36px;cursor:pointer;line-height:1}
#replenishmentView .cq-md-tile .cq-step-b:hover{background:var(--bg)}
#replenishmentView .cq-md-tile .cq-step-b:disabled{opacity:.35;cursor:default}
#replenishmentView .cq-md-tile .cq-step input{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fff;width:82px;text-align:center;font-family:var(--font-mono);font-size:16px;font-weight:500;padding:9px 6px;color:var(--ink);-moz-appearance:textfield}
#replenishmentView .cq-md-tile .cq-step input::-webkit-outer-spin-button,#replenishmentView .cq-md-tile .cq-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#replenishmentView .cq-right .tile-metrics--sep{margin-top:10px}
#replenishmentView .cq-right .cq-tilefoot{margin-top:auto;padding-top:10px}

/* ---- Create-quote: category border colours (bestseller amber / strategic blue) ---- */
#replenishmentView .cq-tile.has-topseller{border-color:#b07d2b;box-shadow:inset 0 0 0 1px #b07d2b}
#replenishmentView .cq-tile.has-strategic{border-color:#6c8caf;box-shadow:inset 0 0 0 1px #6c8caf}
/* ---- Cleaner ladder chips ---- */
#replenishmentView .rp-decide-cap .rp-cap-note{font-family:var(--font-mono);font-size:9px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-mute)}
#replenishmentView .rp-chips{display:flex;flex-wrap:wrap;gap:8px}
#replenishmentView .rp-chip{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:104px;border:1px solid var(--line-strong);background:var(--bg-elev);border-radius:10px;padding:10px 13px;cursor:pointer;text-align:left;transition:border-color .12s ease,background .12s ease}
#replenishmentView .rp-chip .rp-chip-q{font-family:var(--font-sans);font-size:17px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.01em}
#replenishmentView .rp-chip .rp-chip-q em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--ink-mute);margin-left:4px}
#replenishmentView .rp-chip .rp-chip-p{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1;white-space:nowrap}
#replenishmentView .rp-chip .rp-chip-p i{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-mute);margin-left:1px}
#replenishmentView .rp-chip .rp-chip-dn{font-weight:700;font-size:11px;color:var(--positive);margin-left:5px}
/* Add / In-order checkbox toggle */
#replenishmentView .cq-check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--bg-elev);border-radius:7px;padding:4px 9px;cursor:pointer;font-family:var(--font-sans);font-size:10.5px;font-weight:600;color:var(--ink-soft);transition:border-color .12s ease,color .12s ease}
#replenishmentView .cq-check .cq-checkbox{width:14px;height:14px;border:1.5px solid var(--line-strong);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff;background:transparent}
#replenishmentView .cq-check:hover:not(.is-done){border-color:var(--accent);color:var(--ink)}
#replenishmentView .cq-check.is-on{border-color:var(--positive);color:var(--positive);background:rgba(31,107,58,.06)}
#replenishmentView .cq-check.is-on .cq-checkbox{background:var(--positive);border-color:var(--positive)}
#replenishmentView .cq-check.is-done{cursor:default;border-color:var(--positive);color:var(--positive)}
#replenishmentView .cq-check.is-done .cq-checkbox{background:var(--positive);border-color:var(--positive)}
/* De-selected tiles read as clearly inactive (grid list only — NOT the master-detail tile) */
#replenishmentView .cq-tile.is-off:not(.is-done){opacity:.34}
#replenishmentView .cq-tile.is-off:hover{opacity:.7}
/* Master-detail: the focused product is ALWAYS fully readable, selected or not. These come
   after the dimming rules above so they win. */
#replenishmentView .cq-md-tile.is-off,
#replenishmentView .cq-md-tile.is-off:not(.is-done),
#replenishmentView .cq-md-tile.is-off:hover{opacity:1}
#replenishmentView .cq-md-tile.is-off .tile-metrics,
#replenishmentView .cq-md-tile.is-off .tile-tags,
#replenishmentView .cq-md-tile.is-off .cq-bottom{filter:none}
/* Ladder sits flush with the product name (no top rule / margin); "After this order" aligns
   with "Current" (no --sep top margin in this context). */
#replenishmentView .cq-md-tile .rp-decide{margin-top:0;border-top:0;padding-top:0}
#replenishmentView .cq-md-tile .cq-metrics-r .tile-metrics--sep{margin-top:0}
#replenishmentView .rp-chip:hover{border-color:var(--accent)}
#replenishmentView .rp-chip.is-active{border-color:var(--accent);background:rgba(31,107,58,.07);box-shadow:inset 0 0 0 1px var(--accent)}
/* ---- Sales context block (period selector + prominent figure) ---- */
#replenishmentView .rp-sales{margin-top:12px;border-top:1px solid var(--line);padding-top:9px}
#replenishmentView .rp-sales-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#replenishmentView .rp-perseg{display:inline-flex;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden}
#replenishmentView .rp-perseg button{border:0;border-left:1px solid var(--line-strong);background:var(--bg-elev);color:var(--ink-soft);font-family:var(--font-sans);font-size:9.5px;font-weight:600;padding:3px 8px;cursor:pointer;line-height:1.4}
#replenishmentView .rp-perseg button:first-child{border-left:0}
#replenishmentView .rp-perseg button.is-active{background:var(--accent);color:var(--accent-fg)}
#replenishmentView .rp-sales-fig{display:flex;align-items:baseline;gap:8px;margin-top:6px}
#replenishmentView .rp-sales-fig b{font-family:var(--font-sans);font-size:24px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
#replenishmentView .rp-sales-fig .rp-sales-unit{font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--ink-mute)}

/* Settings · Replenishment — trend threshold inputs + 5-state legend */
.set-trend-grid{display:flex;gap:14px;margin:2px 0 10px}
.set-trend-in{display:flex;flex-direction:column;gap:4px;flex:1}
.set-trend-in span{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--ink-soft)}
.set-trend-legend{display:grid;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:8px}
.set-trend-row{display:grid;grid-template-columns:22px 92px 1fr;align-items:center;gap:8px}
.set-trend-arrow{display:inline-block;font-weight:700;font-size:13px;line-height:1;text-align:center;transform-origin:50% 50%}
.set-trend-name{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink)}
.set-trend-rule{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}

/* Create-quote · live budget-impact header */
#replenishmentView .cq-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:14px 22px 4px;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
#replenishmentView .cq-k{display:flex;flex-direction:column;gap:6px;padding:15px 17px 16px;border-right:1px solid var(--line)}
#replenishmentView .cq-k:last-child{border-right:0}
#replenishmentView .cq-k-label{font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
#replenishmentView .cq-k-val{font-family:var(--font-sans);font-size:20px;font-weight:400;color:var(--ink);line-height:1.05}
#replenishmentView .cq-k-delta{align-self:flex-start;font-family:var(--font-sans);font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;line-height:1.3}
#replenishmentView .cq-k-delta.is-up{color:#8a6d1f;background:rgba(191,148,42,.16)}
#replenishmentView .cq-k-delta.is-down{color:#37516b;background:rgba(108,140,175,.16)}
#replenishmentView .cq-k-delta.is-flat{color:var(--ink-mute);background:rgba(0,0,0,.05)}
#replenishmentView .cq-k-bar{position:relative;height:7px;border-radius:4px;background:rgba(0,0,0,.06);overflow:hidden;display:flex;margin-top:3px}
#replenishmentView .cq-k-bar .fill-placed{display:block;height:100%;background:var(--ink-mute);opacity:.5}
#replenishmentView .cq-k-bar .fill-order{display:block;height:100%;background:var(--positive);transition:width .2s ease}
#replenishmentView .cq-k-bar .fill-order.warn{background:var(--warn)}
#replenishmentView .cq-k-bar .fill-order.bad{background:var(--bad)}
#replenishmentView .cq-k-bar .cq-k-tick{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);transform:translateX(-1px);border-radius:1px;opacity:.7}
#replenishmentView .cq-k-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);line-height:1.35}
#replenishmentView .cq-k-sub [data-state="ok"]{color:var(--positive)}
#replenishmentView .cq-k-sub [data-state="warn"]{color:var(--warn)}
#replenishmentView .cq-k-sub [data-state="bad"]{color:var(--bad)}

/* Create-quote · order freight summary line */
#rpCqFreight:empty{margin:0 !important}
#replenishmentView .cq-freight{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 13px}
#replenishmentView .cq-freight b{color:var(--ink);font-weight:600}
#replenishmentView .cq-freight .cq-cap{color:var(--ink-mute)}

/* Create-quote · "After this order" sub-groups (Purchase / Freight) */
#replenishmentView .tile-metrics .cq-subcap{grid-column:1/-1;font-family:var(--font-mono);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);margin-top:7px;padding-top:5px;border-top:1px dashed var(--line)}

/* Create-quote · right-column ("After this order" freight side) */
#replenishmentView .tile-metrics .mrow.mr2{grid-column:2}
#replenishmentView .tile-metrics .mrow.moneyrow.mr2{grid-column:2}

#rpCqNudge:empty{margin:0 !important}