/* ══════════════════════════════════════════════════════════════
   PERF ULTRA v4.0 — CSS performance tiers + GPU acceleration
   Applied via html[data-perf-tier] and .perf-low / .perf-potato
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL GPU COMPOSITING for interactive elements ─────── */
/* Force GPU layer promotion for elements that animate on hover */
.task-card-inbox,
.task-card-kanban,
.task-card-timeline,
.task-quick-action,
.quick-add-inline .add-btn,
.sidebar-item,
.filter-chip,
.view-switcher-btn,
.action-icon-btn,
.kanban-column,
.modal-box,
.settings-theme-card,
.settings-anim-preset {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth font rendering during transforms */
.task-card-inbox,
.task-card-kanban,
.task-card-timeline {
    -webkit-font-smoothing: subpixel-antialiased;
}

/* ── GLOBAL: Kill "transition: all" — the #1 animation killer ── */
/* Force specific properties only on common interactive elements */
.glass-card,
.stat-card,
.kpi-card,
.project-card,
.card {
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out !important;
}

/* ── TIER: REDUCED (medium + low + potato) ───────────────── */

/* Kill stagger reveal animations (causes layout thrash on slow devices) */
.perf-reduced .view-container.active > * {
    animation: none !important;
}
.perf-reduced .view-container.active {
    animation-duration: 0.1s !important;
}

/* Faster transitions — specific properties only, never "all" */
.perf-reduced .task-card-inbox,
.perf-reduced .task-card-kanban,
.perf-reduced .task-card-timeline {
    transition: transform 80ms ease-out, border-color 80ms ease-out !important;
}
.perf-reduced .sidebar-item,
.perf-reduced .filter-chip,
.perf-reduced .action-icon-btn,
.perf-reduced .view-switcher-btn {
    transition: background 80ms ease-out, color 80ms ease-out !important;
}

/* Except sidebar width transition (needed for collapse) */
.perf-reduced .sidebar {
    transition: width 150ms ease-out !important;
}

/* Reduce box-shadow complexity globally */
.perf-reduced .card:hover,
.perf-reduced .stat-card:hover,
.perf-reduced .kpi-card:hover,
.perf-reduced .glass-card:hover,
.perf-reduced .task-card:hover,
.perf-reduced .project-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ── TIER: LOW (low + potato) ────────────────────────────── */

/* Kill ALL backdrop-filter (extremely GPU expensive) */
.perf-low *,
.perf-low *::before,
.perf-low *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill CSS filter on non-essential elements */
.perf-low .sidebar-item-icon svg,
.perf-low .sidebar-logo,
.perf-low .sidebar-brand-name,
.perf-low .sidebar-collapse-btn,
.perf-low .stat-card,
.perf-low .kpi-card,
.perf-low .card {
    filter: none !important;
}

/* Kill expensive multi-layer box-shadows — use simple ones */
.perf-low .sidebar {
    box-shadow: 1px 0 4px rgba(0,0,0,0.3) !important;
}
.perf-low .sidebar-item.active,
.perf-low .sidebar-item:hover,
.perf-low .sidebar-collapse-btn,
.perf-low .sidebar-avatar img,
.perf-low .sidebar-avatar-emoji,
.perf-low .sidebar-logo {
    box-shadow: none !important;
}

/* Kill all @keyframe animations except essential ones */
.perf-low .sidebar-logo,
.perf-low .sidebar-item.active .sidebar-item-icon svg {
    animation: none !important;
}
.perf-low .sidebar::after {
    display: none !important; /* neon bar animation */
}

/* Kill shimmer/hover effects on cards */
.perf-low .stat-card::before,
.perf-low .stat-card::after,
.perf-low .card::before,
.perf-low .card::after {
    display: none !important;
}

/* Simplify background-image gradients */
.perf-low .sidebar,
.perf-low .sidebar-header,
.perf-low .sidebar-footer {
    background-image: none !important;
}
.perf-low .sidebar-header,
.perf-low .sidebar-footer {
    background: transparent !important;
}

/* Kill color-mix — use fallbacks */
.perf-low .sidebar-item:hover {
    background: rgba(255,255,255,0.06) !important;
}
.perf-low .sidebar-item.active {
    background: rgba(255,255,255,0.1) !important;
}

/* Disable smooth scrolling (causes jank on slow devices) */
.perf-low * {
    scroll-behavior: auto !important;
}

/* Reduce repaint: remove all text-shadow */
.perf-low h1, .perf-low h2, .perf-low h3,
.perf-low .view-title, .perf-low .section-title,
.perf-low .dashboard-greeting,
.perf-low .kpi-value, .perf-low .stat-number {
    text-shadow: none !important;
}

/* ── TIER: POTATO (absolute minimum) ─────────────────────── */

/* Kill ALL animations everywhere */
.perf-potato *,
.perf-potato *::before,
.perf-potato *::after {
    animation: none !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
}

/* No transforms on hover (triggers composite layer) */
.perf-potato *:hover {
    transform: none !important;
}

/* Kill ALL box-shadows */
.perf-potato * {
    box-shadow: none !important;
}

/* Kill ALL filter effects */
.perf-potato * {
    filter: none !important;
}

/* Kill background canvas entirely */
.perf-potato #animation-canvas,
.perf-potato .animation-canvas {
    display: none !important;
}

/* Minimal borders instead of shadows */
.perf-potato .sidebar {
    border-right: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
}
.perf-potato .card,
.perf-potato .stat-card,
.perf-potato .kpi-card {
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
}

/* Kill gradient backgrounds */
.perf-potato .sidebar-divider {
    background: var(--border, rgba(255,255,255,0.08)) !important;
}

/* ── HIDDEN TAB — pause ALL visual work ──────────────────── */
.perf-hidden * {
    animation-play-state: paused !important;
}
.perf-hidden #animation-canvas,
.perf-hidden .animation-canvas {
    display: none !important;
}

/* ── prefers-reduced-motion system setting ─────────────────── */
@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;
    }
    #animation-canvas,
    .animation-canvas {
        display: none !important;
    }
}

/* ── PROTECT auth particles from perf tiers ──────────────── */
.perf-reduced .auth-particles span,
.perf-reduced .auth-particles span::after,
.perf-low .auth-particles span,
.perf-low .auth-particles span::after {
    transition-duration: unset !important;
    animation-duration: unset !important;
    animation: unset !important;
    backdrop-filter: unset !important;
}
.perf-reduced .auth-particles span,
.perf-low .auth-particles span {
    animation: authParticleFloat linear infinite !important;
}

/* ── THEME SWITCHING — zero-flash transition ─────────────── */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* ── SETTINGS THEME CARD — selected indicator ─────────────── */
.settings-theme-card {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    padding: 8px;
    border: 2px solid transparent;
    transition: border-color 120ms ease-out, transform 80ms ease-out !important;
    transform: translateZ(0);
}
.settings-theme-card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: var(--accent, #8b5cf6);
}
.settings-theme-card.active {
    border-color: var(--accent, #8b5cf6);
    background: rgba(var(--accent-rgb, 139, 92, 246), 0.08);
}
.settings-theme-card.active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: var(--accent, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}
.settings-theme-card .settings-theme-preview {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 6px;
}
.settings-theme-card .settings-theme-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}