/* Your CSS remains the same */
        body { background-color: rgb(17, 18, 23); color: #ffffff; }
        .card-dark { background-color: #212529; color: #ffffff; }
        .border-dark { border-color: #495057 !important; }
        body.light-mode { background-color: #f8f9fa; color: #212529; }
        .light-mode .card-light { background-color: #ffffff; color: #212529; border: 1px solid #dee2e6; }
        .light-mode .border-light { border-color: #dee2e6 !important; }
        .light-mode .placeholder-box { background-color: #e9ecef; }
        .light-mode .btn-secondary { background-color: #e9ecef; color: #212529; border-color: #dee2e6; }
        .text-description { color: #adb5bd; }
        .light-mode .text-description { color: #6c757d; }
        .placeholder-box { border-radius: .375rem; min-height: 150px; display: flex; align-items: center; justify-content: center; color: #6c757d; }
        
        
                          
        .iframe-wrapper iframe { width: 100%; height: 100%; border: none; pointer-events: none; }
        .iframe-wrapper.enabled iframe { pointer-events: auto; }
        .iframe-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 2; cursor: pointer; visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; }
        .iframe-overlay.hidden { visibility: hidden; pointer-events: none; }
        .enable-btn { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 14px; z-index: 3; pointer-events: auto; }
        .collapse-icon { transition: transform 0.3s ease; }
        [aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
        .wind-gauge-container { display: flex; flex-direction: column; align-items: center; padding-top: 0.5rem; }
        .wind-dial { position: relative; width: 100px; height: 100px; border: 2px solid #6c757d; border-radius: 50%; }
        .dial-point { position: absolute; font-size: 0.8rem; font-weight: bold; z-index: 2; }
        .dial-point.n { top: -5px; left: 50%; transform: translateX(-50%); }
        .dial-point.s { bottom: -5px; left: 50%; transform: translateX(-50%); }
        .dial-point.e { top: 50%; right: -5px; transform: translateY(-50%); }
        .dial-point.w { top: 50%; left: -5px; transform: translateY(-50%); }
        .wind-dial::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: #6c757d; border: 2px solid #495057; border-radius: 50%; z-index: 3; }
        .wind-needle { position: absolute; top: 10px; left: 48px; width: 4px; height: 40px; background-color: #ffc107; border-radius: 2px 2px 0 0; transform-origin: 50% 40px; transition: transform 1s ease-in-out; box-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 1; }
        .wind-needle::after { content: ''; position: absolute; top: -8px; left: -4px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #ffc107; }
        .grafana-container { border-radius: .375rem; overflow: hidden; border: 1px solid #495057; }
        .light-mode .grafana-container { border: 1px solid #dee2e6; }
        /* Override forecast cards when light mode is active */
        .light-mode .card-dark {
        background-color: #ffffff !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
        }
        

        
.grafana-placeholder {
  /* fallback styling if not set inline */
  background: transparent;
  color: inherit;
}
.grafana-loader {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base layout */
.iframe-wrapper {
  position: relative;
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  border-radius: .375rem;
  overflow: hidden;
}

.chart-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .iframe-wrapper {
    min-height: 250px;
    max-height: none;
  }

  .chart-container {
    padding: 0 5px;
  }

  .grafana-container {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   RAW DATA TABLE STYLING
   24 Hour Table Data on the Front Page
   ============================================================ */

/* Give the table wrapper the same height as charts
   - Ensures visual balance in the Bootstrap grid
   - Scrolls internally when rows exceed height */
.iframe-wrapper .table-wrapper {
  height: 400px;        /* match chart height */
  overflow-y: auto;     /* scroll inside */
}

/* Keep the table header row visible while scrolling */
#raw-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Add column dividers (Bootstrap .table-bordered adds borders,
   but we override colors for light/dark mode consistency) */
#raw-data-table th,
#raw-data-table td {
  border-right: 1px solid #dee2e6; /* light gray divider */
}
#raw-data-table th:last-child,
#raw-data-table td:last-child {
  border-right: none; /* no divider on last column */
}

/* ------------------------------
   DARK MODE STYLES
   ------------------------------ */

/* Full dark background with white text */
body.dark-mode #raw-data-table,
body.dark-mode #raw-data-table thead,
body.dark-mode #raw-data-table tbody,
body.dark-mode #raw-data-table tr,
body.dark-mode #raw-data-table td,
body.dark-mode #raw-data-table th {
  background-color: #000 !important;
  color: #fff !important;
}

/* Zebra striping for readability in dark mode */
body.dark-mode #raw-data-table tbody tr:nth-child(even) {
  background-color: #111 !important;
}

/* Dark mode column dividers */
body.dark-mode #raw-data-table th,
body.dark-mode #raw-data-table td {
  border-right: 1px solid #333 !important; /* subtle dark divider */
}

/* ------------------------------
   LIGHT MODE STYLES
   ------------------------------ */

/* Light header row */
body:not(.dark-mode) #raw-data-table thead th {
  background-color: #f8f9fa;
  color: #000;
}

/* Light body rows */
body:not(.dark-mode) #raw-data-table tbody tr {
  background-color: #fff;
  color: #000;
}


/* ------------------------------
   Styling for NOAA, Windy and Video Players
   ------------------------------ */
/* Shared base */
.embed-base {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000; /* default for dark mode */
}

/* Light mode override */
body.light-mode .embed-base {
  background-color: #f8f9fa; /* matches Bootstrap light background */
}

/* Video-style embeds (Twitch, Timelapse, YouTube, etc.) */
.video-embed {
  aspect-ratio: 16 / 9;
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* Map-style embeds (NOAA + Windy) */
.map-embed {
  aspect-ratio: 4 / 3;   /* match NOAA’s proportions */
}

.map-embed iframe,
.map-embed img {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;     /* fills the container */
  display: block;
  border-radius: 12px;   /* uniform rounding */
}