/* ==========================================================================
   SaKgaZé — Collapsible Panel + Glass UI
   -------------------------------------------------------------------------- */

:root {
  --purple:        #AB47BC;
  --purple-light:  #E040FB;
  --orange:        #FF6D00;
  --red:           #FF3D00;
  --glass-bg:      rgba(15, 23, 42, 0.90);
  --glass-border:  rgba(171, 71, 188, 0.20);
  --cream:         #F8FAFC;
  --beige:         #94A3B8;
  --panel-w:       clamp(280px, 25vw, 360px);
}

* { scrollbar-width: thin; scrollbar-color: rgba(171,71,188,0.25) #0F172A; }
#map { width: 100%; height: 100%; cursor: grab; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}
body { position: relative; }

/* ---- Popups ---- */
.maplibregl-popup { max-width: 280px !important; }
.maplibregl-popup-content {
  background: var(--glass-bg) !important; backdrop-filter: blur(14px);
  color: var(--cream) !important; border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important; padding: 12px 14px 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.50) !important; font-size: 12px;
}
.maplibregl-popup-tip { border-top-color: rgba(15,23,42,0.94) !important; }
.maplibregl-popup-close-button { color: var(--beige) !important; font-size: 18px; padding: 2px 6px; }
.popup-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--cream); padding-right: 18px; }
.popup-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }
.popup-label { color: var(--beige); }
.popup-value { font-weight: 600; color: var(--purple-light); }

#loading-overlay { transition: opacity 0.5s ease; }
#loading-overlay.opacity-0 { opacity: 0; pointer-events: none; }

/* ==========================================================================
   COLLAPSIBLE LEFT PANEL
   ========================================================================== */
#sidebar-panel {
  position: fixed; z-index: 35;
  top: 10px; left: 10px;
  width: var(--panel-w);
  height: calc(100vh - 20px);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#sidebar-panel.panel-closed {
  transform: translateX(calc(-100% - 20px));
}
#panel-inner {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 16px 14px 16px 16px;
}
#panel-inner::-webkit-scrollbar { width: 4px; }
#panel-inner::-webkit-scrollbar-thumb { background: rgba(171,71,188,0.30); border-radius: 2px; }

/* Toggle button */
.panel-toggle-btn {
  position: absolute; right: -38px; top: 16px; z-index: 36;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--purple-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  font-size: 16px;
}
.panel-toggle-btn:hover { background: rgba(15,23,42,0.98); border-color: var(--purple); }
#sidebar-panel.panel-closed .panel-toggle-btn { right: -44px; border-radius: 10px; }

/* Panel sections */
.panel-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(171,71,188,0.12);
}
.panel-section:last-child { border-bottom: none; }
.section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--purple-light);
  margin-bottom: 10px;
}

/* Panel inspector cards */
.stat-card {
  background: rgba(15,23,42,0.60);
  border: 1px solid rgba(171,71,188,0.12);
  border-radius: 8px; padding: 8px 10px; text-align: center;
}

/* ==========================================================================
   BRAND CARD — shifts with panel
   ========================================================================== */
#sidebar-panel.panel-open ~ #brand-card { left: 370px; }
#sidebar-panel.panel-closed ~ #brand-card { left: 60px; }

/* ==========================================================================
   LAYER PILLS
   ========================================================================== */
