* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  color-scheme: light;
}

html, body {
  font-family: 'Cairo', sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  color-scheme: light;
}

/* Clean Map Typography */
.map-city-badge {
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.map-commune-badge {
  background: rgba(15, 23, 42, 0.85);
  color: #5eead4;
  font-weight: 700;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
}

/* Base Leaflet overrides (Clean Light Theme) */
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 0;
}
.leaflet-popup-content {
  margin: 8px;
  line-height: 1.5;
}
.leaflet-popup-tip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.leaflet-container a.leaflet-popup-close-button {
  color: #64748b !important;
  padding: 6px !important;
  top: 4px;
  right: 4px;
}
.leaflet-container a.leaflet-popup-close-button:hover {
  color: #0f172a !important;
}
.leaflet-control-zoom a {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

/* Elegant Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9; 
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; 
}

/* Layout Helpers */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px; /* space for mobile nav */
}
.map-container {
  height: 65vh;
  min-height: 400px;
}
@media (max-width: 768px) {
  .map-container {
    height: 50vh;
  }
}