/**
 * Social Scrape V2 - Premium Neon System
 * Signature Visual Language
 */

:root {
    /* Base Neon Colors */
    --neon-cyan: #00f3ff;
    --neon-magenta: #ff00ff;
    --neon-green: #39ff14;

    /* Glow Definitions */
    --glow-text-cyan: 0 0 8px rgba(0, 243, 255, 0.45), 0 0 16px rgba(0, 243, 255, 0.25);
    --glow-text-magenta: 0 0 8px rgba(255, 0, 255, 0.45), 0 0 16px rgba(255, 0, 255, 0.25);
    --glow-text-green: 0 0 8px rgba(57, 255, 20, 0.45), 0 0 16px rgba(57, 255, 20, 0.25);
    --glow-text-amber: 0 0 8px rgba(245, 158, 11, 0.45), 0 0 16px rgba(245, 158, 11, 0.25);
    --glow-text-red: 0 0 8px rgba(239, 68, 68, 0.45), 0 0 16px rgba(239, 68, 68, 0.25);

    --glow-box-cyan: 0 0 20px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1);
    --glow-box-magenta: 0 0 20px rgba(255, 0, 255, 0.2), inset 0 0 10px rgba(255, 0, 255, 0.1);
    --glow-box-green: 0 0 20px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(16, 185, 129, 0.1);
    --glow-box-amber: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(245, 158, 11, 0.1);
    --glow-box-red: 0 0 20px rgba(239, 68, 68, 0.3), inset 0 0 10px rgba(239, 68, 68, 0.1);
}

/* --------------------------------------------------------
   1. Data Principale (CYAN) - Vues, Interactions, Abonnés
-------------------------------------------------------- */
.sstr-neon-cyan,
.neon-data-main {
    color: var(--neon-cyan) !important;
    text-shadow: var(--glow-text-cyan) !important;
}

/* Auto-target KPIs where possible */
.sstr-plat-stats-box strong, 
.sstr-counter.neon-cyan,
[title*="Vues"] {
    color: var(--neon-cyan) !important;
    text-shadow: var(--glow-text-cyan) !important;
}

/* --------------------------------------------------------
   2. Alertes / Engagement (MAGENTA)
-------------------------------------------------------- */
.sstr-neon-magenta,
.neon-data-engage {
    color: var(--neon-magenta) !important;
    text-shadow: var(--glow-text-magenta) !important;
}

.sstr-global-eng-val,
.sstr-eng-score {
    color: var(--neon-magenta) !important;
    text-shadow: var(--glow-text-magenta) !important;
}

/* --------------------------------------------------------
   Holographic Typography (SaaS Elite)
-------------------------------------------------------- */
.sstr-holographic-text,
.sstr-kpi-value,
.sstr-global-eng-val {
    background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 50%, #818cf8 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important; /* Glow is handled by a drop shadow filter if needed, text-shadow breaks background-clip */
    filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.4));
}
.sstr-global-eng-val {
    background: linear-gradient(135deg, #ffffff 0%, #f472b6 50%, #e81cff 100%);
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.4));
}

/* --------------------------------------------------------
   3. Positif (VERT NÉON)
-------------------------------------------------------- */
.sstr-neon-green,
.neon-data-positive {
    color: var(--neon-green) !important;
    text-shadow: var(--glow-text-green) !important;
}

/* Any green text should glow */
[style*="color: #10b981"],
[style*="color:#10b981"],
.sstr-positive-trend {
    color: var(--neon-green) !important;
    text-shadow: var(--glow-text-green) !important;
}

/* --------------------------------------------------------
   4. Hovers (Box Shadow Glows)
-------------------------------------------------------- */
.sstr-card,
.sstr-plat-card,
.sstr-post-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

/* Card hover glow (Cyan by default) */
.sstr-card:hover,
.sstr-plat-card:hover,
.sstr-post-card:hover {
    box-shadow: var(--glow-box-cyan), 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Specific engagement or alert cards */
.sstr-card.engage-focus:hover {
    box-shadow: var(--glow-box-magenta), 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------
   5. Focus / Sélection Active (Buttons, Controls)
-------------------------------------------------------- */
.sstr-btn:hover,
.button:hover,
.sstr-action-btn:hover {
    box-shadow: var(--glow-box-cyan) !important;
    border-color: var(--neon-cyan) !important;
    color: #fff !important;
}

/* Active navigation or filters */
.sstr-chart-filters a[style*="background"], /* Naive current active filter detection */
.sstr-nav-active,
.sstr-active-tab {
    box-shadow: var(--glow-box-cyan) !important;
}

/* Chart Tooltips */
.chartjs-tooltip {
    box-shadow: var(--glow-box-cyan) !important;
    border: 1px solid var(--neon-cyan) !important;
}

/* Inputs and Selects Focus */
select:focus,
input:focus {
    outline: none !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--glow-box-cyan) !important;
}

/* Active click bounce (Tactile feedback) */
.sstr-btn:active, .button-primary:active, .sstr-action-btn:active, .sstr-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}