:root { 
  color-scheme: dark; 
}

/* ===== Grundlayout ===== */
html, body { 
  height: 100%;
  margin:0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  background:#05080f; /* Fast schwarz mit Blaustich */
  color:#e6eef7; 
}

/* ===== Topbar ===== */
.topbar{
  display:flex; 
  gap:12px; 
  align-items:center; 
  padding:10px 14px;
  background: linear-gradient(180deg, #0a0f1a, #05080f);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; 
  top:0; 
  z-index:1000;
}

.topbar h1{ 
  font-size:16px; 
  margin:0; 
  font-weight:700; 
  letter-spacing:.3px; 
}

.spacer{ flex:1; }

/* ===== Inputs & Buttons ===== */
input, select, button, textarea{
  background:#0b1220;
  color:#e6eef7; 
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; 
  padding:8px 10px;
}

button{ cursor:pointer; }

button.primary{ 
  background:#1f6feb; 
  border-color:#1f6feb; 
}

button.danger{ 
  background:#b42318; 
  border-color:#b42318; 
}

a{ 
  color:#7ab7ff; 
  text-decoration:none; 
}

a:hover{ 
  text-decoration:underline; 
}

/* ===== Map ===== */
#map{
  position: fixed;
  left: 0; 
  right: 0;
  top: 60px; 
  bottom: 0;
  background:#05080f; /* Sehr dunkles Blau-Schwarz */
}

/* Falls Leaflet genutzt wird */
.leaflet-container {
  background:#05080f !important;
}

/* ===== Badges ===== */
.badge{ 
  padding:4px 8px; 
  border-radius:999px; 
  font-size:12px; 
  border:1px solid rgba(255,255,255,0.10); 
}

.badge.pending{ 
  background: rgba(255, 193, 7, 0.15); 
}

.badge.approved{ 
  background: rgba(34, 197, 94, 0.15); 
}

/* ===== Panel ===== */
.panel{
  max-width: 920px; 
  margin: 24px auto; 
  padding: 14px;
  border:1px solid rgba(255,255,255,0.08); 
  border-radius:16px; 
  background:#0b1220;
}

/* ===== Tabelle ===== */
.table{ 
  width:100%; 
  border-collapse:collapse; 
}

.table th,
.table td{ 
  text-align:left; 
  padding:10px; 
  border-bottom:1px solid rgba(255,255,255,0.06); 
}

.small{ 
  font-size:12px; 
  opacity:0.85; 
}

/* ===== Sidebar ===== */
.sidebar{
  position: fixed;
  left: 12px;
  top: 74px;
  z-index: 2000;
  width: 300px;
  max-height: calc(100vh - 90px);
  overflow:auto;
  padding: 12px;
  border-radius: 16px;
  background: rgba(8,12,20,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.sidebar h3{ 
  margin:0 0 10px 0; 
  font-size:14px; 
}

.chk{ 
  display:flex; 
  gap:10px; 
  align-items:center; 
  padding:6px 0; 
  border-bottom:1px solid rgba(255,255,255,0.05); 
}

.chk:last-child{ 
  border-bottom:0; 
}

.chk input{ 
  width:16px; 
  height:16px; 
}

.smallbtn{ 
  padding:6px 8px; 
  border-radius:10px; 
  font-size:12px; 
}

/* ===== Fixed Navbar ===== */
.topbar.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(5,8,15,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.topbar.nav .left, 
.topbar.nav .center, 
.topbar.nav .right{
  display:flex; 
  align-items:center; 
  gap:10px;
}

.topbar.nav .left{ flex: 0 0 auto; }
.topbar.nav .center{ flex: 1 1 auto; justify-content:center; }
.topbar.nav .right{ flex: 0 0 auto; justify-content:flex-end; }

.topbar.nav h1{ 
  margin:0 10px 0 0; 
  font-size:16px; 
  white-space:nowrap; 
}


/* ===== Filter groups (collapsible) ===== */
.filter-group { margin-bottom: 10px; }
.group-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  cursor:pointer;
  padding:8px;
  border-radius:12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight:600;
}
.group-header:hover{ background: rgba(255,255,255,0.08); }
.group-content{ margin-top:6px; padding-left:10px; }
.arrow{ opacity:0.9; }