/**
 * Mobile Dialog Overrides with Safe Area Support
 * 
 * Overrides for all dialog systems (jQuery UI, custom dialogs) to ensure
 * proper mobile behavior with safe area support for notched devices.
 */

/* ============================================================================
   jQuery UI Dialog - Mobile Bottom Sheet with Safe Area
   ============================================================================ */

@media (max-width: 768px) {
  /* Convert jQuery UI dialogs to bottom sheets on mobile */
  .ui-dialog {
    /* Bottom sheet positioning */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    
    /* Full width */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* Rounded top corners */
    border-radius: 16px 16px 0 0 !important;
    
    /* Max height with safe area support */
    max-height: calc(90vh - var(--safe-bottom, 0px)) !important;
    
    /* Safe area support - extend background into bottom safe area */
    padding-bottom: var(--safe-bottom, 0px) !important;
    
    /* Remove default transform */
    transform: none !important;
  }
  
  /* Add mobile pull indicator to jQuery UI dialogs */
  .ui-dialog .ui-dialog-titlebar::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    z-index: 1;
  }
  
  .ui-dialog .ui-dialog-titlebar {
    padding-top: 24px !important; /* Extra space for pull indicator */
  }
  
  /* Adjust content height for safe area */
  .ui-dialog .ui-dialog-content {
    max-height: calc(90vh - 200px - var(--safe-bottom, 0px)) !important;
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  
  /* Ensure form inputs don't trigger zoom */
  .ui-dialog .ui-dialog-content input,
  .ui-dialog .ui-dialog-content textarea,
  .ui-dialog .ui-dialog-content select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* Stack buttons vertically on mobile */
  .ui-dialog .ui-dialog-buttonpane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  .ui-dialog .ui-dialog-buttonpane button {
    width: 100%;
    margin: 0.25em 0 !important;
  }
  
  /* Overlay backdrop safe area */
  .ui-widget-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================================
   Legacy .dialogue.popup class - Mobile Safe Area
   ============================================================================ */

@media (max-width: 768px) {
  .dialogue.popup,
  .popup {
    /* Bottom sheet positioning */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    
    /* Full width */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* Rounded top corners */
    border-radius: 16px 16px 0 0 !important;
    
    /* Max height with safe area support */
    max-height: calc(90vh - var(--safe-bottom, 0px)) !important;
    
    /* Safe area support */
    padding-bottom: var(--safe-bottom, 0px) !important;
    
    /* Remove transforms */
    transform: none !important;
  }
  
  /* Add pull indicator to legacy dialogs */
  .dialogue.popup::before,
  .popup::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    z-index: 1;
  }
  
  /* Content sizing */
  .dialogue.popup .content,
  .popup .content {
    max-height: calc(90vh - 150px - var(--safe-bottom, 0px)) !important;
    overflow-y: auto;
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Form inputs */
  .dialogue.popup input,
  .dialogue.popup textarea,
  .dialogue.popup select,
  .popup input,
  .popup textarea,
  .popup select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* ============================================================================
   jQuery Confirm Plugin - Mobile Safe Area
   ============================================================================ */

@media (max-width: 768px) {
  .jconfirm {
    /* Ensure backdrop covers full viewport */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  .jconfirm .jconfirm-box {
    /* Bottom sheet positioning */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    
    /* Full width */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* Rounded top corners */
    border-radius: 16px 16px 0 0 !important;
    
    /* Max height with safe area support */
    max-height: calc(90vh - var(--safe-bottom, 0px)) !important;
    
    /* Safe area support */
    padding-bottom: var(--safe-bottom, 0px) !important;
    
    /* Remove transforms */
    transform: none !important;
  }
  
  /* Content sizing */
  .jconfirm .jconfirm-box .content-pane {
    max-height: calc(90vh - 200px - var(--safe-bottom, 0px)) !important;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Form inputs */
  .jconfirm input,
  .jconfirm textarea,
  .jconfirm select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* ============================================================================
   General Mobile Dialog Fixes
   ============================================================================ */

@media (max-width: 768px) {
  /* Ensure all dialog backdrops respect safe area */
  .ui-widget-overlay,
  .cfs-dialog-backdrop,
  .dialog-system-backdrop,
  .jconfirm-bg {
    padding-top: var(--safe-top, 0px);
    padding-bottom: var(--safe-bottom, 0px);
  }
}

/* ============================================================================
   Landscape Mode - Side Safe Areas
   ============================================================================ */

@media (max-width: 926px) and (orientation: landscape) {
  /* Apply horizontal safe areas in landscape */
  .ui-dialog,
  .cfs-dialog-container.mobile,
  .dialog-system-modal,
  .dialogue.popup,
  .popup,
  .jconfirm .jconfirm-box {
    padding-left: var(--safe-left, 0px) !important;
    padding-right: var(--safe-right, 0px) !important;
  }
  
  /* Adjust content width for side insets */
  .ui-dialog .ui-dialog-content,
  .cfs-dialog-content,
  .dialog-system-content,
  .dialogue.popup .content,
  .popup .content {
    padding-left: max(12px, var(--safe-left, 0px)) !important;
    padding-right: max(12px, var(--safe-right, 0px)) !important;
  }
}