/* Elevation Panel — right-side slide-out with stacked collapsible charts */

/* Panel container — slides from right edge of map */
.elevation-panel {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(640px, 40vw);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 8px;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s ease, opacity 0.15s ease;
}

/* Hidden state — slid off to the right */
.elevation-panel.state-hidden {
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

/* Panel header */
.elevation-panel-header {
  padding: 8px 12px 6px;
  background: transparent;
  color: #333;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.ep-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elevation-panel-title {
  font-weight: 600;
  font-size: 12px;
  color: #333;
}

/* Controls (collapse, close) */
.elevation-panel-controls {
  display: flex;
  gap: 2px;
}

.elevation-panel-btn {
  background: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
}

.elevation-panel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

/* Header metadata: track, date, time-range as three flex items */
.ep-header-meta {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
  font-size: 12px;
  font-weight: 500;
}

.ep-meta-track {
  color: #444;
}

/* Defensive reset for elevation-UI buttons.
   The standalone elevation page (elevation.jsp) loads main.css via
   common/header.jsp; main.css applies a global `button {}` rule that
   forces text-transform: uppercase and height: 3.125em. The panel page
   (beta.jsp) does not load main.css so it isn't affected. Each button
   class below sets its own padding, font, border, etc., but neither
   text-transform nor height — without this reset the standalone page
   gets uppercase, oversized chips. */
.ep-beam-chip,
.ep-track-chip {
  text-transform: none;
  height: auto;
}

/* Track chips — mutex selector shown above the plots when the selection
   has 2+ tracks. Hidden entirely (display:none set inline by the panel
   manager) for single-track selections. Pattern matches .ep-beam-chips. */
.ep-track-chips {
  display: flex;
  gap: 4px;
  padding: 4px 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.ep-track-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.ep-track-chip:hover {
  background: #f5f5f5;
}

.ep-track-chip.active {
  background: rgba(34, 118, 172, 0.15);
  border-color: rgba(34, 118, 172, 0.6);
  color: #1a4f7a;
}

.ep-track-chip.active:hover {
  background: rgba(34, 118, 172, 0.22);
}

.ep-meta-date,
.ep-meta-time {
  color: #666;
}

/* Separator between adjacent metadata items (skipped before first child
   so missing pieces don't leave a leading bullet) */
.ep-header-meta > *:not(:first-child)::before {
  content: '·';
  color: #999;
  margin: 0 12px;
}

/* Action links in collection bar */
.ep-bar-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.ep-bar-actions a,
.ep-bar-actions a:link,
.ep-bar-actions a:visited {
  font-size: 12px;
  color: #2276ac;
  text-decoration: none;
  cursor: pointer;
}

.ep-bar-actions a:hover {
  color: #333;
  text-decoration: underline;
}

.ep-action-sep {
  color: #999;
  font-size: 12px;
}

.ep-login-msg {
  font-size: 10px;
  color: #666;
}

.ep-login-msg a {
  color: #2276ac;
  text-decoration: none;
}

.ep-login-msg a:hover {
  text-decoration: underline;
}

.ep-order-success {
  color: #20ce6f !important;
  cursor: default;
}

.ep-order-error {
  color: #e74c3c !important;
}

/* Panel content — scrollable area for stacked charts */
.elevation-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* Resize handle on left edge */
.elevation-panel-divider {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 502;
}

.elevation-panel-divider:hover {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}

/* ============================================================
   Collection Chart Groups — stacked with collapsible headers
   ============================================================ */

.ep-chart-group {
  border-bottom: 1px solid #eee;
}

/* Collection header bar */
.ep-collection-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  gap: 8px;
  user-select: none;
}

.ep-collection-bar:hover {
  background: #f8f8f8;
}

.ep-collection-bar.disabled {
  cursor: default;
  opacity: 0.5;
}

.ep-collection-bar.disabled:hover {
  background: transparent;
}

.ep-collection-status {
  font-size: 11px;
  color: #666;
}

.ep-status-nodata {
  font-size: 10px;
  color: #666;
  font-style: italic;
}

.ep-status-meta {
  font-size: 10px;
  color: #666;
  font-weight: 400;
}

/* Overlay chips (ATL03 only — picks one collection to overlay on the photons) */
.ep-overlay-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  justify-content: flex-start;
}

.ep-overlay-label,
.ep-conf-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;  /* aligns chip-row left edges across confidence + overlay */
  margin-right: 4px;
}

.ep-overlay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 1px 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.ep-overlay-chip:hover {
  background: #fef2f2;
  border-color: #e74c3c;
}

.ep-overlay-chip.active {
  background: #e74c3c;
  color: #fff;
  border-color: #e74c3c;
}

.ep-overlay-chip.active:hover {
  background: #c53030;
  border-color: #c53030;
}

.ep-overlay-chip.disabled {
  opacity: 0.35;
  cursor: default;
  border-color: #eee;
  color: #999;
}

