/* ============================================================
   AcademyScanner — Theme Global Tokens  (2026-04-22)
   Palete e unifikuar e platformes, e ekstraktuar nga:
     - views/auth/login.php (layouts/auth-login.php)
     - public/css/landing.css (:root .as-landing)
   Dark-first, me light-mode fallback.
   Ngjyrat kryesore:
     Primary   #6366f1  (indigo)
     Primary-2 #4f46e5
     Accent    #f59e0b  (amber)
     Pink      #ec4899
     Cyan      #06b6d4
     Success   #10b981
     Danger    #ef4444
     Bg        #0a0a0f (dark) / #fafafb (light)
     Surface   #13141c (dark) / #ffffff (light)
   Ky file RIMAPPON tokens ekzistuese te app.css / dashboard.css
   per te ruajtur perputhshmerine me klasat aktuale.
   ============================================================ */

:root {
    color-scheme: light dark;

    /* ---------- Paleta kryesore (tokens theme-*) ---------- */
    --theme-primary: #6366f1;
    --theme-primary-2: #4f46e5;
    --theme-primary-soft: rgba(99, 102, 241, .12);
    --theme-accent: #f59e0b;
    --theme-accent-2: #d97706;
    --theme-pink: #ec4899;
    --theme-cyan: #06b6d4;
    --theme-success: #10b981;
    --theme-danger: #ef4444;
    --theme-warning: #f59e0b;
    --theme-info: #06b6d4;

    /* ---------- Light surfaces (default) ---------- */
    --theme-bg:         #fafafb;
    --theme-bg-2:       #f4f4f7;
    --theme-surface:    #ffffff;
    --theme-surface-2:  #fbfbfd;
    --theme-ink:        #0a0a0f;
    --theme-ink-2:      #1f2330;
    --theme-ink-3:      #4b5061;
    --theme-ink-4:      #8a8fa3;
    --theme-border:     rgba(10, 10, 15, .10);
    --theme-border-2:   rgba(10, 10, 15, .16);

    --theme-focus-ring: 0 0 0 3px rgba(99, 102, 241, .25);
    --theme-shadow-glow: 0 0 0 1px rgba(99,102,241,.20), 0 24px 60px -20px rgba(99,102,241,.45);
    --theme-scrollbar-thumb: rgba(99, 102, 241, .45);
    --theme-scrollbar-track: rgba(10, 10, 15, .05);

    /* ---------- Rimapping i tokens ekzistuese (app.css / modern.css) ---------- */
    --bg-primary:       var(--theme-bg);
    --bg-secondary:     var(--theme-bg-2);
    --bg-tertiary:      var(--theme-surface-2);
    --bg-card:          var(--theme-surface);
    --bg-card-hover:    var(--theme-surface-2);

    --text-primary:     var(--theme-ink);
    --text-secondary:   var(--theme-ink-2);
    --text-muted:       var(--theme-ink-3);

    --border-color:     var(--theme-border);
    --border-light:     var(--theme-border);
    --border-focus:     rgba(99, 102, 241, .40);

    --primary:          var(--theme-primary);
    --primary-dark:     var(--theme-primary-2);
    --primary-light:    var(--theme-primary-soft);
    --primary-rgb:      99, 102, 241;
    --accent:           var(--theme-accent);
    --accent-hover:     var(--theme-accent-2);
    --gradient-start:   var(--theme-primary-2);
    --gradient-end:     var(--theme-pink);
    --success:          var(--theme-success);
    --danger:           var(--theme-danger);
    --warning:          var(--theme-warning);
    --info:             var(--theme-info);

    --score-0:   #ef4444;
    --score-25:  #f59e0b;
    --score-50:  #eab308;
    --score-75:  #6366f1;
    --score-100: #10b981;

    --gradient-accent-1: var(--theme-primary);
    --gradient-accent-2: var(--theme-primary-2);
    --gradient-accent-3: var(--theme-pink);
    --gradient-mesh-1:   rgba(99, 102, 241, .35);
    --gradient-mesh-2:   rgba(79, 70, 229, .25);
    --gradient-mesh-3:   rgba(236, 72, 153, .25);
    --gradient-mesh-4:   rgba(245, 158, 11, .15);

    --glass-bg:     rgba(255, 255, 255, .72);
    --glass-border: rgba(10, 10, 15, .08);
    --glass-shadow: 0 12px 32px -12px rgba(10, 10, 15, .18);

    --md-primary:       var(--theme-primary);
    --md-primary-hover: var(--theme-primary-2);
    --md-success:       var(--theme-success);
    --md-warning:       var(--theme-warning);
    --md-danger:        var(--theme-danger);
}

