/* Mobile Anpassungen */

/* ---------- Mobile Fix: kein horizontales Wackeln, robuster Sticky-Header ---------- */

/* 1. Globales horizontales Ausbrechen stoppen ohne position:sticky zu brechen */
html {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
  body {
    overflow-x: visible;
  }
}

/* Garantiert absolut zuverlässiges Festkleben des Headers */
header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

@media (max-width: 768px) {
  /* 2. Header sauber in 3 kompakte Zeilen aufteilen */
  .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Zeile 1: Logo & Media-Toggle links, Buttons rechts */
  .logo-wrap {
    order: 1 !important;
  }
  .logo {
    font-size: 24px !important;
  }
  .header-logo-img {
    width: 26px !important;
    height: 26px !important;
  }
  .media-toggle {
    order: 2 !important;
    padding: 2px !important;
  }
  .media-btn {
    font-size: 11.5px !important;
    padding: 4px 8px !important;
  }
  .settings-wrap,
  #rouletteBtn,
  #profileBtn {
    order: 3 !important;
  }
  #rouletteBtn {
    margin-left: auto !important;
  }

  /* Zeile 2: Suchleiste über die volle mobile Breite */
  .search-wrap {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 2px 0 0 !important;
  }
  .search-wrap input[type="text"] {
    font-size: 13px !important;
    padding: 8px 36px 8px 12px !important;
    height: 36px !important;
  }

  /* Zeile 3: Tabs horizontal wischbar (ohne sichtbaren Scrollbalken) */
  .tabs {
    order: 5 !important;
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px !important;
    gap: 3px !important;
    margin: 2px 0 0 !important;
  }
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tab {
    font-size: 12px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 3. Hauptbereich & Grid-Karten verkleinern */
  main {
    padding: 12px 10px 60px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
  }
  .show-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
  }
  .badge-row {
    height: 18px !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    gap: 3px !important;
  }
  .badge-row .badge {
    font-size: 9.5px !important;
    padding: 1px 4px !important;
    max-width: 50px !important;
  }
  .add-button {
    font-size: 10px !important;
    padding: 6px 2px !important;
  }
  .progress-text {
    font-size: 10px !important;
  }

  /* 4. Bento-Dashboard kompakt (2 Spalten statt riesig) */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .dashboard-card {
    padding: 10px 12px !important;
  }
  .dash-value {
    font-size: 24px !important;
  }
  .dash-label, .dash-sub {
    font-size: 10px !important;
  }

  /* 5. Detailansicht (Serien & Filme) auf Handy-Größe anpassen */
  .detail-head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  .detail-poster {
    width: 130px !important;
    min-width: 130px !important;
    height: 195px !important;
  }
  .detail-title {
    font-size: 32px !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  .detail-title-row {
    justify-content: center !important;
    gap: 8px !important;
  }
  .favorite-star-btn {
    font-size: 30px !important;
  }
  .detail-badges, .detail-stats {
    justify-content: center !important;
    gap: 8px !important;
  }
  .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .detail-actions select,
  .detail-actions button {
    width: 100% !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
    min-height: 36px !important;
  }

  /* 6. Filter & In-Tab-Suche untereinander statt nebeneinander */
  .toolbar-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .toolbar-actions-group {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .local-search-box {
    flex: 1 !important;
    max-width: 160px !important;
  }

  /* 7. Profil & All-Time-Favoriten */
  .profile-header-card {
    padding: 16px !important;
    text-align: center !important;
  }
  .profile-name-row {
    justify-content: center !important;
  }
  .profile-name {
    font-size: 28px !important;
  }
  .pinned-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Hero Widgets Mobile */
  .tonight-hero-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .tonight-hero-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 420px) {
  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .detail-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- ROULETTE MODAL MOBILE FIX ---------- */
@media (max-width: 768px) {
  .roulette-card {
    padding: 16px !important;
    width: 92% !important;
    max-width: 400px !important;
  }

  .roulette-controls {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .roulette-stage {
    min-height: 200px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .roulette-item-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roulette-poster {
    width: 85px !important;
    height: 128px !important;
  }

  .roulette-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .roulette-item-title {
    font-size: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .roulette-info .badge-row {
    justify-content: center !important;
    width: 100% !important;
    margin: 2px 0 !important;
  }

  .roulette-view-btn {
    margin: 6px auto 0 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    width: auto !important;
  }

  .roulette-spin-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

/* ---------- TOOLBAR & SUCHE MOBILE FIX ---------- */
@media (max-width: 768px) {
  .toolbar-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .filter-groups-row {
    width: 100% !important;
    min-width: 0 !important;
  }

  .toolbar-actions-group {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }

  .local-search-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .local-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    height: 36px !important;
  }

  .sort-bar {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .sort-bar select.lang-select {
    flex: 1 !important;
    height: 34px !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
  }
}