/* =============================================================================
   MOBILE PERFORMANCE — simketh LIQUID GLASS v2
   Fixes: heavy blur filters, floating orb animations, backdrop-filter layers
   Must load AFTER all other CSS to override inline styles
   ============================================================================= */

/* Respect user's motion preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   MOBILE (phones): DISABLE ALL GPU-HEAVY EFFECTS
   ============================================================================= */
@media (max-width: 768px) {

    /* HIDE ORBS COMPLETELY - massive GPU drain with blur(60px-120px) */
    .orb,
    .orb-1, .orb-2, .orb-3, .orb-4, .orb-5,
    .nebula-orb, .nebula-glow,
    .animated-bg .orb,
    div[class*="orb"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* HIDE PARTICLES */
    .particle, .floating-particle,
    .animated-bg .particle,
    div[class*="particle"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* KILL ALL ANIMATIONS on mobile */
    *,
    *::before,
    *::after,
    .animated-bg,
    .animated-bg::before,
    .animated-bg::after,
    [class*="orb"],
    [class*="particle"],
    .glass-card,
    .stat-card,
    .sidebar,
    .nav-item,
    .nav-item::before,
    .nav-item.active .material-symbols-outlined {
        animation: none !important;
        animation-play-state: paused !important;
    }

    /* DISABLE ALL backdrop-filter - #1 cause of mobile jank */
    *,
    *::before,
    *::after,
    .glass-card,
    .glass-sidebar,
    .glass,
    .sidebar,
    .nav-glass,
    nav,
    header,
    aside,
    [style*="backdrop-filter"],
    [class*="glass"],
    .stat-card,
    .btn-ghost {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Replace glass effects with solid backgrounds */
    .glass-card,
    .glass-sidebar,
    .sidebar,
    .stat-card,
    [class*="glass"] {
        background: rgba(15, 23, 42, 0.95) !important;
        border: 1px solid rgba(168, 85, 247, 0.15) !important;
    }

    /* Light mode glass replacement */
    html:not(.dark) .glass-card,
    html:not(.dark) .glass-sidebar,
    html:not(.dark) .sidebar,
    html:not(.dark) .stat-card,
    html:not(.dark) [class*="glass"] {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(124, 58, 237, 0.15) !important;
    }

    /* Simplify animated background to static gradient */
    .animated-bg {
        background: linear-gradient(135deg, var(--bg-obsidian, #020617) 0%, var(--bg-nebula, #0f172a) 100%) !important;
    }

    html:not(.dark) .animated-bg {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    }

    .animated-bg::before,
    .animated-bg::after {
        display: none !important;
    }

    /* Reduce motion for all elements */
    body {
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    /* Fix viewport issues on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        min-height: 100dvh;
    }

    /* Disable hover effects that cause repaints */
    .glass-card:hover,
    .stat-card:hover,
    .nav-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Sidebar on mobile - remove blur */
    .sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 23, 42, 0.98) !important;
    }

    html:not(.dark) .sidebar {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* =============================================================================
   TABLET: REDUCE EFFECTS BUT KEEP SOME AESTHETIC
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Hide most orbs on tablet, keep one subtle */
    .orb-3, .orb-4,
    .particle:nth-child(n+5) {
        display: none !important;
    }

    .orb-1, .orb-2 {
        filter: blur(30px) !important;
        opacity: 0.1 !important;
        animation-duration: 60s !important;
    }

    /* Reduce backdrop blur */
    .glass-card,
    .sidebar,
    [class*="glass"] {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Slow down animations */
    .animated-bg::before {
        animation-duration: 40s !important;
    }

    .nav-item:hover {
        transform: translateX(3px) !important;
    }

    .glass-card:hover,
    .stat-card:hover {
        transform: translateY(-2px) !important;
    }
}

/* =============================================================================
   DESKTOP: OPTIMIZE GPU COMPOSITING
   ============================================================================= */
@media (min-width: 1025px) {
    .orb {
        will-change: transform;
        contain: layout style;
    }

    /* Limit animation complexity */
    .orb {
        animation-timing-function: linear !important;
    }
}

/* =============================================================================
   INPUT TEXT COLOR FIX
   ============================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="file"],
textarea,
select {
    -webkit-text-fill-color: inherit !important;
    caret-color: inherit !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
    color: #1e293b !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    color: #f1f5f9 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html:not(.dark) input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.9) inset !important;
}

html.dark input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(15, 23, 42, 0.9) inset !important;
}