/* ═══════════════════════════════════════════════════════════════════
   LEAFLET MAP STYLES - CO.RA.PAN RESPONSIVE POPUP DESIGN
   Zentrale Styles für alle Karten im Projekt
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   0. GLOBALE Z-INDEX HIERARCHIE (Material for MkDocs + Leaflet)
   
   Page-Level Layer (Material for MkDocs UI):
     3000 - Header (.md-header) - IMMER OBERSTE SCHICHT
     2900 - Navigation Drawer + Overlay (.md-sidebar, .md-nav, .md-overlay)
     1000 - Map Container (auch Fullscreen)
   
   Leaflet-Level Layer (innerhalb Map):
      850 - Popups (höchste Leaflet-Ebene)
      800 - Popup Pane
      600 - Marker Pane
      400 - Control Container
      200 - Tile Pane (unterste Leaflet-Ebene)
   
   KRITISCH: Material Header/Drawer MÜSSEN über allen Leaflet-Elementen
   liegen, auch wenn Leaflet-Controls visuell "unter" die Top Bar ragen.
   ─────────────────────────────────────────────────────────────────── */

/* Material for MkDocs Header - IMMER OBERSTE SCHICHT */
.md-header {
  z-index: 3000 !important;
}

/* Material for MkDocs Navigation + Overlay - über Karten */
.md-overlay,
.md-sidebar,
.md-nav,
.md-drawer {
  z-index: 3900 !important;
}

/* ───────────────────────────────────────────────────────────────────
   1. MAP CONTAINER & OVERFLOW
   Container unter Material UI, aber über normalem Content
   ─────────────────────────────────────────────────────────────────── */

#map-container,
[data-map="herkunft"],
[data-map="variation"],
[data-map="variation_tempora"] {
  position: relative;
  z-index: 1000 !important; /* Unter Material Header/Drawer */
  overflow: visible !important; /* Kritisch: Popups dürfen nicht abgeschnitten werden */
}

/* Fullscreen-Container dürfen NICHT höher als 1000 sein */
.map-container.fullscreen,
.variation-map-container.fullscreen,
.atlas-map-container.fullscreen,
#map-container.fullscreen,
[data-map="herkunft"].fullscreen,
[data-map="variation"].fullscreen,
[data-map="variation_tempora"].fullscreen {
  z-index: 1000 !important; /* NIEMALS über Material Header/Drawer */
}

/* Verhindere Stacking-Context-Fallen (transform, filter, perspective) */
.map-container,
.map-container.fullscreen,
.variation-map-container,
.variation-map-container.fullscreen,
.atlas-map-container,
.atlas-map-container.fullscreen,
#map-container,
#map-container.fullscreen,
[data-map="herkunft"],
[data-map="variation"],
[data-map="variation_tempora"] {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* ───────────────────────────────────────────────────────────────────
   2. Z-INDEX HIERARCHIE (Leaflet intern)
   Leaflet-Layer bleiben IMMER unter 1000 (Map Container z-index)
   ─────────────────────────────────────────────────────────────────── */

.leaflet-tile-pane { 
  z-index: 200 !important; 
}

.leaflet-control-container { 
  z-index: 400 !important; 
}

.leaflet-marker-pane { 
  z-index: 600 !important; 
}

.leaflet-popup-pane { 
  z-index: 800 !important; 
}

.leaflet-popup { 
  z-index: 850 !important; 
}

/* ───────────────────────────────────────────────────────────────────
   3. RESPONSIVE POPUP STYLES (CO.RA.PAN Standard)
   Eine einheitliche Popup-Klasse für alle Karten
   ─────────────────────────────────────────────────────────────────── */

.corapan-popup .leaflet-popup-content-wrapper {
  max-width: 340px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.corapan-popup .leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.5;
}

.corapan-popup .leaflet-popup-close-button {
  color: #666;
  font-size: 20px;
  padding: 4px 8px;
}

.corapan-popup .leaflet-popup-close-button:hover {
  color: #000;
}

/* ───────────────────────────────────────────────────────────────────
   4. MOBILE RESPONSIVITÄT
   Popups passen sich dem Viewport an
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .corapan-popup .leaflet-popup {
    max-width: 90vw;
  }
  
  .corapan-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 48px);
  }
  
  .corapan-popup .leaflet-popup-content {
    max-width: 90vw;
    overflow-wrap: anywhere;
  }
}

/* ───────────────────────────────────────────────────────────────────
   5. CONTENT SCROLLING für lange Inhalte
   Verhindert zu hohe Popups auf Mobile
   ─────────────────────────────────────────────────────────────────── */

.corapan-popup .leaflet-popup-content {
  max-height: 50vh;
  overflow: auto;
}

@media (max-width: 599px) {
  .corapan-popup .leaflet-popup-content {
    max-height: 55vh;
  }
}

/* ───────────────────────────────────────────────────────────────────
   6. POPUP CONTENT STYLING
   Einheitliches Design für alle Karten-Popups
   ─────────────────────────────────────────────────────────────────── */

.popup-sprachenkarte {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9em;
  color: #222;
}

.popup-title {
  font-weight: 700;
  font-size: 1.1em;
  color: #1976d2;
  margin-bottom: 6px;
  display: block;
}

.popup-familie,
.popup-hauptstadt {
  font-size: 0.95em;
  color: #666;
  font-style: italic;
  margin-bottom: 4px;
}

.popup-herkunft {
  font-size: 0.95em;
  color: #444;
  margin-top: 6px;
}

.popup-line {
  margin-top: 5px;
  line-height: 1.3;
}

.popup-label {
  font-size: 0.85em;
  color: #555;
}

.popup-value {
  font-weight: 700;
  font-size: 0.85em;
  color: #222;
  margin-left: 4px;
}

/* ───────────────────────────────────────────────────────────────────
   7. DARK MODE SUPPORT
   ─────────────────────────────────────────────────────────────────── */

body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-content-wrapper {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .popup-sprachenkarte {
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .popup-title {
  color: #64b5f6;
}

body[data-md-color-scheme="slate"] .popup-familie,
body[data-md-color-scheme="slate"] .popup-hauptstadt {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .popup-herkunft {
  color: #ccc;
}

body[data-md-color-scheme="slate"] .popup-label {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .popup-value {
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-close-button {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-close-button:hover {
  color: #fff;
}

/* ───────────────────────────────────────────────────────────────────
   8. FULLSCREEN MODE IMPROVEMENTS
   Besser lesbare Popups im Vollbildmodus
   ─────────────────────────────────────────────────────────────────── */

.fullscreen .corapan-popup .leaflet-popup-content-wrapper {
  max-width: 400px;
}

@media (max-width: 599px) {
  .fullscreen .corapan-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 60px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END OF LEAFLET MAP STYLES
   ═══════════════════════════════════════════════════════════════════ */