/* ============================================
   APP DETECTION STYLES v1.0
   ============================================
   Responsive styles based on:
   - Display Mode (browser, standalone, twa)
   - Operating System (iOS, Android, Windows, macOS, Linux)
   - Device Type (Mobile, Tablet, Desktop)
   - Orientation (portrait, landscape)
   - Touch Support
   ============================================ */

/* ============================================
   DISPLAY MODE SPECIFIC STYLES
   ============================================ */

/* === STANDALONE / PWA MODE === */
body.mode-standalone {
    /* Add safe areas for notch/home indicator */
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
}

/* Hide browser-only elements in standalone mode */
body.mode-standalone .browser-only,
body.mode-standalone .web-only {
    display: none !important;
}

/* Show app-only elements in standalone mode */
body.mode-standalone .app-only,
body.mode-standalone .pwa-only {
    display: block !important;
}

/* Adjust header in standalone mode */
body.mode-standalone .top-nav {
    padding-top: calc(16px + env(safe-area-inset-top, 0));
}

/* === BROWSER MODE === */
body.mode-browser {
    /* Hide app-only elements in browser mode */
}

body.mode-browser .app-only,
body.mode-browser .pwa-only,
body.mode-browser .standalone-only {
    display: none !important;
}

/* Show browser-only elements */
body.mode-browser .browser-only,
body.mode-browser .web-only {
    display: block !important;
}

/* === TWA MODE === */
body.mode-twa {
    /* TWA specific styles */
    padding: 0; /* TWA handles safe areas */
}

body.mode-twa .browser-only {
    display: none !important;
}

body.mode-twa .twa-only {
    display: block !important;
}

/* ============================================
   OPERATING SYSTEM SPECIFIC STYLES
   ============================================ */

