/* ==========================================================================
   BoTrade.ai — AI Adaptive Render CSS Layer v1.0
   
   This CSS layer works with FTMRenderEngine to adaptively control
   which visual effects are active based on device capability tiers.
   
   Tiers applied as body classes:
     .ftm-tier-ultra  — Full effects, all animations
     .ftm-tier-high   — Full effects, slightly reduced continuous anims
     .ftm-tier-medium — Reduced shadows, no backdrop-blur, fewer continuous
     .ftm-tier-low    — Minimal effects, essential animations only
     .ftm-tier-potato — Zero animations, zero shadows, instant transitions
   
   Feature flags (body classes):
     .ftm-fx-backdrop-blur         .ftm-fx-box-shadow-glow
     .ftm-fx-continuous-animation  .ftm-fx-filter-blur
     .ftm-fx-gradient-shift        .ftm-fx-price-roll
     .ftm-fx-entrance-animation    .ftm-fx-icon-float
     .ftm-fx-crossfade             .ftm-fx-tab-glow
     ... and more
   
   Viewport visibility:
     .ftm-render-hidden  — element is outside viewport (pause animations)
     .ftm-render-visible — element is in viewport (resume animations)
   
   Page visibility:
     .ftm-render-page-hidden — tab is not visible (pause everything)
   ========================================================================== */

/* ---- CSS Custom Properties for Engine ---- */
:root {
    --ftm-anim-scale: 1;
    --ftm-tier-index: 3; /* default HIGH */
}


/* =========================================================================
   VIEWPORT VISIBILITY — Pause animations on off-screen elements
   ========================================================================= */

/* Elements outside viewport: pause all CSS animations */
.ftm-render-hidden,
.ftm-render-hidden * {
    animation-play-state: paused !important;
}

/* Reset will-change on hidden elements to free GPU memory */
.ftm-render-hidden {
    will-change: auto !important;
}


/* =========================================================================
   PAGE HIDDEN — Tab not visible, freeze everything to save resources
   ========================================================================= */

.ftm-render-page-hidden *,
.ftm-render-page-hidden *::before,
.ftm-render-page-hidden *::after {
    animation-play-state: paused !important;
    transition-duration: 0s !important;
}


/* =========================================================================
   TIER: POTATO — Zero animations, zero effects, raw speed
   ========================================================================= */

body.ftm-tier-potato .ftm-dashboard *,
body.ftm-tier-potato .ftm-dashboard *::before,
body.ftm-tier-potato .ftm-dashboard *::after {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    will-change: auto !important;
    text-shadow: none !important;
}

/* Keep essential borders for layout clarity */
body.ftm-tier-potato .ftm-dashboard {
    --ftm-shadow-card: 0 0 0 1px var(--ftm-border);
    --ftm-shadow-glow: none;
}

/* Instant tab switches */
body.ftm-tier-potato .ftm-tab-panel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* No gradient background ambiance */
body.ftm-tier-potato .ftm-dashboard::before,
body.ftm-tier-potato .ftm-dashboard::after {
    display: none !important;
}

/* No loading shimmer */
body.ftm-tier-potato .ftm-skeleton-card {
    animation: none !important;
    background: var(--ftm-bg-card) !important;
}

/* Price changes: simple color only, no flash/roll */
body.ftm-tier-potato .ftm-price-flash-up,
body.ftm-tier-potato .ftm-price-flash-down,
body.ftm-tier-potato .ftm-row-flash-up,
body.ftm-tier-potato .ftm-row-flash-down {
    animation: none !important;
}

body.ftm-tier-potato .ftm-price-roller {
    animation: none !important;
}
body.ftm-tier-potato .ftm-price-roller * {
    animation: none !important;
}


/* =========================================================================
   TIER: LOW — Essential animations only, minimal effects
   ========================================================================= */

/* No backdrop-filter blur (heavy on GPU) */
body.ftm-tier-low .ftm-dashboard {
    --ftm-shadow-glow: none;
}

body.ftm-tier-low .ftm-loading-overlay,
body.ftm-tier-low .ftm-header-section,
body.ftm-tier-low .ftm-summary-cards-grid,
body.ftm-tier-low .ftm-chart-tooltip-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* No continuous infinite animations */
body.ftm-tier-low .ftm-core-indicator .ftm-core-ring,
body.ftm-tier-low .ftm-live-badge::before,
body.ftm-tier-low .ftm-live-dot {
    animation: none !important;
}

/* No accent shift animations (continuous gradient movement) */
body.ftm-tier-low .ftm-cc-accent-line,
body.ftm-tier-low .ftm-ic-accent-line,
body.ftm-tier-low .ftm-ot-accent-line,
body.ftm-tier-low .ftm-ct-accent-line,
body.ftm-tier-low .ftm-pp-accent-line {
    animation: none !important;
    background-position: 0% 50% !important;
}

/* No icon float */
body.ftm-tier-low .ftm-sc-icon-wrap .ftm-sc-icon {
    animation: none !important;
}

