/*
 * Tabulator vendor overrides scoped to the MarketView VWAP DUID table.
 *
 * These rules sit in the vendor-overrides layer (per CLAUDE.md CSS rule #1)
 * because Tabulator applies its own row backgrounds with high specificity;
 * the only reliable way to override is with !important. Keeping them here
 * (rather than in pages/revert-nem.css) means the !important is searchable
 * inside the vendor-exemption zone and the page-level CSS stays clean.
 *
 * Loaded by templates/pages/revert-nem.html alongside tabulator-varial.css.
 */

#vwap-duid-table .tabulator-row.vwap-row-a {
  background-color: rgba(27, 58, 160, 0.10) !important;
  box-shadow: inset 4px 0 0 var(--varial-primary, #1B3AA0);
}

#vwap-duid-table .tabulator-row.vwap-row-b {
  background-color: rgba(22, 163, 74, 0.10) !important;
  box-shadow: inset 4px 0 0 var(--varial-green, #16A34A);
}

#vwap-duid-table .tabulator-row.vwap-row-a:hover {
  background-color: rgba(27, 58, 160, 0.16) !important;
}

#vwap-duid-table .tabulator-row.vwap-row-b:hover {
  background-color: rgba(22, 163, 74, 0.16) !important;
}

/* The 10% tints vanish on the dark surface — lift them so the A/B comparison
   rows stay legible in dark mode. */
[data-bs-theme="dark"] #vwap-duid-table .tabulator-row.vwap-row-a {
  background-color: rgba(59, 130, 246, 0.22) !important;
}

[data-bs-theme="dark"] #vwap-duid-table .tabulator-row.vwap-row-b {
  background-color: rgba(34, 197, 94, 0.22) !important;
}

[data-bs-theme="dark"] #vwap-duid-table .tabulator-row.vwap-row-a:hover {
  background-color: rgba(59, 130, 246, 0.32) !important;
}

[data-bs-theme="dark"] #vwap-duid-table .tabulator-row.vwap-row-b:hover {
  background-color: rgba(34, 197, 94, 0.32) !important;
}

/* Default (unselected) row hover (#3323). The shared component theme hovers rows with
   --varial-bg-subtle, which in dark mode is the same colour as the zebra stripe — so
   hovering gave no feedback — while the vendor cell:hover adds a hardcoded light-blue
   tint that never flips. Give one clear, theme-aware hover (the same blue as the
   "load into A" affordance) that reads in both light and dark. The A/B rules above are
   more specific, so selected rows keep their blue/green hover. */
#vwap-duid-table .tabulator-row:hover {
  background-color: var(--varial-primary-bg-light, #dbeafe) !important;
}

#vwap-duid-table .tabulator-row .tabulator-cell:hover {
  background: transparent !important;
}

/* The vendor tableholder + table surface are hardcoded white; keep them on the card
   surface so the table body (and any space below the rows) matches the dark theme. */
[data-bs-theme="dark"] #vwap-duid-table .tabulator-tableholder,
[data-bs-theme="dark"] #vwap-duid-table .tabulator-tableholder .tabulator-table {
  background-color: var(--varial-card-bg, #1E293B) !important;
}

/* DUID VWAP column headers were hard to read: the long titles ("Avg flat spot
   $/MWh", "Rank (region+fuel)") wrap to 2–3 lines but the shared 3.5rem header cap
   clipped them, and the default grey-500 title colour was too faint in both themes.
   Lift the cap so wrapped titles show in full, and use the theme-flipping gray-900
   (near-black on cream, near-white on navy) for a legible header in light and dark. */
#vwap-duid-table .tabulator-header {
  max-height: none !important;
}

/* Force the long titles to WRAP (not ellipsis-truncate to "AVG VWA…") and shrink
   the header type a notch, so every heading reads in full within a narrow column
   without needing horizontal scroll. The vendor/base rules kept them on one line. */
#vwap-duid-table .tabulator-header .tabulator-col .tabulator-col-content {
  font-size: 0.66rem !important;
  letter-spacing: 0 !important;
}

#vwap-duid-table .tabulator-header .tabulator-col .tabulator-col-title,
#vwap-duid-table .tabulator-header .tabulator-col .tabulator-col-title-holder {
  color: var(--varial-gray-900, #1C1814) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
}

/* Header-filter controls (DUID "Search…" box, Region/Fuel "All" selects) had no
   explicit surface, so they fell back to the browser's default input chrome — a dark
   box that looked out of place on the cream light theme (and inconsistent on dark).
   Put them on the card surface with theme-flipping tokens so they match both modes. */
#vwap-duid-table .tabulator-header-filter input,
#vwap-duid-table .tabulator-header-filter select {
  background-color: var(--varial-card-bg, #fff) !important;
  color: var(--varial-gray-900, #1C1814) !important;
  border: 1px solid var(--varial-border, #E4E2DC) !important;
  border-radius: var(--varial-radius-sm, 0.25rem) !important;
}

#vwap-duid-table .tabulator-header-filter input::placeholder {
  color: var(--varial-gray-500, #8A867F) !important;
}

/* The vendor's internal scroll area used the browser's default (dark-grey)
   scrollbar, which stood out sharply against the cream light theme (#3731).
   Repaint it with theme-flipping tokens in both engines. */
#vwap-duid-table .tabulator-tableholder {
  scrollbar-color: var(--varial-border-interactive, #948B72) var(--varial-card-bg, #fff);
  scrollbar-width: thin;
}

#vwap-duid-table .tabulator-tableholder::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#vwap-duid-table .tabulator-tableholder::-webkit-scrollbar-track {
  background: var(--varial-card-bg, #fff);
}

#vwap-duid-table .tabulator-tableholder::-webkit-scrollbar-thumb {
  background-color: var(--varial-border-interactive, #948B72);
  border-radius: 999px;
}