body {
/*  padding-bottom: 20px; */
}

.navbar {
/*  margin-bottom: 20px; */
}

.PanelArrowIN {
	transform: rotate(180deg);
	color: #dc3545 !important;
}

.NetzArrow1 {
	transform: rotate(180deg);
	color: #ffc107 !important;
}

.NetzArrow2 {
	transform: rotate(180deg);
	color: #dc3545 !important;
}

.BatterieArrowOut {
	transform: rotate(180deg);
}


/* Custom CSS to prevent the content to go underneath the navbar */
// body{ padding-bottom: 70px; }



/* ============================================================
 *  Neon-Button im Dashboard (.btn-auto-status)
 *  - Basis: neutral (grau), theme-aware (Bootstrap 5 Variablen)
 *  - Farbzustände via data-visual: yellow | green | blue | (grey)
 *  - Glow pro Zustand
 *  - Fallbacks für Browser ohne color-mix()
 * ============================================================
 */

/* --- Basis (grau) ------------------------------------------------ */
.btn-auto-status {
  /* Theme-aware Defaults */
  --auto-grey-bg: var(--bs-body-bg);
  --auto-grey-bd: var(--bs-border-color);
  --auto-grey-tx: var(--bs-secondary-color);

  font-weight: 800;
  letter-spacing: .12em;
  border-radius: .6rem;
  padding: .45rem .9rem;

  border: 1px solid var(--auto-grey-bd);
  background: var(--auto-grey-bg);
  color: var(--auto-grey-tx);

  text-shadow: none;
  box-shadow: none;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .06s ease;

  user-select: none;
  outline: none;
}

.btn-auto-status:hover {
  /* etwas stärkerer Rand im Hover */
  border-color: color-mix(in oklab, var(--auto-grey-bd), var(--bs-body-color) 20%);
}
.btn-auto-status:active   { transform: translateY(1px); }
.btn-auto-status:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb,13,110,253), .2); }

/* --- Optional: explizites Grau per data-visual="grey" ----------- */
.btn-auto-status[data-visual="grey"] {
  background: var(--auto-grey-bg);
  color: var(--auto-grey-tx);
  border-color: var(--auto-grey-bd);
  box-shadow: none;
}

/* --- YELLOW ------------------------------------------------------ */
.btn-auto-status[data-visual="yellow"] {
  background: color-mix(in oklab, rgb(255,180,0) 85%, #fff 15%);
  color: #212529;
  border-color: color-mix(in oklab, rgb(255,180,0) 70%, #000 30%);
  text-shadow: 0 0 2px rgba(255,255,255,.6);
  box-shadow:
    0 0 6px rgba(255,180,0,.55),
    0 0 14px rgba(255,180,0,.35),
    0 0 24px rgba(255,180,0,.20);
}

/* Fallback für Browser ohne color-mix */
@supports not (color-mix(in oklab, white 100%, black 0%)) {
  .btn-auto-status[data-visual="yellow"] {
    background: rgba(255,180,0,.92);
    border-color: rgba(255,180,0,.85);
  }
}

/* Reine Gelb-Textfarbe für Icons */
.text-deepyellow {
  color: #FFB400 !important; /* warmes EV-Gelb */
  text-shadow: 0 0 3px rgba(255,180,0,.5);
}


/* --- GREEN ------------------------------------------------------- */
.btn-auto-status[data-visual="green"] {
  background: color-mix(in oklab, rgb(var(--bs-success-rgb,25,135,84)) 85%, #fff 15%);
  color: #fff;
  border-color: color-mix(in oklab, rgb(var(--bs-success-rgb,25,135,84)) 70%, #000 30%);
  text-shadow: 0 0 2px rgba(255,255,255,.6);
  box-shadow:
    0 0 6px rgba(var(--bs-success-rgb,25,135,84), .55),
    0 0 14px rgba(var(--bs-success-rgb,25,135,84), .35),
    0 0 24px rgba(var(--bs-success-rgb,25,135,84), .20);
}
@supports not (color-mix(in oklab, white 100%, black 0%)) {
  .btn-auto-status[data-visual="green"] {
    background: rgba(var(--bs-success-rgb,25,135,84), .95);
    border-color: rgba(var(--bs-success-rgb,25,135,84), .9);
  }
}

/* --- BLUE (neu) -------------------------------------------------- */
.btn-auto-status[data-visual="blue"] {
  /* wir referenzieren bewusst dieselben Werte wie .auto-deepblue */
  background: color-mix(in oklab, rgb(0,95,204) 80%, #fff 20%);
  color: #fff;
  border-color: color-mix(in oklab, rgb(0,95,204) 60%, #000 35%);
  text-shadow: 0 0 3px rgba(255,255,255,.6);
  box-shadow:
    0 0 6px rgba(0,95,204,.55),
    0 0 14px rgba(0,95,204,.35),
    0 0 24px rgba(0,95,204,.20);
}

@supports not (color-mix(in oklab, white 100%, black 0%)) {
  .btn-auto-status[data-visual="blue"] {
    background: rgba(0,95,204,.95);
    border-color: rgba(0,95,204,.9);
  }
}

.text-deepblue {
  color: #005FCC !important;
}

/* --- Disabled während Request ----------------------------------- */
.btn-auto-status:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* --- Mobile Feinjustierung -------------------------------------- */
@media (max-width: 420px) {
  .btn-auto-status {
    padding: .4rem .75rem;
    letter-spacing: .1em;
  }
}