/* iOS Dark Mode Specific Fixes */

/* 
  This file specifically targets iOS devices to ensure the notch area
  and status bar correctly respond to dark mode changes 
*/

/* Base variables from your theme */
:root {
  --light-background: #FFF1E5;
  --dark-background: #1A1721;
}

/* iOS specific overrides */
@supports (-webkit-touch-callout: none) {
  /* Status bar area background in light mode */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0);
    background-color: var(--light-background);
    z-index: 9999;
  }
  
  /* Status bar area background in dark mode */
  body.dark-theme::before {
    background-color: var(--dark-background);
  }
  
  /* Handle theme switching via classes */
  html.dark-mode body::before {
    background-color: var(--dark-background);
  }
  
  /* Style for standalone PWA mode */
  @media (display-mode: standalone) {
    /* Cover the entire status bar in standalone mode */
    #status-bar-extender {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top, 44px);
      background-color: var(--light-background);
      z-index: 9998;
    }
    
    /* Dark mode override for standalone mode */
    html.dark-mode #status-bar-extender {
      background-color: var(--dark-background);
    }
    
    /* Force the correct background color for dark mode */
    body.ios-device.dark-theme #status-bar-extender,
    html.dark-mode body.ios-device #status-bar-extender {
      background-color: var(--dark-background) !important;
    }
  }
  
  /* Handle edge case for specific iPhone models with notches */
  @media screen and (max-width: 896px) {
    #status-bar-extender {
      height: env(safe-area-inset-top, 44px);
    }
  }
  
  /* Handle landscape orientation - where notch is on the side */
  @media screen and (orientation: landscape) {
    body::before {
      /* In landscape, don't add extra top padding */
      height: 0 !important;
    }
    
    #status-bar-extender {
      /* In landscape, status bar doesn't need extra height */
      height: 0 !important;
      display: none;
    }
    
    /* Add padding for left/right safe areas in landscape */
    body {
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
      padding-top: 0 !important;
    }
    
    #root {
      /* Ensure root element respects landscape safe areas */
      padding-left: env(safe-area-inset-left, 0) !important;
      padding-right: env(safe-area-inset-right, 0) !important;
      padding-top: 0 !important;
    }
  }
}