/**
 * ═══════════════════════════════════════════════════════════════════
 * PERFORMANCE-OPTIMIERUNGEN - CSS
 * ═══════════════════════════════════════════════════════════════════
 */

/* ========================================
   PHASE 1: CSS PERFORMANCE OPTIMIERUNGEN
   ======================================== */

/* Global GPU Acceleration für smooth Transitions */
* {
    /* Nur spezifische Properties animieren (nicht "all") */
    transition-property: transform, opacity, background-color, border-color, box-shadow;
}

/* Container Isolation - Verhindert Layout-Thrashing */
.view-section,
.card,
.nav-section {
    contain: layout style;
}

/* Shop/Inventar Items - GPU Acceleration */
[style*="grid-template-columns"] > div,
.inventory-item,
.shop-item {
    contain: layout style paint;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Optimierte Hover-Effekte - Nur transform & opacity */
[style*="transition: all"] {
    transition-property: transform, opacity, box-shadow !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease-out !important;
}

/* Box-Shadow Performance - Nur bei Hover */
[style*="box-shadow"] {
    box-shadow: none !important;
}

[style*="box-shadow"]:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Gradient-Backgrounds - GPU-beschleunigt */
[style*="linear-gradient"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: auto;
}

/* Scroll-Performance für Container */
.content-container,
.main-content {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Button-Optimierung */
.btn {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
}

.btn:hover {
    transform: translateY(-2px) translateZ(0);
}

/* Sidebar Navigation - Smooth Scrolling */
.sidebar {
    contain: layout style;
    will-change: scroll-position;
}

/* Card-Hover ohne Layout-Shift */
.card:hover,
[class*="card"]:hover {
    transform: translateY(-2px) translateZ(0);
    will-change: transform;
}

/* Dropdown Performance */
.dropdown-panel {
    contain: layout style paint;
    transform: translateZ(0);
}

/* Item-Grid Optimierung */
[style*="display: grid"] {
    contain: layout;
}

/* Avatar/Profile Display */
.profile-avatar-container,
.profile-avatar {
    contain: layout style paint;
    transform: translateZ(0);
}

/* Notification Badge */
.badge {
    contain: layout style paint;
    will-change: contents;
}

/* Modal/Overlay Optimierung */
[style*="position: fixed"],
[style*="position: absolute"] {
    contain: layout style;
    transform: translateZ(0);
}

/* Lazy Load Placeholder */
.lazy-load {
    background: rgba(255, 255, 255, 0.05);
    min-height: 200px;
}

.lazy-load.loaded {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Remove expensive filters where not needed */
[style*="backdrop-filter"] {
    /* Reduziere blur für bessere Performance */
}

/* Text-Rendering Optimierung */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar Optimierung */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Prevent paint on hidden elements */
.view-section:not(.active) {
    visibility: hidden;
    pointer-events: none;
}

.view-section.active {
    visibility: visible;
    pointer-events: auto;
}

/* Loading State */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

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

/* Mobile Optimierungen */
@media (max-width: 768px) {
    /* Reduziere Animationen auf Mobile */
    * {
        transition-duration: 0.15s !important;
    }

    /* Vereinfache Box-Shadows */
    [style*="box-shadow"]:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
}