/* =====================================================
   GLOBAL
===================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  background: #111;
  color: #fff;
}


.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* =====================================================
   TOP BAR
===================================================== */

#top-bar {
  height: 52px;
  background: #f5f5f5;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #ddd;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =====================================================
   FILTER DROPDOWNS
===================================================== */

.filter {
  position: relative;
}

.filter-toggle {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #000;
}

.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #222;
  color: #fff;
  border-radius: 10px;
  min-width: 220px;
  max-height: 300px;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.filter-menu.open {
  display: flex;
}

.filter-actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.filter-actions button {
  background: none;
  border: none;
  color: #9fc9ff;
  font-size: 12px;
  cursor: pointer;
}

.filter-options {
  overflow-y: auto;
  padding: 6px 10px;
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
}

.filter-options input {
  accent-color: #ffd700;
}

/* =====================================================
   RELOAD BUTTON
===================================================== */

#reloadBtn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
}

/* =====================================================
   MAIN LAYOUT
===================================================== */

#layout {
  display: flex;
  height: calc(100vh - 52px);
}

/* =====================================================
   SIDEBAR
===================================================== */

#sidebar {
  width: 280px;
  background: linear-gradient(to bottom, #0d0d0d, #141414);
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
}

#sidebar.collapsed {
  width: 48px;
}

/* Hide flight list when sidebar is collapsed */
#sidebar.collapsed #flightList {
  display: none;
}

/* Hide scrollbars & padding */
#sidebar.collapsed {
  overflow: hidden;
}


#sidebar-header {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid #222;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#sidebarToggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}

#flightList {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

#flightList li {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s ease;
}

#flightList li:hover {
  background: rgba(255, 255, 255, 0.06);
}

#flightList li.active {
  background: rgba(255, 215, 0, 0.15);
}

#flightList .date {
  font-size: 12px;
  opacity: 0.7;
}

#flightList .route {
  font-size: 14px;
  margin-top: 2px;
}

.sidebar-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0; /* important so % split is exact */
}


.sidebar-logo {
  flex: 0 0 45%;
  max-width: 45%;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.sidebar-text {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-journey-type {
  font-size: 12px;
  font-weight: 600;
}

.sidebar-callsign {
  font-size: 12px;
  font-weight: 600;
}

.sidebar-route {
  font-size: 12px;
  opacity: 0.9;
}

.sidebar-date {
  font-size: 12px;
  opacity: 0.6;
}


/* =====================================================
   MAP WRAPPER
===================================================== */

/* Wrapper already sits to the right of the sidebar */
#map-wrapper {
  flex: 1;
  min-height: calc(100vh - 52px); /* top bar height */
  display: flex;
  flex-direction: column;
}


.glass-bar {
  width: 100%;
  display: flex;
  justify-content: center;   /* THIS is what you want */
  padding: 16px 24px;
  box-sizing: border-box;
}


/* New horizontal glass bar */
#glassBar {
  display: flex;
  justify-content: center;   /* 🔥 THIS WAS MISSING */
  align-items: stretch;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* Glass boxes adapt horizontally */
#glassBar .glass-box {
  min-width: 140px;
  flex: 0 0 auto;
}


/* Map takes remaining space */
#map {
  flex: 1;
}


.mapboxgl-popup-content {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
}

/* =====================================================
   GLASS COUNTERS
===================================================== */

#glassCounters {
  display: flex;
  flex-direction: row;
  justify-content: center;   /* 👈 centres the boxes horizontally */
  align-items: stretch;
  gap: 14px;                 /* space between glass boxes */
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}

.glass-box {
  pointer-events: auto;
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.glass-number {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.glass-label {
  font-size: 12px;
  opacity: 0.85;
  text-transform: uppercase;
}



/* =====================================================
   AIRLINES SLIDE-OUT PANEL
===================================================== */

.airlines-panel {
  position: absolute;
  left: 170px; /* aligns to the right of glass boxes */
  top: 0;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;

  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;

  pointer-events: auto;
}

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

.airlines-panel.visible {
  display: block;
  transform: translateX(0);
  opacity: 1;
}

.airlines-panel-header {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  opacity: 0.85;
}

#airlinesList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#airlinesList li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}

#airlinesList img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}

.airline-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.5);   /* 🔥 KEY LINE */
}



/* =====================================================
   MAPBOX OVERRIDES
===================================================== */

.mapboxgl-popup {
  font-size: 12px;
}

.mapboxgl-ctrl-top-right {
  top: 10px;
}

/* =====================================================
   SCROLLBAR (SUBTLE)
===================================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}



/* =====================================================
   STATS OVERLAY
===================================================== */
.hidden {
  display: none !important;
}


/* ───────── TOP ROW ───────── */
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stats-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-title h2 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}


#statsMetricSelect {
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid #444;
}

/* ───────── CHART ROW ───────── */
.stats-chart {
  flex: 1;                /* ← THIS is the magic */
  position: relative;
}

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

#statsChartScroll {
  height: 420px;
  overflow-y: auto;   /* ✅ allow chart to breathe */
  overflow-x: hidden;
}


#flightsByYearChart {
  display: block;
  width: 100%;
}

#statsOverlay .stats-content {
  height: 70vh; /* or whatever your overlay uses */
}


/* Existing vertical space holder */
#statsChartScroll {
  height: 420px;              /* matches overlay */
  overflow-y: hidden;
}

/* NEW: horizontal scroll for wide charts */
#statsChartScrollX {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#statsChartScrollX canvas {
  display: block;
}



/* =====================================================
   STATS SECTION (BELOW ENTIRE LAYOUT)
===================================================== */

#statsSection {
  width: 100%;
  background: #0f0f0f;
  border-top: 1px solid #222;
  padding: 32px 24px;
}

/* Inner container aligns with map width */
.stats-inner {
  max-width: 1600px;   /* tweak to taste */
  margin: 0 auto;
}

/* Header row */
#statsSection .stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

#statsSection h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

/* Chart container */
#statsSection .stats-chart {
  height: 420px;
  position: relative;
}

/* Subtle bounce */
@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}


/* =====================================================
   TOP BAR ACTIONS (RIGHT SIDE)
===================================================== */



.filters {
  flex: 1; /* pushes actions to the right */
}

/* Right-side container */
.top-actions {
  display: flex;
  align-items: center;
}

/* Button style (matches existing top buttons) */
.top-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.top-btn:hover {
  background: #eee;
}



/* =====================================================
   AIRPORT SUMMARY BAR
===================================================== */

.airport-summary {
  display: flex;
  align-items: center;
  gap: 32px;

  padding: 14px 28px;
  margin: 12px auto;

  max-width: calc(100% - 40px);
  border-radius: 28px;

  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.airport-summary.hidden {
  display: none;
}

/* Left block */
.airport-left {
  min-width: 140px;
}

.airport-code {
  font-size: 22px;
  font-weight: 700;
}

.airport-name {
  font-size: 13px;
  opacity: 0.8;
}

/* Metrics row */
.airport-metrics {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.airport-metric {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.metric-arrow {
  font-size: 16px;
  opacity: 0.85;
}

.metric-label {
  font-size: 12px;
  opacity: 0.7;
  text-transform: uppercase;
}

.metric-sub {
  font-size: 12px;
  opacity: 0.75;
}