/* iOS Safe Area Support for Capacitor App - Minimal Approach */

/* Only define safe area variables for potential future use */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Minimal fix: Add padding to the app container to push content below status bar */
.capacitor-app {
    padding-top: var(--safe-area-inset-top) !important;
}

.capacitor-app input, .capacitor-app textarea {
    font-size: 16px;
}

/* Keep headers normal - just push the whole app down */
.capacitor-app .panel-page-header,
.capacitor-app .hub-page-header, 
.capacitor-app .feed-header,
.capacitor-app .room-media-header,
.capacitor-app .static-page-header,
.capacitor-app .event-header,
.capacitor-app .chat-header,
.capacitor-app .settings-header,
.capacitor-app .wizard-header {
    /* Keep normal header heights */
    height: 48px !important;
    min-height: 48px !important;
}

/* ==== COMMON CAPACITOR PATTERNS ====
   Add your Capacitor-specific styles below using these patterns:
   
   Basic pattern:
   .capacitor-app .your-element { }
   
   With safe area:
   .capacitor-app .your-element {
       padding-top: var(--safe-area-inset-top);
   }
   
   Mobile + Capacitor:
   @media (max-width: 768px) {
       .capacitor-app .your-element { }
   }
*/

/* Example: Remove margins that don't work well in app */
.capacitor-app .page-container {
    margin: 0;
}

/* Example: Adjust bottom spacing for home indicator */
.capacitor-app .bottom-nav,
.capacitor-app .mobile-nav-bar {
    padding-bottom: var(--safe-area-inset-bottom);
}