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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  background: #1a1f2e;
  color: #e2e8f0;
  overflow: hidden;
}

/* ── Layout ────────────────────────────────────────────────────── */
body { display: flex; height: 100vh; }

#sidebar {
  width: 300px;
  min-width: 300px;
  background: #1e2535;
  border-right: 1px solid #2d3748;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 10;
}

#map { flex: 1; position: relative; }

/* ── Sidebar header ────────────────────────────────────────────── */
header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #2d3748;
  background: #161b27;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#app-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  font-weight: 700;
  color: #f0f4ff;
  letter-spacing: 0.1px;
  line-height: 1.2;
}

.app-title-geo {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #718096;
}

/* ── Feed rows (badge + timestamp on same line) ─────────────────── */
.feed-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.feed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fd-wind { background: #63b3ed; }
.fd-wave { background: #38b2ac; }

.feed-name {
  font-size: 11px;
  font-weight: 700;
  color: #a0aec0;
  min-width: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.issue-text {
  font-size: 11px;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Freshness badge ───────────────────────────────────────────── */
.badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-live    { background: #22543d; color: #68d391; border: 1px solid #276749; }
.badge-aging   { background: #744210; color: #f6ad55; border: 1px solid #975a16; }
.badge-stale   { background: #63171b; color: #fc8181; border: 1px solid #822727; }
.badge-loading { background: #2d3748; color: #a0aec0; border: 1px solid #4a5568; }

/* ── Panel tab switcher ─────────────────────────────────────────── */
#panel-switcher {
  display: flex;
  border-bottom: 1px solid #2d3748;
  background: #181d2c;
}

.psw-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: #718096;
}
.psw-tab:hover { background: #232b3e; color: #a0aec0; }
.psw-tab.active { background: #1e2535; color: #e2e8f0; }
.psw-tab[data-panel="wind"].active { border-bottom-color: #63b3ed; color: #90cdf4; }
.psw-tab[data-panel="wave"].active { border-bottom-color: #38b2ac; color: #4fd1c5; }

.psw-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Panel body ─────────────────────────────────────────────────── */
.panel-body {
  padding: 11px 14px;
  border-bottom: 1px solid #2d3748;
  transition: opacity 0.2s;
}

.panel-layer-row {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.panel-body.hidden { display: none; }

.panel-body.section-dimmed {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Control groups (summary etc.) ─────────────────────────────── */
.control-group {
  padding: 10px 14px;
  border-bottom: 1px solid #2d3748;
}

.group-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #718096;
  margin-bottom: 7px;
}

/* ── Sub-labels inside panels ───────────────────────────────────── */
.sub-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #718096;
  margin-bottom: 6px;
}

.section-label-wind { color: #90cdf4; }
.section-label-wave { color: #4fd1c5; }

/* ── Lead time tabs ────────────────────────────────────────────── */
.tab-strip {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.tab {
  flex: 1;
  padding: 5px 0;
  background: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 4px;
  color: #718096;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab:hover { background: #3d4f6a; color: #e2e8f0; }
.tab.active { color: #fff; font-weight: 600; }

#wind-section .tab.active { background: #1e4e8c; border-color: #63b3ed; }
#wave-section .tab.active { background: #1a4e4b; border-color: #38b2ac; }

/* ── Metric chip grid ───────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 10px;
}

.metric-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 4px;
  font-size: 12px;
  color: #718096;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.metric-chip:hover { background: #3d4f6a; color: #e2e8f0; border-color: #63748a; }
.metric-chip.active { background: #2a3a52; border-color: #63b3ed; color: #90cdf4; }
#wave-metric-list .metric-chip.active { background: #1e3a38; border-color: #38b2ac; color: #4fd1c5; }

.metric-chip input[type="radio"] {
  accent-color: #3182ce;
  cursor: pointer;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

/* ── Quality row ────────────────────────────────────────────────── */
.quality-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.check-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #252d3d;
  border: 1px solid #3a4560;
  border-radius: 4px;
  font-size: 12px;
  color: #718096;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.check-chip:hover { background: #2d3748; color: #a0aec0; }
.check-chip input[type="checkbox"] {
  accent-color: #3182ce;
  cursor: pointer;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ── Legend ────────────────────────────────────────────────────── */
.legend-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 2px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #718096;
  font-size: 12px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Summary — 2-column layout ──────────────────────────────────── */
.summary-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.summary-col { min-width: 0; }

.summary-sub-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2d3748;
}
.summary-sub-wind { color: #63b3ed; }
.summary-sub-wave { color: #38b2ac; }

#wind-summary,
#wave-summary { display: flex; flex-direction: column; gap: 3px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #718096;
}

.summary-count {
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.summary-bar {
  height: 2px;
  border-radius: 2px;
  margin-top: 1px;
  margin-bottom: 2px;
  transition: width 0.4s;
  max-width: 100%;
}

/* ── Sidebar footer ────────────────────────────────────────────── */
#sidebar-footer {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid #2d3748;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-brand {
  font-size: 13px;
  font-weight: 700;
  color: #a0aec0;
  letter-spacing: 0.3px;
}

.footer-meta {
  font-size: 11px;
  color: #718096;
}

.footer-copy {
  font-size: 11px;
  color: #4a5568;
}

.footer-data {
  font-size: 10px;
  color: #4a5568;
  margin-top: 2px;
}

/* ── Brand overlay ─────────────────────────────────────────────── */
#brand-overlay {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(22, 27, 39, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid #2d3748;
  border-radius: 24px;
  padding: 7px 18px;
  pointer-events: none;
}

#brand-logo {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.95;
}

/* ── Station popup ─────────────────────────────────────────────── */
#station-popup {
  position: absolute;
  bottom: 24px;
  right: 16px;
  width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #1e2535;
  border: 1px solid #2d3748;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  transition: opacity 0.2s, transform 0.2s;
}

#station-popup::-webkit-scrollbar { width: 4px; }
#station-popup::-webkit-scrollbar-track { background: transparent; }
#station-popup::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 2px; }

#station-popup.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

#popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #718096;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
#popup-close:hover { background: #2d3748; color: #e2e8f0; }

#popup-content { padding: 16px 20px; }

/* Popup type tag */
.popup-type-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 7px;
}
.wind-tag { background: rgba(99,179,237,0.12); color: #63b3ed; border: 1px solid rgba(99,179,237,0.25); }
.wave-tag { background: rgba(56,178,172,0.12); color: #38b2ac; border: 1px solid rgba(56,178,172,0.25); }

.popup-station-name {
  font-size: 17px;
  font-weight: 700;
  color: #f0f4ff;
  margin-bottom: 3px;
}

.popup-name-en {
  font-weight: 400;
  color: #718096;
}

.popup-station-meta {
  font-size: 11px;
  color: #718096;
  margin-bottom: 12px;
}

.popup-current {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.popup-metric-box {
  flex: 1;
  background: #161b27;
  border-radius: 6px;
  padding: 9px 10px;
  text-align: center;
}

.popup-metric-label {
  font-size: 10px;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.popup-metric-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.popup-metric-unit {
  font-size: 10px;
  color: #718096;
  margin-top: 3px;
}

/* Lead table */
.lead-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lead-table th {
  color: #718096;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 7px 6px;
  text-align: right;
  border-bottom: 1px solid #2d3748;
}
.lead-table th:first-child { text-align: left; }

.lead-table td {
  padding: 5px 7px;
  text-align: right;
  color: #cbd5e0;
  border-bottom: 1px solid #1a2030;
}
.lead-table td:first-child { text-align: left; color: #718096; }
.lead-table tr:last-child td { border-bottom: none; }

.lead-bar-cell { width: 50px; }
.lead-bar-track { height: 3px; background: #2d3748; border-radius: 2px; overflow: hidden; }
.lead-bar-fill  { height: 100%; border-radius: 2px; transition: width 0.3s; }

.popup-quality {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #718096;
}

.quality-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 3px;
}

.risk-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #111;
}

.popup-loading {
  text-align: center;
  color: #4a5568;
  padding: 24px 0;
  font-size: 12px;
}

/* ── Time series charts ─────────────────────────────────────────── */
#popup-charts {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2d3748;
}

.chart-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #718096;
  margin-bottom: 6px;
}

.chart-panel-label {
  font-size: 11px;
  color: #a0aec0;
  font-weight: 600;
  margin-bottom: 4px;
}

.chart-wrap {
  background: #161b27;
  border-radius: 6px;
  padding: 8px 8px 5px;
  margin-bottom: 10px;
  height: 140px;
  position: relative;
}

.chart-nodata {
  text-align: center;
  color: #4a5568;
  padding: 20px 0;
  font-size: 11px;
  font-style: italic;
}

/* ── Map overlay controls (top-right) ──────────────────────────── */
#map-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#lang-switcher {
  display: flex;
  gap: 4px;
}

.lang-btn {
  padding: 4px 12px;
  background: rgba(22, 27, 39, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid #2d3748;
  border-radius: 5px;
  color: #718096;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.lang-btn:hover { background: rgba(45, 55, 72, 0.92); color: #a0aec0; }
.lang-btn.active { background: rgba(30, 78, 140, 0.9); border-color: #63b3ed; color: #90cdf4; }

/* ── Help language switcher ────────────────────────────────────── */
#help-lang-switcher {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.help-lang-btn {
  padding: 4px 14px;
  background: #252d3d;
  border: 1px solid #3a4560;
  border-radius: 4px;
  color: #718096;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.help-lang-btn:hover { background: #2d3748; color: #a0aec0; }
.help-lang-btn.active { background: #1e4e8c; border-color: #63b3ed; color: #90cdf4; }

/* ── Help highlight box (ML feature callout) ───────────────────── */
.help-highlight-box {
  background: #12253d;
  border: 1px solid #2b4a70;
  border-left: 3px solid #63b3ed;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 4px;
}

.help-highlight-title {
  font-size: 13px;
  font-weight: 700;
  color: #90cdf4;
  margin-bottom: 8px;
}

.help-highlight-box p {
  font-size: 13px;
  color: #a0aec0;
  line-height: 1.55;
  margin-bottom: 8px;
}

.help-highlight-box ul {
  padding-left: 18px;
  margin-bottom: 8px;
}

.help-highlight-box ul li {
  font-size: 13px;
  color: #a0aec0;
  line-height: 1.5;
  margin-bottom: 5px;
}

.help-highlight-box ul li strong { color: #e2e8f0; }

.help-highlight-note {
  font-size: 12px !important;
  color: #4a8fbf !important;
  font-style: italic;
  margin-bottom: 0 !important;
}

/* ── Help button (map overlay) ─────────────────────────────────── */
#help-btn {
  padding: 4px 12px;
  background: rgba(22, 27, 39, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid #2d3748;
  border-radius: 5px;
  color: #a0aec0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
#help-btn:hover { background: rgba(45, 55, 72, 0.92); color: #e2e8f0; border-color: #4a5568; }

/* ── Help modal overlay ────────────────────────────────────────── */
#help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#help-modal.hidden { display: none; }
.help-lang-content.hidden { display: none; }

#help-box {
  background: #1e2535;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  color: #e2e8f0;
}

#help-box::-webkit-scrollbar { width: 4px; }
#help-box::-webkit-scrollbar-track { background: transparent; }
#help-box::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 2px; }

#help-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #718096;
  font-size: 15px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
}
#help-close:hover { background: #2d3748; color: #e2e8f0; }

#help-box h2 {
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
  margin-bottom: 16px;
  padding-right: 30px;
}

#help-box h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #90cdf4;
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #2d3748;
}

#help-box p {
  font-size: 13px;
  color: #a0aec0;
  line-height: 1.55;
  margin-bottom: 8px;
}

#help-box ul {
  padding-left: 18px;
  margin-bottom: 8px;
}

#help-box ul li {
  font-size: 13px;
  color: #a0aec0;
  line-height: 1.5;
  margin-bottom: 4px;
}

#help-box ul li strong {
  color: #e2e8f0;
}

/* ── Help table ────────────────────────────────────────────────── */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}

.help-table th {
  text-align: left;
  padding: 6px 10px;
  background: #161b27;
  color: #718096;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2d3748;
}

.help-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #1e2535;
  color: #a0aec0;
  vertical-align: top;
  line-height: 1.45;
}

.help-table tr:nth-child(even) td { background: #161b27; }
.help-table tr:last-child td { border-bottom: none; }

.help-table td:first-child {
  white-space: nowrap;
  color: #e2e8f0;
}

.help-table td strong {
  color: #e2e8f0;
}

/* ── Help note (disclaimer) ────────────────────────────────────── */
.help-note {
  font-size: 11px !important;
  color: #4a5568 !important;
  font-style: italic;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #2d3748;
  border-radius: 5px;
  background: #161b27;
}

/* ── MapLibre overrides ────────────────────────────────────────── */
.maplibregl-ctrl-bottom-right { bottom: 24px; right: 8px; }
.maplibregl-ctrl-attrib { font-size: 10px !important; }
.maplibregl-ctrl-attrib-inner a { color: #718096 !important; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 2px; }