/*
 * CyberSec Academy — TEMA E UNIFIKUAR (2026-04-22)
 * Paletë: matrix green #00ffb3 · neon pink #ff00e5 · electric blue #0ea5e9 · bg #0a0e1a
 * Burimi: landing.css (ULTRA EDTECH CYBER 2026)
 * Qëllimi: njëson admin + dashboard + perdoruesi + leaderboard + login në paletën cyber
 *
 * KUJDES: ky skedar duhet ngarkuar PAS variables.css/main.css/admin style.css
 * që tokenët e tij të mbizotërojnë.
 */

:root {
    /* ---------- PALETA BAZË CYBER ---------- */
    --csa-bg:            #0a0e1a;
    --csa-bg-2:          #0e1424;
    --csa-bg-3:          #141b2e;
    --csa-surface:       rgba(20, 27, 46, .72);
    --csa-surface-2:     rgba(28, 37, 62, .55);
    --csa-border:        rgba(0, 255, 179, .14);
    --csa-border-2:      rgba(255, 255, 255, .06);

    --csa-primary:       #00ffb3;   /* matrix green */
    --csa-primary-dim:   #00cc8f;
    --csa-primary-glow:  rgba(0, 255, 179, .35);
    --csa-accent:        #ff00e5;   /* neon pink */
    --csa-accent-dim:    #cc00b7;
    --csa-blue:          #0ea5e9;   /* electric blue */
    --csa-purple:        #a855f7;
    --csa-warn:          #fbbf24;
    --csa-danger:        #ef4444;
    --csa-success:       #10d981;

    --csa-text:          #e6edf9;
    --csa-text-dim:      #8b96b4;
    --csa-text-mute:     #5b6582;

    /* ---------- TOKENËT EKZISTUES TË PLATFORMËS (override) ---------- */
    /* Primare */
    --primary:           var(--csa-primary);
    --primary-hover:     #25ffc2;
    --primary-dark:      var(--csa-primary-dim);
    --primary-light:     #4affcb;
    --primary-muted:     rgba(0, 255, 179, 0.15);
    --primary-glow:      var(--csa-primary-glow);
    --secondary:         var(--csa-accent);
    --secondary-hover:   var(--csa-accent-dim);
    --accent:            var(--csa-accent);
    --accent-dim:        var(--csa-accent-dim);
    --blue:              var(--csa-blue);
    --cyan:              var(--csa-blue);
    --pink:              var(--csa-accent);
    --purple:            var(--csa-purple);

    /* Status */
    --danger:            var(--csa-danger);
    --danger-muted:      rgba(239, 68, 68, 0.15);
    --warning:           var(--csa-warn);
    --warning-muted:     rgba(251, 191, 36, 0.15);
    --success:           var(--csa-success);
    --success-muted:     rgba(16, 217, 129, 0.15);
    --info:              var(--csa-blue);
    --info-muted:        rgba(14, 165, 233, 0.15);
    --error:             var(--csa-danger);

    /* Sipërfaqet (surface/dark) */
    --bg:                var(--csa-bg);
    --dark:              var(--csa-bg);
    --darker:            #05080f;
    --dark-lighter:      var(--csa-bg-2);
    --dark-card:         var(--csa-bg-3);
    --card:              var(--csa-bg-3);
    --card-hover:        #1a2238;
    --card-active:       #1f2942;
    --surface:           var(--csa-surface);
    --surface-elevated:  var(--csa-bg-3);
    --border:            var(--csa-border);
    --border-hover:      rgba(0, 255, 179, .28);

    /* Text */
    --text:              var(--csa-text);
    --text-secondary:    var(--csa-text-dim);
    --text-muted:        var(--csa-text-mute);
    --text-dim:          var(--csa-text-dim);
    --text-mute:         var(--csa-text-mute);
    --text-inverse:      var(--csa-bg);

    /* Glass */
    --glass:             rgba(20, 27, 46, .55);
    --glass-bg-0:        rgba(20, 27, 46, 0.20);
    --glass-bg-1:        rgba(20, 27, 46, 0.35);
    --glass-bg-2:        rgba(20, 27, 46, 0.55);
    --glass-bg-3:        rgba(20, 27, 46, 0.75);
    --glass-border:      var(--csa-border-2);
    --glass-border-hover: rgba(0, 255, 179, .25);
    --glass-border-active: rgba(0, 255, 179, .45);

    /* Shadows & glow */
    --shadow:            0 8px 32px rgba(0, 0, 0, .45);
    --shadow-card:       0 20px 50px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--csa-border);
    --shadow-lg:         0 30px 70px -30px rgba(0, 0, 0, .8);
    --glow:              0 0 20px rgba(0, 255, 179, .30);
    --glow-lg:           0 0 40px rgba(0, 255, 179, .40);
    --glow-danger:       0 0 20px rgba(239, 68, 68, .30);
    --shadow-glow:       0 0 40px -10px var(--csa-primary-glow);

    /* Neon tokens (rimap nga jeshile violet → jeshile matrix) */
    --neon-green-sm:     0 0 10px rgba(0, 255, 179, .25);
    --neon-green-md:     0 0 20px rgba(0, 255, 179, .35), 0 0 40px rgba(0, 255, 179, .12);
    --neon-green-lg:     0 0 30px rgba(0, 255, 179, .45), 0 0 60px rgba(0, 255, 179, .22);
    --neon-green-text:   0 0 7px rgba(0, 255, 179, .55), 0 0 20px rgba(0, 255, 179, .30);
    --neon-cyan-sm:      0 0 10px rgba(14, 165, 233, .25);
    --neon-cyan-md:      0 0 20px rgba(14, 165, 233, .35), 0 0 40px rgba(14, 165, 233, .12);
    --neon-purple-sm:    0 0 10px rgba(255, 0, 229, .25);
    --neon-purple-md:    0 0 20px rgba(255, 0, 229, .35), 0 0 40px rgba(255, 0, 229, .12);

    /* Gradient-et */
    --gradient:          linear-gradient(135deg, var(--csa-primary) 0%, var(--csa-accent) 100%);
    --gradient-hover:    linear-gradient(135deg, var(--csa-primary-dim) 0%, var(--csa-accent-dim) 100%);
    --gradient-subtle:   linear-gradient(180deg, rgba(0, 255, 179, .08) 0%, transparent 100%);
    --gradient-neon-border: linear-gradient(135deg, var(--csa-primary), var(--csa-accent), var(--csa-blue), var(--csa-primary));
    --gradient-neon-diagonal: linear-gradient(135deg, rgba(0, 255, 179, .15), rgba(14, 165, 233, .15));
    --gradient-dark-radial: radial-gradient(ellipse at top, rgba(0, 255, 179, .08), transparent 70%);
}

