/* ============================================================
   MCQ LMS — Global Stylesheet
   ============================================================ */

:root {
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #0891b2;
    --sidebar-bg: #111827;
    --sidebar-link: #9ca3af;
    --sidebar-link-active: #fff;
    --sidebar-link-active-bg: rgba(255,255,255,.1);
    --border-radius: 12px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f1f5f9; }
.auth-page { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { background: var(--sidebar-bg) !important; }

.sidebar-link {
    color: var(--sidebar-link);
    border-radius: 8px;
    padding: .5rem .75rem;
    transition: all .2s;
    text-decoration: none;
    display: block;
}
.sidebar-link:hover,
.sidebar-link.active {
    color: var(--sidebar-link-active) !important;
    background: var(--sidebar-link-active-bg);
}
.sidebar-link.active { font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    min-height: 420px;
    display: flex;
    align-items: center;
}

/* ── Cards ───────────────────────────────────────────────── */
.card { border-radius: var(--border-radius) !important; }
.hover-lift { transition: transform .2s, box-shadow .2s; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,.1) !important; }

/* ── Stat Cards ──────────────────────────────────────────── */
.stat-card { border-radius: var(--border-radius) !important; }
.stat-icon { font-size: 1.4rem; }
.stat-icon-lg { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Category Cards ──────────────────────────────────────── */
.category-card { border-radius: var(--border-radius) !important; transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.12) !important; }

/* ── Exam Cards ──────────────────────────────────────────── */
.exam-card { border-radius: var(--border-radius) !important; transition: transform .2s, box-shadow .2s; }
.exam-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1) !important; }

/* ── Welcome Banner ──────────────────────────────────────── */
.welcome-banner { background: linear-gradient(135deg, var(--primary), #7c3aed); }

/* ── Auth Card ───────────────────────────────────────────── */
.auth-card { border-radius: 20px !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ── Form controls ───────────────────────────────────────── */
.form-control, .form-select { border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

/* ── Tables ──────────────────────────────────────────────── */
.table th { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.table td, .table th { vertical-align: middle; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { font-weight: 500; border-radius: 6px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { margin-top: auto; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { border-radius: 10px; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Pagination ──────────────────────────────────────────── */
.page-link { border-radius: 6px !important; margin: 0 2px; color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ── Responsive Sidebar collapse ─────────────────────────── */
@media (max-width: 767px) {
    .sidebar { position: relative !important; min-height: auto !important; }
    body > .container-fluid > .row { flex-direction: column; }
}