/* ═══════════════════════════════════════════════════════════════
   SKU View — Forecast Panel
   Extracted from app/views/skus/_forecast_panel.html.erb (was ~96
   inline style= attributes with ~50 hex literals). Reuses tokens
   from application.css. Per ai_reference/design_system: no inline
   raw hex; use class names or var(--token).
   ═══════════════════════════════════════════════════════════════ */

/* Badge color variants — extends .skv-badge from sku_view.css.
   `--*-tint` background + base color pairs match the design system. */
.skv-badge--success  { background: var(--green-tint);   color: var(--green);  }
.skv-badge--warning  { background: var(--amber-tint);   color: var(--amber);  }
.skv-badge--error    { background: var(--red-tint);     color: var(--red);    }
.skv-badge--purple   { background: var(--purple-tint);  color: var(--purple); }
.skv-badge--info     { background: var(--blue-tint);    color: #2563eb;       }
.skv-badge--neutral  { background: var(--border-light); color: var(--light);  }
/* Override Active = warmer amber-yellow than --amber-tint, intentionally distinct */
.skv-badge--override { background: #fef3c7;             color: #92400e;       }

/* Per-model accent helpers (used to color icons + accuracy values).
   Mirror the model badge colors for consistency. */
.skv-c-model-hw             { color: var(--green);  }
.skv-c-model-croston        { color: var(--amber);  }
.skv-c-model-hyper-seasonal { color: var(--purple); }
.skv-c-model-ww             { color: var(--blue);   }
/* Dark amber for "override active" attribution text — not in --amber */
.skv-c-amber-dark           { color: #92400e; }

/* Info-popover panel (Stimulus controller="info-popover" target="panel").
   Default is a 300px floating panel inside flow; --wide bumps to 320px;
   --anchored absolutely positions to its parent (used in metadata rows). */
.skv-popover {
  display: none;
  width: 300px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  z-index: 100;
}
.skv-popover--wide { width: 320px; }
.skv-popover--anchored {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
}
.skv-popover-title { font-weight: 600; margin-bottom: 6px; }
.skv-popover-body  { margin: 0 0 8px; color: var(--muted); }
.skv-popover-divider {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Legend grid (used in popovers — colored key + description rows) */
.skv-popover-legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 11px;
}
.skv-popover-legend-key { font-weight: 600; }

/* Inline "?" help mark next to clickable popover triggers */
.skv-help-mark {
  font-size: 9px;
  vertical-align: middle;
}

/* Wrapper around an info-popover trigger that floats a panel */
.skv-popover-trigger {
  position: relative;
  cursor: pointer;
}

/* Sub-line under the accuracy value (e.g. "wMAPE: 12.3%", "▼ under") */
.skv-forecast-mape-subline {
  font-size: 10px;
  margin-top: 2px;
  color: var(--light);
}

/* "current" indicator under the active hyper-seasonal ADD value */
.skv-forecast-current-label {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

/* Cold-start "no availability adjustment" footer note */
.skv-forecast-note-light {
  font-size: 10px;
  color: var(--light);
  margin-top: 4px;
}

/* "(net X% returns)" tag inside the Final ADD label */
.skv-forecast-returns-tag {
  font-weight: 400;
  font-size: 9px;
  color: var(--green);
}

/* Bottom-margin wrapper for the WW per-window detail table */
.skv-forecast-window-table { margin-bottom: 12px; }

/* Bold-700 helper used inside the WW grid cells */
.skv-fw-bold { font-weight: 700; }

/* Override-banner accent text */
.skv-forecast-override-banner-title {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
}
.skv-forecast-override-banner-strong { color: var(--amber); }
.skv-forecast-override-attribution-perm { font-weight: 500; }
.skv-forecast-override-banner-aside {
  color: var(--light);
  font-size: 11px;
}

/* Override controls row helper text */
.skv-forecast-override-arrow,
.skv-forecast-override-for,
.skv-forecast-override-days {
  font-size: 12px;
  color: var(--light);
}
.skv-forecast-override-pct-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--light);
}
.skv-forecast-override-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Pending-review banner — amber wash matching the model_change_notice */
.skv-forecast-pending-review {
  background: var(--amber-tint);
  border-color: #fde68a;
}
.skv-forecast-pending-review-link {
  color: #92400e;
  font-weight: 600;
}

/* Supersession inheritance notice — blue info wash (informational, not a
   warning) shown on a successor whose forecast is built on the predecessor's
   inherited model + merged demand history. */
.skv-forecast-inherited-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1e40af;
}
.skv-forecast-inherited-notice-icon {
  flex-shrink: 0;
  color: #2563eb;
  display: inline-flex;
}
.skv-forecast-inherited-notice-link {
  color: #1e40af;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.skv-forecast-inherited-notice-link:hover { color: #1e3a8a; }

/* Model-reason note box (small italic explanation under metadata) */
.skv-forecast-model-reason {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 8px;
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Hyper-seasonal demand-concentration metadata accent */
.skv-c-purple-em { color: var(--purple); }

/* Avail-window table uplift cell color (>1 = amber, else light) */
.skv-c-uplift-amber { color: var(--amber); }

/* Legacy class compatibility: kept for forecast-strip flex override */
.skv-forecast-strip--cold-start > .skv-forecast-box { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   Forecast card redesign (3a) — spec/PLAN_forecast_card_redesign.md
   Standard-pipeline hero row (method + result panel | accuracy hero box),
   collapsed calculation region, and the implied-forecast tiles. No inline
   styles: every dynamic value below is a class (weight-bar widths bucketed).
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero row ── */
.skv-forecast-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: stretch;
  margin: 16px 0;
}

/* ── Method + result panel (left) ── */
.skv-forecast-method-panel {
  border: 1px solid var(--border-light, #f0eeea);
  border-radius: 12px;
  background: var(--surface-alt, #fafaf8);
  padding: 15px 18px;
  display: flex;
  gap: 20px;
}
.skv-forecast-method-calc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skv-forecast-method-heading {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted, #6b6b6b); margin-bottom: 10px;
}

/* Per-window weight rows (name · bar · weight% · adj ADD) */
.skv-forecast-weight-row {
  display: grid;
  grid-template-columns: 40px 1fr 50px 52px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.skv-forecast-weight-name { font-size: 11px; font-weight: 700; color: var(--ink, #1a1a1a); }
.skv-forecast-weight-track {
  height: 8px; background: var(--border, #e8e6e1); border-radius: 4px; overflow: hidden;
}
.skv-forecast-weight-fill { display: block; height: 100%; background: var(--blue, #3b82f6); border-radius: 4px; }
.skv-forecast-weight-pct { font-size: 11px; font-weight: 700; color: var(--blue, #3b82f6); text-align: right; }
.skv-forecast-weight-add { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted, #6b6b6b); text-align: right; }

/* Bucketed bar-fill widths (5% steps) — keeps the dynamic width a CLASS, not an
   inline style (CLAUDE.md "NO INLINE STYLES"). */
.skv-fw-w-0   { width: 0%; }
.skv-fw-w-5   { width: 5%; }
.skv-fw-w-10  { width: 10%; }
.skv-fw-w-15  { width: 15%; }
.skv-fw-w-20  { width: 20%; }
.skv-fw-w-25  { width: 25%; }
.skv-fw-w-30  { width: 30%; }
.skv-fw-w-35  { width: 35%; }
.skv-fw-w-40  { width: 40%; }
.skv-fw-w-45  { width: 45%; }
.skv-fw-w-50  { width: 50%; }
.skv-fw-w-55  { width: 55%; }
.skv-fw-w-60  { width: 60%; }
.skv-fw-w-65  { width: 65%; }
.skv-fw-w-70  { width: 70%; }
.skv-fw-w-75  { width: 75%; }
.skv-fw-w-80  { width: 80%; }
.skv-fw-w-85  { width: 85%; }
.skv-fw-w-90  { width: 90%; }
.skv-fw-w-95  { width: 95%; }
.skv-fw-w-100 { width: 100%; }

/* Disclosure trigger for the collapsed breakdown */
.skv-forecast-breakdown-trigger {
  margin-top: auto; padding: 8px 0 0; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--blue, #3b82f6); align-self: flex-start;
}
.skv-forecast-breakdown-chevron { display: inline-flex; }

/* Result sub-column (right of the method panel) */
.skv-forecast-result {
  width: 190px; flex-shrink: 0;
  border-left: 1px solid var(--border, #e8e6e1); padding-left: 20px;
  display: flex; flex-direction: column; justify-content: center;
}
.skv-forecast-result-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted, #6b6b6b); margin-bottom: 4px;
}
.skv-forecast-result-value {
  font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink, #1a1a1a); line-height: 1.1;
}
.skv-forecast-result-unit { font-size: 13px; font-weight: 500; color: var(--muted, #6b6b6b); margin-left: 2px; }
.skv-forecast-result-override-pct { font-size: 11.5px; font-weight: 700; color: var(--amber, #d97706); margin-top: 2px; }
.skv-forecast-result-engine { font-size: 11.5px; color: var(--light, #8a8a8a); text-decoration: line-through; margin-top: 2px; }
.skv-forecast-result-annual { font-size: 12px; color: var(--muted, #6b6b6b); margin-top: 6px; }
.skv-forecast-result-annual strong { color: var(--ink, #1a1a1a); font-weight: 700; }
.skv-forecast-result-growth { font-size: 12px; margin-top: 2px; }
/* Amber override treatment — descendant selector so it wins regardless of the
   file-load order of the base classes above. */
.skv-forecast-result--overridden .skv-forecast-result-label,
.skv-forecast-result--overridden .skv-forecast-result-value { color: var(--amber, #d97706); }

/* Collapsed calculation region */
.skv-forecast-breakdown { margin-bottom: 12px; }
.skv-forecast-events-note { padding: 4px 8px; font-size: 10px; color: var(--muted, #6b6b6b); }

/* ── Accuracy box :hero variant ── */
.skv-forecast-mape-box--hero-wrap { position: relative; flex: 0 0 300px; align-self: stretch; }
.skv-forecast-mape-box--hero {
  display: flex; flex-direction: column; height: 100%; width: 100%; box-sizing: border-box;
  border: 1px solid var(--border, #e8e6e1); border-radius: 12px; padding: 15px 16px;
  background: var(--surface, #fff); cursor: pointer; text-decoration: none; color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
/* No hover underline: the whole box is an <a>, and the app's global a:hover
   underline propagates to every inline descendant — shadow+border carry the
   affordance instead. */
.skv-forecast-mape-box--hero:hover,
.skv-forecast-mape-box--hero:focus { box-shadow: var(--shadow-md); border-color: var(--border-hover, #d4d2cd); text-decoration: none; }
.skv-forecast-mape-box--hero:hover * { text-decoration: none; }
.skv-forecast-acc-hero-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted, #6b6b6b);
}
.skv-forecast-acc-hero-value { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; margin-top: 6px; }
.skv-forecast-acc-hero-verdict { font-size: 12px; font-weight: 700; margin-top: 2px; }
.skv-forecast-acc-hero-divider { border-top: 1px solid var(--border-light, #f0eeea); margin: 10px 0; }
.skv-forecast-acc-hero-fa { font-size: 11.5px; color: var(--muted, #6b6b6b); line-height: 1.4; }
.skv-forecast-acc-hero-bias { display: flex; align-items: center; gap: 4px; font-size: 11.5px; margin-top: 6px; }
.skv-forecast-acc-hero-detail { margin-top: auto; padding-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--blue, #3b82f6); }
/* "?" trigger reset (it also carries .skv-help-mark for sizing) */
.skv-help-mark-btn { margin-left: auto; background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--light, #8a8a8a); font: inherit; }
/* Hero "?" sits OUTSIDE the box's <a> (button-in-anchor is invalid HTML) and
   overlays the label row's right edge; the wrap is position:relative. */
.skv-help-mark-btn--overlay { position: absolute; top: 13px; right: 14px; z-index: 2; margin-left: 0; }
/* Compact-variant inline-style replacements (§5) */
.skv-forecast-acc-ext { font-size: 10px; }
.skv-forecast-acc-lowvol { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; margin-top: 6px; }
.skv-forecast-acc-link { color: inherit; text-decoration: none; }

/* ── Implied-forecast strip ── */
.skv-forecast-tiles-section { margin-top: 16px; margin-bottom: 12px; }
.skv-forecast-tiles-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted, #6b6b6b); margin-bottom: 8px;
}
.skv-forecast-tiles-label-sub { color: var(--light, #8a8a8a); font-weight: 700; }
.skv-forecast-tiles-info { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--light, #8a8a8a); cursor: help; }
.skv-forecast-tiles-override-note { color: var(--amber, #d97706); font-size: 11px; text-transform: none; letter-spacing: 0; margin-left: 6px; }
/* v6 (spec/PLAN_forecast_card_redesign.md §5b): the four implied-forecast TILE
   CARDS became ONE bordered strip divided by hairline column rules. The implied
   forecast is supporting detail — it answers "what does this rate mean over each
   horizon" AFTER the reader has taken the rate and the accuracy — so it reads as
   a single block, not four more cards competing with the hero row. Class names
   are unchanged from the tile era: `--tiles` is the strip, `--tile` a column. */
.skv-forecast-tiles {
  display: grid;
  border: 1px solid var(--border-light, #f0eeea);
  border-radius: var(--radius, 12px);
  background: var(--surface-alt, #fafaf8);
  overflow: hidden; /* clips the column rules at the rounded corners */
}
.skv-forecast-tiles--3col { grid-template-columns: repeat(3, 1fr); }
.skv-forecast-tiles--4col { grid-template-columns: repeat(4, 1fr); }
/* A column: no gap, no fill, no radius, no hover — the rule IS the separator. */
.skv-forecast-tile { padding: 12px 15px; border-right: 1px solid var(--border-light, #f0eeea); }
.skv-forecast-tile:last-child { border-right: none; }
.skv-forecast-tile-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted, #6b6b6b); }
/* Ink, not green/red: after v6 the only large coloured numbers on the card are
   the forecast rate and the accuracy figure. Direction survives as the 13px
   caret, which is enough to read in a scan. */
.skv-forecast-tile-growth {
  display: flex; align-items: center; gap: 5px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--ink, #1a1a1a); margin-top: 4px; line-height: 1.1;
}
.skv-forecast-tile-growth--null { color: #cccccc; }
.skv-forecast-tile-units { font-size: 12.5px; margin-top: 4px; color: var(--muted, #6b6b6b); }
.skv-forecast-tile-units strong { color: var(--ink, #1a1a1a); font-weight: 700; }
.skv-forecast-tile-vs { color: var(--light, #8a8a8a); }
.skv-forecast-tile-add { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--light, #8a8a8a); margin-top: 3px; }
.skv-forecast-tile-avail { font-size: 11px; color: var(--muted, #6b6b6b); margin-top: 6px; }
.skv-forecast-tile-avail--withheld { display: flex; align-items: center; gap: 4px; color: var(--amber, #d97706); }

/* ── Responsive: stack the hero row + the implied-forecast strip on narrow screens ── */
@media (max-width: 768px) {
  .skv-forecast-hero-row { grid-template-columns: 1fr; }
  .skv-forecast-method-panel { flex-direction: column; gap: 12px; }
  .skv-forecast-result { width: auto; border-left: none; border-top: 1px solid var(--border, #e8e6e1); padding-left: 0; padding-top: 12px; }
  .skv-forecast-mape-box--hero-wrap { flex-basis: auto; }
  /* The strip collapses to a single column: the vertical rules become
     horizontal ones so the columns still read as one divided block. */
  .skv-forecast-tiles--3col, .skv-forecast-tiles--4col { grid-template-columns: 1fr; }
  .skv-forecast-tile { border-right: none; border-bottom: 1px solid var(--border-light, #f0eeea); }
  .skv-forecast-tile:last-child { border-bottom: none; }
}