/* No tab glow */
body.ftm-tier-low .ftm-tab-btn.active {
    filter: none !important;
    animation: none !important;
}

/* No filter effects */
body.ftm-tier-low [class*="ftm-carousel"] [class*="distant"] {
    filter: none !important;
}

/* Reduced box-shadows — keep elevation only, no glows */
body.ftm-tier-low .ftm-chart-card:hover,
body.ftm-tier-low .ftm-sc-card:hover,
body.ftm-tier-low .ftm-info-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Simpler card shadows */
body.ftm-tier-low .ftm-chart-card,
body.ftm-tier-low .ftm-sc-card,
body.ftm-tier-low .ftm-info-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* No price roller animation */
body.ftm-tier-low .ftm-price-roller,
body.ftm-tier-low .ftm-price-roller * {
    animation: none !important;
}

/* Speed up remaining transitions */
body.ftm-tier-low .ftm-dashboard * {
    transition-duration: calc(var(--ftm-anim-scale, 0.4) * 0.25s) !important;
}

/* No row slide-in / fade-in entrance */
body.ftm-tier-low .ftm-ot-row,
body.ftm-tier-low .ftm-ct-row,
body.ftm-tier-low .ftm-pp-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* No crossfade effects */
body.ftm-tier-low .ftm-crossfade-out,
body.ftm-tier-low .ftm-crossfade-in {
    animation: none !important;
    filter: none !important;
}

/* No sync pulse */
body.ftm-tier-low .ftm-sync-indicator {
    animation: none !important;
}


/* =========================================================================
   TIER: MEDIUM — Balanced quality, key effects preserved
   ========================================================================= */

/* No backdrop-filter blur (biggest GPU hog) */
body.ftm-tier-medium .ftm-loading-overlay,
body.ftm-tier-medium .ftm-header-section,
body.ftm-tier-medium .ftm-summary-cards-grid,
body.ftm-tier-medium .ftm-chart-tooltip-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Compensate with solid background */
    background: rgba(10, 14, 26, 0.95) !important;
}

/* Reduce continuous animations — keep only live indicator */
body.ftm-tier-medium .ftm-core-indicator .ftm-core-ring {
    animation: none !important;
}

/* Keep live dot but simplify */
body.ftm-tier-medium .ftm-live-dot {
    animation-duration: 3s !important; /* slower = less repaints */
}

/* Keep accent shifts but slow them down dramatically */
body.ftm-tier-medium .ftm-cc-accent-line,
body.ftm-tier-medium .ftm-ic-accent-line,
body.ftm-tier-medium .ftm-ot-accent-line,
body.ftm-tier-medium .ftm-ct-accent-line,
body.ftm-tier-medium .ftm-pp-accent-line {
    animation-duration: 12s !important; /* much slower = less GPU work */
}

/* No icon float animation */
body.ftm-tier-medium .ftm-sc-icon-wrap .ftm-sc-icon {
    animation: none !important;
}

/* No tab glow */
body.ftm-tier-medium .ftm-tab-btn.active {
    animation: none !important;
}

/* Reduced filter effects */
body.ftm-tier-medium [class*="ftm-carousel"] [class*="distant"] {
    filter: brightness(0.7) !important; /* no blur, just darken */
}

/* Simplified glow shadows */
body.ftm-tier-medium .ftm-chart-card:hover,
body.ftm-tier-medium .ftm-sc-card:hover,
body.ftm-tier-medium .ftm-info-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Row entrances allowed but faster */
body.ftm-tier-medium .ftm-ot-row {
    animation-duration: 0.2s !important;
}
body.ftm-tier-medium .ftm-ct-row,
body.ftm-tier-medium .ftm-pp-row {
    animation-duration: 0.2s !important;
}

/* Allow price flash but reduce the glow intensity */
body.ftm-tier-medium .ftm-price-flash-up,
body.ftm-tier-medium .ftm-price-flash-down {
    animation-duration: 0.6s !important; /* shorter flash */
}

/* No sync pulse */
body.ftm-tier-medium .ftm-sync-indicator {
    animation: none !important;
    opacity: 1 !important;
}

/* Badge scan simplified */
body.ftm-tier-medium .ftm-live-badge::before {
    animation: none !important;
}

/* Cross-fade simplified */
body.ftm-tier-medium .ftm-crossfade-out {
    filter: none !important; /* no blur on exit */
}


/* =========================================================================
   TIER: HIGH — Full effects, slight optimization
   ========================================================================= */

/* Core glow ring: reduce animation frequency */
body.ftm-tier-high .ftm-core-indicator .ftm-core-ring {
    animation-duration: 4s !important; /* slower than default 2-3s */
}

/* Accent shifts: slightly slower */
body.ftm-tier-high .ftm-cc-accent-line,
body.ftm-tier-high .ftm-ic-accent-line,
body.ftm-tier-high .ftm-ot-accent-line,
body.ftm-tier-high .ftm-ct-accent-line,
body.ftm-tier-high .ftm-pp-accent-line {
    animation-duration: 8s !important;
}


