:root {
    --bg-main: #f4f7f6;
    --bg-card: #ffffff;
    --text-main: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --modal-header-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] {
    --bg-main: #121212;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333333;
    --modal-header-bg: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gradients */
.bg-gradient-primary { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); }
.bg-gradient-success { background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%); }
.bg-gradient-info { background: linear-gradient(135deg, #36b9cc 0%, #258391 100%); }

.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
}

.student-card {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.student-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #4e73df, #36b9cc);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.student-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-hover-shadow) !important;
}

.student-card:hover::before {
    opacity: 1;
}

.stat-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.filter-card {
    border-radius: 16px;
    background-color: var(--bg-card);
}

.form-control, .form-select, .input-group-text {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
    border-color: #4e73df;
}

.text-muted {
    color: var(--text-muted) !important;
}

.status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.75rem;
    padding: 0.5em 1em;
    border-radius: 30px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}

.pass-status {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.fail-status {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

[data-theme="dark"] .pass-status {
    background-color: rgba(25, 135, 84, 0.2);
    color: #75b798;
    border-color: #198754;
}

[data-theme="dark"] .fail-status {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ea868f;
    border-color: #dc3545;
}

.table {
    color: var(--text-main);
    border-color: var(--border-color);
}

.table-custom th {
    background-color: var(--bg-main);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--border-color);
    padding: 12px 8px;
}

.table-hover tbody tr:hover {
    color: var(--text-main);
    background-color: var(--bg-main);
}

.grade-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.grade-O, .grade-A\+ { background: linear-gradient(135deg, #198754 0%, #146c43 100%); }
.grade-A { background: linear-gradient(135deg, #20c997 0%, #1aa179 100%); }
.grade-B { background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%); }
.grade-C { background: linear-gradient(135deg, #ffc107 0%, #cc9a06 100%); color: #000; }
.grade-D { background: linear-gradient(135deg, #fd7e14 0%, #ca6510 100%); }
.grade-P { background: linear-gradient(135deg, #6c757d 0%, #565e64 100%); }
.grade-F { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%); }

.modal-header-info {
    background: var(--modal-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Pagination */
.page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: #4e73df;
}
.page-item.active .page-link {
    background-color: #4e73df;
    border-color: #4e73df;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: #1a1a1a;
    border-color: #333;
    color: #666;
}

/* Avatar styling */
.avatar-circle {
    width: 55px; height: 55px;
    font-size: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #4e73df, #224abe);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.col-lg-4 {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Print CSS */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }

    .navbar, .filter-card, #paginationNav, #statsDashboard, .modal-header .btn-close, .print-btn {
        display: none !important;
    }

    .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        visibility: visible;
        overflow: visible !important;
    }

    .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    .modal-content {
        border: none;
        box-shadow: none;
    }

    .chart-container {
        page-break-inside: avoid;
    }

    .grade-box {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}