/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #030810;
  color: #fff;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  background: rgba(3, 8, 22, 0.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(77, 184, 255, 0.12);
}

#nav-back {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: #4db8ff; text-decoration: none;
  border-radius: 6px; transition: background 0.2s;
}
#nav-back:hover { background: rgba(77, 184, 255, 0.15); }
#nav-back svg { width: 20px; height: 20px; }

#nav-logo { height: 28px; width: auto; filter: drop-shadow(0 0 12px rgba(77, 184, 255, 0.2)); }

#nav-title {
  font-size: 0.82rem; font-weight: 400;
  color: rgba(185, 215, 255, 0.7);
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════
   MAP (fixed background — identical pattern to main site)
══════════════════════════════════════════════════════ */
#map-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════
   GLASS PANELS
══════════════════════════════════════════════════════ */
.glass-panel {
  background: rgba(6, 14, 34, 0.70);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(77, 184, 255, 0.15);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  color: #fff;
}

.glass-panel h3 {
  font-size: 0.85rem; font-weight: 600;
  color: #4db8ff; margin-bottom: 0.6rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.glass-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(6, 14, 34, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(77, 184, 255, 0.15);
  border-radius: 50px;
  padding: 0.55rem 1.3rem;
  font-size: 0.8rem;
  color: rgba(185, 215, 255, 0.85);
  letter-spacing: 0.02em;
  pointer-events: auto;
}
.glass-pill svg { width: 16px; height: 16px; color: #4db8ff; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   MODEL OVERLAY (center of map, big label)
══════════════════════════════════════════════════════ */
.model-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.model-overlay.visible { opacity: 1; }

#model-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.model-overlay-logo {
  height: 65px;
  width: auto;
  filter: drop-shadow(0 0 30px rgba(77, 184, 255, 0.5));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.model-overlay.met .model-overlay-logo { opacity: 1; }

.model-overlay-name {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 2px 20px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(0, 0, 0, 0.6);
  transition: color 0.4s ease;
}

.model-overlay.competitor .model-overlay-name { color: #ff6030; }
.model-overlay.met .model-overlay-name { color: #40d0ff; }

.model-overlay-res {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  -webkit-text-stroke: 0.5px #000;
  paint-order: stroke fill;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.9),
    0 2px 15px rgba(0, 0, 0, 0.7);
  transition: color 0.4s ease;
}

.model-overlay.competitor .model-overlay-res { color: rgba(255, 120, 60, 0.85); }
.model-overlay.met .model-overlay-res { color: rgba(77, 200, 255, 0.85); }

/* ══════════════════════════════════════════════════════
   LEGEND (top-left)
══════════════════════════════════════════════════════ */
#legend {
  position: fixed;
  top: 70px; left: 20px;
  z-index: 100;
  min-width: 220px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

#legend.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.legend-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: opacity 0.2s;
}
.legend-item:hover { opacity: 0.7; }

.legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid #000;
}

.legend-count {
  margin-left: auto;
  font-size: 0.7rem;
  color: rgba(185, 215, 255, 0.5);
}

.legend-info {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(77, 184, 255, 0.12);
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.7rem;
  color: rgba(185, 215, 255, 0.5);
}


/* ══════════════════════════════════════════════════════
   METRICS PANEL (right side)
══════════════════════════════════════════════════════ */
#metrics-panel {
  position: fixed;
  top: 70px; right: 20px;
  z-index: 100;
  width: 340px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

#metrics-panel.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.metrics-subtitle {
  font-size: 0.72rem;
  color: rgba(185, 215, 255, 0.5);
  margin-bottom: 0.8rem;
  letter-spacing: 0.03em;
}

.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 0.8rem;
}

.metrics-table th {
  padding: 0.5rem 0.4rem;
  text-align: center;
  font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(77, 184, 255, 0.2);
}

.metrics-table td {
  padding: 0.45rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid rgba(77, 184, 255, 0.06);
}

.metric-label {
  text-align: left !important;
  color: rgba(185, 215, 255, 0.7);
  font-weight: 500;
}

