/**
 * Social Scrape V2 - Premium Glassmorphism Design System
 * 3-Level Depth System (Background / Light Glass / Heavy Glass)
 */

/* 1. LAYER 0: Transparent Base over Host Theme */
body.sstr-page, 
.sstr-dashboard-wrap,
.sstr-dashboard-dark {
    background: transparent !important;
    color: #f8fafc !important;
    position: relative;
    z-index: 0;
    overflow: hidden; /* For ambient background */
}

/* Ambient Animated Mesh Background */
.sstr-dashboard-dark::before,
.sstr-dashboard-dark::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.6;
    animation: sstr-ambient-drift 20s infinite alternate ease-in-out;
    pointer-events: none;
}
.sstr-dashboard-dark::before {
    background: radial-gradient(circle, rgba(0,243,255,0.15) 0%, rgba(0,0,0,0) 70%);
    top: -10%; left: -10%;
}
.sstr-dashboard-dark::after {
    background: radial-gradient(circle, rgba(255,0,255,0.1) 0%, rgba(0,0,0,0) 70%);
    bottom: -10%; right: -10%;
    animation-delay: -10s;
}

@keyframes sstr-ambient-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 100px) scale(1.2); }
}

/* Base Glass Variables */
:root {
    /* Gradient borders mapping for depth */
    --glass-border-gradient: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 100%);
    
    /* Top-left micro highlight simulating direct studio lighting */
    --glass-highlight-inset: inset 0px 1px 1px rgba(255, 255, 255, 0.4), inset 0px 0px 20px rgba(255, 255, 255, 0.05);
    
    /* Level 1: Light Glass (Secondary Containers, Panels, Big Background Boxes) */
    --glass-l1-bg: rgba(15, 23, 42, 0.35);
    --glass-l1-blur: blur(24px) saturate(180%);
    --glass-l1-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    
    /* Level 2: Heavy Glass (Primary Cards, Chart Boxes) */
    --glass-l2-bg: rgba(30, 41, 59, 0.55);
    --glass-l2-blur: blur(32px) saturate(180%);
    --glass-l2-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);
}

/* 2. LAYER 1: Light Glass (Containers & Wrappers) */
.sstr-glass-panel,
.sstr-container-l1,
.sstr-profile-header {
    background: var(--glass-l1-bg) !important;
    backdrop-filter: var(--glass-l1-blur) !important;
    -webkit-backdrop-filter: var(--glass-l1-blur) !important;
    position: relative;
    box-shadow: var(--glass-l1-shadow) !important;
    border-radius: 16px !important;
    border: none !important; /* Removed static border for pseudo-masking gradient */
}

