:root {
    --pastel-purple-light: #e0bbe4;
    --pastel-purple-medium: #957dad;
    --pastel-purple-dark: #6a5ac7; /* Darker shade for accents */
    --text-color: #333;
    --background-color: #f8f9fa;
}

body {
    font-family: 'Sukhumvit Set', sans-serif; /* แนะนำให้ใช้ Font ที่อ่านง่าย */
    background-color: var(--background-color);
    color: var(--text-color);
}

.sidebar {
    background-color: var(--pastel-purple-light) !important;
    color: var(--text-color);
}

.sidebar .nav-link {
    color: var(--text-color);
}

.sidebar .nav-link.active {
    background-color: var(--pastel-purple-medium);
    color: white;
}

.sidebar .nav-link:hover {
    background-color: var(--pastel-purple-medium);
    color: white;
}

.navbar {
    background-color: var(--pastel-purple-dark) !important;
    color: white;
}

.modal-header {
    background-color: var(--pastel-purple-medium);
    color: white;
}

/* Progress Bar Colors */
.progress-bar-overdue {
    background-color: #dc3545; /* Red */
}
.progress-bar-not-submitted {
    background-color: #ffc107; /* Yellow */
    color: #333;
}
.progress-bar-submitted {
    background-color: #28a745; /* Green */
}
.progress-bar-inprogress {
    background-color: #0d6efd; /* Blue */
}

/* Responsive Design Adjustments */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px; /* Hidden by default */
        width: 250px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
    }
    .sidebar.show {
        left: 0;
    }
    .main-content {
        margin-left: 0;
    }
    .navbar-toggler {
        display: block;
    }
}