/* =========================================== */
/* == RADAR SECTION STYLES == */
/* =========================================== */

#radar-map-section {
    grid-area: radar;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    height: 100%;    /* or 100vh, or calc(100vh - <header-height>), whatever fits your layout */
    min-height: 0;   /* allow it to collapse inside its parent grid/flex so children can size correctly */
  }
  
  #radar-map-section .radar-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* Original had margin-bottom: 4em; Standardized used var(--space-sm) */
    /* Let's use a moderate margin, adjust if needed */
    margin-bottom: var(--space-xxl); /* Reverted closer to original spacing intent */
  }
  
  /* --- START RADAR SELECTER ROLLBACK (excluding fonts) --- */
  
  /* Restore original positioning, grid layout, and spacing for the selector */
  #radar-selecter {
    position: absolute;
    top: 30px;               /* Original value */
   /* right: 30px;             /* Original value */
    font-size: var(--font-size-md) !important;
    color: var(--subtext-color) !important;
    display: grid;
    /* Original grid definition */
    grid-template-areas:
      "controls controls"
      "label    select";
    grid-template-columns: auto auto;
    column-gap: 0.5em;       /* Original value */
    row-gap: 0.25em;         /* Original value */
    align-items: center;
    z-index: 1000;           /* Original value */
    /* Removed background, padding, border-radius, shadow added during standardization */
  }
  
  /* Restore original styles for the checkbox/help icon row */
  #radar-selecter .radar-controls {
    grid-area: controls;
    display: inline-flex; /* Original value */
    align-items: center;
    justify-self: end;    /* Original value */
    gap: var(--space-sm); /* Keep standardized gap between checkbox and help */
    font-size: var(--font-size-md) !important;
    color: var(--subtext-color) !important;
  }
  
  /* Ensure label for checkbox keeps standardized font */
  #radar-selecter .radar-controls label {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: var(--font-size-sm); /* KEEP standardized font */
      font-size: var(--font-size-md) !important;
      color: var(--subtext-color) !important;
  }
  
  /* Restore original checkbox margin */
  #radar-selecter .radar-controls input#enable-local-radar {
      margin: 0 0.25em 0 0; /* Restore original margin */
  }
  /* Help icon inherits base .help-icon style */
  
  /* Restore original styles for the station selector label */
  #radar-selecter label[for="radar-select"] {
    grid-area: label;        /* Original value */
    white-space: nowrap;     /* Original value */
    font-size: var(--font-size-md) !important;
    color: var(--subtext-color) !important;
  }
  
  /* Restore original styles for the station select dropdown */
  #radar-selecter select#radar-select {
    grid-area: select;       /* Original value */
    width: auto; /* Allow select to size naturally or set a specific width */
    /* Inherits base select styles */
  }
  
  /* Removed .station-selector-container introduced during standardization */
  
  /* --- END RADAR SELECTER ROLLBACK --- */
  
  
  /* The map container - no changes needed here */
  #radar-map {
    flex: 1 1 auto;
    min-height: 0;   /* ensure the map canvas can shrink/fill the container properly */
    width: 100%;
    min-height: 300px;
    border-radius: 0px;
    overflow: hidden;
    /* margin-top ensures space below absolutely positioned controls */
    /* Needs careful adjustment depending on the actual height of #radar-selecter */
    /* Let's remove it for now and rely on section padding */
    /* margin-top: var(--space-md); */
  }

  @media (max-width: 450px) {

    #radar-map-section {
      padding-left: 0px !important;
      padding-right: 0px !important;
      height: 88vh;
    }
    .leaflet-container {
      margin-top: 50px !important;
      height: 75vh;
    }

    #radar-map-section .radar-header {
      justify-content: center;
      margin-bottom: var(--space-md); /* Reverted closer to original spacing intent */
    }
    
    /* --- START RADAR SELECTER ROLLBACK (excluding fonts) --- */
    
    /* Restore original positioning, grid layout, and spacing for the selector */
    /*#radar-selecter {
    display: none;
    }*/

      #radar-selecter {
    position: absolute;
    top: 40px;               /* Original value */
    align-items: center !important;
    font-size: var(--font-size-sm) !important;
    color: var(--subtext-color) !important;
    display: grid;
    /* Original grid definition */
    grid-template-areas:
      "controls controls"
      "label    select";
    grid-template-columns: auto auto;
    column-gap: 0.5em;       /* Original value */
    row-gap: 0.25em;         /* Original value */
    align-items: center;
    z-index: 1000;           /* Original value */
    /* Removed background, padding, border-radius, shadow added during standardization */
  }

    #radar-selecter .radar-controls {
    grid-area: controls;
    display: inline-flex; /* Original value */
    align-items: center;
    justify-self: center;    /* Original value */
    gap: var(--space-sm); /* Keep standardized gap between checkbox and help */
    font-size: var(--font-size-md) !important;
    color: var(--subtext-color) !important;
  }
  #radar-selecter label[for="radar-select"] {

    display: none;
  }

  #radar-selecter, #radar-select
 {
margin-top: 5px;

 }

    .leaflet-control {
      font-family: Nebula Sans;
    
    }

    .leaflet-control-layers-expanded .leaflet-control-layers-list {
      display: block !important;
      position: relative;
      max-width: 150px;
      padding: 10px;
      background: #ffffff !important;
      }

      .leaflet-control-layers-base {
        display:none;
      }

      .leaflet-control-layers-separator {
        display:none;
      }

      .leaflet-bottom.leaflet-right {
        display: none;


      }

      .leaflet-right .leaflet-control{
margin-right: 0px !important;

      }

      /*── Override control‐panel backgrounds & text/icons ──*/
.leaflet-bar,
.leaflet-control-layers,
.leaflet-control-attribution,
.leaflet-control-scale,
.leaflet-popup-content-wrapper,
.leaflet-tooltip {
  background-color: #ffffff !important;
  color:            #2c3e50 !important;
}

/* Icons (SVG fills, glyphicons, etc.) */
.leaflet-control-layers-toggle,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-fullscreen-icon,
.leaflet-control-timecontrol:before {
  fill:  #2c3e50 !important;
  color: #2c3e50 !important;
  background-color: #ffffff !important;
}

/* Make sure link-style controls (e.g. zoom buttons) also recolor */
.leaflet-bar a {
  color:            #2c3e50 !important;
  background-color: #ffffff   !important;
}

/*── Scale down controls on small screens ──*/
  .leaflet-control {
    transform:        scale(0.6) !important;

  }

.leaflet-bar-timecontrol {
    /* shrink group as a whole */
    transform:        scale(0.8)          !important;
    transform-origin: top left           !important;
    /* no wrapping of children */
    white-space:      nowrap              !important;
    overflow-x:       none                !important;
  }

  /* force each piece side-by-side */
  .leaflet-bar-timecontrol > * {
    display:         inline-block        !important;
    float:           none                !important;
    clear:           none                !important;
    vertical-align:  middle              !important;
    margin-right:    4px                 !important;
  }

  /* let date & slider shrink */
  .leaflet-bar-timecontrol a.timecontrol-date,
  .leaflet-bar-timecontrol .timecontrol-slider {
    min-width:       auto                !important;
    width:           auto                !important;
    font-size:       0.85rem             !important;  /* optional: smaller text */
  }

  /* narrow the slider track */
  .leaflet-bar-timecontrol .timecontrol-slider .slider {
    width:           80px                !important;
  }


}