html, body {
  height: 100%;
  margin: 0;
}
:root {
  --enl-green: #28f428; 
  --res-blue:  #00c4ff;
  --tie-teal:  #00d4aa;
  --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: 89vh;
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(10, 10, 10, 0.85);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(155,161,255,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;
}

/* Leaflet popup: dark theme */
.leaflet-popup-content-wrapper {
  background: #111;
  color: #eee;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(155,161,255,0.9);
}
.leaflet-popup-content {

  font-family: system-ui, sans-serif;
  max-height: min(78vh, 560px);
  overflow-y: auto;
  color: #eee;
  padding-right: 16px; /* avoid scrollbar overlaying text */
  margin-bottom: 0;
  /* padding-bottom: 0; */
  margin-right: 6px;
}
.leaflet-popup-tip {
  background: #111;
}

.leaflet-popup-content h3 {
  font-size: 16px;
  margin: 0 0 6px 0;
}

.leaflet-popup-content strong {
  font-weight: bold;
}

/* Popup score proportion bar */
.score-bar {
  margin-top: 6px;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
}

.score-bar-seg {
  height: 100%;
}

.score-bar-seg.enl {
  background: var(--enl-green);
}

.score-bar-seg.res {
  background: var(--res-blue);
}

.enl-text {
  color: var(--enl-green);
}

.res-text {
  color: var(--res-blue);
}

/* 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,
.leaflet-popup a {
  color: #9ba1ff;           
  text-decoration: underline;
}

#info-panel a:visited,
.leaflet-popup a:visited {
  color: #9ba1ff;            
}

#info-panel a:hover {
  color: #ffffff;            /* brighten on hover */
}
#series-filter, #country-filter {
  max-height: 40vh;     
  height:25vh;
  min-height: 40px;
  overflow-y: auto;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
}

#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;
}
.evt-info {
  /* margin-top: 6px; */
  font-size: 0.9em;

  margin-bottom: 8px;
  /* Leaflet measures popup width with white-space:nowrap; opt out so long
     notes wrap on word breaks instead of widening the popup */
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 40ch;
}

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;
  }
}