/* ---------- Dark theme (auto + manual) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --theme-bg:         #0a0a0f;
        --theme-bg-2:       #0e0f16;
        --theme-surface:    #13141c;
        --theme-surface-2:  #181924;
        --theme-ink:        #f5f6fb;
        --theme-ink-2:      #e2e4ef;
        --theme-ink-3:      #a6a9bd;
        --theme-ink-4:      #6b6f85;
        --theme-border:     rgba(255, 255, 255, .08);
        --theme-border-2:   rgba(255, 255, 255, .14);
        --theme-scrollbar-track: rgba(255, 255, 255, .05);

        --glass-bg:     rgba(19, 20, 28, .68);
        --glass-border: rgba(255, 255, 255, .08);
        --glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
    }
}
[data-bs-theme="dark"] {
    --theme-bg:         #0a0a0f;
    --theme-bg-2:       #0e0f16;
    --theme-surface:    #13141c;
    --theme-surface-2:  #181924;
    --theme-ink:        #f5f6fb;
    --theme-ink-2:      #e2e4ef;
    --theme-ink-3:      #a6a9bd;
    --theme-ink-4:      #6b6f85;
    --theme-border:     rgba(255, 255, 255, .08);
    --theme-border-2:   rgba(255, 255, 255, .14);
    --theme-scrollbar-track: rgba(255, 255, 255, .05);

    --glass-bg:     rgba(19, 20, 28, .68);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
}

/* ============================================================
   BODY / SURFACES
   ============================================================ */
body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-ink-2) !important;
}
body > main, main#mainContent {
    color: var(--theme-ink-2);
}

/* Bootstrap backgrounds override */
.bg-white          { background-color: var(--theme-surface) !important; }
.bg-light          { background-color: var(--theme-bg-2) !important; }
.bg-body           { background-color: var(--theme-bg) !important; }
.bg-body-tertiary  { background-color: var(--theme-surface-2) !important; }
.bg-dark           { background-color: #0a0a0f !important; }

/* Cards / surfaces */
.card, .md-card {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-ink-2);
}
.card-header {
    background-color: var(--theme-surface-2);
    border-bottom-color: var(--theme-border);
}

/* Glass card (login + everywhere) */
.glass-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: var(--theme-ink); }
.text-muted       { color: var(--theme-ink-3) !important; }
.text-body        { color: var(--theme-ink-2) !important; }
.text-dark        { color: var(--theme-ink) !important; }
.text-primary     { color: var(--theme-primary) !important; }
.text-accent      { color: var(--theme-accent) !important; }
.text-pink        { color: var(--theme-pink) !important; }
.text-success     { color: var(--theme-success) !important; }
.text-danger      { color: var(--theme-danger) !important; }
.text-warning     { color: var(--theme-accent) !important; }
.text-info        { color: var(--theme-cyan) !important; }

/* Links */
a { color: var(--theme-primary); }
a:hover { color: var(--theme-primary-2); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    --bs-btn-bg:              var(--theme-primary);
    --bs-btn-border-color:    var(--theme-primary);
    --bs-btn-hover-bg:        var(--theme-primary-2);
    --bs-btn-hover-border-color: var(--theme-primary-2);
    --bs-btn-active-bg:       var(--theme-primary-2);
    --bs-btn-active-border-color: var(--theme-primary-2);
    --bs-btn-disabled-bg:     var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(99,102,241,.2), 0 6px 16px rgba(99,102,241,.18);
}
.btn-outline-primary {
    --bs-btn-color:           var(--theme-primary);
    --bs-btn-border-color:    var(--theme-primary);
    --bs-btn-hover-bg:        var(--theme-primary);
    --bs-btn-hover-border-color: var(--theme-primary);
    --bs-btn-hover-color:     #fff;
    --bs-btn-active-bg:       var(--theme-primary-2);
    --bs-btn-active-border-color: var(--theme-primary-2);
}
.btn-success     { --bs-btn-bg: var(--theme-success); --bs-btn-border-color: var(--theme-success); --bs-btn-hover-bg: #0d9b6c; --bs-btn-hover-border-color: #0d9b6c; }
.btn-danger      { --bs-btn-bg: var(--theme-danger);  --bs-btn-border-color: var(--theme-danger);  --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; }
.btn-warning     { --bs-btn-bg: var(--theme-accent);  --bs-btn-border-color: var(--theme-accent);  --bs-btn-hover-bg: var(--theme-accent-2); --bs-btn-hover-border-color: var(--theme-accent-2); color: #fff; }
.btn-info        { --bs-btn-bg: var(--theme-cyan);    --bs-btn-border-color: var(--theme-cyan);    --bs-btn-hover-bg: #0891b2; --bs-btn-hover-border-color: #0891b2; color: #fff; }
.btn-secondary   { --bs-btn-bg: var(--theme-surface-2); --bs-btn-border-color: var(--theme-border-2); --bs-btn-color: var(--theme-ink-2); --bs-btn-hover-bg: var(--theme-surface); --bs-btn-hover-border-color: var(--theme-border-2); --bs-btn-hover-color: var(--theme-ink); }

/* Gradient brand button (opsional) */
.btn-gradient {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-pink) 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 24px rgba(99,102,241,.35);
    transition: transform .2s, box-shadow .2s;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(236,72,153,.35); color: #fff; }

/* ============================================================
   NAVBAR
   ============================================================ */
.bg-primary-gradient {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1b2e 35%, var(--theme-primary-2) 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 20px rgba(0,0,0,.25);
}
.navbar .nav-link       { color: rgba(255,255,255,.82); }
.navbar .nav-link:hover { color: #fff; }

/* ============================================================
   FORMS & FOCUS
   ============================================================ */
.form-control, .form-select {
    background-color: var(--theme-surface);
    border-color: var(--theme-border-2);
    color: var(--theme-ink-2);
}
.form-control::placeholder { color: var(--theme-ink-4); }
.form-control:focus, .form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-focus-ring);
    background-color: var(--theme-surface);
    color: var(--theme-ink);
}
.input-group-text {
    background-color: var(--theme-surface-2);
    border-color: var(--theme-border-2);
    color: var(--theme-ink-3);
}
.form-label { color: var(--theme-ink-2); }

:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--theme-ink-2);
    --bs-table-border-color: var(--theme-border);
    --bs-table-striped-bg: var(--theme-surface-2);
    --bs-table-hover-bg: var(--theme-primary-soft);
    color: var(--theme-ink-2);
}
.table > thead {
    background-color: var(--theme-surface-2);
    color: var(--theme-ink);
}
.table > thead th {
    background-color: var(--theme-surface-2);
    color: var(--theme-ink);
    border-bottom: 1px solid var(--theme-border-2);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .78rem;
}

