/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --nav-h: 54px;
  --text: #e8e8e8;
  --text-muted: #7f9ab5;
  --surface2: #1e3a5c;
  --border: #2a4d6e;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; }

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR (alle Seiten)
═══════════════════════════════════════════════════════════════════════════ */
.navbar {
  position: sticky; top: 0;
  height: var(--nav-h);
  background: rgba(15,25,40,.97);
  border-bottom: 1px solid #1e3a5c;
  backdrop-filter: blur(8px);
  display: flex; align-items: center;
  padding: 0 20px; gap: 2px; z-index: 9999;
}

.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 700; color: #e74c3c;
  text-decoration: none; margin-right: 20px;
}
.navbar-brand .dot { width: 10px; height: 10px; background: #e74c3c; border-radius: 50%; box-shadow: 0 0 6px #e74c3c; }

.navbar nav { display: flex; align-items: center; gap: 2px; }
.navbar nav a { padding: 6px 12px; font-size: .82rem; color: #7f9ab5; text-decoration: none; border-radius: 4px; transition: all .2s; }
.navbar nav a:hover, .navbar nav a.active { color: #e8e8e8; background: #1e3a5c; }

.navbar nav a.discord-btn { margin-left: 8px; background: #5865F2; color: #fff !important; font-weight: 600; padding: 6px 14px; }
.navbar nav a.discord-btn:hover { background: #4752c4; }

/* ══════════════════════════════════════════════════════════════════════════
   KARTEN-SEITE (index.php)
═══════════════════════════════════════════════════════════════════════════ */
body.map-page { overflow: hidden; }

#map {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: #1a5b8e;
  z-index: 1;
}

/* ── Dealer-Suche ─────────────────────────────────────────────────────── */
#dealer-search {
  position: fixed;
  bottom: 28px;
  left: 10px;
  z-index: 1000;
}

#search-select {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: .83rem;
  color: #2c3e50;
  cursor: pointer;
  min-width: 180px;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
}

/* ── Koordinatenanzeige ───────────────────────────────────────────────── */
#coords {
  position: fixed;
  bottom: 8px;
  left: 10px;
  z-index: 1000;
  font-size: .72rem;
  color: #555;
  background: rgba(255,255,255,.75);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── Leaflet Controls ─────────────────────────────────────────────────── */
.leaflet-top.leaflet-left { left: 10px !important; top: 10px !important; }

.leaflet-control-zoom {
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,.3) !important;
}

.leaflet-control-zoom a {
  background: #fff !important;
  color: #333 !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 18px !important;
  border-bottom: 1px solid #ddd !important;
}

.leaflet-control-zoom a:hover { background: #f4f4f4 !important; }

.leaflet-bottom.leaflet-right {
  right: 6px !important;
  bottom: 4px !important;
}

.leaflet-control-attribution {
  font-size: .68rem !important;
  background: rgba(255,255,255,.75) !important;
  color: #555 !important;
}

/* ── Marker ───────────────────────────────────────────────────────────── */
.map-marker {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  cursor: pointer;
  font-size: 13px;
  transition: transform .15s;
}
.map-marker:hover { transform: scale(1.2); }

/* ── Popups ───────────────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}
.leaflet-popup-content { margin: 0 !important; min-width: 190px; }

.popup-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 7px;
  font-weight: 700; font-size: .88rem;
}
.popup-icon { font-size: 17px; }
.popup-body { padding: 7px 12px 11px; background: #fff; }
.popup-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .68rem; font-weight: 700; color: #fff; margin-bottom: 5px; }
.popup-area  { font-size: .76rem; color: #7f8c8d; margin-bottom: 3px; }
.popup-desc  { font-size: .82rem; color: #2c3e50; line-height: 1.4; }

.leaflet-popup-close-button { top: 4px !important; right: 6px !important; }
.leaflet-tooltip { font-size: .76rem !important; border-radius: 4px !important; padding: 3px 8px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ANDERE SEITEN (eintragen, api, lootdrops, maz, farming)
═══════════════════════════════════════════════════════════════════════════ */
body.other-page {
  background: #1a2c40;
  color: #e8e8e8;
  overflow: auto;
  min-height: 100vh;
}

.page { max-width: 800px; margin: 40px auto 80px; padding: 0 20px; }
.page h1 { margin-bottom: 10px; }
.page p  { color: #7f9ab5; line-height: 1.6; margin-bottom: 14px; }

.card {
  background: #1e3a5c;
  border: 1px solid #2a4d6e;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 18px;
}

/* ── Statusbar (footer auf Sub-Seiten) ───────────────────────────────────── */
#statusbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: rgba(10,18,30,.95);
  border-top: 1px solid #1e3a5c;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  font-size: .72rem;
  color: #7f9ab5;
  z-index: 9999;
}
#statusbar strong { color: #e8e8e8; }