:root {
    --control-size: 34px;
    --spinner-border: 3px;
  }

/* 1. Make the viewport a column-flex container so we can push footer down */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  
  /* 2. Let the map take up all remaining space */
  #map {
    flex: 1;
  }
  
  /* 3. Prevent the alert box from stretching vertically */
  .alert-box {
    flex-shrink: 0;
  }
  
  /* 4. Push the footer to the bottom */
  footer {
    margin-top: auto;
  }
  

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #1a1a1a; color: #f5f5f5; margin: 0; padding: 0; }
header { background-color: #a8201a; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
header img { height: 50px; }
header h1 { flex-grow: 1; margin: 0; text-align: center; font-size: 1.8em; font-weight: bold; }

#filter-controls { background: #222; padding: 10px 20px; display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 10px; flex: 1; }
.filter-group label { font-size: 1em; }
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; }
input:checked + .slider { background-color: #66bb6a; }
input:checked + .slider:before { transform: translateX(26px); }

#reset-map, .spinner { box-sizing: border-box; width: 32px; height: 32px; margin: 0; padding: 0; }
.spinner { border: 3px solid #ccc; border-top: 3px solid #828181; border-radius: 50%; animation: spin 3s linear infinite; display: flex; align-items: center; justify-content: center; }
.spinner.paused { animation-play-state: paused; opacity: 0.5; }

#reset-map { background-color: transparent; border: 3px solid #828181; border-radius: 50%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><g fill='none' stroke='%23ccc' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='matrix(0 1 1 0 2.5 2.5)'><path d='m3.9865 1.0781c-2.3838 1.3851-3.9865 3.9664-3.9865 6.9219 0 4.4183 3.5817 8 8 8s8-3.5817 8-8-3.5817-8-8-8'/><path d='m4 1v4h-4' transform='matrix(1 0 0 -1 0 6)'/></g></svg>"); background-repeat: no-repeat; background-position: center; background-size: 80%; color: transparent; text-shadow: none; cursor: pointer; transition: transform 0.5s ease, border-color 0.3s ease; }
#reset-map:hover { border-color: #828181; transform: rotate(360deg); opacity: 0.5; }

#timeRange { -webkit-appearance: none; width: 150px; background: transparent; margin: 0 10px; }
#timeRange::-webkit-slider-runnable-track { height: 4px; background: #444; border-radius: 2px; }
#timeRange::-moz-range-track { height: 4px; background: #444; border-radius: 2px; }
#timeRange::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; background: transparent; border: 3px solid #fff; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; }
#timeRange::-moz-range-thumb { width: 28px; height: 28px; background: transparent; border: 3px solid #fff; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; }
#timeRange::-webkit-slider-thumb:hover, #timeRange::-moz-range-thumb:hover { transform: scale(1.1); }
#timeRange:focus { outline: none; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#map-container { display: flex; height: 80vh; }
#sidebar { width: 260px; background: #333; overflow-y: auto; padding: 10px; }
#sidebar h2 { font-size: 1.2em; margin-top: 0; }
#apparatus-list { list-style: none; padding: 0; }
#apparatus-list li { display: flex; align-items: center; margin: 5px 0; cursor: pointer; }
#apparatus-list img { margin-right: 8px; width: 30px; height: 45px; }
#map { flex: 1; }
.bsky-link { color: #508abc; text-decoration: none; margin: 0 5px; }
.bsky-link:hover { text-decoration: underline; }


/* footer container */
footer {
    background: #111;            /* same dark bg */
    text-align: center;          /* center everything */
    padding: 12px 0;             /* vertical spacing */
    font-family: 'Segoe UI', sans-serif;
  }
  
  /* the grey “note” text */
  footer .footer-note {
    color: #aaa;                 /* light grey */
    font-size: 0.8em;            /* small-ish */
    margin-bottom: 4px;          /* gap down to links */
  }
  
  /* the two links on one line */
  footer .footer-links a {
    color: #4ba1f5;              /* your blue link color */
    text-decoration: none;
    margin: 0 10px;              /* space between them */
    font-size: 0.9em;
  }
  footer .footer-links a:hover {
    text-decoration: underline;
  }
  

  .alert-box {
    background-color: #2e2e2e;
    margin: 10px auto;
    padding: 15px;
    border-radius: 8px;
    max-width: 600px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  }