:root {
        --occupied: #757e9d;
        --free: #1eda1e;
        --unknown: #cccccc;
        --icon: #000;
        --foreground: #000;
        --background: #fff;
        --page: #ececec;
        --accent: rgb(65, 65, 147);
        --pointer-shadow: white;
        --selected: rgb(0, 5, 50); /* ? #25a2ea; */
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --occupied: #757e9d; /* red? #af6262 */
          --free: #1eda1e;
          --unknown: #808080;
          --foreground: #fff;
          --background: #222;
          --page: #212121;
          --accent: rgb(65, 65, 147);
          --pointer-shadow: black;
          --selected: #25a2ea;
        }
      }

      html,
      body {
        height: 100%;
        margin: 0;
        background-color: var(--page);
      }

      #map {
        width: 100%;
        height: 100%;
        background-color: var(--background);
        visibility: hidden;
      }

      .loaded #map {
        visibility: visible;
      }

      .leaflet-tile-pane {
        filter: grayscale(0.8) brightness(1) opacity(0.5) contrast(1);
      }

      .policy-image-overlay {
        color: var(--icon);
      }

      @media (prefers-color-scheme: dark) {
        .leaflet-tile-pane {
          filter: invert(1) grayscale(1) brightness(0.8) opacity(0.8)
            contrast(1);
        }

        .leaflet-control-attribution {
          filter: invert() grayscale(1);
        }
      }

      .parking-space {
        stroke: var(--foreground);
        stroke-width: 0.5;
        stroke-opacity: 0.5;
        fill-opacity: 1;
        transition: fill 0.2s ease;
        vector-effect: non-scaling-stroke;
      }
      .parking-space.occupied {
        fill: var(--occupied);
      }
      .parking-space.free {
        fill: var(--free);
      }
      .parking-space.unknown {
        fill: var(--unknown);
      }

      .parking-space.dimmed {
        opacity: 0.3;
        fill-opacity: 0.3;
        pointer-events: none !important;
      }

      .policy-image-overlay.dimmed {
        opacity: 0.2;
        pointer-events: none !important;
      }

      .policy-control {
        background-color: transparent;
        padding: 0;
        max-width: 200px;
        margin: 5px !important;
      }

      .policy-item {
        cursor: pointer;
        margin: 4px;
        background-color: var(--background);
        vertical-align: middle;
        border-radius: 5px;
        border: 1px solid var(--accent);
        color: var(--foreground);
        overflow: hidden;
      }

      .policy-item.filtered {
        filter: grayscale(1) contrast(0.5);
      }

      .policy-control-img {
        color: white;
        background-color: grey;
        padding: 0.4rem;
        width: 1.6rem;
        height: 1.6rem;
        vertical-align: middle;
        background-color: var(--accent);
      }

      .availability {
        text-transform: uppercase;
        font-weight: bold;
      }

      .availability.free {
        border-color: var(--free);
      }
      .availability.occupied {
        border-color: var(--occupied);
      }
      .availability.unknown {
        border-color: var(--unknown);
      }

      .name {
        color: var(--foreground);
      }

      .policy-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1fr, auto));
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-top: 8px;
        align-items: center;
        justify-items: center;
      }

      .policy-sign {
        width: 60px;
      }

      .policy-control-count {
        text-align: right;
        display: inline-block;
        text-align: center;
        margin-left: auto;
        font: 1.2rem Arial, sans-serif;
        vertical-align: middle;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }
      .policy-control-count .free {
        color: var(--foreground);
        font-style: bold;
      }
      .policy-control-count .total {
        color: grey;
        font: 0.8rem Arial, sans-serif;
      }
      .garage-popup .policy-control-count .total {
        color: grey;
        font: inherit;
      }
      
      .loaded .splash {
        display: none;
      }

      .splash {
        max-width: 40%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        filter: grayscale(1) opacity(0.5);
      }
      .splash img {
        max-width: 100%;
        max-height: 100%;
        margin-bottom: 5%;
        position: relative;
      }
      .loader {
        width: 100%;
        height: 1px;
        background: linear-gradient(#414141 0 0) 0/0% no-repeat #ddd;
        animation: l1 10s infinite linear;
      }
      @keyframes l1 {
        100% {
          background-size: 100%;
        }
      }

      /* fix transparent svg marker background blocking pointer events */
      .leaflet-marker-icon.leaflet-interactive, .svgMarker {
        pointer-events: none;
      }
      .garage-marker .clickable {
        pointer-events: all;
      }

      .garage-marker .count-box {
        fill: var(--background);
        stroke: var(--accent);
        stroke-width: 1px;
      } 

      .garage-marker .count-text {
        fill: "red";
        font-family: Arial, sans-serif;
        font-size: var(--marker-font-size, 16px);
      }

      .garage-marker .count-text .free {
        fill: var(--foreground);
      }

      .garage-marker .count-text .slash {
        opacity: 0.85 ;
        font-size: 0.6em;
        fill: var(--foreground);
      }

      .garage-marker .count-text .total {
        opacity: 0.85 ;
        font-size: 0.6em;
        fill: var(--foreground);
      }



.leaflet-popup-tip {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 0 4px  var(--foreground);
}

.leaflet-popup-content-wrapper {
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 0 4px  var(--foreground);
  padding: 1em 2em;
}

.leaflet-popup-content-wrapper div{
  margin: 0;
}

.leaflet-popup:has(.garage-popup) .leaflet-popup-tip {
  display: none; 
}

.garage-marker.expanded svg .count-box,
.garage-marker.expanded svg .count-text {
  opacity: 0;
  transition: opacity 120ms ease;
}

.garage-popup .garage-name {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 0.5em;
}


.garage-popup .availability-bar {
  height: 4px;
  background: var(--occupied);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.garage-popup .availability-bar .bar-fill {
  height: 100%;
  background: var(--free);
}

.garage-popup th, .garage-popup td {
  vertical-align: top;
}

.garage-marker.selected .marker-body {
  fill: var(--selected);
}

.parking-space.selected {
  stroke: var(--selected);
  stroke-width: 3px;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 2px var(--selected));
}

.garage-popup .policy-control-img {
  border-radius: 5px;
}

.garage-popup th:has(.policy-control-img){
  text-align: center;
}

.garage-popup .policy-control-img {
  margin-right: 1em;
}