/* Atlas map page layout.
 *
 * The map should fill the viewport below the nav and controls. main.css gives
 * .site-main a max-width:1200px and padding; .site-main--full opts out.
 */

.atlas-map-page { overflow: hidden; }

.site-main--full {
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* viewport minus nav (56) - controls bar (auto) - footer (~64) */
  height: calc(100vh - 56px);
}

.atlas-map-page .site-footer { display: none; }

/* ── Controls bar ───────────────────────────────────────────────────────── */
.map-controls {
  flex: 0 0 auto;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.filter-row--secondary { justify-content: space-between; }

.filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.chip-label {
  color: var(--text-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: .25rem;
}

.chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.chip:hover { background: var(--bg-hover); }

.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.map-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.season-picker {
  color: var(--text-muted);
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

#season-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .25rem .5rem;
  font: inherit;
}

#empires-toggle.is-active {
  background: var(--accent2);
  border-color: var(--accent2);
  color: white;
}

/* ── Map body ───────────────────────────────────────────────────────────── */
#map {
  flex: 1 1 auto;
  width: 100%;
  background: #0a0c12;
}

/* ── Team marker (divIcon) ──────────────────────────────────────────────── */
/* Logo-based marker: an <img> stacked on top of a colored-abbreviation
 * fallback. When the logo PNG fails to load the inline onerror hides
 * the img and the fallback shows through, so no broken-image icon
 * ever reaches the user. */
.team-logo-wrap {
  position: relative;
  display: block;
}

.team-logo-wrap img.team-logo,
.team-logo-wrap .team-marker--fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.team-logo-wrap img.team-logo {
  object-fit: contain;
  z-index: 2;
  /* Transparent background — the empires territory color shows
   * through behind the PNG's transparency, SBNation-style. A
   * white halo + dark drop-shadow keeps logos readable on both
   * light and dark team colors (the white outlines tight bright
   * edges; the dark shadow grounds the logo on light fills). */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 2px rgba(255, 255, 255, .8))
    drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
}

.team-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  letter-spacing: .02em;
  font-size: 10px;
}

/* Fallback colored disc — circular like the original team-marker.
 * Hidden by default; the <img>'s onerror handler removes
 * .team-marker--hidden when the PNG fails to load. The hidden rule
 * MUST come after `.team-marker` so its `display: none` wins the
 * cascade tie (both selectors are single-class specificity). */
.team-marker--fallback { border-radius: 50%; }
.team-marker--hidden { display: none; }

.team-marker--fallback { z-index: 1; }

/* When zoomed out and clustering kicks in, hide the label inside the marker.
 * We let MarkerCluster's own bubble take over. */
.leaflet-marker-icon.team-marker { line-height: 1; }

/* Hover popup */
.atlas-popup {
  font-size: .85rem;
  color: var(--text);
}
.atlas-popup .team-name { font-weight: 700; margin-bottom: .15rem; }
.atlas-popup .team-meta { color: var(--text-muted); font-size: .78rem; }

/* Territory polygon defaults — JS sets per-cell fill colors and
 * overrides these via Leaflet's style() function. Kept here only
 * as a safety net for browsers that ignore Leaflet's inline
 * presentation attributes. */
.atlas-territory {
  stroke: rgba(0, 0, 0, .35);
  stroke-width: .5;
  fill-opacity: .78;
}

/* Empires-mode logo overlays. L.imageOverlay drops the <img> in as
 * a child of the map's overlay pane; this targets that image. Same
 * halo + shadow treatment the school-coord markers use so logos
 * stay readable against any team-color background. Cursor:pointer
 * because the imageOverlay has a click handler. */
.atlas-empires-logo {
  cursor: pointer;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 2px rgba(255, 255, 255, .8))
    drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
}

/* ── Empires week scrubber ──────────────────────────────────────────────── */
.filter-row--scrubber {
  border-top: 1px dashed var(--border);
  padding-top: .5rem;
}

.scrubber {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 280px;
}

.scrubber input[type="range"] {
  flex: 1 1 240px;
  accent-color: var(--accent);
  cursor: pointer;
}

.scrubber-value {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: .85rem;
  min-width: 2.5em;
  text-align: right;
}

.scrubber-hint {
  font-size: .75rem;
  font-style: italic;
}

.atlas-empires-tooltip {
  font-size: .8rem;
  background: rgba(15, 17, 23, 0.94);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .35rem .55rem;
}

/* Mobile: stack control rows tightly */
@media (max-width: 640px) {
  .map-controls { padding: .5rem .75rem; }
  .filter-row { gap: .5rem; }
  .map-actions { width: 100%; justify-content: space-between; }
}