:root {
        --bs-white: #ffffff;
        --bs-light: #fdf8ecff;
        --bs-dark: #0c4250; /* Updated dark color */
        --bs-dark-hover: #0f6379;
        --bs-primary: #dfa723;
        --bs-secondary: #266666;
        --bs-info: #648d40;
        --bs-success: #27af69;
        --bs-warning: #e6ce25;
        --bs-danger: #f52013;
        --bs-purple: #551feb;
        
        --bs-light-rgb: 246, 234, 206;
        --bs-dark-rgb: 12, 66, 80; /* Updated dark color RGB values */
        --bs-primary-rgb: 223, 167, 35;
        --bs-secondary-rgb: 38, 102, 102;
        --bs-info-rgb: 100, 141, 64;
        --bs-success-rgb: 39, 175, 105;
        --bs-warning-rgb: 230, 206, 37;
        --bs-danger-rgb: 245, 32, 19;

        --bs-nav-pills-link-active-color: #ffffff;
        --bs-nav-pills-link-active-bg: #266666;
    }

    /* Bootstrap component overrides */
    .bg-primary { background-color: var(--bs-primary) !important; }
    .bg-secondary { background-color: var(--bs-secondary) !important; }
    .bg-info { background-color: var(--bs-info) !important; }
    .bg-light { background-color: var(--bs-light) !important; }
    .bg-dark { background-color: var(--bs-dark) !important; }
    .bg-purple { background-color: var(--bs-purple) !important; }
    
    .text-primary { color: var(--bs-primary) !important; }
    .text-secondary { color: var(--bs-secondary) !important; }
    .text-info { color: var(--bs-info) !important; }
    .text-light { color: var(--bs-light) !important; }
    .text-dark { color: var(--bs-dark) !important; }
    .text-purple { color: var(--bs-purple) !important; }
    
    .btn-primary {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }
    .btn-primary:hover {
        background-color: #f7bd35;
        border-color: #f8b311;
    }
    
    .btn-secondary {
        background-color: var(--bs-secondary);
        border-color: var(--bs-secondary);
    }
    .btn-secondary:hover {
        background-color: #1b5555;
        border-color: #1b5555;
    }

    .btn-info {
        background-color: var(--bs-info);
        border-color: var(--bs-info);
        color: white;
    }
    .btn-info:hover {
        background-color: #547a36;
        border-color: #547a36;
        color: white;
    }



    .btn-dark {
        background-color: var(--bs-dark);
        border-color: var(--bs-dark);
        color: white;
    }
    .btn-dark:hover {
        background-color: var(--bs-dark-hover);
        border-color: var(--bs-dark-hover);
        color: white;
    }
    
    /* Teacher-specific styling */
    .navbar-teachers {
        background-color: var(--bs-light) !important;
    }
    
    .teacher-indicator {
        color: var(--bs-primary);
        font-size: 0.8rem;
        padding: 4px;
        border-radius: 4px;
        margin-left: 8px;
    }


    .badge-md {
        font-size: 0.7rem;
        padding: 0.5em 0.75em;
    }


    .error {
        color: var(--bs-danger);
        font-weight: bold;
    }

.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dark-hover);
}


body {
  background-color: var(--bs-light);
}

a {
  color: var(--bs-dark);
}



/* Core color utility classes - these are used throughout the site */
.color-red { color: #f5153b; }
.color-green { color: #28a745; }
.color-blue { color: #007bff; }
.color-purple { color: #6f42c1; }
.color-orange { color: #fd7e14; }
.color-silver { color: #6c757d; }
.color-yellow { color: #ffc107; }


.no-databox {
    padding: 2.5rem;
    text-align: center;
    color: #6c757d;
}
.icon-databox {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #dee2e6;
}





table th {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* Core text utilities */
.title-sec {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Lato', sans-serif;
    text-align: left;
    border-bottom: 1px solid #e3e3e3;
}

/* Alert styling - used by alert_box helper */
.alert {
    border-radius: 10px;
    font-size: 13px;
    padding: 15px;
    margin-bottom: 20px;
}



.navbar-brand img {
  height: 40px;
}

.nav-link.active {
  font-weight: bold;
}

.dropdown-menu {
  border: none;
  min-width: 200px;
}

/* .dropdown-item:hover {
  background-color: #f8f9fa;
} */


.dropdown-item .fas {
  width: 16px;
  text-align: center;
}

/* Ensure navbar doesn't overlap content */
body {
  padding-top: 76px;
}

@media (max-width: 991px) {
  body {
    padding-top: 66px;
  }
  
  .navbar-brand img {
    height: 35px;
  }
}

/* Card styling - frequently used */
.card-header {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Navigation pills - used in course views */
.nav-link.active, .nav-pills .nav-link.active {
    color: #fff !important;
    font-weight: bold;
    border-radius: 0.375rem;
}

/* Custom dark nav pills */
.custom-nav-dark {
    background-color: var(--bs-dark, #212529);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
}

.custom-nav-dark .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0;
    padding: 0.75rem 1.25rem;
}

.custom-nav-dark .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.custom-nav-dark .nav-link.active {
    background-color:#236170;
    color: white;
    font-weight: 500;
}

/* If you're in teacher section, use teacher primary color */
body.teacher-section .custom-nav-dark .nav-link.active {
    background-color: #236170;
}

.notification-badge {
    animation: pulse-notification 2s infinite;
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.4);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

@keyframes pulse-notification {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.notification-badge:hover {
    background-color: #bb2d3b !important;
    color: white;
}



.media-modal .modal-dialog {
    max-width: 800px;
}

.media-player {
    width: 100%;
    max-width: 100%;
}

.media-player video {
    width: 100%;
}

.media-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.upload-progress {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    width: 300px;
}

.progress {
    height: 1rem;
}

@media (max-width: 576px) {
    .fc-header-title h2 {
        margin-top: 0;
        white-space: nowrap;
        font-size: 1rem;
    }
}