/**
 * Performance Optimizations for Rank Panel
 * GPU-accelerated animations and rendering improvements
 * Load this AFTER style.css and player.css
 */

/* ===================================
   GPU ACCELERATION & PERFORMANCE HINTS
   =================================== */

/* Force GPU acceleration for animated elements */
/* NOTE: DO NOT add 'body' here - it breaks fixed positioning for admin button! */
.header,
.stat-card,
.sidebar,
.table-container,
.players-table tbody tr,
.modal-content,
.player-info-section,
.player-profile,
.rank-progress-fill {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize body separately without transform (to preserve fixed positioning context) */
body {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Admin toggle button and panel - let style.css handle positioning completely */
/* DO NOT override transform or position - style.css has the correct values */
.admin-toggle-btn,
.admin-panel {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* All animations removed - keeping only transitions for better performance */
/* Users reported lag even with GPU-optimized animations */

/* Optimize hover transitions - reduce box-shadow calculations */
.stat-card:hover,
.sidebar:hover,
.table-container:hover,
.player-info-section:hover {
    /* Use transform instead of box-shadow when possible */
    transform: translate3d(0, -2px, 0) scale(1);
}

/* Optimize table row animations */
.players-table tbody tr {
    will-change: transform;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.players-table tbody tr:hover {
    transform: translate3d(0, 0, 0) scale(1.005);
}

/* Reduce repaints on scrolling */
.table-wrapper,
#weapons-container,
.weapons-list-scrollable {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Optimize progress bar animations */
.rank-progress-fill {
    will-change: width;
    transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Optimize modal transitions */
/* NOTE: Modals use flexbox centering, NOT transform positioning! */
.modal {
    will-change: opacity;
    /* Only transitions remain - all animations removed */
}

.modal-content {
    /* Add GPU acceleration hint only - don't override positioning */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize button hovers - avoid filter when possible */
.admin-btn:hover,
.action-btn:hover,
.page-btn:hover {
    transform: translate3d(0, -1px, 0);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
    /* Disable complex animations on mobile for better performance */
    .stat-card,
    .player-info-section,
    .player-weapon-item {
        animation-duration: 0.3s !important;
    }
    
    /* Simplify hover effects on mobile */
    .stat-card:hover,
    .player-info-section:hover {
        transform: translate3d(0, -1px, 0);
    }
}

/* Removed spin animation - all animations removed for performance */

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

/* Optimize weapon icon rendering */
.weapon-icon,
.rank-badge img,
.player-avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce repaints on number animations */
.number-container,
.stat-value,
.player-stat-value {
    will-change: contents;
}

/* Optimize glowing effects - use transform instead of filter */
.header-title::before,
.player-info-section::before,
.stat-card::before {
    will-change: opacity;
    transition: opacity 0.3s ease;
}

/* Optimize dropdown transitions - don't override transform from style.css */
.weapon-dropdown {
    will-change: opacity, transform;
    /* Let style.css handle the transform for proper centering */
}

/* Improve rendering performance for pseudo-elements */
.stat-card::before,
.player-info-section::before,
.sidebar::before,
.table-container::before {
    content: '';
    will-change: opacity;
}

/* Optimize range slider rendering */
.range-slider,
.dual-thumb {
    will-change: left, width;
}

/* Performance tip: Limit will-change usage to only actively animating elements */
.stat-card:not(:hover),
.player-info-section:not(:hover),
.players-table tbody tr:not(:hover) {
    will-change: auto;
}

/* All animations removed from style.css and player.css for maximum performance */
/* Users reported lag despite GPU optimization attempts */

/* Optimize search box and input transitions */
.search-box input,
.sidebar-select,
.form-group input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Improve composite layer handling */
.header,
.sidebar,
.table-container,
.modal {
    isolation: isolate;
}

/* Optimize rank badge rendering */
.rank-badge {
    will-change: transform;
    transition: transform 0.2s ease;
}

.rank-badge:hover {
    transform: translate3d(0, -2px, 0) scale(1.05);
}

/* Reduce paint on skill badge hover */
.skill-badge {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.skill-badge:hover {
    transform: translate3d(0, -2px, 0);
}

/* Optimize weapon list scrolling */
.weapons-list-scrollable {
    contain: layout style paint;
}

/* Optimize table rendering with containment */
.players-table {
    contain: layout style;
}

/* Improve compositing for fixed elements */
body::before,
.header {
    will-change: scroll-position;
}

/* Final optimization: Reduce repaints on text selection */
::selection {
    background: rgba(167, 139, 250, 0.3);
    color: inherit;
}

::-moz-selection {
    background: rgba(167, 139, 250, 0.3);
    color: inherit;
}

/* ===================================
   ADMIN TOOLS OPTIMIZATION
   =================================== */

/* 
 * IMPORTANT: Let style.css handle ALL admin positioning and transforms!
 * The admin button uses transform: translateY(-50%) in style.css
 * DO NOT override any transform, position, right, or top properties
 * Only add performance hints that don't conflict
 */

.admin-toggle-btn {
    /* Ensure button is immediately positioned correctly on page load */
    /* Remove will-change from here to prevent initial rendering glitch */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Only add will-change after page loads to prevent teleporting */
.admin-toggle-btn:hover,
.admin-toggle-btn.active {
    will-change: right, transform;
}

.admin-panel {
    /* Add performance hint for smooth panel sliding */
    will-change: right;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize admin button interactions inside the panel */
.admin-btn {
    will-change: transform;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.admin-btn:hover {
    transform: translate3d(0, -2px, 0);
}

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

/* Disable expensive CSS features that were causing lag */

/* Remove all backdrop-filters (disabled in style.css and player.css) */
* {
    /* Never use backdrop-filter - it's extremely expensive */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Limit filter usage to essential only */
.sidebar-select,
.form-group input,
.modal,
.weapon-dropdown,
.page-btn,
.quick-stat,
.reset-filters-btn,
.admin-toggle-btn,
.admin-panel,
.admin-btn,
.mobile-menu,
.notification {
    /* Disable any remaining filters */
    filter: none !important;
}

/* Optimize scrolling performance */
.table-wrapper,
.weapons-list-scrollable,
#weapons-container,
.admin-panel,
.mobile-menu {
    /* Enable hardware-accelerated scrolling */
    -webkit-overflow-scrolling: touch;
    /* Reduce repaints during scroll */
    will-change: scroll-position;
}

/* Disable animations on low-performance devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Reduce complexity of box-shadows on hover */
.player-info-section:hover {
    /* Use simpler box-shadow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Optimize text rendering */
body,
.players-table,
.player-info-section,
.sidebar {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Limit will-change to only actively animating elements */
*:not(:hover):not(:focus):not(:active) {
    will-change: auto !important;
}

/* Optimize composite layers */
.header,
.sidebar,
.table-container,
.player-info-section {
    /* Force composite layer but don't over-promote */
    isolation: isolate;
}

/* Reduce paint area for table rows */
.players-table tbody tr {
    /* Contain paint to reduce repaint area */
    contain: layout paint;
}

/* Optimize pseudo-elements */
.stat-card::before,
.player-info-section::before,
.sidebar::before,
.table-container::before {
    /* Disable heavy blur effects on pseudo-elements */
    filter: none !important;
    backdrop-filter: none !important;
}

/* ===================================
   ACTION BUTTON ANIMATIONS
   =================================== */

/* Desktop: slide in from right */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile: slide in from bottom */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop action button animation */
.action-btn {
    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Mobile-specific aggressive optimizations */
@media (max-width: 768px) {
    /* Disable all animations on mobile EXCEPT action buttons */
    *:not(.action-btn) {
        animation: none !important;
    }
    
    /* Mobile action button animation - slide from bottom */
    .action-btn {
        animation: slideInFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }
    
    /* Disable most transitions except for essential UI elements */
    *:not(.modal):not(.mobile-menu):not(.admin-panel):not(.admin-toggle-btn):not(.weapon-dropdown):not(.action-btn) {
        transition: none !important;
    }
    
    /* Allow essential transitions for panels and menus */
    .modal,
    .mobile-menu,
    .admin-panel {
        transition: opacity 0.2s ease, transform 0.2s ease, right 0.3s ease !important;
    }
    
    .admin-toggle-btn {
        transition: right 0.3s ease, transform 0.2s ease !important;
    }
    
    /* Keep action button transitions */
    .action-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Disable hover effects on mobile except for essential buttons */
    *:hover:not(.admin-toggle-btn):not(.admin-btn):not(.action-btn):not(.page-btn) {
        transform: none !important;
        box-shadow: none !important;
    }
}