html, body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f5f7fb;
  color: #111827;
}

.dark body {
  background: #0b1220;
  color: #f3f4f6;
}

.hidden { display: none !important; }

/* ===== Hamburger Menü ===== */
#menuButton {
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 3000;
  border: none;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
}

/* Lightmode Menü */
#menuContent {
  position: fixed;
  top: 56px;
  right: 12px;
  left: auto;
  z-index: 3000;
  min-width: 200px;
  border-radius: 14px;
  padding: 10px;

  background: rgba(255,255,255,0.95);
  color: #111827;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);

  display: none;
}

.dark #menuContent {
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

#menuContent.is-open { display: block; }

#menuContent a,
#menuContent button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 650;
  text-decoration: none;
  color: #111827;
}

.dark #menuContent a,
.dark #menuContent button {
  color: #fff;
}

#menuContent a:hover,
#menuContent button:hover {
  background: rgba(0,0,0,.06);
}

.dark #menuContent a:hover,
.dark #menuContent button:hover {
  background: rgba(255,255,255,.10);
}

/* ✅ Icon-Button (Dark/Light) im Menü */
#darkModeToggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
#darkModeToggle .mode-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.06);
}
.dark #darkModeToggle .mode-icon {
  background: rgba(255,255,255,.10);
}

/* ===== Dashboard: Bild links neben Karte ===== */
.map-row{
  display:flex;
  gap:12px;
  padding:0 16px;
  margin-top:12px;
  align-items:stretch;
}

.map-side{
  flex: 0 0 420px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .map-side{
  background: rgba(255,255,255,0.06);
}

.map-side img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
  box-sizing: border-box;
}

/* Flex-Karte */
.map-wrap{
  flex:1 1 auto;
  display:flex;
  min-width:0;
}

.page-dashboard #map{
  flex: 1 1 auto;
  width: 100%;
  height: 420px;

  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}

/* ✅ Darkmode: KEIN weißer Rand */
.dark .page-dashboard #map{
  border: none; /* <- Rand komplett weg */
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
}

#dashboard { margin-top: 12px; }

/* ===== Cards / Groups ===== */
.data-card {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.dark .data-card {
  background: rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
}

.data-group {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.8);
}

.dark .data-group {
  background: rgba(17,24,39,.65);
  border-color: rgba(255,255,255,.10);
}

/* Farbliche Gruppenhintergründe */
.data-group.victron { background: #e8f5e9; }
.data-group.pv      { background: #fff7ed; }
.data-group.raspberry { background: #eef2ff; }
.data-group.sensoren { background: #e0f7fa; }

.dark .data-group.victron,
.dark .data-group.pv,
.dark .data-group.raspberry,
.dark .data-group.sensoren {
  background: rgba(255,255,255,.06);
}

/* Charts / Canvas */
.canvas-container {
  position: relative;
  height: 160px;
  margin-top: 10px;
}

.center-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  pointer-events: none;
}

/* EnergyFlow (SVG lines) */
.flow { stroke: rgba(255,255,255,.35); }

/* ===== ✅ GPS Marker (wichtig für Dashboard + Map) ===== */
.gps-dot{
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #16a34a;                 /* passt zum Hamburger-Grün */
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.dark .gps-dot{
  border-color: #111827;               /* dunkler Rand im Darkmode */
}

/* ===== ✅ Leaflet Follow Button Styling ===== */
.follow-toggle{
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(0,0,0,.06);
  color: #111827;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.dark .follow-toggle{
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* ✅ Aktiv: Hamburger-Grün */
.follow-toggle[data-on="true"]{
  background: #16a34a;
  color: #fff;
}
.follow-toggle[data-on="true"]:hover{
  background: #15803d;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .page-dashboard #map { height: 360px; }
  .map-row{ flex-direction:column; }
  .map-side{
    height: 220px;
    flex: 0 0 auto;
  }
}