/* ===== LDAP CONFIGURATION STYLES ===== */
.ldap-config-form .form-check-switch {
    margin-bottom: 1.5rem;
}

.ldap-config-form .card-header.bg-purple {
    background-color: var(--theme-primary, #6A0DAD) !important;
}

.ldap-config-form .text-purple {
    color: var(--theme-primary, #6A0DAD) !important;
}

.ldap-config-form #test-result {
    min-height: 50px;
}

.ldap-config-form .alert {
    margin-top: 0.5rem;
}

.ldap-config-form .input-group .btn-outline-secondary {
    border-left: 0;
}

.ldap-config-form .input-group .form-control:focus + .btn-outline-secondary {
    border-color: #ced4da;
}

/* ===== EMAIL CONFIGURATION STYLES ===== */
.email-config-form .form-check-switch {
    margin-bottom: 1.5rem;
}

.email-config-form .card-header.bg-purple {
    background-color: var(--theme-primary, #6A0DAD) !important;
}

.email-config-form .text-purple {
    color: var(--theme-primary, #6A0DAD) !important;
}

.email-config-form .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.email-config-form .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.email-config-form .form-control:focus {
    border-color: var(--theme-primary, #6A0DAD);
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

.email-config-form .form-select:focus {
    border-color: var(--theme-primary, #6A0DAD);
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

/* Fix overly long prerequisite assessment cards overflowing the layout */
.prerequisites-grid,
.prerequisite-item,
.prerequisite-card {
    overflow: hidden;
}

/* Registration tweaks */
.card .form-control.is-invalid { border-color: #dc3545; }
.card .invalid-feedback { display:block; }

.prerequisite-card .card-body { 
    overflow: hidden; 
}

/* Truncate long titles and meta lines */
.prerequisite-card .prerequisite-title,
.prerequisite-card .prerequisite-subtitle,
.prerequisite-card .prerequisite-status,
.prerequisite-card .prerequisite-score {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Allow wrapping for long words/content blocks inside prerequisite cards */
.prerequisite-card * {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Prevent card from exceeding container width */
.prerequisite-card { 
    max-width: 100%; 
}

/* Ensure badges/labels don't force overflow */
.prerequisite-card .badge {
    white-space: nowrap;
}

/* ===== GLOBAL PAGE LOADER ===== */
.page-loader {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    z-index: 9999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 1;
    visibility: visible;
}

.page-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-content {
    text-align: center;
    color: #fff;
    max-width: 320px;
    padding: 1.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.page-loader-spinner {
    width: 64px;
    height: 64px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--theme-primary, #6A0DAD);
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    animation: page-loader-spin 0.9s linear infinite;
}

.page-loader-text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.page-loader-subtext {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

.page-loader-progress {
    height: 4px;
    width: 160px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    overflow: hidden;
    margin: 0.75rem auto 0;
}

.page-loader-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), var(--theme-primary, #6A0DAD));
    border-radius: inherit;
    animation: page-loader-progress 1.2s ease-in-out infinite;
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes page-loader-progress {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* ===== INLINE CONTENT LOADER (for tabs, modals, etc.) ===== */
.inline-content-loader {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
}

.inline-content-loader-content {
    text-align: center;
}

.inline-content-loader-spinner {
    width: 64px;
    height: 64px;
    border: 5px solid rgba(106, 13, 173, 0.2);
    border-top-color: var(--theme-primary, #6A0DAD);
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    animation: page-loader-spin 0.9s linear infinite;
}

.inline-content-loader-text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--theme-primary, #6A0DAD);
    margin: 0;
}

.inline-content-loader-subtext {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 0.5rem;
}

.inline-content-loader-compact {
    min-height: 200px;
    padding: 1.5rem 0;
}

/* ===== AI CONTENT CREATION STYLES ===== */

/* AI Content Dashboard Styles */
.ai-content-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.ai-content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.ai-content-type-btn {
    height: 120px;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ai-content-type-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.ai-content-type-btn:hover::before {
    left: 100%;
}

.ai-content-type-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.ai-content-type-btn i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* AI Service Status Alert */
.ai-service-alert {
    border-left: 4px solid #ffc107;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 8px;
}

.ai-service-alert.danger {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}

/* AI Content Form Styles */
.ai-content-form {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.ai-content-form .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
    border: none;
}

.ai-content-form .form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.ai-content-form .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.ai-content-form .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

/* SCORM Settings Card */
.scorm-settings-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.scorm-settings-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

.scorm-settings-card .card-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    border: none;
}

/* Content Type Specific Settings */
.content-settings-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.content-settings-card:hover {
    border-color: #17a2b8;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.1);
}

.content-settings-card .card-header {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    border: none;
}

/* AI Model Information Card */
.ai-model-info {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 12px;
    border: none;
}

.ai-model-info .card-header {
    background: transparent;
    border: none;
    color: white;
}

/* Tips Card */
.ai-tips-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 12px;
    border: none;
}

.ai-tips-card .card-header {
    background: transparent;
    border: none;
    color: white;
}

.ai-tips-card .list-unstyled li {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* Status Badges */
.ai-status-badge {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-status-pending {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.ai-status-processing {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.ai-status-completed {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.ai-status-failed {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    color: white;
}

/* Content Type Badges */
.ai-content-type-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Statistics Cards */
.ai-stats-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ai-stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ai-stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #667eea;
}

/* Request Table Styles */
.ai-requests-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ai-requests-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.ai-requests-table thead th {
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.ai-requests-table tbody tr {
    transition: all 0.3s ease;
}

.ai-requests-table tbody tr:hover {
    background: #f8f9fa;
    transform: scale(1.01);
}

/* Action Buttons */
.ai-action-btn {
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ai-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Preview Modal */
.ai-preview-modal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.ai-preview-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
    border: none;
}

.ai-preview-modal .modal-body {
    background: #f8f9fa;
}

.ai-preview-modal pre {
    background: #2d3748;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Loading States */
.ai-loading {
    position: relative;
    overflow: hidden;
}

.ai-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: ai-loading 1.5s infinite;
}

@keyframes ai-loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .ai-content-type-btn {
        height: 100px;
        margin-bottom: 1rem;
    }
    
    .ai-content-type-btn i {
        font-size: 2rem;
    }
    
    .ai-stats-card {
        margin-bottom: 1rem;
    }
}

/* Animation for new content */
@keyframes ai-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-fade-in {
    animation: ai-fade-in 0.5s ease-out;
}

/* ===== USER EVENTS STYLES ===== */
/* Use existing announcement-card styles for consistency */

/* Ensure events use exact same styling as announcements */
[data-my-events-page="true"] .modern-announcement-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-my-events-page="true"] .modern-announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--theme-primary, #6f42c1);
}

[data-my-events-page="true"] .announcement-card-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

[data-my-events-page="true"] .announcement-title-section {
    flex: 1;
}

[data-my-events-page="true"] .announcement-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

[data-my-events-page="true"] .announcement-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6c757d;
}

[data-my-events-page="true"] .announcement-creator,
[data-my-events-page="true"] .announcement-date,
[data-my-events-page="true"] .announcement-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[data-my-events-page="true"] .announcement-meta i {
    color: var(--theme-primary, #6f42c1);
}

[data-my-events-page="true"] .announcement-divider {
    color: #dee2e6;
    font-weight: bold;
}

[data-my-events-page="true"] .announcement-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

[data-my-events-page="true"] .announcement-card-body {
    padding: 1rem 1.5rem;
}

[data-my-events-page="true"] .announcement-description {
    margin-bottom: 1rem;
}

[data-my-events-page="true"] .description-text {
    color: #495057;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

[data-my-events-page="true"] .announcement-card-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #f1f3f4;
}

/* Modern Event Card Styles - Additional classes for events */
.announcement-details {
    margin-top: 1rem;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item i {
    color: var(--theme-primary, #6f42c1);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Event Details Modal Styles */
.modern-event-detail {
    background: #fff;
}

.detail-header.event-type-live_class { border-left: 4px solid #007bff; }
.detail-header.event-type-webinar { border-left: 4px solid #17a2b8; }
.detail-header.event-type-deadline { border-left: 4px solid #dc3545; }
.detail-header.event-type-maintenance { border-left: 4px solid #ffc107; }
.detail-header.event-type-meeting { border-left: 4px solid #28a745; }
.detail-header.event-type-workshop { border-left: 4px solid #6f42c1; }

.event-type-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-type-badge.event-type-live_class {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.2);
}

.event-type-badge.event-type-webinar {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.event-type-badge.event-type-deadline {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.event-type-badge.event-type-maintenance {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.event-type-badge.event-type-meeting {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.event-type-badge.event-type-workshop {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.2);
}

.event-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.info-item:hover {
    background: #ffffff;
    border-color: #6f42c1;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.1);
}

.info-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6f42c1, #8e44ad);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 0.95rem;
    color: #495057;
    font-weight: 500;
    line-height: 1.4;
}

.event-link {
    color: #6f42c1;
    text-decoration: none;
    font-weight: 500;
}

.event-link:hover {
    color: #5a2d91;
    text-decoration: underline;
}

.event-description-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.description-title {
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #6f42c1;
    display: flex;
    align-items: center;
}

.description-content {
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.6;
}

.description-content p {
    margin-bottom: 1rem;
}

.description-content p:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for event details modal */
@media (max-width: 768px) {
    .detail-title {
        font-size: 1.25rem;
    }
    
    .detail-header {
        padding: 1.5rem;
    }
    
    .detail-body {
        padding: 1.5rem;
    }
    
    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .meta-divider {
        display: none;
    }
    
    .event-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-item {
        padding: 1rem;
    }
    
    .event-description-section {
        padding: 1rem;
    }
    
    .detail-actions {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }
}

/* Event type specific colors */
.text-purple {
    color: var(--theme-primary, #6f42c1) !important;
}

/* Event-specific styles for list view */
.event-info-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f3f4;
}

.info-item-small {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.info-item-small:last-child {
    margin-bottom: 0;
}

.info-item-small i {
    color: var(--theme-primary, #6f42c1);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.announcement-time {
    color: #6c757d;
    font-size: 0.9rem;
}

.badge.text-primary {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.badge.text-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
}

.badge.text-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.badge.text-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.badge.text-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.badge.text-purple {
    background-color: rgba(111, 66, 193, 0.1);
    color: var(--theme-primary, #6f42c1);
}

/* Search and filter styles */
.search-results-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.search-results-info i {
    margin-right: 0.5rem;
    color: #6c757d;
}
/* RSVP Modal styles */
.rsvp-btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
}

.rsvp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rsvp-btn[data-response="yes"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.rsvp-btn[data-response="maybe"] {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.rsvp-btn[data-response="no"] {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    color: white;
}

/* Loading states */
#loadingSpinner {
    min-height: 200px;
}

/* No results state */
#noResults {
    min-height: 300px;
}

#noResults i {
    opacity: 0.5;
}

/* Responsive adjustments - handled by announcement-card styles */

/* Unlock Your Skills - Complete Navbar, Sidebar, and Manage Portal CSS */

/* ===== SURVEY FORM STYLES ===== */
.survey-form {
    max-width: 100%;
}

.question-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.question-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

.question-item.has-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.question-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.question-title {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* General question number style - not for assessment player */
.question-item .question-number,
.question-number {
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 0.75rem;
}

.question-media {
    text-align: center;
    margin: 1rem 0;
}

.question-media img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-media video {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Rating Response Styles */
.rating-response {
    padding: 1rem 0;
}

.rating-scale {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.rating-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.rating-options .form-check {
    margin-bottom: 0;
}

.rating-options .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
}

.rating-options .form-check-label {
    font-size: 1.1rem;
    padding-left: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-symbol {
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    display: inline-flex;
    align-items: center;
}

.rating-options .form-check-label:hover {
    color: #007bff;
    transform: scale(1.1);
}

.rating-options .form-check-label.text-primary {
    color: #007bff !important;
    font-weight: bold;
}

/* Choice Response Styles */
.choice-response {
    padding: 0.5rem 0;
}

.choice-response .form-check {
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.choice-response .form-check:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.choice-response .form-check-input:checked + .form-check-label {
    color: #007bff;
    font-weight: 600;
}

.choice-response .form-check-input:checked ~ .form-check {
    background-color: #e7f3ff;
    border-color: #007bff;
}

.option-media {
    margin-top: 0.5rem;
}

.option-media img {
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* Text Response Styles */
.text-response textarea {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: border-color 0.2s ease;
}

.text-response textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* File Response Styles */
.file-response {
    padding: 1rem 0;
}

.file-response input[type="file"] {
    border: 2px dashed #ced4da;
    border-radius: 6px;
    padding: 1rem;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

.file-response input[type="file"]:hover {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.file-info {
    margin-top: 1rem;
}

/* Response Item Styles (for submitted surveys) */
.response-item {
    background: #f8f9fa;
    border-left: 4px solid #28a745;
}

.response-item h6 {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.response-value {
    margin-bottom: 0.5rem;
}

.response-value .badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

/* Form Actions */
.form-actions {
    border-top: 1px solid #e0e0e0;
    padding-top: 2rem;
    margin-top: 2rem;
}

/* Survey Header Styles */
.survey-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.survey-header .card-header {
    background: transparent;
    border: none;
}

/* Loading States */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Toast Container */
.toast-container {
    z-index: 1055;
}

/* Auto-save Indicator */
.autosave-indicator {
    z-index: 1050;
}

/* Progress Indicator */
.survey-progress {
    background: #e9ecef;
    border-radius: 10px;
    height: 8px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.survey-progress-bar {
    background: linear-gradient(90deg, #007bff, #28a745);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .question-item {
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .rating-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .question-item .question-number,
    .question-number {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
        margin-right: 0.5rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .question-item {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .question-title {
        color: #e2e8f0;
    }
    
    .choice-response .form-check {
        background-color: #4a5568;
        border-color: #718096;
    }
    
    .choice-response .form-check:hover {
        background-color: #2d3748;
    }
    
    .response-item {
        background: #4a5568;
        color: #e2e8f0;
    }
}

/* Animation for form submission */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.question-item {
    animation: fadeInUp 0.5s ease-out;
}

.question-item:nth-child(1) { animation-delay: 0.1s; }
.question-item:nth-child(2) { animation-delay: 0.2s; }
.question-item:nth-child(3) { animation-delay: 0.3s; }
.question-item:nth-child(4) { animation-delay: 0.4s; }
.question-item:nth-child(5) { animation-delay: 0.5s; }

/* ===== SURVEY MODAL SPECIFIC STYLES ===== */
#surveyModal .modal-dialog {
    max-width: 800px;
}

#surveyModal .question-item {
    margin-bottom: 1rem;
    padding: 1rem;
}

#surveyModal .question-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

#surveyModal .question-item .question-number,
#surveyModal .question-number {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
    margin-right: 0.5rem;
}

#surveyModal .rating-options {
    flex-wrap: wrap;
    gap: 0.5rem;
}

#surveyModal .rating-options .form-check {
    margin-bottom: 0.25rem;
}

#surveyModal .choice-response .form-check {
    margin-bottom: 0.5rem;
}

#surveyModal .form-actions {
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
    margin-top: 1rem;
}

#surveyModal .response-item {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
}

#surveyModal .response-item h6 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Modal scrollable content */
#surveyModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    #surveyModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #surveyModal .question-item {
        padding: 0.75rem;
    }
    
    #surveyModal .rating-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ✅ Prevent Content Overflow */
html {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ✅ Fix Body Layout */
body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding-top: 60px !important; /* Space for fixed navbar */
    box-sizing: border-box;
}

/* Remove padding-top on login/register pages - no navbar needed */
body.login-body {
    padding-top: 0 !important;
}

/* ✅ Ensure navbar is not affected by any parent containers */
body > .navbar,
html > body > .navbar {
    position: fixed !important;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ✅ Prevent any container from affecting navbar */
.container .navbar,
.container-fluid .navbar,
[class*="container"] .navbar {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
}
/* Push footer to the bottom */
.main-content {
    flex: 1; /* Takes up all available space */
    padding-bottom: 100px; /* Space before fixed footer (prevents overlap on hover) */
    background-color: #f4f4f4; /* Match body background to avoid visual break */
    margin-top: 0 !important;
}

/* ✅ Fix spacing for manage portal cards */
#social .row .col-md-6 {
    margin-bottom: 20px;
}

#social .row:last-child .col-md-6:last-child,
#social .row:last-child .col-md-6:nth-last-child(2) {
    margin-bottom: 0;
}

/* ✅ Ensure proper spacing for all manage portal tabs */
.tab-content .row .col-md-6 {
    margin-bottom: 20px;
}

.tab-content .row:last-child .col-md-6:last-child,
.tab-content .row:last-child .col-md-6:nth-last-child(2) {
    margin-bottom: 0;
}

/* ✅ Fix Navbar (Horizontal Layout) */
.navbar {
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--navbar-bg, #d9b3ff);
    z-index: 1040; /* Keep above cards but below modals */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 60px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide navbar completely on login/register pages */
body.login-body .navbar,
body.login-body nav.navbar,
body.login-body [class*="navbar"],
body.login-body .navbar-container,
body.login-body .navbar-container *,
body.login-body .navbar * {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.navbar-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    gap: 15px;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box;
    margin: 0 !important;
}

/* ✅ Horizontal Alignment for Navbar Elements */
.navbar-left {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    justify-self: start;
    min-width: 0;
    overflow: visible;
}

.navbar-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: stretch;
    padding: 0 15px;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    min-width: 0;
    overflow: visible;
    box-sizing: border-box;
}

.navbar-right {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    justify-content: flex-end;
    justify-self: end;
    position: relative;
    min-width: 0;
    overflow: visible;
}

/* ✅ Vertical Separator */
.navbar-separator {
    width: 1px;
    height: 25px;
    background-color: var(--theme-primary, #4b0082);
    margin: 0 10px;
    opacity: 0.6;
}

/* ✅ Notification Bell Styles */

.notification-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--theme-primary, #4b0082);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.notification-btn:hover {
    background-color: rgba(75, 0, 130, 0.1);
    color: var(--theme-primary-dark, #2d0052);
}

.leaderboard-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--theme-primary, #4b0082);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
}

.leaderboard-btn:hover {
    background-color: rgba(75, 0, 130, 0.1);
    color: var(--theme-primary-dark, #2d0052);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff4757;
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
    z-index: 10;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 520px;
    min-width: 500px;
    max-width: 550px;
    max-height: calc(100vh - 80px);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Ensure dropdown doesn't go off-screen on the right */
.notification-menu {
    position: relative;
    display: inline-block;
}

/* ✅ Enhanced Notification Dropdown Menu (Similar to Profile Menu) */
.notification-menu .dropdown-menu,
.notification-menu .notification-dropdown {
    min-width: 500px;
    max-width: 550px;
    width: 520px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    margin-top: 0;
    position: absolute;
    transform: none;
}

/* Adjust dropdown position to prevent overflow on smaller screens */
@media (max-width: 992px) {
    .notification-menu .dropdown-menu,
    .notification-menu .notification-dropdown {
        width: 480px;
        min-width: 450px;
        max-width: 500px;
    }
    
    .notification-dropdown {
        right: auto;
        left: auto;
        transform: translateX(0);
    }
    
    /* Position relative to viewport if near edge */
    .navbar-right .notification-menu:last-child .notification-dropdown {
        right: 0;
        left: auto;
    }
}

/* If dropdown would go off-screen, position it on the left */
@media (max-width: 768px) {
    .notification-menu .dropdown-menu,
    .notification-menu .notification-dropdown {
        width: calc(100vw - 20px);
        min-width: 400px;
        max-width: 500px;
    }
    
    .notification-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-height: calc(100vh - 100px);
    }
}

.notification-dropdown.show {
    display: flex;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
}

.notification-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.mark-all-read-btn {
    background: none;
    border: none;
    color: #4b0082;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.mark-all-read-btn:hover {
    background-color: rgba(75, 0, 130, 0.1);
}

.notification-list {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Custom scrollbar for notification list */
.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.notification-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #64748b;
    gap: 10px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover {
    background-color: #f8fafc;
}

.notification-item.unread {
    background-color: #fef7ff;
    border-left: 3px solid #4b0082;
}

.notification-item.read {
    opacity: 0.7;
}

.notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    margin-right: 12px;
}

.notification-icon.course {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.notification-icon.poll {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.notification-icon.announcement {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.notification-icon.event {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.notification-icon.social {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.notification-icon.info {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #64748b;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-message {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 6px;
    word-wrap: break-word;
}

.notification-time {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}

.notification-item.unread .notification-title {
    font-weight: 700;
    color: #0f172a;
}

.notification-footer {
    padding: 15px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
}

.view-all-notifications {
    color: #4b0082;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.view-all-notifications:hover {
    background-color: rgba(75, 0, 130, 0.1);
    color: #2d0052;
}

/* All Notifications Modal Styles */
#allNotificationsModal .modal-dialog {
    max-width: 800px;
}

#allNotificationsModal .all-notifications-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}

#allNotificationsModal .notifications-summary {
    display: flex;
    align-items: center;
}

#allNotificationsModal .all-notifications-list {
    max-height: 500px;
    overflow-y: auto;
}

#allNotificationsModal .notification-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

#allNotificationsModal .notification-item:hover {
    background-color: #f8f9fa;
}

#allNotificationsModal .notification-item.unread {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
}

#allNotificationsModal .notification-item.read {
    background-color: #f8f9fa;
    opacity: 0.8;
}

#allNotificationsModal .notification-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.1rem;
}

#allNotificationsModal .notification-icon.info {
    background-color: #d1ecf1;
    color: #0c5460;
}

#allNotificationsModal .notification-icon.success {
    background-color: #d4edda;
    color: #155724;
}

#allNotificationsModal .notification-icon.warning {
    background-color: #fff3cd;
    color: #856404;
}

#allNotificationsModal .notification-icon.error {
    background-color: #f8d7da;
    color: #721c24;
}

#allNotificationsModal .notification-icon.course {
    background-color: #e2e3e5;
    color: #383d41;
}

#allNotificationsModal .notification-icon.poll {
    background-color: #d1ecf1;
    color: #0c5460;
}

#allNotificationsModal .notification-icon.announcement {
    background-color: #f8d7da;
    color: #721c24;
}

#allNotificationsModal .notification-icon.event {
    background-color: #d4edda;
    color: #155724;
}

#allNotificationsModal .notification-icon.social {
    background-color: #e2e3e5;
    color: #383d41;
}

#allNotificationsModal .notification-content {
    flex: 1;
    min-width: 0;
}

#allNotificationsModal .notification-title {
    font-weight: 600;
    font-size: 1rem;
    color: #212529;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

#allNotificationsModal .notification-message {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
}

#allNotificationsModal .notification-time {
    font-size: 0.8rem;
    color: #6c757d;
}

#allNotificationsModal .notification-time .relative-time {
    font-weight: 500;
}

#allNotificationsModal .notification-time .absolute-time {
    font-size: 0.75rem;
}

#allNotificationsModal .notification-actions {
    flex-shrink: 0;
    margin-left: 1rem;
    display: flex;
    align-items: center;
}

#allNotificationsModal .unread-indicator {
    color: #ffc107;
    font-size: 0.6rem;
}

#allNotificationsModal .notification-empty {
    padding: 3rem 2rem;
}

#allNotificationsModal .notification-loading {
    padding: 2rem;
}

/* Responsive adjustments for all notifications modal */
@media (max-width: 768px) {
    #allNotificationsModal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    #allNotificationsModal .notification-item {
        padding: 0.75rem;
    }
    
    #allNotificationsModal .notification-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin-right: 0.75rem;
    }
    
    #allNotificationsModal .notification-title {
        font-size: 0.95rem;
    }
    
    #allNotificationsModal .notification-message {
        font-size: 0.85rem;
    }
    
    #allNotificationsModal .all-notifications-list {
        max-height: 400px;
    }
}

.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #64748b;
    text-align: center;
}

.notification-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.notification-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.notification-empty small {
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.7;
}

/* ✅ Sidebar Toggle Button (☰) */
.sidebar-toggle {
    font-size: 24px;
    background: none;
    border: none;
    color: var(--theme-primary, #4b0082);
    cursor: pointer;
    transition: color 0.3s ease;
}

.sidebar-toggle:hover {
    color: var(--theme-primary-dark, #2d0052);
}

/* ✅ Fix Logo */
.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-logo,
.navbar-brand img {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

/* ✅ Fix Search Bar */
.navbar-center .navbar-search-form {
    width: 100% !important;
    max-width: 500px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.navbar-center .search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    justify-content: center !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

.navbar-center .search-input {
    flex: 0 1 auto !important;
    width: 300px !important;
    min-width: 200px !important;
    max-width: 400px !important;
    border-radius: 20px;
    padding: 8px 15px;
    border: 1px solid rgba(75, 0, 130, 0.2);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 39px !important;
}

.search-input:focus {
    border-color: var(--theme-primary, #4b0082);
    box-shadow: 0 0 0 2px rgba(75, 0, 130, 0.1);
}

.navbar-center .search-btn {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 20px;
    padding: 8px 15px;
    background: rgba(75, 0, 130, 0.1);
    border: 1px solid rgba(75, 0, 130, 0.2);
    color: var(--theme-primary, #4b0082);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px;
    height: 39px !important;
    box-sizing: border-box;
}

.search-btn:hover {
    background: rgba(75, 0, 130, 0.2);
    border-color: var(--theme-primary, #4b0082);
}

/* ✅ Common Dropdown Styles */
.language-menu, .profile-menu {
    position: relative;
    display: inline-block;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 25px;
    background: none;
    border: 1px solid rgba(75, 0, 130, 0.2);
    cursor: pointer;
    color: var(--theme-primary, #4b0082);
    transition: all 0.3s ease;
    font-size: 13px;
    white-space: nowrap;
    min-width: fit-content;
}

.language-btn i {
    font-size: 14px;
}

.language-btn span {
    font-size: 12px;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 25px;
    padding: 6px 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-primary, #4b0082);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.profile-btn i:first-child {
    font-size: 16px;
}

.profile-btn .profile-name {
    font-size: 13px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-btn i.fa-chevron-down {
    font-size: 10px;
}

.language-btn:hover {
    background: rgba(75, 0, 130, 0.1);
    border-color: rgba(75, 0, 130, 0.4);
}

.profile-btn:hover {
    background: rgba(75, 0, 130, 0.1); /* Light Purple Hover Effect */
}

/* ✅ Responsive Navbar Styles */
@media (max-width: 1200px) {
    .navbar-container {
        padding: 0 15px !important;
        gap: 10px !important;
        grid-template-columns: auto 1fr auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .navbar {
        width: 100vw !important;
    }
    
    .search-input {
        max-width: 300px;
    }
    
    .profile-btn .profile-name {
        max-width: 100px;
    }
    
    .notification-menu .dropdown-menu,
    .notification-menu .notification-dropdown {
        width: 500px;
        min-width: 480px;
        max-width: 520px;
    }
}

@media (max-width: 992px) {
    .navbar-container {
        padding: 0 10px !important;
        gap: 8px !important;
        grid-template-columns: auto 1fr auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .navbar {
        width: 100vw !important;
    }
    
    .navbar-center {
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-input {
        max-width: 250px;
        min-width: 120px;
        padding: 6px 12px;
        font-size: 13px;
        box-sizing: border-box;
    }
    
    .navbar-center .search-input {
        height: 32px !important;
    }
    
    .navbar-center .search-btn {
        padding: 6px 12px;
        min-width: 36px;
        height: 32px !important;
        box-sizing: border-box;
    }
    
    .language-btn span {
        display: none; /* Hide text on medium screens */
    }
    
    .profile-btn .profile-name {
        max-width: 80px;
    }
    
    .navbar-separator {
        margin: 0 5px;
    }
}

@media (max-width: 768px) {
    .navbar {
        min-height: 60px;
        width: 100vw !important;
    }
    
    .navbar-container {
        padding: 0 10px !important;
        gap: 8px !important;
        grid-template-columns: auto 1fr auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .navbar-left {
        gap: 8px;
    }
    
    .navbar-brand {
        flex-shrink: 1;
        min-width: 0;
    }
    
    .navbar-logo,
    .navbar-brand img {
        max-width: 100px;
        height: 35px;
    }
    
    .navbar-center {
        padding: 0 5px !important;
        justify-self: center;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .navbar-search-form {
        max-width: 100%;
        width: 100%;
    }
    
    .search-input-wrapper {
        width: 100%;
    }
    
    .search-input {
        max-width: 140px;
        min-width: 100px;
        padding: 5px 10px;
        font-size: 12px;
        height: 28px !important;
        box-sizing: border-box;
    }
    
    .search-btn {
        padding: 5px 10px;
        min-width: 32px;
        height: 28px !important;
        font-size: 12px;
        box-sizing: border-box;
    }
    
    .navbar-right {
        gap: 6px;
        justify-self: end;
    }
    
    .language-btn {
        padding: 6px;
        min-width: 36px;
        height: 36px;
        justify-content: center;
    }
    
    .language-btn i {
        margin: 0;
    }
    
    .language-btn span {
        display: none;
    }
    
    .notification-btn {
        width: 36px;
        height: 36px;
        padding: 6px;
        font-size: 16px;
    }
    
    .leaderboard-btn {
        width: 36px;
        height: 36px;
        padding: 6px;
        font-size: 16px;
    }
    
    .profile-btn {
        padding: 6px 8px;
        min-width: auto;
    }
    
    .profile-btn .profile-name {
        display: none; /* Hide name on mobile */
    }
    
    .profile-btn i.fa-chevron-down {
        display: none; /* Hide chevron on mobile */
    }
    
    .navbar-separator {
        display: none; /* Hide separator on mobile */
    }
    
    .notification-menu .dropdown-menu,
    .notification-menu .notification-dropdown {
        width: calc(100vw - 20px) !important;
        min-width: 400px !important;
        max-width: 500px !important;
    }
    
    .notification-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-height: calc(100vh - 100px);
    }
    
    .dropdown-menu {
        width: calc(100vw - 20px);
        max-width: 280px;
        right: 10px;
    }
    
    /* Ensure notification dropdown stays in viewport */
    .notification-menu {
        overflow: visible;
    }
}
@media (max-width: 576px) {
    .navbar-container {
        padding: 0 8px;
        gap: 5px;
        grid-template-columns: auto 1fr auto;
    }
    
    .sidebar-toggle {
        font-size: 20px;
        padding: 5px;
    }
    
    .navbar-logo,
    .navbar-brand img {
        max-width: 80px;
        height: 30px;
    }
    
    .navbar-left {
        justify-self: start;
    }
    
    .navbar-center {
        justify-self: center;
    }
    
    .navbar-right {
        justify-self: end;
    }
    
    .language-btn,
    .notification-btn,
    .leaderboard-btn,
    .profile-btn {
        width: 32px;
        height: 32px;
        padding: 5px;
        min-width: 32px;
    }
    
    .notification-menu .dropdown-menu,
    .notification-menu .notification-dropdown {
        width: calc(100vw - 16px) !important;
        min-width: 350px !important;
        max-width: 480px !important;
    }
    
    .notification-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-height: calc(100vh - 80px);
    }
    
    .dropdown-menu {
        width: calc(100vw - 16px);
        max-width: 260px;
        right: 8px;
    }
}
/* ✅ Dropdown Menu Styling */
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background: #fff; /* White Background */
    border: 1px solid var(--navbar-bg, #d9b3ff); /* Theme Navbar Color Border */
    padding: 10px;
    width: 200px;
    max-width: 90vw; /* Prevent overflow on small screens */
    flex-direction: column;
    text-align: left;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border-radius: 5px;
}

/* ✅ Language Search Box */
.language-search {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--navbar-bg, #d9b3ff); /* Theme Navbar Color Border */
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    outline: none;
    color: var(--theme-primary, #4b0082); /* Theme Primary Color Text */
}

/* ✅ Scrollable Language List */
.language-list {
    max-height: 150px; /* Limits the height and makes it scrollable */
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--navbar-bg, #d9b3ff) #f4f4f4; /* Theme Navbar Color Scrollbar */
}

/* ✅ Custom Scrollbar for Webkit Browsers */
.language-list::-webkit-scrollbar {
    width: 8px;
}

.language-list::-webkit-scrollbar-thumb {
    background: var(--navbar-bg, #d9b3ff); /* Theme Navbar Color */
    border-radius: 5px;
}

.language-list::-webkit-scrollbar-track {
    background: #f4f4f4;
}

/* ✅ Dropdown Menu Items */
.dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--navbar-bg, #d9b3ff); /* Theme Navbar Color Divider */
    text-decoration: none;
    color: var(--theme-primary, #4b0082); /* Theme Primary Color Text */
    transition: background 0.2s ease-in-out;
}

/* ✅ Font Awesome Icons Styling */
.dropdown-menu a i {
    margin-right: 10px;
}

/* ✅ Remove Border for Last Item */
.dropdown-menu a:last-child {
    border-bottom: none;
}

/* ✅ Hover Effect */
.dropdown-menu a:hover {
    background: var(--navbar-bg, #d9b3ff); /* Theme Navbar Color Hover Background */
    color: #fff; /* White Text */
}

/* ✅ Display Dropdown When Active */
.language-menu.active .dropdown-menu,
.profile-menu.active .dropdown-menu {
    display: block;
}



/* ✅ Fix Sidebar */
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 60px;
    left: 0;
    background: var(--sidebar-bg, #6a0dad) !important;
    background-color: var(--sidebar-bg, #6a0dad) !important;
    color: white;
    padding-top: 20px;
    transition: all 0.3s;
    z-index: 1030;
}
.sidebar.collapsed {
    width: 80px;
}
.sidebar ul {
    padding-left: 0;
    list-style: none;
}
.sidebar ul li {
    padding: 15px;
    display: flex;
    align-items: center;
}
.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.sidebar.collapsed ul li a span {
    display: none;
}
/* Center icons when sidebar is collapsed */
.sidebar.collapsed ul li {
    justify-content: center;
    padding: 15px 10px;
}
.sidebar.collapsed ul li a {
    justify-content: center;
    width: 100%;
}
.sidebar.collapsed ul li a i {
    margin: 0 !important;
    font-size: 20px !important;
    width: 20px;
    text-align: center;
}
.sidebar ul li:hover {
    background: var(--sidebar-hover-bg, #4b0082) !important; /* Theme matching dark purple */
}
/* Custom tooltip for collapsed sidebar */
.sidebar.collapsed ul li a[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    padding: 8px 12px;
    background: var(--sidebar-hover-bg, #4b0082) !important;
    color: white;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.sidebar.collapsed ul li a[title]:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--sidebar-hover-bg, #4b0082) !important;
}

/* ✅ Fix Dashboard Content (Avoid Overlapping with Sidebar) */
/* ✅ Override Bootstrap's Max-Width */
/* ✅ Ensure Full-Width Without Overflow */
.container {
  /*   max-width: calc(100% - 250px) !important; Adjust width based on sidebar */
    width: 100%;
    transition: margin-left 0.1s ease-in-out;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

/* ✅ When Sidebar is Collapsed */
.sidebar.collapsed + .container {
    max-width: calc(100% - 80px) !important; /* Adjust width based on collapsed sidebar */
    margin-left: 80px !important;
}

/* ✅ When Sidebar is Expanded */
.sidebar + .container {
    margin-left: 250px !important;
    max-width: calc(100% - 250px) !important;
}



/* ✅ Manage Portal Tabs Styling - Using Theme Primary Color */
.nav-tabs {
    border-bottom: 2px solid var(--theme-primary, #6a0dad);
    display: flex;
    justify-content: center;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-tabs .nav-item {
    margin-right: 10px;
    list-style: none;
}
.nav-tabs .nav-item .nav-link {
    color: var(--theme-primary, #6a0dad);
    font-weight: bold;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
}
.nav-tabs .nav-item .nav-link.active {
    background-color: var(--theme-primary, #6a0dad);
    color: white;
    border-radius: 5px;
}


.nav-tabs .nav-link.active {
    background-color: var(--theme-primary, #6a0dad) !important;
    color: white !important;
    border-color: #ddd;
}

/* ✅ Also ensure hover effect - Using theme primary light */
.nav-tabs .nav-link:hover {
    background-color: var(--theme-primary-light, #8c52ff) !important;
    color: white !important;
}

/* ✅ Tab Error Styling for Validation */
.nav-tabs .nav-link.tab-error {
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: #fff5f5 !important;
    position: relative;
}

.nav-tabs .nav-link.tab-error::after {
    content: "!";
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.nav-tabs .nav-link.tab-error:hover {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

/* ✅ Tab Content */
.tab-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

/* ✅ User Management & User Settings Side by Side */
.user-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}
.user-box {
    padding: 20px;
    cursor: pointer;
    border: 1px solid var(--theme-primary, #6a0dad);
    border-radius: 8px;
    background-color: white;
    transition: 0.3s;
    position: relative;
}
.user-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-primary, #6a0dad);
    opacity: 0;
    border-radius: 8px;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.user-box:hover::before {
    opacity: 0.1;
}
.user-box:hover {
    /* Fallback for older browsers */
    box-shadow: 0px 4px 8px rgba(106, 13, 173, 0.2);
    /* Modern browsers with theme color support */
    box-shadow: 0px 4px 8px color-mix(in srgb, var(--theme-primary, #6a0dad) 20%, transparent);
}
.user-box > * {
    position: relative;
    z-index: 1;
}
.user-box h5 {
    color: var(--theme-primary, #6a0dad);
}
.user-box p {
    font-size: 14px;
    color: #555;
}

.site-footer .site-info {
    text-align: center;
    padding: 10px;
    background: var(--footer-bg, #6a0dad) !important;
    background-color: var(--footer-bg, #6a0dad) !important;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1020; /* above cards (10) but below navbar (1040) and sidebar (1030) */
}

/* ✅ Login Page Styling */

/* Reset all margins and padding for login page */
.login-body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-body html,
.login-body body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.login-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, var(--theme-primary, #6a0dad), #b39ddb);
}

.login-box {
    display: flex;
    width: 600px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.login-left {
    width: 40%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: moveBackgroundLogin 20s linear infinite;
}

@keyframes moveBackgroundLogin {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.login-left img {
    width: 200px;
    height: auto;
    position: relative;
    z-index: 1;
    filter: brightness(0) invert(1);
}

.login-tagline {
    margin-top: 30px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

.login-tagline p {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.95;
    line-height: 1.6;
}

.login-right {
    width: 60%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.back-to-website {
    margin-bottom: 20px;
}

.back-to-website a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.back-to-website a:hover {
    color: #5568d3;
    gap: 12px;
}

.login-title {
    font-size: 28px;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 8px;
    text-align: center;
}

.login-subtitle {
    text-align: center;
    color: #718096;
    margin-bottom: 30px;
    font-size: 1rem;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.login-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.login-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

.forgot-password {
    text-align: center;
    margin-top: 10px;
}

.forgot-password a {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.forgot-password a:hover {
    color: #5568d3;
    text-decoration: underline;
}

.login-footer-links {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.login-footer-links p {
    color: #718096;
    font-size: 0.95rem;
}

.login-footer-links a {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
}

.login-footer-links a:hover {
    color: #5568d3;
    text-decoration: underline;
}

/* ✅ Login Form Validation Styling */
.form-group {
    margin-bottom: 15px;
}

.error-message {
    color: #721c24;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 15px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 1px solid #f5c6cb;
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    display: none;
    animation: slideInError 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.error-message.show {
    display: block !important;
}

.error-message:empty {
    display: none !important;
}

.error-message:not(:empty) {
    display: block;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Warning messages (for remaining attempts) */
.error-message.warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffc107;
    border-left-color: #ffc107;
    color: #856404;
}

/* Locked account message */
.error-message.locked {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #dc3545;
    border-left-color: #dc3545;
    color: #721c24;
    font-weight: 600;
}

.login-input.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* ✅ Change Password Modal Styling */
#changePasswordModal .modal-header {
    border-bottom: none;
}

#changePasswordModal .input-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 6px;
}

#changePasswordModal .input-group .form-control {
    border-right: none;
}

#changePasswordModal .input-group .btn {
    border-left: none;
    background: white;
    border-color: #ced4da;
}

#changePasswordModal .input-group .btn:hover {
    background: #f8f9fa;
}

#changePasswordModal .input-group:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

#changePasswordModal .input-group:focus-within .form-control,
#changePasswordModal .input-group:focus-within .btn {
    border-color: #667eea;
}

#changePasswordModal .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    padding: 10px 20px;
}

#changePasswordModal .btn-primary:hover {
    background: linear-gradient(135deg, #5568d3, #6a3f8f);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

#changePasswordModal .text-muted {
    font-size: 0.85rem;
    display: block;
    margin-top: 5px;
}

/* ✅ SSO Section Styling */
.sso-section {
    margin-top: 20px;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
}

.divider span {
    background: white;
    padding: 0 15px;
    color: #666;
    font-size: 14px;
}

.sso-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.sso-btn:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

.sso-btn i {
    margin-right: 8px;
}

.spinner {
    margin-left: 10px;
}

/* ✅ Client Management Specific Styling */
.client-code-input {
    text-transform: uppercase;
}

.current-logo-preview {
    margin-top: 10px;
}

.current-logo-img {
    max-width: 100px;
    max-height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.progress-bar-thin {
    height: 4px;
}

.search-results-info {
    display: none;
}

.loading-indicator {
    display: none;
}
/* Client card styling improvements */
.client-card {
    transition: transform 0.2s ease-in-out;
}

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

.info-item {
    margin-bottom: 8px;
}

.info-item:last-child {
    margin-bottom: 0;
}

/* Form validation styling for client forms */
.client-form .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.client-form .error-message.show {
    display: block;
}

.client-form .error-message:empty {
    display: none;
}

.client-form .is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Loading states for buttons */
.btn-loading {
    position: relative;
}

.btn-loading .spinner {
    margin-right: 0.5rem;
}

/* ✅ User Management Page Styling */
.filter-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

.filter-section .form-select,
.filter-section .form-control {
    min-width: 150px;
}
.filter-section .row {
    align-items: center;
}
.filter-section .col-md-auto {
    display: flex;
    align-items: center;
}

/* ✅ User Management Compact Filter Layout */
.user-management .filter-section {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

/* Compact Filter Controls */
.compact-filter {
    width: auto;
    min-width: 110px;
    max-width: 140px;
    font-size: 0.875rem;
}

.compact-search {
    width: 200px;
}

.compact-search .form-control {
    font-size: 0.875rem;
}



/* Responsive adjustments */
@media (max-width: 1200px) {
    .user-management .filter-section .row {
        flex-wrap: wrap;
    }

    .user-management .filter-section .col-auto {
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {
    .user-management .filter-section {
        padding: 10px;
    }

    .compact-filter {
        min-width: 100px;
        max-width: 120px;
    }

    .compact-search {
        width: 180px;
    }

    .user-management .filter-section .ms-auto {
        margin-left: 0 !important;
        margin-top: 10px;
    }
}

.question-grid th,
thead.question-grid th,
table thead.question-grid th {
    background-color: var(--theme-primary, #6a0dad) !important;
    color: white !important;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.question-grid td {
    vertical-align: middle;
    color: #212529; /* Ensure text is visible (Bootstrap's default text color) */
}

/* Ensure badges in question-grid have proper contrast */
.question-grid .badge {
    color: inherit; /* Inherit color from badge type */
}

.btn-clear-filters {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-clear-filters:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.search-results-info {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 15px;
}

#loadingIndicator {
    padding: 40px 0;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

.fade-transition {
    transition: opacity 0.3s ease-in-out;
}

.filter-section .form-select:focus,
.filter-section .form-control:focus {
    border-color: var(--theme-primary, #6a0dad);
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

.page-link {
    color: var(--theme-primary, #6a0dad);
}

.page-link:hover {
    color: var(--theme-primary-dark, #5a0b8a);
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    background-color: var(--theme-primary, #6a0dad);
    border-color: var(--theme-primary, #6a0dad);
    color: #ffffff !important;
}

.no-results-message {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-results-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #dee2e6;
}

.user-grid {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.user-grid th, .user-grid td {
    padding: 10px;
    border: 1px solid #ddd;
}

.user-grid th {
    background: var(--theme-primary, #6a0dad);
    color: white;
}

/* Action buttons styling removed - now using standard Bootstrap btn classes to match assessment grid */

/* ✅ Add User Page Styling */
.add-user-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   /* margin-top: 20px; */
}

.add-user-tabs {
    display: flex;
    border-bottom: 2px solid var(--theme-primary, #6a0dad);
    margin-bottom: 20px;
}

.add-user-tabs .tab {
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    color: var(--theme-primary, #6a0dad);
    border-bottom: 2px solid transparent;
}

.add-user-tabs .tab.active {
    border-bottom: 2px solid var(--theme-primary, #6a0dad);
}

.tabcontent- {
    display: block;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.tab-content.active {
    display: block;
}

.input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
}

.submit-btn {
    background: var(--theme-primary, #6a0dad);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.submit-btn:hover {
    background: #5a0bab;
}

/* Container for search input and icon */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar {
    width: 100%;
    padding: 10px 40px 10px 10px; /* Adjust right padding to accommodate the icon */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* ✅ Search Bar Focus Styling */
.search-bar:focus,
.search-input:focus,
.language-search:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
    outline: none !important;
}

.search-icon {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-primary, #6a0dad); /* Match your theme color */
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon:hover {
    color: #4b0082; /* Darker shade for hover effect */
}


/* ✅ Tabs Content */
.tab-pane {
    display: none; /* Hide all tabs initially */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

/* ✅ Only the active tab should be visible */
.tab-pane.show.active {
    display: block;
}

/* ✅ Align Submit and Cancel Buttons to the Right */

.form-group {
    margin-bottom: 15px; /* Add consistent spacing between form fields */
}

/* ✅ Ensure Two Fields Appear Side by Side */
.form-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Ensure spacing between fields */
}

.form-group-row .form-group {
    flex: 1;
    min-width: 45%;
}

/* ✅ Center Submit & Cancel Buttons */
.form-actions {
    display: flex;
    justify-content: center; /* Center align buttons */
    gap: 15px; /* Space between buttons */
    /*margin-top: 25px; Ensure spacing from form fields */
}

/* ✅ Theme Consistency for Buttons */
.btn-primary {
    background-color: var(--theme-primary, #6a0dad) !important; /* Theme primary button */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
    transition: 0.3s;
}

.btn-primary:hover {
    background-color: var(--theme-primary-dark, #4b0082) !important; /* Darker shade on hover */
}

.btn-danger {
    background-color: #dc3545 !important; /* Red cancel button */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
    transition: 0.3s;
}

.btn-danger:hover {
    background-color: #a71d2a !important; /* Darker red on hover */
}

/* ✅ Sidebar Styling */
#sidebar {
    background-color: var(--sidebar-bg, #6a0dad) !important; /* Theme primary color */
    min-height: 100vh;
    padding-top: 20px;
}

/* ✅ List Group Theme Fix */
.list-group {
    background-color: transparent; /* neutral to avoid bright module backgrounds */
    border-radius: 8px;
}

/* ✅ List Group Items */
.list-group-item {
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    padding: 12px 15px;
    font-size: 16px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* ✅ Hover & Active State - Sidebar specific */
#sidebar .list-group-item:hover, 
#sidebar .list-group-item.active {
    background-color: var(--sidebar-hover-bg, #4b0082) !important; /* Darker shade for hover */
    color: #fff !important;
}

/* ✅ List Group Icons */
.list-group-item i {
    margin-right: 0 !important;
}
.input-error {
    border: 2px solid red !important;
    background-color: #ffe6e6; /* Light red background */
}

/* ✅ Theme Colors - Using CSS Variables */
:root {
    --theme-primary: #6A0DAD;
    --theme-primary-dark: #530b8a;
    --theme-primary-light: #8c52ff;
    --theme-primary-hover: #5a0f9f;
    --navbar-bg: #d9b3ff;
    --navbar-hover-bg: #c29cf9;
    --sidebar-bg: #6a0dad;
    --sidebar-hover-bg: #4b0082;
    --footer-bg: #6a0dad;
}

.theme-btn-primary {
    background-color: var(--theme-primary, #6A0DAD); /* Theme Purple */
    color: white;
    border: none;
    padding: 6px 9px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.theme-btn-primary:hover {
    background-color: var(--theme-primary-hover, #530b8a); /* Darker shade */
    color: white !important; /* Maintain white text on hover */
}

.theme-btn-warning {
    background-color: #FFC107; /* Theme Yellow */
    color: black;
    border: none;
    padding: 6px 9px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.theme-btn-warning:hover {
    background-color: #e0a800; /* Darker shade */
}

.theme-btn-danger {
    background-color: #DC3545; /* Theme Red */
    color: white;
    border: none;
    padding: 6px 9px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.theme-btn-danger:hover {
    background-color: #bd2130; /* Darker shade */
    color: white !important; /* Maintain white text on hover */
}

/* ✅ Consistent button sizing across all grids - let theme buttons use their natural size */


/* ✅ Uniform Button Sizing */
.btn-sm {
    min-width: 35px;
    text-align: center;
}

/* ✅ Page Title */
.page-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--theme-primary, #6a0dad); /* Theme Purple */
}

/* ✅ Custom Tabs - Using Theme Primary Color */
.custom-tabs .nav-link {
    color: var(--theme-primary-dark, #4b0082);
    font-weight: bold;
    border: none;
}

.custom-tabs .nav-link.active {
    background-color: var(--theme-primary, #6a0dad);
    color: white;
    border-radius: 5px;
}

.custom-tabs .nav-link:hover {
    background-color: var(--theme-primary-hover, #5a0f9f);
    color: white;
}

/* ✅ Card Styles */
.card {
    background: #ffffff;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    position: relative; /* establish stacking context */
    z-index: 0;
}

.card h5 {
    color: var(--theme-primary, #6a0dad); /* Purple */
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0px 12px 24px rgba(106, 13, 173, 0.25);
    z-index: 10; /* raise above siblings but below fixed footer */
}

.card-body i {
    color: #6c757d;
}

/* ✅ Tag Container Styles for Modal Forms */
.tag-container {
    min-height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background-color: #fff;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 40px;
    align-items: center;
    padding: 5px;
    margin-bottom: 1rem;
}

.tag {
    background-color: #6c5ce7;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
}

.tag .fa-times,
.tag .remove-tag {
    background: none;
    border: none;
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

.tag .fa-times:hover,
.tag .remove-tag:hover {
    color: #ff6b6b;
}

.tag-input-container input {
    border: none;
    outline: none;
    flex-grow: 1;
}

/* ✅ Tag Input Container Focus Styling */
.tag-input-container:focus-within {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

.tag-input-container input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* ✅ SCORM Card Styling */
.scorm-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad); /* Theme color */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.scorm-card:hover {
    transform: scale(1.05);
}

.scorm-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad); /* Theme color */
    margin-bottom: 10px;
}

.scorm-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.scorm-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.scorm-actions .edit-icon {
    color: #007bff; /* Blue */
    margin-right: 10px;
    cursor: pointer;
}

.scorm-actions .delete-icon {
    color: #dc3545; /* Red */
    cursor: pointer;
}

.scorm-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.scorm-actions i:hover {
    opacity: 0.7;
}
.scorm-actions a {
    text-decoration: none; /* Removes the underline */
}

.scorm-actions a:hover {
    text-decoration: none; /* Ensures no underline on hover */
}

/* ✅ SCORM File Preview Styling - Consistent with Other Modules */
#scormZipPreview .preview-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

#scormZipPreview .remove-preview {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#scormZipPreview .remove-preview:hover {
    background: #c82333;
}

#scormZipPreview p {
    margin: 0;
    word-break: break-all;
}

#scormZipPreview a {
    color: var(--theme-primary, #6a0dad);
    text-decoration: none;
}

#scormZipPreview a:hover {
    text-decoration: underline;
}

/* External content CSS for card */
/* ✅ General Styling */
/* ✅ External Content Card Styling */
.content-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad); /* Theme color - Purple */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.content-card:hover {
    transform: scale(1.05);
}

/* ✅ Dynamic Icons Based on Content Type */
.content-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* ✅ Specific Icons for Different Sub-tabs */
.content-icon.video { color: #e84118; }       /* Red for YouTube/Vimeo */
.content-icon.course { color: #0984e3; }      /* Blue for LinkedIn/Udemy */
.content-icon.article { color: #2d3436; }     /* Dark Gray for Web Articles/Blogs */
.content-icon.podcast { color: #e67e22; }     /* Orange for Podcasts/Audio */

/* ✅ Title Styling */
.content-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ Action Buttons (Edit & Delete) */
.content-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.content-actions .preview-icon {
    color: #28a745; /* Green */
    margin-right: 10px;
    cursor: pointer;
}

.content-actions .edit-icon {
    color: #00a8ff; /* Light Blue */
    margin-right: 10px;
    cursor: pointer;
}

.content-actions .delete-icon {
    color: #e74c3c; /* Red */
    cursor: pointer;
}

.content-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.content-actions i:hover {
    opacity: 0.7;
}

/* ✅ Ensuring No Underlines on Links */
.content-actions a {
    text-decoration: none;
}

.content-actions a:hover {
    text-decoration: none;
}
/* ✅ Assessment & Survey validation error styling */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

.invalid-feedback i {
    margin-right: 0.25rem;
}

/* Focus state for invalid fields */
.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ✅ File validation alerts in media preview */
#mediaPreview .alert {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.875em;
    border-radius: 4px;
}

#mediaPreview .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

#mediaPreview .alert i {
    margin-right: 0.5rem;
}
/* Back arrow button code */
/* Container for back arrow and page title */
.back-arrow-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Back link with arrow icon */
.back-link {
    text-decoration: none;
    font-size: 20px;
    color: var(--theme-primary, #6a0dad); /* Theme Purple */
}

.back-link:hover {
    color: var(--theme-primary-dark, #4b0082); /* Accent color */
}
/* Vertical divider between icon and title */
.divider-line {
    border-left: 1px solid #ccc;
    height: 24px;
}
/* ✅ Assessment Card Styling (Same as SCORM) */
.assessment-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.assessment-card:hover {
    transform: scale(1.05);
}

.assessment-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad);
    margin-bottom: 10px;
}

.assessment-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.assessment-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.assessment-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.assessment-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.assessment-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.assessment-actions i:hover {
    opacity: 0.7;
}

.assessment-actions a {
    text-decoration: none;
}

.assessment-actions a:hover {
    text-decoration: none;
}

/* ✅ Document Card Styling (Same as SCORM and Assessment) */
.document-card {
    background: #fff;
    border: 2px solid #6a0dad;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.document-card:hover {
    transform: scale(1.05);
}

.document-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* Document icons use Bootstrap color utility classes (text-primary, text-success, text-warning) 
   on the <i> tag, which will handle the colors automatically */

.document-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.document-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.document-actions .preview-icon {
    color: #28a745; /* Green */
    margin-right: 10px;
    cursor: pointer;
}

.document-actions .edit-icon {
    color: #007bff; /* Blue */
    margin-right: 10px;
    cursor: pointer;
}

.document-actions .delete-icon {
    color: #dc3545; /* Red */
    cursor: pointer;
}

.document-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.document-actions i:hover {
    opacity: 0.7;
}

.document-actions a {
    text-decoration: none;
}

.document-actions a:hover {
    text-decoration: none;
}

/* ✅ External Content Card Styling (Same as SCORM, Assessment, and Document) */
.external-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.external-card:hover {
    transform: scale(1.05);
}

.external-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* External content icons use Bootstrap color utility classes (text-primary, text-success, text-warning, text-dark) 
   on the <i> tag, which will handle the colors automatically */

.external-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.external-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.external-actions .preview-icon {
    color: #28a745; /* Green */
    margin-right: 10px;
    cursor: pointer;
}

.external-actions .edit-icon {
    color: #007bff; /* Blue */
    margin-right: 10px;
    cursor: pointer;
}

.external-actions .delete-icon {
    color: #dc3545; /* Red */
    cursor: pointer;
}

.external-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.external-actions i:hover {
    opacity: 0.7;
}

.external-actions a {
    text-decoration: none;
}

.external-actions a:hover {
    text-decoration: none;
}

.assessment-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.assessment-wrapper-border{
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}



/* ✅ Audio Card Styling (Similar to Assessment but customizable) */
.audio-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad); /* Theme color - matches SCORM */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.audio-card:hover {
    transform: scale(1.05);
}

.audio-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad); /* Theme color - matches SCORM */
    margin-bottom: 10px;
}

.audio-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.audio-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.audio-actions .preview-icon {
    color: #28a745;
    margin-right: 10px;
    cursor: pointer;
}

.audio-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.audio-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.audio-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.audio-actions i:hover {
    opacity: 0.7;
}

.audio-actions a {
    text-decoration: none;
}

.audio-actions a:hover {
    text-decoration: none;
}

.audio-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.audio-wrapper-border {
    border: 2px solid #d9b3ff;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
}

/* ✅ Video Card Styling (Mirrors Audio Design with Distinct Theme) */
.video-card {
    background: #fff;
    border: 2px solid #3949ab; /* Indigo or customize */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.video-card:hover {
    transform: scale(1.05);
}

.video-icon {
    font-size: 40px;
    color: #3949ab; /* matches border */
    margin-bottom: 10px;
}

.video-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.video-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.video-actions .preview-icon {
    color: #28a745;
    margin-right: 10px;
    cursor: pointer;
}

.video-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.video-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.video-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.video-actions i:hover {
    opacity: 0.7;
}

.video-actions a {
    text-decoration: none;
}

.video-actions a:hover {
    text-decoration: none;
}

.video-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.video-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

/* ✅ Image Card Styling (Mirrors Video Design with Distinct Theme) */
.image-card {
    background: #fff;
    border: 2px solid #3949ab; /* Green or customize */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.image-card:hover {
    transform: scale(1.05);
}

.image-icon {
    font-size: 40px;
    color: #3949ab; /* matches border */
    margin-bottom: 10px;
}

.image-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.image-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.image-actions .preview-icon {
    color: #28a745;
    margin-right: 10px;
    cursor: pointer;
}

.image-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.image-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.image-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.image-actions i:hover {
    opacity: 0.7;
}

.image-actions a {
    text-decoration: none;
}

.image-actions a:hover {
    text-decoration: none;
}

.image-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.image-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

.image-thumbnail {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* ✅ Survey Card Styling (Mirrors Assessment Design with Distinct Theme) */
.survey-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad); /* Purple theme for surveys */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.survey-card:hover {
    transform: scale(1.05);
}

.survey-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad);  /* matches border */
    margin-bottom: 10px;
}

.survey-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.survey-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.survey-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.survey-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.survey-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.survey-actions i:hover {
    opacity: 0.7;
}

.survey-actions a {
    text-decoration: none;
}

.survey-actions a:hover {
    text-decoration: none;
}

.survey-wrapper {
    margin-top: 20px;
}

.survey-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

/* ✅ Feedback Card Styling (Follows Consistent Theme Color) */
.feedback-card {
    background: #fff;
    border: 2px solid var(--theme-primary, #6a0dad); /* Purple theme - consistent with other cards */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.feedback-card:hover {
    transform: scale(1.05);
}

.feedback-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad); /* matches border and theme */
    margin-bottom: 10px;
}

.feedback-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.feedback-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.feedback-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.feedback-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.feedback-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.feedback-actions i:hover {
    opacity: 0.7;
}

.feedback-actions a {
    text-decoration: none;
}

.feedback-actions a:hover {
    text-decoration: none;
}

.feedback-wrapper {
    margin-top: 20px;
}

.feedback-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

/* Upload preview for question - large */
/* ✅ Modal Scroll Support */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* ✅ Upload Preview (Question Image - Larger) */
.question-upload-preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-top: 10px;
    position: relative;
}

/* ✅ Upload Preview (Option Image - Slightly Bigger Now) */
.option-upload-preview {
    width: 120px;
    height: 100px;
    object-fit: contain;
    margin-top: 5px;
    position: relative;
}

/* ✅ Cross Button - Square Shape */
.cross-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #fff;
    border: 1px solid #999;
    color: #000;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px; /* Square */
    z-index: 2;
}
.cross-icon:hover {
    background: #f8d7da;
    color: #721c24;
}

/* Ensure the preview container is position: relative */
.preview-container {
    position: relative;
    display: inline-block;
}
.preview-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.preview-wrapper img,
.preview-wrapper video,
.preview-wrapper iframe {
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Preview Sizes */
.preview-wrapper.question-preview img,
.preview-wrapper.question-preview video,
.preview-wrapper.question-preview iframe {
    width: 100%;
    max-height: 250px;
}

.preview-wrapper.option-preview img,
.preview-wrapper.option-preview video,
.preview-wrapper.option-preview iframe {
    width: 160px;
    max-height: 120px;
}

/* Cross Button */
.remove-preview {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc3545;
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    border-radius: 3px; /* Square */
    cursor: pointer;
}

/* ✅ Spacing below pagination to prevent overlap with footer */
.pagination-container {
    margin-top: 30px;
    margin-bottom: 40px; /* Space above footer */
}
/* ✅ Pagination Styles */
.pagination .page-item .page-link {
    color: #4b0082; /* Indigo */
    background-color: #ffffff;
    border: 1px solid #ddd;
    font-weight: 500;
    padding: 6px 12px;
    margin: 0 3px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.pagination .page-item .page-link:hover {
    /* Fallback for older browsers */
    background-color: rgba(106, 13, 173, 0.1);
    /* Modern browsers with theme color support */
    background-color: color-mix(in srgb, var(--theme-primary, #6a0dad) 15%, white);
    color: var(--theme-primary-dark, #4b0082);
    border-color: var(--theme-primary, #6a0dad);
}

/* Active state */
.pagination .page-item.active .page-link {
    background-color: var(--theme-primary, #6a0dad); /* Theme Purple */
    color: white;
    border-color: var(--theme-primary, #6a0dad);
    font-weight: 600;
    position: static;
}

/* Disabled state */
.pagination .page-item.disabled .page-link {
    color: #ccc;
    background-color: #f8f9fa;
    border-color: #ddd;
}

/* ✅ Interactive & AI Powered Content Package Cards */
.interactive-card {
    border: 2px solid var(--theme-primary, #6a0dad);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    background-color: #f9f9f9;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
    position: relative; /* Required for absolute positioning of actions */
}

.interactive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-primary, #6a0dad);
}

.interactive-icon {
    font-size: 40px;
    color: var(--theme-primary, #6a0dad);
    margin-bottom: 10px;
}
.interactive-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
/* Interactive Content Type Specific Fields */
.ai-tutoring-fields,
.ar-vr-fields,
.adaptive-learning-fields {
    display: none;
}

.ai-tutoring-fields.show,
.ar-vr-fields.show,
.adaptive-learning-fields.show {
    display: block;
}

/* Interactive Content Form Styling */
#interactiveModal .modal-dialog {
    max-width: 90%;
}

#interactiveModal .form-group {
    margin-bottom: 1rem;
}

#interactiveModal .form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
}

#interactiveModal .form-control:focus {
    border-color: #6a0dad;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

/* Interactive Content Tag Styling - Match SCORM Styling */
#interactiveTagDisplay .tag {
    background-color: #6c5ce7;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
}

#interactiveTagDisplay .tag .remove-tag {
    background: none;
    border: none;
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

#interactiveTagDisplay .remove-tag:hover {
    color: #ff6b6b;
}

/* Interactive Content File Upload Styling */
.interactive-file-upload {
    border: 2px dashed #6a0dad;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 10px 0;
    background-color: #f8f9fa;
}

.interactive-file-upload:hover {
    background-color: #e9ecef;
}

/* Interactive Content Conditional Fields Animation */
.ai-tutoring-fields,
.ar-vr-fields,
.adaptive-learning-fields {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* Interactive Content Icons for Different Types */
.interactive-card[data-type="adaptive_learning"] .interactive-icon {
    color: #28a745; /* Green for adaptive learning */
}

.interactive-card[data-type="ai_tutoring"] .interactive-icon {
    color: #007bff; /* Blue for AI tutoring */
}

.interactive-card[data-type="ar_vr"] .interactive-icon {
    color: #dc3545; /* Red for AR/VR */
}

/* Interactive Content Actions - Top Right Corner */
.interactive-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.interactive-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.interactive-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.interactive-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.interactive-actions i:hover {
    opacity: 0.7;
}

.interactive-actions a {
    text-decoration: none;
}

.interactive-actions a:hover {
    text-decoration: none;
}

/* Interactive Content File Preview Styling */
#interactiveModal .preview-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

#interactiveModal .preview-wrapper img {
    border: 1px solid #ddd;
    border-radius: 5px;
}

#interactiveModal .remove-preview {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc3545;
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    border-radius: 3px; /* Square like other modules */
    cursor: pointer;
    z-index: 10;
}

#interactiveModal .remove-preview:hover {
    background: #c82333;
}

/* ✅ Non-SCORM Package Styles (Following SCORM Pattern) */
.nonscorm-card {
    background: #fff;
    border: 2px solid #6a0dad; /* Theme color */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.nonscorm-card:hover {
    transform: scale(1.05);
}

.nonscorm-card .card-body {
    padding: 0;
    text-align: center;
}

.nonscorm-icon {
    font-size: 48px;
    color: #6a0dad;
    margin-bottom: 15px;
}

.nonscorm-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nonscorm-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
}

.nonscorm-actions a {
    text-decoration: none;
}

.nonscorm-actions .edit-icon {
    color: #007bff;
    font-size: 16px;
    transition: color 0.2s ease;
}

.nonscorm-actions .edit-icon:hover {
    color: #0056b3;
}

.nonscorm-actions .delete-icon {
    color: #dc3545;
    font-size: 16px;
    transition: color 0.2s ease;
}

.nonscorm-actions .delete-icon:hover {
    color: #c82333;
}

/* Non-SCORM Sub-tabs */
#nonScormSubTabs {
    border-bottom: 2px solid #6a0dad;
    margin-bottom: 20px;
}

#nonScormSubTabs .nav-link {
    color: #6a0dad;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: bold;
    padding: 10px 15px;
}

#nonScormSubTabs .nav-link:hover {
    color: #5a0b9a;
    border-bottom-color: #5a0b9a;
}

#nonScormSubTabs .nav-link.active {
    color: #6a0dad;
    border-bottom-color: #6a0dad;
    background-color: transparent;
}

/* Non-SCORM Modal Styles */
#nonScormModal .modal-dialog {
    max-width: 90%;
}

/* Content Type Specific Fields */
.html5-fields,
.flash-fields,
.unity-fields,
.custom-web-fields,
.mobile-app-fields {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    background-color: #f8f9fa;
}

.html5-fields h6,
.flash-fields h6,
.unity-fields h6,
.custom-web-fields h6,
.mobile-app-fields h6 {
    color: #6a0dad;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Non-SCORM File Preview Styles */
#nonScormModal .preview-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

#nonScormModal .preview-wrapper img {
    border: 1px solid #ddd;
    border-radius: 5px;
}

#nonScormModal .remove-preview {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc3545;
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    border-radius: 3px; /* Square like other modules */
    cursor: pointer;
    z-index: 10;
}

#nonScormModal .remove-preview:hover {
    background: #c82333;
}

/* Non-SCORM Tag Styles - Match SCORM Styling */
#nonScormModal .tag-input-container {
    min-height: 40px;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

#nonScormModal .tag {
    background-color: #6c5ce7;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
}

#nonScormModal .tag .remove-tag {
    background: none;
    border: none;
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

#nonScormModal #nonscormTagInput {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
    padding: 4px;
}

/* Non-SCORM Form Validation Styles */
#nonScormModal .is-invalid {
    border-color: #dc3545;
}

#nonScormModal .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Non-SCORM Responsive Design */
@media (max-width: 768px) {
    .nonscorm-card {
        margin-bottom: 15px;
    }

    .nonscorm-icon {
        font-size: 36px;
    }

    .nonscorm-title {
        font-size: 14px;
        min-height: 35px;
    }

    #nonScormModal .modal-dialog {
        max-width: 95%;
        margin: 10px auto;
    }

    #nonScormSubTabs .nav-link {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: bold;
    }
}

/* Interactive Content Error Styling - Match Other Modules */
#interactiveModal .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

#interactiveModal .invalid-feedback i {
    margin-right: 0.25rem;
}

#interactiveModal .is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

#interactiveModal .is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ✅ Global Form Control Theme Styling - Consistent Across All Modules */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus,
select.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ Bootstrap Custom Form Controls Theme Styling */
.form-check-input:focus,
.form-range:focus,
.btn-check:focus + .btn,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ Modal Form Controls Theme Styling */
.modal .form-control:focus,
.modal .form-select:focus,
.modal textarea:focus,
.modal input:focus,
.modal select:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ Override Bootstrap Default Focus Styles */
.form-control:not(.is-invalid):focus,
.form-select:not(.is-invalid):focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ Ensure Theme Color for All Input Types */
input:not([type="checkbox"]):not([type="radio"]):not(.btn):focus,
textarea:not(.btn):focus,
select:not(.btn):focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ High Priority Theme Color Override - Ensures Purple Theme Across All Forms */
body .form-control:focus,
body .form-select:focus,
body input:focus,
body textarea:focus,
body select:focus,
.container .form-control:focus,
.container .form-select:focus,
.container input:focus,
.container textarea:focus,
.container select:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
    outline: none !important;
}

/* ✅ Specific Bootstrap Form States Override */
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus,
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--theme-primary, #6a0dad) !important;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25) !important;
}

/* ✅ Import Modal Theme Styling */
.import-modal .modal-header {
    background-color: #6a0dad !important;
    color: white !important;
}

.import-modal .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.import-modal .alert-theme {
    background-color: rgba(106, 13, 173, 0.1) !important;
    border-color: #6a0dad !important;
    color: #6a0dad !important;
}

.import-modal .card-theme {
    border-color: #6a0dad !important;
}

.import-modal .card-header-theme {
    background-color: #6a0dad !important;
    color: white !important;
}

.import-modal .btn-outline-theme {
    border-color: #6a0dad !important;
    color: #6a0dad !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

.import-modal .btn-outline-theme:hover {
    background-color: #6a0dad !important;
    color: white !important;
}

.import-modal .btn-theme {
    background-color: #6a0dad !important;
    border-color: #6a0dad !important;
    color: white !important;
}

.import-modal .btn-theme:hover {
    background-color: #5a0b9d !important;
    border-color: #5a0b9d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(106, 13, 173, 0.3);
}

.import-modal .btn-theme:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(106, 13, 173, 0.3);
}

/* ✅ Template Download Buttons Styling */
.import-modal .d-grid .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.import-modal .d-grid .btn i {
    width: 16px;
    text-align: center;
}

/* ✅ Universal File Upload Styling - Consistent Across All Modules */
.form-control[type="file"] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control[type="file"]:focus {
    border-color: #6a0dad;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

.form-control[type="file"]:hover {
    border-color: #6a0dad;
}

/* File Upload Format Hints */
.text-muted {
    font-size: 0.875rem;
    color: #6c757d !important;
    margin-top: 0.25rem;
    display: block;
}

/* File Preview Containers - Universal */
.mt-2 {
    margin-top: 0.5rem !important;
}

/* File Upload Labels */
.form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #212529;
}

/* Required Field Asterisk */
.text-danger {
    color: #dc3545 !important;
}

/* File Upload Error States */
.form-control[type="file"].is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control[type="file"].is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* ✅ Toast Notification Styles */
.toast-container {
    z-index: 9999 !important;
    max-width: 400px;
}

.toast {
    min-width: 300px;
    max-width: 400px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    animation: slideInRight 0.3s ease-out;
}

.toast.show {
    animation: slideInRight 0.3s ease-out;
}

.toast.hide {
    animation: slideOutRight 0.3s ease-in;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-body {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
}

.toast-body i {
    font-size: 16px;
    margin-right: 8px;
}

.toast .btn-close {
    padding: 8px;
    margin: 4px;
}

/* ✅ Theme-Consistent Toast Notifications */

/* Success Toast - Theme Green */
.toast.text-bg-success {
    background: linear-gradient(135deg, #198754, #20c997) !important;
    border-left: 4px solid #146c43;
    color: white !important;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

/* Error Toast - Theme Red */
.toast.text-bg-danger {
    background: linear-gradient(135deg, #dc3545, #e74c3c) !important;
    border-left: 4px solid #b02a37;
    color: white !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Warning Toast - Theme Yellow */
.toast.text-bg-warning {
    background: linear-gradient(135deg, #ffc107, #ffca2c) !important;
    border-left: 4px solid #e0a800;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.toast.text-bg-warning .btn-close {
    filter: invert(1) grayscale(100%) brightness(0);
}
/* Info Toast - Theme Purple */
.toast.text-bg-info {
    background: linear-gradient(135deg, #6a0dad, #8c52ff) !important;
    border-left: 4px solid #530b8a;
    color: white !important;
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.3);
}

/* Primary Toast - Theme Purple */
.toast.text-bg-primary {
    background: linear-gradient(135deg, #6a0dad, #8c52ff) !important;
    border-left: 4px solid #530b8a;
    color: white !important;
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.3);
}

/* ✅ Theme-Consistent Confirmation Modal */
.theme-modal {
    border: 2px solid #6a0dad;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(106, 13, 173, 0.2);
}

.theme-modal-header {
    background: linear-gradient(135deg, var(--theme-primary, #6a0dad), var(--theme-primary-light, #8c52ff));
    color: white;
    border-bottom: 2px solid var(--theme-primary-dark, #530b8a);
    border-radius: 8px 8px 0 0;
}

.theme-modal-header .modal-title {
    font-weight: 600;
    color: white;
}

/* Ensure white text and icons in card-header with theme-modal-header */
.card-header.theme-modal-header h5,
.card-header.theme-modal-header h5 i {
    color: white !important;
}

.theme-modal-body {
    background: #f8f9fa;
    padding: 25px;
}

.theme-modal-message {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.theme-modal-subtext {
    color: #6c757d;
    font-style: italic;
}

.theme-modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 15px 25px;
    border-radius: 0 0 8px 8px;
}
/* ✅ Welcome Actions Buttons - Ensure white text */
.welcome-actions .btn {
    color: white !important;
}

.welcome-actions .btn i {
    color: white !important;
}
.welcome-actions .btn:hover {
    color: white !important;
}
.welcome-actions .btn:hover i {
    color: white !important;
}

/* Theme Secondary Button */
.theme-btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.theme-btn-secondary:hover {
    background-color: #5a6268;
    color: white !important; /* Maintain white text on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* Enhanced Theme Button Animations */
.theme-btn-primary:hover,
.theme-btn-danger:hover,
.theme-btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure text colors don't change on hover for confirmation buttons */
.theme-btn-primary:hover {
    color: white !important;
}

.theme-btn-danger:hover {
    color: white !important;
}

.theme-btn-warning:hover {
    color: black !important;
}

/* ✅ Client Management Styles */
.client-card {
    transition: transform 0.2s ease-in-out;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.client-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.15);
    border-color: #6A0DAD;
}

/* Ensure proper card grid layout */
#clientsGrid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

#clientsGrid .col-md-6,
#clientsGrid .col-lg-4 {
    padding: 0 15px;
    margin-bottom: 1.5rem;
}

.client-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.client-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ===================================
   DASHBOARD CUSTOMIZATION STYLES
   =================================== */

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    min-height: 500px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    position: relative;
}

.dashboard-design-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 60px; /* Auto-generate rows as needed */
    gap: 15px;
    min-height: 600px; /* Minimum height */
    padding: 20px;
    background: #fff;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    position: relative;
    align-items: start;
}

.dashboard-mobile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 50px; /* Auto-generate rows as needed */
    gap: 10px;
    min-height: 400px; /* Minimum height */
    padding: 15px;
    background: #fff;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    position: relative;
    align-items: start;
}

/* Dashboard Gadget - Ultra Modern Design */
.dashboard-gadget {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.dashboard-gadget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px 20px 0 0;
}

.dashboard-gadget:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(102, 126, 234, 0.3);
}

.dashboard-gadget:hover::before {
    opacity: 1;
}

.dashboard-gadget.dragging {
    opacity: 0.7;
    transform: rotate(5deg);
    z-index: 1000;
}

.dashboard-gadget.resizing {
    border-color: #6a0dad;
    box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.1);
}

/* Gadget Header - Ultra Modern */
.gadget-header {
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-light, #764ba2) 100%);
    color: white;
    padding: 18px 24px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.gadget-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

.gadget-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.gadget-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    position: relative;
    z-index: 2;
    letter-spacing: 0.3px;
}

.gadget-title i {
    font-size: 20px;
    opacity: 0.95;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-gadget:hover .gadget-title i {
    transform: scale(1.15) rotate(5deg);
    opacity: 1;
}

.gadget-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.gadget-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gadget-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.gadget-action-btn:active {
    transform: scale(0.95) translateY(0);
}

/* Remove button specific styling */
.gadget-action-btn[title="Remove"]:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

.gadget-action-btn[title="Remove"]:active {
    background: rgba(239, 68, 68, 0.4);
}

/* Settings button specific styling */
.gadget-action-btn[title="Settings"]:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

/* Gadget Body - Ultra Modern */
.gadget-body {
    padding: 24px;
    min-height: 140px;
    position: relative;
    background: linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(255,255,255,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 0 0 20px 20px;
}

.gadget-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 1;
    /* display: flex; */
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    /* text-align: center; */
}

.gadget-content::-webkit-scrollbar {
    width: 4px;
}

.gadget-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}

.gadget-content::-webkit-scrollbar-thumb {
    background: rgba(106, 13, 173, 0.3);
    border-radius: 2px;
}

.gadget-content::-webkit-scrollbar-thumb:hover {
    background: rgba(106, 13, 173, 0.5);
}

/* Note: gadget-content scrollbar colors are dynamically set via theme-picker.js */

.gadget-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 140px;
    color: #6c757d;
    position: relative;
}

.gadget-loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.gadget-loading i {
    font-size: 24px;
    margin-bottom: 12px;
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.gadget-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 140px;
    color: #dc3545;
    text-align: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.1) 100%);
    border-radius: 12px;
    margin: 10px;
    padding: 20px;
}

.gadget-error i {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Gadget Sizes */
.gadget-small {
    grid-column: span 3;
    grid-row: span 2;
}

.gadget-medium {
    grid-column: span 6;
    grid-row: span 3;
}

.gadget-large {
    grid-column: span 9;
    grid-row: span 4;
}

.gadget-wide {
    grid-column: span 12;
    grid-row: span 2;
}

/* Course Progress Pie Chart Styles */
.progress-pie-chart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.pie-chart-svg {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.pie-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.total-courses {
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;
    line-height: 1;
}

.total-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.progress-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.legend-number {
    font-weight: bold;
    color: #1f2937;
    min-width: 20px;
}

.legend-label {
    color: #6b7280;
}

.progress-stats {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* Mobile Gadget Sizes */
.mobile .gadget-small {
    grid-column: span 2;
    grid-row: span 2;
}

.mobile .gadget-medium {
    grid-column: span 4;
    grid-row: span 3;
}

.mobile .gadget-large {
    grid-column: span 4;
    grid-row: span 4;
}

.mobile .gadget-wide {
    grid-column: span 4;
    grid-row: span 2;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    background: #6a0dad;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.resize-handle:hover {
    opacity: 0.8;
}

.resize-handle.se {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    border-radius: 0 0 10px 0;
}

.resize-handle.s {
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    cursor: s-resize;
}

.resize-handle.e {
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    cursor: e-resize;
}

/* Gadget Sidebar */
.gadget-sidebar {
    max-height: 600px;
    overflow-y: auto;
}

.gadget-category {
    border-bottom: 1px solid #e9ecef;
}

.gadget-category:last-child {
    border-bottom: none;
}

.category-header {
    padding: 12px 16px;
    margin: 0;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-primary, #6a0dad);
    transition: all 0.2s ease;
}

.category-header:hover {
    background: #e9ecef;
    color: var(--theme-primary-dark, #4b0082);
}

.category-header i {
    transition: transform 0.2s ease;
}

.category-header[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.gadget-list {
    padding: 0;
}

.gadget-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    align-items: center;
    cursor: grab;
    transition: all 0.2s ease;
    background: #fff;
}

.gadget-item:hover {
    background: #f8f9fa;
    transform: translateX(4px);
}

.gadget-item:active {
    cursor: grabbing;
}

.gadget-item.dragging {
    opacity: 0.7;
    transform: rotate(5deg);
    z-index: 1000;
    cursor: grabbing;
}

.gadget-item:last-child {
    border-bottom: none;
}

.gadget-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--theme-primary, #6a0dad), var(--theme-primary-light, #8c52ff));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

.gadget-icon i {
    color: white !important;
}

.gadget-info {
    flex: 1;
    min-width: 0;
}

.gadget-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.gadget-description {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.3;
}

.gadget-actions {
    margin-left: 8px;
}

/* Drop Zones */
.drop-zone {
    border: 2px dashed #6a0dad;
    background: rgba(106, 13, 173, 0.05);
    border-radius: 8px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a0dad;
    font-weight: 600;
    transition: all 0.2s ease;
}

.drop-zone.drag-over {
    background: rgba(106, 13, 173, 0.1);
    border-color: #4b0082;
    transform: scale(1.02);
}

/* Dashboard Loading */
.dashboard-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    text-align: center;
}

/* Empty States */
.empty-state {
    padding: 60px 20px;
}
.empty-design-state {
    padding: 60px 20px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background: #f8f9fa;
}

/* Layout Controls */
.layout-controls .btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    .dashboard-design-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 15px;
    }
    
    .gadget-sidebar {
        max-height: 400px;
    }
    
    .gadget-item {
        padding: 10px 12px;
    }
    
    .gadget-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-right: 10px;
    }
}
@media (max-width: 576px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
    
    .dashboard-design-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
    }
    
    .gadget-header {
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
    }
    
    .gadget-title {
        font-size: 14px;
        gap: 8px;
    }
    
    .gadget-title i {
        font-size: 16px;
    }
    
    .gadget-actions {
        gap: 6px;
    }
    
    .gadget-action-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }
    
    .gadget-body {
        padding: 16px;
        min-height: 120px;
    }
    
    .gadget-loading {
        height: 120px;
    }
    
    .gadget-loading::before {
        width: 32px;
        height: 32px;
        margin-bottom: 12px;
    }
    
    .gadget-loading i {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .gadget-error {
        height: 120px;
        padding: 16px;
        margin: 8px;
    }
    
    .gadget-error i {
        font-size: 20px;
        margin-bottom: 6px;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

.slide-in-up {
    animation: slideInUp 0.5s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

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

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Gadget entrance animations */
.dashboard-gadget {
    animation: slideInUp 0.6s ease-out;
}

.dashboard-gadget:nth-child(1) { animation-delay: 0.1s; }
.dashboard-gadget:nth-child(2) { animation-delay: 0.2s; }
.dashboard-gadget:nth-child(3) { animation-delay: 0.3s; }
.dashboard-gadget:nth-child(4) { animation-delay: 0.4s; }
.dashboard-gadget:nth-child(5) { animation-delay: 0.5s; }
.dashboard-gadget:nth-child(6) { animation-delay: 0.6s; }
.dashboard-gadget:nth-child(7) { animation-delay: 0.7s; }
.dashboard-gadget:nth-child(8) { animation-delay: 0.8s; }

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Grid Cell Styles */
.grid-cell {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    min-height: 60px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6c757d;
    opacity: 0.7;
}

.grid-cell:hover {
    background: #e9ecef;
    border-color: var(--theme-primary, #6a0dad);
    opacity: 1;
}

.grid-cell::before {
    content: attr(data-row) ',' attr(data-col);
    font-weight: 500;
}

.drop-zone-active {
    background: #e7f3ff !important;
    border-color: var(--theme-primary, #6a0dad) !important;
    border-style: solid !important;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(106, 13, 173, 0.3);
}

.drop-zone-valid {
    background: #e7f3ff !important;
    border-color: #6a0dad !important;
    border-style: solid !important;
    opacity: 1 !important;
}

.drop-zone-invalid {
    background: #ffe6e6 !important;
    border-color: #dc3545 !important;
    border-style: solid !important;
    opacity: 1 !important;
}

.drop-preview {
    background: linear-gradient(45deg, #6a0dad33, #8c52ff33) !important;
    border-color: #6a0dad !important;
    border-style: solid !important;
    border-width: 2px !important;
    animation: dropPreviewPulse 1s infinite alternate;
}

.drop-preview.invalid {
    background: linear-gradient(45deg, #dc354533, #ff6b6b33) !important;
    border-color: #dc3545 !important;
}

@keyframes dropPreviewPulse {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

.drag-placeholder {
    background: linear-gradient(45deg, #6a0dad20, #8c52ff20);
    border: 2px dashed #6a0dad;
    border-radius: 12px;
    opacity: 0.7;
    animation: dragPlaceholderPulse 1s infinite alternate;
}

@keyframes dragPlaceholderPulse {
    0% { opacity: 0.5; }
    100% { opacity: 0.8; }
}

.gadget-item.dragging {
    transform: rotate(3deg) scale(1.05);
    z-index: 1000;
    opacity: 0.8;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.drop-zone-invalid {
    background: #ffe6e6 !important;
    border-color: #ff6b6b !important;
    border-style: solid !important;
}

.drop-zone-valid {
    background: #e6ffe6 !important;
    border-color: #51cf66 !important;
    border-style: solid !important;
}

/* Drag and Drop States */
.dragging-source {
    opacity: 0.5;
    transform: scale(0.95);
}

.drag-over-target {
    background: rgba(106, 13, 173, 0.1);
    border-color: #6a0dad;
}

/* Gadget Status Indicators */
.gadget-status {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.gadget-status.online {
    background: #28a745;
}

.gadget-status.offline {
    background: #dc3545;
}

.gadget-status.loading {
    display: none; /* Hide loading indicator - only show errors */
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Theme Integration */
.dashboard-grid .card {
    background: #fff;
    border: 1px solid #e9ecef;
}

.dashboard-grid .card:hover {
    border-color: var(--theme-primary, #6a0dad);
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.15);
}

/* Custom Scrollbar for Sidebar */
.gadget-sidebar::-webkit-scrollbar {
    width: 6px;
}

.gadget-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.gadget-sidebar::-webkit-scrollbar-thumb {
    background: var(--theme-primary, #6a0dad);
    border-radius: 3px;
}

.gadget-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary-dark, #4b0082);
    border-radius: 4px;
}

.client-logo-placeholder {
    width: 40px;
    height: 40px;
    background-color: #6A0DAD;
    border: 1px solid #6A0DAD;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.client-info .info-item {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.client-info .info-item:last-child {
    margin-bottom: 0;
}

.client-info .info-item strong {
    margin-right: 8px;
    min-width: fit-content;
}

.client-info .info-item .text-muted {
    flex: 1;
}

/* Compact filter styling */
.compact-filter {
    min-width: 120px;
}

.text-purple {
    color: #6A0DAD !important;
}

.page-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.feature-badges .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* ✅ Client Management Single Row Filter Layout */
.client-management .filter-section .row {
    flex-wrap: nowrap;
}

.client-management .filter-section .col-auto {
    flex: 0 0 auto;
    margin-right: 15px;
}

.client-management .filter-section .col-auto:last-child {
    margin-right: 0;
    margin-left: auto;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .client-management .filter-section .row {
        flex-wrap: wrap;
    }

    .client-management .filter-section .col-auto {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .client-management .filter-section .col-auto:last-child {
        margin-left: 0;
        width: 100%;
    }
}

/* Modal Animation Enhancement */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

.toast.text-bg-info .btn-close {
    filter: invert(1) grayscale(100%) brightness(0);
}

/* ✅ Toast Responsive Design */
@media (max-width: 768px) {
    .toast-container {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        max-width: none;
    }

    .toast {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
}

/* ===================================
   USER MANAGEMENT MODAL STYLES
   =================================== */
.modal-xl {
    max-width: 90%;
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.modal .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.modal .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    color: #6a0dad;
    font-weight: 500;
}

.modal .nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    background-color: #f8f9fa;
}

.modal .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.modal .form-group {
    margin-bottom: 1rem;
}

.modal .form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.modal .form-control {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.modal .form-control:focus {
    border-color: #6a0dad;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

.modal .form-check-input:checked {
    background-color: #6a0dad;
    border-color: #6a0dad;
}

.modal .btn-primary {
    background-color: #6a0dad;
    border-color: #6a0dad;
}

.modal .btn-primary:hover {
    background-color: #5a0b8a;
    border-color: #5a0b8a;
}

.modal .text-danger {
    color: #dc3545 !important;
}

.modal .alert {
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.modal .spinner-border {
    width: 2rem;
    height: 2rem;
}

/* Modal form validation styles */
.modal .is-invalid {
    border-color: #dc3545;
}

.modal .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Modal responsive adjustments */
@media (max-width: 768px) {
    .modal-xl {
        max-width: 95%;
        margin: 0.5rem;
    }

    .modal-body {
        max-height: 60vh;
        padding: 1rem;
    }

    .modal .row {
        margin: 0;
    }

    .modal .col-lg-6,
    .modal .col-md-6 {
        padding: 0 0.5rem;
    }
}

/* ✅ Opinion Poll Management Styles */
.poll-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e0e0e0;
}

.poll-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.poll-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
}

.poll-card .card-body {
    padding: 1rem;
}

.poll-card .card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 0.75rem 1rem;
}

.poll-card .btn-group .btn {
    flex: 1;
    border-radius: 0;
    font-size: 0.875rem;
}

.poll-card .btn-group .btn:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.poll-card .btn-group .btn:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.poll-info .info-item {
    font-size: 0.875rem;
}

.poll-info .info-item strong {
    color: #495057;
    font-weight: 600;
}

/* Question and Option Styling in Create Poll Modal */
.question-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6 !important;
}

.question-item .remove-question-btn {
    border: none;
    background: none;
    color: #dc3545;
    padding: 0.25rem 0.5rem;
}

.question-item .remove-question-btn:hover {
    background-color: #dc3545;
    color: white;
    border-radius: 0.25rem;
}

.options-container .input-group {
    margin-bottom: 0.5rem;
}

.options-container .input-group-text {
    background-color: #6a0dad;
    color: white;
    border-color: #6a0dad;
    font-weight: 600;
    min-width: 40px;
    justify-content: center;
}

.options-container .remove-option-btn {
    border-color: #dc3545;
    color: #dc3545;
}

.options-container .remove-option-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* Ensure proper poll grid layout */
#pollsGrid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

#pollsGrid .col-md-6,
#pollsGrid .col-lg-4 {
    padding: 0 15px;
    margin-bottom: 1.5rem;
}

/* Loading indicator for polls */
.loading-indicator {
    padding: 2rem;
    color: #6c757d;
}

.loading-indicator .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Search results info styling */
.search-results-info {
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #004085;
    font-size: 0.875rem;
}

.search-results-info i {
    color: #0066cc;
    margin-right: 0.5rem;
}

/* Opinion Poll Validation Styles */
.error-message {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.question-error {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

#generalErrorContainer {
    margin-bottom: 1rem;
}

/* ✅ My Events page container styling - same as announcements */
[data-my-events-page="true"] .container {
    margin-left: 250px;
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out;
}

[data-my-events-page="true"] .sidebar.collapsed + .container,
[data-my-events-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* ✅ My Announcements page container styling - same as events */
[data-my-announcements-page="true"] .container {
    margin-left: 250px;
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out;
}

[data-my-announcements-page="true"] .sidebar.collapsed + .container,
[data-my-announcements-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* ✅ Social Feed page container styling */
[data-social-feed-page="true"] .container {
    margin-left: 250px;
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out;
}

[data-social-feed-page="true"] .sidebar.collapsed + .container,
[data-social-feed-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* ✅ User Progress Report page container styling */
[data-user-progress-report-page="true"] .container {
    margin-left: 250px;
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out;
}

[data-user-progress-report-page="true"] .sidebar.collapsed + .container,
[data-user-progress-report-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* Social Feed Post Tags */
.post-tags {
    margin-top: 10px;
}
.tag-display {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tag-display:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

.tag-display:first-child {
    margin-left: 0;
}

/* Social Feed Styles */
/* .post-card {
/*     background: white;
/*     border: 1px solid #e9ecef;
/*     border-radius: 8px;
/*     padding: 20px;
/*     margin-bottom: 20px;
/*     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/*     transition: box-shadow 0.3s ease;
/* 
/* .post-card:hover {
/*     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}





.post-media img,
.post-media video {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}
.post-actions .btn {
    font-size: 14px;
    padding: 6px 12px;
}
.poll-option:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}





.comment-item:last-child {
    margin-bottom: 0;
}




/* Social Feed Post Tags */
.post-tags {
    margin-top: 10px;
}

.tag-display {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tag-display:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

.tag-display:first-child {
    margin-left: 0;
}

/* Search and Filter Styles */
.search-results-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 15px;
    color: #6c757d;
    font-size: 14px;
}

.search-results-info i {
    margin-right: 8px;
    color: #007bff;
}

/* Modal Styles */
#createPostModal .modal-dialog {
    max-width: 800px;
}

.drop-zone {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-zone:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.drop-zone.dragover {
    border-color: #007bff;
    background-color: #e3f2fd;
}

.media-preview-item {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.media-preview-item img,
.media-preview-item video {
    max-width: 100px;
    max-height: 100px;
    border-radius: 4px;
}

.media-preview-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    cursor: pointer;
}


/* Override any conflicting Bootstrap row/col styles for social feed */
#socialFeedGrid .row,
#socialFeedGrid .col-md-4,
#socialFeedGrid .col-md-6,
#socialFeedGrid .col-md-12 {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Ensure post cards don't have margin-bottom that interferes with grid */
#socialFeedGrid .post-card {
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
}


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





.post-media img,
.post-media video {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}


.post-actions .btn {
    font-size: 14px;
    padding: 6px 12px;
}





/* Responsive Grid */
@media (max-width: 768px) {
    #socialFeedGrid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    #socialFeedGrid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 18px !important;
    }
}

@media (min-width: 1201px) {
    #socialFeedGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }
}

/* Comments Section Styling */


.comment-item:last-child {
    margin-bottom: 0;
}

.comment-item .d-flex {
    align-items: flex-start;
}

.comment-item img {
    flex-shrink: 0;
}

.comment-item .flex-grow-1 {
    margin-left: 10px;
}

.comment-item strong {
    color: #495057;
    font-size: 14px;
}

.comment-item small {
    font-size: 12px;
}

.comment-item p {
    margin: 5px 0 0 0;
    color: #6c757d;
    font-size: 14px;
    line-height: 1.4;
}


.add-comment .input-group {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.add-comment .form-control {
    border: none;
    box-shadow: none;
    padding: 10px 15px;
}

.add-comment .btn {
    border: none;
    background: #007bff;
    color: white;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

.add-comment .btn:hover {
    background: #0056b3;
}


.post-title {
    color: #4b0082;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    border-bottom: 2px solid #d9b3ff;
    padding-bottom: 0.5rem;
}

.post-title:hover {
    color: #007bff;
}

.tag-display:first-child {
    margin-left: 0;
}


#socialFeedGrid .row,
#socialFeedGrid .col {
    margin: 0;
    padding: 0;
}

/* Ensure post cards don't have margin-bottom that interferes with grid */
#socialFeedGrid .post-card {
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Social Feed Grid Layout */
/* Removed display: grid and grid-template-columns from #socialFeedGrid to use Bootstrap grid */
#socialFeedGrid .row {
    margin: 0;
}

/* Ensure post cards have proper spacing */
#socialFeedGrid .post-card {
    margin-bottom: 20px;
    height: 100%;
}

/* Social Feed Grid Layout */
/* Removed display: grid and grid-template-columns from #socialFeedGrid to use Bootstrap grid */
#socialFeedGrid .row {
    margin: 0;
}

/* Ensure post cards don't have margin-bottom that interferes with grid */
#socialFeedGrid .post-card {
    margin-bottom: 20px;
    height: 100%;
}

/* Social Feed Grid Layout - Fixed for Bootstrap Grid */
#socialFeedGrid .row {
    margin: 0;
}

/* Ensure post cards have proper spacing */
#socialFeedGrid .post-card {
    margin-bottom: 20px;
    height: 100%;
}

/* Override any conflicting Bootstrap grid styles */
#socialFeedGrid .col-md-6,
#socialFeedGrid .col-lg-4 {
    padding: 0 10px;
    margin-bottom: 20px;
}

/* Ensure proper 3-column grid on large screens */
@media (min-width: 992px) {
    #socialFeedGrid .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Ensure proper 2-column grid on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    #socialFeedGrid .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Single column on small screens */
@media (max-width: 767px) {
    #socialFeedGrid .col-md-6,
    #socialFeedGrid .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Social Feed Badge Styling */
.post-card .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.post-card .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.post-card .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.post-card .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.post-card .badge i {
    font-size: 0.7rem;
}

/* Social Feed Grid Layout - Fixed for Bootstrap Grid */
.post-card .view-details-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.post-card .view-details-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-card .view-details-btn i {
    font-size: 0.7rem;
}

/* Post Detail Modal Styling */
#postDetailModal .modal-xl {
    max-width: 1200px;
}

#postDetailModal .card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}

#postDetailModal .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
}

#postDetailModal .post-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

#postDetailModal .post-content h1,
#postDetailModal .post-content h2,
#postDetailModal .post-content h3,
#postDetailModal .post-content h4,
#postDetailModal .post-content h5,
#postDetailModal .post-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #333;
}

#postDetailModal .post-content p {
    margin-bottom: 1rem;
}

#postDetailModal .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
}

#postDetailModal .poll-option {
    background-color: #f8f9fa;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}

#postDetailModal .progress {
    height: 0.5rem;
    margin-top: 0.5rem;
}

#postDetailModal .progress-bar {
    background-color: #007bff;
}

#postDetailModal .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
}

.post-media img,
.post-media video {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Social Feed Post Media - Consistent Sizing */
.post-card .post-media {
    margin-bottom: 15px;
}

.post-card .post-media img,
.post-card .post-media video {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Maintain aspect ratio while filling container */
    border-radius: 8px;
    margin-bottom: 0;
}

.post-card .post-media a {
    display: block;
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6c757d;
    transition: all 0.3s ease;
}

.post-card .post-media a:hover {
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
}

.post-card .post-media a i {
    font-size: 2rem;
    margin-right: 8px;
}

/* Multiple media files in a post */
.post-card .post-media .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.post-card .post-media .media-grid img,
.post-card .post-media .media-grid video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
}

.post-card .post-media .media-grid a {
    height: 150px;
    font-size: 0.9rem;
}

.post-card .post-media .media-grid a i {
    font-size: 1.5rem;
}

/* Standardize media size in View Details modal */
#postDetailModal .post-detail-media {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f8f9fa;
}
#postDetailModal .post-detail-doc {
    display: block;
    width: 100%;
    height: 60px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: #6c757d;
    transition: all 0.3s ease;
    font-size: 1rem;
    padding: 0 16px;
    margin-bottom: 10px;
}
#postDetailModal .post-detail-doc:hover {
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
}
#postDetailModal .post-detail-doc i {
    font-size: 2rem;
    margin-right: 12px;
}

/* ✅ Dropdown Menu Items */
.dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--navbar-bg, #d9b3ff); /* Theme Navbar Color Divider */
    text-decoration: none;
    color: var(--theme-primary, #4b0082); /* Theme Primary Color Text */
    transition: background 0.2s ease-in-out;
}

/* ✅ Profile Button Styles */
.profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 25px;
    background: none;
    border: 1px solid rgba(75, 0, 130, 0.2);
    cursor: pointer;
    color: #4b0082;
    transition: all 0.3s ease;
    font-size: 14px;
}

.profile-btn:hover {
    background: rgba(75, 0, 130, 0.1);
    border-color: rgba(75, 0, 130, 0.4);
}

.profile-btn .profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--theme-primary, #4b0082);
}

.profile-btn .profile-name {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-btn .fas.fa-chevron-down {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.profile-menu.active .profile-btn .fas.fa-chevron-down {
    transform: rotate(180deg);
}

/* ✅ Profile Header Styles */
.profile-header {
    padding: 15px;
    background: linear-gradient(135deg, var(--navbar-bg, #d9b3ff) 0%, var(--theme-primary-light, #b366ff) 100%);
    border-radius: 8px 8px 0 0;
    margin: -10px -10px 10px -10px;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar-large {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-avatar-placeholder i {
    font-size: 24px;
    color: white;
}

.profile-details {
    flex: 1;
    color: white;
}

.profile-name-large {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.2;
}

.profile-email {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 2px;
    line-height: 1.2;
}

.profile-role {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 2px;
    line-height: 1.2;
}

.profile-id {
    font-size: 10px;
    opacity: 0.7;
    line-height: 1.2;
}

/* ✅ Dropdown Divider */
.dropdown-divider {
    height: 1px;
    background: var(--navbar-bg, #d9b3ff);
    margin: 8px 0;
    opacity: 0.5;
}

/* ✅ Enhanced Dropdown Menu */
.profile-menu .dropdown-menu {
    min-width: 280px;
    max-width: 320px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 5px;
}

/* Prevent dropdown from going off-screen on right side */
.profile-menu {
    position: relative;
}

.profile-menu .dropdown-menu {
    position: absolute;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}

.profile-menu .dropdown-menu a {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--theme-primary, #4b0082);
    font-size: 14px;
    transition: all 0.2s ease;
}

.profile-menu .dropdown-menu a:hover {
    background: rgba(75, 0, 130, 0.05);
    color: var(--theme-primary, #4b0082);
    transform: translateX(2px);
}

.profile-menu .dropdown-menu a i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

.profile-menu .dropdown-menu a:last-child {
    border-bottom: none;
    color: #dc3545;
}
.profile-menu .dropdown-menu a:last-child:hover {
    background: rgba(220, 53, 69, 0.05);
    color: #dc3545;
}

/* ✅ Responsive Profile Button */
@media (max-width: 768px) {
    .profile-btn .profile-name {
        display: none;
    }
    
    .profile-btn {
        padding: 8px;
        border-radius: 50%;
    }
    
    .profile-menu .dropdown-menu {
        min-width: 250px;
        max-width: calc(100vw - 20px);
        right: 10px !important;
        left: auto !important;
    }
    
    .profile-header {
        padding: 12px;
    }
    
    .profile-info {
        gap: 10px;
    }
    
    .profile-avatar-large,
    .profile-avatar-placeholder {
        width: 40px;
        height: 40px;
    }
    
    .profile-name-large {
        font-size: 14px;
    }
    
    .profile-email,
    .profile-role,
    .profile-id {
        font-size: 11px;
    }
}
.audio-wrapper-border {
    border: 2px solid #d9b3ff;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
}
.assignment-card {
    background: #fff;
    border: 2px solid #6a0dad; /* Theme color - matches SCORM */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.assignment-card:hover {
    transform: scale(1.05);
}

.assignment-icon {
    font-size: 40px;
    color: #6a0dad; /* Theme color - matches SCORM */
    margin-bottom: 10px;
}

.assignment-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.assignment-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.assignment-actions .edit-icon {
    color: #007bff; /* Blue */
    margin-right: 10px;
    cursor: pointer;
}

.assignment-actions .delete-icon {
    color: #dc3545; /* Red */
    cursor: pointer;
}

.assignment-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.assignment-actions i:hover {
    opacity: 0.7;
}

.assignment-actions a {
    text-decoration: none;
}

.assignment-actions a:hover {
    text-decoration: none;
}

.assignment-wrapper {
    margin-top: 20px;
}

.assignment-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

.video-card {
    background: #fff;
    border: 2px solid #3949ab; /* Indigo or customize */
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.video-card:hover {
    transform: scale(1.05);
}

.video-icon {
    font-size: 40px;
    color: #3949ab; /* matches border */
    margin-bottom: 10px;
}

.video-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.video-actions {
    position: absolute;
    top: 10px;
    right: 15px;
}

.video-actions .preview-icon {
    color: #28a745;
    margin-right: 10px;
    cursor: pointer;
}

.video-actions .edit-icon {
    color: #007bff;
    margin-right: 10px;
    cursor: pointer;
}

.video-actions .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

.video-actions i {
    font-size: 18px;
    transition: color 0.2s;
}

.video-actions i:hover {
    opacity: 0.7;
}

.video-actions a {
    text-decoration: none;
}

.video-actions a:hover {
    text-decoration: none;
}

.video-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.video-wrapper-border {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
}

/* Ensure consistent spacing for assignment form fields */
#assignmentModal .form-label {
    margin-bottom: 0.25rem;
}
#assignmentModal .form-control, #assignmentModal .form-select {
    margin-bottom: 1rem;
}

/* Course Subcategories Module Styles */

/* Card and Table Consistency */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(106, 13, 173, 0.05);
}

.table th, .table td {
    vertical-align: middle;
}

/* Theme Buttons */
.theme-btn-primary {
    background: #6a0dad;
    color: #fff;
    border: none;
    border-radius: 0.3rem;
    transition: background 0.2s;
}
.theme-btn-primary:hover, .theme-btn-primary:focus {
    background: #4b076b;
    color: #fff;
}
.theme-btn-danger {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 0.3rem;
}
.theme-btn-danger:hover, .theme-btn-danger:focus {
    background: #c0392b;
    color: #fff;
}

/* Modal Styles */
.theme-modal-header {
    background: var(--theme-primary, #6a0dad);
    color: #fff;
    border-bottom: none;
}
.theme-modal-footer {
    border-top: none;
}
.theme-modal-message {
    font-size: 1.1rem;
    color: #333;
}
.theme-modal-subtext {
    font-size: 0.95rem;
    color: #888;
}

/* Search Results Info */
.search-results-info {
    background: #f3eaff;
    color: #6a0dad;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
}

/* ========================================
   ENROLLMENT APPROVAL MODERN STYLES
   ======================================== */

/* Statistics Cards */
.stats-card {
    border-radius: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.clickable-card {
    cursor: pointer;
    user-select: none;
}

.clickable-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
}

.clickable-card.active {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    border: 3px solid #6A0DAD;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6A0DAD, #9B59B6);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.stats-pending {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: white;
}

.stats-pending *,
.stats-pending p,
.stats-pending small,
.stats-pending .text-muted {
    color: white !important;
}

.stats-approved {
    background: linear-gradient(135deg, #28A745, #20C997);
    color: white;
}

.stats-approved *,
.stats-approved p,
.stats-approved small,
.stats-approved .text-muted {
    color: white !important;
}

.stats-rejected {
    background: linear-gradient(135deg, #DC3545, #E74C3C);
    color: white;
}

.stats-rejected *,
.stats-rejected p,
.stats-rejected small,
.stats-rejected .text-muted {
    color: white !important;
}

.stats-total {
    background: linear-gradient(135deg, #6A0DAD, #9B59B6);
    color: white;
}

.stats-total *,
.stats-total p,
.stats-total small,
.stats-total .text-muted {
    color: white !important;
}

.stats-icon {
    font-size: 2.5rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.stats-card:hover .stats-icon {
    transform: scale(1.1);
    opacity: 1;
}

/* Filter Section */
.filter-section h6 {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-buttons {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.filter-btn {
    background: white;
    border: 2px solid #e9ecef;
    color: #6c757d;
    font-weight: 500;
    padding: 12px 20px;
    transition: all 0.3s ease;
    position: relative;
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: #6A0DAD;
    color: #6A0DAD;
}

/* Ensure action buttons have white text and icons */
.enrollment-approval .btn.theme-btn-primary.btn-sm,
.enrollment-approval .btn.theme-btn-danger.btn-sm {
    color: #ffffff !important;
}

.enrollment-approval .btn.theme-btn-primary.btn-sm i,
.enrollment-approval .btn.theme-btn-danger.btn-sm i {
    color: #ffffff !important;
}

.enrollment-approval .btn.theme-btn-primary.btn-sm:hover,
.enrollment-approval .btn.theme-btn-danger.btn-sm:hover {
    color: #ffffff !important;
}

.enrollment-approval .btn.theme-btn-primary.btn-sm:hover i,
.enrollment-approval .btn.theme-btn-danger.btn-sm:hover i {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #6A0DAD;
    border-color: #6A0DAD;
    color: white;
    box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3);
}

.filter-btn .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
}

/* Modern Card */
.modern-card {
    border-radius: 15px;
    overflow: hidden;
    border: none;
}

.modern-header {
    background: linear-gradient(135deg, #6A0DAD, #9B59B6);
    border: none;
    padding: 20px 25px;
}

.modern-header h5 {
    font-weight: 600;
    font-size: 1.25rem;
}

.header-actions .badge {
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 20px;
}

/* Table Styling */
.table {
    margin-bottom: 0;
}

.table thead th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
    padding: 15px 20px;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f1f3f4;
}

.table tbody tr:hover {
    background: #f8f9fa;
    transform: scale(1.01);
}

.table tbody td {
    padding: 20px;
    vertical-align: middle;
    border: none;
}

/* Action Buttons */
.btn-group-sm .btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-group-sm .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Modal Styles */
.modern-modal {
    border-radius: 15px;
    border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.modern-modal-header {
    background: linear-gradient(135deg, #DC3545, #E74C3C);
    border: none;
    padding: 20px 25px;
    border-radius: 15px 15px 0 0;
}

.modern-modal-header h5 {
    font-weight: 600;
    font-size: 1.25rem;
}

.modern-modal-footer {
    background: #f8f9fa;
    border: none;
    padding: 20px 25px;
    border-radius: 0 0 15px 15px;
}

.modern-textarea {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.modern-textarea:focus {
    border-color: #6A0DAD;
    box-shadow: 0 0 0 0.2rem rgba(106, 13, 173, 0.25);
}

/* Pagination */
.pagination .page-link {
    border: none;
    color: var(--theme-primary, #6A0DAD);
    padding: 10px 15px;
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--theme-primary, #6A0DAD);
    color: white;
    transform: translateY(-2px);
}

.pagination .page-item.active .page-link {
    background: var(--theme-primary, #6A0DAD);
    color: white;
    /* Fallback for older browsers */
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #6A0DAD) 30%, transparent);
}

/* Loading States */
.spinner-border.text-purple {
    color: var(--theme-primary, #6A0DAD) !important;
}

/* Modern Modal Styles */
.modern-modal {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modern-modal-header {
    background: linear-gradient(135deg, var(--theme-primary, #6f42c1) 0%, var(--theme-primary-light, #8e44ad) 100%);
    color: white;
    border-bottom: none;
    padding: 1.5rem;
}

.modern-modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}

.modern-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.modern-close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.modern-close::before {
    content: '×';
    font-weight: bold;
}

.modern-modal-body {
    padding: 0;
    background: #fff;
}

/* Announcement Detail Styles */
.modern-announcement-detail {
    background: #fff;
}

.detail-header {
    /* padding: 2rem; */
    border-bottom: 1px solid #f1f3f4;
    position: relative;
}

.detail-header.urgency-urgent { border-left: 4px solid #dc3545; }
.detail-header.urgency-warning { border-left: 4px solid #ffc107; }
.detail-header.urgency-info { border-left: 4px solid #17a2b8; }

.header-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.meta-divider {
    color: #dee2e6;
    font-weight: 300;
}

.detail-body {
    /* padding: 2rem; */
}

.detail-content {
    color: #495057;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.detail-content p {
    margin-bottom: 1rem;
}

.detail-content p:last-child {
    margin-bottom: 0;
}

.detail-cta {
    padding: 0 2rem 1rem 2rem;
    border-top: 1px solid #f1f3f4;
    padding-top: 1.5rem;
}

.detail-actions {
    padding: 1.5rem 2rem 2rem 2rem;
    border-top: 1px solid #f1f3f4;
    background: #f8f9fa;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-card {
        margin-bottom: 15px;
    }
    
    .filter-buttons {
        flex-direction: column;
    }
    
    .filter-btn {
        border-radius: 8px !important;
        margin-bottom: 5px;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* Modal responsive */
    .modern-modal-header { padding: 1rem; }
    .modern-modal-header .modal-title { font-size: 1.1rem; }
    .detail-header { padding: 1.5rem; }
    .detail-title { font-size: 1.25rem; }
    .detail-body { padding: 1.5rem; }
    .detail-cta { padding: 0 1.5rem 1rem 1.5rem; }
    .detail-actions { padding: 1rem 1.5rem 1.5rem 1.5rem; }
    .detail-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .meta-divider { display: none; }
}

/* Pagination */
.pagination-container {
    margin-top: 1.5rem;
}
.pagination .page-item.active .page-link {
    background: var(--theme-primary, #6a0dad);
    border-color: var(--theme-primary, #6a0dad);
    color: #fff;
}
.pagination .page-link {
    color: var(--theme-primary, #6a0dad);
}
.pagination .page-link:hover {
    /* Fallback for older browsers */
    background: rgba(106, 13, 173, 0.1);
    /* Modern browsers with theme color support */
    background: color-mix(in srgb, var(--theme-primary, #6a0dad) 15%, white);
    color: var(--theme-primary-dark, #4b076b);
}

/* No Results Message */
#noResultsMessage .alert-info {
    background: #f3eaff;
    color: #6a0dad;
    border: none;
}

/* Misc */
.back-arrow-container .back-link {
    color: #6a0dad;
    font-size: 1.3rem;
    margin-right: 0.5rem;
}
.back-arrow-container .divider-line {
    border-left: 2px solid #6a0dad;
    height: 1.5rem;
    margin: 0 0.7rem;
    display: inline-block;
    vertical-align: middle;
}
.page-title.text-purple {
    color: var(--theme-primary, #6a0dad);
    font-weight: 600;
}

/* Course Creation Styles */
.course-creation-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.course-creation-tabs {
    border-bottom: 2px solid #d9b3ff;
    margin-bottom: 30px;
}

.course-creation-tabs .nav-link {
    border: none;
    background: none;
    color: #4b0082;
    font-weight: 500;
    padding: 15px 25px;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: relative;
}

.course-creation-tabs .nav-link:hover {
    background: rgba(217, 179, 255, 0.1);
    color: #4b0082;
}

.course-creation-tabs .nav-link.active {
    background: #d9b3ff;
    color: #4b0082;
    font-weight: 600;
}

.course-creation-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #4b0082;
}

.course-creation-tabs .nav-link.tab-error {
    color: #dc3545;
    border-left: 3px solid #dc3545;
}

.course-creation-tabs .nav-link.tab-error::after {
    background: #dc3545;
}

.course-tab-content {
    min-height: 400px;
    padding: 20px 0;
}
.course-form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid #d9b3ff;
}

.course-form-section h5 {
    color: #4b0082;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-form-section h5 i {
    font-size: 1.2em;
}

.module-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.module-item:hover {
    border-color: #d9b3ff;
    box-shadow: 0 2px 8px rgba(217, 179, 255, 0.2);
}

.module-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.module-item.drag-over {
    border-color: #4b0082;
    background: rgba(75, 0, 130, 0.05);
}
/* Removed conflicting module-header styles */

.module-title {
    font-weight: 600;
    color: #4b0082;
    margin: 0;
    flex: 1;
}
.module-actions {
    display: flex;
    gap: 10px;
}
.module-drag-handle {
    cursor: grab;
    color: #6c757d;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.module-drag-handle:hover {
    background: rgba(108, 117, 125, 0.1);
    color: #4b0082;
}

.module-drag-handle:active {
    cursor: grabbing;
}

.module-remove-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.module-remove-btn:hover {
    background: #c82333;
    transform: scale(1.05);
}

.prerequisite-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.prerequisite-item:hover {
    border-color: #d9b3ff;
    background: rgba(217, 179, 255, 0.05);
}

.prerequisite-info {
    flex: 1;
}

.prerequisite-title {
    font-weight: 500;
    color: #4b0082;
    margin: 0 0 5px 0;
}

.prerequisite-category {
    font-size: 0.9em;
    color: #6c757d;
    margin: 0;
}

.prerequisite-remove {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8em;
    transition: all 0.2s ease;
}

.prerequisite-remove:hover {
    background: #c82333;
}

.vlr-content-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.vlr-content-item:hover {
    border-color: #d9b3ff;
    background: rgba(217, 179, 255, 0.05);
}

.vlr-content-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vlr-content-icon {
    font-size: 1.2em;
    color: #4b0082;
    width: 20px;
    text-align: center;
}

.vlr-content-title {
    font-weight: 500;
    color: #4b0082;
    margin: 0;
}

.vlr-content-type {
    font-size: 0.8em;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 10px;
}

.vlr-content-remove {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8em;
    transition: all 0.2s ease;
}

.vlr-content-remove:hover {
    background: #c82333;
}

.add-item-btn {
    background: #d9b3ff;
    color: #4b0082;
    border: 2px dashed #4b0082;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    margin-top: 15px;
}

.add-item-btn:hover {
    background: #4b0082;
    color: white;
    border-color: #4b0082;
    transform: translateY(-2px);
}

.add-item-btn i {
    font-size: 1.5em;
    margin-bottom: 10px;
    display: block;
}

.course-form-actions {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 25px;
    margin-top: 30px;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-form-actions .btn {
    padding: 12px 30px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.course-form-actions .btn-primary {
    background: #4b0082;
    border-color: #4b0082;
}

.course-form-actions .btn-primary:hover {
    background: #3a0066;
    border-color: #3a0066;
    transform: translateY(-1px);
}

.course-form-actions .btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
}

.course-form-actions .btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
}

.course-preview-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.course-preview-card:hover {
    border-color: #d9b3ff;
    box-shadow: 0 4px 12px rgba(217, 179, 255, 0.15);
}

.course-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.course-preview-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #4b0082;
    margin: 0;
}

.course-preview-status {
    font-size: 0.9em;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.course-preview-status.draft {
    background: #fff3cd;
    color: #856404;
}

.course-preview-status.published {
    background: #d1edff;
    color: #0c5460;
}

.course-preview-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.course-preview-info-item {
    display: flex;
    flex-direction: column;
}

.course-preview-info-label {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 5px;
}

.course-preview-info-value {
    font-weight: 500;
    color: #4b0082;
}

.course-preview-stats {
    display: flex;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.course-preview-stat {
    text-align: center;
    flex: 1;
}

.course-preview-stat-number {
    font-size: 1.5em;
    font-weight: 600;
    color: #4b0082;
    display: block;
}

.course-preview-stat-label {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 5px;
}

.course-validation-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-validation-error i {
    font-size: 1.2em;
}

.course-validation-error ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.course-validation-error li {
    margin-bottom: 5px;
}

.course-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.course-loading-spinner {
    background: #4b0082;
    color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.course-loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 15px;
}

.course-loading-text {
    font-weight: 500;
    margin: 0;
}

/* Responsive Design for Course Creation */
@media (max-width: 768px) {
    .course-creation-container {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .course-creation-tabs .nav-link {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    
    .course-form-section {
        padding: 20px;
    }
    
    .module-item {
        padding: 15px;
    }
    
    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .module-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .course-form-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .course-form-actions .btn {
        width: 100%;
    }
    
    .course-preview-info {
        grid-template-columns: 1fr;
    }
    
    .course-preview-stats {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .course-creation-tabs {
        flex-wrap: wrap;
    }
    
    .course-creation-tabs .nav-link {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
    
    .vlr-content-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .vlr-content-remove {
        align-self: flex-end;
    }
}

/* VLR Selection Modal Styles */
#vlrSelectionModal .modal-xl {
    max-width: 1200px;
}

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

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

#vlrSelectionModal .nav-tabs .nav-link:hover {
    border-color: #4b0082;
    color: #4b0082;
    background-color: #f8f9fa;
}

#vlrSelectionModal .nav-tabs .nav-link.active {
    border-color: #4b0082;
    color: #4b0082;
    background-color: #fff;
}

#vlrSelectionModal .nav-tabs .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

#vlrSelectionModal .vlr-selection-card {
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    cursor: pointer;
}

#vlrSelectionModal .vlr-selection-card:hover {
    border-color: #4b0082;
    box-shadow: 0 0.125rem 0.25rem rgba(75, 0, 130, 0.075);
    transform: translateY(-1px);
}

#vlrSelectionModal .vlr-selection-card .card-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

#vlrSelectionModal .vlr-selection-card .card-text {
    font-size: 0.8rem;
    line-height: 1.4;
}

#vlrSelectionModal .vlr-selection-card .card-footer {
    border-top: 1px solid #f8f9fa;
    padding: 0.75rem 1rem;
}

#vlrSelectionModal .form-check-input:checked {
    background-color: #4b0082;
    border-color: #4b0082;
}

#vlrSelectionModal .form-check-label {
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
}

#vlrSelectionModal .vlr-content-item {
    transition: opacity 0.2s ease;
    align-items: flex-start !important;
    min-height: 80px;
}

#vlrSelectionModal .vlr-content-item .form-check {
    align-self: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Ensure proper layout for very long titles */
#vlrSelectionModal .vlr-content-item .flex-grow-1 {
    min-width: 0; /* Allow text truncation to work properly */
    overflow: hidden;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #vlrSelectionModal .vlr-content-item {
        min-height: 70px;
        padding: 12px;
    }
    
    #vlrSelectionModal .vlr-content-item .form-check {
        min-width: 2em;
    }
}

#vlrSelectionModal .vlr-content-item[style*="display: none"] {
    opacity: 0;
}

/* Search bar styling */
#vlrSearchInput {
    border-right: none;
}

#vlrSearchInput:focus {
    border-color: #4b0082;
    box-shadow: 0 0 0 0.2rem rgba(75, 0, 130, 0.25);
}

#clearSearchBtn {
    border-left: none;
    border-color: #ced4da;
}

#clearSearchBtn:hover {
    background-color: #e9ecef;
    border-color: #4b0082;
}

/* Empty state styling */
#vlrSelectionModal .text-center.py-4 {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#vlrSelectionModal .text-center.py-4 i {
    color: #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #vlrSelectionModal .modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }
    
    #vlrSelectionModal .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    #vlrSelectionModal .col-md-6.col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Module Card Styles */
.module-card.card {
    border-radius: 0.75rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(75,0,130,0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.module-card.card:hover {
    box-shadow: 0 4px 16px rgba(75,0,130,0.10);
    border-color: #4b0082;
}
.module-card .card-header {
    border-radius: 0.75rem 0.75rem 0 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}
.module-card .badge.bg-primary {
    font-size: 1rem;
    padding: 0.5em 0.9em;
    background: #4b0082;
}
.module-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.95em;
}
.module-actions .fa-grip-vertical {
    cursor: grab;
    color: #bdbdbd;
    font-size: 1.2em;
    margin-left: 0.5em;
}
.module-actions .fa-grip-vertical:hover {
    color: #4b0082;
}
.module-actions .btn-outline-danger {
    border: 1px solid #f8d7da;
    color: #dc3545;
    background: #fff;
    border-radius: 1em;
    padding: 0.2em 0.7em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.module-actions .btn-outline-danger:hover {
    background: #f8d7da;
    color: #a71d2a;
    border-color: #f5c2c7;
}

/* VLR Chips */
.vlr-chip.card {
    border-radius: 1.5em;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(75,0,130,0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
    min-height: 38px;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
}
.vlr-chip.card:hover {
    border-color: #4b0082;
    box-shadow: 0 2px 8px rgba(75,0,130,0.10);
}
.vlr-chip .vlr-content-title {
    font-size: 0.95em;
    font-weight: 500;
    color: #333;
    margin-right: 0.5em;
}
.vlr-chip .badge {
    font-size: 0.8em;
    background: #f3e6fa;
    color: #4b0082;
    border-radius: 0.75em;
    padding: 0.3em 0.7em;
}
.vlr-chip .btn-outline-danger {
    border: 1px solid #f8d7da;
    color: #dc3545;
    background: #fff;
    border-radius: 1em;
    padding: 0.2em 0.7em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vlr-chip .btn-outline-danger:hover {
    background: #f8d7da;
    color: #a71d2a;
    border-color: #f5c2c7;
}
.vlr-chip .fa-grip-lines {
    cursor: grab;
    color: #bdbdbd;
    font-size: 1.1em;
    margin-left: 0.5em;
}
.vlr-chip .fa-grip-lines:hover {
    color: #4b0082;
}

/* Add Module Button */
#addModuleBtnTop, #addModuleBtnBottom {
    min-width: 160px;
    font-weight: 500;
    border-radius: 2em;
}
#addModuleBtnTop i, #addModuleBtnBottom i {
    color: #4b0082;
}

/* Module Content Section */
.module-content-section {
    background: #f9f9fb;
    border-radius: 0.5em;
    padding: 1em;
    margin-top: 1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .module-card .card-header, .module-card .card-body {
        padding: 1em 0.5em;
    }
    .vlr-chip.card {
        min-width: 120px;
        max-width: 100%;
    }
}

/* --- VLR Content List Container --- */
.vlr-content-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* --- VLR Chip Card --- */
.vlr-chip.card {
  width: 100%;
  min-width: 0;
  margin-right: 0;
  margin-bottom: 0.5em;
  box-sizing: border-box;
  display: block;
  float: none;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.vlr-chip.card:hover, .vlr-chip.card:focus {
  box-shadow: 0 0 0 0.2rem #b197fc33;
  border-color: #4b0082;
  background: #f3f0ff;
  width: 100%;
  overflow: hidden;
}

/* Module Card Improvements */
.module-card.card {
  margin-bottom: 2.2rem;
}
.module-card .card-header,
.module-card .card-body {
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
}

/* Module Content Section */
.module-content-section {
  background: #f7f7fb;
  border-radius: 0.7em;
  padding: 1.3em 1.2em 1.1em 1.2em;
  margin-top: 1.2em;
}

/* VLR Chips */
.vlr-content-list {
  gap: 0.7em;
}
.vlr-chip.card {
  width: 100%;
  min-width: 0;
  margin-bottom: 0.7em;
  padding: 0.7em 1.1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: #fff;
  border-radius: 1.2em;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}
.vlr-chip .btn {
  margin-left: 0.25em;
}
.add-item-btn {
  margin-top: 1.1em;
}

/* Form Validation Styles */
.form-control:invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.form-control:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
/* Session Timeout Message Styles */
.timeout-message {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    position: relative;
    animation: slideInDown 0.5s ease-out;
}

.timeout-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.timeout-icon i {
    font-size: 20px;
    color: white;
}

.timeout-content {
    flex: 1;
}

.timeout-content h4 {
    margin: 0 0 5px 0;
    color: #856404;
    font-size: 18px;
    font-weight: 600;
}

.timeout-content p {
    margin: 0;
    color: #856404;
    font-size: 14px;
    line-height: 1.4;
}

.timeout-close {
    background: none;
    border: none;
    color: #856404;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.timeout-close:hover {
    background: rgba(133, 100, 4, 0.1);
    color: #5a4a00;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Theme color for nav-pills active tab */
.nav-pills .nav-link.active {
    background-color: var(--theme-primary, #6a0dad) !important;
    color: #fff !important;
    border-radius: 5px;
    font-weight: bold;
}
.nav-pills .nav-link {
    color: var(--theme-primary, #6a0dad);
    font-weight: bold;
}

/* Enhanced theme color and style for nav-pills active tab */
.nav-pills .nav-link.active {
    background-color: var(--theme-primary, #6a0dad) !important;
    color: #fff !important;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(106, 13, 173, 0.10), 0 1.5px 0 #fff inset;
    padding: 12px 28px;
    transition: background 0.3s, box-shadow 0.3s, color 0.3s;
    position: relative;
    z-index: 2;
}
.nav-pills .nav-link {
    color: #6a0dad;
    font-weight: bold;
    background: #f7f2fa;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
    padding: 12px 28px;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}
.nav-pills .nav-link:not(.active):hover {
    background: var(--theme-primary-light, rgba(106, 13, 173, 0.15));
    color: var(--theme-primary, #6a0dad);
    box-shadow: 0 2px 8px var(--theme-primary-light, rgba(106, 13, 173, 0.1));
}

/* My Courses - Modern Attractive Styles */
.welcome-banner {
    background: linear-gradient(90deg, #ffffff 0%, var(--theme-primary-light, #f3eaff) 100%);
    border-left: 6px solid var(--theme-primary, #6a0dad);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-state img {
    filter: drop-shadow(0 2px 8px rgba(106,13,173,0.10));
}
.empty-state h4 {
    font-weight: 700;
}

.course-card {
    border-radius: 18px;
    transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
    box-shadow: 0 4px 18px rgba(106,13,173,0.10);
    background: #fff;
    overflow: hidden;
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
}
.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(106,13,173,0.18);
    z-index: 2;
}

/* Course details arrow icon hover effect */
.course-details-icon {
    transition: all 0.3s ease;
}

.course-details-icon:hover {
    transform: translateX(5px);
    color: #9d4edd !important;
}

/* Modal Course Details - Grid Layout for Prerequisites/Post-requisites */
.modal .prerequisites-grid,
.modal .postrequisites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .modal .prerequisites-grid,
    .modal .postrequisites-grid {
        grid-template-columns: 1fr;
    }
}

.modal .prerequisite-card,
.modal .postrequisite-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal .prerequisite-card:hover,
.modal .postrequisite-card:hover {
    border-color: #d9b3ff;
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.12);
    transform: translateY(-2px);
}

.modal .module-item {
    transition: all 0.3s ease;
}

.modal .module-item:hover {
    transform: translateY(-2px);
}
.course-thumb {
    border-radius: 18px 18px 0 0;
    object-fit: cover;
    min-height: 140px;
    max-height: 160px;
    width: 100%;
}
.course-thumb-placeholder {
    height: 140px;
    background: linear-gradient(135deg, var(--theme-primary-light, #f3eaff) 0%, rgba(255,255,255,0.95) 60%, var(--theme-primary, #6a0dad) 100%);
    color: var(--theme-primary, #6a0dad);
    border-radius: 18px 18px 0 0;
}
.badge-status {
    background: var(--theme-primary-light, #f3eaff);
    color: var(--theme-primary, #6a0dad);
    font-weight: 600;
    border-radius: 12px;
    font-size: 0.9em;
    padding: 0.3em 0.7em;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.animate-pop {
    animation: popIn 0.5s cubic-bezier(.4,2,.6,1);
}
@keyframes popIn {
    0% { transform: scale(0.95); opacity: 0.2; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-btn {
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.animate-btn:hover {
    background: #530b8a;
    box-shadow: 0 2px 12px rgba(106,13,173,0.13);
    transform: translateY(-2px) scale(1.04);
}
.animate-progress {
    transition: width 0.7s cubic-bezier(.4,2,.6,1);
}
@media (max-width: 768px) {
    .welcome-banner { font-size: 1rem; padding: 1.2rem; }
    .course-card { min-height: 260px; }
    .course-thumb, .course-thumb-placeholder { min-height: 90px; max-height: 110px; }
}

.course-thumb-gradient {
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 48px;
    background: linear-gradient(0deg, rgba(106,13,173,0.13) 60%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: 0 0 18px 18px;
}
.course-avatar-wrap {
    z-index: 2;
}
.course-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    font-size: 1.2em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid #fff;
    background: linear-gradient(135deg, var(--theme-primary, #6a0dad), var(--theme-primary-light, #8c52ff));
    color: #fff;
}
.course-list-row {
    border-radius: 18px;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(106,13,173,0.10);
    border: none;
    padding: 18px 20px;
    transition: box-shadow 0.18s, transform 0.18s, background 0.18s;
    display: flex;
    align-items: center;
}
.course-list-row:hover {
    box-shadow: 0 8px 32px rgba(106,13,173,0.18);
    background: #f7f2fa;
    transform: translateY(-3px);
    z-index: 2;
}
@media (max-width: 768px) {
    .course-avatar { width: 28px; height: 28px; font-size: 1em; }
    .course-list-row { font-size: 0.97em; padding: 12px 8px; }
}

/* Ensure My Courses list view cards are always white, not affected by Bootstrap .list-group-item */
.list-group .course-list-row,
.list-group .course-list-row:hover,
.list-group .course-list-row:active {
    background: #fff !important;
    color: #222 !important;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(106,13,173,0.10);
    border: none;
}

/* ===== ASSISTANT CHAT ===== */
.assistant-chat-container {
    display: flex;
    min-height: 70vh;
}
.assistant-sidebar {
    width: 280px;
    border-right: 1px solid #f1f3f4;
    display: flex;
    flex-direction: column;
    background: #fdfdff;
}
.assistant-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.assistant-sidebar-body {
    padding: 0 1rem;
    flex: 1;
    overflow-y: auto;
}
.assistant-conversation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}
.assistant-conversation-item-wrapper {
    position: relative;
    margin-bottom: 0.5rem;
}
.assistant-conversation-item-wrapper.active .assistant-conversation-item {
    background: var(--theme-primary, #6a0dad);
    color: #fff;
    box-shadow: 0 6px 18px rgba(106, 13, 173, 0.25);
}
.assistant-conversation-item-wrapper.active .assistant-conversation-meta {
    color: rgba(255, 255, 255, 0.8);
}
.assistant-conversation-item {
    border: none;
    border-radius: 10px;
    padding: 0.75rem;
    padding-right: 2.5rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    width: 100%;
}
.assistant-conversation-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.assistant-conversation-delete {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #dc3545;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10;
    pointer-events: auto;
}
.assistant-conversation-item-wrapper:hover .assistant-conversation-delete {
    opacity: 1;
}
.assistant-conversation-delete:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #c82333;
}
.assistant-conversation-item-wrapper.active .assistant-conversation-delete {
    color: rgba(255, 255, 255, 0.9);
}
.assistant-conversation-item-wrapper.active .assistant-conversation-delete:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.assistant-conversation-title {
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assistant-conversation-meta {
    color: rgba(0, 0, 0, 0.5);
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.assistant-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid #f1f3f4;
}
.assistant-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.assistant-chat-header {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f4;
    background: linear-gradient(90deg, #fff, var(--theme-primary-light, #f3eaff));
}
.assistant-messages {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    background: #f8f9fb;
    position: relative;
}
.assistant-message {
    max-width: 80%;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.assistant-message-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    color: inherit;
}
.assistant-message-user {
    margin-left: auto;
    background: var(--theme-primary, #6a0dad);
    color: #fff;
}
.assistant-message-assistant {
    margin-right: auto;
    background: #fff;
}
.assistant-message-meta {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}
.assistant-citations {
    margin-top: 0.75rem;
    padding-left: 1rem;
}
.assistant-citations li {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.7);
}
.assistant-empty-state {
    text-align: center;
    color: #98a2b3;
    margin-top: 3rem;
}
.assistant-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--theme-primary, #6a0dad);
}
.assistant-input {
    padding: 1rem;
    border-top: 1px solid #f1f3f4;
    background: #fff;
}
.assistant-input textarea {
    resize: none;
    border-radius: 14px;
    margin-bottom: 0.75rem;
}
.assistant-input-actions {
    display: flex;
    justify-content: flex-end;
}
.assistant-messages.loading::after {
    content: 'Loading...';
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 0.85rem;
    color: #98a2b3;
}

@media (max-width: 992px) {
    .assistant-chat-container {
        flex-direction: column;
    }
    .assistant-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f3f4;
    }
    .assistant-message {
        max-width: 100%;
    }
}


/* Override Bootstrap .list-group-item hover for theme consistency - exclude sidebar and autocomplete dropdowns */
.list-group-item:hover:not(#sidebar .list-group-item):not(.autocomplete-dropdown .list-group-item), 
.list-group-item:focus:not(#sidebar .list-group-item):not(.autocomplete-dropdown .list-group-item) {
    background: #f7f2fa !important;
    color: #222 !important;
}

/* Autocomplete dropdown specific styling */
.autocomplete-dropdown .list-group-item {
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.autocomplete-dropdown .list-group-item:hover {
    background: #f8f9fa !important;
    color: #333 !important;
}

.autocomplete-dropdown .list-group-item:focus {
    background: #e9ecef !important;
    color: #333 !important;
    outline: none !important;
}

.badge-purple {
    background-color: var(--theme-primary, #6a0dad);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
}

.my-courses .nav-pills .nav-link.active {
    background-color: var(--theme-primary, #6a0dad);
}

/* My Courses Pagination Styles */
.my-courses .pagination {
    margin-bottom: 0;
}

.my-courses .pagination .page-link {
    color: #6a0dad;
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.my-courses .pagination .page-link:hover {
    color: #fff;
    background-color: #6a0dad;
    border-color: #6a0dad;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(106, 13, 173, 0.3);
}

.my-courses .pagination .page-item.active .page-link {
    background-color: var(--theme-primary, #6a0dad);
    border-color: var(--theme-primary, #6a0dad);
    color: #fff;
    /* Fallback for older browsers */
    box-shadow: 0 2px 4px rgba(106, 13, 173, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 2px 4px color-mix(in srgb, var(--theme-primary, #6a0dad) 30%, transparent);
}

.my-courses .pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.my-courses .pagination .page-item.disabled .page-link:hover {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    transform: none;
    box-shadow: none;
}

.my-courses .pagination .page-link i {
    font-size: 0.875rem;
}

/* Course count info styling */
.my-courses .pagination + div {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Search Courses Pagination Styles */
.search-courses .pagination {
    margin-bottom: 0;
}

.search-courses .pagination .page-link {
    color: #6a0dad;
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.search-courses .pagination .page-link:hover {
    color: #fff;
    background-color: #6a0dad;
    border-color: #6a0dad;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(106, 13, 173, 0.3);
}

.search-courses .pagination .page-item.active .page-link {
    background-color: var(--theme-primary, #6a0dad);
    border-color: var(--theme-primary, #6a0dad);
    color: #fff;
    /* Fallback for older browsers */
    box-shadow: 0 2px 4px rgba(106, 13, 173, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 2px 4px color-mix(in srgb, var(--theme-primary, #6a0dad) 30%, transparent);
}

.search-courses .pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.search-courses .pagination .page-item.disabled .page-link:hover {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    transform: none;
    box-shadow: none;
}

.search-courses .pagination .page-link i {
    font-size: 0.875rem;
}

/* Course count info styling for search courses */
.search-courses .pagination + div {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* ✅ Fix search-courses page layout - prevent content going behind sidebar */
.main-content .container.search-courses,
.main-content #searchCoursesPage {
    margin-left: 250px !important;
    max-width: calc(100% - 250px) !important;
    transition: margin-left 0.3s ease-in-out, max-width 0.3s ease-in-out;
}

.sidebar.collapsed ~ .main-content .container.search-courses,
.sidebar.collapsed ~ .main-content #searchCoursesPage {
    margin-left: 80px !important;
    max-width: calc(100% - 80px) !important;
}

/* My Announcements Styles - Modern Design */
.modern-announcement-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.modern-announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--theme-primary, #6f42c1);
}

.announcement-card-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.announcement-title-section {
    flex: 1;
    min-width: 0;
}

.announcement-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.announcement-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    flex-wrap: wrap;
}

.announcement-creator,
.announcement-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.announcement-divider {
    color: #dee2e6;
    font-weight: 300;
}

.announcement-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.announcement-card-body {
    padding: 1rem 1.5rem;
}

.announcement-description {
    margin-bottom: 1rem;
}

.description-text {
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.acknowledgment-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #6f42c1;
}

.announcement-card-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #f1f3f4;
}

/* Urgency Styles */
.urgency-urgent {
    border-left: 4px solid #dc3545;
}

.urgency-warning {
    border-left: 4px solid #ffc107;
}

.urgency-info {
    border-left: 4px solid #17a2b8;
}

.urgency-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.urgency-badge.urgency-urgent {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.urgency-badge.urgency-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: white;
}

.urgency-badge.urgency-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.status-badge.status-read {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.status-badge.status-unread {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

/* Announcement Detail Modal */
.announcement-detail {
    padding: 0;
}

.announcement-detail .announcement-header {
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.announcement-detail .announcement-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.announcement-detail .announcement-body {
    margin-bottom: 2rem;
}

.announcement-detail .announcement-body .content {
    font-size: 1rem;
    line-height: 1.6;
    color: #495057;
}

.announcement-detail .announcement-cta {
    margin-bottom: 2rem;
    text-align: center;
}

.announcement-detail .announcement-actions {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* Modern Header Card */
.modern-header-card {
    background: linear-gradient(135deg, var(--theme-primary, #6f42c1) 0%, var(--theme-primary-light, #8e44ad) 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    /* Fallback for older browsers */
    box-shadow: 0 8px 32px rgba(111, 66, 193, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 8px 32px color-mix(in srgb, var(--theme-primary, #6f42c1) 30%, transparent);
    margin-bottom: 2rem;
}

.modern-header-card .header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.modern-header-card .header-content {
    flex: 1;
}

.modern-header-card .page-title {
    color: white !important;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modern-header-card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem;
    margin: 0;
}

/* Modern Filter Card */
.modern-filter-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.filter-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.filter-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
}

.filter-body {
    padding: 1.5rem;
}

.modern-input-group .input-group-text {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}
.modern-input-group .form-control:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

.modern-select {
    border-color: #dee2e6;
    background: #fff;
}

.modern-select:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

/* Modern Buttons */
.btn-modern-primary {
    background: linear-gradient(135deg, var(--theme-primary, #6f42c1) 0%, var(--theme-primary-light, #8e44ad) 100%);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.btn-modern-primary:hover {
    background: linear-gradient(135deg, var(--theme-primary-hover, #5a359a) 0%, var(--theme-primary, #6f42c1) 100%);
    transform: translateY(-1px);
    /* Fallback for older browsers */
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #6f42c1) 30%, transparent);
    color: white;
}

.btn-modern-outline {
    background: transparent;
    border: 2px solid var(--theme-primary, #6f42c1);
    color: var(--theme-primary, #6f42c1);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}
.btn-modern-outline:hover {
    background: var(--theme-primary, #6f42c1);
    color: white;
    transform: translateY(-1px);
    /* Fallback for older browsers */
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    /* Modern browsers with theme color support */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #6f42c1) 30%, transparent);
}
.btn-modern-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}
.btn-modern-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    color: white;
}
/* Modern Results Info */
.modern-results-info {
    background: linear-gradient(135deg, var(--theme-primary, #6f42c1) 0%, var(--theme-primary-light, #8e44ad) 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    /* Fallback for older browsers */
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.2);
    /* Modern browsers with theme color support */
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-primary, #6f42c1) 20%, transparent);
    margin-bottom: 1rem;
}

.modern-results-info i {
    margin-right: 0.5rem;
    opacity: 0.9;
}

/* Modern Empty State */
.modern-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #6c757d;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: #6c757d;
    font-size: 1rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-header-card {
        padding: 1.5rem;
    }
    
    .modern-header-card .header-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-right: 1rem;
    }
    
    .modern-header-card .page-title {
        font-size: 1.5rem;
    }
    
    .announcement-card-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .announcement-card-body {
        padding: 1rem;
    }
    
    .announcement-card-footer {
        padding: 1rem;
    }
    
    .announcement-badges {
        align-self: flex-start;
    }
    
    .announcement-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .announcement-divider {
        display: none;
    }
    
    .filter-body {
        padding: 1rem;
    }
    
    .modern-empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .empty-state-title {
        font-size: 1.25rem;
    }
}

/* Social Dashboard Styles */
.social-dashboard .social-feature-card {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.social-dashboard .social-feature-card:hover {
    transform: translateY(-5px);
    /* Fallback for older browsers */
    box-shadow: 0 10px 25px rgba(106, 13, 173, 0.15);
    /* Modern browsers with theme color support */
    box-shadow: 0 10px 25px color-mix(in srgb, var(--theme-primary, #6a0dad) 15%, transparent);
    border-color: var(--theme-primary, #6a0dad);
}

.social-dashboard .social-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fallback for older browsers */
    background: linear-gradient(135deg, rgba(106, 13, 173, 0.1) 0%, rgba(106, 13, 173, 0.05) 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Use pseudo-element for theme color support */
.social-dashboard .social-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--theme-primary, #6a0dad);
    opacity: 0.1;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.social-dashboard .social-icon > * {
    position: relative;
    z-index: 1;
}

.social-dashboard .social-feature-card:hover .social-icon {
    /* Fallback for older browsers */
    background: linear-gradient(135deg, rgba(106, 13, 173, 0.2) 0%, rgba(106, 13, 173, 0.1) 100%);
    transform: scale(1.1);
}

.social-dashboard .social-feature-card:hover .social-icon::before {
    opacity: 0.2;
}

.social-dashboard .social-icon i {
    font-size: 1.5rem;
}

.social-dashboard .card-title {
    color: var(--theme-primary, #6a0dad);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.social-dashboard .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-weight: 600;
}

.social-dashboard .card-text {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Recent Activity Styles */
.social-dashboard #recentActivity {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-dashboard .spinner-border {
    width: 2rem;
    height: 2rem;
}

/* Activity Items */
.social-dashboard .activity-item {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef !important;
}

.social-dashboard .activity-item:hover {
    transform: translateY(-2px);
    /* Fallback for older browsers */
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.1);
    /* Modern browsers with theme color support */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #6a0dad) 10%, transparent);
    border-color: var(--theme-primary, #6a0dad) !important;
}

.social-dashboard .activity-item h6 {
    color: var(--theme-primary, #6a0dad);
    font-weight: 600;
}

.social-dashboard .activity-item .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}


/* === Course Details Page Enhancements === */
.course-details .banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.45) 100%);
}
.course-details .banner-content {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  color: #fff;
}
.course-details .banner-title {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.course-details .badge-course-type,
.course-details .badge-difficulty,
.course-details .badge-category,
.course-details .badge-subcategory {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; font-size: 12px;
  background: var(--theme-primary, #6a0dad);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Meta grid */
.course-details .meta-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px) {
  .course-details .meta-grid { grid-template-columns: 1fr; }
}
.course-details .meta-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid #eee; border-radius: 10px;
  background: #faf9fc;
}
.course-details .meta-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--theme-primary, #6a0dad), var(--theme-primary-light, #8e44ad));
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.course-details .meta-label { font-size: 12px; color: #777; }
.course-details .meta-value { font-weight: 700; color: #333; }

/* Content rows */
/* Removed conflicting content styles that were overriding new content-* styles */
.course-details .module-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
/* Removed conflicting progress styles that were overriding content-progress */

/* Accordion item tweaks */
.course-details .module-item .accordion-button { gap: 8px; padding: 10px 14px; background: #ffffff; color: #4a4a4a; }
.course-details .module-item .accordion-button:not(.collapsed) { background: #ffffff; color: #4a4a4a; }
.course-details .module-item .accordion-button .text-purple { color: var(--theme-primary, #6a0dad) !important; }
.course-details .divider-line { height: 20px; width: 1px; background: #e5d6ff; }

/* Course Details - Modern Prerequisites & Post-requisites Styling */
.prerequisites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns to match post-requisites */
    gap: 20px; /* Increased gap for better breathing room */
    margin-top: 16px;
    align-items: start; /* Ensure cards align to top */
    grid-auto-rows: minmax(min-content, max-content); /* Allow rows to adjust to content */
}

.postrequisites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns */
    gap: 20px; /* Increased gap for better breathing room */
    margin-top: 16px;
    align-items: start; /* Ensure cards align to top */
    grid-auto-rows: minmax(min-content, max-content); /* Allow rows to adjust to content */
}

/* Wrapper for prerequisite and post-requisite items */
.prerequisite-item,
.postrequisite-item {
    display: flex;
    flex-direction: column;
}

.prerequisite-card,
.postrequisite-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center; /* Changed back to center for proper row alignment */
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: visible; /* Changed from hidden to visible to show attempt summaries */
    gap: 16px;
    min-height: 80px; /* Ensure minimum height for consistency */
    height: auto; /* Allow height to adjust dynamically */
    flex-wrap: nowrap; /* Prevent wrapping to maintain single row layout */
}

/* Special layout for cards with attempt summaries */
.prerequisite-card.has-attempts,
.postrequisite-card.has-attempts {
    flex-direction: row; /* Keep as row layout for list view */
    align-items: center; /* Center content vertically */
    gap: 16px; /* Maintain original gap */
}

.prerequisite-card.has-attempts .prerequisite-content,
.postrequisite-card.has-attempts .postrequisite-content {
    flex-direction: row; /* Keep icon and details in a row */
    align-items: center;
    justify-content: flex-start; /* Align to left */
    flex: 1; /* Take available space */
}

.prerequisite-card.has-attempts .prerequisite-action-btn,
.postrequisite-card.has-attempts .postrequisite-action-btn {
    align-self: center; /* Keep button aligned with title */
    margin-top: 0; /* No extra margin needed */
    flex-shrink: 0; /* Prevent button from shrinking */
}

/* Special layout for content item cards with attempts */
.content-item-card.has-attempts {
    flex-direction: row; /* Keep as row layout for list view */
    align-items: center; /* Center content vertically */
    gap: 16px; /* Maintain original gap */
    min-height: auto; /* Allow natural height */
}

.content-item-card.has-attempts .content-item-left,
.content-item-card.has-attempts .content-item-center,
.content-item-card.has-attempts .content-item-right {
    width: auto; /* Natural width for row layout */
    justify-content: flex-start; /* Align to left */
}

.content-item-card.has-attempts .content-controls {
    align-self: center; /* Keep controls aligned with title */
    margin-top: 0; /* No extra margin needed */
    flex-shrink: 0; /* Prevent controls from shrinking */
}

/* Ensure course module assessment buttons use the same styling as prerequisites */
.content-item-card .prerequisite-action-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

/* ===================================
   ORGANIZATIONAL HIERARCHY
   =================================== */

/* Main container */
.org-hierarchy {
    background: #f8f9fa;
    min-height: calc(100vh - 100px);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.hierarchy-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Page header */
.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
    margin-bottom: 20px;
}

/* Breadcrumb navigation */
.breadcrumb-nav {
    margin-bottom: 20px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: #3498db;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #7f8c8d;
}

/* Statistics */
.hierarchy-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.stat-card h3 {
    font-size: 2rem;
    color: #3498db;
    margin: 0 0 10px 0;
}

.stat-card p {
    color: #7f8c8d;
    margin: 0;
}

/* Controls */
.hierarchy-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-control {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: #3498db;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-control:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

/* Organization tree */
.org-tree {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Individual nodes */
.org-node {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
    transition: all 0.3s ease;
    gap: 15px;
}

.org-node:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

/* Level-specific styling */
.org-node.level-0 { border-left-color: #e74c3c; }
.org-node.level-1 { border-left-color: #f39c12; }
.org-node.level-2 { border-left-color: #f1c40f; }
.org-node.level-3 { border-left-color: #2ecc71; }
.org-node.level-4 { border-left-color: #3498db; }
.org-node.level-5 { border-left-color: #9b59b6; }

/* Expand/collapse button */
.org-expand {
    background: none;
    border: none;
    color: #3498db;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-expand:hover {
    background: #e3f2fd;
    color: #1976d2;
}

.org-expand.expanded i {
    transform: rotate(90deg);
}

.org-expand i {
    transition: transform 0.3s ease;
}

/* Avatar */
.org-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.org-avatar.default {
    background: #95a5a6;
}

/* User info */
.org-info {
    flex: 1;
    min-width: 0;
}

.org-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.org-role {
    color: #7f8c8d;
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.org-role {
    color: #7f8c8d;
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.org-email {
    color: #95a5a6;
    font-size: 0.85rem;
    font-family: monospace;
}

.org-warning {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Status badges */
.org-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 15px;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-locked {
    background: #fff3cd;
    color: #856404;
}



/* Children container */
.org-children {
    margin-left: 40px;
    border-left: 2px solid #e9ecef;
    padding-left: 20px;
    transition: all 0.3s ease;
}

.org-children.collapsed {
    display: none;
}

/* Loading and no data states */
.loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

/* Responsive design */
@media (max-width: 768px) {
    .org-hierarchy {
        margin: 10px;
        padding: 15px;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .hierarchy-stats {
        grid-template-columns: 1fr;
    }
    
    .org-node {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .org-status {
        margin: 10px 0;
    }
    

    
    .org-children {
        margin-left: 20px;
    }
}

.content-item-card .prerequisite-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: white;
    text-decoration: none;
}

.content-item-card .prerequisite-action-disabled {
    background: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}

.content-item-card .prerequisite-action-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Position attempts summary below course module cards */
.content-item-card .attempts-summary {
    position: relative;
    text-align: center;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-top: 8px;
    z-index: 1;
    width: 100%;
}

/* Specific positioning for prerequisite and post-requisite attempts summaries */
.prerequisite-item .attempts-summary,
.postrequisite-item .attempts-summary {
    position: relative;
    margin-top: 8px;
    z-index: 2;
    text-align: center;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    width: 100%;
}

.content-item-card .attempts-summary small {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
}
.content-item-card .attempts-summary i {
    color: #6c757d;
    margin-right: 4px;
}

/* Ensure course module cards with attempts have proper spacing */
.content-item-card:has(.attempts-summary) {
    margin-bottom: 20px;
}

/* Ensure prerequisite and post-requisite cards with attempts have proper spacing */
.prerequisite-card.has-attempts,
.postrequisite-card.has-attempts {
    position: relative;
}

.prerequisite-card::before,
.postrequisite-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6a0dad, #8e44ad);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.postrequisite-card::before {
    background: linear-gradient(90deg, #20c997, #28a745);
}

.prerequisite-card:hover::before,
.postrequisite-card:hover::before {
    opacity: 1;
}

.prerequisite-card:hover,
.postrequisite-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: #d1ecf1;
}
.prerequisite-content,
.postrequisite-content {
    display: flex;
    align-items: center; /* Changed back to center for proper row alignment */
    gap: 16px;
    flex: 1;
    min-width: 0; /* Allow content to shrink */
    /* Ensure content doesn't overflow and badges are visible */
    overflow: visible;
    flex-direction: row; /* Keep content in a row for list view */
    gap: 16px; /* Restored original gap */
}
.prerequisite-icon,
.postrequisite-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}
.prerequisite-card:hover .prerequisite-icon,
.postrequisite-card:hover .postrequisite-icon {
    border-color: #6a0dad;
    background: #f8f9ff;
    transform: scale(1.05);
}

.postrequisite-card:hover .postrequisite-icon {
    border-color: #20c997;
    background: #f8fffe;
}

.prerequisite-details,
.postrequisite-details {
    flex: 1;
    min-width: 0; /* Allow content to shrink */
    overflow: hidden; /* Prevent content from overflowing */
}

.prerequisite-title,
.postrequisite-title {
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    /* Ensure title doesn't push button around */
    max-width: 100%;
    word-wrap: break-word;
    hyphens: auto;
    /* Text truncation with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Limit width to prevent layout issues */
}

/* Additional protection for very long titles */
.prerequisite-details,
.postrequisite-details {
    flex: 1;
    min-width: 0; /* Allow content to shrink */
    /* Removed max-width restriction to prevent badge cutoff */
    /* Ensure proper spacing for truncated titles */
    padding-right: 10px;
    /* Prevent text from wrapping and ensure proper truncation */
    overflow: hidden;
}

/* Ensure button stays in fixed position */
.prerequisite-action-btn,
.postrequisite-action-btn {
    flex-shrink: 0; /* Prevent button from shrinking */
    min-width: 100px; /* Ensure consistent button width */
    white-space: nowrap; /* Keep button text on one line */
    margin-left: auto; /* Push button to the right */
}

.prerequisite-type,
.postrequisite-type {
    display: inline-block;
    background: #f3eaff;
    color: #6a0dad;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #e5d6ff;
    /* Ensure badges don't get cut off */
    white-space: nowrap;
    overflow: visible;
}

.postrequisite-type {
    background: #e8f8f5;
    color: #20c997;
    border-color: #d1f2eb;
    /* Ensure badges don't get cut off */
    white-space: nowrap;
    overflow: visible;
}

.prerequisite-action-btn,
.postrequisite-action-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    white-space: nowrap;
    flex-shrink: 0; /* Prevent button from shrinking */
    align-self: center; /* Center button vertically in the row */
    position: relative; /* Ensure proper positioning */
    z-index: 1; /* Ensure button is above other content */
}

/* Button color variants for different content types - Prerequisites */
.prerequisite-action-btn.btn-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.prerequisite-action-btn.btn-info:hover {
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}

.prerequisite-action-btn.btn-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    color: #212529;
}

.prerequisite-action-btn.btn-warning:hover {
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

.prerequisite-action-btn.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.prerequisite-action-btn.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.prerequisite-action-btn.btn-success {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.prerequisite-action-btn.btn-success:hover {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.prerequisite-action-btn.btn-secondary {
    background: linear-gradient(135deg, #6c757d, #545b62);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.prerequisite-action-btn.btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.prerequisite-action-btn.btn-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.prerequisite-action-btn.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.postrequisite-action-btn {
    background: linear-gradient(135deg, #6a0dad, #8e44ad);
    box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3);
}

.prerequisite-action-btn:hover,
.postrequisite-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: white;
    text-decoration: none;
}

.postrequisite-action-btn:hover {
    box-shadow: 0 6px 20px rgba(106, 13, 173, 0.4);
}

/* Button color variants for different content types */
.postrequisite-action-btn.btn-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.postrequisite-action-btn.btn-info:hover {
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}

.postrequisite-action-btn.btn-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    color: #212529;
}

.postrequisite-action-btn.btn-warning:hover {
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

.postrequisite-action-btn.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.postrequisite-action-btn.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.postrequisite-action-btn.btn-success {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.postrequisite-action-btn.btn-success:hover {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.postrequisite-action-btn.btn-secondary {
    background: linear-gradient(135deg, #6c757d, #545b62);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.postrequisite-action-btn.btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.postrequisite-action-btn.btn-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.postrequisite-action-btn.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.prerequisite-status {
    background: #e8f5e8;
    color: #28a745;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d4edda;
}

.prerequisite-icon-wrapper,
.postrequisite-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6a0dad, #8e44ad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3);
}

.postrequisite-icon-wrapper {
    background: linear-gradient(135deg, #20c997, #28a745);
    box-shadow: 0 4px 15px rgba(32, 201, 151, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .prerequisites-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 12px;
    }
    
    .postrequisites-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 12px;
    }
    
    .prerequisite-card,
    .postrequisite-card {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        text-align: center;
        min-height: auto; /* Allow natural height on mobile */
    }
    
    .prerequisite-content,
    .postrequisite-content {
        flex-direction: column;
        gap: 12px;
        align-items: center; /* Center content on mobile */
    }
    
    .prerequisite-icon,
    .postrequisite-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin: 0 auto;
    }
    
    .prerequisite-icon-wrapper,
    .postrequisite-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .prerequisite-action-btn,
    .postrequisite-action-btn,
    .prerequisite-status {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        min-width: auto; /* Allow full width on mobile */
        align-self: center; /* Center button on mobile */
        margin-top: 12px; /* Add some space above button */
    }
    
    /* Mobile: Allow titles to use full width */
    .prerequisite-details,
    .postrequisite-details {
        max-width: 100%;
        text-align: center;
    }
    
    /* Mobile: Make attempts summary more compact */
    .attempts-summary {
        margin-top: 0.75rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .attempts-summary small {
        font-size: 0.7rem;
        justify-content: center;
    }
    
    /* Mobile adjustments for cards with attempts */
    .prerequisite-card.has-attempts,
    .postrequisite-card.has-attempts,
    .content-item-card.has-attempts {
        margin-bottom: 40px; /* Reduce margin on mobile */
    }
    
    .prerequisite-card.has-attempts .attempts-summary,
    .postrequisite-card.has-attempts .attempts-summary,
    .content-item-card.has-attempts .attempts-summary {
        position: static; /* Stack normally on mobile */
        margin-top: 12px;
    }
}

@media (max-width: 576px) {
    .prerequisites-grid,
    .postrequisites-grid {
        margin-top: 12px;
    }
    
    .prerequisite-card,
    .postrequisite-card {
        padding: 14px;
    }
    
    .prerequisite-title,
    .postrequisite-title {
        font-size: 15px;
        max-width: 200px; /* Smaller max-width for mobile */
    }
    
    .prerequisite-type,
    .postrequisite-type {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* Animation for cards */
.prerequisite-card,
.postrequisite-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for multiple cards */
.prerequisite-card:nth-child(1) { animation-delay: 0.1s; }
.prerequisite-card:nth-child(2) { animation-delay: 0.2s; }
.prerequisite-card:nth-child(3) { animation-delay: 0.3s; }
.prerequisite-card:nth-child(4) { animation-delay: 0.4s; }

.postrequisite-card:nth-child(1) { animation-delay: 0.1s; }
.postrequisite-card:nth-child(2) { animation-delay: 0.2s; }
.postrequisite-card:nth-child(3) { animation-delay: 0.3s; }
.postrequisite-card:nth-child(4) { animation-delay: 0.4s; }

/* Course Content - Modern Module & Content Styling */
.course-content-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.course-modules-container {
    margin-top: 20px;
}

.module-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.module-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.module-header {
    background: linear-gradient(135deg, var(--theme-primary-light, #f8f9fa) 0%, #ffffff 100%);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;
    border-left: 4px solid var(--theme-primary, #6a0dad);
}

.module-header:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, var(--theme-primary-light, #f8f9fa) 100%);
}

.module-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.module-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.module-info {
    display: flex;
    align-items: center;
    min-width: 0;
}

.module-icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary, #6a0dad) 0%, var(--theme-primary-light, #8e44ad) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.module-details {
    margin-left: 16px;
    min-width: 0;
    flex: 1;
}

.module-number {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.module-title {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.module-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-progress-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    min-width: 200px;
}

.progress-info {
    text-align: center;
    width: 100%;
}

/* Removed progress-header - no longer used */

.progress-text {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    white-space: nowrap;
}

.refresh-progress-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.module-progress-section .progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
    overflow: hidden;
}

.module-progress-section .progress-bar {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.6s ease;
}

.module-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.refresh-progress-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-toggle {
    width: 32px;
    height: 28px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.module-header:hover .module-toggle {
    background: #e9ecef;
    color: #495057;
}

.module-content {
    padding: 0;
    background: #ffffff;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    overflow-x: auto;
}

.content-item-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    min-height: 80px;
    min-width: 600px;
    flex-wrap: nowrap;
    height: auto;
}

.content-item-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--content-color, #6c757d) 0%, var(--content-color-light, #adb5bd) 100%);
}

.content-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: #dee2e6;
}

.content-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    max-width: 300px;
    height: 100%;
}

.content-item-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 150px;
    padding: 0 10px;
    height: 100%;
}

.content-item-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    min-width: 200px;
    justify-content: flex-end;
    height: 100%;
}

.content-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.content-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.content-details {
    margin-left: 16px;
    min-width: 0;
    flex: 1;
}

.content-title {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    font-size: 0.95rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.content-type-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #f8f9fa;
    color: #6c757d;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.content-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    justify-content: flex-end;
    height: 100%;
}

.content-controls .content-toggle {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e9ecef;
    flex-shrink: 0;
    margin-left: 8px;
}

.content-controls .content-toggle:hover {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

.content-controls .content-toggle i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.content-controls .content-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.content-controls .content-actions {
    margin-left: 0;
    min-width: 100px;
    flex-shrink: 0;
    width: auto;
    display: flex;
    align-items: center;
    height: 100%;
}
/* OLD CSS - No longer used, replaced with postrequisite-action-btn styling */
/*
.content-controls .content-actions .content-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px;
    justify-content: center;
    white-space: nowrap;
    height: 36px;
    line-height: 1;
}
*/

.content-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    flex-shrink: 0;
    padding: 0 5px;
}
.content-progress .content-progress-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 80px;
    flex: 1;
    width: auto;
    text-align: center;
    align-items: center;
}

.content-progress .content-progress-text {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    text-align: center;
    white-space: nowrap;
}

.content-progress .content-progress-bar {
    height: 6px;
    border-radius: 3px;
    background-color: #e9ecef;
    overflow: hidden;
    width: 100%;
    min-width: 60px;
    max-width: 100px;
}

.content-progress .content-progress-fill {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.6s ease;
    height: 100%;
}

/* Content Status Badges */
.content-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    white-space: nowrap;
}

.content-status-badge.status-not_started {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.content-status-badge.status-started {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.content-status-badge.status-in_progress {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.content-status-badge.status-completed {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.content-status-badge.status-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Document Badge Styles - Matching SCORM Pattern EXACTLY */
.document-progress-status {
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8f9fa;
    border-left: 3px solid #dee2e6;
    margin-bottom: 8px;
}

.document-progress-status .text-success {
    color: #198754 !important;
    font-weight: 500;
}

.document-progress-status .text-warning {
    color: #fd7e14 !important;
    font-weight: 500;
}

.document-progress-status .text-muted {
    color: #6c757d !important;
}

.document-completed-badge {
    margin-top: 8px;
}

.document-completed-badge .badge {
    font-size: 0.875rem;
    padding: 6px 12px;
}

.document-progress-status small {
    font-size: 0.75rem;
}

.document-progress-status i {
    margin-right: 6px;
    width: 14px;
    text-align: center;
}

/* Video Badge Styles - Matching Document Pattern EXACTLY */
.video-progress-status {
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8f9fa;
    border-left: 3px solid #dee2e6;
    margin-bottom: 8px;
}

.video-progress-status .text-success {
    color: #198754 !important;
    font-weight: 500;
}

.video-progress-status .text-warning {
    color: #fd7e14 !important;
    font-weight: 500;
}

.video-progress-status .text-muted {
    color: #6c757d !important;
}

.video-completed-badge {
    margin-top: 8px;
}

.video-completed-badge .badge {
    font-size: 0.875rem;
    padding: 6px 12px;
}

.video-progress-status small {
    font-size: 0.75rem;
}

.video-progress-status i {
    margin-right: 6px;
    width: 14px;
    text-align: center;
}

.content-controls .content-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e9ecef;
    flex-shrink: 0;
}

.content-controls .content-toggle:hover {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

.content-controls .content-toggle i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.content-controls .content-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.content-controls .content-actions {
    margin-left: 0;
    min-width: 100px;
    flex-shrink: 0;
    width: auto;
}

/* OLD CSS - No longer used, replaced with postrequisite-action-btn styling */
/*
.content-controls .content-actions .content-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px;
    justify-content: center;
}
*/

/* OLD CSS - No longer used, replaced with postrequisite-action-btn styling */
/*
.content-controls .content-actions .content-action-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.content-controls .content-actions .content-action-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    color: white;
}

.content-action-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.content-action-secondary:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
    color: white;
}

.content-action-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.content-action-info:hover {
    background: linear-gradient(135deg, #138496 0%, #0f6674 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    color: white;
}

.content-action-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.content-action-success:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    color: white;
}

.content-action-disabled {
    background: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}
*/

.content-error {
    color: #dc3545;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff5f5;
    border-radius: 6px;
    border: 1px solid #fed7d7;
}

.audio-player-wrapper {
    display: flex;
    align-items: center;
}

.audio-player-wrapper audio {
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Content Details Collapsible Section */
.content-details-collapse {
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    margin: 0 -20px -20px -20px;
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.content-details-body {
    padding: 20px;
}

.content-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metadata-value {
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 500;
    line-height: 1.4;
}

.empty-content-message,
.empty-modules-message {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-content-message i,
.empty-modules-message i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }
    
    .module-header-content {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .module-header-left {
        justify-content: center;
        text-align: center;
    }
    
    .module-header-center {
        width: 100%;
        justify-content: center;
    }
    
    .module-progress-section {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .module-header-actions {
        justify-content: center;
        margin-top: 10px;
        flex-direction: column;
        gap: 8px;
    }
    
    .content-item-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .content-item-left {
        max-width: 200px;
        min-width: 200px;
        flex-shrink: 0;
        justify-content: flex-start;
    }
    
    .content-item-center {
        min-width: 120px;
        flex-shrink: 0;
        justify-content: center;
    }
    
    .content-item-right {
        min-width: 150px;
        flex-shrink: 0;
        justify-content: flex-end;
    }
    
    .content-item-header {
        width: 100%;
    }
    
    .content-controls {
        min-width: 150px;
        flex-shrink: 0;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
    }
    
    .content-controls .content-progress {
        min-width: 80px;
        flex-shrink: 0;
        justify-content: center;
    }
    
    .content-controls .content-actions {
        margin-left: 8px;
        min-width: auto;
        flex-shrink: 0;
    }
    
    /* OLD CSS - No longer used, replaced with postrequisite-action-btn styling */
    /*
    .content-controls .content-actions .content-action-btn {
        min-width: auto;
        justify-content: center;
    }
    */
    
    .content-details-collapse {
        margin: 0 -16px -16px -16px;
    }
    
    .content-details-body {
        padding: 16px;
    }
}

/* Assessment Attempts Management Styles */
.attempts-summary {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(108, 117, 125, 0.08);
    border-radius: 6px;
    border-left: 2px solid #6c757d;
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 100%;
    word-wrap: break-word;
    /* Ensure it doesn't disrupt grid layout */
    grid-column: 1 / -1; /* Span full width in grid */
    width: 100%;
    /* Position below the card content */
    position: relative;
    z-index: 1;
}

/* For cards with attempts, position summary below the row */
.prerequisite-card.has-attempts,
.postrequisite-card.has-attempts,
.content-item-card.has-attempts {
    position: relative;
}

.prerequisite-card.has-attempts .attempts-summary,
.postrequisite-card.has-attempts .attempts-summary,
.content-item-card.has-attempts .attempts-summary {
    position: absolute;
    top: 100%; /* Position below the card */
    left: 0;
    right: 0;
    margin-top: 8px; /* Small gap from card */
    z-index: 2;
}

.attempts-summary small {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}

.attempts-summary i {
    font-size: 0.7rem;
    opacity: 0.8;
    flex-shrink: 0;
}

/* OLD CSS - No longer used, replaced with postrequisite-action-btn styling */
/*
.content-action-disabled {
    background: #6c757d !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.content-action-disabled:hover {
    background: #6c757d !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}
*/

.prerequisite-action-disabled,
.postrequisite-action-disabled {
    background: #6c757d !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.prerequisite-action-disabled:hover,
.postrequisite-action-disabled:hover {
    background: #6c757d !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Custom Tooltip Styling */
.custom-tooltip .tooltip-inner {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    text-align: center;
    line-height: 1.3;
}

.custom-tooltip .tooltip-arrow::before {
    border-top-color: #2c3e50;
}

/* Tooltip hover effects */
.custom-tooltip .tooltip-inner {
    transition: all 0.3s ease;
}

/* Ensure tooltips appear above other elements */
.tooltip {
    z-index: 9999;
    pointer-events: none; /* Prevent tooltip from interfering with layout */
}

/* Ensure tooltip content is properly accessible */
.tooltip.show {
    pointer-events: auto;
}

/* Responsive tooltip adjustments */
@media (max-width: 768px) {
    .custom-tooltip .tooltip-inner {
        max-width: 250px;
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* Enhanced tooltip styling for truncated titles */
.custom-tooltip .tooltip-inner {
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    max-width: 350px;
}

/* Ensure tooltips for all tooltip-enabled titles show pointer cursor */
.prerequisite-title[data-bs-toggle="tooltip"],
.postrequisite-title[data-bs-toggle="tooltip"],
.content-title[data-bs-toggle="tooltip"],
.module-title[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/* Hover effect for truncated titles */
.prerequisite-title:hover,
.postrequisite-title:hover {
    color: #6a0dad;
    transition: color 0.2s ease;
}

/* Reports To Autocomplete Styling */
.reports-to-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
}

.reports-to-autocomplete-dropdown .autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.reports-to-autocomplete-dropdown .autocomplete-item:hover,
.reports-to-autocomplete-dropdown .autocomplete-item.selected {
    background-color: #f8f9fa;
}

.reports-to-autocomplete-dropdown .autocomplete-item:last-child {
    border-bottom: none;
}

.reports-to-autocomplete-dropdown .autocomplete-item .email {
    font-weight: 500;
    color: #333;
}

.reports-to-autocomplete-dropdown .autocomplete-item .name {
    color: #6c757d;
    font-size: 0.875em;
}

.reports-to-autocomplete-dropdown .autocomplete-item strong {
    color: #007bff;
    font-weight: 600;
}

/* Ensure the form group has relative positioning for dropdown */
.form-group:has(input[name="reports_to"]) {
    position: relative;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .reports-to-autocomplete-dropdown {
        max-height: 150px;
    }
    
    .reports-to-autocomplete-dropdown .autocomplete-item {
        padding: 10px 12px;
    }
    
    .reports-to-autocomplete-dropdown .autocomplete-item .name {
        display: none; /* Hide names on mobile to save space */
    }
}

/* Assessment Status Styling */
.assessment-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 3px solid;
}

.assessment-status .text-success {
    color: #28a745 !important;
    font-weight: 600;
    font-size: 0.9rem;
}

.assessment-status .text-danger {
    color: #dc3545 !important;
    font-weight: 600;
    font-size: 0.9rem;
}
.assessment-status .text-danger + .text-muted {
    color: #6c757d !important;
    font-size: 0.8rem;
}

/* Ensure score information is properly styled */
.assessment-status .text-muted {
    color: #6c757d !important;
    font-size: 0.8rem;
    line-height: 1.2;
}

.assessment-status i {
    font-size: 1rem;
}

/* Assessment button states */
.prerequisite-action-btn.prerequisite-action-disabled,
.postrequisite-action-btn.postrequisite-action-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.prerequisite-action-btn.prerequisite-action-disabled:hover,
.postrequisite-action-btn.postrequisite-action-disabled:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    transform: none !important;
}

/* Responsive assessment status */
@media (max-width: 768px) {
    .assessment-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .assessment-status .text-muted {
        margin-left: 0 !important;
    }
}
/* =====================================================
   FEEDBACK FORM STYLES
   ===================================================== */

.feedback-question {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.feedback-question:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-question.is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.question-header {
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 15px;
}

/* Removed conflicting question-number style - handled by assessment_player.css */

.question-media {
    text-align: center;
}

.question-media img,
.question-media video,
.question-media audio {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Rating Stars */
.rating-response {
    text-align: center;
}

.rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 5px;
}

.rating-input {
    display: none;
}

.rating-label {
    font-size: 2rem;
    color: #e9ecef;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rating-label:hover,
.rating-label.hover {
    color: #ffc107;
}

.rating-label.active {
    color: #ffc107;
}

.rating-input:checked ~ .rating-label {
    color: #ffc107;
}

/* Choice Responses */
.choice-response,
.checkbox-response {
    max-height: 300px;
    overflow-y: auto;
}

/*.form-check {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.2s ease;
} */

.form-check:hover {
    background-color: #f8f9fa;
    border-color: #ffc107;
}

.form-check-input:checked + .form-check-label {
    font-weight: bold;
    color: #ffc107;
}

/* Text Responses */
.text-response textarea {
    resize: vertical;
    min-height: 100px;
}

/* File Upload */
.file-response {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.file-response:hover {
    border-color: #ffc107;
    background-color: #fff9e6;
}

/* Form Actions */
.form-actions {
    border-top: 2px solid #f8f9fa;
    padding-top: 20px;
    text-align: center;
}

/* Invalid Feedback */
.invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
    font-weight: 500;
}

/* Toast Notifications */
.toast-container {
    z-index: 9999;
}

.toast {
    min-width: 300px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .feedback-question {
        padding: 15px;
    }
    
    .rating-stars {
        gap: 3px;
    }
    
    .rating-label {
        font-size: 1.5rem;
    }
    
    .form-actions .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}

/* Animation for form submission */
.feedback-form-submitting {
    opacity: 0.7;
    pointer-events: none;
}

.feedback-form-submitting .btn {
    position: relative;
}

.feedback-form-submitting .btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================================
   FEEDBACK MODAL STYLES
   ===================================================== */

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

#feedbackModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.feedback-question-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

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

.feedback-question-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.feedback-question-required {
    color: #dc3545;
    font-size: 0.9rem;
    margin-left: 5px;
}

/* Modal-specific rating stars */
.modal-rating-stars {
    display: flex;
    gap: 5px;
}

.modal-rating-star {
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-rating-star i {
    color: #dee2e6;
    transition: color 0.2s ease;
}

.modal-rating-star:hover i,
.modal-rating-star.active i,
.modal-rating-star.hover i {
    color: #ffc107;
}

/* Feedback Modal Validation Styling - Match Application Standard */
.feedback-form-container .is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.feedback-form-container .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

.feedback-form-container .invalid-feedback i {
    margin-right: 0.25rem;
}

.feedback-form-container .is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Modal choice options */
.modal-choice-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-choice-option:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.modal-choice-option input[type="radio"],
.modal-choice-option input[type="checkbox"] {
    margin: 0;
}

.modal-choice-option label {
    margin: 0;
    cursor: pointer;
    flex: 1;
}

/* Modal text areas */
.modal-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.modal-textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Modal submit button */
.modal-submit-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.modal-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Modal responsive design */
@media (max-width: 768px) {
    #feedbackModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .feedback-question-card {
        padding: 15px;
    }
    
    .modal-rating-stars {
        gap: 3px;
    }
    
    .modal-rating-star {
        font-size: 20px;
    }
}

/* ===== SURVEY OPTION MEDIA STYLES ===== */
#surveyModal .option-media,
.survey-form .option-media {
    pointer-events: auto;
}
#surveyModal .option-media video,
.survey-form .option-media video {
    pointer-events: auto;
    cursor: pointer;
}
#surveyModal .option-media img,
.survey-form .option-media img {
    pointer-events: auto;
    cursor: pointer;
}

/* ===== ASSIGNMENT SUBMISSION STYLES ===== */
.assignment-submission {
    max-width: 100%;
}

.assignment-submission-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.assignment-submission-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.assignment-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.assignment-header h5 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.assignment-header .fas {
    margin-right: 0.5rem;
    font-size: 1.2em;
}

.assignment-body {
    padding: 2rem;
}

.assignment-description {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.assignment-instructions,
.assignment-requirements {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.assignment-instructions h6,
.assignment-requirements h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.assignment-instructions h6::before,
.assignment-requirements h6::before {
    content: "📋";
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.assignment-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.assignment-details .row {
    margin: 0;
}

.assignment-details .col-md-6 {
    padding: 0.5rem 1rem;
}

.assignment-details small {
    display: flex;
    align-items: center;
    color: #6c757d;
}

.assignment-details .fas {
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}

/* Submission Type Selection */
.submission-type-selection {
    margin-bottom: 2rem;
}

.submission-type-selection .form-check {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.submission-type-selection .form-check:hover {
    border-color: #007bff;
    background: #e3f2fd;
}

.submission-type-selection .form-check-input:checked + .form-check-label {
    color: #007bff;
    font-weight: 600;
}

.submission-type-selection .form-check-input:checked ~ .form-check {
    border-color: #007bff;
    background: #e3f2fd;
}

.submission-type-selection .form-check-input {
    margin-right: 0.75rem;
    margin-top: 0;
    margin-left: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    z-index: 1;
}

.submission-type-selection .form-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    flex: 1;
    position: relative;
    z-index: 1;
}

.submission-type-selection .fas {
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* Override general form-check rules for submission type selection */
.submission-type-selection .form-check:hover {
    background: #e3f2fd !important;
    border-color: #007bff !important;
}

.submission-type-selection .form-check-input:checked + .form-check-label {
    color: #007bff !important;
    font-weight: 600 !important;
}

/* Checkbox specific styling for mixed submission */
.submission-type-selection .form-check-input[type="checkbox"] {
    border-radius: 4px;
}

.submission-type-selection .form-check-input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.submission-type-selection .form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Submission Sections */
.submission-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.submission-section.active {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* File Upload Styles */
.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.file-upload-area.dragover {
    border-color: #007bff;
    background: #e3f2fd;
}

.file-upload-area .fas {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.file-upload-area .upload-text {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.file-upload-area .upload-hint {
    color: #adb5bd;
    font-size: 0.9rem;
}

.file-info {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.file-info .fas {
    color: #1976d2;
}

/* Text Entry Styles */
.text-entry-area {
    min-height: 200px;
}

.text-entry-area .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.text-entry-area .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* URL Submission Styles */
.url-submission-area .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.url-submission-area .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Submit Button */
.assignment-submit-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.assignment-submit-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

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

.assignment-submit-btn:disabled {
    background: #6c757d;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Submission History Styles */
.submissions-container {
    max-height: 500px;
    overflow-y: auto;
}

.submission-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.submission-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

.submission-item .badge {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

.submission-details {
    color: #495057;
}

.submission-details strong {
    color: #212529;
}

.submission-details .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Modal Specific Styles */
#assignmentModal .modal-dialog {
    max-width: 800px;
}

#assignmentModal .modal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
}
#assignmentModal .modal-title .fas {
    margin-right: 0.5rem;
}

#assignmentModal .modal-body {
    padding: 2rem;
}

/* Success Message Styles */
.assignment-success {
    text-align: center;
    padding: 3rem 2rem;
}

.assignment-success .fas {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1.5rem;
}

.assignment-success h5 {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 1rem;
}

.assignment-success p {
    color: #6c757d;
    font-size: 1.1rem;
}
/* Responsive Design */
@media (max-width: 768px) {
    .assignment-body {
        padding: 1.5rem;
    }
    
    .assignment-header {
        padding: 1rem;
    }
    
    .assignment-instructions,
    .assignment-requirements {
        padding: 1rem;
    }
    
    .submission-section {
        padding: 1rem;
    }
    
    .file-upload-area {
        padding: 1.5rem;
    }
    
    .file-upload-area .fas {
        font-size: 2rem;
    }
    
    #assignmentModal .modal-body {
        padding: 1.5rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Loading States */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid #f3f3f3;
    border-top: 0.3rem solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   FILTER DROPDOWN SEARCH STYLES
   ======================================== */

/* Filter Dropdown Search Styles */
.filter-search-input {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.filter-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

.filter-search-input:disabled {
    background-color: #f8f9fa;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Filter Dropdown Options */
.filter-option {
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 2px 4px;
}

.filter-option:hover {
    background-color: #f8f9fa;
}

.filter-option.hidden {
    display: none !important;
}

.filter-option.highlighted {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

/* Filter Option Classes */
.user-option, .course-option, .custom-field-option, .custom-field-value-option {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.user-option:last-child, .course-option:last-child, .custom-field-option:last-child, .custom-field-value-option:last-child {
    border-bottom: none;
}

.user-option .form-check, .course-option .form-check, .custom-field-option .form-check, .custom-field-value-option .form-check {
    margin: 0;
    padding: 8px 12px 8px 2rem;
    transition: background-color 0.2s ease;
}

.user-option:hover .form-check, .course-option:hover .form-check, .custom-field-option:hover .form-check, .custom-field-value-option:hover .form-check {
    background-color: #f8f9fa;
}

.user-option.hidden, .course-option.hidden, .custom-field-option.hidden, .custom-field-value-option.hidden {
    display: none !important;
}

/* Filter Checkbox Styles */
.filter-checkbox {
    margin-right: 8px;
    transform: scale(1.1);
}

.filter-checkbox:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.filter-checkbox:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Filter Label Styles */
.filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: color 0.2s ease;
}

.filter-label:hover {
    color: #007bff;
}

/* Dropdown Button Styles */
.filter-dropdown-btn {
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #495057;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

.filter-dropdown-btn:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.filter-dropdown-btn:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

.filter-dropdown-btn:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Dropdown Menu Styles */
.filter-dropdown-menu {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    margin-top: 4px;
    background-color: #fff;
    z-index: 1050;
    min-width: 100%;
    width: max-content;
    max-width: 300px;
}

.filter-dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-dropdown-menu .form-check {
    margin: 0;
    padding: 8px 12px 8px 2rem;
}

.filter-dropdown-menu .form-check-label {
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-word;
}

.filter-dropdown-menu .dropdown-divider {
    margin: 4px 0;
    border-color: #e9ecef;
}

/* Search Input Container */
.search-input-container {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    padding: 8px 12px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 4px;
}

/* No Results Message */
.no-results {
    padding: 12px 16px;
    color: #6c757d;
    font-style: italic;
    text-align: center;
    font-size: 0.875rem;
}

/* Filter Count Badge */
.filter-count-badge {
    background-color: #007bff;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}

/* Modern Form Group Styles */
.modern-form-group {
    margin-bottom: 1rem;
}

.modern-form-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Positioning Fixes */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.filter-dropdown-menu {
    position: absolute !important;
    transform: none !important;
    will-change: auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .filter-dropdown-menu {
        max-height: 250px;
        max-width: 250px;
    }
    
    .filter-search-input {
        font-size: 0.8rem;
    }
    
    .filter-label {
        font-size: 0.8rem;
    }
}

/* ========================================
   ASSESSMENT DETAILS PAGE STYLES
   ======================================== */

/* Assessment Details Page Layout */
.assessment-details .card {
    transition: transform 0.2s ease-in-out;
}

.assessment-details .card:hover {
    transform: translateY(-2px);
}

.assessment-details .text-purple {
    color: #6f42c1 !important;
}

/* Context and User Item Interactions */
.context-item:hover, .user-item:hover {
    background-color: #f8f9fa !important;
}

.context-item.selected, .user-item.selected {
    background-color: #e3f2fd !important;
}

.user-checkbox {
    margin-right: 10px;
}

#selectedUsersCount {
    font-weight: bold;
    color: #6f42c1;
}

/* Table Hover Effects */
.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

.table-active {
    background-color: #e3f2fd !important;
}

/* ========================================
   AUTOCOMPLETE SEARCH STYLES
   ======================================== */

/* Autocomplete Container */
.autocomplete-container {
    position: relative;
    width: 100%;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

/* Course Item in Dropdown */
.course-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

.course-item:hover {
    background-color: #f8f9fa;
}

.course-item:last-child {
    border-bottom: none;
}

/* Course Name in Dropdown */
.course-name {
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

/* Course Stats in Dropdown */
.course-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.course-stats .badge {
    font-size: 0.75rem;
}

/* Selected Course Display */
.selected-course {
    background-color: #e3f2fd;
    border: 1px solid #6f42c1;
    border-radius: 0.375rem;
    padding: 8px 12px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-course .course-info {
    flex: 1;
}

.selected-course .course-name {
    font-weight: 600;
    color: #6f42c1;
    margin: 0;
}

.selected-course .course-stats {
    margin: 4px 0 0 0;
}

/* Remove Button for Selected Course */
.selected-course .remove-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.selected-course .remove-btn:hover {
    background-color: #f8f9fa;
    color: #dc3545;
}

/* ========================================
   RESPONSIVE DESIGN FOR ASSESSMENT DETAILS
   ======================================== */

@media (max-width: 768px) {
    .autocomplete-dropdown {
        max-height: 250px;
    }
    
    .course-item {
        padding: 10px 12px;
    }
    
    .course-stats {
        gap: 6px;
    }
    
    .course-stats .badge {
        font-size: 0.7rem;
    }
    
    .selected-course {
        padding: 6px 10px;
    }
    
    .selected-course .course-name {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .course-stats {
        flex-direction: column;
        gap: 4px;
    }
    
    .selected-course {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .selected-course .remove-btn {
        align-self: flex-end;
    }
}

/* ===== SEARCH COURSES STYLES ===== */
/* Search courses uses the same styling as my-courses */

/* ===== ANNOUNCEMENT CARDS STYLES ===== */
.announcement-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: #6f42c1;
}

.announcement-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.announcement-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.announcement-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.announcement-card .card-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.announcement-meta {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f3f4;
}

.announcement-meta .row {
    margin: 0;
}

.announcement-meta .col-6 {
    padding: 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.announcement-meta .col-12 {
    padding: 0;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.announcement-meta i {
    color: var(--theme-primary, #6f42c1);
    width: 14px;
    text-align: center;
}

/* Urgency styling for announcements */
.urgency-urgent { color: #dc3545 !important; }
.urgency-warning { color: white !important; }
.urgency-info { color: #17a2b8 !important; }

/* Badge styling for announcements */
.announcement-card .badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 6px;
}

.announcement-card .badge.urgency-urgent {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.announcement-card .badge.urgency-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: white;
}

.announcement-card .badge.urgency-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.announcement-card .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.announcement-card .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.announcement-card .badge.bg-primary {
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
    color: white;
}

/* Card actions */
.announcement-card .card-footer {
    background: #f8f9fa;
    border-top: 1px solid #f1f3f4;
    padding: 0.75rem 1.25rem;
}

.announcement-card .btn {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Acknowledgment confirmation styling */
.acknowledgment-confirmation {
    margin-top: 1rem;
}

.acknowledgment-confirmation .alert {
    border: none;
    border-radius: 8px;
    padding: 1rem;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
}

.acknowledgment-confirmation .alert i {
    color: #28a745;
    font-size: 1.2rem;
}

.acknowledgment-confirmation .alert strong {
    color: #155724;
}

.acknowledgment-confirmation .alert .small {
    color: #6c757d;
}

/* Responsive design for announcement cards */
@media (max-width: 768px) {
    .announcement-card .card-header {
        padding: 0.75rem;
    }
    
    .announcement-card .card-body {
        padding: 1rem;
    }
    
    .announcement-card .card-title {
        font-size: 1rem;
    }
    
    .announcement-card .card-text {
        font-size: 0.85rem;
    }
    
    .announcement-meta .col-6 {
        font-size: 0.8rem;
    }
    
    .acknowledgment-confirmation .alert {
        padding: 0.75rem;
    }
}

/* ===== USER SOCIAL FEED STYLES ===== */
[data-my-social-feed-page="true"] .container {
    margin-left: 250px;
    max-width: calc(100% - 250px);
    transition: margin-left 0.3s ease-in-out;
}

[data-my-social-feed-page="true"] .sidebar.collapsed + .container,
[data-my-social-feed-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* Ensure social feed uses exact same styling as announcements */

/* ✅ Dashboard page container styling */
[data-dashboard-page="true"] .sidebar.collapsed + .container,
[data-dashboard-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

/* ✅ Dashboard Design page container styling */
[data-dashboard-design-page="true"] .sidebar.collapsed + .container,
[data-dashboard-design-page="true"] .sidebar.collapsed ~ .main-content .container {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}
[data-my-social-feed-page="true"] .modern-announcement-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-my-social-feed-page="true"] .modern-announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--theme-primary, #6f42c1);
}
[data-my-social-feed-page="true"] .announcement-card-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

[data-my-social-feed-page="true"] .announcement-title-section {
    flex: 1;
}

[data-my-social-feed-page="true"] .announcement-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

[data-my-social-feed-page="true"] .announcement-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6c757d;
}

[data-my-social-feed-page="true"] .announcement-creator,
[data-my-social-feed-page="true"] .announcement-date,
[data-my-social-feed-page="true"] .announcement-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
[data-my-social-feed-page="true"] .announcement-divider {
    color: #dee2e6;
    font-weight: bold;
}

[data-my-social-feed-page="true"] .announcement-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

[data-my-social-feed-page="true"] .announcement-card-body {
    padding: 1rem 1.5rem;
}

[data-my-social-feed-page="true"] .announcement-description {
    margin-bottom: 1rem;
}

[data-my-social-feed-page="true"] .description-text {
    color: #495057;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em;
}

[data-my-social-feed-page="true"] .announcement-card-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #f1f3f4;
}

/* Enhanced Social Feed View Details Styles */
.post-content-section,
.media-section,
.link-section,
.poll-section,
.tags-section,
.engagement-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f1f3f4;
}

.post-content-section:last-child,
.media-section:last-child,
.link-section:last-child,
.poll-section:last-child,
.tags-section:last-child,
.engagement-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.content-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
    position: relative;
}

.content-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
}

.content-body {
    color: #495057;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
}

.content-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
    border-radius: 12px 12px 0 0;
}

.content-body p {
    margin-bottom: 1rem;
    text-align: justify;
}

.content-body p:last-child {
    margin-bottom: 0;
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6 {
    color: #2c3e50;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content-body h1:first-child,
.content-body h2:first-child,
.content-body h3:first-child,
.content-body h4:first-child,
.content-body h5:first-child,
.content-body h6:first-child {
    margin-top: 0;
}

.content-body ul,
.content-body ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.content-body li {
    margin-bottom: 0.5rem;
}

.content-body blockquote {
    border-left: 4px solid #6f42c1;
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-style: italic;
    color: #6c757d;
}

.content-body code {
    background: #e9ecef;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e83e8c;
}

.content-body pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.content-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.content-body a {
    color: #6f42c1;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.content-body a:hover {
    color: #5a359a;
    border-bottom-color: #6f42c1;
}

.content-body strong,
.content-body b {
    font-weight: 600;
    color: #2c3e50;
}

.content-body em,
.content-body i {
    font-style: italic;
    color: #6c757d;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
}

.content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-body th,
.content-body td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.content-body th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.content-body tr:hover {
    background: #f8f9fa;
}

/* Responsive Design for Post Content */
@media (max-width: 768px) {
    .content-body {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .content-title {
        font-size: 1rem;
    }
    
    .content-body h1,
    .content-body h2,
    .content-body h3,
    .content-body h4,
    .content-body h5,
    .content-body h6 {
        font-size: 1.1rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .content-body blockquote {
        padding: 0.75rem 1rem;
        margin: 0.75rem 0;
    }
    
    .content-body pre {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .content-body table {
        font-size: 0.9rem;
    }
    
    .content-body th,
    .content-body td {
        padding: 0.5rem;
    }
}

.media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.media-item {
    display: inline-block;
}

.media-file {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    min-width: 200px;
}

.link-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 0.5rem;
}

.link-preview h6 {
    margin-bottom: 0.75rem;
    color: #495057;
    font-weight: 600;
}

.poll-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 0.5rem;
}

.poll-preview ul {
    margin-bottom: 1rem;
}

.poll-option {
    padding: 0.5rem 0;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
}

.poll-option:last-child {
    border-bottom: none;
}

.tags-container {
    margin-top: 0.5rem;
}

.engagement-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.engagement-stats span {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.settings-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.settings-info span {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Engagement Section Styles */
.engagement-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.engagement-stats-full {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.engagement-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-width: 100px;
    flex: 1;
    max-width: 120px;
}

.engagement-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.engagement-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.engagement-content {
    text-align: center;
}

.engagement-count {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.engagement-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Engagement Item Colors */
.engagement-item.like .engagement-icon {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.engagement-item.like .engagement-count {
    color: #007bff;
}

.engagement-item.love .engagement-icon {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
}

.engagement-item.love .engagement-count {
    color: #e91e63;
}

.engagement-item.laugh .engagement-icon {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
}

.engagement-item.laugh .engagement-count {
    color: #ff9800;
}

.engagement-item.angry .engagement-icon {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
}

.engagement-item.angry .engagement-count {
    color: #f44336;
}

.engagement-item.comment .engagement-icon {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

.engagement-item.comment .engagement-count {
    color: #4caf50;
}

/* Responsive Design for Engagement */
@media (max-width: 768px) {
    .engagement-stats-full {
        gap: 0.5rem;
    }
    
    .engagement-item {
        min-width: 80px;
        padding: 0.75rem;
    }
    
    .engagement-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .engagement-count {
        font-size: 1.25rem;
    }
    
    .engagement-label {
        font-size: 0.7rem;
    }
}

/* Post Cards */
.modern-announcement-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.modern-announcement-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.announcement-card-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f8f9fa;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.announcement-title-section {
    margin-bottom: 0.75rem;
}

.announcement-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.announcement-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.announcement-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.author-name {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.announcement-time {
    color: #6c757d;
    font-size: 0.85rem;
}

.announcement-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.announcement-card-body {
    padding: 1.5rem;
}

.announcement-description {
    margin-bottom: 1rem;
}

.description-text {
    color: #495057;
    line-height: 1.6;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em; /* 2 lines * 1.6 line-height */
}

.announcement-card-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.post-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-actions .btn {
    border-radius: 20px;
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.post-actions .btn:hover {
    transform: translateY(-1px);
}

.reaction-btn.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Post Media */
.post-media .media-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.post-media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-media img:hover {
    transform: scale(1.05);
}

.media-file {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.media-file:hover {
    background-color: #e9ecef;
}

/* Post Link */
.post-link .card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.post-link .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Post Poll */
.post-poll .card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.post-poll .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

/* Post Tags */
.post-tags {
    margin-top: 1rem;
}

.post-tags .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 15px;
    transition: all 0.2s ease;
}

.post-tags .badge:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* Comments */
.comment-item {
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.comment-item:hover {
    background: #e9ecef;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-content {
    color: #495057;
    line-height: 1.5;
}

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

.modern-modal-header {
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-light, #764ba2) 100%);
    color: white;
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
}

.modern-modal-header .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.modern-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.modern-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modern-modal-body {
    padding: 2rem;
}

/* Event Detail Styles */
.modern-event-detail {
    color: #495057;
}

.detail-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.header-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.detail-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.meta-item {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
}

.meta-divider {
    color: #dee2e6;
    font-weight: bold;
}

.event-info-grid {
    display: grid;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--bs-primary);
}

.info-icon {
    width: 40px;
    height: 40px;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.info-value {
    color: #6c757d;
    line-height: 1.5;
}
/* Responsive Design */
@media (max-width: 768px) {
    [data-my-social-feed-page="true"] .container {
        margin-left: 0;
        max-width: 100%;
        padding: 1rem;
    }
    
    .announcement-card-header,
    .announcement-card-body,
    .announcement-card-footer {
        padding: 1rem;
    }
    
    .announcement-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .post-actions {
        justify-content: center;
    }
    
    .post-actions .btn {
        flex: 1;
        min-width: 0;
    }
    
    .modern-modal-body {
        padding: 1rem;
    }
    
    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-item {
        flex-direction: column;
        text-align: center;
    }
}

/* Poll Carousel Styles */
.polls-carousel {
    position: relative;
}

.polls-container {
    position: relative;
    overflow: hidden;
}

.poll-item {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.poll-item.active {
    display: block;
}

.polls-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.polls-bullets {
    display: flex;
    gap: 8px;
}

.poll-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.poll-bullet:hover {
    background-color: #bbb;
    transform: scale(1.1);
}

.poll-bullet.active {
    background-color: var(--theme-primary-color, #6c63ff);
    border-color: var(--theme-primary-color, #6c63ff);
    transform: scale(1.2);
}

.polls-counter {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.current-poll {
    color: var(--theme-primary-color, #6c63ff);
    font-weight: 600;
}

/* Announcement Carousel Styles */
.announcements-carousel {
    position: relative;
}

.announcements-container {
    position: relative;
    overflow: hidden;
}

.announcement-item {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.announcement-item.active {
    display: block;
}

.announcements-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.announcements-bullets {
    display: flex;
    gap: 8px;
}

.announcement-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.announcement-bullet:hover {
    background-color: #bbb;
    transform: scale(1.1);
}

.announcement-bullet.active {
    background-color: var(--theme-primary-color, #6c63ff);
    border-color: var(--theme-primary-color, #6c63ff);
    transform: scale(1.2);
}

.announcements-counter {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.current-announcement {
    color: var(--theme-primary-color, #6c63ff);
    font-weight: 600;
}

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

/* Social Feed Navigation Styles */
.social-feed-carousel {
    position: relative;
}

.social-posts-container {
    position: relative;
    overflow: hidden;
}

.social-post {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.social-post.active {
    display: block;
}

.social-feed-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.social-feed-bullets {
    display: flex;
    gap: 8px;
}

.social-feed-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.social-feed-bullet:hover {
    background-color: #bbb;
    transform: scale(1.1);
}

.social-feed-bullet.active {
    background-color: var(--theme-primary-color, #6c63ff);
    border-color: var(--theme-primary-color, #6c63ff);
    transform: scale(1.2);
}

.social-feed-counter {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.current-post {
    color: var(--theme-primary-color, #6c63ff);
    font-weight: 600;
}

/* Gadget Footer Styles */
.gadget-footer {
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 15px;
}

.gadget-footer .btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gadget-footer .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.2);
}

.gadget-footer .btn i {
    font-size: 10px;
}

/* Leaderboard Gadget Styles */
.gadget-content-leaderboard {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border-radius: 10px;
    border: 1px solid rgba(108, 99, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.leaderboard-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.15);
    border-color: rgba(108, 99, 255, 0.2);
}

.leaderboard-item.current-user {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.leaderboard-item.current-user:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.leaderboard-item .rank {
    font-weight: 700;
    font-size: 14px;
    min-width: 24px;
    text-align: center;
    background: rgba(108, 99, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
    color: #6c63ff;
}

.leaderboard-item.current-user .rank {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.leaderboard-item .user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leaderboard-item .name {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
}

.leaderboard-item.current-user .name {
    color: white;
}

.leaderboard-item .points {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.leaderboard-item.current-user .points {
    color: rgba(255, 255, 255, 0.9);
}

.leaderboard-item .fas.fa-user {
    font-size: 12px;
    opacity: 0.7;
}

.my-rank-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.my-rank, .my-points {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.my-rank .label, .my-points .label {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my-rank .value, .my-points .value {
    font-size: 16px;
    font-weight: 700;
    color: #0ea5e9;
}

.leaderboard-stats {
    text-align: center;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 8px;
}

.leaderboard-stats small {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

/* Modern Calendar Gadget Styles */
.gadget-content-calendar {
    padding: 0;
    position: relative;
}

.calendar-header {
    margin-bottom: 15px;
}

.calendar-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid rgba(108, 99, 255, 0.1);
}

.calendar-nav-btn {
    background: rgba(108, 99, 255, 0.1);
    border: none;
    color: var(--theme-primary-color, #6c63ff);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.calendar-nav-btn:hover {
    background: var(--theme-primary-color, #6c63ff);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}

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

.calendar-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-grid {
    font-size: 12px;
}

.calendar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #6c757d;
    font-size: 14px;
}

.calendar-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #dc3545;
}

.calendar-error i {
    font-size: 24px;
    margin-bottom: 8px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    font-weight: 600;
    color: #495057;
    padding: 8px 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    min-height: 45px;
    padding: 6px;
    border: 1px solid rgba(108, 99, 255, 0.1);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.calendar-day:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border-color: var(--theme-primary-color, #6c63ff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.15);
}

.calendar-day.empty {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    cursor: default;
    opacity: 0.6;
}

.calendar-day.empty:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: rgba(108, 99, 255, 0.1);
    transform: none;
    box-shadow: none;
}

.calendar-day.today {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.15) 0%, rgba(108, 99, 255, 0.05) 100%);
    border: 2px solid var(--theme-primary-color, #6c63ff);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.calendar-day.today .day-number {
    color: var(--theme-primary-color, #6c63ff);
    font-weight: 700;
}

.calendar-day.has-events {
    border-color: rgba(40, 167, 69, 0.3);
}

.calendar-day.has-events:hover {
    border-color: var(--success-color, #28a745);
}

.day-number {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    text-align: center;
}

.day-events {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
    justify-content: center;
}

.event-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-primary-color, #6c63ff);
    position: relative;
}

.event-indicator.meeting {
    background: #17a2b8;
}

.event-indicator.deadline {
    background: #dc3545;
}

.event-indicator.class {
    background: #28a745;
}

.event-indicator.exam {
    background: #ffc107;
}

.event-indicator.more {
    width: auto;
    height: auto;
    padding: 1px 4px;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 600;
    color: white;
    background: #6c757d;
    min-width: 16px;
    text-align: center;
}

/* Event Modal Styles */
.calendar-event-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Calendar Event Modal Backdrop - Semi-transparent overlay */
.calendar-event-modal .modal-backdrop {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1 !important;
    cursor: pointer;
}

/* Calendar Event Modal Content - Constrained width */
.calendar-event-modal .modal-content {
    position: relative;
    max-width: 600px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 2 !important;
}

/* Calendar Event Modal Header */
.calendar-event-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--theme-primary-color, #6c63ff) 0%, #5a52d5 100%);
    border-bottom: none;
}

.calendar-event-modal .modal-header h6 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
/* Calendar Event Modal Close Button */
.calendar-event-modal .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    font-size: 16px;
}

.calendar-event-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Calendar Event Modal Body */
.calendar-event-modal .modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Day Event Item Styles */
.day-event-item {
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid var(--theme-primary-color, #6c63ff);
    transition: all 0.3s ease;
}

.day-event-item:last-child {
    margin-bottom: 0;
}

/* AI Image Generation Styles */
.ai-image-settings {
    border: 2px solid #343a40;
}
.ai-image-settings .card-header.bg-gradient-dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
}

.ai-image-settings .form-range {
    height: 8px;
}
.ai-image-settings .form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: #343a40;
}

.ai-image-settings .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #343a40;
}

.ai-image-settings #guidance_value,
.ai-image-settings #steps_value {
    font-weight: 600;
    color: #343a40;
    font-size: 16px;
}

.ai-image-preview-card {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ai-image-preview-card:hover {
    border-color: #343a40;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-image-preview {
    width: 100%;
    height: auto;
    display: block;
}

.ai-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ai-image-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.ai-image-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.ai-image-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.ai-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-image-item:hover .ai-image-overlay {
    opacity: 1;
}

.ai-image-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ai-image-actions .btn {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
}

.sdxl-badge {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.image-generation-progress {
    display: none;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 20px;
}

.image-generation-progress.active {
    display: block;
}

.image-generation-progress .progress {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.image-generation-progress .progress-bar {
    background: linear-gradient(90deg, #343a40, #495057);
    animation: progress-animation 2s ease-in-out infinite;
}

@keyframes progress-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.image-settings-summary {
    background: #f8f9fa;
    border-left: 4px solid #343a40;
    padding: 12px;
    margin-top: 20px;
    border-radius: 4px;
}

.image-settings-summary .setting-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}

.image-settings-summary .setting-label {
    font-weight: 600;
    color: #495057;
}

.image-settings-summary .setting-value {
    color: #6c757d;
}

/* Base Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    pointer-events: none;
    max-width: 500px;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
    display: block;
    height: calc(100vh - 1rem);
    content: "";
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

/* Modal Size Variants */
.modal-sm .modal-dialog {
    max-width: 300px;
}

.modal-lg .modal-dialog {
    max-width: 900px;
}

.modal-xl .modal-dialog {
    max-width: 1140px;
}

/* ✅ Large Modal Size for Add Course and Add User Modals */
#addCourseModal .modal-dialog,
#addUserModal .modal-dialog {
    max-width: 95vw;
    width: 1600px;
}

@media (max-width: 1920px) {
    #addCourseModal .modal-dialog,
    #addUserModal .modal-dialog {
        max-width: 95vw;
        width: auto;
    }
}

@media (max-width: 1400px) {
    #addCourseModal .modal-dialog,
    #addUserModal .modal-dialog {
        max-width: 98vw;
        width: auto;
    }
}

@media (max-width: 991.98px) {
    #addCourseModal .modal-dialog,
    #addUserModal .modal-dialog {
        max-width: calc(100% - 2rem);
        margin: 1rem auto;
    }
}

@media (max-width: 575.98px) {
    #addCourseModal .modal-dialog,
    #addUserModal .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    outline: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Standard Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.modal-header .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

/* Standard Modal Body */
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

/* Standard Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.5rem - 1px);
    border-bottom-left-radius: calc(0.5rem - 1px);
}

.modal-footer > * {
    margin: 0.25rem;
}

/* Modal Responsive Design */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100% - 1rem);
    }
    
    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }
    
    .modal-dialog-centered::before {
        height: calc(100vh - 1rem);
    }
}

@media (max-width: 991.98px) {
    .modal-dialog {
        margin: 1rem auto;
        max-width: calc(100% - 2rem);
    }
}

/* Modal Animation */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

/* Ensure modals appear above everything */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Default confirmation modals to small size */
/* Exclude ldapImportModal from this rule */
.modal[id*="confirmation"]:not(#ldapImportModal) .modal-dialog,
.modal[id*="confirm"]:not(#ldapImportModal) .modal-dialog,
.modal[id*="delete"]:not(#ldapImportModal) .modal-dialog,
.modal[id*="warning"]:not(#ldapImportModal) .modal-dialog,
.modal[id*="alert"]:not(#ldapImportModal) .modal-dialog,
.modal.confirmation-modal:not(#ldapImportModal) .modal-dialog,
.modal:not(#ldapImportModal) .modal-title:contains("Confirm"),
.modal:not(#ldapImportModal) .modal-title:contains("Delete"),
.modal:not(#ldapImportModal) .modal-title:contains("Warning") {
    max-width: 300px;
}

/* Specific confirmation modal targeting */
#confirmationModal .modal-dialog,
#confirmModal .modal-dialog,
#deleteModal .modal-dialog,
#warningModal .modal-dialog {
    /* max-width: 300px; */
}

/* Default other modals to large size unless specified otherwise */
.modal:not(.modal-sm):not(.modal-xl):not([id*="confirmation"]):not([id*="confirm"]):not([id*="delete"]):not([id*="warning"]):not([id*="alert"]) .modal-dialog {
    max-width: 900px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Removed duplicate modal-header definition - using the standard one above */

.modal-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}

.modal-close {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(108, 99, 255, 0.1);
    color: var(--theme-primary-color, #6c63ff);
}

.modal-body {
    padding: 16px 24px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.day-event-item {
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    transition: all 0.2s ease;
}

.day-event-item:hover {
    border-color: var(--theme-primary-color, #6c63ff);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.1);
}

.event-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-primary-color, #6c63ff);
    margin-bottom: 4px;
}

.event-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.event-location {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
}

.event-location i {
    font-size: 10px;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 300px;
    max-width: 400px;
    animation: toastSlideIn 0.3s ease-out;
    border-left: 4px solid #6c757d;
}

.toast-success {
    border-left-color: #28a745;
}

.toast-error {
    border-left-color: #dc3545;
}

.toast-warning {
    border-left-color: #ffc107;
}

.toast-info {
    border-left-color: #17a2b8;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.toast-content i {
    font-size: 16px;
}

.toast-success .toast-content i {
    color: #28a745;
}

.toast-error .toast-content i {
    color: #dc3545;
}

.toast-warning .toast-content i {
    color: #ffc107;
}

.toast-info .toast-content i {
    color: #17a2b8;
}

.toast-close {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive calendar adjustments */
@media (max-width: 768px) {
    .calendar-day {
        min-height: 40px;
        padding: 4px;
    }
    
    .day-number {
        font-size: 11px;
    }
    
    .event-indicator {
        width: 5px;
        height: 5px;
    }
    
    .event-indicator.more {
        font-size: 7px;
        padding: 1px 3px;
        min-width: 14px;
    }
    
    .calendar-nav-btn {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 32px;
        height: 32px;
    }
    
    .calendar-title {
        font-size: 14px;
    }
    
    .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-header {
        padding: 16px 20px 12px;
    }
    
    .modal-body {
        padding: 12px 20px 20px;
    }
    
    .toast-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}

/* Events Carousel Navigation Styles */
.events-carousel {
    position: relative;
}

.events-container {
    position: relative;
    overflow: hidden;
}

.event-item {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.event-item.active {
    display: block;
}

.events-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.events-bullets {
    display: flex;
    gap: 8px;
    align-items: center;
}

.event-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.event-bullet:hover {
    background-color: #6c757d;
    transform: scale(1.1);
}

.event-bullet.active {
    background-color: #007bff;
    transform: scale(1.2);
    border-color: rgba(0, 123, 255, 0.3);
}

.events-counter {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.events-counter .current-event {
    color: #007bff;
    font-weight: 600;
}

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

/* Poll Option Styles - Matching polls page */
.modern-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.modern-option:hover {
    border-color: var(--theme-primary-color, #6c63ff);
    background-color: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.1);
}

.option-input {
    margin-right: 12px;
    margin-bottom: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.option-input:checked + .option-label {
    color: var(--theme-primary-color, #6c63ff);
    font-weight: 500;
}

.option-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    margin: 0;
    flex: 1;
    transition: color 0.2s ease;
}

.option-text {
    flex: 1;
}

/* Poll Question Styles */
.question-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background-color: #fafafa;
}

.question-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.options-container {
    margin-top: 10px;
}
/* Legacy poll option styles for backward compatibility */
.poll-option-group {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.option-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-primary-color, #6c63ff);
    margin-bottom: 8px;
}

.option-values {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-value {
    display: flex;
    align-items: center;
}

/* ===== DASHBOARD GRID SYSTEM STYLES ===== */

/* Grid Container - Ensure proper isolation */
.dashboard-grid {
    display: grid !important;
    gap: 15px !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border: 2px dashed #dee2e6 !important;
    border-radius: 12px !important;
    min-height: 600px !important;
    position: relative !important;
    align-items: start !important;
}

.dashboard-grid-desktop {
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: 60px !important;
}
.dashboard-grid-mobile {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 50px !important;
}
/* Grid Cell - Override any conflicting styles */
.dashboard-grid .grid-cell {
    background: #ffffff !important;
    border: 2px dashed #e9ecef !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    color: #6c757d !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
    min-height: 60px !important;
    z-index: 1 !important;
}

.grid-cell:hover {
    border-color: var(--theme-primary, #6a0dad);
    background: #f8f9fa;
}

.grid-cell::before {
    content: attr(data-row) ',' attr(data-col);
    font-weight: 500;
}

.grid-cell::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #6c757d;
    border-radius: 50%;
    opacity: 0.3;
}

.grid-cell:hover::after {
    background: var(--theme-primary, #6a0dad);
    opacity: 1;
}

/* Drag States */
.grid-cell.drag-over {
    background: #e7f3ff !important;
    border-color: var(--theme-primary, #6a0dad) !important;
    border-style: solid !important;
    transform: scale(1.02);
    box-shadow: 0 0 10px rgba(106, 13, 173, 0.3);
}

.grid-cell.valid-drop {
    background: #e7f3ff !important;
    border-color: #28a745 !important;
    border-style: solid !important;
}

.grid-cell.invalid-drop {
    background: #ffe6e6 !important;
    border-color: #dc3545 !important;
    border-style: solid !important;
}
/* Drop Preview */
.drop-preview {
    background: rgba(106, 13, 173, 0.15) !important;
    border: 2px dashed var(--theme-primary, #6a0dad) !important;
    border-radius: 8px !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 10 !important;
    animation: dropPreviewPulse 1s infinite alternate;
}

.drop-preview.valid {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: #28a745 !important;
}

.drop-preview.invalid {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: #dc3545 !important;
}

@keyframes dropPreviewPulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Gadget Styles - Ultra Modern Grid Positioning */
.dashboard-grid .dashboard-gadget {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 120px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.dashboard-gadget:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

.gadget-header {
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-light, #764ba2) 100%) !important;
    color: white !important;
    padding: 18px 24px !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
}

.gadget-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.gadget-title i {
    font-size: 20px !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gadget-actions {
    display: flex !important;
    gap: 8px !important;
}

.gadget-action-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.gadget-action-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.15) translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

.gadget-body {
    padding: 24px !important;
    min-height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(255,255,255,0.95) 100%) !important;
    border-radius: 0 0 20px 20px !important;
    flex: 1 !important;
}

.gadget-preview {
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.gadget-preview i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
    color: #667eea;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.gadget-preview:hover i {
    transform: scale(1.1);
    opacity: 1;
}

.gadget-preview p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
}

/* Dragging States */
.gadget-item.dragging {
    opacity: 0.7;
    transform: rotate(2deg);
    z-index: 1000;
}

/* Layout Controls */
.layout-controls .btn {
    font-size: 12px;
    padding: 6px 12px;
}

.layout-controls .btn.active {
    background: #6a0dad;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-grid {
        padding: 15px;
        gap: 10px;
    }
    
    .gadget-header {
        padding: 10px 12px;
    }
    
    .gadget-title {
        font-size: 13px;
    }
    
    .gadget-body {
        padding: 12px;
        min-height: 80px;
    }
}

/* Hide layout switcher on mobile */
@media (max-width: 576px) {
    .layout-controls {
        display: none;
    }
}

/* Gadget sidebar styling for placed gadgets */
.gadget-item.gadget-placed {
    opacity: 0.5;
    pointer-events: none;
}

.gadget-item.gadget-placed .gadget-name {
    text-decoration: line-through;
}

/* Removed ::after "✓ Added" text - button already shows "Added" */

/* Notification Gadget Styling */
.gadget-content-notifications {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    padding: 0;
    margin: 0;
}

/* Fix for notification gadget body overflow */
.dashboard-gadget[data-gadget-key="notifications"] .gadget-body {
    overflow: visible !important;
    padding: 20px !important;
    min-height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.dashboard-gadget[data-gadget-key="notifications"] .gadget-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.dashboard-gadget[data-gadget-key="notifications"] {
    overflow: visible !important;
}

.dashboard-gadget[data-gadget-key="notifications"] .gadget-body {
    overflow: visible !important;
}

/* Duplicate notification-badge rule removed - using the main one above */

@keyframes notificationPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notifications-list {
    max-height: 280px; /* Approximately 3 notifications height */
    overflow-y: auto; /* Always allow scrolling when content overflows */
    overflow-x: hidden;
    padding-right: 8px;
    width: 100%;
    position: relative;
    /* Always show scrollbar when content overflows */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(102, 126, 234, 0.3) rgba(0,0,0,0.05); /* Firefox */
}

/* Add a subtle gradient fade at the bottom when content can scroll */
.notifications-list::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 8px; /* Account for scrollbar width */
    height: 20px;
    background: linear-gradient(transparent, rgba(248,250,252,0.9));
    pointer-events: none;
    z-index: 1;
    display: block;
    margin-top: -20px;
}

.notifications-list::-webkit-scrollbar {
    width: 4px;
}

.notifications-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 2px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.8) 100%);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    box-sizing: border-box;
}

.notification-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 2px 2px 0;
}

.notification-item.unread {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(255,255,255,0.95) 100%);
    border-color: rgba(102, 126, 234, 0.2);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.notification-item.unread::before {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a24 100%);
    width: 4px;
}

.notification-item.read {
    opacity: 0.8;
}

.notification-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.notification-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    position: relative;
    z-index: 2;
}

.notification-icon.course {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.notification-icon.poll {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.notification-icon.announcement {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.notification-icon.event {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.notification-icon.social {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.notification-icon.info {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #64748b;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-message {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.notification-time {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-time::before {
    content: '🕒';
    font-size: 10px;
}

.notification-item.unread .notification-title {
    font-weight: 700;
    color: #0f172a;
}

.notification-item.unread .notification-message {
    color: #475569;
}

/* Empty state styling */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
}

.empty-state > i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
    color: #cbd5e1;
}

/* Override for icons inside buttons within empty-state */
.empty-state .btn i {
    font-size: inherit;
    margin-bottom: 0;
    opacity: 1;
    color: inherit;
}

.empty-state p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #94a3b8;
}

/* Notification item animations */
.notification-item {
    animation: notificationSlideIn 0.3s ease-out;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive notification styling */
@media (max-width: 768px) {
    .notification-item {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .notification-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .notification-title {
        font-size: 13px;
    }
    
    .notification-message {
        font-size: 12px;
    }
    
    .notification-time {
        font-size: 10px;
    }
}


/* Enhanced SCORM Package Generator Styles */
.lesson-card {
    border-left: 4px solid #3498db;
    transition: all 0.3s;
}

.lesson-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.lesson-card .card-header {
    cursor: pointer;
    user-select: none;
}

.lesson-card .card-header .btn-link {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none !important;
    outline: none !important;
}

.lesson-card .card-header .btn-link:focus,
.lesson-card .card-header .btn-link:active {
    box-shadow: none !important;
    outline: none !important;
}

.lesson-card .card-header:hover {
    background-color: #e9ecef !important;
}

/* Removed custom animation - using Bootstrap's native collapse transition */
.lesson-card .collapse {
    transition: none; /* Let Bootstrap handle the transition */
}

#cost-estimate {
    border-left: 4px solid #17a2b8;
}

#image-cost {
    font-size: 1.5em;
    font-weight: bold;
    color: #17a2b8;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-dark,
.card-header.bg-secondary {
    font-weight: 500;
}

.btn-lg.px-5 {
    min-width: 200px;
}

/* ===== LEADERBOARD STYLES ===== */

/* Leaderboard Card Styles */
.leaderboard-user-card {
    border-radius: 15px;
    overflow: hidden;
}

.leaderboard-user-card .card-header {
    border-bottom: none;
}

/* User Rank Badge */
.user-rank-badge {
    padding: 20px 0;
}

.rank-number {
    font-size: 3rem;
    font-weight: bold;
    color: #6a0dad;
    margin: 10px 0;
}

/* Trophy Colors */
.text-gold {
    color: #FFD700 !important;
}

.text-silver {
    color: #C0C0C0 !important;
}

.text-bronze {
    color: #CD7F32 !important;
}

/* Points Display */
.points-display h3 {
    font-size: 2rem;
    font-weight: bold;
}

/* Leaderboard Card Grid Styles */
.leaderboard-user-item {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

.leaderboard-user-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.leaderboard-user-item .card-body {
    padding: 1.5rem;
}

.current-user-card {
    border: 3px solid #6a0dad !important;
    background: linear-gradient(135deg, #f3e5f5 0%, #ffffff 100%);
}

.current-user-card:hover {
    box-shadow: 0 8px 25px rgba(106, 13, 173, 0.3) !important;
}

.rank-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: bold;
}

.rank-badge h3 {
    font-size: 1.5rem;
    font-weight: 800;
}

.user-avatar-large {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-user-item .points-display {
    padding: 15px;
    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
    border-radius: 10px;
    margin-top: 15px;
}

.leaderboard-user-item .points-display h4 {
    font-size: 1.8rem;
    font-weight: bold;
}
/* User Avatar */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: bold;
    flex-shrink: 0;
}

/* Stats Cards */
.stats-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.stats-card .card-body {
    padding: 1.5rem;
}

.stats-card h3 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Period Selector */
#periodSelector .btn {
    border-radius: 8px;
    padding: 10px 20px;
    margin: 0 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#periodSelector .btn.active {
    background-color: #6a0dad;
    color: white;
    border-color: #6a0dad;
}

#periodSelector .btn:hover:not(.active) {
    background-color: #e9ecef;
    border-color: #6a0dad;
    color: #6a0dad;
}
/* Recent Activity List */
#recentActivity .list-group-item {
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}
#recentActivity .list-group-item:hover {
    border-left-color: #6a0dad;
    background-color: #f8f9fa;
}

/* Leaderboard Settings Page */
#rulesTable tbody tr {
    transition: all 0.3s ease;
}

#rulesTable tbody tr:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#rulesTable tbody td {
    vertical-align: middle;
    color: #212529; /* Ensure text is dark and visible */
}

/* Ensure badges have proper colors */
#rulesTable .badge-info {
    background-color: #17a2b8 !important;
    color: white !important;
}

#rulesTable .badge-info i {
    color: white !important;
}

#rulesTable .badge-secondary {
    background-color: #6c757d !important;
    color: white !important;
}

#rulesTable .badge-secondary i {
    color: white !important;
}

#rulesTable .badge-success {
    background-color: #28a745 !important;
    color: white !important;
}

#rulesTable .badge-success i {
    color: white !important;
}

#rulesTable .badge-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

#rulesTable .badge-warning i {
    color: #212529 !important;
}

/* Rule Status Badge */
.badge-lg {
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
}
/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leaderboard-user-card,
.stats-card,
#leaderboardTable tbody tr {
    animation: fadeIn 0.5s ease-in-out;
}

/* Trophy Pulse Animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.fa-trophy {
    /* animation: pulse 2s infinite; */
}

/* Responsive Design */
@media (max-width: 768px) {
    .rank-number {
        font-size: 2rem;
    }
    
    .points-display h3 {
        font-size: 1.5rem;
    }
    
    .stats-card h3 {
        font-size: 1.8rem;
    }
    
    #periodSelector .btn {
        padding: 8px 15px;
        font-size: 0.85rem;
        margin: 2px;
    }
    
    #leaderboardTable {
        font-size: 0.85rem;
    }
    
    .user-avatar {
        width: 30px;
        height: 30px;
    }
}

/* Modal Enhancements for Leaderboard */
#editRuleModal .modal-header,
#addRuleModal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#editRuleModal .modal-content,
#addRuleModal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

#userHistoryModal .modal-content {
    border-radius: 15px;
}

/* Custom Switch for Rules */
.custom-switch .custom-control-label::before {
    background-color: #dc3545;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
}

/* Badge Styles */
.badge-purple {
    background-color: var(--theme-primary, #6a0dad);
    color: white;
}

.badge-sm {
    padding: 3px 8px;
    font-size: 0.75rem;
}

/* Empty State Styles */
.leaderboard-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #6c757d;
}

.leaderboard-empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* Button Styles */
.btn-outline-purple {
    color: #6a0dad;
    border-color: #6a0dad;
}

.btn-outline-purple:hover {
    background-color: #6a0dad;
    color: white;
    border-color: #6a0dad;
}

.btn-purple {
    background-color: #6a0dad;
    color: white;
    border-color: #6a0dad;
}

.btn-purple:hover {
    background-color: #5a0c9d;
    border-color: #5a0c9d;
    color: white;
}

/* Loading Spinner */
.leaderboard-loading {
    text-align: center;
    padding: 40px;
}

.leaderboard-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    color: #6a0dad;
}

/* User History Modal Enhancements */
.activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 16px;
    color: #6f42c1 !important;
}

.activity-description {
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.activity-description strong {
    color: #6f42c1;
    font-weight: 600;
}

/* Ensure activity description text is visible in recent activity */
#recentActivity .activity-description {
    color: #333 !important;
    font-weight: 500;
}

#recentActivity .activity-description strong {
    color: #6f42c1 !important;
    font-weight: 600;
}

#fullHistoryBody tr:hover {
    background-color: rgba(111, 66, 193, 0.05);
}

#fullHistoryBody .badge {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 20px;
}

/* Modal enhancements */
.modal-lg {
    max-width: 800px;
}

.user-history-modal .modal-body {
    padding: 1.5rem;
}

.user-history-modal .table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.user-history-modal .table td {
    vertical-align: middle;
    padding: 12px 8px;
    border-color: #e9ecef;
}

/* ===== END LEADERBOARD STYLES ===== */

/* ===== AUDIO AI CONTENT GENERATION STYLES ===== */

/* Audio Content Generator Form */
.audio-content-form .card-header {
    font-weight: 600;
}

.audio-content-form .segment-card {
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: box-shadow 0.2s;
}

.audio-content-form .segment-card:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.audio-content-form .segment-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.audio-content-form .char-count {
    font-weight: 600;
    color: #495057;
}

/* Voice Settings Slider */
.audio-content-form .form-range {
    width: 100%;
    height: 0.5rem;
    background: #dee2e6;
    border-radius: 0.25rem;
    outline: none;
    -webkit-appearance: none;
}

.audio-content-form .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: #0d6efd;
    cursor: pointer;
    border-radius: 50%;
}

.audio-content-form .form-range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: #0d6efd;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

/* Cost Estimate Display */
#cost-estimate {
    font-size: 1.25rem;
    font-weight: 700;
    color: #198754;
}

#estimated-time {
    font-weight: 600;
    color: #0d6efd;
}

/* Segment Script Textarea */
.audio-content-form .segment-script {
    resize: vertical;
    min-height: 120px;
}

/* Generate with AI Button */
.audio-content-form .btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

.audio-content-form .btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

/* Connection Status Badge */
#connection-status {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Audio Format Info */
.audio-content-form .form-label small {
    display: block;
    margin-top: 0.25rem;
    color: #6c757d;
}

/* Loading States */
.audio-content-form .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Audio Content Card Styles */
.audio-content-form .card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.audio-content-form .card-header.bg-success,
.audio-content-form .card-header.bg-primary,
.audio-content-form .card-header.bg-info,
.audio-content-form .card-header.bg-warning {
    border-bottom: none;
}

/* Music Style Container */
#music-style-container {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .audio-content-form .segment-card {
        margin-bottom: 1rem;
    }
    
    .audio-content-form .form-range {
        margin-bottom: 0.5rem;
    }
}

/* Animation for Segment Cards */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.audio-content-form .segment-card {
    animation: slideIn 0.3s ease-out;
}

/* ===== END AUDIO AI CONTENT GENERATION STYLES ===== */

/* ===== ENHANCED PRESENTATION AI CONTENT GENERATION STYLES ===== */
#enhanced-presentation-form .card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
    margin-bottom: 1.5rem;
}

#enhanced-presentation-form .card-header {
    font-weight: 600;
}

#enhanced-presentation-form .slide-card {
    transition: all 0.3s ease;
}

#enhanced-presentation-form .slide-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#enhanced-presentation-form .generate-slide-btn {
    transition: all 0.3s ease;
}

#enhanced-presentation-form .generate-slide-btn:hover {
    transform: translateY(-2px);
}

#enhanced-presentation-form #slides-container .card {
    border-left: 3px solid #007bff;
}

#enhanced-presentation-form #slides-container .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

#enhanced-presentation-form .slide-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
}

#enhanced-presentation-form #cost-estimate {
    border-left: 4px solid #17a2b8;
}

#enhanced-presentation-form .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

#enhanced-presentation-form select.form-control,
#enhanced-presentation-form input.form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
}

#enhanced-presentation-form select.form-control:focus,
#enhanced-presentation-form input.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

#enhanced-presentation-form textarea.form-control {
    min-height: 100px;
}

#enhanced-presentation-form [id^="slide"][id$="_preview"] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #dee2e6;
}

#enhanced-presentation-form [id^="slide"][id$="_generated_content"] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ===== END ENHANCED PRESENTATION AI CONTENT GENERATION STYLES ===== */

/* ===== LDAP IMPORT STYLES ===== */
/* Set LDAP Import Modal to default Bootstrap size (500px) */
#ldapImportModal .modal-dialog {
    max-width: 500px;
}

#importLDAPUsersBtn {
    transition: all 0.3s ease;
}

#importLDAPUsersBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#importLDAPUsersBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#ldapImportModal .modal-content {
    border-radius: 10px;
}

#ldapImportModal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0;
}

#ldapImportModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#ldapImportProgress .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

#ldapImportProgressBar {
    height: 25px;
}

#ldapImportResults {
    max-height: 400px;
    overflow-y: auto;
}

#ldapImportErrorsList {
    max-height: 200px;
    overflow-y: auto;
    list-style-type: disc;
    padding-left: 20px;
}

#ldapImportSummary {
    list-style-type: none;
    padding-left: 0;
}

#ldapImportSummary li {
    padding: 5px 0;
    border-bottom: 1px solid #e9ecef;
}

#ldapImportSummary li:last-child {
    border-bottom: none;
}

/* ===== END LDAP IMPORT STYLES ===== */