@extends('layouts.admin')

@section('content')
<div class="admin-dashboard-page min-h-screen py-2 sm:py-4">

    {{-- HERO --}}
    <section class="admin-dashboard-hero overflow-hidden rounded-[28px] border border-white/10">
        <div class="px-6 py-8 sm:px-8 lg:px-10 lg:py-9">
            <div class="space-y-5 admin-dashboard-reveal admin-dashboard-reveal-delay-1">
                <div class="inline-flex items-center gap-2 rounded-full border border-amber-300/30 bg-amber-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-amber-100 admin-dashboard-shimmer">
                    Admin Command Center
                </div>

                <div class="admin-dashboard-hero-top">
                    <div class="space-y-3">
                        <!--<p class="text-lg font-medium text-amber-100/90 sm:text-xl">Control exams, students and system visibility</p>-->
                        <!--<h1 class="admin-dashboard-title max-w-5xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">-->
                        <!--    Admin Dashboard-->
                        <!--</h1>-->
                        <!--<p class="max-w-3xl text-base leading-7 text-slate-200 sm:text-lg">-->
                        <!--    Review platform activity, manage exam workflows, and track student performance across all exam types.-->
                        <!--</p>-->
                    </div>

                    {{-- PENDING REQUESTS CARD --}}
                    {{--<div class="admin-profile-request-card">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-100/80">Notifications</p>
                            </div>
                            <span class="admin-profile-request-count {{ ($pendingProfileRequestCount ?? 0) > 0 ? 'animate-pulse' : '' }}">
                                {{ $pendingProfileRequestCount ?? 0 }}
                            </span>
                        </div>

                        <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
                            <p class="text-sm leading-6 text-slate-200">
                                {{ ($pendingProfileRequestCount ?? 0) > 0
                                    ? 'Review student department/semester change requests.'
                                    : 'No pending change requests right now.' }}
                            </p>
                            <a href="{{ route('admin.profile_requests.index') }}" class="admin-profile-request-view-btn">
                                View Requests
                            </a>
                        </div>
                    </div> --}}
                </div>

                {{-- STATS --}}
                <div class="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    <a href="{{ route('admin.students.index') }}" class="admin-dashboard-stat admin-dashboard-stat-students admin-dashboard-reveal admin-dashboard-reveal-delay-2">
                        <span class="admin-dashboard-stat-label admin-dashboard-stat-label-gold">Total Students</span>
                        <strong class="admin-dashboard-stat-value admin-dashboard-stat-value-students counter" data-value="{{ $totalStudents }}">0</strong>
                        <span class="admin-dashboard-stat-copy">Open student management</span>
                    </a>

                    <a href="{{ route('admin.exams.index') }}" class="admin-dashboard-stat admin-dashboard-stat-exams admin-dashboard-reveal admin-dashboard-reveal-delay-3">
                        <span class="admin-dashboard-stat-label admin-dashboard-stat-label-soft">Total Exams</span>
                        <strong class="admin-dashboard-stat-value admin-dashboard-stat-value-exams counter" data-value="{{ $totalExams }}">0</strong>
                        <span class="admin-dashboard-stat-copy">{{ $activeExams }} published · {{ $draftExams }} draft</span>
                    </a>

                    <a href="{{ route('admin.exams.index') }}" class="admin-dashboard-stat admin-dashboard-stat-active admin-dashboard-reveal admin-dashboard-reveal-delay-4">
                        <span class="admin-dashboard-stat-label admin-dashboard-stat-label-soft">Total Questions</span>
                        <strong class="admin-dashboard-stat-value admin-dashboard-stat-value-active counter" data-value="{{ $totalQuestions }}">0</strong>
                        <span class="admin-dashboard-stat-copy">Across all tests</span>
                    </a>

                    <a href="{{ route('admin.results.index') }}" class="admin-dashboard-stat admin-dashboard-stat-results admin-dashboard-reveal admin-dashboard-reveal-delay-4">
                        <span class="admin-dashboard-stat-label admin-dashboard-stat-label-soft">Total Attempts</span>
                        <strong class="admin-dashboard-stat-value admin-dashboard-stat-value-results counter" data-value="{{ $totalResults }}">0</strong>
                        <span class="admin-dashboard-stat-copy">
                            @if($avgScore)
                                Avg Score: {{ number_format($avgScore, 1) }}%
                            @else
                                No attempts yet
                            @endif
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- EXAM TYPE BREAKDOWN --}}
    <section class="admin-dashboard-panel p-5 sm:p-7 mt-6 admin-dashboard-reveal admin-dashboard-reveal-delay-2">
        <div class="border-b border-white/10 pb-5 flex items-center justify-between flex-wrap gap-3">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Exam Overview</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Test Distribution by Exam Type</h2>
            </div>
            <a href="{{ route('admin.exams.index') }}" class="text-sm text-cyan-300 hover:text-cyan-200">Manage Exams →</a>
        </div>

        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($examTypeStats as $stat)
                <a href="{{ route('admin.exams.department', $stat['key']) }}" class="exam-type-stat-card">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-amber-200">Exam Type</p>
                            <h3 class="mt-1 text-xl font-bold text-white">{{ $stat['key'] }}</h3>
                            <p class="text-xs text-slate-400 mt-1">{{ $stat['name'] }}</p>
                        </div>
                        <span class="exam-type-stat-badge">{{ $stat['published'] }} live</span>
                    </div>

                    <div class="grid grid-cols-3 gap-2 mt-4">
                        <div class="mini-stat">
                            <p class="mini-stat-label">Total</p>
                            <p class="mini-stat-value">{{ $stat['total'] }}</p>
                        </div>
                        <div class="mini-stat">
                            <p class="mini-stat-label">Live</p>
                            <p class="mini-stat-value text-green-300">{{ $stat['published'] }}</p>
                        </div>
                        <div class="mini-stat">
                            <p class="mini-stat-label">Attempts</p>
                            <p class="mini-stat-value text-cyan-300">{{ $stat['attempts'] }}</p>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

    {{-- TWO COLUMN: Recent Exams + Recent Results --}}
    <div class="mt-6 grid gap-6 xl:grid-cols-2">

        {{-- RECENT EXAMS --}}
        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-3">
            <div class="border-b border-white/10 pb-5 flex items-center justify-between flex-wrap gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Content</p>
                    <h2 class="mt-2 text-2xl font-semibold text-white">Recent Tests</h2>
                </div>
                <a href="{{ route('admin.exams.index') }}" class="text-sm text-cyan-300 hover:text-cyan-200">View All →</a>
            </div>

            <div class="mt-5 space-y-3">
                @forelse($recentExams as $exam)
                    <a href="{{ route('admin.exams.edit', $exam) }}" class="recent-row">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-1 flex-wrap">
                                <span class="mini-badge">{{ $exam->exam_type }}</span>
                                @if($exam->subject && $exam->subject !== 'All Subjects')
                                    <span class="text-xs text-slate-400">📚 {{ $exam->subject }}</span>
                                @endif
                                @if($exam->is_free_test)
                                    <span class="mini-badge mini-badge-free">🎁 Free</span>
                                @endif
                            </div>
                            <p class="text-sm font-semibold text-white truncate">{{ $exam->title }}</p>
                            <p class="text-xs text-slate-400 mt-1">
                                {{ $exam->questions_count }} questions · {{ $exam->duration_minutes }} min
                            </p>
                        </div>
                        <div class="flex flex-col items-end gap-1 flex-shrink-0">
                            <span class="mini-badge {{ $exam->status === 'published' ? 'mini-badge-live' : 'mini-badge-draft' }}">
                                {{ $exam->status === 'published' ? '● Live' : '● Draft' }}
                            </span>
                            <span class="text-xs text-slate-500">{{ $exam->created_at->diffForHumans() }}</span>
                        </div>
                    </a>
                @empty
                    <div class="text-center py-8 text-slate-400 text-sm">No tests created yet.</div>
                @endforelse
            </div>
        </section>

        {{-- RECENT RESULTS --}}
        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-3">
            <div class="border-b border-white/10 pb-5 flex items-center justify-between flex-wrap gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">Activity</p>
                    <h2 class="mt-2 text-2xl font-semibold text-white">Recent Attempts</h2>
                </div>
                <a href="{{ route('admin.results.index') }}" class="text-sm text-cyan-300 hover:text-cyan-200">View All →</a>
            </div>

            <div class="mt-5 space-y-3">
                @forelse($recentResults as $result)
                    <div class="recent-row">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-white truncate">
                                {{ $result->user->name ?? 'Student' }}
                            </p>
                            <p class="text-xs text-slate-400 truncate mt-0.5">
                                {{ $result->exam->title ?? 'Test' }}
                            </p>
                            <p class="text-xs text-slate-500 mt-1">
                                {{ $result->created_at->diffForHumans() }}
                            </p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-lg font-bold {{ $result->percentage >= 60 ? 'text-green-400' : ($result->percentage >= 40 ? 'text-yellow-400' : 'text-red-400') }}">
                                {{ number_format($result->percentage, 1) }}%
                            </p>
                            <p class="text-xs {{ $result->status === 'Pass' ? 'text-green-300' : 'text-red-300' }}">
                                {{ $result->status }}
                            </p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-slate-400 text-sm">No attempts yet.</div>
                @endforelse
            </div>
        </section>
    </div>

    {{-- TWO COLUMN: Top Students + Weak Subjects --}}
    <div class="mt-6 grid gap-6 xl:grid-cols-2">

        {{-- TOP STUDENTS --}}
        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-4">
            <div class="border-b border-white/10 pb-5">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">Leaderboard</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Top Performers</h2>
            </div>

            <div class="mt-5 space-y-3">
                @forelse($topStudents as $index => $row)
                    <div class="leaderboard-row">
                        <div class="flex items-center gap-3">
                            <div class="rank-badge">
                                @if($loop->first) 🥇
                                @elseif($loop->iteration == 2) 🥈
                                @elseif($loop->iteration == 3) 🥉
                                @else #{{ $index + 1 }}
                                @endif
                            </div>
                            <img src="{{ $row->user->profilePhotoUrl() ?? asset('images/default-male.png') }}"
                                 class="w-10 h-10 rounded-full object-cover border border-white/20"
                                 alt="{{ $row->user->name }}">
                            <div>
                                <p class="text-sm font-semibold text-white">{{ $row->user->name }}</p>
                                <p class="text-xs text-slate-400">{{ $row->attempts }} attempts</p>
                            </div>
                        </div>
                        <div class="text-green-400 font-bold text-base">
                            {{ number_format($row->avg_percentage, 1) }}%
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-slate-400 text-sm">No data yet.</div>
                @endforelse
            </div>
        </section>

        {{-- WEAK SUBJECTS --}}
        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-4 border-red-400/20">
            <div class="border-b border-red-400/20 pb-5">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-red-300">⚠️ Attention Areas</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Weakest Subjects</h2>
                <p class="text-xs text-red-200 mt-1">Overall student performance across subjects</p>
            </div>

            <div class="mt-5 space-y-3">
                @forelse($weakSubjects as $weak)
                    <div class="weak-subject-row">
                        <div class="flex-1">
                            <p class="text-sm font-semibold text-white">{{ $weak->subject }}</p>
                            <div class="progress-track mt-2">
                                <div class="progress-fill progress-weak" style="width: {{ max($weak->avg_pct, 3) }}%"></div>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">{{ $weak->attempts }} attempts</p>
                        </div>
                        <div class="text-right ml-3">
                            <p class="text-lg font-bold text-red-400">{{ number_format($weak->avg_pct, 1) }}%</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-slate-400 text-sm">No subject-wise data yet.</div>
                @endforelse
            </div>
        </section>
    </div>

    {{-- QUICK ACTIONS --}}
    <div class="mt-6 grid gap-6 xl:grid-cols-2">
        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-2">
            <div class="border-b border-white/10 pb-5">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Administration</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Quick Actions</h2>
            </div>

            <div class="mt-6 grid gap-4 sm:grid-cols-2">
                <a href="{{ route('admin.exams.create') }}" class="admin-dashboard-card">
                    <span class="admin-dashboard-card-title">➕ Create Exam</span>
                    <p class="admin-dashboard-card-copy">Build a new test with subjects, difficulty, and schedule.</p>
                </a>
                <a href="{{ route('admin.students.index') }}" class="admin-dashboard-card">
                    <span class="admin-dashboard-card-title">👥 Manage Students</span>
                    <p class="admin-dashboard-card-copy">Review accounts, permissions, and lifecycle actions.</p>
                </a>
                <a href="{{ route('admin.exams.index') }}" class="admin-dashboard-card">
                    <span class="admin-dashboard-card-title">📚 Exam Catalog</span>
                    <p class="admin-dashboard-card-copy">Browse and edit all tests across exam types.</p>
                </a>
                <a href="{{ route('admin.results.index') }}" class="admin-dashboard-card">
                    <span class="admin-dashboard-card-title">📊 View Results</span>
                    <p class="admin-dashboard-card-copy">Track attempts, scores, and pass/fail trends.</p>
                </a>
            </div>
        </section>

        <section class="admin-dashboard-panel p-5 sm:p-7 admin-dashboard-reveal admin-dashboard-reveal-delay-3">
            <div class="border-b border-white/10 pb-5">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">Platform Health</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">System Overview</h2>
            </div>

            <div class="mt-6 space-y-4">
                <div class="health-row">
                    <span class="health-label">🎁 Free Tests Used</span>
                    <span class="health-value">{{ $freeTestsUsed }}</span>
                </div>
                <div class="health-row">
                    <span class="health-label">📝 Total Questions</span>
                    <span class="health-value">{{ $totalQuestions }}</span>
                </div>
                <div class="health-row">
                    <span class="health-label">📊 Average Score</span>
                    <span class="health-value {{ $avgScore && $avgScore >= 60 ? 'text-green-300' : 'text-amber-300' }}">
                        {{ $avgScore ? number_format($avgScore, 1) . '%' : '—' }}
                    </span>
                </div>
                <div class="health-row">
                    <span class="health-label">⏳ Pending Requests</span>
                    <span class="health-value {{ $pendingProfileRequestCount > 0 ? 'text-amber-300' : '' }}">
                        {{ $pendingProfileRequestCount }}
                    </span>
                </div>
                <div class="health-row">
                    <span class="health-label">📈 Active Exams</span>
                    <span class="health-value text-green-300">{{ $activeExams }}</span>
                </div>
            </div>
        </section>
    </div>