/* =========================================================================
   TIER: ULTRA — Everything enabled, no restrictions
   ========================================================================= */

/* Ultra: no overrides — full CSS as designed */


/* =========================================================================
   GPU COMPOSITING HINTS — Smart will-change management
   All tiers benefit from proper layer promotion.
   ========================================================================= */

/* Only promote elements that are actually animating and visible */
body:not(.ftm-tier-potato) .ftm-render-visible .ftm-sc-card,
body:not(.ftm-tier-potato) .ftm-render-visible .ftm-chart-card,
body:not(.ftm-tier-potato) .ftm-render-visible .ftm-info-card {
    will-change: transform;
    contain: layout style;
}

body:not(.ftm-tier-potato) .ftm-render-visible .ftm-tab-panel {
    will-change: transform, opacity;
}

/* Remove will-change from non-visible sections to free GPU layers */
.ftm-render-hidden .ftm-sc-card,
.ftm-render-hidden .ftm-chart-card,
.ftm-render-hidden .ftm-info-card,
.ftm-render-hidden .ftm-tab-panel {
    will-change: auto !important;
    contain: layout style paint !important;
}


/* =========================================================================
   MOBILE BATTERY SAVER — Additional mobile-specific optimizations
   ========================================================================= */

/* When on mobile + medium or lower, extra aggressive savings */
@media (hover: none) and (pointer: coarse) {
    /* Disable radial gradient backgrounds (expensive on mobile GPUs) */
    body.ftm-tier-medium .ftm-dashboard::before,
    body.ftm-tier-medium .ftm-dashboard::after,
    body.ftm-tier-low .ftm-dashboard::before,
    body.ftm-tier-low .ftm-dashboard::after {
        display: none !important;
    }

    /* Simpler card borders instead of shadows on low-end mobile */
    body.ftm-tier-low .ftm-chart-card,
    body.ftm-tier-low .ftm-sc-card,
    body.ftm-tier-low .ftm-info-card,
    body.ftm-tier-low .ftm-open-trades-wrap,
    body.ftm-tier-low .ftm-closed-trades-wrap,
    body.ftm-tier-low .ftm-pair-perf-wrap {
        box-shadow: none !important;
        border: 1px solid var(--ftm-border) !important;
    }

    /* Disable hover effects on touch devices at low tiers */
    body.ftm-tier-low .ftm-chart-card:hover,
    body.ftm-tier-low .ftm-sc-card:hover,
    body.ftm-tier-low .ftm-info-card:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--ftm-border-light) !important;
    }

    /* Reduce table row height to minimize paint area */
    body.ftm-tier-low .ftm-ot-row td,
    body.ftm-tier-low .ftm-ct-row td,
    body.ftm-tier-low .ftm-pp-row td {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Use contain on scrollable areas */
    body:not(.ftm-tier-ultra) .ftm-table-scroll-wrapper {
        contain: layout style paint;
    }
}


/* =========================================================================
   PRINT — Same as POTATO but override tier classes
   ========================================================================= */

@media print {
    .ftm-dashboard *,
    .ftm-dashboard *::before,
    .ftm-dashboard *::after {
        animation: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        box-shadow: none !important;
        will-change: auto !important;
    }
}


/* =========================================================================
   ADAPTIVE DURATION SCALE — CSS calc for tier-aware animation duration
   Usage: animation-duration: calc(var(--ftm-anim-scale) * 0.3s);
   ========================================================================= */

/* Scale transition speeds proportionally to tier */
body:not(.ftm-tier-potato):not(.ftm-tier-ultra) .ftm-dashboard {
    --ftm-transition: calc(var(--ftm-anim-scale, 1) * 0.25s) cubic-bezier(.4, 0, .2, 1);
}


/* =========================================================================
   SMOOTH SCROLL — Only enable on capable devices
   ========================================================================= */

body:not(.ftm-fx-smooth-scroll) .ftm-carousel-track,
body:not(.ftm-fx-smooth-scroll) .ftm-table-scroll-wrapper {
    scroll-behavior: auto !important;
}


/* =========================================================================
   CONTAINMENT — Layout isolation for render performance
   All tiers benefit from containment.
   ========================================================================= */

.ftm-dashboard {
    contain: layout style;
}

.ftm-summary-cards-grid,
.ftm-chart-cards,
.ftm-open-trades-wrap,
.ftm-closed-trades-wrap,
.ftm-pair-perf-wrap,
.ftm-info-cards-section {
    contain: layout style;
}

/* Strict containment on table wrappers */
.ftm-table-scroll-wrapper {
    contain: layout style;
    overflow-anchor: none;
}

/* Individual cards: layout + style containment */
.ftm-sc-card,
.ftm-chart-card,
.ftm-info-card {
    contain: layout style;
}