/**
 * Browser Compatibility Layer
 * Cross-browser compatibility fixes and optimizations
 * Version: 1.1.0 - Optimized & Secured
 * CSP-Safe: No inline styles, external resources validated
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    --scrollbar-width: 8px;
    --scrollbar-track-bg: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-bg: rgba(99, 102, 241, 0.6);
    --scrollbar-thumb-hover-bg: rgba(99, 102, 241, 0.8);
    --scrollbar-border-radius: 4px;
    --gradient-fallback: linear-gradient(135deg, #1a1a2e, #16213e);
    --focus-outline: 2px solid #6366f1;
    --focus-offset: 2px;
}

/* ============================================
   UNIVERSAL COMPATIBILITY
   ============================================ */

* {
    box-sizing: border-box;
}

/* ============================================
   HARDWARE ACCELERATION
   ============================================ */

.enhanced-hero,
.quick-access-card,
.search-container,
.modal {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* SECURITY: Block injected transform styles */
.enhanced-hero[style*="transform"],
.quick-access-card[style*="transform"],
.search-container[style*="transform"],
.modal[style*="transform"],
.enhanced-hero[style*="animation"],
.quick-access-card[style*="animation"],
.search-container[style*="animation"],
.modal[style*="animation"] {
    animation: none !important;
}

/* ============================================
   FIREFOX-SPECIFIC FIXES
   ============================================ */

@-moz-document url-prefix() {
    .quick-access-card {
        transform: translate3d(0, 0, 0);
    }
    
    .quick-access-card:hover {
        transform: translate3d(0, -8px, 0);
    }
}

.browser-firefox .quick-access-card {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

.browser-firefox .quick-access-card:hover {
    transform: translate3d(0, -8px, 0) !important;
}

/* ============================================
   SAFARI-SPECIFIC OPTIMIZATIONS
   ============================================ */

@supports (-webkit-appearance: none) {
    .enhanced-hero,
    .quick-access-card {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

.browser-safari .enhanced-hero,
.browser-safari .quick-access-card {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

.browser-safari input,
.browser-safari select,
.browser-safari textarea,
.browser-safari button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ============================================
   CHROME & CHROMIUM-BASED BROWSERS
   ============================================ */

@supports (background: -webkit-gradient(linear, left top, right top, from(#000), to(#fff))) {
    .enhanced-hero {
        background: linear-gradient(135deg, #1a1a2e, #16213e); /* fallback */
        background: var(--gradient-fallback);
    }
}

.browser-chrome .enhanced-hero {
    background: linear-gradient(135deg, #1a1a2e, #16213e); /* fallback */
    background: var(--gradient-fallback);
}

/* ============================================
   EDGE BROWSER COMPATIBILITY
   ============================================ */

@supports (-ms-ime-align: auto) {
    .quick-access-card {
        transform: translate3d(0, 0, 0);
    }
}

.browser-edge .quick-access-card {
    transform: translate3d(0, 0, 0);
}

/* ============================================
   IE11 FALLBACKS
   ============================================ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .quick-access-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .quick-access-card {
        flex: 0 0 calc(33.333% - 20px);
    }
}

/* ============================================
   WEBKIT SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px; /* fallback */
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* fallback */
    background: var(--scrollbar-track-bg);
    border-radius: 4px; /* fallback */
    border-radius: var(--scrollbar-border-radius);
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.6); /* fallback */
    background: var(--scrollbar-thumb-bg);
    border-radius: 4px; /* fallback */
    border-radius: var(--scrollbar-border-radius);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.8); /* fallback */
    background: var(--scrollbar-thumb-hover-bg);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(99, 102, 241, 1);
}

/* ============================================
   FIREFOX SCROLLBAR STYLING
   ============================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.6) rgba(255, 255, 255, 0.1); /* fallback */
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

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

@media (prefers-reduced-motion: reduce) {
    .enhanced-hero,
    .quick-access-card,
    .search-container,
    .modal {
        transform: none !important;
        will-change: auto;
    }
    
    .quick-access-card:hover {
        transform: none !important;
    }
}

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

@media (prefers-contrast: high) {
    ::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 1);
        border: 1px solid currentColor;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid currentColor;
    }
    
    .quick-access-card:focus-visible,
    .search-container:focus-visible,
    .modal:focus-visible {
        outline-width: 3px;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-track-bg: rgba(0, 0, 0, 0.2);
        --scrollbar-thumb-bg: rgba(99, 102, 241, 0.7);
        --scrollbar-thumb-hover-bg: rgba(99, 102, 241, 0.9);
    }
}

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

@media print {
    .enhanced-hero,
    .quick-access-card,
    .search-container,
    .modal {
        transform: none !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .enhanced-hero,
    .quick-access-card,
    .search-container,
    .modal {
        transform: translate3d(0, 0, 0);
    }
}

/* ============================================
   ACCESSIBILITY - FOCUS STATES
   ============================================ */

.quick-access-card:focus-visible,
.search-container:focus-visible,
.modal:focus-visible {
    outline: 2px solid #6366f1; /* fallback */
    outline: var(--focus-outline);
    outline-offset: 2px; /* fallback */
    outline-offset: var(--focus-offset);
}

/* ============================================
   TOUCH DEVICE SUPPORT
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .quick-access-card {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .quick-access-card:hover {
        transform: none;
    }
    
    .quick-access-card:active {
        transform: scale(0.98);
    }
}