/* ============================================
   PLANERING SÄSONG - MOBIL
   ============================================ */

@media (max-width: 768px) {

  /* Generell fullskärm + scroll för alla planerings-modaler */
  /* #ai-fill-modal styled in ai-fyll-sasong.css */
  #week-detail-modal,
  #create-plan-modal,
  #edit-plan-modal,
  #edit-week-modal,
  #session-picker-modal,
  #copy-week-modal,
  #ai-fill-preview-modal {
    overflow: hidden !important;
  }

  #week-detail-modal .modal-dialog,
  #create-plan-modal .modal-dialog,
  #edit-plan-modal .modal-dialog,
  #edit-week-modal .modal-dialog,
  #session-picker-modal .modal-dialog,
  #copy-week-modal .modal-dialog,
  #ai-fill-preview-modal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  #week-detail-modal .modal-content,
  #create-plan-modal .modal-content,
  #edit-plan-modal .modal-content,
  #edit-week-modal .modal-content,
  #session-picker-modal .modal-content,
  #copy-week-modal .modal-content,
  #ai-fill-preview-modal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* På iOS Safari + Android Chrome räknar bottom:0 mot layout-viewporten (inkl adressfältet)
       så modalens nedre del hamnar under synlig area och footern blir osynlig. dvh (dynamic
       viewport height) sätter höjden till FAKTISK synlig area och uppdateras live när
       browser chrome visas/döljs. Fallback för äldre browsers: 100vh. */
    height: 100vh !important;
    height: 100dvh !important;
    bottom: auto !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  /* iOS Safari-specifik fix: URL-baren i botten överlappar fortfarande med 100dvh i vissa fall.
     Använd 100svh (small viewport height) som ALLTID antar att URL-baren är synlig — då hamnar
     footern aldrig under den. @supports (-webkit-touch-callout) träffar WebKit på iOS. */
  @supports (-webkit-touch-callout: none) {
    #week-detail-modal .modal-content,
    #create-plan-modal .modal-content,
    #edit-plan-modal .modal-content,
    #edit-week-modal .modal-content,
    #session-picker-modal .modal-content,
    #copy-week-modal .modal-content,
    #ai-fill-preview-modal .modal-content {
      height: 100svh !important;
    }
  }

  #week-detail-modal .modal-header,
  #week-detail-modal .modal-footer,
  #create-plan-modal .modal-header,
  #create-plan-modal .modal-footer,
  #edit-plan-modal .modal-header,
  #edit-plan-modal .modal-footer,
  #edit-week-modal .modal-header,
  #edit-week-modal .modal-footer,
  #session-picker-modal .modal-header,
  #session-picker-modal .modal-footer,
  #copy-week-modal .modal-header,
  #copy-week-modal .modal-footer,
  #ai-fill-preview-modal .modal-header,
  #ai-fill-preview-modal .modal-footer {
    flex-shrink: 0 !important;
  }

  #week-detail-modal .modal-body,
  #create-plan-modal .modal-body,
  #edit-plan-modal .modal-body,
  #edit-week-modal .modal-body,
  #session-picker-modal .modal-body,
  #copy-week-modal .modal-body,
  #ai-fill-preview-modal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #week-detail-modal .modal-footer,
  #create-plan-modal .modal-footer,
  #edit-plan-modal .modal-footer,
  #edit-week-modal .modal-footer,
  #session-picker-modal .modal-footer,
  #copy-week-modal .modal-footer,
  #ai-fill-preview-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* week-detail-modal: kompakta knappar i headern, alla synliga */
  #week-detail-modal .modal-header {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #week-detail-modal .modal-header > div:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #week-detail-modal .modal-header .d-flex {
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  #week-detail-modal #week-modal-pdf-btn,
  #week-detail-modal #week-modal-copy-btn,
  #week-detail-modal #week-modal-edit-btn {
    padding: 4px 8px !important;
    font-size: 13px !important;
  }

  #week-detail-modal .modal-footer .btn-primary,
  #create-plan-modal .modal-footer .btn-primary,
  #edit-plan-modal .modal-footer .btn-primary,
  #edit-week-modal .modal-footer .btn-primary,
  #session-picker-modal .modal-footer .btn-primary,
  #copy-week-modal .modal-footer .btn-primary,
  #ai-fill-preview-modal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }
}