/* ============================================================
   Bidding Hub — Merit Order Simulator
   Page: spot/bidding-hub.html
   ============================================================ */

/* ── Note chips (header tooltips) ──────────────────────────── */

.bidding-note-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: var(--varial-text-muted, #5b6472);
  background-color: var(--varial-bg-subtle, #F0EBDA);
  border: 1px solid var(--varial-border, #E7E0CC);
  cursor: help;
}

.bidding-note-chip:focus-visible {
  outline: 2px solid var(--varial-primary, #2563EB);
  outline-offset: 1px;
}

.bidding-note-chip--warn {
  color: var(--varial-warning, #F59E0B);
  border-color: var(--varial-warning, #F59E0B);
}

/* ── Spot-price readout (above the chart) ──────────────────────
   A single-line banner showing just the solved spot price, so it reads clearly
   without overlapping the bars. (Total supply was dropped — it duplicated the
   chart's own x-axis and was illegible in dark mode.) */
.bidding-readout {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: var(--varial-radius-md, 0.375rem);
  background-color: var(--varial-bg-subtle, #F0EBDA);
}

.bidding-readout-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--varial-text-muted, #5b6472);
}

.bidding-readout-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
}

.bidding-readout-value--low  { color: var(--varial-success, #059669); }
.bidding-readout-value--mid  { color: var(--varial-warning, #F59E0B); }
.bidding-readout-value--high { color: var(--varial-danger, #DC2626); }

[data-bs-theme="dark"] .bidding-readout-value--low { color: #34D399; }

/* Randomize, when it sits in the public preset bar next to the scenario
   buttons, is nudged to the far end so it reads as a sibling control. */
.bidding-preset-bar .bidding-randomize-btn {
  margin-left: auto;
}

/* ── Scenario explainer (revealed on preset click) ─────────────
   One formatted panel per pre-loaded scenario, shown only while its button is
   active so the page reads as a guided reveal instead of a wall of bullets. */
.bidding-scenario-explainer {
  padding: 1.1rem 1.35rem 1.25rem;
  background-color: var(--varial-bg-subtle, #F0EBDA);
}

.bidding-scenario-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

/* Scoped under .bidding-scenario-explainer so it out-specifies the wiki lead
   paragraph rule (.wiki-section-lead p, 0,1,1): the block sits in the lead
   group, which would otherwise blow the description up to 1.24rem and dwarf the
   scenario name. Name reads clearly as the heading, body as supporting copy.
   Colours use --bs-emphasis-color / --bs-body-color (which flip with the theme)
   rather than the undefined --varial-text token, so both stay legible on dark. */
.bidding-scenario-explainer .bidding-scenario-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-emphasis-color, #1f2733);
}

.bidding-scenario-setter {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  color: var(--varial-text-muted, #5b6472);
  background-color: var(--varial-bg, #FAF7EE);
  border: 1px solid var(--varial-border, #E7E0CC);
}

.bidding-scenario-setter::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background-color: var(--dot, #9ca3af);
}

/* Fuel dots mirror the chart's fixed series colours (see .bidding-axis-key--*).
   Coal is near-black, so it gets a lighter dot on dark backgrounds to stay
   visible against the navy chip. */
.bidding-scenario-setter--coal    { --dot: #1C1917; }
.bidding-scenario-setter--vre     { --dot: #22C55E; }
.bidding-scenario-setter--gas     { --dot: #F97316; }
.bidding-scenario-setter--storage { --dot: #8B5CF6; }

[data-bs-theme="dark"] .bidding-scenario-setter--coal { --dot: #94A3B8; }

.bidding-scenario-explainer .bidding-scenario-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bs-body-color, #1f2733);
  margin-bottom: 0;
}

.bidding-scenario-panel {
  animation: bidding-scenario-in 0.18s ease-out;
}

@keyframes bidding-scenario-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bidding-scenario-panel { animation: none; }
}

/* ── Chart ─────────────────────────────────────────────────── */

/* At lg+, pin the simulator to ~80% of the viewport so the chart has room
   to breathe; the lever columns stretch to match via align-items-stretch. */
@media (min-width: 992px) {
  .bidding-sim-row {
    min-height: 52vh;
  }
}

/* The simulator's own card carries the full widget; drop its trailing margin and
   even out the card-body padding so it doesn't leave a slab of empty space at
   the bottom (the levers/chart already fill the row height). */
.bidding-simulator-figure .card.mb-4 {
  margin-bottom: 0;
}

.bidding-simulator-figure .card > .card-body {
  padding-block: 1rem;
}

/* Chart container — min-height so the Plotly canvas doesn't collapse
   before the JS has rendered a trace. The lever columns stretch to
   match the chart, so the whole simulator stays on one screen. */
.bidding-chart-wrap {
  min-height: 330px;
}

.bidding-chart-wrap #bidding-hub-chart {
  width: 100%;
  height: 100%;
}

/* Axis key caption under the chart */
.bidding-chart-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.bidding-axis-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--varial-text-muted, #5b6472);
}

.bidding-axis-key::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--varial-radius-sm, 0.25rem);
  flex-shrink: 0;
}

.bidding-axis-key--x::before {
  background-color: var(--varial-success, #059669);
}

.bidding-axis-key--y::before {
  background-color: var(--varial-primary, #2563EB);
}

/* Fuel keys — solid swatches matching the chart columns (getFuelColors in JS) */
.bidding-axis-key--vre::before     { background-color: #22C55E; }
.bidding-axis-key--coal::before    { background-color: #1C1917; }
.bidding-axis-key--gas::before     { background-color: #F97316; }
.bidding-axis-key--storage::before { background-color: #8B5CF6; }

/* Demand / spot keys render as dashed line segments, matching the chart lines */
.bidding-axis-key--demand::before,
.bidding-axis-key--spot::before {
  width: 0.95rem;
  height: 0;
  border-radius: 0;
  border-top-width: 2px;
  border-top-style: dashed;
}

.bidding-axis-key--demand::before {
  border-top-color: #EF4444;
}

.bidding-axis-key--spot::before {
  border-top-color: #16A34A;
}

/* ── Lever cards (price vs quantity) ───────────────────────── */

.bidding-lever-card--price {
  border-top: 2px solid var(--varial-primary, #2563EB);
}

.bidding-lever-card--qty {
  border-top: 2px solid var(--varial-success, #059669);
}

.bidding-preview-badge {
  color: var(--varial-primary, #2563EB);
  background-color: var(--varial-primary-bg-light, #dbeafe);
  font-weight: 600;
}

.bidding-set-badge {
  color: var(--varial-success, #059669);
  background-color: rgba(5, 150, 105, 0.12);
  font-weight: 600;
}

.bidding-lever-hint {
  color: var(--varial-text-muted, #5b6472);
  line-height: 1.35;
}

/* Lever card bodies are flex columns so the sliders spread evenly to fill
   the (tall) card height alongside the chart, rather than bunching at top. */
.bidding-lever-card .card-body {
  display: flex;
  flex-direction: column;
}

.bidding-lever-card .card-body > .bidding-lever-hint {
  flex: 0 0 auto;
}

.bidding-lever-card .bidding-slider-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Disabled slider (e.g. MPC — placeholder, not yet wired) ── */

.bidding-slider-group--disabled {
  opacity: 0.55;
}

.bidding-slider-group--disabled .form-range {
  cursor: not-allowed;
}

.bidding-soon-badge {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.35rem;
  border-radius: var(--varial-radius-sm, 0.25rem);
  color: var(--varial-text-muted, #5b6472);
  background-color: var(--varial-bg-subtle, #F0EBDA);
  border: 1px solid var(--varial-border, #E7E0CC);
}

/* ── Slider groups ─────────────────────────────────────────── */

.bidding-slider-group {
  margin-bottom: 0.4rem;
}

/* Label row: lever name on the left, live value on the right */
.bidding-slider-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.125rem;
}

/* Demand slider separated from the capacity sliders */
.bidding-demand-separator {
  padding-top: 0.35rem;
  border-top: 1px solid var(--varial-border, #E7E0CC);
  margin-top: 0.15rem;
}

/* ── Forward-looking future-feature note ───────────────────── */

.bidding-future-note {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  border: 1px dashed var(--varial-border, #E7E0CC);
  border-radius: var(--varial-radius-md, 0.375rem);
  background-color: var(--varial-bg-subtle, #F0EBDA);
  color: var(--varial-text-muted, #5b6472);
}

.bidding-future-note i {
  color: var(--varial-primary, #2563EB);
}

/* ── Dark mode ─────────────────────────────────────────────── */
/* The chips, hints, "Set next" badge and footer note all key off
   --varial-text-muted / --varial-primary / --varial-primary-bg-light, which are
   repointed for dark in branding.css, so they adapt automatically. Only the
   --varial-success usages need help: that token stays dark (#059669) globally so
   solid success badges keep white-text contrast, but here it colours TEXT, a
   border accent and a legend swatch over dark/translucent surfaces where it's
   too dim. Lift those to a brighter green locally. */
[data-bs-theme="dark"] .bidding-set-badge {
  color: #34D399;
  background-color: rgba(52, 211, 153, 0.14);
}

[data-bs-theme="dark"] .bidding-lever-card--qty {
  border-top-color: #34D399;
}

[data-bs-theme="dark"] .bidding-axis-key--x::before {
  background-color: #34D399;
}

/* ── Layout for the public Docs simulator ─────────────────────
   article_page.html adds .wiki-article-page--wide (and suppresses the TOC).
   The lead intro sentence and the tool run the full (bounded) content width;
   the explanatory copy below sits in a narrower, centred reading column, so the
   page reads wide-then-narrow rather than jarring narrow/wide/narrow. */
.wiki-article-page--wide .wiki-layout {
  max-width: 82rem;
  margin-inline: auto;
}

/* Everything after the lead bucket (the "How to read it" sections, callout,
   etc.) stays at a readable measure, centred under the wide tool. */
.wiki-article-page--wide .wiki-section:not(.wiki-section-lead) {
  max-width: 52rem;
  margin-inline: auto;
}

/* Drop the boxed article card so the tool's own card is the only surface. */
.wiki-article-page--wide .wiki-article-card.card {
  border: none;
  background: transparent;
  box-shadow: none;
}

.wiki-article-page--wide .wiki-article-card .card-body {
  padding: 0;
}

/* The simulator fills the wide content width. */
.wiki-article-page--wide .bidding-simulator-figure {
  max-width: none;
}

/* The simulator's own preset bar can wrap comfortably on narrow screens. */
.bidding-preset-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.85rem 1.35rem;
}

/* Keep the chart legend compact even when the widget sits inside an article
   whose prose base font is larger (the caption would otherwise inherit it). */
.bidding-chart-caption {
  font-size: 0.78rem;
  column-gap: 0.6rem;
}

.bidding-axis-key {
  font-size: 0.78rem;
}

.bidding-axis-key::before {
  width: 0.6rem;
  height: 0.6rem;
}