/* Overlay gradient border matching contour exactly */
.sstr-glass-panel::before,
.sstr-profile-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* Border thickness */
    background: var(--glass-border-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* 3. LAYER 2: Strong Glass (Cards, Charts) */
.sstr-card,
.sstr-chart-box,
.sstr-plat-card,
.sstr-post-card,
.sstr-widget {
    background: var(--glass-l2-bg) !important;
    backdrop-filter: var(--glass-l2-blur) !important;
    -webkit-backdrop-filter: var(--glass-l2-blur) !important;
    box-shadow: var(--glass-highlight-inset), 0 4px 15px rgba(var(--sstr-dyn-rgb, 139, 92, 246), 0.1) !important;
    border-radius: 12px !important;
    position: relative;
    border: none !important; 
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    
    /* Reveal Animation Layer (Light) + Breathing Glow */
    opacity: 0;
    animation: sstr-card-entry 0.4s ease forwards, sstr-breathe-glow 4s ease-in-out infinite alternate;
}

@keyframes sstr-breathe-glow {
    0% { box-shadow: var(--glass-highlight-inset), 0 2px 10px rgba(var(--sstr-dyn-rgb, 139, 92, 246), 0.05) !important; }
    100% { box-shadow: var(--glass-highlight-inset), 0 5px 20px rgba(var(--sstr-dyn-rgb, 139, 92, 246), 0.2) !important; }
}

@keyframes sstr-card-entry {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Flashlight Hover Effect Base */
.sstr-card::before,
.sstr-chart-box::before,
.sstr-plat-card::before,
.sstr-post-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
        rgba(255, 255, 255, 0.08),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 5;
}

.sstr-card:hover::before,
.sstr-chart-box:hover::before,
.sstr-plat-card:hover::before,
.sstr-post-card:hover::before {
    opacity: 1;
}

/* Overlay gradient border matching contour exactly */
.sstr-card::after,
.sstr-chart-box::after,
.sstr-plat-card::after,
.sstr-post-card::after,
.sstr-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: radial-gradient(
        400px circle at var(--mouse-x, 0) var(--mouse-y, 0),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.05) 40%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* Hover dynamics for floating cards (Light) */
.sstr-card:hover,
.sstr-plat-card:hover,
.sstr-post-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: var(--glass-highlight-inset), 0 12px 40px rgba(var(--sstr-dyn-rgb, 0, 243, 255), 0.5) !important;
    border-color: rgba(var(--sstr-dyn-rgb, 0, 243, 255), 0.5) !important;
    z-index: 20;
}

/* Micro-animation for text elements on hover */
.sstr-card:hover h3,
.sstr-post-card:hover .sstr-name-minimal {
    color: var(--neon-cyan, #00f3ff);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
    transition: all 0.3s ease;
}

/* Depth for Typographical Elements */
.sstr-card-header,
.sstr-chart-box h3,
.sstr-post-card .sstr-content {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Removing any static rigid borders that were there before */
[class*='sstr-'] {
    border-color: transparent !important;
}


/* --------------------------------------------------------
   4. Sidebar Override (WP Admin Menu) Premium Minimalist
-------------------------------------------------------- */
/* Only applies when inside our plugin due to enqueue scope */
#adminmenuback, #adminmenuwrap, #adminmenu {
    background: transparent !important;
}
#adminmenu {
    background: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, 
#adminmenu li.current a.menu-top, 
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-submenu,
#adminmenu li:hover {
    background: rgba(0, 243, 255, 0.05) !important;
    color: var(--neon-cyan, #00f3ff) !important;
}
#adminmenu div.wp-menu-image::before {
    color: #94a3b8 !important;
    transition: all 0.3s ease;
}
#adminmenu li:hover div.wp-menu-image::before,
#adminmenu li.current div.wp-menu-image::before {
    color: var(--neon-cyan, #00f3ff) !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
    transform: scale(1.1);
}
#collapse-button:hover {
    color: var(--neon-cyan, #00f3ff) !important;
}