/* Selection + scrollbar — njëson dukjen nëpër faqe */
::selection { background: rgba(0, 255, 179, .28); color: var(--csa-text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--csa-bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--csa-primary-dim), var(--csa-accent-dim)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--csa-primary), var(--csa-accent)); }

/* Sfond default për çdo body në platformë (por lë body.csa-landing të pakë­cënuar) */
html, body { background: var(--csa-bg); color: var(--csa-text); }
body.csa-landing { background: var(--csa-bg); }

/* ======== Leaderboard (override i brendshëm) ======== */
body.csa-leaderboard { background: var(--csa-bg) !important; }
body.csa-leaderboard .card {
    background: var(--csa-bg-3) !important;
    border: 1px solid var(--csa-border) !important;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .7);
}
body.csa-leaderboard .rank-table th { color: var(--csa-text-dim); }
body.csa-leaderboard .rank-table tr.me { background: rgba(0, 255, 179, .10) !important; }
body.csa-leaderboard .badge-lvl {
    background: linear-gradient(135deg, var(--csa-primary), var(--csa-accent)) !important;
    color: var(--csa-bg) !important;
    font-weight: 800;
}
body.csa-leaderboard .btn-tab {
    color: var(--csa-text-dim);
    border: 1px solid var(--csa-border) !important;
    background: var(--csa-surface-2);
}
body.csa-leaderboard .btn-tab.active {
    background: linear-gradient(135deg, var(--csa-primary), var(--csa-accent)) !important;
    color: var(--csa-bg) !important;
    border-color: transparent !important;
}
body.csa-leaderboard .my-rank {
    background: linear-gradient(135deg, rgba(0, 255, 179, .18), rgba(255, 0, 229, .12)) !important;
    border: 1px solid var(--csa-border) !important;
}
body.csa-leaderboard h1, body.csa-leaderboard h3 { color: var(--csa-text); }
body.csa-leaderboard a[style*="color:#8b5cf6"] { color: var(--csa-primary) !important; }

/* ======== Admin (ndihmës; style.css e admin i mbulon pjesën tjetër) ======== */
body.admin-body, body.admin-body .sidebar {
    background: var(--csa-bg);
}
.admin-layout .sidebar { border-right-color: var(--csa-border) !important; }
.admin-layout .nav-item.active {
    background: rgba(0, 255, 179, .12) !important;
    color: var(--csa-primary) !important;
    border-left-color: var(--csa-primary) !important;
    box-shadow: -3px 0 10px rgba(0, 255, 179, .25) !important;
}
.admin-layout .logo-text { color: var(--csa-primary) !important; text-shadow: var(--neon-green-text); }

/* ======== Butonat e përbashkët — aksent matrix+pink ======== */
.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, var(--csa-primary), var(--csa-accent));
    color: var(--csa-bg);
    border: none;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--neon-green-md); }

