/* ============================================================
   [231] Mobile-Optimierung — behebt Nav-Lesbarkeit, Playlist-
   Sichtbarkeit im Hochformat und Player-Bedienung auf Handys.
   ============================================================ */

/* ── Sidebar / Navigation auf Mobil ───────────────────────── */
@media (max-width: 860px) {
  /* Sidebar als volles Overlay, damit alle Labels lesbar sind */
  .sidebar, .shared-sidenav {
    width: min(84vw, 320px) !important;
    max-width: 320px;
  }
  /* Labels immer voll sichtbar im mobilen Overlay (nicht abgeschnitten) */
  .sidebar .sb-label, .shared-sidenav .sb-label,
  .sidebar.closed .sb-label, .shared-sidenav.closed .sb-label {
    opacity: 1 !important;
    max-width: none !important;
    white-space: normal;
  }
  /* Body nicht mehr um Sidebarbreite verschieben (Overlay-Prinzip) */
  body, body.sb-closed { margin-left: 0 !important; }

  /* Sidebar standardmäßig ausgeblendet, per Toggle einblenden */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.45); }

  /* Abdunkelung hinter offener Sidebar */
  #mobile-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 999;
  }
  #mobile-overlay.active { opacity: 1; pointer-events: auto; }

  /* Hamburger-Button sichtbar */
  #mobile-toggle {
    position: fixed; top: 8px; left: 8px; z-index: 1001;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--accent, #5b7fa6); border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  }
  #mobile-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
}

/* ── Audio-Player auf Mobil ───────────────────────────────── */
@media (max-width: 860px) {
  /* Player kompakter, aber alle Kernbedienelemente sichtbar */
  #bl-audio-player .blp-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  /* Titel/Interpret nicht zu breit, damit Buttons Platz haben */
  .blp-meta { min-width: 0; flex: 1 1 40%; max-width: none; }
  /* Fortschritts-Zeile über volle Breite umbrechen */
  .blp-seek-wrap, .blp-seek { flex: 1 1 100%; order: 5; }
  /* Playlist-Button IMMER sichtbar (auch Hochformat) */
  .blp-playlist-toggle {
    display: inline-flex !important;
    align-items: center;
    order: 4;
  }
  .blp-playlist-toggle span { display: inline !important; }
}

/* ── Playlist-Panel im Hochformat ─────────────────────────── */
@media (max-width: 860px) {
  .blp-panel {
    /* Vollbreites Bottom-Sheet statt schmalem Seitenpanel */
    left: 0; right: 0; width: 100%; max-width: 100%;
    bottom: 64px;
    max-height: 65vh;
    border-radius: 14px 14px 0 0;
    transform: translateY(110%);
    transition: transform .3s ease;
  }
  .blp-panel.open { transform: translateY(0); }
  .blp-panel-list { max-height: calc(65vh - 96px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Sehr schmale Geräte (Hochformat Handy) */
@media (max-width: 480px) {
  #bl-audio-player .blp-bar { padding: 6px 8px; }
  .blp-time { font-size: 10px; }
  .blp-title { font-size: 12px; }
  .blp-artist { font-size: 10px; }
  /* Visualizer aus (Platz), Kernbuttons bleiben */
  .blp-visualizer { display: none !important; }
}