/* Varial — Tabulator component styles
 *
 * This file owns all Varial-defined cell types, the base token theme,
 * number alignment, and dark mode for Tabulator tables.
 *
 * File split:
 *   css/components/tabulator-varial.css  — this file: the canonical home for all
 *                                          custom Tabulator UI (Varial cell types,
 *                                          token theme, overrides of Tabulator's own
 *                                          generated class names)
 *   css/components/tabulator-varial-readonly.css — display-only density variant
 *                                          (add .vrl-table-readonly to the target el)
 *
 * Custom cell class reference:
 *   .vrl-step-cell          — numeric stepper cell (+/- buttons inside a cell)
 *   .vrl-step-btn           — inner step button (±1)
 *   .vrl-step-btn-outer     — outer step button (±larger increment), muted
 *   .vrl-step-value         — displayed value between step buttons
 *   .vrl-cell-modified      — amber dot indicator for user-edited cells
 *   .vrl-out-of-horizon     — greyed-out cell for dates outside the forecast window
 *   .tabulator-cell-number  — right-aligned tabular-nums cell
 */

/* ── Step cell (+/- stepper inside a cell) ──────────────────── */
.vrl-step-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
  cursor: text;
  padding: 0 4px;
}

.vrl-step-btn {
  border: 1px solid var(--varial-border, #E4E2DC);
  background: transparent;
  border-radius: 3px;
  min-width: 20px;
  height: 18px;
  font-size: 8px;
  line-height: 16px;
  padding: 0 1px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--varial-transition-fast, 150ms ease);
}

.vrl-step-btn:hover {
  border-color: currentColor;
}

.vrl-step-value {
  min-width: 44px;
  padding: 0 0.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
}

