@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .header h1 {
        font-size: 2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .card-value {
        font-size: 2rem;
    }
}

@media (max-width: 1280px) {
    .sidebar-nav {
        height: calc(100vh - 93px);
    }

    ul.nav.flex-column {
        width: 100%;
    }

    ul.nav.flex-column li.nav-item {
        width: 92%;
        flex: 0 0 auto;
    }

    ul.nav.flex-column li.nav-item a.nav-link span {
        font-size: 12px;
    }

    .action-btn {
        width: 25px;
        height: 25px;
    }

    .student-username {
        font-size: 12px;
    }

    .student-avatar {
        width: 50px;
        height: 50px;
        border: 3px solid var(--white);
    }
}

@media (max-width: 1380px) {
    .btn {
        font-size: 12px;
        padding: 8px 14px;
    }

    .card-header h2 {
        font-size: 1rem;
    }

    .table thead tr th {
        font-size: 12px;
    }

    .table tbody tr td {
        font-size: 12px;
        padding: 12px 12px;
    }

    .welcome-section {
        padding: 40px 24px;
    }

    .welcome-title {
        font-size: 45px;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(222px, 1fr));
    }

    .sidebar {
        width: 240px;
    }

    .content-area {
        padding: 18px;
    }

    .main-content {
        margin-left: 240px;
    }

    .nav-link {
        gap: 9px;
        padding: 11px 11px;
    }

    .nav-link i {
        font-size: 15px;
        width: 17px;
    }

    .nav-link span {
        font-size: 14px;
    }
}