/* Custom OpenStreetMap styling with greyish palette and no filter */

        /* Basic styling for the map container */
      #map {
          width: 100%;
          height: 100%;
          background-color: #f5f5f5;
      }

      /* Simplified map tiles with greyish filter - applied via JS */
      .simplified-map-tiles {
          filter: grayscale(70%) sepia(20%) hue-rotate(5deg) brightness(105%) contrast(110%) saturate(30%);
      }

      /* Enhance road visibility in standard view */
      .yellow-theme .leaflet-overlay-pane path {
          stroke: #000 !important;
          stroke-width: 1.5px !important;
      }

      /* Make roads more visible in yellow theme */
      .yellow-theme .leaflet-pane {
          mix-blend-mode: multiply;
      }

      /* Custom popup styling */
      .custom-popup .leaflet-popup-content-wrapper {
          background-color: #f1b801;
          border-radius: 8px;
          padding: 8px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
          border: 0 solid #ccc;
      }

      .custom-popup .leaflet-popup-content {
          margin: 4px 12px;
          line-height: 1.4;
          font-size: 17px;
          font-style: italic;
          text-transform: uppercase;
          font-weight: 400;
      }

      .custom-popup .leaflet-popup-tip {
          background-color: #f1b801;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
          border: 1px solid #ccc;
      }

      /* Reset popup styling to prevent filters from affecting it */
      .yellow-theme .leaflet-popup-content-wrapper,
      .yellow-theme .leaflet-popup-tip {
          background-color: white !important;
          border: 1px solid #ccc !important;
          filter: none !important;
          mix-blend-mode: normal !important;
      }

      .yellow-theme .leaflet-popup-content {
          color: #333 !important;
      }

      /* Ensure the leaflet container takes full height of its parent */
      .leaflet-container {
          height: 100%;
          width: 100%;
      }

      .leaflet-popup-close-button {
          color: #000 !important;
          display: none !important;
      }

      /* Responsive adjustments */
      @media (max-width: 640px) {
          #nav-button-container button {
              font-size: 0.9rem;
              padding: 0.3rem 0.6rem;
          }
          
          #control-panel-container {
              max-width: 120px;
          }
          
          #control-panel-container button {
              font-size: 0.8rem;
              padding: 0.4rem 0.5rem;
          }
      }