/* ==========================================================================
   PWA Header Fixes - Override app-specific styles
   ========================================================================== */

/* PWA standalone mode detection and fixes */
.pwa-mode .header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  border-bottom: 2px solid var(--color-border) !important;
  /* Override any flex properties from app-specific CSS */
  flex-shrink: 0 !important;
  height: 64px !important;
  /* Ensure header is visible */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (display-mode: standalone) {
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    border-bottom: 2px solid var(--color-border) !important;
    /* Override any flex properties from app-specific CSS */
    flex-shrink: 0 !important;
    height: 64px !important;
    /* Ensure header is visible */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

.pwa-mode .main {
  margin-top: 64px !important;
  min-height: calc(100vh - 64px) !important;
  /* Override any flex properties from app-specific CSS */
  flex: initial !important;
  overflow: auto !important;
  display: block !important;
}

@media (display-mode: standalone) {
  .main {
    margin-top: 64px !important;
    min-height: calc(100vh - 64px) !important;
    /* Override any flex properties from app-specific CSS */
    flex: initial !important;
    overflow: auto !important;
    display: block !important;
  }
}

/* Override body styles from app-specific CSS in PWA mode */
.pwa-mode body {
  /* Reset flex properties that might be set by app-specific CSS */
  display: block !important;
  flex-direction: initial !important;
  height: auto !important;
  overflow: visible !important;
  /* Remove any padding that might hide the header */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (display-mode: standalone) {
  body {
    /* Reset flex properties that might be set by app-specific CSS */
    display: block !important;
    flex-direction: initial !important;
    height: auto !important;
    overflow: visible !important;
    /* Remove any padding that might hide the header */
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure PWA header controls work properly */
.pwa-mode .nav-toggle {
  z-index: 10000 !important;
  position: relative !important;
  display: flex !important;
}

.pwa-mode .header-theme-toggle {
  z-index: 10000 !important;
  position: relative !important;
  display: flex !important;
}

.pwa-mode .nav-menu {
  z-index: 10001 !important;
  position: fixed !important;
  top: 72px !important;
}

/* PWA Mobile fixes */
@media (max-width: 767px) {
  .pwa-mode .mobile-header-controls {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
  }
  
  .pwa-mode .header-theme-toggle {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
  }
  
  .pwa-mode .nav-toggle {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* iOS Safari PWA specific fixes */
@supports (-webkit-touch-callout: none) {
  /* In PWA mode, position header below the status bar */
  .pwa-mode .header {
    top: env(safe-area-inset-top) !important;
    height: 64px !important;
    padding-top: 0 !important;
  }
  
  .pwa-mode .main {
    margin-top: calc(64px + env(safe-area-inset-top)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  @media (display-mode: standalone) {
    .header {
      top: env(safe-area-inset-top) !important;
      height: 64px !important;
      padding-top: 0 !important;
    }
    
    .main {
      margin-top: calc(64px + env(safe-area-inset-top)) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}

/* Additional iOS specific fixes for proper body layout */
@supports (-webkit-touch-callout: none) {
  .pwa-mode body,
  @media (display-mode: standalone) {
    body {
      /* Ensure body starts at the very top */
      position: relative !important;
      padding-top: 0 !important;
      margin-top: 0 !important;
      min-height: 100vh !important;
      /* Add padding for safe areas on sides */
      padding-left: env(safe-area-inset-left) !important;
      padding-right: env(safe-area-inset-right) !important;
    }
  }
}