/* ======== GRAFIKET — PALETA CYBER (2026-04-22) ========
 * Zbatohet në të gjitha chart-et SVG/Chart.js/ApexCharts: paletë matrix/pink/blue
 * mbi sfond të errët, grid slate muted. Rregjeneron gradient-et e XP/skill/score.
 */

/* Dashboard SVG chart widgets — dark cyber surface */
.csa-dashboard-charts .csa-chart-card,
.csa-dashboard-charts .chart-card {
    background: var(--csa-bg-3);
    border: 1px solid var(--csa-border);
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 255, 179, .06);
}
.csa-dashboard-charts .csa-chart-head h3,
.csa-dashboard-charts .chart-card-head h3 { color: var(--csa-text); }
.csa-dashboard-charts .csa-chart-sub { color: var(--csa-text-dim); }
.csa-dashboard-charts svg.chart-svg text { fill: var(--csa-text-dim); }
.csa-dashboard-charts .chart-legend { color: var(--csa-text-dim); }
.csa-dashboard-charts .chart-legend strong { color: var(--csa-text); }

/* XP bars — matrix green gradient me shkëlqim neon */
.xp-fill,
.progress-fill,
.level-fill,
.level-bar-fill,
.adv-path-progress-fill,
.ctf-event-progress-fill,
.ac-chain-progress-fill,
.locked-progress-fill,
.adv-percentile-fill {
    background: linear-gradient(90deg, var(--csa-primary), var(--csa-accent)) !important;
    box-shadow: 0 0 10px rgba(0, 255, 179, .35);
}

/* Skill ladder (aftesitë) — neon pink highlight (diferencon nga XP) */
.skill-fill,
.hint-skill-fill,
.adv-skill-fill {
    background: linear-gradient(90deg, var(--csa-accent), var(--csa-primary)) !important;
    box-shadow: 0 0 10px rgba(255, 0, 229, .30);
}

/* Category progress bar (teknika/lab) — electric blue variant */
.progress-bar-fill,
.lab-progress-fill {
    box-shadow: 0 0 8px rgba(0, 255, 179, .20);
}

/* Score/level conic ring (p.sh. percentage ring) — matrix→pink gradient */
.score-ring,
.conic-ring,
.csa-score-ring {
    background: conic-gradient(from -90deg,
        var(--csa-primary) 0%,
        var(--csa-accent) 50%,
        var(--csa-blue) 100%);
}

/* Grafiku i thjeshtë i admin-it: bar chart & list bars në sfond të errët */
.admin-body .simple-chart .chart-bar {
    background: linear-gradient(180deg, var(--csa-primary), var(--csa-primary-dim));
    box-shadow: 0 0 8px rgba(0, 255, 179, .25);
}
.admin-body .day-bar { background: linear-gradient(90deg, var(--csa-primary), var(--csa-accent)); }
.admin-body .inline-bar { background: linear-gradient(90deg, var(--csa-primary), var(--csa-blue)); }

/* Difficulty badges — unifikim global (green/yellow/red) */
.difficulty-badge.fillestar,
.difficulty-badge.beginner,
.difficulty-badge.easy,
.diff-beginner,
.diff-easy,
.rb-scenario-difficulty.easy,
.ctf-challenge-difficulty.easy {
    background: rgba(16, 217, 129, .18) !important;
    color: #10d981 !important;
    border: 1px solid rgba(16, 217, 129, .40);
}
.difficulty-badge.mesatar,
.difficulty-badge.intermediate,
.difficulty-badge.medium,
.diff-medium,
.rb-scenario-difficulty.medium,
.ctf-challenge-difficulty.medium {
    background: rgba(251, 191, 36, .18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, .40);
}
.difficulty-badge.ekspert,
.difficulty-badge.advanced,
.difficulty-badge.hard,
.difficulty-badge.expert,
.diff-hard,
.diff-expert,
.rb-scenario-difficulty.hard,
.ctf-challenge-difficulty.hard,
.ctf-challenge-difficulty.expert {
    background: rgba(239, 68, 68, .18) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, .40);
}

/* Leaderboard bar accent (për rreshtat HBAR) — matrix/pink */
.csa-dashboard-charts .chart-svg-hbar .chart-bar:nth-child(3n+1) { filter: drop-shadow(0 0 3px rgba(0, 255, 179, .35)); }
.csa-dashboard-charts .chart-svg-hbar .chart-bar:nth-child(3n+2) { filter: drop-shadow(0 0 3px rgba(255, 0, 229, .35)); }
.csa-dashboard-charts .chart-svg-hbar .chart-bar:nth-child(3n)   { filter: drop-shadow(0 0 3px rgba(14, 165, 233, .35)); }