/* === iOS === */
body.os-ios {
    /* iOS Safari specifics */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* iOS safe area handling */
body.os-ios.mode-standalone .top-nav,
body.os-ios.mode-standalone header {
    padding-top: max(16px, env(safe-area-inset-top));
}

body.os-ios.mode-standalone .main-content,
body.os-ios.mode-standalone main {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* iOS bottom navigation (if you have one) */
body.os-ios.mode-standalone .bottom-nav,
body.os-ios.mode-standalone footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Hide iOS-specific install prompts when in standalone */
body.os-ios.mode-standalone .ios-install-prompt {
    display: none !important;
}

/* Disable pull-to-refresh in iOS PWA */
body.os-ios.mode-standalone {
    overscroll-behavior-y: contain;
}

/* === Android === */
body.os-android {
    /* Android specific styles */
}

/* Hide Android install prompts when in standalone/TWA */
body.os-android.mode-standalone .android-install-prompt,
body.os-android.mode-twa .android-install-prompt {
    display: none !important;
}

/* === Windows === */
body.os-windows {
    /* Windows specific styles */
    font-family: 'Segoe UI', 'Inter', sans-serif;
}

/* === macOS === */
body.os-macos {
    /* macOS specific styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

/* === Linux === */
body.os-linux {
    /* Linux specific styles */
}

/* ============================================
   DEVICE TYPE SPECIFIC STYLES
   ============================================ */

/* === MOBILE === */
body.device-mobile {
    /* Mobile specific optimizations */
}

/* Hide desktop-only elements on mobile */
body.device-mobile .desktop-only {
    display: none !important;
}

/* Show mobile-only elements */
body.device-mobile .mobile-only {
    display: block !important;
}

/* Larger touch targets on mobile */
body.device-mobile button,
body.device-mobile a,
body.device-mobile .clickable {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile navigation adjustments */
body.device-mobile .top-nav {
    height: auto;
    min-height: 56px;
}

/* Mobile content padding */
body.device-mobile .main-content {
    padding: 16px;
}

/* === TABLET === */
body.device-tablet {
    /* Tablet specific styles */
}

body.device-tablet .desktop-only {
    display: none !important;
}

body.device-tablet .tablet-only {
    display: block !important;
}

/* === DESKTOP === */
body.device-desktop {
    /* Desktop specific styles */
}

/* Hide mobile/tablet only elements on desktop */
body.device-desktop .mobile-only,
body.device-desktop .tablet-only {
    display: none !important;
}

/* Show desktop-only elements */
body.device-desktop .desktop-only {
    display: block !important;
}

/* Desktop hover states */
body.device-desktop .hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ORIENTATION SPECIFIC STYLES
   ============================================ */

/* === PORTRAIT === */
body.orientation-portrait-primary,
body.orientation-portrait-secondary {
    /* Portrait specific styles */
}

body[class*="orientation-portrait"] .landscape-only {
    display: none !important;
}

body[class*="orientation-portrait"] .portrait-only {
    display: block !important;
}

/* === LANDSCAPE === */
body.orientation-landscape-primary,
body.orientation-landscape-secondary {
    /* Landscape specific styles */
}

body[class*="orientation-landscape"] .portrait-only {
    display: none !important;
}

body[class*="orientation-landscape"] .landscape-only {
    display: block !important;
}

/* Landscape mobile optimizations */
body.device-mobile[class*="orientation-landscape"] .top-nav {
    height: 48px;
    min-height: 48px;
}

body.device-mobile[class*="orientation-landscape"] .sidebar {
    width: 200px;
}

/* ============================================
   TOUCH SUPPORT STYLES
   ============================================ */

/* === TOUCH ENABLED === */
body.touch-enabled {
    /* Disable hover effects on touch devices */
}

body.touch-enabled *:hover {
    /* Override hover states that might be sticky on touch */
}

/* Larger touch targets */
body.touch-enabled button,
body.touch-enabled a.button,
body.touch-enabled .clickable {
    min-height: 44px;
    padding: 12px 20px;
}

/* === NO TOUCH (Mouse/Trackpad) === */
body.no-touch {
    /* Enable hover effects */
}

body.no-touch .hover-effect:hover {
    transition: all 0.2s ease;
}

/* Scrollbar styling for non-touch devices */
body.no-touch ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.no-touch ::-webkit-scrollbar-track {
    background: rgba(136, 146, 184, 0.1);
    border-radius: 10px;
}

body.no-touch ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6B46C1, #4A90E2);
    border-radius: 10px;
}

body.no-touch ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #7B56D1, #5AA0F2);
}

/* ============================================
   COMBINED DETECTION STYLES
   ============================================ */

/* iOS Standalone Mobile Portrait */
body.os-ios.mode-standalone.device-mobile.orientation-portrait-primary {
    /* Specific handling for iOS PWA on mobile in portrait */
}

/* Android TWA Mobile */
body.os-android.mode-twa.device-mobile {
    /* Specific handling for Android TWA on mobile */
}

/* Desktop Browser */
body.device-desktop.mode-browser {
    /* Desktop browser specific styles */
}

/* Mobile Browser (not installed) */
body.device-mobile.mode-browser {
    /* Show install prompts */
}

body.device-mobile.mode-browser .install-prompt {
    display: flex !important;
}

/* ============================================
   BROWSER SPECIFIC STYLES
   ============================================ */

/* Safari */
body.browser-safari {
    /* Safari specific fixes */
    -webkit-text-size-adjust: 100%;
}

/* Chrome */
body.browser-chrome {
    /* Chrome specific styles */
}

/* Firefox */
body.browser-firefox {
    /* Firefox specific styles */
}

/* Edge */
body.browser-edge {
    /* Edge specific styles */
}

/* Samsung Internet */
body.browser-samsung-internet {
    /* Samsung Internet specific styles */
}

/* ============================================
   SAFE AREA HELPERS
   ============================================ */

.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.safe-area-all {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Show/Hide based on detection */
.show-standalone { display: none !important; }
.show-browser { display: none !important; }
.show-twa { display: none !important; }
.show-mobile { display: none !important; }
.show-tablet { display: none !important; }
.show-desktop { display: none !important; }
.show-ios { display: none !important; }
.show-android { display: none !important; }
.show-touch { display: none !important; }
.show-no-touch { display: none !important; }

body.mode-standalone .show-standalone,
body.mode-browser .show-browser,
body.mode-twa .show-twa,
body.device-mobile .show-mobile,
body.device-tablet .show-tablet,
body.device-desktop .show-desktop,
body.os-ios .show-ios,
body.os-android .show-android,
body.touch-enabled .show-touch,
body.no-touch .show-no-touch {
    display: block !important;
}

/* Inline variants */
.show-standalone-inline { display: none !important; }
.show-browser-inline { display: none !important; }
.show-mobile-inline { display: none !important; }

body.mode-standalone .show-standalone-inline,
body.mode-browser .show-browser-inline,
body.device-mobile .show-mobile-inline {
    display: inline !important;
}

/* Flex variants */
.show-standalone-flex { display: none !important; }
.show-browser-flex { display: none !important; }
.show-mobile-flex { display: none !important; }

body.mode-standalone .show-standalone-flex,
body.mode-browser .show-browser-flex,
body.device-mobile .show-mobile-flex {
    display: flex !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   (Combined with detection for precise control)
   ============================================ */

/* Mobile Small (up to 375px) */
@media (max-width: 375px) {
    body.device-mobile .main-content {
        padding: 12px;
    }
    
    body.device-mobile .top-nav {
        font-size: 14px;
    }
}

/* Mobile Medium (376px to 414px) */
@media (min-width: 376px) and (max-width: 414px) {
    body.device-mobile .main-content {
        padding: 16px;
    }
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    body.device-tablet .main-content {
        padding: 24px;
    }
    
    
    body.device-tablet .sidebar {
        width: 280px;
    }
        
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
    body.device-desktop .main-content {
   
        padding: 16px;
    }
    
    body.device-desktop .sidebar {
        display: block !important;
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    body.device-desktop .container {
        max-width: 1140px;
    }
}

/* Extra Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    body.device-desktop .container {
        max-width: 1320px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .no-print,
    .top-nav,
    .sidebar,
    .bottom-nav,
    button,
    .install-prompt {
        display: none !important;
    }
}

/* ============================================
   DARK MODE DETECTION
   (Optional - can be combined with app detection)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode specific styles */
}

@media (prefers-color-scheme: light) {
    /* Light mode specific styles */
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    body {
        border: 2px solid currentColor;
    }
    
    button,
    a {
        border: 1px solid currentColor;
    }
}

/* ============================================
   SPECIFIC USE CASE EXAMPLES
   ============================================ */

/* Example: Full-screen video on mobile standalone */
body.device-mobile.mode-standalone .video-player {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0);
}

/* Example: Different navigation for PWA */
body.mode-standalone .top-nav .back-button {
    display: inline-flex !important;
}

body.mode-browser .top-nav .back-button {
    display: none !important;
}

/* Example: iOS notch handling */
body.os-ios.mode-standalone .status-bar {
    height: env(safe-area-inset-top, 20px);
    background: #000;
}

/* Example: Android navigation bar handling */
body.os-android.mode-standalone .bottom-nav {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Example: Tablet landscape sidebar */
body.device-tablet.orientation-landscape-primary .sidebar {
    width: 320px;
}

/* Example: Desktop hover effects (disabled on touch) */
body.device-desktop.no-touch .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.2);
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation (desktop) */
body.device-desktop.no-touch *:focus-visible {
    outline: 2px solid #00F0FF;
    outline-offset: 2px;
}

/* Enhanced touch targets for mobile */
body.device-mobile.touch-enabled button,
body.device-mobile.touch-enabled a,
body.device-mobile.touch-enabled input,
body.device-mobile.touch-enabled select {
    min-height: 48px;
    min-width: 48px;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animations on mobile */
body.device-mobile .animated,
body.device-mobile .transition {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Disable animations on low-end devices (if needed) */
body.device-mobile.low-performance * {
    animation: none !important;
    transition: none !important;
}