/*
 * 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 */
  --gust-alert-color: #99e9f2; /* Open Colors cyan-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 */
  --gust-alert-color: #1098ad; /* Open Colors cyan-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,
#metering-delay-profile {
  --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,
#metering-delay-profile svg g.traces:first-child text.legendtext{
  transform: translateX(calc(-1 * var(--plotly-hover-symbol-width)));
}

/* Metering sliders: move always-on label below thumb (default is above, conflicts with titles) */
#metering-adr-slider .mantine-Slider-label,
#metering-max-offblock-slider .mantine-Slider-label {
  top: unset;
  bottom: calc(-1 * var(--slider-label-offset, 36px));
}

/* Unified hover title: make time label bold, nudge right for visual indent */
#probability-chart svg text.legendtitletext,
#metering-demand-profile svg text.legendtitletext,
#metering-delay-profile svg text.legendtitletext {
  font-weight: bold !important;
  transform: translateX(3px);
}

/* ========== Desktop Navbar ========== */

/* Navbar collapse: override Mantine's AppShell navbar width via data attribute.
   Collapsed width (49px) matches NavLink's natural icon-only width
   (24px icon + symmetric inline padding), so icons stay in the same horizontal
   position relative to the viewport edge when toggling.
   Fixed px: tied to the icon's fixed pixel size, not font-relative. */
[data-navbar-collapsed="true"] .mantine-AppShell-navbar {
    width: 49px !important;
}
[data-navbar-collapsed="true"] .mantine-AppShell-main {
    --app-shell-navbar-offset: 49px !important;
}

/* Smooth transitions for both states */
.mantine-AppShell-navbar { transition: width 0.2s ease; }
.mantine-AppShell-main { transition: padding-left 0.2s ease; }

/* Hide label/description wrapper when collapsed; icons stay left-aligned
   at their natural padding position (no centering needed — symmetric padding
   makes them appear centered at the matched collapsed width) */
[data-navbar-collapsed="true"] .mantine-NavLink-body { display: none; }
.mantine-AppShell-navbar .mantine-NavLink-body { white-space: nowrap; }
[data-navbar-collapsed="true"] .mantine-NavLink-section[data-position="left"] {
  margin-inline-end: 0;
}

/* Collapse toggle positioning: right-aligned when expanded, centered when collapsed */
.mantine-AppShell-navbar .mantine-ActionIcon-root {
  margin-inline-start: auto;
  margin-inline-end: 7px;
}
[data-navbar-collapsed="true"] .mantine-AppShell-navbar .mantine-ActionIcon-root {
  margin-inline: auto;
}

/* Toggle icon: default to close-panel (expanded state), swap when collapsed */
.navbar-expand-icon { display: none; }
[data-navbar-collapsed="true"] .navbar-collapse-icon { display: none; }
[data-navbar-collapsed="true"] .navbar-expand-icon { display: block; }

/* ========== 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. */