/*
 * Custom styling for runway configuration probability dashboard
 *
 * WARNING - Plotly version coupling:
 * This file contains selectors targeting Plotly's internal SVG DOM structure
 * (.xy2, .scatterlayer, g.traces, .overplot, etc.) which may change between
 * Plotly versions. Test chart rendering and hover behavior thoroughly before
 * upgrading Plotly. See requirements.txt for version constraints.
 */

/* Light mode styling for header action icons (theme toggle, settings) */
[data-mantine-color-scheme="light"] #color-scheme-toggle,
[data-mantine-color-scheme="light"] #settings-button {
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-cool_gray-3);
}

/* Dark mode styling for header action icons (theme toggle, settings) */
[data-mantine-color-scheme="dark"] #color-scheme-toggle,
[data-mantine-color-scheme="dark"] #settings-button {
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-cool_gray-9);
}

/* Ag Grid Alpine theme customization for light mode */
[data-mantine-color-scheme="light"] .ag-theme-alpine {
  --ag-background-color: #ffffff;
  --ag-foreground-color: #000000;
  --ag-border-color: #e0e0e0;
  --ag-header-background-color: #f5f5f5;
  --ag-row-hover-color: #f5f5f5;
  --ag-selected-row-background-color: #e3f2fd;
  --ag-grid-size: 4px;
}

/* Ag Grid Alpine theme customization for dark mode */
[data-mantine-color-scheme="dark"] .ag-theme-alpine {
  --ag-background-color: #1a1b1e;
  --ag-foreground-color: #c1c2c5;
  --ag-border-color: #373A40;
  --ag-header-background-color: #25262b;
  --ag-row-hover-color: #2c2e33;
  --ag-selected-row-background-color: #2c3e50;
  --ag-odd-row-background-color: #1a1b1e;
  --ag-grid-size: 4px;
  --headwind-alert-color: #ffd8a8; /* Open Colors orange-2 for dark mode */
}

/* Headwind alert icon color (matches Mantine Alert title) */
[data-mantine-color-scheme="light"] .ag-theme-alpine {
  --headwind-alert-color: #f76707; /* Open Colors orange-7 for light mode */
}

/* Subtitle alternating animation (used by mobile and hearth layouts) */
@keyframes fadeAlternate {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* Container for overlapping alternate content */
.alternating-subtitle-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* First item (subtitle) - visible first half of cycle, defines container height */
.fade-alternate-primary {
  animation: fadeAlternate 10s ease-in-out infinite;
  /* No position: absolute - stays in normal flow for height calculation */
}

/* Second item (NBM status) - visible second half of cycle, overlays primary */
.fade-alternate-secondary {
  animation: fadeAlternate 10s ease-in-out infinite;
  animation-delay: 5s;  /* Start halfway through 10s cycle */
  position: absolute;
  opacity: 0;  /* Start hidden until animation begins */
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;  /* Prevent blocking clicks when invisible */
}

/* Chart→Grid hover highlight: Match AG Grid's native hover styling */
.ag-theme-alpine .ag-row.chart-hover-highlight {
  background-color: var(--ag-row-hover-color);
}

[data-mantine-color-scheme="dark"] .ag-theme-alpine .ag-row.chart-hover-highlight {
  background-color: var(--ag-row-hover-color);
}

/* Disable SVG clip-path so wind vector arrows can extend beyond axis bounds */
/* and interpolated probabilities > 1 are visible */
#probability-chart .overplot > g {
  clip-path: none;
}

/* Wind legend arrow colors (chart vectors now set in Python - see chart.py) */
[data-mantine-color-scheme="light"] .wind-legend-arrow {
  stroke: #707071 !important;
}

[data-mantine-color-scheme="dark"] .wind-legend-arrow {
  stroke: #b1b1b1 !important;
}

/* Allow SVG content to render outside its viewport bounds */
/* Container and Group overflow managed in Python (desktop.py) */
#probability-chart,
#probability-chart svg {
  overflow: visible;
}

/* Wind hover trace: hide empty legend symbol and shift text left to align with prob traces */
/* legendrank ensures wind trace is always first in hover (both stacked and overlaid modes) */
/* --plotly-hover-symbol-width: Plotly's hover layout breakdown (from SVG):
     0-5px: left margin
     5-35px: symbol line (d="M5,0h30")
     35-40px: gap between symbol and text
     40px+: text starts (x="40")
   Shift by 35px to reclaim symbol+gap while preserving 5px left margin.
   Adjust if Plotly changes hover layout in future versions. */
#probability-chart {
  --plotly-hover-symbol-width: 35px;
}

#probability-chart svg g.traces:first-child .legendlines,
#probability-chart svg g.traces:first-child .legendsymbols,
#probability-chart svg g.traces:first-child .legendfill {
  visibility: hidden;
}

#probability-chart svg g.traces:first-child text.legendtext {
  transform: translateX(calc(-1 * var(--plotly-hover-symbol-width)));
}

/* Unified hover title: make time label bold*/
#probability-chart svg text.legendtitletext {
  font-weight: bold !important;
}

/* ========== Hearth Wall Display Styles ========== */

/* Auto-hide header: hidden by default, shows on hover */
#hearth-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none; /* Allow clicks through when hidden */
}

/* Show header when hovering trigger zone OR header itself */
#hearth-header-trigger:hover ~ #hearth-header,
#hearth-header:hover {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto; /* Re-enable interactions when visible */
}

/* Hearth chart: disable clip-path for wind vectors and overflow probabilities */
#hearth-probability-chart .overplot > g {
  clip-path: none;
}

/* Hearth chart: allow SVG overflow for wind vectors */
#hearth-probability-chart,
#hearth-probability-chart svg {
  overflow: visible;
}

/* Hearth wind vector colors set in Python (chart.py) to support conditional
   orange coloring for strong headwind alerts. Legend arrow styling uses the
   .wind-legend-arrow rules above. */