/* Büchler Musikproduktion - sichere Sidebar Optimierung */

:root {
  --bmp-side-bg-1: #070b14;
  --bmp-side-bg-2: #0b1220;
  --bmp-side-card: rgba(255,255,255,.055);
  --bmp-side-card-hover: rgba(255,255,255,.095);
  --bmp-side-border: rgba(255,255,255,.11);
  --bmp-side-text: rgba(255,255,255,.92);
  --bmp-side-muted: rgba(255,255,255,.58);
  --bmp-side-accent: #1ed760;
  --bmp-side-accent-2: #35f28a;
  --bmp-side-danger: #ff5d6c;
  --bmp-side-width: 286px;
  --bmp-side-radius: 18px;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) {
  background:
    radial-gradient(circle at top left, rgba(30,215,96,.16), transparent 34%),
    linear-gradient(180deg, var(--bmp-side-bg-2), var(--bmp-side-bg-1)) !important;
  color: var(--bmp-side-text) !important;
  border-right: 1px solid var(--bmp-side-border) !important;
  box-shadow: 18px 0 55px rgba(0,0,0,.28) !important;
  width: var(--bmp-side-width);
  max-width: var(--bmp-side-width);
  min-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(30,215,96,.55) rgba(255,255,255,.05);
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar)::-webkit-scrollbar {
  width: 9px;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar)::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bmp-side-accent), rgba(30,215,96,.25));
  border-radius: 999px;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) a {
  color: var(--bmp-side-text) !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) a:hover {
  background: var(--bmp-side-card-hover) !important;
  color: #fff !important;
  transform: translateX(3px);
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) a.active,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .active > a,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) [aria-current="page"] {
  background:
    linear-gradient(135deg, rgba(30,215,96,.24), rgba(30,215,96,.08)) !important;
  border: 1px solid rgba(30,215,96,.35) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(30,215,96,.12), 0 14px 30px rgba(0,0,0,.22);
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) ul,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) ol {
  list-style: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) li {
  margin: 5px 0 !important;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .nav-section,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .section-title,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .menu-title,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) h3,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) h4 {
  color: var(--bmp-side-muted) !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .badge,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .pill {
  background: rgba(30,215,96,.15) !important;
  color: var(--bmp-side-accent-2) !important;
  border: 1px solid rgba(30,215,96,.32) !important;
  border-radius: 999px !important;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .sidebar-close,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .close-sidebar,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) button[aria-label="Close"],
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) button[aria-label="Schließen"] {
  display: none !important;
}

:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .empty,
:is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) .is-empty {
  display: none !important;
}

:is(.content, .main-content, main, .page-content) {
  min-width: 0;
}

/* Mobile: Sidebar darf nicht den Inhalt zerstören */
@media (max-width: 900px) {
  :root {
    --bmp-side-width: 270px;
  }

  :is(.sidebar, .bmp-sidebar, .app-sidebar, .main-sidebar, .left-sidebar, .side-nav, #sidebar, aside.sidebar, nav.sidebar) {
    max-width: min(86vw, 290px) !important;
  }
}