/* ═══════════════════════════════════════════════════
   wa-landscape-scroll.css v1.1 (24.07.2026)
   v1.1: FIX "Erste Schritte"-Card (#gl-obcl-card) nicht scrollbar.
         Die Card liegt als GESCHWISTER von .wa-items direkt in
         .wa-list (flex-shrink:0). In Landscape frass sie den Platz,
         war aber selbst nie scrollbar. Loesung: in Landscape wird
         .wa-list als Ganzes scrollbar (Card + Items scrollen mit),
         .wa-items bekommt overflow:visible + height:auto.

   v1.0: Handy im Querformat -> Viewport-Hoehe klein, Breite > 768px
         => Desktop-Layout greift. Icon-Rail (.wa-rail) und Liste
         liefen ueber ohne Scroll (.wa-shell{height:100vh;
         overflow:hidden} + .wa-rail justify-content:space-between).

   Nur aktiv bei orientation:landscape + max-height 600px.
   Desktop/Portrait bleiben unveraendert.
   ═══════════════════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 600px) {

  /* ─── 1. Linke Icon-Rail scrollbar ─────────────── */
  .wa-shell .wa-rail {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 8px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
  .wa-shell .wa-rail::-webkit-scrollbar { width: 4px; }
  .wa-shell .wa-rail::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 2px;
  }
  .wa-shell .wa-rail-bot { margin-top: auto; }
  .wa-shell .wa-rb {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }

  /* ─── 2. Community-Spalte: KOMPLETT scrollbar ───
     Header/Suche/Filter bleiben sticky oben, alles darunter
     (Spaces-Strip, "Erste Schritte"-Card, Community-Items)
     scrollt gemeinsam. Loest das Problem, dass die Card als
     flex-shrink:0-Geschwister nie erreichbar war.              */
  .wa-shell .wa-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0 !important;
    scrollbar-width: thin;
  }
  .wa-shell .wa-list::-webkit-scrollbar { width: 4px; }
  .wa-shell .wa-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 2px;
  }

  /* Items kein eigener Scroll-Container mehr -> waechst mit */
  .wa-shell .wa-items {
    flex: 0 0 auto !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }

  /* Erste-Schritte-Card scrollt mit */
  .wa-shell #gl-obcl-card { flex-shrink: 0 !important; }

  /* Header/Suche/Filter sticky, damit Suche erreichbar bleibt */
  .wa-shell .wa-lh,
  .wa-shell .wa-search,
  .wa-shell .wa-filters {
    position: sticky;
    z-index: 5;
    background: inherit;
    flex-shrink: 0;
  }
  .wa-shell .wa-lh      { top: 0; padding: 8px 14px 4px !important; }
  .wa-shell .wa-search  { top: 38px; padding: 0 10px 6px !important; }
  .wa-shell .wa-filters { top: 78px; padding: 0 10px 6px !important; }
  body:not(.dark) .wa-shell .wa-lh,
  body:not(.dark) .wa-shell .wa-search,
  body:not(.dark) .wa-shell .wa-filters { background: #fff; }

  .wa-shell .wa-lh h2 { font-size: 17px !important; }
  .wa-shell .wa-it { padding: 9px 14px !important; }
  .wa-shell .wa-it-av,
  .wa-shell .wa-com-av { width: 40px !important; height: 40px !important; }

  /* ─── 3. Content-Panel (Feed) sicher scrollbar ── */
  .wa-shell .wa-ct { min-height: 0 !important; }
  .wa-shell .wa-ct-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }

  /* ─── 4. Admin-Sidebar (SPA-Shell) scrollbar ──── */
  html body .sidebar {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  html body .sidebar-nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }
}

/* Sehr flache Displays (Handy quer mit Browser-Leiste) */
@media (orientation: landscape) and (max-height: 450px) {
  .wa-shell .wa-rail { padding: 6px 0 !important; }
  .wa-shell .wa-rb { width: 36px !important; height: 36px !important; }
  .wa-shell .wa-rb svg { width: 18px; height: 18px; }
  .wa-shell .wa-it-av,
  .wa-shell .wa-com-av { width: 36px !important; height: 36px !important; }
  /* Sticky-Offsets an kompaktere Header anpassen */
  .wa-shell .wa-search  { top: 34px; }
  .wa-shell .wa-filters { top: 72px; }
}