</div>

<style>
    .admin-dashboard-page { position: relative; }

    .admin-dashboard-hero {
        position: relative;
        background: linear-gradient(135deg, rgba(10,16,30,0.78), rgba(15,23,42,0.58)),
                    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04));
        backdrop-filter: blur(12px) saturate(125%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 28px 70px rgba(2,6,23,0.45);
    }

    .admin-dashboard-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.16) 40%, transparent 58%);
        transform: translateX(-120%);
        animation: adminDashboardHeroSweep 8s ease-in-out infinite;
        pointer-events: none;
    }

    .admin-dashboard-hero > * { position: relative; z-index: 1; }

    .admin-dashboard-panel {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.18);
        background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)), rgba(15,23,42,0.70);
        backdrop-filter: blur(10px) saturate(125%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 20px 50px rgba(2,6,23,0.38);
        border-radius: 24px;
    }

    .admin-dashboard-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 34%);
        pointer-events: none;
    }

    .admin-dashboard-panel > * { position: relative; z-index: 1; }

    .admin-dashboard-stat,
    .admin-dashboard-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.16);
        background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)), rgba(15,23,42,0.42);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
        border-radius: 20px;
        padding: 1rem;
        transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
        text-decoration: none;
        display: block;
    }

    .admin-dashboard-hero-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .admin-profile-request-card {
        position: relative;
        width: min(100%, 24rem);
        border: 1px solid rgba(250, 204, 21, 0.18);
        border-radius: 1.5rem;
        background: linear-gradient(180deg, rgba(250, 204, 21, 0.09), rgba(255, 255, 255, 0.04)), rgba(15, 23, 42, 0.5);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
        padding: 1rem;
    }

    .admin-profile-request-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.6rem;
        height: 2.6rem;
        border-radius: 999px;
        border: 1px solid rgba(250, 204, 21, 0.25);
        background: rgba(250, 204, 21, 0.12);
        color: rgb(253 224 71);
        font-size: 1rem;
        font-weight: 700;
    }

    .admin-profile-request-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
        padding: 0.55rem 0.85rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: white;
        margin-top: 0.9rem;
        background: rgba(37, 99, 235, 0.9);
        transition: filter 0.2s ease;
    }
    .admin-profile-request-view-btn:hover { filter: brightness(1.1); }

    .admin-dashboard-stat:hover,
    .admin-dashboard-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 28px rgba(2, 6, 23, 0.28);
    }

    .admin-dashboard-stat-students { background: linear-gradient(180deg, rgba(250, 204, 21, 0.22), rgba(255, 255, 255, 0.06)), rgba(15, 23, 42, 0.42); }
    .admin-dashboard-stat-exams { background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(255, 255, 255, 0.06)), rgba(15, 23, 42, 0.42); }
    .admin-dashboard-stat-active { background: linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(255, 255, 255, 0.06)), rgba(15, 23, 42, 0.42); }
    .admin-dashboard-stat-results { background: linear-gradient(180deg, rgba(244, 114, 182, 0.22), rgba(255, 255, 255, 0.06)), rgba(15, 23, 42, 0.42); }

    .admin-dashboard-stat-label {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgb(203 213 225);
    }
    .admin-dashboard-stat-label-gold { color: rgb(253 224 71); }
    .admin-dashboard-stat-label-soft { color: rgb(236 245 255); }

    .admin-dashboard-stat-value {
        display: block;
        margin-top: 0.7rem;
        font-size: 1.85rem;
        line-height: 1.1;
        font-weight: 700;
    }
    .admin-dashboard-stat-value-students { color: rgb(255 243 176); text-shadow: 0 0 22px rgba(251, 191, 36, 0.24); }
    .admin-dashboard-stat-value-exams { color: rgb(179 229 252); text-shadow: 0 0 20px rgba(56, 189, 248, 0.24); }
    .admin-dashboard-stat-value-active { color: rgb(187 247 208); text-shadow: 0 0 22px rgba(34, 197, 94, 0.24); }
    .admin-dashboard-stat-value-results { color: rgb(251 207 232); text-shadow: 0 0 22px rgba(244, 114, 182, 0.24); }

    .admin-dashboard-stat-copy {
        display: block;
        margin-top: 0.65rem;
        color: rgb(229 231 235);
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .admin-dashboard-title { text-shadow: 0 6px 24px rgba(15, 23, 42, 0.34); }

    .admin-dashboard-card { display: grid; gap: 0.4rem; }
    .admin-dashboard-card-title { color: white; font-size: 1rem; font-weight: 700; }
    .admin-dashboard-card-copy { color: rgb(226 232 240); font-size: 0.9rem; line-height: 1.55; }

    /* Exam type stat cards */
    .exam-type-stat-card {
        position: relative;
        padding: 1.1rem;
        border-radius: 1.25rem;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(15,23,42,0.6), rgba(8,10,34,0.72));
        transition: transform 0.25s ease, border-color 0.25s ease;
        text-decoration: none;
        display: block;
    }
    .exam-type-stat-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,0.4); }

    .exam-type-stat-badge {
        display: inline-flex; padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        background: rgba(34,197,94,0.15);
        border: 1px solid rgba(34,197,94,0.35);
        color: #86efac; font-size: 0.65rem; font-weight: 700;
    }

    .mini-stat {
        padding: 0.6rem 0.5rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.03);
        text-align: center;
    }
    .mini-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; font-weight: 700; }
    .mini-stat-value { font-size: 1.1rem; font-weight: 800; color: white; margin-top: 0.15rem; }

    /* Recent rows */
    .recent-row {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.02);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .recent-row:hover { background: rgba(34,211,238,0.05); border-color: rgba(34,211,238,0.3); }

    .mini-badge {
        display: inline-flex; padding: 0.15rem 0.5rem;
        border-radius: 0.35rem;
        font-size: 0.65rem; font-weight: 700;
        background: rgba(34,211,238,0.15);
        border: 1px solid rgba(34,211,238,0.35);
        color: #67e8f9;
    }
    .mini-badge-live { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); color: #86efac; }
    .mini-badge-draft { background: rgba(234,179,8,0.15); border-color: rgba(234,179,8,0.4); color: #fde047; }
    .mini-badge-free { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.4); color: #d8b4fe; }

    /* Leaderboard */
    .leaderboard-row {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.02);
    }
    .rank-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.25rem; height: 2.25rem;
        border-radius: 0.6rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        font-size: 0.9rem; font-weight: 700;
    }

    .leaderboard-row:nth-child(1) { animation: goldGlow 2.5s ease-in-out infinite alternate; }
    .leaderboard-row:nth-child(2) { animation: silverGlow 3s ease-in-out infinite alternate; }
    .leaderboard-row:nth-child(3) { animation: bronzeGlow 3.5s ease-in-out infinite alternate; }
    @keyframes goldGlow { from { box-shadow: 0 0 8px rgba(250,204,21,0.15); } to { box-shadow: 0 0 20px rgba(250,204,21,0.5); } }
    @keyframes silverGlow { from { box-shadow: 0 0 8px rgba(209,213,219,0.15); } to { box-shadow: 0 0 20px rgba(209,213,219,0.4); } }
    @keyframes bronzeGlow { from { box-shadow: 0 0 8px rgba(251,146,60,0.15); } to { box-shadow: 0 0 20px rgba(251,146,60,0.4); } }

    /* Weak subject row */
    .weak-subject-row {
        display: flex; align-items: center; gap: 1rem;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(239,68,68,0.2);
        background: rgba(239,68,68,0.04);
    }
    .progress-track { height: 7px; background: rgba(255,255,255,0.08); border-radius: 9999px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 9999px; transition: width 0.8s ease; }
    .progress-weak { background: linear-gradient(90deg, #dc2626, #f87171); }

    /* Health rows */
    .health-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.02);
    }
    .health-label { color: #cbd5e1; font-size: 0.88rem; }
    .health-value { color: white; font-weight: 700; font-size: 1rem; }

    .admin-dashboard-reveal { opacity: 0; transform: translateY(22px); animation: adminDashboardReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .admin-dashboard-reveal-delay-1 { animation-delay: 0.06s; }
    .admin-dashboard-reveal-delay-2 { animation-delay: 0.14s; }
    .admin-dashboard-reveal-delay-3 { animation-delay: 0.22s; }
    .admin-dashboard-reveal-delay-4 { animation-delay: 0.3s; }

    .admin-dashboard-shimmer { position: relative; overflow: hidden; }
    .admin-dashboard-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.22) 45%, transparent 70%); transform: translateX(-135%); animation: adminDashboardBadgeShimmer 6.5s ease-in-out infinite; }

    @keyframes adminDashboardReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes adminDashboardHeroSweep { 0%,100% { transform: translateX(-120%); } 45%,55% { transform: translateX(120%); } }
    @keyframes adminDashboardBadgeShimmer { 0%,100% { transform: translateX(-135%); } 48%,60% { transform: translateX(135%); } }

    @media (prefers-reduced-motion: reduce) {
        .admin-dashboard-hero::after,
        .admin-dashboard-shimmer::after,
        .admin-dashboard-reveal { animation: none !important; opacity: 1; transform: none; }
    }

    @media (max-width: 640px) {
        .admin-dashboard-hero-top { flex-direction: column; }
        .admin-profile-request-card { width: 100%; }
        .admin-dashboard-stat { padding: 0.9rem; }
        .admin-dashboard-stat-value { margin-top: 0.55rem; font-size: 1.5rem; }
        .admin-dashboard-stat-copy { font-size: 0.8rem; }
        .admin-dashboard-card-title { font-size: 0.9rem; }
        .admin-dashboard-card-copy { font-size: 0.82rem; }
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".counter").forEach((counter) => {
        const target = parseFloat(counter.getAttribute("data-value")) || 0;
        let count = 0;
        const step = Math.max(1, Math.ceil(target / 40));
        const speed = 30;

        const update = () => {
            if (count < target) {
                count += step;
                if (count > target) count = target;
                counter.textContent = Math.floor(count);
                setTimeout(update, speed);
            } else {
                counter.textContent = Math.floor(target);
            }
        };

        update();
    });
});
</script>
@endsection