.ep-overlay-chip.disabled:hover {
  background: #fff;
  border-color: #eee;
}

/* Confidence toggle chips (ATL03) */
.ep-confidence-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  justify-content: flex-start;
}

.ep-conf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.ep-conf-chip:hover {
  background: #f5f5f5;
}

.ep-conf-chip.off {
  opacity: 0.35;
  border-color: #eee;
}

.ep-conf-chip.off:hover {
  opacity: 0.6;
}

.ep-conf-count {
  color: #666;
  font-weight: 400;
  font-size: 10px;
}


.ep-collection-bar .ep-expand-icon {
  font-size: 10px;
  color: #999;
  width: 14px;
  text-align: center;
  transition: transform 0.15s ease;
}

.ep-collection-bar.collapsed .ep-expand-icon {
  transform: rotate(-90deg);
}

.ep-collection-name {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.ep-collection-status {
  font-size: 10px;
  color: #666;
}

/* Chart body — hidden when collapsed */
.ep-chart-body {
  padding: 0 8px 8px;
  overflow: hidden;
}

.ep-chart-body.collapsed {
  display: none;
}

/* Chart context label (track, date/time) */
.ep-chart-context {
  font-size: 10px;
  color: #666;
  padding: 4px 4px 2px;
}

/* Beam toggle chips */
.ep-beam-chips {
  display: flex;
  gap: 4px;
  padding: 4px 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Reset the global <button> rule in main.css (text-transform: uppercase,
   height: 3.125em, color: #fff, padding: 0 2.75em, white-space: nowrap, etc.)
   so the chip looks the same whether it's rendered inside the beta map
   page (which doesn't include main.css) or the standalone elevation page
   (which does, via the JSP framework default). Applies to all chip
   variants below. */
.ep-beam-chip,
.ep-track-chip,
.ep-conf-chip,
.ep-overlay-chip {
  text-transform: none;
  letter-spacing: normal;
  height: auto;
  line-height: 1.4;
  color: #333;
  white-space: nowrap;
}

.ep-beam-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.ep-beam-chip:hover {
  background: #f5f5f5;
}

.ep-beam-chip.off {
  opacity: 0.35;
  border-color: #eee;
}

.ep-beam-chip.off:hover {
  opacity: 0.6;
}

.ep-beam-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ep-beam-strength {
  color: #777;
  font-weight: 400;
  font-size: 10px;
}

.ep-beam-action {
  padding: 1px 5px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 10px;
  color: #999;
  cursor: pointer;
}

.ep-beam-action:hover {
  color: #333;
  background: #f0f0f0;
}

/* Override inline styles from elevation.js and Highcharts */
#elevation-panel .ep-chart-group {
  display: block !important;  /* Prevent elevation.js from hiding groups */
}

#elevation-panel #loading-indicator-container,
#elevation-panel #elevation-wait {
  display: none !important;  /* Panel uses per-collection status spinners instead */
}

#elevation-panel [id^="chart"],
#elevation-panel [id^="canopy_"],
#elevation-panel .highcharts-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Loading state */
#elevation-panel .ep-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
  font-size: 13px;
  gap: 8px;
}

/* No data message */
.ep-no-data {
  padding: 6px 12px;
  font-size: 11px;
  color: #999;
  font-style: italic;
}

/* Photon-page header context lines (track/beam, lat/lon, elevation) */
.ep-photon-context {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

.ep-photon-context.first { padding: 4px 0 0; }
.ep-photon-context.last  { padding: 0 0 6px; }

/* Toast notifications: fixed-position, top-right of viewport. Used for
   Harmony order success/error feedback; success auto-dismisses, errors
   persist until dismissed. */
.ep-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 380px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.ep-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 4px solid transparent;
  font-size: 13px;
  line-height: 1.4;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.ep-toast.is-entered {
  transform: translateX(0);
  opacity: 1;
}

.ep-toast.is-leaving {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
}

.ep-toast.is-success {
  background: #f1fbf6;
  border-left-color: #20ce6f;
  color: #1e6e3a;
}

.ep-toast.is-error {
  background: #ffebee;
  border-left-color: #d32f2f;
  color: #8a1a1a;
}

.ep-toast-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.2;
  padding-top: 1px;
}

.ep-toast.is-success .ep-toast-icon { color: #20ce6f; }
.ep-toast.is-error   .ep-toast-icon { color: #d32f2f; }

.ep-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ep-toast-body .ep-toast-line { margin: 0; }
.ep-toast-body .ep-toast-line + .ep-toast-line { margin-top: 4px; }

.ep-toast-body a {
  color: inherit;
  text-decoration: underline;
}
.ep-toast-body a:hover { text-decoration: none; }

.ep-toast-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.6;
  text-transform: none;
  height: auto;
}
.ep-toast-close:hover { opacity: 1; }
.ep-toast-close:focus { outline: 2px solid currentColor; outline-offset: 2px; }