/* Outer (large-step) buttons — stronger visual weight for larger moves */
.vrl-step-btn-outer {
  border: 1px solid var(--varial-border, #E4E2DC);
  background: var(--varial-gray-100, #F1F0ED);
  border-radius: 3px;
  min-width: 25px;
  height: 18px;
  font-size: 8px;
  line-height: 16px;
  padding: 0 2px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  transition: background var(--varial-transition-fast, 150ms ease);
}

.vrl-step-btn-outer:hover {
  border-color: currentColor;
}

.vrl-step-down {
  color: var(--varial-danger, #DC2626);
}

.vrl-step-up {
  color: var(--varial-success, #16A34A);
}

.vrl-step-btn.vrl-step-down {
  border-color: color-mix(in srgb, var(--varial-danger, #DC2626) 30%, transparent);
}

.vrl-step-btn.vrl-step-up {
  border-color: rgba(22, 163, 74, 0.24);
}

.vrl-step-btn-outer.vrl-step-down {
  background: color-mix(in srgb, var(--varial-danger, #DC2626) 12%, transparent);
  border-color: color-mix(in srgb, var(--varial-danger, #DC2626) 36%, transparent);
}

.vrl-step-btn-outer.vrl-step-up {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.3);
}

/* ── Out-of-horizon cell (date outside forecast window) ─────── */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.vrl-out-of-horizon {
  background: var(--varial-gray-100, #F1F0ED);
  color: var(--varial-text-muted, #9A9589);
  pointer-events: none;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.vrl-out-of-horizon .vrl-step-btn,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.vrl-out-of-horizon .vrl-step-btn-outer {
  display: none;
}

/* ── Per-row reset button (↩) ───────────────────────────────── */
/*
 * The button lives in the vrl-row-reset-col column.
 * It is hidden by default and only shown when the row has at least
 * one .vrl-cell-modified cell — using the CSS :has() selector
 * (supported in all modern browsers).
 */
.vrl-row-reset-col .vrl-row-reset {
  display: none;
  background: none;
  border: none;
  color: var(--varial-text-muted, #9A9589);
  padding: 2px 4px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: 3px;
}

.vrl-row-reset-col .vrl-row-reset:hover {
  color: var(--varial-danger, #ef4444);
  background: var(--varial-bg-hover, rgba(0, 0, 0, 0.06));
}

/* Show the reset button when any sibling cell in the same row is modified */
.tabulator-row:has(.vrl-cell-modified) .vrl-row-reset-col .vrl-row-reset {
  display: inline-block;
}

/* ── Modified cell indicator (amber dot in corner) ──────────────── */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.vrl-cell-modified {
  position: relative;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.vrl-cell-modified::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--varial-amber, #F59E0B);
}

/* ── Tabulator overrides \u2014 align with Varial token theme ───────── */
.tabulator {
  border: none;
  font-family: var(--varial-font-family, Inter, -apple-system, "system-ui", sans-serif);
  font-size: 0.6875rem; /* 11px — data-dense cells */
  /* Vendor sets the container to #888 grey, which shows as a grey block in the
     empty space below short tables. Match the card surface instead (the token
     flips per theme, so this is correct in both light and dark). */
  background-color: var(--varial-card-bg, #FFFFFF);
}

.tabulator .tabulator-header {
  background: var(--varial-bg, #F8F7F5);
  border-bottom: 2px solid var(--varial-border, #E4E2DC);
  max-height: 3.5rem; /* prevent header blow-up when scenario columns show/hide */
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--varial-bg, #F8F7F5);
  border-right: 1px solid var(--varial-border, #E4E2DC);
}

/* #2836 — when a cell range is selected/edited Tabulator highlights the owning
   column header. The vendor default (#d6d6d6 dark grey) reads as "greyed out"
   rather than spotlighted, so brand it with a light-blue tint instead. */
.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight {
  background-color: var(--varial-primary-bg-light, #dbeafe);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 5px 6px;
  font-family: var(--font-heading, "Space Grotesk", Inter, sans-serif);
  font-size: 0.75rem; /* 12px — compact header baseline */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--varial-gray-500, #6B6763);
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
  margin-top: 0.18rem;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
  min-height: 1.55rem;
  padding: 0.05rem 0.28rem;
  font-size: 0.6875rem;
  line-height: 1.15;
}

/* Allow scenario names in pivot-mode column headers to wrap rather than truncate */
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}

.tabulator .tabulator-header .tabulator-col.vrl-select-all-corner {
  cursor: pointer;
}

.vrl-tabulator-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  flex-shrink: 0;
  vertical-align: middle;
}

.vrl-tabulator-header-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.vrl-tabulator-header-text {
  display: inline-block;
}

.vrl-tabulator-swatch--1 {
  background: var(--chart-scenario-1, #3B82F6);
}

.vrl-tabulator-swatch--2 {
  background: var(--chart-scenario-2, #DC5A12);
}

.vrl-tabulator-swatch--3 {
  background: var(--chart-scenario-3, #22C55E);
}

.vrl-tabulator-swatch--4 {
  background: var(--chart-scenario-4, #D97706);
}

.vrl-tabulator-swatch--5 {
  background: var(--chart-scenario-5, #1E3A5F);
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
  border-bottom: 1px solid var(--varial-gray-100, #F1F0ED);
  min-height: 24px;
}

.tabulator .tabulator-tableholder {
  background: rgba(255, 255, 255, 0.88);
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
  background: var(--varial-bg-subtle, #F1F0ED);
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  padding: 0 6px;
  min-height: 24px;
  line-height: 24px;
  border-right: 1px solid var(--varial-gray-100, #F1F0ED);
}

/* Keep editable cells visually compact and centered without native spinner chrome.
   Brand the editing state: replace the vendor's raw #1d68cd 1px border (see
   vendors/tabulator/tabulator.min.css) with a rounded, token-driven focus ring on
   a solid surface so the edit box reads the same on every wizard step and adapts
   to dark mode automatically (both tokens flip under [data-bs-theme="dark"]). */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing {
  padding: 0 6px;
  border: 0;
  border-radius: var(--varial-radius-sm, 0.25rem);
  box-shadow: inset 0 0 0 2px var(--varial-primary, #2563EB);
  background: var(--varial-card-bg, #FFFFFF);
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  /* Inherit the cell's font so the input matches the compact 11px/Inter table
     text instead of the browser's larger default input font, and inherit the
     24px line-height so the value stays vertically centred in the cell. */
  font: inherit;
  /* Pin the text colour — the vendor leaves it unset, so the native input falls
     back to the system field colour (white in dark contexts) and becomes
     invisible. --varial-gray-900 flips light/dark, staying legible either way. */
  color: var(--varial-gray-900, #131210);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing input[type="number"] {
  appearance: textfield;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing input[type="number"]::-webkit-outer-spin-button,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:hover {
  background: rgba(0, 85, 164, 0.05);
}

.tabulator .tabulator-row.tabulator-row-even {
  background: var(--varial-gray-50, #F8F7F5);
}

/* Fuel type badges in Supply Existing generator table */
.vrl-fuel-badge {
  border: 1px solid currentColor;
  background: var(--varial-surface, #FFFFFF);
  font-weight: 600;
}

.vrl-fuel-badge--coal {
  color: var(--varial-fuel-black-coal, #1C1917);
}

.vrl-fuel-badge--gas {
  color: var(--varial-fuel-gas-ccgt, #6B7280);
}

.vrl-fuel-badge--diesel {
  color: var(--varial-fuel-diesel, #DC2626);
}

.vrl-fuel-badge--hydro {
  color: var(--varial-fuel-hydro, #0284C7);
}

.vrl-fuel-badge--wind {
  color: var(--varial-fuel-wind, #93C5FD);
}

.vrl-fuel-badge--solar {
  color: var(--varial-fuel-solar, #F59E0B);
}

.vrl-fuel-badge--battery {
  color: var(--varial-fuel-battery, #8B5CF6);
}

.vrl-fuel-badge--default {
  color: var(--varial-gray-700, #57534E);
}

/* ── Number alignment and tabular figures ────────────────────── */
.tabulator .tabulator-cell[tabulator-field*="value"],
.tabulator .tabulator-cell.tabulator-cell-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tabulator .tabulator-placeholder span {
  color: var(--varial-gray-400, #9A9690);
  font-size: 0.875rem;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.tabulator .tabulator-placeholder span::before {
  content: "\f0ce";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--varial-gray-300, #CCC9C3);
}

/* ── Dark mode ───────────────────────────────────────────────── */
/* Coal (#1C1917) and gas (#6B7280) are dark/mid greys; on the dark badge surface
   (--varial-surface → #1E293B) their text + currentColor border washed out. Lift
   to lighter neutrals so they stay grey (per the styleguide fuel palette) but
   read clearly — coal a touch brighter than gas to keep them distinguishable. */
[data-bs-theme="dark"] .vrl-fuel-badge--coal {
  color: var(--varial-gray-500, #CBD5E1);
}

[data-bs-theme="dark"] .vrl-fuel-badge--gas {
  color: var(--varial-gray-400, #94A3B8);
}

[data-bs-theme="dark"] .tabulator .tabulator-header,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col {
  background: var(--varial-bg-subtle);
  border-color: var(--varial-border);
}

/* Vendor hovers a sortable column header to a hardcoded light grey (#cdcdcd), which on
   the dark theme leaves the near-white header title white-on-grey and unreadable (#4066).
   Keep the hover on a dark surface, lifted a touch over the header for feedback. Our
   selector out-specifies the single vendor rule, so no !important is needed. */
[data-bs-theme="dark"] .tabulator .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background-color: var(--varial-gray-100);
}

/* Tabulator's vendor CSS hardcodes a WHITE row background
   (.tabulator-row{background-color:#fff}) and sets no cell text colour, so cells
   just inherit the light body colour. On the dark theme that left rows white
   with near-invisible light text — the unreadable tables the QA pass flagged.
   Pin EVERY row to the dark card surface and force legible light cell text. Our
   selectors out-specify the vendor's single .tabulator-row, so no !important is
   needed (and components/ may not use it). */
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
  border-bottom-color: var(--varial-border);
  background-color: var(--varial-card-bg);
  color: var(--varial-gray-800);
}

/* Subtle zebra: even rows lift slightly over the card. Must be an OPAQUE colour
   — a translucent tint lets Tabulator's vendor white table/tableholder base show
   through, which rendered even rows white (and their light text invisible).
   color-mix keeps it card-relative without a one-off token. Selector is one
   class longer than the all-rows rule above so it still wins. */
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even {
  background-color: color-mix(in srgb, var(--varial-card-bg, #1E293B) 94%, white);
}

/* Hover comes after the zebra rule so it wins the specificity tie and
   highlights both odd and even rows. The VWAP A/B comparison tints use
   !important and win over all of these. */
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
  background: var(--varial-gray-100);
}

[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  border-right-color: var(--varial-border);
  /* Belt-and-suspenders: also pin the cell text light. The longer
     .vrl-out-of-horizon selector still wins, so greyed-out out-of-horizon cells
     keep their intentional muted treatment. */
  color: var(--varial-gray-800);
}

[data-bs-theme="dark"] .tabulator .tabulator-tableholder {
  background: transparent;
}

/* Row-number gutter (rowHeader: {formatter:"rownum"}): vendor pins it to a light
   #e6e6e6 fill, so the light rownum text washed out. Give it a dark gutter
   surface and a legible muted-light number. */
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-row-header,
[data-bs-theme="dark"] .tabulator .tabulator-row-header {
  background-color: var(--varial-bg);
  color: var(--varial-gray-500);
  /* Vendor pins light borders (#999/#aaa) on the gutter, which read as a strong
     white edge on navy — darken them to the theme border. */
  border-right-color: var(--varial-border);
  border-bottom-color: var(--varial-border);
}