/* ==========================================================================
   theme-grey.css — Modern Dark UI (neutral)
   Notes:
   - Tokens live in :root
   - Component rules live outside :root (valid CSS)
   ========================================================================== */

/* -----------------------------
   1) Theme Tokens (Dark default)
   ----------------------------- */
:root{
  /* Flächen */
  --bg:        #1c1c1c;   /* Seitenhintergrund */
  --surface:   #2c2c2d;   /* Cards / Panels */
  --surface-2: #1c1c1c;   /* Secondary surfaces (Header, Tabs, Thead) */
  --surface-3: #2c2c2d;   /* Hover/Active */
  --surface-context: #000000; /* Context hover/active */

  /* Text */
  --text:      #E8EEF6;
  --muted:     #A6B3C6;
  --menu-bar:  #afafaf;

  /* Borders & Shadow */
  --border:      #393939;
  --border-soft: rgba(63,63,63,0.70);
  --border-context: #9b9b9b;
  --shadow:      0 5px 38px rgba(0,0,0,0.3);

  /* Accent */
  --accent:      #0061ae;
  --accent-soft: rgba(0,97,174,0.50);

  /* Status */
  --ok:       #22C55E;
  --warn:     #F59E0B;
  --danger:   #EF4444;

  /* Optional: „Glass“-Panel */
  --glass:    rgba(17,24,34,0.72);

  /* Navbar muss über Leaflet liegen */
  --nav-z: 5000;
}

/* Navbar/Leaflet Z-Index Harmonisierung */
.site-header,
.topbar{
  z-index: var(--nav-z) !important;
}

.leaflet-top,
.leaflet-bottom,
.leaflet-control{
  z-index: 400 !important;
}

.leaflet-container{
  z-index: 1;
}

/* -----------------------------
   2) Global application
   ----------------------------- */
html, body{
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; }

/* -----------------------------
   3) Common surfaces (Cards etc.)
   ----------------------------- */
.card,
.panel,
.content-panel,
.modal,
.dropdown,
.popover{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.tab-panel{
  background: var(--surface);
  border-radius: 14px;
}

/* Secondary surfaces */
.card-header,
thead th,
.table-head,
.tabs,
.toolbar,
.topbar,
.sidebar{
  background: var(--surface);
  border-color: var(--border);
}

/* Tables */
table{ background: var(--surface); }
thead th{
  background: var(--surface-2);
  color: var(--muted);
}
tbody tr:hover td{ background: var(--surface-3); }

/* Inputs */
input, select, textarea{
  background: color-mix(in srgb, var(--surface) 90%, #000);
  color: var(--text);
  border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Chips / Pills / Small tiles */
.metric,
.small-pill,
.pill,
.badge,
.surface-2{
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Muted helpers */
.muted, .text-muted{ color: var(--muted) !important; }

/* Buttons (optional global) */
.btn-main{
  background: var(--accent);
  color: var(--text);
}
.btn-main:hover{
  filter: brightness(0.96);
}
.link-ghost{ color: var(--accent); }

/* -----------------------------
   4) Leaflet Controls (modern, glassy)
   ----------------------------- */
.leaflet-control,
.leaflet-bar{
  background: var(--glass);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.leaflet-bar a{
  background: transparent;
  color: var(--text);
}
.leaflet-bar a:hover{
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
}

/* Optional: Selection */
::selection{
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* =========================================================
   Leaflet Popup — Dark UI (an Website-Design anpassen)
   ========================================================= */
.leaflet-popup-content-wrapper{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  padding-right: 28px;
}

.leaflet-popup-content{
  margin: 0;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.leaflet-popup-content b,
.leaflet-popup-content strong{
  color: var(--text);
}

.leaflet-popup-content small,
.leaflet-popup-content .muted{
  color: var(--muted);
}

.leaflet-popup-content a{
  color: var(--accent);
  text-decoration: none;
}
.leaflet-popup-content a:hover{
  text-decoration: underline;
}

.leaflet-popup-tip{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.leaflet-popup-close-button{
  line-height: 26px !important;
  border-radius: 10px;
  margin: 6px 6px 0 0;
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  border: 1px solid var(--border);
  text-align: center;
}