/*
 * EduPro Theme - Enhanced Educational Website Theme
 * Optimized for readability, trust, and professional learning environments
 * Based on original template structure with improved color palette
 */

/* ===================================
   Core Background & Body Styles
   =================================== */

body {
  background: #F7F9FC;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  line-height: 1.7;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
}

.bg-body {
  background: #F7F9FC !important;
}

/* ===================================
   Typography & Text Colors
   =================================== */

.text-primary {
  color: #2563EB !important;
  font-weight: 600;
}

.text-body[href]:hover,
.text-heading[href]:hover {
  color: #1D4ED8 !important;
  transition: color 0.2s ease;
}

/* ===================================
   Primary Brand Colors
   =================================== */

.bg-primary {
  background-color: #2563EB !important;
}

a.bg-primary:hover, 
a.bg-primary:focus {
  background-color: #1D4ED8 !important;
}

.bg-label-primary {
  background-color: #EFF6FF !important;
  color: #2563EB !important;
  border-left: 3px solid #2563EB;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ===================================
   Pagination Styles
   =================================== */

.page-item .page-link:hover, 
.page-item .page-link:focus,
.pagination li > a:not(.page-link):hover,
.pagination li > a:not(.page-link):focus {
  background-color: #DBEAFE;
  color: #2563EB;
  border-color: #93C5FD;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
  transition: all 0.2s ease;
}

.page-item.active .page-link, 
.page-item.active .page-link:hover, 
.page-item.active .page-link:focus, 
.page-item.active .page-link:disabled, 
.page-item.active .page-link.disabled,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus,
.pagination li.active > a:not(.page-link):disabled,
.pagination li.active > a:not(.page-link).disabled {
  border-color: #2563EB;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.page-item .page-link.waves-effect .waves-ripple,
.pagination li > a:not(.page-link).waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.pagination-outline-primary .page-item.active .page-link, 
.pagination-outline-primary .page-item.active .page-link:hover, 
.pagination-outline-primary .page-item.active .page-link:focus,
.pagination-outline-primary.pagination li.active > a:not(.page-link),
.pagination-outline-primary.pagination li.active > a:not(.page-link):hover,
.pagination-outline-primary.pagination li.active > a:not(.page-link):focus {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background-color: #DBEAFE !important;
}

.pagination-outline-primary .page-item.active .page-link.waves-effect .waves-ripple,
.pagination-outline-primary.pagination li.active > a:not(.page-link).waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

/* ===================================
   Progress Bar - Learning Progress
   =================================== */

.progress-bar {
  background: linear-gradient(90deg, #10B981, #2563EB);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
  transition: width 0.3s ease;
}

/* ===================================
   List Groups - Course Modules
   =================================== */

.list-group-item-primary {
  border-color: #3B82F6;
  background-color: #EFF6FF;
  color: #1E40AF !important;
  border-left: 4px solid #2563EB;
  transition: all 0.2s ease;
  font-weight: 500;
}

/*a.list-group-item-primary,
button.list-group-item-primary {
  color: #1E40AF;
}

a.list-group-item-primary:hover,
button.list-group-item-primary:hover {
  transform: translateX(4px);
  background-color: #DBEAFE;
}

a.list-group-item-primary.active,
button.list-group-item-primary.active {
  border-color: #2563EB !important;
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}
*/
/* ===================================
   BUTTONS - ALL VARIANTS
   =================================== */

/* Base button styles */
.btn {
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn:active {
        transform: translateY(0);
    }

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, #1e5bd6 0%, #2a6beb 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(30, 91, 214, 0.2);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #1b52c1 0%, #1e5bd6 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(30, 91, 214, 0.3);
    }

    .btn-primary:active,
    .btn-primary:focus {
        background: linear-gradient(135deg, #1b52c1 0%, #1e5bd6 100%) !important;
        box-shadow: 0 1px 2px rgba(30, 91, 214, 0.2);
    }

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

    .btn-success:hover {
        background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    }

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

    .btn-danger:hover {
        background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border: none;
    color: #111827;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

    .btn-warning:hover {
        background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
        color: #111827 !important;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

    .btn-info:hover {
        background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    }

/* Secondary Button */
.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

    .btn-secondary:hover {
        background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    }

/* ===== SMALL TABLE ACTION BUTTONS ===== */

/* Base small button styling */
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem;
    min-height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

    .btn-sm:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Small outline buttons for table actions */
    .btn-sm.btn-outline-primary {
        border-color: #93C5FD !important;
        color: #1e5bd6 !important;
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    }

        .btn-sm.btn-outline-primary:hover {
            border-color: #3B82F6 !important;
            background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%) !important;
            color: #1b52c1 !important;
        }

    .btn-sm.btn-outline-secondary {
        border-color: #D1D5DB !important;
        color: #4B5563 !important;
        background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%) !important;
    }

        .btn-sm.btn-outline-secondary:hover {
            border-color: #9CA3AF !important;
            background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%) !important;
            color: #374151 !important;
        }

    .btn-sm.btn-outline-success {
        border-color: #86EFAC !important;
        color: #15803D !important;
        background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
    }

        .btn-sm.btn-outline-success:hover {
            border-color: #4ADE80 !important;
            background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important;
            color: #166534 !important;
        }

    .btn-sm.btn-outline-danger {
        border-color: #FCA5A5 !important;
        color: #B91C1C !important;
        background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    }

        .btn-sm.btn-outline-danger:hover {
            border-color: #F87171 !important;
            background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
            color: #991B1B !important;
        }

    .btn-sm.btn-outline-warning {
        border-color: #FDE68A !important;
        color: #D97706 !important;
        background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
    }

        .btn-sm.btn-outline-warning:hover {
            border-color: #FCD34D !important;
            background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
            color: #B45309 !important;
        }

    .btn-sm.btn-outline-info {
        border-color: #7DD3FC !important;
        color: #0369A1 !important;
        background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
    }

        .btn-sm.btn-outline-info:hover {
            border-color: #38BDF8 !important;
            background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
            color: #075985 !important;
        }

/* Regular small buttons (solid) */
.btn-primary.btn-sm:not(.btn-outline-primary),
.btn-success.btn-sm:not(.btn-outline-success),
.btn-danger.btn-sm:not(.btn-outline-danger),
.btn-warning.btn-sm:not(.btn-outline-warning),
.btn-info.btn-sm:not(.btn-outline-info),
.btn-secondary.btn-sm:not(.btn-outline-secondary) {
    border: none !important;
    color: white !important;
    padding: 0.375rem 0.75rem !important;
}

.btn-primary.btn-sm:not(.btn-outline-primary) {
    background: linear-gradient(135deg, #1e5bd6 0%, #2a6beb 100%) !important;
}

.btn-success.btn-sm:not(.btn-outline-success) {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}

.btn-danger.btn-sm:not(.btn-outline-danger) {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

/* ===== OUTLINE BUTTONS (Regular size) ===== */
.btn-outline-primary:not(.btn-sm) {
    background: transparent !important;
    border: 2px solid #1e5bd6 !important;
    color: #1e5bd6 !important;
}

    .btn-outline-primary:not(.btn-sm):hover {
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
        color: #1b52c1 !important;
        border-color: #1e5bd6 !important;
    }

.btn-outline-secondary:not(.btn-sm) {
    background: transparent !important;
    border: 2px solid #6B7280 !important;
    color: #6B7280 !important;
}

    .btn-outline-secondary:not(.btn-sm):hover {
        background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%) !important;
        color: #4B5563 !important;
        border-color: #6B7280 !important;
    }

/* Wave effects for outline buttons */
.btn-outline-primary.waves-effect .waves-ripple {
    background: radial-gradient(rgba(30, 91, 214, 0.2) 0, rgba(30, 91, 214, 0.3) 40%, rgba(30, 91, 214, 0.4) 50%, rgba(30, 91, 214, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

/* ===== BUTTON STATES ===== */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Focus states */
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background: linear-gradient(135deg, #1b52c1 0%, #1e5bd6 100%);
    border: none;
    box-shadow: 0 0 0 4px rgba(30, 91, 214, 0.15);
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background: linear-gradient(135deg, #1b52c1 0%, #1e5bd6 100%) !important;
    border: none !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff !important;
    background: #93C5FD !important;
    border: none !important;
    opacity: 0.6;
}

/* Button group and input group */
.btn-group .btn-primary,
.input-group .btn-primary {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group-vertical .btn-primary {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Outline button states */
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    color: #1e5bd6;
    background-color: #EFF6FF;
    border-color: #1e5bd6;
    box-shadow: 0 0 0 4px rgba(30, 91, 214, 0.1);
}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
    color: #fff !important;
    background-color: #1e5bd6 !important;
    border-color: #1e5bd6 !important;
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #93C5FD !important;
    background-color: transparent !important;
    border-color: #93C5FD !important;
}

/* Badge in buttons */
.btn-outline-primary .badge {
    background: #1e5bd6;
    border-color: #1e5bd6;
    color: #fff;
}

.btn-outline-primary:hover .badge,
.btn-outline-primary:focus:hover .badge,
.btn-outline-primary:active .badge,
.btn-outline-primary.active .badge,
.show > .btn-outline-primary.dropdown-toggle .badge {
    background: #fff;
    border-color: #fff;
    color: #1e5bd6;
}

/* Loading state */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    .btn.loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

.btn-outline-primary.loading::after,
.btn-outline-secondary.loading::after {
    border: 2px solid rgba(30, 91, 214, 0.3);
    border-top-color: #1e5bd6;
}

/* Spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.list-group-item.active {
  background-color: #DBEAFE;
  color: #2563EB;
  border-left: 4px solid #10B981;
}

.list-group-item.active.waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

/* ===================================
   Alerts - Educational Notices
   =================================== */

.alert-primary {
  background-color: #EFF6FF;
  border: 1px solid #93C5FD;
  border-left: 4px solid #2563EB;
  color: #1E40AF;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.alert-primary .btn-close {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563EB'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
}

.alert-primary .alert-link {
  color: #1D4ED8;
  font-weight: 600;
  text-decoration: underline;
}

.alert-primary hr {
  background-color: #2563EB !important;
  opacity: 0.3;
}

.alert-primary .alert-icon {
  background-color: #2563EB;
}

/* ===================================
   Tables - Data Presentation
   =================================== */

.table-primary {
  --bs-table-bg: #F0F9FF;
  --bs-table-striped-bg: #E0F2FE;
  --bs-table-striped-color: #1F2937;
  --bs-table-active-bg: #DBEAFE;
  --bs-table-active-color: #1F2937;
  --bs-table-hover-bg: #DBEAFE;
  --bs-table-hover-color: #1F2937;
  color: #1F2937;
  border-color: #BFDBFE;
}

.table-primary .btn-icon,
.table-primary .btn {
  color: #1F2937;
}

.table-primary th {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  padding: 1rem;
  border: none;
}

.table-primary td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #E5E7EB;
}

/* ===================================
   Buttons - Primary Actions
   =================================== */

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  border: none;
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.25);
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
}

.btn-primary:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
  border: none !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(37, 99, 235, 0.35);
}

.btn-check:focus + .btn-primary, 
.btn-primary:focus, 
.btn-primary.focus {
  color: #fff;
  background: linear-gradient(135deg, #1D4ED8, #2563EB);
  border: none;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.btn-check:checked + .btn-primary, 
.btn-check:active + .btn-primary, 
.btn-primary:active, 
.btn-primary.active, 
.btn-primary.show.dropdown-toggle, 
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background: linear-gradient(135deg, #1E40AF, #1D4ED8) !important;
  border: none !important;
}

.btn-primary.disabled, 
.btn-primary:disabled {
  color: #fff !important;
  background: #93C5FD !important;
  border: none !important;
  opacity: 0.6;
}

.btn-group .btn-primary,
.input-group .btn-primary {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group-vertical .btn-primary {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===================================
   Outline Buttons
   =================================== */

.btn-outline-primary {
  color: #2563EB;
  border: 2px solid #2563EB;
  background: transparent;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-outline-primary.waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.btn-check:focus + .btn-outline-primary, 
.btn-outline-primary:focus {
  color: #2563EB;
  background-color: #EFF6FF;
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.btn-check:checked + .btn-outline-primary, 
.btn-check:active + .btn-outline-primary, 
.btn-outline-primary:active, 
.btn-outline-primary.active, 
.btn-outline-primary.dropdown-toggle.show {
  color: #fff !important;
  background-color: #2563EB !important;
  border-color: #2563EB !important;
}

.btn-outline-primary.disabled, 
.btn-outline-primary:disabled {
  color: #93C5FD !important;
  background-color: transparent !important;
  border-color: #93C5FD !important;
}

.btn-outline-primary .badge {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
}

.btn-outline-primary:hover .badge,
.btn-outline-primary:focus:hover .badge,
.btn-outline-primary:active .badge,
.btn-outline-primary.active .badge,
.show > .btn-outline-primary.dropdown-toggle .badge {
  background: #fff;
  border-color: #fff;
  color: #2563EB;
}

/* ===================================
   Dropdown Menu
   =================================== */

.dropdown-item.waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.dropdown-item:not(.disabled).active, 
.dropdown-item:not(.disabled):active {
  background-color: #DBEAFE;
  color: #2563EB !important;
  font-weight: 500;
}

.dropdown-menu {
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  padding: 0.625rem 1rem;
  border-radius: 6px;
  margin: 0.25rem 0.5rem;
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background-color: #EFF6FF;
  color: #2563EB;
}

.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
  background-color: #DBEAFE;
  color: #2563EB;
}

.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active.btn,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item).btn {
  color: #1F2937;
}

/* ===================================
   Navigation - Tabs & Pills
   =================================== */

.nav .nav-link:hover, 
.nav .nav-link:focus {
  color: #1D4ED8;
}

.nav-pills .nav-link {
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-pills .nav-link.active, 
.nav-pills .nav-link.active:hover, 
.nav-pills .nav-link.active:focus {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.nav-tabs {
  border-bottom: 2px solid #E5E7EB;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: #6B7280;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link.active, 
.nav-tabs .nav-link.active:hover, 
.nav-tabs .nav-link.active:focus {
  color: #2563EB;
  border-bottom-color: #2563EB;
  background: transparent;
  font-weight: 600;
}

.nav-tabs .nav-link:hover {
  color: #2563EB;
  border-bottom-color: #BFDBFE;
}

.nav-tabs .nav-link.waves-effect .waves-ripple {
  background: radial-gradient(rgba(37, 99, 235, 0.2) 0, rgba(37, 99, 235, 0.3) 40%, rgba(37, 99, 235, 0.4) 50%, rgba(37, 99, 235, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.nav-tabs .tab-slider {
  background-color: #2563EB;
}

/* ===================================
   Form Controls
   =================================== */

.form-control:focus,
.form-select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
  outline: none;
}

.form-control,
.form-select {
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  transition: all 0.2s ease;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #D1D5DB;
  transition: all 0.2s ease;
}

.form-check-input:checked {
  background-color: #2563EB;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-check-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-label {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

/* ===================================
   Menu System - Primary Background
   =================================== */

.menu.bg-primary {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.menu.bg-primary .menu-link,
.menu.bg-primary .menu-horizontal-prev,
.menu.bg-primary .menu-horizontal-next {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.menu.bg-primary .menu-link:hover, 
.menu.bg-primary .menu-link:focus,
.menu.bg-primary .menu-horizontal-prev:hover,
.menu.bg-primary .menu-horizontal-prev:focus,
.menu.bg-primary .menu-horizontal-next:hover,
.menu.bg-primary .menu-horizontal-next:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.menu.bg-primary .menu-link.active,
.menu.bg-primary .menu-horizontal-prev.active,
.menu.bg-primary .menu-horizontal-next.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.menu.bg-primary .menu-item.disabled .menu-link,
.menu.bg-primary .menu-horizontal-prev.disabled,
.menu.bg-primary .menu-horizontal-next.disabled {
  color: rgba(255, 255, 255, 0.5) !important;
}

.menu.bg-primary .menu-item.active:not(.open) > .menu-link:not(.menu-toggle), 
.menu.bg-primary .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.25);
}

.menu.bg-primary .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu.bg-primary.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle), 
.menu.bg-primary.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background: rgba(255, 255, 255, 0.25);
  color: #fff !important;
}

.menu.bg-primary.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background: rgba(255, 255, 255, 0.2);
}

.menu.bg-primary.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle, 
.menu.bg-primary.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle:after {
  color: #fff;
}

.menu.bg-primary .menu-inner-shadow {
  background: linear-gradient(#2563EB 5%, rgba(37, 99, 235, 0.75) 45%, rgba(37, 99, 235, 0.2) 80%, transparent);
}

.menu.bg-primary .menu-text {
  color: #fff;
}

.menu.bg-primary .menu-header {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 700;
}

.menu.bg-primary hr,
.menu.bg-primary .menu-divider,
.menu.bg-primary .menu-inner > .menu-item.open > .menu-sub::before {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.menu.bg-primary .menu-block::before {
  background-color: rgba(255, 255, 255, 0.7);
}

.menu.bg-primary .ps__thumb-y,
.menu.bg-primary .ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* ===================================
   Footer - Primary Background
   =================================== */

.footer.bg-primary {
  background: linear-gradient(135deg, #1F2937, #111827) !important;
  color: #D1D5DB;
  border-top: 4px solid #2563EB;
  padding: 3rem 0 2rem;
}

.footer.bg-primary .footer-link {
  color: #D1D5DB;
  transition: color 0.2s ease;
  font-weight: 500;
}

.footer.bg-primary .footer-link:hover, 
.footer.bg-primary .footer-link:focus {
  color: #fff;
  text-decoration: underline;
}

.footer.bg-primary .footer-link.disabled {
  color: #6B7280 !important;
}

.footer.bg-primary .footer-text {
  color: #9CA3AF;
  font-size: 0.875rem;
}

.footer.bg-primary .show > .footer-link,
.footer.bg-primary .active > .footer-link,
.footer.bg-primary .footer-link.show,
.footer.bg-primary .footer-link.active {
  color: #fff;
}

.footer.bg-primary hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===================================
   Form Floating Labels
   =================================== */

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:focus:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:focus:not(:placeholder-shown) ~ label {
  color: #2563EB;
  font-weight: 500;
}

.form-floating-outline :not(select):focus + label,
.form-floating-outline :not(select):focus + span {
  color: #2563EB;
}

.form-floating-outline label::after,
.form-floating-outline > span::after {
  background: #fff;
}

.form-floating-outline label.bg-body::after,
.form-floating-outline > span.bg-body::after {
  background: #F7F9FC !important;
}

/* ===================================
   SVG & Illustrations
   =================================== */

.svg-illustration svg {
  fill: #2563EB;
}

/* ===================================
   Borders & Utilities
   =================================== */

html:not([dir=rtl]) .border-primary,
html[dir=rtl] .border-primary {
  border-color: #2563EB !important;
}

a {
  color: #2563EB;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #1D4ED8;
  text-decoration: underline;
}

.fill-primary {
  fill: #2563EB;
}

/* ===================================
   Navbar Theme
   =================================== */

.bg-navbar-theme {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  backdrop-filter: blur(10px);
}

.bg-navbar-theme .navbar-brand,
.bg-navbar-theme .navbar-brand a {
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.bg-navbar-theme .navbar-brand:hover, 
.bg-navbar-theme .navbar-brand:focus,
.bg-navbar-theme .navbar-brand a:hover,
.bg-navbar-theme .navbar-brand a:focus {
  color: #fff;
  opacity: 0.9;
}

.bg-navbar-theme .navbar-search-wrapper .navbar-search-icon,
.bg-navbar-theme .navbar-search-wrapper .search-input {
  color: rgba(255, 255, 255, 0.9);
}

.bg-navbar-theme .search-input-wrapper .search-input,
.bg-navbar-theme .search-input-wrapper .search-toggler {
  color: rgba(255, 255, 255, 0.9);
}

.bg-navbar-theme .navbar-nav > .nav-link,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 0.25rem;
}

.bg-navbar-theme .navbar-nav > .nav-link:hover, 
.bg-navbar-theme .navbar-nav > .nav-link:focus,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:focus,
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:hover,
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.bg-navbar-theme .navbar-nav > .nav-link.disabled,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link.disabled,
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link.disabled {
  color: rgba(255, 255, 255, 0.4) !important;
}

.bg-navbar-theme .navbar-nav .show > .nav-link,
.bg-navbar-theme .navbar-nav .active > .nav-link,
.bg-navbar-theme .navbar-nav .nav-link.show,
.bg-navbar-theme .navbar-nav .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-navbar-theme .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.bg-navbar-theme .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.bg-navbar-theme .navbar-text {
  color: rgba(255, 255, 255, 0.9);
}

.bg-navbar-theme .navbar-text a {
  color: #fff;
}

.bg-navbar-theme .navbar-text a:hover, 
.bg-navbar-theme .navbar-text a:focus {
  color: #fff;
  opacity: 0.9;
}

.bg-navbar-theme hr {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ===================================
   Side Menu Theme
   =================================== */

.bg-menu-theme {
  background-color: #FFFFFF !important;
  color: #1F2937;
  border-right: 1px solid #E5E7EB;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: #374151;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.bg-menu-theme .menu-link:hover, 
.bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-horizontal-prev:hover,
.bg-menu-theme .menu-horizontal-prev:focus,
.bg-menu-theme .menu-horizontal-next:hover,
.bg-menu-theme .menu-horizontal-next:focus {
  color: #2563EB;
  background-color: #EFF6FF;
  transform: translateX(4px);
}

.bg-menu-theme .menu-link.active,
.bg-menu-theme .menu-horizontal-prev.active,
.bg-menu-theme .menu-horizontal-next.active {
  color: #2563EB;
  background-color: #DBEAFE;
  font-weight: 600;
}

.bg-menu-theme .menu-item.disabled .menu-link,
.bg-menu-theme .menu-horizontal-prev.disabled,
.bg-menu-theme .menu-horizontal-next.disabled {
  color: #9CA3AF !important;
}

.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle), 
.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
  color: #fff !important;
  border-color: #fff !important;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle), 
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background: #DBEAFE;
  color: #2563EB !important;
}

.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff !important;
}

.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle, 
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle:after {
  color: #fff;
}

.bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(#FFFFFF 5%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0.2) 80%, transparent);
}

.bg-menu-theme .menu-text {
  color: #374151;
}

.bg-menu-theme .menu-header {
  color: #2563EB;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin: 1.5rem 1rem 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #E5E7EB;
}

.bg-menu-theme hr,
.bg-menu-theme .menu-divider,
.bg-menu-theme .menu-inner > .menu-item.open > .menu-sub::before {
  border-color: #E5E7EB !important;
}

.bg-menu-theme .menu-block::before {
  background-color: #6B7280;
}

.bg-menu-theme .ps__thumb-y,
.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(107, 114, 128, 0.3) !important;
}

@media (min-width: 1200px) {
  .layout-menu-collapsed.layout-menu-hover .bg-menu-theme {
    box-shadow: 0 0.375rem 1.5rem rgba(37, 99, 235, 0.1);
  }
}

/* ===================================
   Footer Theme
   =================================== */

.bg-footer-theme {
  background: linear-gradient(135deg, #F7F9FC, #FFFFFF) !important;
  color: #2563EB;
  border-top: 2px solid #E5E7EB;
}

.bg-footer-theme .footer-link {
  color: #2563EB;
  font-weight: 500;
  transition: color 0.2s ease;
}

.bg-footer-theme .footer-link:hover, 
.bg-footer-theme .footer-link:focus {
  color: #1D4ED8;
  text-decoration: underline;
}

.bg-footer-theme .footer-link.disabled {
  color: #9CA3AF !important;
}

.bg-footer-theme .footer-text {
  color: #6B7280;
  font-size: 0.875rem;
}

.bg-footer-theme .show > .footer-link,
.bg-footer-theme .active > .footer-link,
.bg-footer-theme .footer-link.show,
.bg-footer-theme .footer-link.active {
  color: #1E40AF;
  font-weight: 600;
}

.bg-footer-theme hr {
  border-color: #E5E7EB;
}

/* ===================================
   Additional Educational Enhancements
   =================================== */

/* Cards */
.card {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg, #EFF6FF, #FFFFFF);
  border-bottom: 2px solid #E5E7EB;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  color: #2563EB;
}

/* Badges */
.badge {
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8125rem;
}

.badge-primary {
  background-color: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

/* Tooltips */
.tooltip-inner {
  background-color: #1F2937;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

/* Modals */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
  border-bottom: 2px solid #E5E7EB;
  padding: 1.5rem;
  background: linear-gradient(135deg, #EFF6FF, #FFFFFF);
}

.modal-title {
  color: #2563EB;
  font-weight: 700;
}

/* Accessibility */
:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print Styles */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .bg-navbar-theme,
  .bg-menu-theme,
  .bg-footer-theme,
  .btn,
  .dropdown {
    display: none !important;
  }
  
  .card {
    break-inside: avoid;
    border: 1px solid #ddd;
    box-shadow: none;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #F7F9FC;
}

::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Selection */
::selection {
  background-color: #2563EB;
  color: white;
}

::-moz-selection {
  background-color: #2563EB;
  color: white;
}