/* ============================================================
   BADGES (CTF highlights respected via .badge-ctf-* below)
   ============================================================ */
.badge.bg-primary   { background-color: var(--theme-primary) !important; }
.badge.bg-success   { background-color: var(--theme-success) !important; }
.badge.bg-danger    { background-color: var(--theme-danger) !important; }
.badge.bg-warning   { background-color: var(--theme-accent) !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--theme-cyan) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--theme-ink-3) !important; }

/* CTF flag ngjyra specifike — ruajme highlight-et */
.ctf-easy   { color: var(--theme-success); }
.ctf-medium { color: var(--theme-accent); }
.ctf-hard   { color: var(--theme-pink); }
.ctf-expert { color: var(--theme-danger); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert-primary   { background-color: rgba(99,102,241,.10);  border-color: rgba(99,102,241,.25);  color: var(--theme-primary); }
.alert-success   { background-color: rgba(16,185,129,.10);  border-color: rgba(16,185,129,.25);  color: var(--theme-success); }
.alert-danger    { background-color: rgba(239,68,68,.10);   border-color: rgba(239,68,68,.25);   color: var(--theme-danger); }
.alert-warning   { background-color: rgba(245,158,11,.10);  border-color: rgba(245,158,11,.25);  color: var(--theme-accent-2); }
.alert-info      { background-color: rgba(6,182,212,.10);   border-color: rgba(6,182,212,.25);   color: var(--theme-cyan); }

/* ============================================================
   DROPDOWNS / LIST GROUPS / MODALS
   ============================================================ */
.dropdown-menu {
    background-color: var(--theme-surface);
    border-color: var(--theme-border-2);
    box-shadow: var(--glass-shadow);
}
.dropdown-item { color: var(--theme-ink-2); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--theme-primary-soft);
    color: var(--theme-primary);
}
.dropdown-divider { border-color: var(--theme-border); }
.list-group-item {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-ink-2);
}
.modal-content {
    background-color: var(--theme-surface);
    border-color: var(--theme-border-2);
    color: var(--theme-ink-2);
}
.modal-header, .modal-footer { border-color: var(--theme-border); }

/* ============================================================
   SCROLLBARS (kromatike)
   ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-track  { background: var(--theme-scrollbar-track); }
*::-webkit-scrollbar-thumb  {
    background: linear-gradient(180deg, var(--theme-primary), var(--theme-pink));
    border-radius: 8px;
    border: 2px solid var(--theme-scrollbar-track);
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--theme-primary-2), var(--theme-accent)); }

/* ============================================================
   PROGRESS / SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-pink), var(--theme-accent));
}
.progress-bar { background-color: var(--theme-primary); }
.progress-bar.bg-success { background-color: var(--theme-success) !important; }
.progress-bar.bg-danger  { background-color: var(--theme-danger)  !important; }
.progress-bar.bg-warning { background-color: var(--theme-accent)  !important; }

/* ============================================================
   UNIVERSITY HEADER (dashboard.css ka gradient hardcoded)
   ============================================================ */
.university-header {
    background: linear-gradient(135deg, #0a0a0f 0%, #13141c 40%, var(--theme-primary-2) 100%) !important;
}
.university-header::after {
    background: radial-gradient(circle at 70% 50%, rgba(245,158,11,.18) 0%, transparent 70%),
                radial-gradient(circle at 20% 80%, rgba(236,72,153,.20) 0%, transparent 65%) !important;
}

/* ============================================================
   FAB / Dark-mode toggle mbeten te zbrazura
   ============================================================ */
.fab-scan {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-pink) 100%) !important;
    box-shadow: 0 12px 32px -8px rgba(99,102,241,.55) !important;
}
.dark-mode-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
}
.dark-mode-toggle:hover { background: rgba(255,255,255,.14); }