/* ============================================
   ÖVNINGAR - MODAL - MOBIL
   ============================================ */

@media (max-width: 768px) {

  /* 1. Yttre modal: ingen scroll, inga störningar */
  #exercise-detail-modal {
    overflow: hidden !important;
  }

  #exercise-detail-modal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  /* 2. modal-content: täcker HELA skärmen via fixed */
  #exercise-detail-modal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  /* 3. Header, stats och footer är fasta */
  #exercise-detail-modal .modal-header-gradient,
  #exercise-detail-modal .modal-stats-bar,
  #exercise-detail-modal .modal-footer {
    flex-shrink: 0 !important;
  }

  /* 4. Body scrollar — flex: 1 1 0 + min-height: 0 är kritiskt */
  #exercise-detail-modal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ======================================
     HEADER: Kompakt — bara text, ingen bild
     ====================================== */

  /* Dölj bild/emoji-kollaget helt */
  #exercise-detail-modal .modal-images-collage {
    display: none !important;
  }

  /* Header: minimal padding, inga borders, override site.css min-height: 180px */
  #exercise-detail-modal .modal-header-gradient {
    padding: 6px 44px 6px 12px !important;
    min-height: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Stats-bar: inga yttre borders, men varje stat-box har border */
  #exercise-detail-modal .modal-stats-bar {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }


  /* Rubrik: kompakt */
  #exercise-detail-modal .modal-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Meta-taggar: visa men kompakt */
  #exercise-detail-modal .modal-meta-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }

  #exercise-detail-modal .meta-tag {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  /* Stängknapp: tight mot hörnet */
  #exercise-detail-modal .modal-close-btn {
    top: 4px !important;
    right: 6px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }

  /* ======================================
     STATS-BAR: Ikon + värde, inget label
     ====================================== */

  #exercise-detail-modal .modal-stats-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  #exercise-detail-modal .modal-stats-bar::-webkit-scrollbar {
    display: none !important;
  }

  #exercise-detail-modal .modal-stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(150,150,150,0.5) !important;
    border-radius: 8px !important;
  }

  #exercise-detail-modal .modal-stat i {
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Värde */
  #exercise-detail-modal .modal-stat-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Dölj label — bara ikon + värde */
  #exercise-detail-modal .modal-stat-label {
    display: none !important;
  }

  /* ======================================
     FOOTER: Knappar i en rad
     ====================================== */

  #exercise-detail-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* me-auto på delete-knappen ersätts med flex-layout */
  #exercise-detail-modal .modal-footer .me-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* d-flex gap-2 wrapper inuti footer */
  #exercise-detail-modal .modal-footer .d-flex {
    gap: 8px !important;
  }

  /* Dölj stäng-knappen — användaren stänger via swipe/back */
  #exercise-detail-modal [data-bs-dismiss="modal"].btn.btn-secondary {
    display: none !important;
  }

  /* Ikoner-knappar: bara ikon, kvadratiska */
  #exercise-detail-modal #detail-delete-exercise-btn,
  #exercise-detail-modal #edit-exercise-modal-btn,
  #exercise-detail-modal #copy-exercise-btn,
  #exercise-detail-modal #share-with-club-btn,
  #exercise-detail-modal #modal-share-link-btn {
    font-size: 0 !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  #exercise-detail-modal #detail-delete-exercise-btn .bi,
  #exercise-detail-modal #edit-exercise-modal-btn .bi,
  #exercise-detail-modal #copy-exercise-btn .bi,
  #exercise-detail-modal #share-with-club-btn .bi,
  #exercise-detail-modal #modal-share-link-btn .bi {
    font-size: 17px !important;
  }

  /* "Lägg till i pass": behåller text, tar resterande bredd */
  #exercise-detail-modal #add-to-session-modal {
    flex: 1 !important;
    height: 42px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
  }

  /* ======================================
     CREATE-EXERCISE-MODAL: Fullskärm + scroll
     ====================================== */

  #create-exercise-modal {
    padding: 0 !important;
  }

  #create-exercise-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
  }

  #create-exercise-modal .modal-content {
    position: fixed !important;
    inset: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
    height: 100% !important;
  }

  /* form wraps modal-body + modal-footer, needs flex column */
  #create-exercise-modal form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #create-exercise-modal .modal-header,
  #create-exercise-modal .modal-footer {
    flex-shrink: 0 !important;
  }

  #create-exercise-modal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #create-exercise-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  #create-exercise-modal .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  #create-exercise-modal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: #00D9A3 !important;
    border-color: #00D9A3 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  /* EDIT-EXERCISE-MODAL: Styles moved to redigera-ovning.css */

  /* Förstora hjärt/like-knappen för enklare touch */
  .like-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .like-btn .bi {
    font-size: 22px !important;
  }

  /* Förstora favorit-badge */
  .favorite-badge {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ======================================
     AGE RANGE SLIDER — MOBIL FIX
     ====================================== */

  .age-range-track-wrapper {
    height: 36px !important;
    margin: 4px 0 !important;
  }

  .age-range-track {
    height: 8px !important;
  }

  .age-range-input::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
    border-width: 3px !important;
  }

  .age-range-input::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
    border-width: 3px !important;
  }

  .age-range-ticks {
    font-size: 10px !important;
    padding: 4px 0 !important;
  }

  .age-range-ticks span {
    min-width: 0 !important;
  }

  /* Likes modal — fullscreen on mobile */
  #likes-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
  }
  #likes-modal .modal-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
  .likes-modal-item {
    padding: 12px 0 !important;
  }
  .likes-modal-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
  }

  /* Större like-knapp på mobil för enklare tryck */
  .like-btn {
    padding: 8px 10px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .like-btn i {
    font-size: 22px !important;
  }
}