/**
 * 6-IOS-OVERRIDES.CSS
 * 
 * All iOS safe area fixes for devices with notches (iPhone X+, iPad Pro, etc.)
 * Ensures proper spacing around notch, status bar, and home indicator.
 * 
 * REVISED v1.2: Fixed main-content padding and panel-content padding issues on iPad
 * 
 * This file wraps ALL iOS-specific rules in @supports to:
 * 1. Keep iOS code separate and maintainable
 * 2. Automatically handle devices without notches (env() returns 0px)
 * 3. Reduce selector complexity
 * 
 * Load order: After all other CSS files in index.html
 * 
 * @version 1.2.0
 * @date November 5, 2025
 */

/* ============================================
   iOS SAFE AREA SUPPORT
   Only applies to devices that support env(safe-area-inset-*)
   ============================================ */

@supports (padding: env(safe-area-inset-top)) {
    
    /* ============================================
       HEADER - Safe Area Support (All Screens)
       ============================================ */
    
    /**
     * Header must:
     * 1. Start below the notch/status bar
     * 2. Extend its height to include safe area
     * 3. Remain fixed (doesn't scroll)
     */
    
    .unified-header-bar {
        padding-top: env(safe-area-inset-top) !important;
        height: calc(var(--header-height) + env(safe-area-inset-top)) !important;
    }
    
    /* ============================================
       MAIN CONTENT - Capacitor Apps Only
       ============================================ */
    
    /**
     * In Capacitor apps (not browsers), adjust main-content padding
     * to account for taller header with safe area.
     * 
     * Desktop browsers: No .capacitor-app class → no override → no jumping
     * iPad/iPhone Capacitor: Has .capacitor-app class → padding adjusted
     * 
     * The header is: calc(40px + env(safe-area-inset-top))
     * So content padding must match to avoid overlap.
     */
    
    .capacitor-app .main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top)) !important;
    }
    
    /* Mobile: Full scroll architecture fix (phones only) */
    @media (max-width: 768px) {
        html, body {
            position: fixed;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        
        .capacitor-app .main-content {
            position: fixed !important;
            top: calc(var(--header-height) + env(safe-area-inset-top)) !important;
            left: 0;
            right: 0;
            bottom: 0;
            padding-top: 0 !important; /* Remove padding - using 'top' instead */
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            min-height: 0; /* Added to allow scrolling all the way down on mobile only */
        }
    }
    
    /* ============================================
       SIDEBAR - Safe Area Support (All Screens)
       ============================================ */
    
    /**
     * MOBILE (<769px):
     * - Sidebar below header
     * - Adjusts for safe area in height
     * 
     * DESKTOP (≥769px):
     * - Sidebar extends to top (provides header background)
     * - Border starts below safe area (not into notch)
     */
    
    /* Mobile: Sidebar below header */
    .sidebar {
        top: calc(var(--header-height) + env(safe-area-inset-top)) !important;
        height: calc(100vh - var(--header-height) - env(safe-area-inset-top)) !important;
        padding-top: var(--spacing-md) !important;
        box-sizing: border-box !important;
    }
    
    /* Desktop: Sidebar extends into safe area */
    @media (min-width: 769px) {
        .sidebar {
            top: 0 !important;
            height: 100vh !important;
            padding-top: calc(4rem + env(safe-area-inset-top)) !important;
            border-right: none !important; /* Remove default border */
        }
        
        /* Create border that starts below safe area */
        .sidebar::after {
            content: '';
            position: absolute;
            top: env(safe-area-inset-top);
            right: 0;
            bottom: 0;
            width: 1px;
            background: var(--border);
        }
    }
    
    /* ============================================
       PANELS - Safe Area Support (All Screens)
       ============================================ */
    
    /**
     * Panels slide in from right using transform: translateX(100%)
     * 
     * CRITICAL: Don't override left/right/width positioning!
     * This breaks the transform hiding mechanism.
     * 
     * Instead: Adjust top/height only.
     */
    
    .panel {
        top: calc(var(--header-height) + env(safe-area-inset-top)) !important;
        height: calc(100vh - var(--header-height) - env(safe-area-inset-top)) !important;
    }
    
    /**
     * Panel content: Add safe area padding ONLY on mobile (phones)
     * Desktop and tablets don't need this - original padding is fine
     */
    @media (max-width: 768px) {
        .panel-content {
            padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom)) !important;
            padding-left: calc(var(--spacing-lg) + env(safe-area-inset-left)) !important;
            padding-right: calc(var(--spacing-lg) + env(safe-area-inset-right)) !important;
        }
    }
    
    /**
     * CRITICAL FIX: Empty panel-content divs in sidebar panels
     * 
     * Sidebar panels have this structure:
     * .panel
     *   .panel-header
     *   .panel-content (EMPTY - but has 16px padding)
     *   .charts-page-view (SIBLING, not child)
     * 
     * The empty .panel-content with padding creates dead space.
     * Remove all padding from these empty divs.
     */
    .charts-panel .panel-content,
    .stats-panel .panel-content,
    .account-panel .panel-content,
    .logs-panel .panel-content {
        padding: 0 !important;
    }
    
    /* ============================================
       PANEL BACKDROPS - Full Screen (All Screens)
       ============================================ */
    
    /**
     * Backdrops should cover entire screen INCLUDING safe areas.
     * This creates proper darkening effect behind panels.
     */
    
    .panel-backdrop {
        top: 0 !important; /* Extends into safe area */
        bottom: 0 !important;
    }
    
    .sidebar-backdrop {
        top: 0 !important; /* Extends into safe area */
        bottom: 0 !important;
    }
    
    /* ============================================
       TOASTS / ALERTS - Safe Area Support (All Screens)
       ============================================ */
    
    /**
     * Toasts positioned at top-right.
     * Must appear below notch/status bar.
     */
    
    .toast-container {
        top: calc(var(--spacing-lg) + env(safe-area-inset-top)) !important;
        right: calc(var(--spacing-lg) + env(safe-area-inset-right)) !important;
    }
    
    /* Mobile: Account for left safe area too */
    @media (max-width: 768px) {
        .toast-container {
            left: calc(var(--spacing-lg) + env(safe-area-inset-left)) !important;
        }
    }
    
} /* End @supports */

/* ============================================
   FALLBACK FOR NON-SUPPORTED DEVICES
   ============================================ */

/**
 * Devices without env() support will ignore all rules above.
 * They will use the default styles from other CSS files.
 * No fallback needed - default styles work fine.
 */

/* ============================================
   DEBUG HELPERS (Comment out in production)
   ============================================ */

/**
 * Uncomment to visualize safe areas during development:
 */

/*
@supports (padding: env(safe-area-inset-top)) {
    body::before {
        content: 'Safe Area: ' env(safe-area-inset-top) ' / ' env(safe-area-inset-right) ' / ' env(safe-area-inset-bottom) ' / ' env(safe-area-inset-left);
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 0, 0, 0.8);
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 99999;
        pointer-events: none;
    }
}
*/