.col-gfs { color: rgba(255, 150, 100, 0.9); }
.col-met { color: #4db8ff; }
.col-met.highlight { color: #76ff03; font-weight: 700; font-size: 0.88rem; }

.colorbar-container {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem;
}

.colorbar-img { width: 100%; height: auto; }
.colorbar-label { font-size: 0.65rem; color: rgba(185, 215, 255, 0.45); letter-spacing: 0.04em; }

/* Wind model indicator (fixed, right side below metrics area) */
.wind-model-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(77, 184, 255, 0.12);
  transition: all 0.4s ease;
}

/* "Exibindo" label */
.wl-showing {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.wl-showing:not(.met) { color: rgba(255, 150, 100, 0.7); }
.wl-showing.met { color: rgba(77, 200, 255, 0.7); }

/* Model name (text for Concorrente) */
.wl-name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
  paint-order: stroke fill;
}

.wl-name.gfs { color: #ff6030; }
.wl-name.met { color: #40d0ff; }

/* Resolution line */
.wl-res {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.wind-model-label.gfs .wl-res { color: rgba(255, 150, 100, 0.65); }
.wind-model-label.met .wl-res { color: rgba(77, 200, 255, 0.8); }

/* Logo (for METENERGY) */
.wind-label-logo {
  height: 55px;
  width: auto;
  filter: drop-shadow(0 0 20px rgba(77, 184, 255, 0.4));
}

/* ══════════════════════════════════════════════════════
   SCALE BAR (bottom-left, over map)
══════════════════════════════════════════════════════ */
.scale-bar {
  position: fixed;
  bottom: 40px; left: 30px;
  z-index: 100;
  display: flex; align-items: center; gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.scale-line {
  width: 80px; height: 0;
  border-top: 2.5px solid #000;
  transition: border-color 0.4s ease, width 0.4s ease;
}

.scale-bar.gfs .scale-line {
  border-color: rgba(0, 0, 0, 0.8);
  width: 80px;
}

.scale-bar.met .scale-line {
  border-color: rgba(100, 100, 100, 0.8);
  width: 50px;
}

.scale-value {
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
}

.scale-bar.gfs .scale-value { color: rgba(255, 150, 100, 0.95); }
.scale-bar.met .scale-value { color: #4db8ff; }

.scale-model-name {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 0.4s ease;
}

.scale-model-name.gfs { color: rgba(255, 150, 100, 0.8); }
.scale-model-name.met { color: rgba(77, 184, 255, 0.8); }

/* ══════════════════════════════════════════════════════
   SCROLL CONTAINER
══════════════════════════════════════════════════════ */
#scroll-container {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.stage {
  height: 200vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 50vh;
}

.stage > * { pointer-events: auto; }

/* Extra buffer stage: only on mobile */
.stage-mobile-only { display: none; }
@media (max-width: 768px) { .stage-mobile-only { display: flex; } }

#overview-label {
  transition: opacity 0.4s ease;
}

/* ══════════════════════════════════════════════════════
   TURBINE MARKERS
══════════════════════════════════════════════════════ */
.turbine-marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid #000;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease, width 0.2s, height 0.2s;
  pointer-events: auto;
}

.turbine-marker:hover {
  width: 14px; height: 14px;
  z-index: 10;
}

.turbine-other {
  width: 5px; height: 5px;
  opacity: 0.4 !important;
}
.turbine-other.visible {
  animation: none !important;
}

/* MapLibre popup styling */
.maplibregl-popup-content {
  background: rgba(6, 14, 34, 0.92) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 184, 255, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.maplibregl-popup-tip { border-top-color: rgba(6, 14, 34, 0.92) !important; }
.maplibregl-popup-close-button { color: #4db8ff; font-size: 1rem; }

/* ══════════════════════════════════════════════════════
   CHARTS SECTION
══════════════════════════════════════════════════════ */
#charts-section {
  position: relative;
  z-index: 200;
  background: #030810;
  padding: 3rem 2rem 3rem;
  min-height: 100vh;
}

.charts-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.charts-header h2 {
  font-size: 1.6rem; font-weight: 700;
  color: #F5C200;
  margin-bottom: 0.4rem;
}

.charts-subtitle {
  font-size: 0.85rem;
  color: rgba(185, 215, 255, 0.55);
  font-weight: 300;
}

/* Subpark tabs */
.tabs-panel {
  display: flex; gap: 0.5rem;
  flex-wrap: wrap; justify-content: center;
  margin: 0 auto 1.5rem;
  max-width: 900px;
  padding: 0.8rem 1rem;
}

.tab-btn {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(77, 184, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: rgba(185, 215, 255, 0.6);
  font-family: inherit;
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tab-btn:hover { border-color: rgba(77, 184, 255, 0.35); color: #fff; }
.tab-btn.active { background: rgba(77, 184, 255, 0.15); border-color: #4db8ff; color: #4db8ff; }

/* Subpark metrics bar */
#subpark-metrics {
  display: flex; gap: 2rem;
  justify-content: center; flex-wrap: wrap;
  margin: 0 auto 2rem;
  max-width: 900px;
  padding: 1rem 1.5rem;
}

.sp-metric { text-align: center; }

.sp-metric-value {
  font-size: 1.3rem; font-weight: 700;
  display: block; margin-bottom: 0.15rem;
}
.sp-metric-value.met { color: #4db8ff; }
.sp-metric-value.tok { color: rgba(255, 150, 100, 0.9); }
.sp-metric-value.good { color: #76ff03; }

.sp-metric-label {
  font-size: 0.65rem;
  color: rgba(185, 215, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Charts grid */
#charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.chart-card {
  background: rgba(6, 14, 34, 0.70);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(77, 184, 255, 0.10);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  transition: border-color 0.3s ease;
}
.chart-card:hover { border-color: rgba(77, 184, 255, 0.3); }

.chart-card-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.chart-card-title { font-size: 0.82rem; font-weight: 600; color: #fff; }
.chart-card-coords { font-size: 0.65rem; color: rgba(185, 215, 255, 0.4); }

.chart-canvas-wrapper {
  position: relative;
  width: 100%; height: 200px;
}

.chart-canvas-wrapper canvas { width: 100% !important; height: 100% !important; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
#footer {
  position: relative; z-index: 200;
  background: #030810;
  text-align: center;
  padding: 2rem;
  border-top: 1px solid rgba(77, 184, 255, 0.08);
}

.footer-logo { height: 36px; width: auto; opacity: 0.6; margin-bottom: 0.4rem; }
#footer p { font-size: 0.7rem; color: rgba(185, 215, 255, 0.3); letter-spacing: 0.06em; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Navbar */
  #navbar { padding: 0.5rem 0.8rem; }
  #nav-title { display: none; }
  #nav-logo { height: 22px; }

  /* Legend: compact, top-left */
  #legend {
    top: 52px; left: 8px;
    min-width: 140px;
    padding: 0.6rem 0.8rem;
    max-width: 160px;
  }
  #legend h3 { font-size: 0.65rem; margin-bottom: 0.3rem; }
  .legend-item { font-size: 0.68rem; padding: 0.2rem 0; }
  .legend-dot { width: 9px; height: 9px; }
  .legend-count { font-size: 0.6rem; }
  .legend-info { font-size: 0.6rem; margin-top: 0.5rem; padding-top: 0.4rem; }

  /* Metrics panel: bottom sheet style */
  #metrics-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 0.8rem 1rem;
    max-height: 45vh;
    overflow-y: auto;
    transform: translateY(100%);
  }
  #metrics-panel.visible {
    transform: translateY(0);
  }
  #metrics-panel h3 { font-size: 0.75rem; }
  .metrics-subtitle { font-size: 0.65rem; margin-bottom: 0.5rem; }
  .metrics-table { font-size: 0.7rem; }
  .metrics-table th { font-size: 0.62rem; padding: 0.35rem 0.2rem; }
  .metrics-table td { padding: 0.3rem 0.2rem; }
  .col-met.highlight { font-size: 0.78rem; }
  .colorbar-img { max-width: 90%; }
  .colorbar-label { font-size: 0.58rem; }

  /* Wind model label inside panel */
  .wind-model-label { margin-top: 0.5rem; padding-top: 0.5rem; }
  .wl-showing { font-size: 0.7rem; }
  .wl-name { font-size: 1.2rem; }
  .wl-res { font-size: 0.8rem; }
  .wind-label-logo { height: 35px; }

  /* Scale bar: smaller, above metrics panel */
  .scale-bar {
    bottom: auto;
    top: auto;
    left: 8px;
    bottom: 50vh;
  }
  .scale-value { font-size: 0.75rem; }
  .scale-model-name { font-size: 0.62rem; }
  .scale-line { width: 50px; }
  .scale-bar.met .scale-line { width: 35px; }

  /* Scroll stages: shorter on mobile (150vh instead of 200vh) */
  .stage { height: 150vh; padding-top: 40vh; }

  /* Overview label */
  .glass-pill {
    font-size: 0.68rem;
    padding: 0.4rem 0.9rem;
    max-width: 85vw;
    text-align: center;
  }
  .glass-pill svg { width: 14px; height: 14px; }

  /* Turbine markers: smaller on mobile */
  .turbine-marker { width: 6px; height: 6px; }
  .turbine-marker:hover { width: 10px; height: 10px; }

  /* Charts section */
  #charts-section { padding: 2rem 0.8rem 2rem; }

  .charts-header { margin-bottom: 1.5rem; }
  .charts-header h2 { font-size: 1.2rem; }
  .charts-subtitle { font-size: 0.75rem; }

  .tabs-panel {
    padding: 0.5rem 0.6rem;
    gap: 0.35rem;
  }
  .tab-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.68rem;
  }

  #subpark-metrics {
    gap: 1rem;
    padding: 0.8rem 1rem;
    flex-wrap: wrap;
  }
  .sp-metric-value { font-size: 1.05rem; }
  .sp-metric-label { font-size: 0.58rem; }

  #charts-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .chart-card { padding: 0.8rem; }
  .chart-card-title { font-size: 0.75rem; }
  .chart-canvas-wrapper { height: 170px; }

  /* Footer */
  .footer-logo { height: 28px; }
  #footer p { font-size: 0.6rem; }
}

/* Extra small screens */
@media (max-width: 400px) {
  #legend { max-width: 130px; padding: 0.5rem 0.6rem; }
  .legend-item { font-size: 0.6rem; }
  .stage { height: 120vh; padding-top: 35vh; }
  .glass-pill { font-size: 0.6rem; padding: 0.35rem 0.7rem; }
  .charts-header h2 { font-size: 1rem; }
  .tab-btn { padding: 0.3rem 0.5rem; font-size: 0.62rem; }
  .chart-canvas-wrapper { height: 150px; }
}