.layer-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: rgba(15,23,42,0.80); backdrop-filter: blur(12px);
  cursor: pointer; transition: all 0.25s ease;
  font-size: 13px; font-weight: 500; color: var(--beige); white-space: nowrap;
}
.layer-pill:hover { background: rgba(15,23,42,0.95); border-color: var(--purple); }
.layer-pill.active {
  border-color: rgba(171,71,188,0.50); background: rgba(15,23,42,0.95);
  color: var(--cream); box-shadow: 0 0 12px rgba(171,71,188,0.12);
}
.pill-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pill-sargassum .pill-dot { background: #AB47BC; }
.pill-drift    .pill-dot { background: #FF6D00; }
.pill-weather  .pill-dot { background: #FFC107; }
.layer-pill:not(.active) .pill-dot { opacity: 0.35; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--glass-border);
  background: rgba(171,71,188,0.08); color: var(--purple-light);
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.timeline-btn:hover { background: rgba(171,71,188,0.18); border-color: var(--purple); }
#timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--purple-light); border: 2px solid var(--cream);
  cursor: pointer; box-shadow: 0 0 8px rgba(171,71,188,0.35);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.maplibregl-ctrl-group {
  background: var(--glass-bg) !important; backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important; border-radius: 12px !important; overflow: hidden;
}
.maplibregl-ctrl-group button {
  background: transparent !important; border-color: rgba(171,71,188,0.12) !important; filter: invert(0.85);
}
.maplibregl-ctrl-group button:hover { background: rgba(171,71,188,0.10) !important; }
.maplibregl-ctrl-scale {
  background: var(--glass-bg) !important; backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border) !important; border-radius: 6px !important;
  color: var(--beige) !important; padding: 2px 6px !important;
}
.maplibregl-ctrl-attrib {
  background: rgba(15,23,42,0.60) !important;
  color: rgba(148,163,184,0.50) !important; font-size: 9px !important;
}
.maplibregl-ctrl-attrib a { color: rgba(148,163,184,0.50) !important; }

/* ==========================================================================
   RESPONSIVE — mobile menu button + drawer backdrop
   ========================================================================== */
.mobile-menu-btn {
  display: none;  /* desktop: hidden, collapse tab handles it */
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(171,71,188,0.08); color: var(--purple-light);
  font-size: 18px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:hover { background: rgba(171,71,188,0.18); }

.panel-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 34;
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ==========================================================================
   TABLET (768–1023px): overlay drawer, collapsed by default
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --panel-w: min(320px, 80vw); }

  .mobile-menu-btn { display: flex; }

  /* Panel becomes an off-canvas drawer */
  #sidebar-panel {
    top: 10px; left: 10px;
    width: var(--panel-w);
    height: calc(100vh - 20px);
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  }
  #sidebar-panel.panel-open {
    transform: translateX(0);
  }
  #sidebar-panel.panel-closed {
    transform: translateX(calc(-100% - 24px));
  }
  /* Hide the desktop edge toggle tab in drawer mode */
  #sidebar-panel .panel-toggle-btn { display: none; }

  /* Brand card always stays at top-left (no offset for panel) */
  #sidebar-panel.panel-open ~ #brand-card { left: 16px; }
  #sidebar-panel.panel-closed ~ #brand-card { left: 16px; }

  .panel-backdrop.panel-backdrop-visible {
    display: block; opacity: 1; pointer-events: auto;
  }
}

/* ==========================================================================
   MOBILE (<768px): full-bleed map, bottom-sheet-friendly drawer
   ========================================================================== */
@media (max-width: 767px) {
  :root { --panel-w: min(300px, 86vw); }

  #sidebar-panel {
    top: env(safe-area-inset-top, 0);
    left: 0;
    height: 100vh;
    height: calc(100vh - env(safe-area-inset-bottom, 0px));
    border-radius: 0 14px 14px 0;
    border-left: none;
    transform: translateX(-100%);
  }
  #sidebar-panel.panel-open { transform: translateX(0); }
  #sidebar-panel.panel-closed { transform: translateX(-100%); }

  /* Brand card: compact */
  #brand-card { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; padding: 6px 10px; }
  #brand-card img { width: 32px; height: 32px; }

  /* Layer pills: compact, top-right */
  #layer-pills { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; }
  #layer-pills .pill-label { font-size: 11px; }
  #layer-pills .layer-pill { padding: 7px 10px; }

  /* Timeline: full-width bottom bar, no fixed min-width */
  #timeline-bar {
    left: 8px; right: 8px; transform: none;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    min-width: 0; width: auto;
    padding: 10px 12px;
    gap: 10px;
  }
  #timeline-bar #timeline-label { display: none; }
  #timeline-ticks { font-size: 9px; }
  #timeline-ticks span { white-space: nowrap; }

  /* Touch targets ≥ 44px */
  .timeline-btn { width: 44px; height: 44px; }
  .panel-toggle-btn { width: 44px; height: 44px; }
}

/* ==========================================================================
   LANDSCAPE MOBILE: narrow height, keep timeline + map usable
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  #sidebar-panel { height: 100vh; top: 0; border-radius: 0; }
  #timeline-bar { bottom: 4px; padding: 6px 10px; }
}