/* iOS PWA vs Browser fixes */
@supports (-webkit-touch-callout: none) {
    /* Fixes for standalone mode (added to home screen) */
    @media all and (display-mode: standalone) {
        /* Main navbar in PWA mode */
        .navbar {
            padding-top: calc(env(safe-area-inset-top) + 0.5rem) !important;
            height: calc(env(safe-area-inset-top) + 60px) !important;
            background-color: var(--navbar-primary) !important;
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: 0 !important;
            z-index: 9999 !important; /* Highest z-index */
        }
        
        /* Ensure proper dropdown positioning */
        .navbar .dropdown {
            position: relative !important;
            padding: 7px !important;
        
    
            
        }

        /* Navigation items in PWA mode */
        .navbar .nav-link,
        .navbar .navbar-brand,
        .navbar .notification-bell {
            color: white !important;

        
        }
        
        /* PWA dropdown menu */
        .navbar .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            right: 0 !important;
            left: auto !important;
            width: 280px !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 2px solid #ff0000 !important;
            border-radius: 12px !important;
            box-shadow: 0 8px 24px rgba(255, 0, 0, 0.15) !important;
            z-index: 10000 !important; /* Highest z-index for dropdown */
            padding: 0.75rem !important;
            margin-top: 0.5rem !important;
            max-height: calc(100vh - env(safe-area-inset-top) - 80px) !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
        }
        
        /* Body padding */
        body {
            padding-top: calc(env(safe-area-inset-top) + 60px) !important;
        }
    }

    /* Fixes for browser mode */
    @media not all and (display-mode: standalone) {
        .navbar {
            padding-top: 0.5rem !important;
            height: 60px !important;
        }
        
        body {
            padding-top: 60px !important;
        }
    }

    /* Common styles for both modes */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        transition: padding-top 0.3s ease !important;
    }

    /* Dropdown items styling */
    .navbar .dropdown-item {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 8px !important;
        color: #333 !important;
        transition: all 0.2s ease !important;
    }

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:active {
        background-color: rgba(255, 0, 0, 0.1) !important;
        color: #ff0000 !important;
    }

    /* Make sure dropdown is clickable */
    .navbar *,
    .navbar .dropdown-menu,
    .navbar .dropdown-item {
        pointer-events: auto !important;
    }
}