/* Frontend Sidebar Support (Vikinger) */
.vikinger-sidebar .menu-item a:hover {
    background: rgba(0, 243, 255, 0.05) !important;
    color: var(--neon-cyan, #00f3ff) !important;
    border-right: 2px solid var(--neon-cyan, #00f3ff);
    transition: all 0.3s ease;
}


/* Feed Cards Immersive Overlay REMOVED. Cards follow natural document flow */

/* --------------------------------------------------------
   5. Mode Assisté (Assisted UX Toggle Focus)
-------------------------------------------------------- */
.sstr-assisted-label {
    display: none;
    font-size: 11px;
    color: var(--sstr-accent-cyan, #06b6d4);
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.sstr-assisted-mode .sstr-assisted-label,
.sstr-assisted-mode .sstr-assisted-label {
    display: block;
    animation: sstr-fade-in 0.3s ease forwards;
}

/* Color Coded helpers in Assisted Mode */
.sstr-assisted-mode .sstr-assisted-color-pos { color: #10b981 !important; }
.sstr-assisted-mode .sstr-assisted-color-neg { color: #f43f5e !important; }
.sstr-assisted-mode .sstr-assisted-color-neu { color: #8b5cf6 !important; }
.sstr-assisted-mode .sstr-assisted-border-warn { border-color: rgba(245, 158, 11, 0.5) !important; }

/* --------------------------------------------------------
   6. Premium Dashboard Zones
-------------------------------------------------------- */
.sstr-zone-hero { padding: 30px 20px; background: linear-gradient(180deg, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0) 100%); border-bottom: 1px solid rgba(255,255,255,0.05); }
.sstr-zone-action { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; }
.sstr-zone-comprehension { padding: 20px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.sstr-zone-feed { padding: 20px; display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
    .sstr-zone-feed { grid-template-columns: 1fr; }
    .sstr-zone-action { flex-direction: column; gap: 10px; }
}

@keyframes sstr-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Premium KPI Box */
.sstr-kpi-block {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}
.sstr-kpi-block:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.sstr-kpi-value { font-size: 32px; font-weight: 800; text-shadow: 0 0 20px rgba(255,255,255,0.2); margin-bottom: 5px; }
.sstr-kpi-title { font-size: 13px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }

/* Toggle Switch Styled */
.sstr-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.sstr-toggle-switch input { opacity: 0; width: 0; height: 0; }
.sstr-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
}
.sstr-slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 3px;
    background-color: #94a3b8; transition: .4s; border-radius: 50%;
}
input:checked + .sstr-slider { background-color: rgba(6, 182, 212, 0.2); border-color: #06b6d4; }
input:checked + .sstr-slider:before { transform: translateX(18px); background-color: #06b6d4; box-shadow: 0 0 10px #06b6d4; }



/* --------------------------------------------------------
   7. Gamification Rangs & Pixel Perfect Posts
-------------------------------------------------------- */
/* Pixel Perfect Post Thumbnails */
.sstr-post-card img.sstr-post-thumb,
.sstr-post-card .sstr-thumbnail img {
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}

/* Gamification Avatar Rings */
.sstr-avatar-wrapper {
    position: relative;
    display: inline-block;
    padding: 3px;
    border-radius: 50%;
}
.sstr-avatar-wrapper img {
    display: block;
    border-radius: 50%;
    z-index: 2;
    position: relative;
}

/* Rangs / IQ Glow */
.sstr-ring-legend {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #dc2626 100%);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}
.sstr-ring-master {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.sstr-ring-active {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}
.sstr-ring-observer {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* --------------------------------------------------------
   8. Mobile Responsiveness (Smartphones < 768px)
-------------------------------------------------------- */
@media (max-width: 768px) {
    /* 1. Scroll Horizontal des filtres */
    .sstr-control-bar {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding-bottom: 20px !important; /* Space for scrollbar */
        -webkit-overflow-scrolling: touch;
    }
    .sstr-control-bar > div {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
    
    /* 2. Compactage du Hero Chart */
    .sstr-dashboard-dark .sstr-module-bg canvas#sstrGlobalHistoryChart {
        height: 250px !important;
        max-height: 250px !important;
    }
    .sstr-dashboard-dark .sstr-module-bg > div[style*="height: 350px"] {
        height: 250px !important;
    }
    
    /* 3. Cartes Ultra-Wide sur mobile */
    .sstr-post-card img.sstr-post-thumb,
    .sstr-post-card .sstr-thumbnail img {
        aspect-ratio: 21/9 !important;
        margin-bottom: 10px !important;
    }
    
    .sstr-post-card {
        padding: 0 !important;
    }
    .sstr-post-card > div[style*="padding: 15px"] {
        padding: 10px !important;
    }
    
    /* Reduce typography sizes */
    .sstr-post-card h3.sstr-name-minimal { font-size: 11px !important; }
    .sstr-post-card div[style*="-webkit-line-clamp"] { font-size: 12px !important; margin-bottom: 10px !important; }
}