/* safe-area.css - Safe Area Insets for iOS and Android PWA */

/* CSS Variables for safe area with fallbacks */
:root {
    /* Safe area insets - uses env() values from iOS Safari and Android Chrome */
    --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);
    
    /* PWA specific - extra padding for status bar when in standalone mode */
    --pwa-top-padding: max(env(safe-area-inset-top, 0px), 20px);
}

/* Apply safe area to html and body */
html {
    /* Ensure full viewport coverage */
    background-color: var(--bg-primary, #0f172a);
}

body {
    /* Add safe area padding to the body */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* Bottom safe area for home indicator on iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Safe area background - covers the notch/status bar area */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: var(--bg-card, #1e293b);
    z-index: 9999;
    pointer-events: none;
}

/* Header adjustments - ensure header respects safe area */
.header {
    /* Header should account for safe area when fixed/sticky */
    top: env(safe-area-inset-top, 0px) !important;
    padding-left: max(var(--spacing-lg, 16px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--spacing-lg, 16px), env(safe-area-inset-right, 0px));
}

/* For pages without header, add top padding to main content */
.login-container,
.auth-container,
.qr-container,
.display-container {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-lg, 16px));
    padding-left: max(var(--spacing-md, 12px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--spacing-md, 12px), env(safe-area-inset-right, 0px));
}

/* Main layout adjustments */
.main-layout {
    /* Account for safe area in padding-top calculation */
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
}

/* Content area safe area adjustments */
.content-area {
    padding-left: max(var(--spacing-lg, 16px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--spacing-lg, 16px), env(safe-area-inset-right, 0px));
}

/* Bottom navigation safe area (if you have one) */
.bottom-nav,
.footer-nav,
.tab-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fixed bottom elements should account for home indicator */
.fixed-bottom,
.action-bar-bottom {
    bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Modal and popup adjustments */
.modal,
.popup,
.overlay {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal-content {
    margin-top: env(safe-area-inset-top, 0px);
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
}

/* Toast/notification safe area */
.toast,
.notification,
.alert-banner {
    top: calc(env(safe-area-inset-top, 0px) + 16px);
}

/* Fullscreen pages safe area */
.fullscreen-page,
.full-height {
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}

/* PWA Standalone mode specific styles */
@media all and (display-mode: standalone) {
    /* Extra padding in standalone mode for status bar */
    body {
        padding-top: env(safe-area-inset-top, 20px);
    }
    
    body::before {
        height: env(safe-area-inset-top, 20px);
    }
    
    .header {
        top: env(safe-area-inset-top, 20px) !important;
    }
    
    .main-layout {
        padding-top: calc(64px + env(safe-area-inset-top, 20px));
    }
}

/* iOS specific styles */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific adjustments */
    body {
        /* Prevent rubber banding issues */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for iOS notch on landscape */
    @media screen and (orientation: landscape) {
        body {
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
        
        .header {
            padding-left: max(var(--spacing-lg, 16px), env(safe-area-inset-left, 0px));
            padding-right: max(var(--spacing-lg, 16px), env(safe-area-inset-right, 0px));
        }
    }
}

/* Responsive adjustments for safe areas */
@media (max-width: 768px) {
    .main-layout {
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }
    
    .login-container,
    .auth-container {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-md, 12px));
    }
}

/* QR pages specific safe area handling */
.qr-scan-container,
.qr-display-container {
    padding-top: env(safe-area-inset-top, 0px);
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Admin panel safe area */
.admin-container,
.admin-panel {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-lg, 16px));
}

/* Sidebar navigation safe area */
.sidebar,
.nav-sidebar {
    top: env(safe-area-inset-top, 0px);
    height: calc(100vh - env(safe-area-inset-top, 0px));
    padding-top: var(--spacing-md, 12px);
}

/* Scrollable content with safe area */
.scroll-container {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Pull to refresh safe area */
.pull-to-refresh {
    top: env(safe-area-inset-top, 0px);
}