/* 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 { position: relative; width: 100%; height: 100%; min-height: 300px; border-radius: .375rem; overflow: hidden; }
        .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; }
        
.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;
}