html, body {
  height: 100%;
  margin: 0;
}
:root {
  --enl-green: #28f428; 
  --res-blue:  #00c4ff;
  --tie-teal:  #14DC94;
  --upcoming: #9ba1ff;
}
#info-panel {
  font-family: sans-serif;
}

#map {
  width: 100%;
  height: 100%;
}
.map-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 10, 10, 0.8);
  color: #e0e0e0;
  padding: 1em 2em;
  border-radius: 8px;
  font-size: 1.2em;
  text-align: center;
  z-index: 1000;
}
#info-panel {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 260px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(10, 10, 10, 0.85);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  z-index: 9999; /* always above Leaflet */
  font-size: 14px;
}
#filters {
  margin-bottom: 10px;
}
#filters label {
  display: block;
  margin-bottom: 6px;
}
#filters select {
  width: 100%;
  padding: 4px;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
}
#info-panel h3 {
  margin-top: 0;
}
#info-panel p {
  font-size: 0.85em;
  opacity: 0.75;
}

#info-minimise {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
}

/* Debug Output Panel */
#debug-output {
  max-height: 150px;
  overflow-y: auto;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  margin-top: 8px;
  border-radius: 4px;
  color: #ccc;
  line-height: 1.3em;
}

.leaflet-popup-content {
  /* background: #111; */
  /* color: #eee; */
  font-family: system-ui, sans-serif;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 6px; /* avoid scrollbar overlaying text */
}

.leaflet-popup-content strong {
  /* color: #eee; */
  font-weight: bold;
}

.enl-text {
  color: var(--enl-green);
  /* font-weight: bold; */
}

.res-text {
  color: var(--res-blue);
  /* font-weight: bold; */
}


.leaflet-popup-tip {
  background: #111;
}

/* Minimise behaviour for info panel */
#info-panel.minimised {
  width: 260px;        /* keep width stable */
  height: auto;
  max-height: none;
  overflow: hidden;
  padding-bottom: 6px;
}

#info-panel.minimised #info-content {
  display: none !important;
}

#info-panel.minimised #info-minimise {
  transform: rotate(180deg);
}
#info-panel h3,
#info-panel label {
  color: #9ba1ff;           
}
#info-panel a {
  color: #9ba1ff;           
  text-decoration: underline;
}

#info-panel a:visited {
  color: #9ba1ff;            
}

#info-panel a:hover {
  color: #ffffff;            /* brighten on hover */
}
#series-filter, #country-filter {
  max-height: 40vh;     
  height:30vh;
  min-height: 40px;
  overflow-y: auto;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
}
/* #series-filter option:checked, 
#country-filter option:checked {
  background: #fff;
  color: #000
} */
#series-filter option {
  padding: 0.3em 0.3em;
}
#series-filter option[data-year-break="true"] {
  border-top: 1px solid #9ba1ff88;
  margin-top: 0.3em;
}
#filters label {
  display: block;
  margin-bottom: 1em;
}

#filters label > select {
  margin-top: 0.4em;
}

.upcoming-text {
  color: var(--upcoming);
  font-weight: 600;
}

button {
  background: #222;
  color: #ccc;
  border: 1px solid #333;
}
#build-footer {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: rgba(10,10,10,0.85);
  color: #9ba1ff;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: system-ui, sans-serif;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

#build-footer .muted {
  color: #bbb;

}
/* iOS / iPadOS override: ignore JS height adjustments */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  #series-filter, #country-filter {
    max-height: 2em !important;   /* roughly one line */
    height: 2em !important;
    min-height: 2em !important;
    overflow-y: auto;
  }
}