/* CSS Variables moved to main.css :root - see main.css for defaults */
/* Theme-specific overrides are defined in [data-theme="dark"] and [data-theme="light"] selectors below */

[data-theme="dark"] {
    --primary-color: #BFDBFE;
    --secondary-color: #BFDBFE;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    --info-color: #BFDBFE;
    --background: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
    --bg-gradient-start: #0f1419;
    --bg-gradient-end: #1a1f2e;
    --card-bg: #1e2433;
    --card-border: #2d3748;
    --hero-bg-start: #6366f1;
    --hero-bg-end: #3b82f6;
    --section-header-bg-start: #1a202c;
    --section-header-bg-end: #2d3748;
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --button-bg: #2d3748;
    --button-border: #4a5568;
    --dropdown-bg: #1e2433;
    --thumbnail-placeholder-bg-start: #2d3748;
    --thumbnail-placeholder-bg-end: #4a5568;
    --empty-state-icon-bg-start: #6366f1;
    --empty-state-icon-bg-end: #3b82f6;
    --success-alert-bg-start: #047857;
    --success-alert-bg-end: #059669;
    --widget-bg: #1e2433;
    --detail-item-bg: #2d3748;
    --video-card-bg: #1a202c;
}

[data-theme="light"] {
    --bg-gradient-start: #f8fafc;
    --bg-gradient-end: #f1f5f9;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --text-primary: #1a202c;
    --text-secondary: #718096;
    --text-muted: #a0aec0;
    --hero-bg-start: #6366f1;
    --hero-bg-end: #3b82f6;
    --section-header-bg-start: #f8fafc;
    --section-header-bg-end: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --button-bg: #ffffff;
    --button-border: #e5e7eb;
    --dropdown-bg: #ffffff;
    --thumbnail-placeholder-bg-start: #f1f5f9;
    --thumbnail-placeholder-bg-end: #e2e8f0;
    --empty-state-icon-bg-start: #93C5FD;
    --empty-state-icon-bg-end: #33a3e7;
    --success-alert-bg-start: #34d399;
    --success-alert-bg-end: #10b981;
    --widget-bg: #ffffff;
    --detail-item-bg: #f8fafc;
    --video-card-bg: #f8fafc;
}

/* Arabic Font Support */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] span,
html[lang="ar"] div,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] label,
html[lang="ar"] th,
html[lang="ar"] td,
html[lang="ar"] li,
html[lang="ar"] .btn,
html[lang="ar"] .card,
html[lang="ar"] .nav-link,
html[lang="ar"] .dropdown-item {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* Preserve icon fonts */
html[lang="ar"] i[class*="ph"],
html[lang="ar"] i[class*="icon"],
html[lang="ar"] .icon,
html[lang="ar"] [class*="icon-"] {
    font-family: "phosphor", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Apply theme variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-white {
    background-color: var(--bg-primary) !important;
}

.bg-light, .bg-neutral-25 {
    background-color: var(--bg-secondary) !important;
}

.text-dark, .text-neutral-700 {
    color: var(--text-primary) !important;
}

.text-muted, .text-neutral-500 {
    color: var(--text-secondary) !important;
}

.border, .border-neutral-30, .border-neutral-100 {
    border-color: var(--border-color) !important;
}

.shadow, .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Header and Navigation */
.header {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Sticky header on scroll - Override all possible scroll states */
.header.fixed-header,
.header.header-sticky,
.header.sticky-header,
.header.is-sticky,
.header.scrolled,
.header.header-scrolled,
.header[style*="position: fixed"],
.header[style*="position:fixed"],
.header[style*="background"],
.header[style*="background-color"] {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
}

/* Force override any inline styles */
.header[style] {
    background-color: var(--bg-primary) !important;
}

/* Force header background on any scroll state */
.header * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Cards and Components */
.card {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Form elements */
.form-control, .form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-primary);
    border-color: var(--bs-main-600);
    color: var(--text-primary);
}

/* RTL Support */
[dir="rtl"] .me-1, [dir="rtl"] .me-2, [dir="rtl"] .me-3 {
    margin-left: var(--bs-spacer);
    margin-right: 0;
}

[dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3 {
    margin-right: var(--bs-spacer);
    margin-left: 0;
}

[dir="rtl"] .pe-1, [dir="rtl"] .pe-2, [dir="rtl"] .pe-3 {
    padding-left: var(--bs-spacer);
    padding-right: 0;
}

[dir="rtl"] .ps-1, [dir="rtl"] .ps-2, [dir="rtl"] .ps-3 {
    padding-right: var(--bs-spacer);
    padding-left: 0;
}

[dir="rtl"] .text-end {
    text-align: right !important;
}

[dir="rtl"] .text-start {
    text-align: left !important;
}

/* Header Icons and Controls */
.info-action, .toggle-mobileMenu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.info-action:hover, .toggle-mobileMenu:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.select-icon i {
    color: var(--text-secondary) !important;
}

.common-input {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Select dropdown styling */
.js-example-basic-single {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Footer Styling */
.footer {
    background-color: var(--neutral-900) !important;
    color: var(--text-primary) !important;
}

.footer h4, .footer h5, .footer h6 {
    color: var(--text-primary) !important;
}

.footer p {
    color: var(--text-secondary) !important;
}

.footer a {
    color: var(--text-secondary) !important;
}

.footer a:hover {
    color: var(--bs-main-600) !important;
}

.footer .social-link {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.footer .social-link:hover {
    background-color: var(--bs-main-600) !important;
    color: white !important;
}

.footer .footer-item__title {
    color: var(--text-primary) !important;
}

.footer .form-control {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Bottom Footer */
.bottom-footer {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.bottom-footer p, .bottom-footer .bottom-footer__text {
    color: var(--text-secondary) !important;
}

.bottom-footer a {
    color: var(--text-secondary) !important;
}

.bottom-footer a:hover {
    color: var(--bs-main-600) !important;
}

/* Breadcrumb Styling */
/*.breadcrumb {*/
/*    background-color: var(--bg-secondary) !important;*/
/*}*/

.breadcrumb-item {
    color: #6b7280 !important;
    padding-left: var(--bs-breadcrumb-item-padding-x);
}

[data-theme="dark"] .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7) !important;
}

.breadcrumb-item.active {
    color: #374151 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary) !important;
}

.breadcrumb-item a {
    color: #3b82f6 !important;
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.breadcrumb-item a:hover {
    color: #2563eb !important;
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--bs-main-600) !important;
}

/* Homepage Sections */
.trusted-section, .explore-section, .stats-section {
    background-color: var(--bg-secondary) !important;
}

.trusted-section h2, .explore-section h2, .stats-section h2 {
    color: var(--text-primary) !important;
}

.trusted-section p, .explore-section p, .stats-section p {
    color: var(--text-secondary) !important;
}

/* Brand/Clients Section - "TRUSTED BY" */
.brand {
    background-color: transparent !important;
}

.brand-box {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.brand h5 {
    color: var(--text-secondary) !important;
}

.brand-slider__item img {
    filter: var(--filter-invert, none);
}

[data-theme="dark"] .brand-slider__item img {
    filter: invert(1) brightness(0.8);
}

/* Banner Section */
.banner {
    background-color: var(--bg-primary) !important;
}

.banner h1, .banner h5 {
    color: var(--text-primary) !important;
}

.banner p {
    color: var(--text-secondary) !important;
}

.banner-box h6 {
    color: var(--text-primary) !important;
}

.banner-box span:not(.banner-box__icon) {
    color: var(--text-secondary) !important;
}

/* Explore Course Section */
.explore-course {
    background-color: var(--bg-secondary) !important;
}

.explore-course h2 {
    color: var(--text-primary) !important;
}

.explore-course p {
    color: var(--text-secondary) !important;
}

.nav-tab-wrapper {
    background-color: var(--bg-primary) !important;
}

.nav-pills .nav-link {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-main-600) !important;
    color: white !important;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Hero section */
.hero-section {
    background-color: var(--bg-primary) !important;
}

.hero-section h1, .hero-section h2 {
    color: var(--text-primary) !important;
}

.hero-section p {
    color: var(--text-secondary) !important;
}

/* Slick slider styling */
.slick-list, .slick-track {
    background-color: transparent !important;
}

.slick-slide {
    background-color: transparent !important;
}

.slick-slide > div {
    background-color: transparent !important;
}

.slick-slide .course-item,
.slick-slide .course-card,
.slick-slide .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

/* Force override any slider container backgrounds */
.slick-slider {
    background-color: transparent !important;
}

.slick-slider .slick-list {
    background-color: transparent !important;
}

.slick-slider .slick-track {
    background-color: transparent !important;
}

.slick-slider .slick-slide {
    background-color: transparent !important;
}

.slick-slider .slick-slide > div {
    background-color: transparent !important;
}

/* Specific slider sections */
.brand-slider, .instructor-slider, .testimonials__slider {
    background-color: transparent !important;
}

.brand-slider .slick-slide,
.instructor-slider .slick-slide,
.testimonials__slider .slick-slide {
    background-color: transparent !important;
}

.brand-slider .slick-slide > div,
.instructor-slider .slick-slide > div,
.testimonials__slider .slick-slide > div {
    background-color: transparent !important;
}

/* Override any inline styles on slider elements */
.slick-slider[style],
.slick-slide[style],
.slick-list[style],
.slick-track[style] {
    background-color: transparent !important;
}

/* Course item content */
.course-item__content {
    background-color: var(--bg-primary) !important;
}

.course-item__title, .course-item__title a {
    color: var(--text-primary) !important;
}

.course-item__price {
    color: var(--text-primary) !important;
}

.course-item__author {
    color: var(--text-secondary) !important;
}

/* Rating stars */
.rating .ph-star-fill {
    color: #fbbf24 !important;
}

.rating .ph-star {
    color: var(--text-muted) !important;
}

/* Form Styling */
.form-control, .form-select, .form-check-input {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.form-label {
    color: var(--text-primary) !important;
}

.form-text, .text-muted {
    color: var(--text-muted) !important;
}

/* Input groups */
.input-group-text {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Login/Register forms */
.auth-form {
    background-color: var(--bg-primary) !important;
}

.auth-form .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

/* Account page (login/register) */
.account {
    background-color: var(--bg-primary) !important;
}

.account .bg-main-25 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.account h3, .account h2, .account h1 {
    color: var(--text-primary) !important;
}

.account p {
    color: var(--text-secondary) !important;
}

.account label {
    color: var(--text-primary) !important;
}

.account .common-input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.account .common-input:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--bs-main-600) !important;
    color: var(--text-primary) !important;
}

.account .toggle-password {
    color: var(--text-muted) !important;
}

.account .form-check-label {
    color: var(--text-secondary) !important;
}

.account .form-check-input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.account .form-check-input:checked {
    background-color: var(--bs-main-600) !important;
    border-color: var(--bs-main-600) !important;
}

/* Alert styling */
.alert {
    border-color: var(--border-color) !important;
}

.alert-success {
    background-color: var(--bg-success) !important;
    border-color: #d4edda !important;
    color: var(--text-primary) !important;
}

.alert-danger {
    background-color: var(--bg-secondary) !important;
    border-color: #f5c6cb !important;
    color: var(--text-primary) !important;
}

.alert-info {
    background-color: var(--bg-secondary) !important;
    border-color: #bee5eb !important;
    color: var(--text-primary) !important;
}

/* Button variations */
.btn-outline-primary {
    border-color: var(--bs-main-600) !important;
    color: var(--bs-main-600) !important;
}

/* Tables */
.table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-secondary);
    --bs-table-hover-bg: var(--bg-secondary);
}

.table thead th {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Pagination */
.page-link {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.page-link:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--bs-main-600) !important;
}

.page-item.active .page-link {
    background-color: var(--bs-main-600) !important;
    border-color: var(--bs-main-600) !important;
}

/* Select2 dropdown */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

/* Mobile menu */
.mobile-menu {
    background-color: var(--bg-primary) !important;
}

.mobile-menu__link {
    color: var(--text-primary) !important;
}

.mobile-menu__link:hover {
    background-color: var(--bg-secondary) !important;
}

/* Instructors Section */
.instructor {
    background-color: var(--bg-secondary) !important;
}

.instructor h2 {
    color: var(--text-primary) !important;
}

.instructor p {
    color: var(--text-secondary) !important;
}

.instructor-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.instructor-item h4, .instructor-item h4 a {
    color: var(--text-primary) !important;
}

.instructor-item .text-neutral-700 {
    color: var(--text-secondary) !important;
}

.instructor-item .text-neutral-100 {
    color: var(--text-muted) !important;
}

.instructor-item .border-neutral-50 {
    border-color: var(--border-color) !important;
}

.instructor-item .social-infos__button {
    background-color: var(--bg-primary) !important;
    color: var(--bs-main-600) !important;
}

.instructor-item .social-list__item a {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.instructor-item .social-list__item a:hover {
    background-color: var(--bg-primary) !important;
    color: var(--bs-main-600) !important;
}

/* Instructor slider navigation */
.slick-arrow {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.slick-arrow:hover {
    background-color: var(--bs-main-600) !important;
    border-color: var(--bs-main-600) !important;
    color: white !important;
}

/* General slider improvements */
.slick-dots li button {
    background-color: var(--text-muted) !important;
}

/* Testimonials Section - "What Our Students Say" */
.testimonials {
    background-color: var(--bg-secondary) !important;
}

.testimonials h2, .testimonials h5 {
    color: var(--text-primary) !important;
}

.testimonials p {
    color: var(--text-secondary) !important;
}

.testimonials-item {
    background-color: transparent !important;
}

.testimonials-item h4 {
    color: var(--text-primary) !important;
}

.testimonials-item p {
    color: var(--text-secondary) !important;
}

.testimonials-item span {
    color: var(--text-muted) !important;
}

.testimonials-item .text-neutral-700 {
    color: var(--text-secondary) !important;
}

/* Testimonials navigation arrows */
.testimonials .slick-arrow {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.testimonials .slick-arrow:hover {
    background-color: var(--bs-main-600) !important;
    border-color: var(--bs-main-600) !important;
    color: white !important;
}

/* Certificate Section */
.certificate {
    background-color: var(--bg-primary) !important;
}

.certificate-box {
    background-color: var(--bs-main-600) !important;
}

.certificate__content h2,
.certificate__content h5 {
    color: white !important;
}

.certificate__content .btn-white {
    background-color: white !important;
    color: var(--bs-main-600) !important;
}

.certificate__content .btn-white:hover {
    background-color: var(--bg-primary) !important;
    color: var(--bs-main-600) !important;
}

/* Dark theme adjustments for certificate */
[data-theme="dark"] .certificate__content .btn-white {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .certificate__content .btn-white:hover {
    background-color: white !important;
    color: var(--bs-main-600) !important;
}

/* Counter Section */
.counter {
    background-color: var(--bg-primary) !important;
}

.counter-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.counter-item.bg-main-25,
.counter-item.bg-main-two-25 {
    background-color: var(--bg-secondary) !important;
}

.counter-item h2 {
    color: var(--text-primary) !important;
}

.counter-item span:not(.w-80) {
    color: var(--text-secondary) !important;
}

.counter-item .text-neutral-700 {
    color: var(--text-primary) !important;
}

.counter-item .text-neutral-500 {
    color: var(--text-secondary) !important;
}

/* Counter icon circles */
.counter-item .w-80.h-80 {
    background-color: var(--bg-primary) !important;
    box-shadow: var(--shadow) !important;
}

.counter-item .w-80.h-80.bg-white {
    background-color: var(--bg-primary) !important;
}

/* Notes Pages */
.notes-container,
.notes-index,
.notes-create,
.notes-edit {
    background-color: var(--bg-primary) !important;
}

.note-card,
.note-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.note-card h3,
.note-card h4,
.note-card h5,
.note-item h3,
.note-item h4,
.note-item h5 {
    color: var(--text-primary) !important;
}

.note-card p,
.note-item p,
.note-card .text-muted,
.note-item .text-muted {
    color: var(--text-secondary) !important;
}

.note-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Note editor styling */
.note-editor,
.note-textarea {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.note-editor:focus,
.note-textarea:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--bs-main-600) !important;
    color: var(--text-primary) !important;
}

/* Chat Page */
.chat-container,
.chat-wrapper {
    background-color: var(--bg-primary) !important;
}

.chat-sidebar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.chat-session-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.chat-session-item:hover {
    background-color: var(--bg-tertiary) !important;
}

.chat-session-item.active {
    background-color: var(--bs-main-600) !important;
    color: white !important;
}

.chat-messages {
    background-color: var(--bg-primary) !important;
}

.chat-message {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.chat-message.user {
    background-color: var(--bs-main-600) !important;
    color: white !important;
}

.chat-message.assistant {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.chat-input-container {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.chat-input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.chat-input:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--bs-main-600) !important;
    color: var(--text-primary) !important;
}

/* Student Dashboard Sections */
.dashboard-container {
    background-color: var(--bg-primary) !important;
}

.dashboard-card,
.dashboard-section {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dashboard-card h3,
.dashboard-card h4,
.dashboard-card h5,
.dashboard-section h3,
.dashboard-section h4,
.dashboard-section h5 {
    color: var(--text-primary) !important;
}

.dashboard-card p,
.dashboard-section p {
    color: var(--text-secondary) !important;
}

/* Badge Section */
.badge-section,
.badges-container {
    background-color: var(--bg-primary) !important;
}

.badge-item,
.badge-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.badge-item h4,
.badge-item h5,
.badge-card h4,
.badge-card h5 {
    color: var(--text-primary) !important;
}

.badge-item p,
.badge-card p,
.badge-description {
    color: var(--text-secondary) !important;
}

.badge-earned {
    background-color: var(--bs-success-bg) !important;
    border-color: var(--bs-success-border) !important;
}

.badge-locked {
    background-color: var(--bg-tertiary) !important;
    opacity: 0.6;
}

/* Badge Goals */
.badge-goals,
.goals-section {
    background-color: var(--bg-primary) !important;
}

.goal-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.goal-item h5,
.goal-item .goal-title {
    color: var(--text-primary) !important;
}

.goal-item p,
.goal-description {
    color: var(--text-secondary) !important;
}

.goal-progress {
    background-color: var(--bg-tertiary) !important;
}

.goal-progress-bar {
    background-color: var(--bs-main-600) !important;
}

/* Recent Quiz Results */
.quiz-results,
.recent-quiz-results {
    background-color: var(--bg-primary) !important;
}

.quiz-result-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.quiz-result-item h5,
.quiz-result-item .quiz-title {
    color: var(--text-primary) !important;
}

.quiz-result-item p,
.quiz-score,
.quiz-date {
    color: var(--text-secondary) !important;
}

.quiz-score.high {
    color: var(--bs-success) !important;
}

.quiz-score.medium {
    color: var(--bs-warning) !important;
}

.quiz-score.low {
    color: var(--bs-danger) !important;
}

/* Recent Chat Sessions */
.chat-sessions,
.recent-chat-sessions {
    background-color: var(--bg-primary) !important;
}

.chat-session-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.chat-session-card h5,
.chat-session-title {
    color: var(--text-primary) !important;
}

.chat-session-card p,
.chat-session-preview,
.chat-session-date {
    color: var(--text-secondary) !important;
}

.chat-session-status {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

/* More Specific Dark Theme Overrides */

/* All pages with white/light backgrounds */
/*.bg-white, .bg-light, .bg-main-25, .bg-main-two-25, .bg-neutral-25 {*/
/*    background-color: var(--bg-primary) !important;*/
/*}*/

/* Secondary background variations */
.bg-gray-50, .bg-gray-100, .bg-neutral-50, .bg-neutral-100 {
    background-color: var(--bg-secondary) !important;
}

/* Text color overrides */
.text-dark, .text-neutral-700, .text-neutral-800, .text-neutral-900 {
    color: var(--text-primary) !important;
}

.text-muted, .text-neutral-500, .text-neutral-600 {
    color: var(--text-secondary) !important;
}

/* Border overrides */
.border-neutral-30, .border-neutral-50, .border-neutral-100, .border-gray-200 {
    border-color: var(--border-color) !important;
}

/* Specific Bootstrap components */
.list-group-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Progress bars */
.progress {
    background-color: var(--bg-tertiary) !important;
}

.progress-bar {
    background-color: var(--bs-main-600) !important;
}

/* Badges and pills */
.badge.bg-light, .badge.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Specific dashboard components */
.widget, .widget-card, .stats-card, .metric-card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6,
.widget-card h1, .widget-card h2, .widget-card h3, .widget-card h4, .widget-card h5, .widget-card h6 {
    color: var(--text-primary) !important;
}

/* Sidebar and panels */
.sidebar, .panel, .panel-body {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Tables */
.table tbody tr {
    border-color: var(--border-color) !important;
}

.table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

/* Modals */
.modal-header {
    border-color: var(--border-color) !important;
}

.modal-footer {
    border-color: var(--border-color) !important;
}

/* Specific chat styling */
.chat-container .card,
.chat-sidebar .card,
.chat-main .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.message-bubble {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.message-bubble.sent {
    background-color: var(--bs-main-600) !important;
    color: white !important;
}

/* Specific notes styling */
.notes-grid .card,
.note-item .card,
.note-editor-container {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.note-title, .note-preview {
    color: var(--text-primary) !important;
}

.note-meta, .note-date {
    color: var(--text-secondary) !important;
}

/* Toast notifications */
.toast {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.toast-header {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Accordion */
.accordion-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.accordion-button {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Tabs */
.nav-tabs .nav-link {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.nav-tabs .nav-link.active {
    background-color: #433b3b47 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Specific selectors for common layout patterns */
.container-fluid, .container {
    /*background-color: var(--bg-primary) !important;*/
}

.transparent {
    background-color: transparent !important;
}

.row .col, .row [class*="col-"] {
    background-color: transparent !important;
}

/* Override any remaining white backgrounds */
*[style*="background-color: white"],
*[style*="background-color: #ffffff"],
*[style*="background-color: #fff"] {
    background-color: var(--bg-primary) !important;
}

/* Force text colors for better visibility */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, div {
    color: var(--text-primary) !important;
}

/* Override specific utility classes that might be hardcoded */
.text-black {
    color: var(--text-primary) !important;
}

.text-white {
    color: white !important;
}

/* Specific Quiz Results Section Fix */
[data-theme="dark"] .quiz-results-section {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .quiz-results-section {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-attempts-grid {
    background-color: transparent !important;
}

[data-theme="dark"] .quiz-attempt-card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-attempt-card::before {
    background: linear-gradient(90deg, var(--bs-success), var(--bs-success-dark)) !important;
}

[data-theme="dark"] .quiz-attempt-card.quiz-attempt-failed::before {
    background: linear-gradient(90deg, var(--bs-warning), var(--bs-warning-dark)) !important;
}

[data-theme="dark"] .quiz-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .quiz-course {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-stat {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-attempt-footer {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-time-ago {
    color: var(--text-muted) !important;
}

/* Next Badges Section Dark Theme Fix */
[data-theme="dark"] .next-badges-showcase {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .next-badge-enhanced {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .next-badge-enhanced:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .next-badge-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .next-badge-desc {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .icon-background {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .points-progress {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .progress-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .mini-progress-bar {
    background: var(--border-color) !important;
}

[data-theme="dark"] .activity-requirement {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .motivation-streak {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* Earned Badges Section Dark Theme Fix */
[data-theme="dark"] .badge-showcase {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .earned-badge-card {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .earned-badge-card:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 20px 40px rgba(251, 191, 36, 0.4) !important;
}

[data-theme="dark"] .badge-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .badge-points {
    color: #f59e0b !important;
}

[data-theme="dark"] .badge-earned-date {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .badge-count {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #f59e0b !important;
}

[data-theme="dark"] .badge-progress-indicator {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

/* Empty Badges State Dark Theme Fix */
[data-theme="dark"] .empty-badges-state {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .empty-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .empty-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .floating-badge {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .preview-badge {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .next-badge-preview {
    color: var(--text-primary) !important;
}

/* Badge Summary Dark Theme Fix */
[data-theme="dark"] .badge-summary {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .summary-number {
    color: #f59e0b !important;
}

[data-theme="dark"] .summary-label {
    color: var(--text-secondary) !important;
}

/* Quiz Performance Sidebar Dark Theme Fix */
[data-theme="dark"] .quiz-performance-sidebar {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-stats-mini {
    background: transparent !important;
}

[data-theme="dark"] .quiz-stat-mini {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-stat-mini .stat-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-stat-mini .stat-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .latest-quiz-card {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .latest-quiz-card::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
}

[data-theme="dark"] .quiz-mini-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .quiz-mini-course {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-mini-time {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .quiz-mini-score {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Chat Page Dark Theme Fix */
[data-theme="dark"] .ai-chat-container {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .chat-header-modern {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .logo-text h1 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .logo-text p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .status-indicator {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .compact-tips-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tips-header h5 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tip-badge {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tip-badge:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .chat-sidebar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-header {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .session-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .session-item:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .session-info h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .session-time {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .action-btn {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .empty-sessions {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .empty-icon {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .chat-area {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .chat-area-header {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .header-info h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header-info p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .fullscreen-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .fullscreen-btn:hover {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .messages-container {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .welcome-content h2 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .welcome-content > p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .suggested-prompts h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .prompt-btn {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .prompt-btn:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .ai-row {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .user-row {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .message-text {
    color: var(--text-primary) !important;
}

/* Dark Mode Message Text Sub-elements */
[data-theme="dark"] .message-text h1,
[data-theme="dark"] .message-text h2,
[data-theme="dark"] .message-text h3,
[data-theme="dark"] .message-text h4,
[data-theme="dark"] .message-text h5,
[data-theme="dark"] .message-text h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-text strong {
    color: #4ade80 !important; /* Green accent for dark mode */
}

[data-theme="dark"] .message-text em {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .message-text code {
    background-color: var(--bg-secondary) !important;
    color: #f97316 !important; /* Orange for inline code */
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .message-text pre {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-text pre code {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
}

[data-theme="dark"] .message-text a {
    color: #60a5fa !important; /* Blue for links */
}

[data-theme="dark"] .message-text a:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .message-text blockquote {
    border-left: 4px solid var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .message-text ul,
[data-theme="dark"] .message-text ol {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-text li {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-text table {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-text th,
[data-theme="dark"] .message-text td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-text th {
    background-color: var(--bg-secondary) !important;
}

/* Light Mode Message Text Sub-elements */
[data-theme="light"] .message-text,
[data-theme="light"] .message-text p {
    color: #1f2937 !important;
}

[data-theme="light"] .message-text h1,
[data-theme="light"] .message-text h2,
[data-theme="light"] .message-text h3,
[data-theme="light"] .message-text h4,
[data-theme="light"] .message-text h5,
[data-theme="light"] .message-text h6 {
    color: #111827 !important;
}

[data-theme="light"] .message-text strong {
    color: #059669 !important; /* Green accent for light mode */
}

[data-theme="light"] .message-text em {
    color: #6b7280 !important;
}

[data-theme="light"] .message-text code {
    background-color: #f3f4f6 !important;
    color: #dc2626 !important; /* Red for inline code */
    border: 1px solid #e5e7eb !important;
}

[data-theme="light"] .message-text pre {
    background-color: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

[data-theme="light"] .message-text pre code {
    background-color: transparent !important;
    color: #1f2937 !important;
    border: none !important;
}

[data-theme="light"] .message-text a {
    color: #2563eb !important; /* Blue for links */
}

[data-theme="light"] .message-text a:hover {
    color: #1d4ed8 !important;
}

[data-theme="light"] .message-text blockquote {
    border-left: 4px solid #e5e7eb !important;
    background-color: #f9fafb !important;
    color: #6b7280 !important;
}

[data-theme="light"] .message-text ul,
[data-theme="light"] .message-text ol {
    color: #1f2937 !important;
}

[data-theme="light"] .message-text li {
    color: #1f2937 !important;
}

[data-theme="light"] .message-text table {
    border-color: #e5e7eb !important;
}

[data-theme="light"] .message-text th,
[data-theme="light"] .message-text td {
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
}

[data-theme="light"] .message-text th {
    background-color: #f9fafb !important;
}

/* Code Block Titles - Dark Mode */
[data-theme="dark"] .message-text pre .title,
[data-theme="dark"] .message-text pre code .title,
[data-theme="dark"] .message-text .code-title,
[data-theme="dark"] .message-text .code-header,
[data-theme="dark"] .message-text .code-block-title {
    color: #e5e7eb !important;
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

[data-theme="dark"] .message-text .code-block-wrapper .title,
[data-theme="dark"] .message-text .highlight .title {
    color: #d1d5db !important;
    background-color: #374151 !important;
    border-color: var(--border-color) !important;
}

/* Language labels in code blocks - Dark Mode */
[data-theme="dark"] .message-text pre[class*="language-"]::before,
[data-theme="dark"] .message-text .language-label,
[data-theme="dark"] .message-text .code-lang {
    content: attr(data-language) !important;
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 0 0 4px 4px !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
}

/* Code Block Titles - Light Mode */
[data-theme="light"] .message-text pre .title,
[data-theme="light"] .message-text pre code .title,
[data-theme="light"] .message-text .code-title,
[data-theme="light"] .message-text .code-header,
[data-theme="light"] .message-text .code-block-title {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

[data-theme="light"] .message-text .code-block-wrapper .title,
[data-theme="light"] .message-text .highlight .title {
    color: #1f2937 !important;
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* Language labels in code blocks - Light Mode */
[data-theme="light"] .message-text pre[class*="language-"]::before,
[data-theme="light"] .message-text .language-label,
[data-theme="light"] .message-text .code-lang {
    content: attr(data-language) !important;
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 0 0 4px 4px !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
}

/* Common code block container styling for both themes */
.message-text .code-block-wrapper,
.message-text .highlight {
    position: relative !important;
    margin: 12px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.message-text .code-block-wrapper pre,
.message-text .highlight pre {
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
    position: relative !important;
}

/* Copy button styling for code blocks */
[data-theme="dark"] .message-text .code-copy-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .message-text .code-copy-btn:hover {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .message-text .code-copy-btn {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
}

[data-theme="light"] .message-text .code-copy-btn:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

[data-theme="dark"] .chat-input-area {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-input {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .message-input:focus {
    background: var(--bg-primary) !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .voice-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .voice-btn:hover {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tip-item {
    color: var(--text-muted) !important;
}

/* Chat Modal Dark Theme Fix */
[data-theme="dark"] .modal-content {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-control {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    background: var(--bg-secondary) !important;
    border-color: #3b82f6 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-text {
    color: var(--text-secondary) !important;
}

/* Quiz Results Page Dark Theme Fix */
[data-theme="dark"] .quiz-results-header {
    background: linear-gradient(135deg, #1e293b 0%, #374151 100%) !important;
}

[data-theme="dark"] .quiz-results-content {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .score-breakdown-card,
[data-theme="dark"] .question-review-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-header {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .stat-item {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .question-review-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .question-review-item.correct {
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .question-review-item.incorrect {
    background: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] .question-number-review .number {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .question-text-review {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .option-review {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .option-text-review {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tf-option-review {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .answer-section h5 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .explanation-section {
    background: var(--bg-primary) !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .explanation-section h5 {
    color: #60a5fa !important;
}

[data-theme="dark"] .explanation-section p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .performance-card,
[data-theme="dark"] .quiz-details-card,
[data-theme="dark"] .whats-next-card {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .performance-card h3,
[data-theme="dark"] .quiz-details-card h3,
[data-theme="dark"] .whats-next-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .percentage {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .circle-bg {
    stroke: var(--border-color) !important;
}

[data-theme="dark"] .status-message.success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .status-message.failure {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

[data-theme="dark"] .detail-item {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .detail-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .detail-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .success-header {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

[data-theme="dark"] .failed-header {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
}

[data-theme="dark"] .success-text h4,
[data-theme="dark"] .failed-text h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .success-text p,
[data-theme="dark"] .failed-text p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .btn-action.secondary {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-action.secondary:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .attempts-info {
    background: var(--bg-primary) !important;
}

/* Student Quizzes Index Page Dark Theme Fix */
[data-theme="dark"] .quiz-history-header {
    background: linear-gradient(135deg, #1e293b 0%, #374151 100%) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-stat-card {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quiz-attempts-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .section-header {
    background: transparent !important;
}

[data-theme="dark"] .section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .section-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .quiz-attempt-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .course-name {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .attempt-actions {
    border-color: var(--border-color) !important;
}

/* Attempt Actions Button Text Clarity Fix */
.attempt-actions .btn {
    font-weight: 600 !important;
    font-size: 14px !important;
}

[data-theme="dark"] .attempt-actions .btn {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .attempt-actions .btn-outline-main-600 {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

[data-theme="dark"] .attempt-actions .btn-outline-main-600:hover {
    background: #60a5fa !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

[data-theme="dark"] .attempt-actions .btn-main-600 {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .attempt-actions .btn-main-600:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}

[data-theme="dark"] .badge-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .badge-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

/* Notes Pages Dark Theme Fix */
[data-theme="dark"] body .notes-app {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] body .notes-app .notes-sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-header h5 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar-section {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-section-title {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .sidebar-menu-item {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .sidebar-menu-item:hover {
    background: linear-gradient(135deg, #334155, #475569) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar-menu-item.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .sidebar-menu-item .badge {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-menu-item.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .search-input {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .search-input:focus {
    background: var(--bg-primary) !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .search-icon {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .course-notebook-item {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .course-notebook-item:hover {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .stat-number {
    color: #60a5fa !important;
}

[data-theme="dark"] body .notes-app .notes-main {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .notes-toolbar {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] body .notes-app .notes-main .notes-toolbar {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .toolbar-left h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .view-toggle {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .view-toggle .btn {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .view-toggle .btn.active {
    background: #3b82f6 !important;
    color: white !important;
}

[data-theme="dark"] .notes-content {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .note-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .note-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .note-course {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .note-content-preview {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .note-footer {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .note-date {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .empty-notes {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .empty-notes h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .recent-note-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .recent-note-item .note-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .recent-note-item .note-preview {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .recent-note-item .note-meta {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .empty-state {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* Notes Editing Section & Editor Dark Theme Fix */
[data-theme="dark"] .current-note-info {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .note-title-preview {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .note-course-info {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .note-meta-info {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .note-editor {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .note-header {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .note-title-input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .note-title-input::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .note-title-input:focus {
    background: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .course-info-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .note-meta-controls {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .color-picker {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .note-content-editor {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .note-content-editor textarea {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
}

[data-theme="dark"] .note-content-editor textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .note-content-editor textarea:focus {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Student Profile Page Dark Theme Fix */
[data-theme="dark"] .bg-white {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .border-neutral-30 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-menu-list__link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-menu-list__link:hover {
    background-color: var(--bg-primary) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
    color: white !important;
}

[data-theme="dark"] .nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    color: white !important;
}

[data-theme="dark"] .info-item {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .info-item label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .info-item p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-main-25 {
    background: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .bg-success-25 {
    background: rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .bg-info-25 {
    background: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .bg-warning-25 {
    background: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .text-main-600 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-success {
    color: #10b981 !important;
}

[data-theme="dark"] .text-info {
    color: #a5b4fc !important;
}

[data-theme="dark"] .text-warning {
    color: #f59e0b !important;
}

/* Profile Modal Dark Theme Fix */
[data-theme="dark"] .modal-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control[readonly] {
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .form-select {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-select:focus {
    background: var(--bg-primary) !important;
    border-color: #3b82f6 !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .form-select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .badge {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-main-600 {
    background: #3b82f6 !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-success {
    background: #10b981 !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-info {
    background: #6366f1 !important;
    color: white !important;
}

/* Header Dropdown Dark Theme Fix */
[data-theme="dark"] .navbar .dropdown-menu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .navbar .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar .dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar .dropdown-item:focus {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar .dropdown-divider {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar .dropdown-header {
    color: var(--text-secondary) !important;
}

/* Mega Menu Dark Theme Fix */
[data-theme="dark"] .mega-menu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .mega-menu .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .mega-menu .dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Navigation Submenu Dark Theme Fix */
[data-theme="dark"] .nav-submenu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 0 !important;
}

[data-theme="dark"] .nav-submenu.scroll-sm {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    margin-bottom: 0 !important;
}

/* Reduce submenu spacing */
.nav-submenu {
    margin-bottom: 0 !important;
}

.nav-submenu.scroll-sm {
    margin-bottom: 0 !important;
}

[data-theme="dark"] .nav-submenu .dropdown-item,
[data-theme="dark"] .nav-submenu .nav-link,
[data-theme="dark"] .nav-submenu a {
    color: #ffffff !important;
}

[data-theme="dark"] .nav-submenu .dropdown-item:hover,
[data-theme="dark"] .nav-submenu .nav-link:hover,
[data-theme="dark"] .nav-submenu a:hover {
    background: var(--bg-secondary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-submenu .dropdown-item:focus,
[data-theme="dark"] .nav-submenu .nav-link:focus,
[data-theme="dark"] .nav-submenu a:focus {
    background: var(--bg-secondary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-submenu li a {
    color: #ffffff !important;
}

[data-theme="dark"] .nav-submenu li a:hover {
    color: #ffffff !important;
    background: var(--bg-secondary) !important;
}

/* Global Navigation Submenu Fix for All Pages */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background: var(--bg-secondary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* Specific fix for navigation dropdowns */
[data-theme="dark"] .navbar-nav .dropdown-menu {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar-nav .dropdown-item {
    color: #ffffff !important;
}

[data-theme="dark"] .navbar-nav .dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: #ffffff !important;
}

.quiz-stat-mini {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.quiz-stat-mini .stat-label {
    color: var(--text-secondary) !important;
}

.quiz-stat-mini .stat-value {
    color: var(--text-primary) !important;
}

.latest-quiz-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.quiz-mini-title {
    color: var(--text-primary) !important;
}

.quiz-mini-course {
    color: var(--text-secondary) !important;
}

.quiz-mini-time {
    color: var(--text-muted) !important;
}

/* Theme transition animations */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Button Override - Convert All Solid Buttons to Outline Style with White Background */
.btn-main,
.btn-main-600 {
    background: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    color: #3b82f6 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-info {
    background: #ffffff !important;
    border: 2px solid #0dcaf0 !important;
    color: #0dcaf0 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-success {
    background: #ffffff !important;
    border: 2px solid #198754 !important;
    color: #198754 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-warning {
    background: #ffffff !important;
    border: 2px solid #fd7e14 !important;
    color: #fd7e14 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-danger {
    background: #ffffff !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #ffffff !important;
    border: 2px solid #0d6efd !important;
    color: #0d6efd !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary {
    background: #ffffff !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-dark {
    background: #ffffff !important;
    border: 2px solid #495057 !important;
    color: #495057 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-light {
    background: #ffffff !important;
    border: 2px solid #adb5bd !important;
    color: #adb5bd !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Hover states for all button types */
.btn-main:hover,
.btn-main-600:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-info:hover {
    background: #0dcaf0 !important;
    color: white !important;
    border-color: #0dcaf0 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
}

.btn-success:hover {
    background: #198754 !important;
    color: white !important;
    border-color: #198754 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.btn-warning:hover {
    background: #fd7e14 !important;
    color: white !important;
    border-color: #fd7e14 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253, 126, 20, 0.3);
}

.btn-danger:hover {
    background: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-secondary:hover {
    background: #6c757d !important;
    color: white !important;
    border-color: #6c757d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-dark:hover {
    background: #495057 !important;
    color: white !important;
    border-color: #495057 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(73, 80, 87, 0.3);
}

.btn-light:hover {
    background: #adb5bd !important;
    color: white !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(173, 181, 189, 0.3);
}

.btn-purple {
    color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    background: #ffffff !important;
}

.btn-purple:hover {
    background: #8b5cf6 !important;
    color: white !important;
    border-color: #8b5cf6 !important;
}

/* Special gradient buttons to outline */
.btn-gradient-warning {
    background: #ffffff !important;
    border: 2px solid #f59e0b !important;
    color: #f59e0b !important;
}

.btn-gradient-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: white !important;
    border-color: #f59e0b !important;
}

/* Dark theme button adjustments */
[data-theme="dark"] .btn-main,
[data-theme="dark"] .btn-main-600 {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

[data-theme="dark"] .btn-info {
    color: #22d3ee !important;
    border-color: #22d3ee !important;
}

[data-theme="dark"] .btn-success {
    color: #34d399 !important;
    border-color: #34d399 !important;
}

[data-theme="dark"] .btn-warning {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

[data-theme="dark"] .btn-danger {
    color: #f87171 !important;
    border-color: #f87171 !important;
}

[data-theme="dark"] .btn-secondary {
    color: #9ca3af !important;
    border-color: #9ca3af !important;
}

[data-theme="dark"] .btn-light {
    color: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

/* Dark theme hover states */
[data-theme="dark"] .btn-main:hover,
[data-theme="dark"] .btn-main-600:hover {
    background: #60a5fa !important;
    color: var(--bg-primary) !important;
    border-color: #60a5fa !important;
}

[data-theme="dark"] .btn-info:hover {
    background: #22d3ee !important;
    color: var(--bg-primary) !important;
    border-color: #22d3ee !important;
}

[data-theme="dark"] .btn-success:hover {
    background: #34d399 !important;
    color: var(--bg-primary) !important;
    border-color: #34d399 !important;
}

[data-theme="dark"] .btn-warning:hover {
    background: #fbbf24 !important;
    color: var(--bg-primary) !important;
    border-color: #fbbf24 !important;
}

[data-theme="dark"] .btn-danger:hover {
    background: #f87171 !important;
    color: var(--bg-primary) !important;
    border-color: #f87171 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #9ca3af !important;
    color: var(--bg-primary) !important;
    border-color: #9ca3af !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #e5e7eb !important;
    color: var(--bg-primary) !important;
    border-color: #e5e7eb !important;
}

/* Keep existing outline buttons as they are */
.btn-outline-main,
.btn-outline-main-600,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-primary,
.btn-outline-secondary {
    /* These are already outline buttons, keep their existing styles */
}

.dashboard-hero-card {
    background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
    overflow: hidden;
    position: relative;
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

.success-alert {
    background: linear-gradient(135deg, var(--success-alert-bg-start) 0%, var(--success-alert-bg-end) 100%);
    border-radius: 16px;
    padding: 20px 24px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.danger-alert {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    border-radius: 16px;
    padding: 20px 24px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.courses-management-section {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--card-border);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Removed duplicate - defined in main.css */

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-headline {
    color: white;
    font-weight: 700;
    font-size: 2.5rem;
    margin: 0 0 12px 0;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.empty-state {
    padding: 80px 40px;
    text-align: center;
}

.pagination-section {
    padding: 24px 32px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
    transition: border-color 0.3s ease;
}

.section-actions-menu {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-sm:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.btn-icon-sm.text-danger:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626 !important;
}

.btn-action-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.btn-action-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

.video-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

/* Drag and Drop Styles */
.video-card[draggable="true"] {
    cursor: move;
    transition: all 0.2s;
}

.video-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.videos-grid.drag-over {
    background: #f0f9ff;
    border: 2px dashed #93C5FD;
    border-radius: 12px;
}

.video-section.drag-over {
    background: #f0f9ff;
}

.video-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes fadeInUp {


    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }


}

.video-thumbnail {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background-color: #000;
}

.video-thumbnail img.video-preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills container without distortion */
    display: block;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.video-thumbnail:hover .video-overlay {
    opacity: 1;
}

.video-overlay i {
    font-size: 3rem;
    color: white;
}

.video-card {
    width: 100%;
    max-width: 400px;
}

/* Removed duplicate - defined in main.css */

.course-actions-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.actions-row {
    margin: 0 50%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.actions-row .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-color: #f3f3f3;
    color: #333;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1.2rem;
}

.actions-row .action-btn:hover {
    background-color: #007bff;
    color: #fff;
}

.actions-row .action-btn.publish {
    background-color: #28a745;
    color: #fff;
}

.actions-row .action-btn.delete {
    background-color: #dc3545;
    color: #fff;
}

.badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.85rem;
    background-color: #f3f3f3;
    color: #333;
}

.course-badge.level-beginner {
    background-color: #d1e7ff;
    color: #0056b3;
}

.course-badge.level-intermediate {
    background-color: #fff3cd;
    color: #856404;
}

.course-badge.level-advanced {
    background-color: #f8d7da;
    color: #721c24;
}

.course-badge.published {
    background-color: #28a745;
    color: #fff;
}

.course-badge.draft {
    background-color: #ffc107;
    color: #212529;
}

.course-badge.price .original-price {
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 0.25rem;
}

.course-badge.price .discounted-price {
    font-weight: bold;
}

.course-badge.price .discount-badge {
    background-color: #28a745;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .actions-row, .badges-row {
        justify-content: flex-start;
        gap: 0.3rem;
    }
}

[data-theme="dark"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--card-border);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    color: var(--text-secondary);
}

[data-theme="dark"] .action-divider {
    background: var(--card-border);
}


[data-theme="dark"] .course-thumbnail {
    border-bottom: 1px solid var(--card-border);
}

[data-theme="dark"] .thumbnail-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .view-course-btn {
    background: var(--card-bg);
    color: #066ac9;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .view-course-btn:hover {
    background: var(--input-bg);
    border-color: #066ac9;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .course-status-badge.published {
    background: rgba(34, 197, 94, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .course-status-badge.draft {
    background: rgba(245, 158, 11, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 158, 11, 0.3);
}


[data-theme="dark"] body {
    background: var(--bg-gradient-start);
    color: var(--text-primary);
}

[data-theme="dark"] .course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: #93C5FD;
}

[data-theme="dark"] .course-card:hover .thumbnail-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .thumbnail-image {
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .course-card:hover .thumbnail-image {
    filter: brightness(0.8) contrast(1.2);
    transform: scale(1.05);
}

.course-actions-section {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.course-actions-section .action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    color: #374151 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    opacity: 1 !important;
}

.course-actions-section .action-btn:hover,
.course-actions-section .action-btn:focus,
.course-actions-section .action-btn:active,
.course-actions-section .action-btn:visited {
    border-color: #066ac9 !important;
    background: rgba(6, 106, 201, 0.1) !important;
    color: #066ac9 !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(6, 106, 201, 0.2) !important;
    outline: none !important;
    opacity: 1 !important;
}

.course-actions-section .action-btn .action-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.course-actions-section .action-btn .action-icon i {
    font-size: 18px !important;
    color: #066ac9 !important;
}

.course-actions-section .action-btn:hover .action-icon i,
.course-actions-section .action-btn:focus .action-icon i,
.course-actions-section .action-btn:active .action-icon i {
    color: #0557a8 !important;
}

/* Info items with text labels (non-clickable) */
.course-actions-section .action-btn.info-item {
    width: auto !important;
    padding: 0 16px !important;
    gap: 8px !important;
    cursor: default !important;
}

.course-actions-section .action-btn.info-item:hover,
.course-actions-section .action-btn.info-item:focus {
    background: white !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
    transform: none !important;
    box-shadow: none !important;
}

.course-actions-section .action-btn.info-item .action-icon i {
    font-size: 16px !important;
    color: #6b7280 !important;
}

.course-actions-section .action-btn.info-item:hover .action-icon i {
    color: #6b7280 !important;
}

.course-actions-section .action-btn.info-item .action-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    white-space: nowrap !important;
}

.course-details-section {
    background: #f8fafc;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

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

.detail-card .detail-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #93C5FD 0%, #93C5FD 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-card .detail-icon i {
    font-size: 20px;
    color: white;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] .course-actions-section {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .action-btn {
    background: #334155;
    border-color: #374151 !important;
    color: #94a3b8;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .action-btn:hover,
[data-theme="dark"] .action-btn:focus,
[data-theme="dark"] .action-btn:active {
    background: rgba(6, 106, 201, 0.2) !important;
    border-color: #066ac9 !important;
    color: #66b3ff !important;
}

[data-theme="dark"] .action-btn .action-icon i {
    color: #4d9fff !important;
}

[data-theme="dark"] .action-btn:hover .action-icon i,
[data-theme="dark"] .action-btn:focus .action-icon i,
[data-theme="dark"] .action-btn:active .action-icon i {
    color: #66b3ff !important;
}

/* Dark theme info items */
[data-theme="dark"] .action-btn.info-item {
    background: #334155 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .action-btn.info-item:hover,
[data-theme="dark"] .action-btn.info-item:focus {
    background: #334155 !important;
    border-color: #374151 !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .action-btn.info-item .action-icon i {
    color: #9ca3af !important;
}

[data-theme="dark"] .action-btn.info-item:hover .action-icon i {
    color: #9ca3af !important;
}

[data-theme="dark"] .action-btn.info-item .action-label {
    color: #d1d5db !important;
}

[data-theme="dark"] .course-details-section {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .detail-card {
    background: #111827 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .detail-label {
    color: #9ca3af !important;
}

[data-theme="dark"] .detail-value {
    color: #f9fafb !important;
}

.video-modal {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 100px);
    z-index: 9999;
    backdrop-filter: blur(10px);
    animation: modalFadeIn 0.3s ease;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    margin: 20px auto;
    background: var(--card-bg, #ffffff);
    border-radius: 20px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

.video-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--card-border, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--section-header-bg-start, #f8fafc);
}

.video-modal-title {
    margin: 0;
    color: var(--text-primary, #1a202c);
    font-weight: 600;
    font-size: 1.25rem;
}

.video-modal-close {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #718096);
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-modal-close:hover {
    background: var(--card-border, #e2e8f0);
    color: var(--text-primary, #1a202c);
}

.video-modal-body {
    position: relative;
    background: #000;
    padding: 0;
    max-height: 510px;
}

.video-modal-player {
    width: 100%;
    height: 100%;
    display: block;
}

.video-modal-footer {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg, #ffffff);
    border-top: 1px solid var(--card-border, #e2e8f0);
}

.video-info-text {
    color: var(--text-secondary, #718096);
    font-size: 14px;
}

.btn-modal-secondary {
    background: var(--button-bg, #ffffff);
    border: 1px solid var(--button-border, #e5e7eb);
    color: var(--text-secondary, #718096);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-secondary:hover {
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #1a202c);
    border-color: var(--input-border, #e5e7eb);
}

[data-theme="dark"] .video-modal-content {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .video-modal-header {
    background: var(--section-header-bg-start);
    border-bottom-color: var(--card-border);
}

[data-theme="dark"] .video-modal-footer {
    background: var(--card-bg);
    border-top-color: var(--card-border);
}

[data-theme="dark"] .video-modal-close:hover {
    background: var(--card-border);
}

@keyframes modalFadeIn {


    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }


}

@keyframes modalSlideIn {


    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }


}

.video-overlay {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
}

.video-overlay:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.course-details-page {
    min-height: 100vh;
    padding: 24px 0;
    transition: background 0.3s ease;
}

.course-hero-card {
    background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
    overflow: hidden;
    position: relative;
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

.course-thumbnail-hero {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.course-thumbnail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-thumbnail-hero:hover .thumbnail-overlay {
    opacity: 1;
}

.thumbnail-overlay i {
    font-size: 3rem;
    color: white;
}

.course-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.5;
}

.course-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.course-badge.level-beginner {
    background: rgba(34, 197, 94, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.course-badge.level-intermediate {
    background: rgba(245, 158, 11, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.course-badge.level-advanced {
    background: rgba(239, 68, 68, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.course-badge.category {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.course-badge.published {
    background: rgba(34, 197, 94, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.course-badge.draft {
    background: rgba(245, 158, 11, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.course-badge.price {
    background: rgba(168, 85, 247, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.course-badge.progress-badge {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.stat-card.videos .stat-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
}

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

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

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

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

.stat-card.progress .stat-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #93C5FD 100%);
}

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

.stat-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.05;
}

.stat-card.videos .stat-decoration {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
}

.stat-card.quizzes .stat-decoration {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.students .stat-decoration {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.completed .stat-decoration {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.revenue .stat-decoration {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card.progress .stat-decoration {
    background: linear-gradient(135deg, #93C5FD 0%, #93C5FD 100%);
}

.stat-card.duration .stat-decoration {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.content-section {
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

.section-title-area h3.section-title {
    color: var(--text-primary);
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}

.section-badge {
    background: #93C5FD;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 12px;
}

.section-actions {
    display: flex;
    gap: 12px;
}

.btn-action-primary {
    background: #066ac9;
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 106, 201, 0.3);
    color: white;
    background: #0557a8;
}

.btn-action-secondary {
    background: rgba(6, 106, 201, 0.1);
    border: 1px solid #066ac9;
    color: #066ac9;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-action-secondary:hover {
    background: #066ac9;
    transform: translateY(-2px);
    color: white;
}

.btn-action-ai {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-action-ai:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    color: white;
}

.learning-outcomes {
    padding: 32px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-left: 4px solid #93C5FD;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: color 0.3s ease;
}

.videos-content {
    padding: 32px;
}

.video-section {
    margin-bottom: 40px;
}

.video-section:last-child {
    margin-bottom: 0;
}

.video-section-header {
    margin-bottom: 24px;
}

.section-name {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}

.section-name i {
    color: #93C5FD;
}

.section-count {
    color: var(--text-secondary);
    font-size: 14px;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    transition: color 0.3s ease;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

.video-card {
    background: var(--video-card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #93C5FD;
}

.video-card-header {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-preview-img.default-thumbnail {
    background: var(--card-border);
}

.video-card:hover .video-overlay {
    opacity: 1;
}

.video-overlay i {
    font-size: 3rem;
    color: white;
}

.status-label {
    font-size: 14px;
    font-weight: 500;
}

.ph-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {


    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }


}

.video-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-actions {
    opacity: 1;
}

.transcribe-btn:hover {
    color: #9f7aea;
    box-shadow: 0 0 0 2px rgba(159, 122, 234, 0.2);
}

.transcribe-btn.processing {
    color: #f59e0b;
    animation: pulse 2s infinite;
}

.transcribe-btn.has-transcript {
    color: #10b981;
}

.transcribe-btn.has-transcript:hover {
    color: #059669;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.ai-help-btn:hover {
    color: #93C5FD;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.notes-btn:hover {
    color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.delete-btn:hover {
    color: #e53e3e;
    box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
}

@keyframes pulse {


    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }


}

.video-card-body {
    padding: 20px;
}

.video-order {
    background: #93C5FD;
    color: white;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    display: inline-block;
}

.video-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.video-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.video-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.video-badge.free {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.video-badge.processed {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.video-badge.processing {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.video-badge.transcript-completed {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.video-badge.transcript-processing {
    background: rgba(168, 85, 247, 0.1);
    color: #93C5FD;
}

.video-badge.transcript-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.quizzes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    padding: 32px;
}

.quiz-status-indicator.inactive {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.quiz-actions {
    display: flex;
    gap: 8px;
}

.quiz-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.quiz-badge.active {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.quiz-badge.inactive {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.quiz-badge.required {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.widget {
    background: var(--widget-bg);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.widget-header {
    padding: 24px 24px 16px;
    background: linear-gradient(135deg, var(--section-header-bg-start) 0%, var(--section-header-bg-end) 100%);
    border-bottom: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.widget-title {
    color: var(--text-primary);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.widget-title i {
    color: #93C5FD;
    font-size: 1.25rem;
}

.widget-body {
    padding: 24px;
}

.action-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.action-button.publish {
    border-color: #34d399;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.action-button.publish:hover {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.action-button.unpublish {
    border-color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.action-button.unpublish:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
}

.action-button.edit {
    border-color: #93C5FD;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.action-button.edit:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.action-button.delete {
    border-color: #f87171;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.action-button.delete:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
}

.action-button.publish .action-icon {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
}

.action-button.unpublish .action-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.action-button.edit .action-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    color: white;
}

.action-button.statistics {
    border-color: #93C5FD;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.action-button.statistics:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.action-button.statistics .action-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #BFDBFE 100%);
    color: white;
}

.action-button.delete .action-icon {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--detail-item-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.detail-item:hover {
    background: var(--section-header-bg-start);
    border-color: var(--input-border);
}

.detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.detail-icon i {
    display: block !important;
    line-height: 1 !important;
    font-size: 18px !important;
    color: white !important;
    font-family: "Phosphor", sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

@keyframes fadeInUp {


    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }


}

.stat-card,
.video-card,
.quiz-card,
.widget {
    animation: fadeInUp 0.6s ease-out;
}

/* Removed duplicate utility - defined in main.css */

[data-theme="dark"] .course-details-page {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: var(--text-primary);
}

[data-theme="dark"] .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    border-color: #93C5FD;
}

[data-theme="dark"] .quiz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    border-color: #93C5FD;
}

[data-theme="dark"] .widget:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .video-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.transcription-content {
    padding: 15px;
    min-height: 400px;
}

.transcription-status {
    text-align: center;
    padding: 40px 20px;
}

.status-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.status-message {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 300px;
}

.transcription-result {
    padding: 0;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--card-border);
}

.result-header h5 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.result-actions {
    display: flex;
    gap: 12px;
}

.btn-copy, .btn-save {
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy:hover {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
}

.btn-save:hover {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.transcription-text {
    margin-top: 16px;
}

.transcription-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 300px;
    padding: 16px;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
}

.transcription-textarea:focus {
    outline: none;
    border-color: #9f7aea;
    box-shadow: 0 0 0 3px rgba(159, 122, 234, 0.1);
}

.transcription-error {
    text-align: center;
    padding: 40px 20px;
}

.error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.error-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.error-message {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.btn-retry {
    background: #ef4444;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

[data-theme="dark"] .transcription-textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .transcription-textarea:focus {
    border-color: #9f7aea;
}

[data-theme="dark"] .btn-copy,
[data-theme="dark"] .btn-save {
    background: var(--button-bg);
    border-color: var(--button-border);
    color: var(--text-secondary);
}

.attachments-preview {
    padding: 32px;
}

.attachments-grid-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.attachment-preview-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.attachment-preview-card:hover {
    background: var(--section-header-bg-start);
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.attachment-preview-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.attachment-preview-info {
    flex: 1;
    min-width: 0;
}

.attachment-preview-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.attachment-preview-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.attachment-preview-meta span {
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.attachment-preview-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.attachment-preview-card:hover .attachment-preview-actions {
    opacity: 1;
}

.preview-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #93C5FD;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 12px;
}

.preview-action-btn:hover {
    background: #93C5FD;
    color: white;
    transform: scale(1.1);
}

.preview-action-btn.download:hover {
    background: #10b981;
}

.attachments-view-more {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
}

[data-theme="dark"] .attachment-preview-card:hover {
    background: var(--section-header-bg-start);
    border-color: #93C5FD;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] .preview-action-btn {
    background: rgba(102, 126, 234, 0.2);
    color: #9ca3af;
}

[data-theme="dark"] .preview-action-btn:hover {
    background: #93C5FD;
    color: white;
}

.modern-statistics-dashboard {
    background: var(--background);
    min-height: 100vh;
    padding-bottom: 2rem;
}

.dashboard-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    margin-bottom: 2rem;
}


.course-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.page-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1rem;
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modern.btn-primary {
    background: #066ac9;
    color: white;
}

.btn-modern.btn-primary:hover {
    background: #0557a8;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-modern.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-modern.btn-outline:hover {
    background: var(--surface);
    border-color: #066ac9;
    color: #066ac9;
}

.dashboard-content {
    padding: 0 1.5rem;
}

.metrics-section {
    margin-bottom: 3rem;
}

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

.metric-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.metric-card.success::before {
    background: linear-gradient(90deg, var(--success-color), #059669);
}

.metric-card.warning::before {
    background: linear-gradient(90deg, var(--warning-color), #d97706);
}

.metric-card.info::before {
    background: linear-gradient(90deg, var(--info-color), #2563eb);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.metric-icon.students {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.metric-icon.revenue {
    background: linear-gradient(135deg, var(--success-color), #059669);
}

.metric-icon.views {
    background: linear-gradient(135deg, var(--info-color), #2563eb);
}

.metric-icon.rating {
    background: linear-gradient(135deg, var(--warning-color), #d97706);
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}

.metric-trend.up {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.metric-trend.stable {
    background: rgba(156, 163, 175, 0.1);
    color: var(--text-muted);
}

.metric-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

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

.analytics-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.analytics-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.analytics-card.span-2 {
    grid-column: span 2;
}

.card-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover,
.btn-icon.active {
    background: #066ac9;
    color: white;
    border-color: #066ac9;
}

.card-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.chart-container {
    position: relative;
    height: 300px;
}

.quiz-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quiz-stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius-sm);
}

.stat-number.success {
    color: var(--success-color);
}

.stat-number.danger {
    color: var(--danger-color);
}

.stat-number.primary {
    color: var(--primary-color);
}

.rating-overview {
    text-align: center;
}

.rating-score {
    margin-bottom: 1.5rem;
}

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    color: #fbbf24;
    font-size: 1.25rem;
}

.rating-breakdown-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.rating-number {
    width: 20px;
    font-weight: 500;
    color: var(--text-primary);
}

.rating-bar-small {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.rating-fill-small {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.3s ease;
}

.rating-count-small {
    width: 30px;
    text-align: right;
    font-weight: 500;
    color: var(--text-secondary);
}

.students-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.student-item-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--background);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.student-item-compact:hover {
    background: var(--border);
}

.student-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.student-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.student-info-compact {
    flex: 1;
}

.student-name-small {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.student-score-small {
    font-weight: 600;
    color: var(--success-color);
    font-size: 0.875rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
    transition: all 0.2s;
}

.activity-item:hover {
    background: var(--border);
    transform: translateX(4px);
}

.activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-time {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.activity-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.empty-state-small {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-state-small i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state-small p {
    margin: 0;
    font-size: 0.875rem;
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    background: transparent;
    padding: 0;
}

.attachment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-color: #e2e8f0;
}

.attachment-card:hover {
    background: #ffffff;
    border-color: #93C5FD;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .attachment-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .attachment-card:hover {
    background: #334155;
    border-color: #BFDBFE;
    box-shadow: 0 12px 40px rgba(96, 165, 250, 0.2);
}


.attachment-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #93C5FD 0%, #1d4ed8 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.attachment-icon i {
    font-size: 24px;
    color: white;
    display: block;
    line-height: 1;
}

.attachment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.attachment-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.4;
    word-break: break-word;
}

.attachment-filename {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.attachment-description {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.attachment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
}

.attachment-meta span {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
}

[data-theme="dark"] .attachment-title {
    color: #f1f5f9;
}

[data-theme="dark"] .attachment-filename {
    color: #94a3b8;
    background: #374151;
}

[data-theme="dark"] .attachment-description {
    color: #94a3b8;
}

[data-theme="dark"] .attachment-meta {
    color: #94a3b8;
}

[data-theme="dark"] .attachment-meta span {
    background: #7DD3FC;
    color: #93c5fd;
}

.attachment-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

[data-theme="dark"] .attachment-actions {
    border-top-color: #334155;
}

.action-btn.download:hover {
    background: #059669;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

.action-btn.edit:hover {
    background: #93C5FD;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.action-btn.delete:hover {
    background: #dc2626;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

.form-control {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.upload-area {
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: var(--bs-main-600);
    background: var(--bs-main-25);
}

.upload-area.dragover {
    border-color: var(--bs-main-600);
    background: var(--bs-main-25);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-content {
    pointer-events: none;
}

.upload-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--bs-main-600) 0%, var(--bs-main-500) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.upload-icon i {
    font-size: 36px;
    color: white;
}

.upload-text h4 {
    color: #374151;
    margin-bottom: 8px;
    font-weight: 600;
}

.upload-text p {
    color: #6b7280;
    margin-bottom: 12px;
}

.file-preview {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    background: #f8f9fa;
    margin-top: 16px;
}

.preview-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.file-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--bs-main-600) 0%, var(--bs-main-500) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon i {
    font-size: 24px;
    color: white;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.file-size {
    font-size: 13px;
    color: #6b7280;
}

.remove-file {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #dc3545;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-file:hover {
    background: #dc2626;
}

.gy-24 > * {
    margin-bottom: 1.5rem;
}

small.text-sm {
    font-size: 12px;
    opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #818cf8;
        --secondary-color: #a78bfa;
        --success-color: #34d399;
        --warning-color: #fbbf24;
        --danger-color: #f87171;
        --info-color: #BFDBFE;
        --background: #0f172a;
        --surface: #1e293b;
        --border: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #64748b;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
    }
}

@media (max-width: 1024px) {
    .hero-stats {
        justify-content: center;
    }

    .stat-badge {
        flex: 1;
        min-width: 140px;
    }

    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .dashboard-hero-card .card-body {
        padding: 24px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-actions {
        align-items: stretch;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        justify-content: center;
        width: 100%;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 24px;
    }

    .search-input {
        width: 100%;
    }

    .search-filter-group {
        flex-direction: column;
    }

    .courses-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .hero-stats {
        flex-direction: column;
    }

    .metadata-row {
        flex-direction: column;
        gap: 8px;
    }

    .empty-state {
        padding: 40px 20px;
    }

    .empty-state-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-color-scheme: dark) {
    .course-actions-section {
        background: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
    }

    .action-btn:hover,
    .action-btn:focus,
    .action-btn:active {
        background: #1e3a8a !important;
        border-color: #93C5FD !important;
        color: #dbeafe !important;
    }

    .action-btn .action-icon i {
        color: #BFDBFE !important;
    }

    .action-btn:hover .action-icon i,
    .action-btn:focus .action-icon i,
    .action-btn:active .action-icon i {
        color: #dbeafe !important;
    }

    /* Info items - dark theme media query */
    .action-btn.info-item {
        background: #111827 !important;
        border-color: #374151 !important;
    }

    .action-btn.info-item:hover,
    .action-btn.info-item:focus {
        background: #111827 !important;
        border-color: #374151 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .action-btn.info-item .action-icon i {
        color: #9ca3af !important;
    }

    .action-btn.info-item:hover .action-icon i {
        color: #9ca3af !important;
    }

    .action-btn.info-item .action-label {
        color: #d1d5db !important;
    }

    .course-details-section {
        background: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
    }

    .detail-card {
        background: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
    }

    .detail-label {
        color: #9ca3af !important;
    }

    .detail-value {
        color: var(--text-primary) !important;
    }
}

@media (max-width: 768px) {
    .action-buttons-row {
        gap: 8px;
    }

    .action-btn {
        padding: 10px 14px;
        font-size: 12px;
        border-radius: 20px;
    }

    .action-btn .action-icon i {
        font-size: 12px;
    }

    .details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .course-actions-section,
    .course-details-section {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
        margin: 2% auto;
    }

    .video-modal-header {
        padding: 16px 20px;
    }

    .video-modal-body {
        max-height: 250px;
    }

    .video-modal-footer {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
    }

    .video-modal-player {
        max-height: 50vh;
    }
}

@media (max-width: 1024px) {
    .course-header {
        flex-direction: column;
        gap: 16px;
    }

    .course-thumbnail-hero {
        width: 100px;
        height: 100px;
    }

    .course-title {
        font-size: 2rem;
    }

    .hero-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .section-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .section-actions {
        align-self: stretch;
        gap: 8px;
    }

    .section-actions .btn,
    .section-actions .dropdown {
        flex: 1;
        min-width: fit-content;
    }

    .section-actions .btn {
        justify-content: center;
        font-size: 13px;
        padding: 10px 12px;
    }

    .section-actions .dropdown .btn {
        width: 100%;
    }

    .course-badges {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .attachments-grid-preview {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .attachment-preview-card {
        padding: 12px;
    }

    .attachment-preview-actions {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .transcription-content {
        padding: 16px;
    }

    .result-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .result-actions {
        justify-content: center;
    }

    .status-icon,
    .error-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .transcription-textarea {
        min-height: 100px;
        max-height: 250px;
    }
}

@media (max-width: 1200px) {
    .analytics-card.span-2 {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .course-info {
        margin-bottom: 1rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

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

    .dashboard-content {
        padding: 0 1rem;
    }
}

@media print {
    .btn-modern,
    .card-actions {
        display: none !important;
    }

    .analytics-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .metric-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 10px 25px -3px rgba(129, 140, 248, 0.2), 0 4px 6px -4px rgba(129, 140, 248, 0.1);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .analytics-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 6px -1px rgba(129, 140, 248, 0.2), 0 2px 4px -2px rgba(129, 140, 248, 0.1);
    }
}


@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-modern.btn-primary:hover {
        background: #93C5FD;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(129, 140, 248, 0.3), 0 2px 4px -2px rgba(129, 140, 248, 0.3);
    }
}

@media (min-width: 1400px) {
    .attachments-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .attachments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .attachments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .attachments-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .attachment-card {
        padding: 20px;
    }

    .attachment-meta {
        flex-direction: column;
        gap: 6px;
    }

    .attachment-meta span {
        display: block;
        text-align: center;
    }

    .attachment-actions {
        justify-content: center;
        gap: 12px;
    }

    .action-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .attachments-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .container-fluid {
        padding: 40px 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .upload-area {
        padding: 24px;
    }

    .upload-icon {
        width: 60px;
        height: 60px;
    }

    .upload-icon i {
        font-size: 28px;
    }

    .row.gy-24 > * {
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   STUDENT COURSES STYLES (Browse & Enrolled)
   ============================================ */

/* Additional color variables for student pages */
:root {
    --hero-bg-color: #f0fdf4;
    --hero-primary-color: #059669;
    --hero-secondary-color: #ecfdf5;
}

/* Hero Actions */
.hero-actions-small {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero-icon-large {
    width: 100%;
    height: 100%;
    min-height: 150px;
}

/* Hero Buttons */
.btn-hero-primary {
    background-color: white;
    color: #066ac9;
    border: 1px solid white;
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Course Cards for Student Pages */
.course-card-new {
    background-color: white;
    border-radius: 16px;
    border: 1px solid var(--bs-neutral-300, #d1d5db);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.course-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

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

.course-level-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}

.level-beginner {
    color: #10b981;
    border: 1px solid #10b981;
}

.level-intermediate {
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.level-advanced {
    color: #ef4444;
    border: 1px solid #ef4444;
}

.course-status-badge.completed {
    background-color: rgba(16, 185, 129, 0.95);
    color: white;
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    width: auto;
    max-width: max-content;
}

.course-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-title a {
    color: var(--bs-neutral-700, #374151);
    text-decoration: none;
    transition: color 0.2s;
}

.course-title a:hover {
    color: var(--bs-main-600, #10b981);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    color: var(--bs-main-600, #10b981);
}

.meta-item span,
.meta-item a {
    color: var(--bs-neutral-500, #6b7280);
    font-size: 0.875rem;
}

.meta-item a {
    text-decoration: none;
    transition: color 0.2s;
}

.meta-item a:hover {
    color: var(--bs-main-600, #10b981);
}

.course-price span {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-success-600, #10b981);
}

/* Progress Bar Styles */
.progress {
    background-color: var(--bs-neutral-100, #f3f4f6);
}

/* Responsive Adjustments for Student Pages */
@media (max-width: 991.98px) {
    .hero-actions-small {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Dark Mode for Student Course Pages */
[data-theme="dark"] .dashboard-hero-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .hero-background-pattern {
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1) rotate(0)"><rect id="r" width="100%" height="100%" fill="hsla(220, 26%, 14%, 1.00)"/><circle cx="10" cy="10" r="1.5" fill="hsla(220, 26%, 20%, 1.00)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>');
    opacity: 0.5;
}

[data-theme="dark"] .hero-title {
    color: var(--text-primary);
}

[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-hero-primary {
    background-color: #066ac9;
    color: white;
}

[data-theme="dark"] .btn-hero-primary:hover {
    background-color: #0557a8;
    color: white;
}

[data-theme="dark"] .btn-hero-secondary {
    background-color: var(--bg-primary);
    color: var(--bs-main-600);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-hero-secondary:hover {
    background-color: var(--bs-main-600);
    color: white;
    border-color: var(--bs-main-600);
}

[data-theme="dark"] .course-card-new {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .course-card-new:hover {
    box-shadow: 0 12px 20px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .thumbnail-placeholder {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-muted);
}

[data-theme="dark"] .course-category {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .course-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .course-title a:hover {
    color: var(--bs-main-600);
}

[data-theme="dark"] .course-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .course-metadata {
    border-color: var(--border-color);
}

[data-theme="dark"] .meta-item span,
[data-theme="dark"] .meta-item a {
    color: var(--text-secondary);
}

[data-theme="dark"] .meta-item a:hover {
    color: var(--bs-main-600);
}

[data-theme="dark"] .course-footer {
    border-color: var(--border-color);
}

[data-theme="dark"] .course-price span {
    color: var(--bs-success-600);
}

/* Soft Badge Styles */
.badge.bg-success-soft {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge.bg-neutral-soft {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.badge.text-success {
    color: #059669 !important;
}

.badge.text-neutral-600 {
    color: #6b7280 !important;
}

/* Video Card Enhancements */
.video-title-card {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.video-description-card {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.video-footer-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.video-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(16, 185, 129, 0.95);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.video-status-badge.completed {
    background: rgba(16, 185, 129, 0.95);
}

.video-status-badge i {
    font-size: 0.875rem;
}

/* ============================================
   COMPACT COURSE HEADER LAYOUT
   ============================================ */

.compact-course-header {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    border-radius: 20px;
    padding: 48px 48px;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
    min-height: 200px;
}


.course-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-top: 24px;
}

.course-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.course-thumbnail-compact {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-thumbnail-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-info-compact {
    flex: 1;
    min-width: 0;
}

.course-title-compact {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.course-meta-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.badge-compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.badge-compact.level-beginner {
    background: rgba(34, 197, 94, 0.25);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-compact.level-intermediate {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-compact.level-advanced {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-compact.category {
    background: rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.meta-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.meta-text i {
    font-size: 1rem;
}

.course-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-btn-compact {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    cursor: pointer;
    flex-shrink: 0;
}

.action-btn-compact:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    color: white;
}

.action-btn-compact i {
    font-size: 1.25rem;
}

/* Progress Circle */
.progress-circle-wrapper {
    position: relative;
    width: 96px;
    height: 96px;
}

.progress-circle {
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 6;
}

.progress-circle-bar {
    fill: none;
    stroke: #10b981;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

/* ============================================
   COMPACT STATS BAR
   ============================================ */

.stats-bar-compact {
    background: white;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
}

.stat-item-compact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon-compact {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon-compact.videos-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    color: white;
}

.stat-icon-compact.watched-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-icon-compact.quizzes-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-icon-compact.duration-icon {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.stat-icon-compact.price-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #93C5FD 100%);
    color: white;
}

.stat-info-compact {
    display: flex;
    flex-direction: column;
}

.stat-number-compact {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.stat-label-compact {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .course-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .course-header-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .quick-actions {
        order: -1;
        width: 100%;
        justify-content: flex-start;
    }

    .stats-bar-compact {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .compact-course-header {
        padding: 16px;
    }

    .course-title-compact {
        font-size: 1.25rem;
    }

    .course-header-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-bar-compact {
        flex-direction: column;
        gap: 12px;
    }

    .stat-divider {
        display: none;
    }

    .stat-item-compact {
        width: 100%;
        padding: 8px;
        background: var(--bg-secondary);
        border-radius: 8px;
    }
}

/* Dark mode support */
[data-theme="dark"] .stats-bar-compact {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   COMPACT VIDEO PLAYER
   ============================================ */

.compact-player {
    margin-bottom: 24px;
}

.section-header-compact {
    margin-bottom: 16px;
}

.section-title-compact {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.section-title-compact i {
    color: var(--bs-main-600);
    font-size: 1.25rem;
}

.video-player-wrapper-compact {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.video-player-container #video-player {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Compact video info panel */
.video-info-compact {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.video-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.video-info-compact .video-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.video-info-compact .video-description {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .video-player-wrapper-compact {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .video-info-compact {
    background: var(--bg-tertiary);
}

/* ============================================
   MODERN TABS
   ============================================ */

.modern-tabs-wrapper {
    margin-bottom: 24px;
    background: white;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modern-tabs {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.modern-tab-item {
    flex: 1;
    min-width: 140px;
}

.modern-tab-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-tab-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-tab-link:hover::before {
    opacity: 1;
}

.modern-tab-link.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
}

.tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.modern-tab-link:hover .tab-icon {
    transform: translateY(-2px);
}

.modern-tab-link.active .tab-icon {
    transform: scale(1.05);
}

.tab-icon.videos-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #33a3e7 100%);
    color: white;
}

.tab-icon.quizzes-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

.tab-icon.attachments-icon {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.tab-icon.about-icon {
    background: linear-gradient(135deg, #93C5FD 0%, #BFDBFE 100%);
    color: white;
}

.tab-icon.reviews-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    position: relative;
    z-index: 1;
}

.tab-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.modern-tab-link.active .tab-label {
    color: #93C5FD;
}

.tab-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .modern-tab-link {
        flex-direction: column;
        text-align: center;
        padding: 12px 8px;
        gap: 8px;
    }

    .tab-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .tab-content-wrapper {
        align-items: center;
    }

    .tab-label {
        font-size: 0.875rem;
    }

    .tab-count {
        font-size: 0.6875rem;
    }

    .modern-tab-item {
        min-width: 100px;
    }
}

/* Dark mode support */
[data-theme="dark"] .modern-tabs-wrapper {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .modern-tab-link::before {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
}

[data-theme="dark"] .modern-tab-link.active::before {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
}

[data-theme="dark"] .tab-label {
    color: var(--text-primary);
}

[data-theme="dark"] .modern-tab-link.active .tab-label {
    color: #818cf8;
}

[data-theme="dark"] .tab-count {
    color: var(--text-secondary);
}

/* ============================================
   VIDEO MANIPULATOR BUTTON
   ============================================ */

.video-manipulator-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    z-index: 10;
}

.video-manipulator-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
    color: white;
}

.video-manipulator-btn i {
    font-size: 1.125rem;
}

/* Always show on mobile */
@media (max-width: 768px) {
    .video-manipulator-btn {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dark mode support */
[data-theme="dark"] .video-manipulator-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .video-manipulator-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}

/* AI Quiz Generation Modal Styles */
.ai-quiz-modal-content {
    max-width: 700px;
}

.ai-quiz-generation-content {
    padding: 0;
}

.ai-quiz-info {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.ai-quiz-info i {
    font-size: 20px;
    color: #93C5FD;
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-quiz-info p {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.video-selection-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.video-selection-list::-webkit-scrollbar {
    width: 6px;
}

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

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

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

.video-selection-item {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.video-selection-item:hover {
    border-color: #93C5FD;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.video-selection-item.disabled {
    background: #f9fafb;
    border-color: #e5e7eb;
    opacity: 0.7;
    cursor: not-allowed;
}

.video-selection-item.disabled:hover {
    border-color: #e5e7eb;
    box-shadow: none;
}

.video-selection-label {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    cursor: pointer;
    gap: 12px;
    margin: 0;
}

.video-selection-item.disabled .video-selection-label {
    cursor: not-allowed;
}

.video-select-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #93C5FD;
    flex-shrink: 0;
}

.video-select-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.video-selection-info {
    flex: 1;
}

.video-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.video-selection-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    flex: 1;
}

.video-selection-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.video-selection-badge.transcript-ready {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.video-selection-badge.transcript-processing {
    background: rgba(168, 85, 247, 0.1);
    color: #93C5FD;
}

.video-selection-badge.transcript-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.video-selection-badge.no-transcript {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.video-selection-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.video-selection-hint i {
    font-size: 14px;
}

.no-videos-message {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af;
}

.no-videos-message i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.no-videos-message p {
    margin: 0;
    font-size: 14px;
}

/* Dark theme support */
[data-theme="dark"] .ai-quiz-info {
    background: rgba(102, 126, 234, 0.15);
}

[data-theme="dark"] .ai-quiz-info p {
    color: #d1d5db;
}

[data-theme="dark"] .video-selection-item {
    border-color: #374151;
}

[data-theme="dark"] .video-selection-item:hover {
    border-color: #93C5FD;
}

[data-theme="dark"] .video-selection-item.disabled {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .video-selection-title {
    color: #f9fafb;
}

[data-theme="dark"] .video-selection-hint {
    color: #9ca3af;
}

[data-theme="dark"] .video-selection-list::-webkit-scrollbar-track {
    background: #1f2937;
}

[data-theme="dark"] .video-selection-list::-webkit-scrollbar-thumb {
    background: #4b5563;
}

[data-theme="dark"] .video-selection-list::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

[data-theme="dark"] .no-videos-message {
    color: #6b7280;
}

/* ============================================
   AI Quiz Generation Modal - Enhanced Styles
   ============================================ */

/* Modal Base */
.ai-quiz-modal .ai-quiz-modal-content {
    max-width: 800px;
    border-radius: 12px;
    overflow: hidden;
    background: white !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: modalSlideIn 0.3s ease-out;
}

/* AI Quiz Modal Body */
.ai-quiz-modal .video-modal-body {
    background: white !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 24px 32px;
}

.ai-quiz-modal .video-modal-body::-webkit-scrollbar {
    width: 6px;
}

.ai-quiz-modal .video-modal-body::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 3px;
}

.ai-quiz-modal .video-modal-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ai-quiz-modal .video-modal-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* SweetAlert2 z-index fix - ensure it appears above modals */
.swal2-container {
    z-index: 99999 !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header Styles */
.ai-quiz-header {
    padding: 32px;
    border-bottom: none;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.modal-icon-wrapper i {
    font-size: 28px;
    color: white;
}

.modal-title-wrapper h4 {
    color: white;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 4px 0 0 0;
    font-weight: 400;
}

.ai-quiz-header .video-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.ai-quiz-header .video-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* Info Banner */
.ai-quiz-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin: 24px 0;
    display: flex;
    gap: 16px;
}

.info-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.info-icon i {
    font-size: 24px;
    color: white;
}

.info-content h5 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.info-content p {
    margin: 0 0 12px 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.quiz-length-indicator {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.length-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

.length-item i {
    color: #93C5FD;
    font-size: 14px;
}

/* Video Selection Header */
.video-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.video-selection-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.selection-stats {
    display: flex;
    gap: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 8px;
}

.stat-item i {
    color: #10b981;
    font-size: 16px;
}

/* Video Selection List */
.video-selection-list {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Video Selection Items */
.video-selection-item {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 12px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.video-selection-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.video-selection-item:not(.disabled):hover {
    border-color: #93C5FD;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.video-selection-item:not(.disabled):hover::before {
    transform: scaleX(1);
}

/* Custom Checkbox */
.checkbox-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-custom {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
    position: relative;
}

.checkbox-custom::after {
    content: '\e9a7';
    font-family: 'phosphor';
    font-size: 16px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.video-select-checkbox:checked + .checkbox-custom {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-color: #93C5FD;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.video-select-checkbox:checked + .checkbox-custom::after {
    opacity: 1;
    transform: scale(1);
}

.video-select-checkbox:disabled + .checkbox-custom {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

/* Video Info */
.video-selection-info {
    flex: 1;
    min-width: 0;
}

.video-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.video-number {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Status Badges */
.video-selection-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Video Meta */
.video-meta {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

/* Hints */
.video-selection-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

/* Empty State */
.no-videos-message {
    text-align: center;
    padding: 64px 24px;
}

.no-videos-message h5 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

/* Footer */
.ai-quiz-footer {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selection-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.summary-icon i {
    font-size: 22px;
    color: white;
}

.summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-count {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.summary-count span {
    color: #93C5FD;
}

.summary-hint {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.summary-hint i {
    font-size: 14px;
}

/* Buttons */
.video-controls {
    display: flex;
    gap: 12px;
}

.btn-modal-secondary,
.btn-modal-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.ai-generate-btn {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.ai-generate-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 ease;
}

.ai-generate-btn:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

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

.ai-generate-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.ai-generate-btn:disabled::before {
    display: none;
}

/* Pulse Animation */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
    }
}

.ai-generate-btn.pulse-animation {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Language Selection */
.language-selection-section {
    margin: 10px 0;
}

.language-selection-section h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-selection-section h5::before {
    content: '\f22b';
    font-family: 'phosphor';
    color: #93C5FD;
    font-size: 20px;
}

.language-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.language-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.language-radio {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.language-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.language-option-content i {
    font-size: 24px;
    color: #64748b;
    transition: all 0.3s ease;
}

.language-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-right: auto;
}

.language-native {
    font-size: 13px;
    color: #64748b;
}

.language-radio:checked + .language-option-content {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-color: #93C5FD;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.language-radio:checked + .language-option-content i,
.language-radio:checked + .language-option-content .language-name,
.language-radio:checked + .language-option-content .language-native {
    color: white;
}

.language-option:hover .language-option-content {
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Attachments Selection */
.attachments-selection-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px dashed #e5e7eb;
}

.attachments-selection-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.attachments-selection-list::-webkit-scrollbar {
    width: 8px;
}

.attachments-selection-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.attachments-selection-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-radius: 4px;
}

.attachments-selection-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
}

.attachment-selection-item {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 12px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.attachment-selection-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.attachment-selection-item:hover {
    border-color: #93C5FD;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.attachment-selection-item:hover::before {
    transform: scaleX(1);
}

.attachment-selection-label {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    cursor: pointer;
    gap: 14px;
    margin: 0;
}

.attachment-select-checkbox {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 2;
}

.attachment-select-checkbox + .checkbox-custom {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
    position: relative;
}

.attachment-select-checkbox + .checkbox-custom::after {
    content: '\e9a7';
    font-family: 'phosphor';
    font-size: 16px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.attachment-select-checkbox:checked + .checkbox-custom {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-color: #93C5FD;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attachment-select-checkbox:checked + .checkbox-custom::after {
    opacity: 1;
    transform: scale(1);
}

.attachment-selection-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.attachment-icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.attachment-icon-wrapper i {
    font-size: 24px;
    color: #93C5FD;
}

.attachment-details {
    flex: 1;
    min-width: 0;
}

.attachment-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.attachment-selection-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.attachment-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    color: white;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.attachment-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.attachment-meta .meta-item i {
    font-size: 14px;
}

.attachment-meta .attachment-desc {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-attachments-message {
    text-align: center;
    padding: 32px 20px;
}

.no-attachments-message .empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-attachments-message .empty-state-icon i {
    font-size: 32px;
    color: #93C5FD;
}

.no-attachments-message p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Dark Theme */
[data-theme="dark"] .ai-quiz-modal .ai-quiz-modal-content {
    background: #1f2937 !important;
}

[data-theme="dark"] .ai-quiz-modal .video-modal-body {
    background: #1f2937 !important;
}

[data-theme="dark"] .ai-quiz-modal .video-modal-body::-webkit-scrollbar-track {
    background: #111827;
}

[data-theme="dark"] .ai-quiz-modal .video-modal-body::-webkit-scrollbar-thumb {
    background: #4b5563;
}

[data-theme="dark"] .ai-quiz-modal .video-modal-body::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

[data-theme="dark"] .info-content h5,
[data-theme="dark"] .video-selection-header h5,
[data-theme="dark"] .video-selection-title,
[data-theme="dark"] .summary-count,
[data-theme="dark"] .no-videos-message h5 {
    color: #f9fafb;
}

[data-theme="dark"] .info-content p,
[data-theme="dark"] .video-selection-hint,
[data-theme="dark"] .summary-hint,
[data-theme="dark"] .no-videos-message p,
[data-theme="dark"] .meta-item {
    color: #d1d5db;
}

[data-theme="dark"] .video-selection-item:not(.disabled):hover {
    background: #1f2937;
    border-color: #93C5FD;
}

[data-theme="dark"] .checkbox-custom {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .video-select-checkbox:disabled + .checkbox-custom {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .ai-quiz-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .length-item,
[data-theme="dark"] .stat-item {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme="dark"] .ai-quiz-footer {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .btn-modal-secondary {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme="dark"] .btn-modal-secondary:hover {
    background: #4b5563;
    border-color: #6b7280;
}

/* Dark Theme - Language Selection */
[data-theme="dark"] .language-selection-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #7DD3FC 100%);
    border-color: #93C5FD;
}

[data-theme="dark"] .language-selection-section h5 {
    color: #f9fafb;
}

[data-theme="dark"] .language-option-content {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .language-name {
    color: #f9fafb;
}

[data-theme="dark"] .language-native,
[data-theme="dark"] .language-option-content i {
    color: #d1d5db;
}

[data-theme="dark"] .language-radio:checked + .language-option-content {
    background: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
    border-color: #93C5FD;
}

[data-theme="dark"] .language-radio:checked + .language-option-content i,
[data-theme="dark"] .language-radio:checked + .language-option-content .language-name,
[data-theme="dark"] .language-radio:checked + .language-option-content .language-native {
    color: white;
}

/* Dark Theme - Attachments Selection */
[data-theme="dark"] .attachments-selection-section {
    border-color: #374151;
}

[data-theme="dark"] .attachments-selection-list::-webkit-scrollbar-track {
    background: #1f2937;
}

[data-theme="dark"] .attachment-selection-item {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .attachment-selection-item:hover {
    background: #1f2937;
    border-color: #93C5FD;
}

[data-theme="dark"] .attachment-selection-title {
    color: #f9fafb;
}

[data-theme="dark"] .attachment-meta .meta-item {
    color: #d1d5db;
}

[data-theme="dark"] .attachment-select-checkbox + .checkbox-custom {
    background: #1f2937;
    border-color: #4b5563;
}

[data-theme="dark"] .attachment-icon-wrapper {
    background: linear-gradient(135deg, #1e3a8a 0%, #7DD3FC 100%);
}

[data-theme="dark"] .attachment-icon-wrapper i {
    color: #BFDBFE;
}

[data-theme="dark"] .no-attachments-message .empty-state-icon {
    background: linear-gradient(135deg, #1e3a8a 0%, #7DD3FC 100%);
}

[data-theme="dark"] .no-attachments-message .empty-state-icon i {
    color: #BFDBFE;
}

[data-theme="dark"] .no-attachments-message p {
    color: #d1d5db;
}

/* ========================================
   Teacher Dashboard Styles
   ======================================== */

/* Fix layout and scrollbar issues */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}


/* Modern Blue & White Theme */
.dashboard-hero {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 24px;
    padding: 48px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.stat-card-modern {
    background: white;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    height: 10%;
}

.stat-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    border-color: #3b82f6;
}

.stat-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.stat-icon-wrapper.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.stat-icon-wrapper.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon-wrapper.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stat-icon-wrapper.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-icon-wrapper.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin: 12px 0;
}

.stat-label {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-card-modern {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
    cursor: pointer;
}

.action-card-modern:hover {
    border-color: #3b82f6;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
    transform: translateY(-4px);
}

.action-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.action-icon i {
    font-size: 2.5rem;
    color: #2563eb;
}

.course-card-modern {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    height: 100%;
}

.course-card-modern:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.tokens-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border-radius: 20px;
    padding: 28px;
    color: white;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
}

.token-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.token-balance {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
}

.btn-white-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-white-outline:hover {
    background: white;
    color: #1e40af;
    border-color: white;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title i {
    color: #3b82f6;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .dashboard-hero {
        padding: 32px;
    }

    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .dashboard-hero {
        padding: 24px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Dashboard Utility Classes */
.hero-icon-box {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title {
    font-size: 1.875rem;
    font-weight: 700;
}

.hero-subtitle {
    opacity: 0.9;
    font-size: 1rem;
}

.expertise-text {
    opacity: 0.95;
}

.expertise-badge {
    color: #2563eb !important;
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.icon-lg {
    font-size: 28px;
}

.icon-md {
    font-size: 24px;
}

.course-badge-published {
    background: #10b981;
    color: white;
}

.course-badge-draft {
    background: #f59e0b;
    color: white;
}

.course-view-btn {
    background: #dbeafe;
    color: #2563eb;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.course-view-btn:hover {
    background: #bfdbfe;
    color: #1e40af;
}

.tip-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.tip-icon-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tip-text {
    opacity: 0.8;
}

.text-blue-600 {
    color: #3b82f6;
}

.max-w-1400 {
    max-width: 1400px;
    margin: 0 auto;
}


/* Fix scrollbar and spacing issues - CORRECTED */
html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    max-width: 100vw;
}

.container-xxl {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Main content wrapper styling */
.main-content {
    min-height: calc(100vh - 300px);
}

@media (max-width: 767px) {
    .container-xxl {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Dashboard Layout Improvements */
.stat-card-modern {
    min-height: auto !important;
}

.tip-card {
    padding: 20px !important;
}

.tip-card .tip-icon-box {
    width: 40px;
    height: 40px;
}

.tip-card h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.tip-card p {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Compact verification card */
.stat-card-modern .stat-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.stat-card-modern h6 {
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.stat-card-modern p {
    font-size: 0.8125rem;
}

/* Make sidebar cards more compact */
.tokens-card {
    padding: 20px;
}

.token-balance {
    font-size: 1.75rem;
    margin: 8px 0;
}

.token-icon {
    width: 40px;
    height: 40px;
}

/* Adjust stats grid */
.stat-number {
    font-size: 2rem;
    margin: 8px 0;
}

.stat-label {
    font-size: 0.75rem;
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
}

/* Hero section adjustments */
.dashboard-hero {
    padding: 36px;
}

.hero-title {
    font-size: 1.625rem;
}

.hero-icon-box {
    width: 48px;
    height: 48px;
}

/* Action cards */
.action-card-modern {
    padding: 28px;
}

.action-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}

.action-card-modern h4 {
    font-size: 1.125rem;
}

.action-card-modern p {
    font-size: 0.875rem;
}

/* Course cards */
.course-card-modern {
    padding: 20px;
}

.course-card-modern h6 {
    font-size: 0.9375rem;
}

@media (max-width: 991px) {
    .dashboard-hero {
        padding: 24px;
    }

    .hero-title {
        font-size: 1.375rem;
    }
}

/* Fix stat card height issues */
.stat-card-modern.tip-card,
.stat-card-modern:has(.stat-icon-wrapper) {
    height: auto !important;
}

/* Override for sidebar cards */
.col-lg-3 .stat-card-modern {
    height: auto !important;
}

/* Ensure stat grid cards maintain equal height */
.row.g-4 > .col-lg-3 .stat-card-modern,
.row.g-4 > .col-md-6 .stat-card-modern {
    height: 100%;
}

/* Refactored action card buttons */
.action-card-modern .btn {
    font-weight: 600;
    padding: 12px 28px;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    border-width: 2px;
}

.action-card-modern .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-card-modern .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.action-card-modern .btn-outline-primary {
    color: #3b82f6;
    border-color: #3b82f6;
    background: transparent;
}

.action-card-modern .btn-outline-primary:hover {
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Remove pointer on action cards since they're links */
.action-card-modern:hover .btn {
    transform: translateY(-2px);
}

/* Global button refactoring */
.btn.rounded-pill {
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
}

.btn-primary.rounded-pill {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.btn-primary.rounded-pill:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-outline-primary.rounded-pill {
    color: #3b82f6;
    border: 2px solid #3b82f6;
    background: transparent;
}

.btn-outline-primary.rounded-pill:hover {
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* Override for action cards to have larger buttons */
.action-card-modern .btn.rounded-pill {
    padding: 12px 32px;
    font-size: 0.9375rem;
}

/* ==========================================
   FIX RESPONSIVE & MOBILE MENU STYLES
   Merged from: public/css/fix-responsive.css and public/css/mobile-menu.css
   ========================================== */
/* ==========================================
   Fix Horizontal Scroll & Mobile Responsive Issues
   ========================================== */

/* Prevent horizontal scroll on all pages */
html {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}


/* Fix row negative margins causing overflow */
.row {
    --bs-gutter-x: 1.5rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

/* Ensure containers can contain rows */
.container .row,
.container-fluid .row,
.container-xxl .row {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

@media (max-width: 768px) {
    /* Reduce gutters on mobile */
    .row {
        --bs-gutter-x: 1rem;
    }
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    /* Show only notification and meeting icons on mobile */
    .header .header-right {
        display: flex !important;
        gap: 8px;
        align-items: center;
    }

    /* Hide language dropdown and user profile dropdown on mobile */
    .header .header-right > .dropdown {
        display: none !important;
    }

    /* Show only the dropdowns that have notification or meeting buttons */
    .header .header-right .dropdown:has(button#notificationDropdown),
    .header .header-right .dropdown:has(button#meetingsDropdown),
    .header .header-right .dropdown:has(button#studentMeetingsDropdown) {
        display: block !important;
    }

    /* Fallback: show last 2 dropdowns if :has() not supported */
    @supports not (selector(:has(*))) {
        .header .header-right > .dropdown:nth-last-child(-n+2) {
            display: block !important;
        }
    }

    /* Reduce padding on mobile */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Fix header container padding on mobile */
    .header .container,
    .header .container--xl {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Keep header natural - like home page */
    .header {
        position: relative;
    }

    /* Make dashboard footer work like home page - remove all custom rules */
    /* Let footer behave naturally */
    /* Fix mobile dashboard layout - prevent viewport compression */
    body {
        min-height: auto !important;
        height: auto !important;
    }

    html {
        height: auto !important;
    }

    /* Position hamburger menu on left/right */
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .toggle-mobileMenu {
        order: -1 !important; /* Move to start */
        margin-right: 12px;
        margin-left: 0;
        margin-top: 8px;
        flex-shrink: 0;
        align-self: center;
    }

    [dir="rtl"] .toggle-mobileMenu {
        order: 999 !important; /* Move to end in RTL */
        margin-left: 12px;
        margin-right: 0;
        margin-top: 8px;
    }

    .header-content-wrapper {
        flex-shrink: 0;
    }

    .header-right {
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
    }

    /* Fix hero section */
    .hero-section {
        overflow-x: hidden;
    }

    /* Fix large text and buttons */
    .btn-lg {
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
    }

    /* Fix display text sizes */
    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        font-size: 2.5rem;
    }

    /* Fix floating animation on mobile */
    .floating-animation {
        max-width: 100%;
        overflow: hidden;
    }

    .floating-animation i {
        font-size: 5rem;
    }

    /* Fix buttons wrapping */
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}

/* Tablet fixes */
@media (max-width: 992px) {
    /* Adjust padding */
    .py-120 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

/* Fix Arabic RTL issues */
[dir="rtl"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure images don't overflow */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ==========================================
   Mobile Menu (Sidebar) Fixes
   ========================================== */

/* Fix mobile menu positioning for LTR and RTL */
.mobile-menu {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

.mobile-menu.active {
    transform: translateX(0);
}

/* RTL: Mobile menu slides from right */
[dir="rtl"] .mobile-menu {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

[dir="rtl"] .mobile-menu.active {
    transform: translateX(0);
}

/* Hide categories dropdown in mobile sidebar */
.mobile-menu .header-select,
.mobile-menu #categorySelectMobile {
    display: none !important;
}

/* Mobile menu header text links styling */
.mobile-menu-header {
    background: #f9fafb;
}

.mobile-menu-header .nav-menu__item {
    border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-header .nav-menu__item:last-child {
    border-bottom: none;
}

.mobile-menu-header .nav-menu__link {
    display: flex !important;
    align-items: center;
    padding: 12px 0 !important;
    transition: all 0.2s ease;
}

.mobile-menu-header .nav-menu__link:hover {
    color: #487FFF !important;
    padding-left: 8px !important;
}

.mobile-menu-header .nav-menu__link i {
    font-size: 1.1rem;
}

/* RTL support for hover effect */
[dir="rtl"] .mobile-menu-header .nav-menu__link:hover {
    padding-left: 0 !important;
    padding-right: 8px !important;
}

/* Fix mobile menu to display items vertically */
.mobile-menu__menu ul {
    display: block !important;
    flex-direction: column !important;
}

.mobile-menu__menu ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* Force vertical stacking */
.nav-menu--mobile {
    display: flex !important;
    flex-direction: column !important;
}

.nav-menu--mobile .nav-menu__item {
    display: block !important;
    width: 100% !important;
}

.nav-menu--mobile .nav-submenu {
    display: block !important;
    width: 100% !important;
    position: static !important;
}

.nav-menu--mobile .nav-submenu__item {
    display: block !important;
    width: 100% !important;
}

/* Fix mobile menu items spacing */
.nav-menu--mobile .nav-menu__link {
    display: block !important;
    padding: 12px 0;
    line-height: 1.6;
}

.nav-menu--mobile .nav-submenu__link {
    display: block !important;
    padding: 10px 16px;
    line-height: 1.5;
}

/* Fix icon spacing in mobile menu */
.nav-menu--mobile .nav-menu__link i {
    margin-inline-end: 8px;
}

.nav-menu--mobile .nav-submenu__link i {
    margin-inline-end: 8px;
}

/* Mobile Menu Profile Section - Simple text only */
.mobile-menu-profile {
    border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-profile h6 {
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
}

.mobile-menu-profile small {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Mobile Menu Guest Section - Simple text only */
/* Old guest styles removed - see modern implementation below */

/* Mobile Menu Actions Section - Simple text only */
.mobile-menu-actions {
    border-top: 1px solid #e5e7eb;
}

.mobile-menu-actions a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.mobile-menu-actions a:hover {
    opacity: 0.7;
}

.mobile-menu-actions button {
    transition: opacity 0.2s;
}

.mobile-menu-actions button:hover {
    opacity: 0.7;
}

/* ==========================================
   Mobile Header Dropdown Fixes
   ========================================== */

@media (max-width: 768px) {
    /* Ensure header has proper z-index and no overflow clipping */
    .header {
        position: sticky !important;
        top: 0;
        z-index: 1000 !important;
        background: white;
        overflow: visible !important;
    }

    /* Ensure header container doesn't clip dropdowns */
    .header .container,
    .header .container-fluid,
    .header .container-xxl {
        overflow: visible !important;
    }

    /* Fix ONLY header-right dropdowns on mobile (notifications and meetings) */
    .header .header-right .dropdown-menu {
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        top: 70px !important;
        transform: none !important;
        max-width: calc(100vw - 20px);
        width: 320px !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 999999 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
    }

    /* Keep dropdown open and visible */
    .header .header-right .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* RTL support for header-right dropdowns only */
    [dir="rtl"] .header .header-right .dropdown-menu {
        right: auto !important;
        left: 10px !important;
    }

    /* Ensure dropdown buttons are clickable */
    .header .header-right .dropdown > button {
        pointer-events: all !important;
        z-index: 1001 !important;
        position: relative;
    }

    /* Make header dropdowns scrollable on small screens */
    .header .header-right .notification-dropdown,
    .header .header-right .meeting-dropdown {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Add backdrop for mobile header dropdowns only */
    .header .header-right .dropdown.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999998 !important;
        backdrop-filter: blur(2px);
        pointer-events: auto !important;
    }

    /* Prevent body scroll when dropdown is open */
    body:has(.header .header-right .dropdown.show) {
        overflow: hidden;
    }

    /* Make dropdown content clickable above backdrop */
    .header .header-right .dropdown-menu {
        position: relative;
        z-index: 999999 !important;
    }

    /* Reduce header right spacing on mobile */
    .header-right {
        gap: 8px;
    }

    .header-right .dropdown {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .header-right .me-2,
    .header-right .me-3 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Fix info-action button size on mobile */
    .info-action {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    /* Ensure dropdowns are visible above other content */
    .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* Fix notification and meeting dropdown items */
    .notification-item,
    .meeting-item {
        padding: 12px;
        font-size: 0.9rem;
    }

    /* Fix dropdown header on mobile */
    .notification-header,
    .meeting-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 12px;
    }
}

/* Mobile header improvements */
@media (max-width: 576px) {
    /* Further reduce button sizes on very small screens */
    .info-action {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }

    /* Stack header items better */
    .header-right {
        gap: 4px;
    }

    /* Reduce dropdown width on very small screens */
    .header-right .dropdown-menu {
        max-width: calc(100vw - 10px);
        right: 5px !important;
    }

    [dir="rtl"] .header-right .dropdown-menu {
        left: 5px !important;
        right: auto !important;
    }
}

/* ================================================
   MOBILE MENU - Clean Minimalist Design
   ================================================ */

.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    background-color: #ffffff;
    transition: left 0.3s ease-in-out;
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    left: 0;
}

/* Close Button */
.mobile-menu .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #f3f4f6;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 10;
}

.mobile-menu .close-button:hover {
    background-color: #e5e7eb;
}

.mobile-menu .close-button i {
    font-size: 20px;
    color: #374151;
}

/* Mobile Menu Inner */
.mobile-menu__inner {
    padding: 0;
}

/* ==========================================
   USER PROFILE SECTION
   ========================================== */
.mobile-menu-profile {
    padding: 32px 24px !important;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-profile-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.mobile-menu-profile-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.mobile-menu-profile-avatar .avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.mobile-menu-profile-avatar .online-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background-color: #10b981;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.mobile-menu-profile-info h6 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.mobile-menu-profile-info small {
    font-size: 14px;
    color: #6b7280;
}

/* ==========================================
   GUEST SECTION
   ========================================== */
.mobile-menu-guest {
    padding: 0 16px 20px 16px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu-guest-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu-guest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.mobile-menu-guest-btn.primary {
    background: linear-gradient(135deg, #066ccb 0%, #0956a3 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(6, 108, 203, 0.2);
}

.mobile-menu-guest-btn.primary:hover {
    background: linear-gradient(135deg, #0956a3 0%, #074a8a 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6, 108, 203, 0.3);
}

.mobile-menu-guest-btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(6, 108, 203, 0.2);
}

.mobile-menu-guest-btn.secondary {
    background: white;
    color: #066ccb;
    border: 2px solid #066ccb;
    box-shadow: 0 2px 8px rgba(6, 108, 203, 0.1);
}

.mobile-menu-guest-btn.secondary:hover {
    background: rgba(6, 108, 203, 0.05);
    color: #066ccb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 108, 203, 0.15);
}

.mobile-menu-guest-btn.secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(6, 108, 203, 0.1);
}

[data-theme="dark"] .mobile-menu-guest-btn.primary {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

[data-theme="dark"] .mobile-menu-guest-btn.secondary {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.05);
    border-color: #60a5fa;
}

[data-theme="dark"] .mobile-menu-guest-btn.secondary:hover {
    background: rgba(96, 165, 250, 0.1);
}

/* ==========================================
   MENU SECTIONS
   ========================================== */
.mobile-menu__menu {
    padding: 0;
}

.mobile-menu-section {
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
}

.mobile-menu-section:first-child {
    border-top: none;
}

.mobile-menu-section-title {
    padding: 12px 24px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================
   MENU ITEMS
   ========================================== */
.nav-menu--mobile {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nav-menu--mobile .nav-menu__item {
    margin: 0;
}

.nav-menu--mobile .nav-menu__link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 400;
    color: #1f2937;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    background: none;
    width: 100%;
}

.nav-menu--mobile .nav-menu__link:hover {
    background-color: #f9fafb;
}

.nav-menu--mobile .nav-menu__link-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-menu--mobile .nav-menu__link i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #9ca3af;
    flex-shrink: 0;
}

.nav-menu--mobile .nav-menu__item.activePage .nav-menu__link {
    background-color: #eff6ff;
    color: #2563eb;
}

.nav-menu--mobile .nav-menu__item.activePage .nav-menu__link i {
    color: #3b82f6;
}

/* Submenu Items */
.nav-menu--mobile .nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f9fafb;
}

.nav-menu--mobile .nav-submenu__item {
    margin: 0;
}

.nav-menu--mobile .nav-submenu__link {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 48px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-menu--mobile .nav-submenu__link:hover {
    background-color: #f3f4f6;
    color: #374151;
    padding-left: 52px;
}

.nav-menu--mobile .nav-submenu__link i {
    font-size: 16px;
    margin-right: 8px;
}

/* ==========================================
   MOBILE MENU ACTIONS
   ========================================== */
.mobile-menu-actions {
    padding: 8px 0 !important;
}

.mobile-menu-action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 400;
    color: #1f2937;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.mobile-menu-action-item:hover {
    background-color: #f9fafb;
}

.mobile-menu-action-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-action-item i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #9ca3af;
    flex-shrink: 0;
}

.mobile-menu-action-item.logout {
    color: #ef4444;
}

.mobile-menu-action-item.logout:hover {
    background-color: #f9fafb;
}

.mobile-menu-action-item.logout i {
    color: #ef4444;
}

/* ==========================================
   TOGGLE SWITCH
   ========================================== */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #d1d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.toggle-switch.active {
    background-color: #10b981;
}

.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch.active .toggle-slider {
    transform: translateX(20px);
}

/* ==========================================
   CHEVRON ICON
   ========================================== */
.mobile-menu-chevron {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    font-size: 14px;
}

/* ==========================================
   OVERLAY
   ========================================== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 9998;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================
   SPECIAL BUTTONS
   ========================================== */
.mobile-menu-return-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-menu-return-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.mobile-menu-return-btn i {
    font-size: 18px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 576px) {
    .mobile-menu {
        width: 90%;
    }

    /* Section actions - make buttons full width and stack on small mobile */
    .section-actions {
        gap: 8px;
        width: 100%;
    }

    .section-actions .btn,
    .section-actions .dropdown {
        width: 100%;
        flex: 1 1 100%;
    }

    .section-actions .btn {
        font-size: 13px;
        padding: 10px 16px;
        justify-content: center;
    }

    .section-actions .dropdown .btn {
        width: 100%;
        justify-content: center;
    }

    /* Section actions menu (edit/delete icons in section headers) */
    .section-actions-menu {
        gap: 6px;
    }

    .section-actions-menu .btn-icon-sm {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}

/* ==========================================
   RTL SUPPORT
   ========================================== */
[dir="rtl"] .mobile-menu {
    left: auto;
    right: -100%;
}

[dir="rtl"] .mobile-menu.active {
    left: auto;
    right: 0;
}

[dir="rtl"] .mobile-menu .close-button {
    right: auto;
    left: 16px;
}

[dir="rtl"] .nav-menu--mobile .nav-menu__link i {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .nav-menu--mobile .nav-submenu__link {
    padding-left: 16px;
    padding-right: 48px;
}

[dir="rtl"] .nav-menu--mobile .nav-submenu__link:hover {
    padding-left: 16px;
    padding-right: 52px;
}

[dir="rtl"] .nav-menu--mobile .nav-submenu__link i {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .mobile-menu-action-item i {
    margin-right: 0;
    margin-left: 12px;
}

/* ==========================================
   UTILITY STYLES
   Merged from: help.css, notes.css, auth-forms.css
   ========================================== */
/* Help Page Styles */
:root {
    --help-primary: #6366f1;
    --help-primary-dark: #4f46e5;
    --help-secondary: #3b82f6;
    --help-success: #10b981;
    --help-info: #3b82f6;
    --help-warning: #f59e0b;
    --help-danger: #ef4444;
    --help-light: #f8fafc;
    --help-dark: #1e293b;
    --help-border: #e2e8f0;
    --help-shadow: rgba(0, 0, 0, 0.1);
    --help-shadow-lg: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --help-light: #1e293b;
    --help-dark: #f8fafc;
    --help-border: #334155;
    --help-shadow: rgba(0, 0, 0, 0.3);
    --help-shadow-lg: rgba(0, 0, 0, 0.5);
}


/* Tab Pills Styling */
.common-tab {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .common-tab {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.common-tab .nav-link {
    transition: all 0.3s ease;
}

.common-tab .nav-link.active {
    background: var(--bs-main-600) !important;
    color: white !important;
}

.common-tab .nav-link.active i {
    color: white !important;
}

.common-tab .nav-link:not(.active):hover {
    background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .common-tab .nav-link {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .common-tab .nav-link.active {
    background: var(--bs-main-600) !important;
    color: white !important;
}

/* Accordion Styling */
.common-accordion .accordion-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

[data-theme="dark"] .common-accordion .accordion-item {
    background: #1e293b;
    border-color: #334155;
}

.common-accordion .accordion-button {
    background: white;
    color: #1e293b;
    font-weight: 600;
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
    border: none;
}

.common-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: var(--bs-main-600);
    box-shadow: none;
}

.common-accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
}

.common-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236366f1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme="dark"] .common-accordion .accordion-button {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .common-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    color: #a5b4fc;
}

.common-accordion .accordion-body {
    padding: 1.5rem;
    background: white;
}

[data-theme="dark"] .common-accordion .accordion-body {
    background: #0f172a;
}

.accordion-body__desc {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

[data-theme="dark"] .accordion-body__desc {
    color: #94a3b8;
}

/* Content Area */
.help-content {
    min-height: 400px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.section-heading h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

[data-theme="dark"] .section-heading h2 {
    color: #f8fafc;
}

.section-heading h5 {
    font-size: 1.1rem;
    font-weight: 600;
}

.section-heading p {
    color: #64748b;
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

[data-theme="dark"] .section-heading p {
    color: #94a3b8;
}

.section-heading .flex-align i {
    line-height: 1;
}

/* Category Cards */
.category-card {
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--bs-main-600) !important;
}

.category-card:active {
    transform: translateY(-2px);
}

[data-theme="dark"] .category-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .category-card:hover {
    border-color: var(--bs-main-600) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .category-card h6 {
    color: #f8fafc !important;
}

.category-card .category-icon {
    flex-shrink: 0;
}

.category-card h6 {
    font-size: 0.95rem;
    font-weight: 600;
}

.category-card:hover .category-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Testimonials Section */
.testimonials-three-item {
    transition: all 0.3s ease;
}

.testimonials-three-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="dark"] .testimonials-three-item {
    background: #1e293b !important;
    border: 1px solid #334155;
}

[data-theme="dark"] .testimonials-three-item .text-neutral-500 {
    color: #94a3b8 !important;
}

.testimonials-three-slider .slick-slide {
    margin: 0 10px;
}

.testimonials-three-slider .slick-list {
    margin: 0 -10px;
}

.testimonials-three-slider .slick-center {
    transform: scale(1.05);
}

/* RTL Support */
[dir="rtl"] .common-tab .nav-link i {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .testimonials-three-item .position-absolute {
    right: auto !important;
    left: 0 !important;
}


/* Support Section */
.support-section {
    background: linear-gradient(135deg, var(--help-primary) 0%, var(--help-secondary) 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px var(--help-shadow);
}

.support-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.support-text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.support-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.75rem;
    background: white;
    color: var(--help-primary);
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.support-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    color: var(--help-primary-dark);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--help-primary) 0%, var(--help-secondary) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--help-shadow);
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--help-shadow-lg);
}

/* No Results Message */
.no-results {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748b;
}

.no-results-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.no-results-subtext {
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-pane {
    animation: fadeIn 0.4s ease;
}


/* Mobile Optimizations */
@media (max-width: 768px) {
    .common-tab {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    .common-tab .nav-link {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }

    .common-tab .nav-link i {
        font-size: 1.25rem !important;
    }

    .common-accordion .accordion-button {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .common-accordion .accordion-body {
        padding: 1rem;
    }

    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }
}

/* Print Styles */
@media print {
    .back-to-top,
    .support-section,
    .common-tab {
        display: none !important;
    }

    .accordion-item {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    .accordion-collapse {
        display: block !important;
        height: auto !important;
    }

    .accordion-button::after {
        display: none;
    }
}

body .notes-app {
    display: flex !important;
    height: calc(100vh - 120px) !important;
    gap: 20px;
    padding: 20px;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* === Sidebar === */
body .notes-app .notes-sidebar {
    width: 280px !important;
    border: none !important;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-bottom: 20px;
    background: var(--bg-secondary, #fff);
}

/* === Main Content === */
body .notes-app .notes-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-primary, #fff) !important;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sidebar-header {
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.sidebar-section {
    padding: 15px 20px;
}

.sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin: 3px 0;
    border-radius: 12px;
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.sidebar-menu-item:hover {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #475569;
    text-decoration: none;
    transform: translateX(2px);
}

.sidebar-menu-item.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sidebar-menu-item .badge {
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
}

.sidebar-menu-item.active .badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Search Box - Removed duplicate - defined in main.css */

.search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: #1976d2;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    z-index: 10;
    pointer-events: none;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-number {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1976d2;
}

.stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Notes Content === */
.notes-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* === Note Card (Redesigned Modern Style) === */
.note-item {
    border-radius: 16px;
    border: none;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Color accent bar at top */
.note-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--note-color, #2563eb), rgba(255, 255, 255, 0.5));
    opacity: 0.8;
}

.note-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
}

.note-item:hover::before {
    opacity: 1;
    height: 5px;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-top: 8px;
}

.note-info {
    flex: 1;
    padding-right: 12px;
}

/* Actions container */
.note-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.note-item:hover .note-actions {
    opacity: 1;
}

.note-actions i.ph-push-pin {
    color: #f59e0b;
    font-size: 1.1rem;
    opacity: 1 !important;
}

.note-actions .dropdown button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f8f9fa;
    border: none;
    transition: all 0.2s ease;
}

.note-actions .dropdown button:hover {
    background: #e9ecef;
}

/* Note Title */
.note-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.4;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Note Course Tag */
.note-course {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    color: #ffffff;
    font-size: 0.7rem;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.note-course i {
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Preview text */
.note-content-preview {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex: 1;
}

/* Note Footer */
.note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid #f1f5f9;
}

.note-date {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.note-date::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
}

/* Enhanced pinned indicator (re-purposed) */
.note-actions .ph-push-pin.pinned-icon {
    color: #f59e0b !important;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}

/* Enhanced pinned indicator (Original, kept for dropdown) */
.note-actions .ph-push-pin {
    color: #f59e0b !important;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}

/* Empty State */
.empty-notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #adb5bd;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .notes-app {
        flex-direction: column;
        height: auto;
    }

    .notes-sidebar {
        width: 100%;
        max-height: 300px;
    }

    .notes-grid {
        grid-template-columns: 1fr;
    }

    .toolbar-left h4 {
        font-size: 1rem;
    }

    .notes-main:hover, .notes-sidebar:hover {
        transform: translateY(-2px);
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
}

/* === Note Creation Page Enhancements === */

/* Layout adjustments */
.notes-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Toolbar */
.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f9fafb;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    gap: 12px;
}

.editor-toolbar .btn {
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #334155;
    background: #fff;
    transition: all 0.2s ease;
}

.editor-toolbar .btn:hover {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.4);
    color: #1e293b;
}

/* Primary save button */
.editor-toolbar .btn-primary {
    background: #2563eb;
    color: white;
    border: none;
}

.editor-toolbar .btn-primary:hover {
    background: #1d4ed8;
}

/* Title input */
.note-title-input {
    font-size: 1.2rem;
    font-weight: 600;
    border: none;
    outline: none;
    padding: 18px 24px;
    color: #1e293b;
    background: transparent;
}

.note-title-input:focus {
    background: #f8fafc;
    border-radius: 8px;
}

/* Content area */
.note-content-editor {
    flex: 1;
    padding: 24px;
    border: none;
    outline: none;
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
    resize: none;
    background: #ffffff;
}

/* Sidebar mini (if creation has side color picker or settings) */
.editor-sidebar {
    background: #f8fafc;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    padding: 16px;
}

/* Color picker circles */
.color-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-circle:hover {
    border-color: rgba(148, 163, 184, 0.5);
    transform: scale(1.05);
}

/* Editor action feedback (success badge, etc.) */
.status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.status-badge.success {
    background: #16a34a;
}

.status-badge.failed {
    background: #dc2626;
}

.status-badge.processing {
    background: #3b82f6;
}

/* Note Editor */
body .notes-app .note-editor {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

[data-theme="dark"] body .notes-app .note-editor {
    background: var(--bg-primary) !important;
}

.note-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .note-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}


.note-title-input:focus {
    color: var(--text-primary) !important;
}

.note-meta-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.color-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-dot input {
    display: none;
}

.color-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    position: relative;
}


/* Rich text content styling */
.note-content-area h1,
.note-content-area h2,
.note-content-area h3 {
    margin: 16px 0 8px 0;
    font-weight: bold;
    color: var(--text-primary);
}

.note-content-area h1 {
    font-size: 1.5rem;
}

.note-content-area h2 {
    font-size: 1.25rem;
}

.note-content-area h3 {
    font-size: 1.125rem;
}

.note-content-area ul,
.note-content-area ol {
    margin: 8px 0;
    padding-left: 24px;
}

.note-content-area li {
    margin: 4px 0;
}

.note-content-area strong {
    font-weight: bold;
}

.note-content-area em {
    font-style: italic;
}

.note-content-area u {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .notes-app {
        flex-direction: column;
        height: auto;
    }

    .notes-sidebar {
        width: 100%;
        max-height: 200px;
    }

    .toolbar-left h4 {
        font-size: 1rem;
    }
}

.note-meta-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.color-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-dot input {
    display: none;
}

.color-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    position: relative;
}

.color-circle:hover {
    transform: scale(1.05);
    border-color: #cbd5e1;
}

.color-dot input:checked + .color-circle {
    border-color: #3b82f6;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.color-dot input:checked + .color-circle::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3b82f6;
    font-weight: bold;
    font-size: 12px;
}

.pin-toggle {
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
}

.pin-toggle input {
    display: none;
}

.pin-toggle input:checked + i {
    color: #f59e0b;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.pin-toggle:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

.note-content {
    flex: 1;
    padding: 0 24px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .note-content {
    background: var(--bg-primary) !important;
}

.note-content-area {
    width: 100%;
    flex: 1;
    min-height: 500px;
    border: none;
    outline: none;
    resize: none;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    transition: color 0.2s ease;
    padding: 20px;
}

.note-content-area::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.note-content-area:focus {
    color: var(--text-primary) !important;
}

/* Rich Text Editor Styles */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
    overflow-x: auto;
}

[data-theme="dark"] .editor-toolbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 16px;
    position: relative;
}

.toolbar-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.toolbar-btn.active {
    background: #3b82f6;
    color: white;
}

.toolbar-select {
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.toolbar-select:hover {
    border-color: #3b82f6;
}

.toolbar-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
    flex-shrink: 0;
}

.color-picker-container {
    position: relative;
}

.color-picker-container input[type="color"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    border: none;
    padding: 0;
}

.color-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}

#text-color-indicator {
    background: #000000;
}

#highlight-color-indicator {
    background: #ffff00;
}

/* Content editable placeholder */
.note-content-area[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}


.sidebar-menu-item .badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.sidebar-menu-item.active .badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Recent Notes */
.recent-note-item {
    padding: 14px 18px;
    margin: 6px 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-color: var(--border-color);
}

.recent-note-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    transform: translateX(2px);
    box-shadow: var(--shadow);
}

.note-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: var(--text-primary);
    line-height: 1.4;
}


.note-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.note-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

/* Main Content */
body .notes-app .notes-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-primary) !important;
}

[data-theme="dark"] body .notes-app .notes-main {
    background: var(--bg-primary) !important;
}

body .notes-app .notes-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
}

[data-theme="dark"] body .notes-app .notes-toolbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
}

.toolbar-right {
    display: flex;
    gap: 8px;
}

/* Note Editor */
body .notes-app .note-editor {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

[data-theme="dark"] body .notes-app .note-editor {
    background: var(--bg-primary) !important;
}

.note-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .note-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.note-title-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    padding: 16px 0;
    background: transparent;
    margin-bottom: 20px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.note-title-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.note-title-input:focus {
    color: var(--text-primary) !important;
}

/* Current Note Info */
.current-note-info {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
}

/* Modern Authentication Forms Styling */

/* Main auth container */
.account {
    background: hsl(var(--white));
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.account::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

/* Auth form card */
.auth-card {
    margin: 100px 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.auth-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Dark mode support */
[data-theme="dark"] .auth-card {
    background: rgba(30, 36, 51, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

/* Auth header */
.auth-header {
    text-align: center;
    margin-bottom: 48px;
}

.auth-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #066ccb 0%, #066ccb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .auth-title {
    color: #f8f9fa;
    -webkit-text-fill-color: #f8f9fa;
}

.auth-subtitle {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
}

[data-theme="dark"] .auth-subtitle {
    color: #d1d5db;
}

/* Form groups */
.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    transition: color 0.3s ease;
}

[data-theme="dark"] .form-label {
    color: #f3f4f6;
}

/* Select styling */
.form-select {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    background: #ffffff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>') no-repeat right 16px center;
    background-size: 20px;
    padding: 16px 48px 16px 20px;
}

.form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .form-select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-theme="dark"] .form-select:focus {
    border-color: #2563eb;
    background: #1f2937;
}

/* Textarea styling */
.form-textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.3s ease;
    outline: none;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .form-textarea {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-theme="dark"] .form-textarea:focus {
    border-color: #2563eb;
    background: #1f2937;
}

/* Checkbox styling */
.form-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.form-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.form-checkbox:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.form-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.form-checkbox-label {
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.form-checkbox-label a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.form-checkbox-label a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .form-checkbox {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .form-checkbox-label {
    color: #f3f4f6;
}

/* Error states */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.error-message {
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.error-message::before {
    content: '⚠';
    font-size: 12px;
}

/* Success states */
.form-input.success,
.form-select.success,
.form-textarea.success {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Submit button */
.auth-submit-btn {
    width: 100%;
    background: hsl(var(--main)) !important;
    color: white;
    border: none;
    padding: 18px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

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

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading state */
.auth-submit-btn.loading {
    pointer-events: none;
}

.auth-submit-btn.loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

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

/* Additional fields container */
.additional-fields {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    margin-top: 24px;
    animation: slideIn 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.additional-fields::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #066ccb 0%, #066ccb 100%);
}

[data-theme="dark"] .additional-fields {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

/* Auth links */
.auth-link {
    text-align: center;
    margin-bottom: 24px;
}

.auth-link p {
    color: #6b7280;
    margin: 0;
}

.auth-link a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-link a:hover {
    color: #5a67d8;
    text-decoration: underline;
}

[data-theme="dark"] .auth-link p {
    color: #d1d5db;
}

/* Password strength indicator */
.password-strength {
    margin-top: 8px;
    padding: 8px 0;
}

.strength-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-weak {
    background: #ef4444;
    width: 25%;
}

.strength-fair {
    background: #f59e0b;
    width: 50%;
}

.strength-good {
    background: #10b981;
    width: 75%;
}

.strength-strong {
    background: #059669;
    width: 100%;
}

.strength-text {
    font-size: 12px;
    font-weight: 500;
}

.strength-weak-text {
    color: #ef4444;
}

.strength-fair-text {
    color: #f59e0b;
}

.strength-good-text {
    color: #10b981;
}

.strength-strong-text {
    color: #059669;
}

/* Account image styling */
.account-img {
    text-align: center;
    padding: 40px 20px;
}

.account-img img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.account-img img:hover {
    transform: scale(1.02);
}

/* Responsive design */
@media (max-width: 768px) {
    .auth-card {
        padding: 32px 24px;
        margin: 20px;
        border-radius: 16px;
    }

    .auth-title {
        font-size: 1.75rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: 14px 16px;
    }

    .auth-submit-btn {
        padding: 16px 20px;
    }

    .additional-fields {
        padding: 24px 20px;
    }

    .account-img {
        margin-top: 40px;
        order: -1;
    }
}

@media (max-width: 480px) {
    .account {
        padding: 20px 0;
    }

    .auth-card {
        padding: 24px 16px;
        margin: 10px;
    }

    .auth-header {
        margin-bottom: 32px;
    }

    .form-group {
        margin-bottom: 20px;
    }
}

/* Success/Error alerts */
.auth-alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.auth-alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.auth-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.auth-alert-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

[data-theme="dark"] .auth-alert-success {
    background: #064e3b;
    color: #a7f3d0;
    border-color: #065f46;
}

[data-theme="dark"] .auth-alert-error {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #991b1b;
}

[data-theme="dark"] .auth-alert-info {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #1e40af;
}

/* Form validation animations */
.form-input.shake,
.form-select.shake,
.form-textarea.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Focus improvements */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.form-checkbox:focus-visible,
.auth-submit-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .form-input,
    .form-select,
    .form-textarea,
    .auth-submit-btn,
    .additional-fields {
        transition: none;
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .auth-card {
        border: 3px solid #000;
    }

    .form-input,
    .form-select,
    .form-textarea {
        border: 2px solid #000;
    }

    .auth-submit-btn {
        border: 2px solid #000;
    }
}

/* ==========================================
   STUDENT STYLES
   Merged from: student.css, quizzes.css, materials.css, course-player-modern.css, content-manipulator files
   ========================================== */
/* ================================================================
   Student Dashboard & Other Pages Styles
   Extracted from student Blade templates
   ================================================================ */

/* Force scrollbar to stay on right side even in Arabic RTL mode */
html[dir="rtl"] {
    /* Keep scrollbar on right by preventing RTL from affecting scrollbar */
    direction: ltr !important;
}

html[dir="rtl"] body {
    direction: rtl !important;
}

html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid,
html[dir="rtl"] .container-xxl,
html[dir="rtl"] .courses-dashboard,
html[dir="rtl"] main,
html[dir="rtl"] section,
html[dir="rtl"] footer {
    /* Content should still be RTL */
    direction: rtl !important;
}

/* ========================================
   dashboard.blade.php
   ======================================== */
.text-purple {
    color: #8b5cf6 !important;
}

.bg-purple-25 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.btn-outline-purple {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.btn-outline-purple:hover {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__header {
    padding: 16px 8px 8px 8px;
    margin-top: 12px;
    margin-bottom: 4px;
    border-top: 1px solid #e5e7eb;
}

.nav-menu-list__header:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.nav-menu-list__header span {
    display: block;
    letter-spacing: 0.05em;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link:hover {
    background-color: var(--bs-main-25);
    color: var(--bs-main-600);
    transform: translateX(4px);
}

.nav-menu-list__link.bg-main-600 {
    background-color: var(--bs-main-600);
    color: white;
}

.nav-menu-list__link.bg-main-600:hover {
    background-color: var(--bs-main-700);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.badge.bg-purple-600 {
    background-color: #9333ea !important;
    color: white;
}

/* Progress Bar Styling */
.progress {
    background-color: #f3f4f6;
}

/* Card Hover Effects */
.bg-white.rounded-16 {
    transition: all 0.3s ease;
}

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

/* Badge Styling */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Button Hover Effects */
.btn {
    transition: all 0.3s ease;
}

/* Gradient Background */
.bg-gradient-to-r {
    background: linear-gradient(to right, var(--bs-main-25), var(--bs-warning-25));
}

/* Badge System Styling */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.earned-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff5eb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    transition: all 0.3s ease;
    cursor: pointer;
}

.earned-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

.badge-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    font-size: 1.25rem;
}

.badge-icon-bg-green-500 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.badge-icon-bg-blue-500 {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

.badge-icon-bg-yellow-500 {
    background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4) !important;
}

.badge-icon-bg-purple-500 {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
}

.badge-icon-bg-orange-500 {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4) !important;
}

.badge-icon-bg-red-500 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

.badge-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    text-align: center;
    line-height: 1.2;
}

.next-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.next-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.next-badge:hover {
    opacity: 1;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.badge-icon-dimmed {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    font-size: 1.25rem;
    opacity: 0.6;
}

.badge-name-dimmed {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

.badge-requirement {
    font-size: 0.625rem;
    color: #9ca3af;
    text-align: center;
    font-weight: 500;
}

.from-purple-500 {
    --tw-gradient-from: #8b5cf6;
}

.to-pink-500 {
    --tw-gradient-to: #ec4899;
}

.from-purple-25 {
    --tw-gradient-from: #f3f0ff;
}

.to-pink-25 {
    --tw-gradient-to: #fdf2f8;
}

.from-yellow-500 {
    --tw-gradient-from: #eab308;
}

.to-orange-500 {
    --tw-gradient-to: #f97316;
}

/* Progress Bar Enhancements */
.progress-bar.bg-gradient-to-r {
    background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
}

/* Motivational Box Styling */
.bg-gradient-to-r.from-purple-25.to-pink-25 {
    background: linear-gradient(135deg, #f3f0ff 0%, #fdf2f8 100%);
    border: 1px solid #e879f9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .nav-menu-list__link:hover {
        transform: none;
    }

    .bg-white.rounded-16:hover {
        transform: none;
    }

    .badge-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .next-badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .badge-icon,
    .badge-icon-dimmed {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .quiz-attempts-grid {
        grid-template-columns: 1fr;
    }

    .quiz-attempt-header {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        text-align: center;
    }

    .quiz-stats {
        justify-content: center;
    }

    .quiz-attempt-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* Quiz Results Section Styling */
.quiz-results-section {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.quiz-attempts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.quiz-attempt-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quiz-attempt-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
}

.quiz-attempt-card.quiz-attempt-failed::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quiz-attempt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.quiz-attempt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.quiz-score-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.quiz-score-circle.score-failed {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.score-percentage {
    position: relative;
    z-index: 2;
}

.score-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    background: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.quiz-attempt-content {
    margin-bottom: 20px;
}

.quiz-course {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 16px;
}

.quiz-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.quiz-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
}

.quiz-stat i {
    font-size: 16px;
}

.quiz-attempt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.quiz-time-ago {
    font-size: 12px;
    color: #9ca3af;
}

/* Enhanced Badge Showcase Styling */
.badge-showcase {
    background: linear-gradient(135deg, #fefbff 0%, #fff7ed 100%);
    position: relative;
    overflow: hidden;
}

.badge-showcase::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
    z-index: 0;
}

.badge-showcase > * {
    position: relative;
    z-index: 1;
}

.badge-header-icon {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 8px 40px rgba(245, 158, 11, 0.5);
    }
}

.badge-count {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    background: rgba(251, 191, 36, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
}

.badge-progress-indicator {
    font-size: 12px;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badges-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.earned-badge-card {
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #f3f4f6;
    padding: 20px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: slideInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.earned-badge-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #fbbf24;
    box-shadow: 0 20px 40px rgba(251, 191, 36, 0.3);
}

.badge-card-inner {
    position: relative;
    z-index: 2;
}

.badge-icon-container {
    position: relative;
    margin-bottom: 16px;
    text-align: center;
}

.badge-icon-modern {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 24px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #fbbf24, #f59e0b); /* Default gold background */
}

.badge-yellow {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.badge-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.badge-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.badge-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.badge-orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.badge-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.badge-gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.badge-silver {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}

.badge-bronze {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.badge-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.badge-indigo {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.badge-gray {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.badge-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.earned-badge-card:hover .badge-shine {
    transform: translateX(100%);
}

.badge-content {
    text-align: center;
    margin-bottom: 12px;
}

.badge-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    line-height: 1.2;
}

.badge-description {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    margin-bottom: 8px;
}

.badge-points {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: #92400e;
    font-weight: 600;
}

.badge-earned-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
}

.badge-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
    color: white;
    padding: 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 3;
}

.earned-badge-card:hover .badge-hover-overlay {
    opacity: 1;
    transform: scale(1);
}

.badge-full-description {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.earned-label {
    font-size: 11px;
    opacity: 0.9;
}

/* Empty State Styling */
.empty-badges-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-badges-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.floating-badge {
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 18px;
    animation: float 3s ease-in-out infinite;
}

.floating-badge:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.floating-badge:nth-child(2) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 1s;
}

.floating-badge:nth-child(3) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-10px) translateX(-50%);
    }
}

.empty-description {
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.5;
}

.next-badge-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

.preview-badge {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

/* Badge Summary Styling */
.badge-summary {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
}

.summary-stats {
    display: flex;
    justify-content: space-around;
}

.summary-item {
    text-align: center;
}

.summary-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #f59e0b;
}

.summary-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Next Badges Enhanced Styling */
.next-badges-showcase {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    position: relative;
}

.motivation-streak {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 115, 22, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.streak-text {
    font-size: 12px;
    font-weight: 600;
    color: #ea580c;
}

.next-badges-enhanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.next-badge-enhanced {
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
    padding: 20px;
    transition: all 0.4s ease;
    position: relative;
    cursor: pointer;
    animation: slideInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.next-badge-enhanced:hover {
    transform: translateY(-4px);
    border-color: #3b82f6;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
}

.badge-icon-locked {
    position: relative;
    text-align: center;
    margin-bottom: 16px;
}

.icon-background {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 24px;
    position: relative;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
}

.lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.next-badge-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    text-align: center;
}

.next-badge-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    margin-bottom: 12px;
    text-align: center;
}

.points-progress {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-percent {
    font-size: 11px;
    color: #3b82f6;
    font-weight: 700;
}

.mini-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.activity-requirement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #3b82f6;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
}

.badge-hint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(29, 78, 216, 0.95));
    color: white;
    padding: 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 3;
}

.next-badge-enhanced:hover .badge-hint-overlay {
    opacity: 1;
    transform: scale(1);
}

.hint-text {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.hint-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 16px;
}

/* Gradient Button Styling */
.btn-gradient-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-gradient-warning:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.btn-outline-blue-600 {
    border: 2px solid #3b82f6;
    color: #3b82f6;
    background: transparent;
}

.btn-outline-blue-600:hover {
    background: #3b82f6;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .badges-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .next-badges-enhanced-grid {
        grid-template-columns: 1fr;
    }

    .badge-icon-modern {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .summary-stats {
        flex-direction: column;
        gap: 16px;
    }
}

/* Sidebar Quiz Performance Styling */
.quiz-performance-sidebar {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.quiz-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.quiz-stat-mini {
    text-align: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}

.quiz-stat-mini .stat-label {
    display: block;
    font-size: 7px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-stat-mini .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #374151;
}

.recent-quiz-mini {
    margin-bottom: 16px;
}

.latest-quiz-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: 12px;
    padding: 16px;
    position: relative;
}

.latest-quiz-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
    border-radius: 12px 12px 0 0;
}

.quiz-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.quiz-mini-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    line-height: 1.3;
}

.quiz-mini-score {
    font-size: 14px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.quiz-mini-course {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.3;
}

.quiz-mini-time {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

/* Meetings Sidebar Styling */
.meetings-sidebar {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.meetings-sidebar::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.meetings-sidebar > * {
    position: relative;
    z-index: 1;
}

.meeting-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    position: relative;
}

.meeting-item.live {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.meeting-item.upcoming {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

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

.meeting-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.meeting-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}

.meeting-status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.meeting-status.live {
    background: rgba(16, 185, 129, 0.9);
    color: white;
}

.meeting-status.upcoming {
    background: rgba(245, 158, 11, 0.9);
    color: white;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.meeting-course {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.2;
}

.meeting-time {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.meeting-actions {
    display: flex;
    justify-content: center;
}

.btn-join-live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.btn-join-live:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-view-upcoming {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.btn-view-upcoming:hover {
    background: #d97706;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Responsive adjustments for sidebar */
@media (max-width: 768px) {
    .quiz-stats-mini {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quiz-stat-mini {
        padding: 8px;
    }

    .quiz-mini-header {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .meetings-sidebar {
        margin-bottom: 16px;
    }

    .meeting-item {
        padding: 12px;
    }

    .meeting-header {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .meeting-status {
        align-self: flex-start;
    }
}

/* Dark Mode Styles for Sidebar */
[data-theme="dark"] .nav-menu-list__header {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .nav-menu-list__header span {
    color: var(--text-muted);
}

[data-theme="dark"] .nav-menu-list__link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-menu-list__link:hover {
    background-color: rgba(var(--bs-main-rgb), 0.15);
    color: var(--bs-main-600);
}

[data-theme="dark"] .nav-menu-list__link.bg-main-600 {
    background-color: var(--bs-main-600);
    color: white;
}

[data-theme="dark"] .nav-menu-list__link.bg-main-600:hover {
    background-color: var(--bs-main-700);
    color: white;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .border-neutral-30 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-neutral-400 {
    color: var(--text-muted) !important;
}

.text-purple {
    color: #8b5cf6 !important;
}

.bg-purple-25 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.btn-outline-purple {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.btn-outline-purple:hover {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   course-preview.blade.php
   ======================================== */
.cursor-pointer {
    cursor: pointer;
}

.preview-video-item {
    transition: all 0.3s ease;
}

.preview-video-item:hover {
    background-color: var(--bs-main-25) !important;
    border-color: var(--bs-main-600) !important;
    transform: translateY(-2px);
}

.preview-video-item.active {
    background-color: var(--bs-main-25) !important;
    border-color: var(--bs-main-600) !important;
    border-left: 4px solid var(--bs-main-600) !important;
}

#preview-player iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 0.75rem;
}

/* Removed duplicate utility - defined in main.css */

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

a.hover\\:text-main-600:hover {
    color: var(--bs-main-600) !important;
    transition: color 0.3s ease;
}

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

    .sticky-top {
        position: relative !important;
        top: auto !important;
    }

    .space-y-3 .btn {
        width: 100%;
    }
}

/* ========================================
   index.blade.php
   ======================================== */
.space-y-12 > * + * {
    margin-top: 12px;
}

.object-cover {
    object-fit: cover;
}

/* ========================================
   show.blade.php
   ======================================== */
.space-y-8 > * + * {
    margin-top: 8px;
}

.object-cover {
    object-fit: cover;
}

/* ========================================
   edit-profile.blade.php
   ======================================== */
/* Theme Toggle Buttons */
.theme-option-btn {
    background: white;
    border: 2px solid #e5e7eb !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-option-btn:hover {
    border-color: #3b82f6 !important;
    background: #eff6ff;
}

.theme-option-btn.active {
    background: #3b82f6;
    border-color: #3b82f6 !important;
    color: white;
}

.theme-option-btn.active i {
    color: white;
}

/* Form Styling */
.form-control, .form-select {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-main-600);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-main-rgb), 0.25);
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: #dc3545;
}

.form-control[readonly] {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.alert {
    border: none;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .flex-between {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   profile.blade.php
   ======================================== */
/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link .badge {
    margin-left: auto;
}

.nav-menu-list__link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.nav-menu-list__link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
}

/* Info Items */
.info-item {
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
}

/* Form Styling */
.form-control, .form-select {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-main-600);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-main-rgb), 0.25);
}

/* Modal Styling */
.modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .nav-menu-list__link:hover {
        transform: none;
    }
}

/* ========================================
   checkout.blade.php
   ======================================== */
.form-control:focus {
    border-color: var(--bs-main-600);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-main-600-rgb), 0.25);
}

/* ========================================
   room.blade.php
   ======================================== */
/* Full-screen meeting room styles */
.meeting-room-container {
    background: #000;
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.meeting-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    position: relative;
}

.meeting-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meeting-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.meeting-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.meeting-course {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

.meeting-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

.control-btn.leave {
    background: #ef4444;
    border-color: #dc2626;
}

.control-btn.leave:hover {
    background: #dc2626;
}

.meeting-iframe-container {
    flex: 1;
    background: #000;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 80px); /* Subtract header height */
    min-height: 500px;
}

.meeting-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 100;
}

.loading-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

.loading-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.loading-subtitle {
    font-size: 14px;
    opacity: 0.8;
    text-align: center;
    max-width: 400px;
}

.connection-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 16px 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.error-icon {
    color: #dc2626;
    font-size: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meeting-header {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .meeting-info {
        justify-content: center;
        text-align: center;
    }

    .meeting-controls {
        justify-content: center;
    }

    .meeting-title {
        font-size: 16px;
    }

    .meeting-course {
        font-size: 13px;
    }

    .control-btn {
        padding: 10px 16px;
        flex: 1;
        justify-content: center;
    }

    .meeting-iframe-container {
        height: calc(100vh - 120px); /* More space for mobile header */
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Hide scrollbars and ensure full screen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.meeting-room {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.meeting-room .container-xxl {
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
}

/* Override any parent layout constraints */
.meeting-room main {
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
}

.meeting-room .container-fluid,
.meeting-room .container,
.meeting-room .container-lg,
.meeting-room .container-xl {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
}

/* Full-screen meeting room styles */
.meeting-room-container {
    background: #000;
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.meeting-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    position: relative;
}

.meeting-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meeting-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.meeting-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.meeting-course {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

.meeting-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

.control-btn.leave {
    background: #ef4444;
    border-color: #dc2626;
}

.control-btn.leave:hover {
    background: #dc2626;
}

.meeting-iframe-container {
    flex: 1;
    background: #000;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 80px); /* Subtract header height */
    min-height: 500px;
}

.meeting-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 100;
}

.loading-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

.loading-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.loading-subtitle {
    font-size: 14px;
    opacity: 0.8;
    text-align: center;
    max-width: 400px;
}

.connection-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 16px 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.error-icon {
    color: #dc2626;
    font-size: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meeting-header {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .meeting-info {
        justify-content: center;
        text-align: center;
    }

    .meeting-controls {
        justify-content: center;
    }

    .meeting-title {
        font-size: 16px;
    }

    .meeting-course {
        font-size: 13px;
    }

    .control-btn {
        padding: 10px 16px;
        flex: 1;
        justify-content: center;
    }

    .meeting-iframe-container {
        height: calc(100vh - 120px); /* More space for mobile header */
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Hide scrollbars and ensure full screen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.meeting-room {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.meeting-room .container-xxl {
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
}

/* Override any parent layout constraints */
.meeting-room main {
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
}

.meeting-room .container-fluid,
.meeting-room .container,
.meeting-room .container-lg,
.meeting-room .container-xl {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
}

/* ========================================
   show.blade.php
   ======================================== */
/* Removed duplicate utility - defined in main.css */

/* Removed duplicate utility - defined in main.css */

.hover\:text-main-600:hover {
    color: var(--bs-main-600) !important;
    transition: color 0.3s ease;
}

.bg-success-25 {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-warning-25 {
    background-color: rgba(245, 158, 11, 0.1);
}

.bg-info-25 {
    background-color: rgba(14, 165, 233, 0.1);
}

.bg-neutral-25 {
    background-color: rgba(0, 0, 0, 0.02);
}

.recording-formats {
    display: flex;
    gap: 0.5rem;
}

.recording-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-outline-neutral-600 {
    border: 1px solid #6b7280;
    color: #6b7280;
    background: transparent;
}

.btn-outline-neutral-600:hover {
    background: #6b7280;
    color: white;
}

.flex-1 {
    flex: 1;
}

/* Dark Mode */
[data-theme="dark"] {
    --bs-body-bg: #0f1419;
    --bs-body-color: #e5e7eb;
}

[data-theme="dark"] .bg-white {
    background-color: #1e2433 !important;
}

[data-theme="dark"] .border-neutral-30,
[data-theme="dark"] .border-neutral-100 {
    border-color: #374151 !important;
}

[data-theme="dark"] .text-neutral-700,
[data-theme="dark"] .text-neutral-600 {
    color: #e5e7eb !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .bg-neutral-100 {
    background-color: #374151 !important;
}

[data-theme="dark"] .bg-main-25 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .bg-success-25 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .bg-warning-25 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="dark"] .bg-info-25 {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

[data-theme="dark"] .bg-neutral-25 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .recording-card {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .text-neutral-400 {
    color: #6b7280 !important;
}

@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .flex-center.gap-12 {
        flex-direction: column;
    }
}

/* ========================================
   course-player.blade.php
   ======================================== */
.video-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: rgba(var(--bs-main-rgb), 0.05);
}

.video-item.active {
    background: rgba(var(--bs-main-rgb), 0.1);
    border-color: var(--bs-main-600) !important;
}

/* Removed duplicate utility - defined in main.css */

.progress {
    border-radius: 8px;
}

.progress-bar {
    border-radius: 8px;
    background-color: var(--bs-success) !important;
}

.nav-pills .nav-link {
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background: var(--bs-main-600);
    color: white;
}

.nav-pills .nav-link:not(.active) {
    color: var(--bs-neutral-600);
    background: transparent;
}

.nav-pills .nav-link:not(.active):hover {
    background: var(--bs-main-25);
    color: var(--bs-main-600);
}

.cursor-pointer {
    cursor: pointer;
}

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

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

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

/* ========================================
   AI Tokens Card - Sidebar
   ======================================== */
.ai-tokens-card-simple {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.ai-tokens-card-simple:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.token-icon-simple {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.token-balance-simple {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

.btn-simple-action {
    background: white;
    color: #3b82f6;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-simple-action:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #1e40af;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-simple-link {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-simple-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    text-decoration: none;
}

/* ====================================================================
   STUDENT QUIZZES STYLES
   Consolidated CSS for all quiz-related pages
   ==================================================================== */

/* ====================================================================
   SOURCE: resources/views/student/quizzes/result.blade.php
   Quiz Results Page Styles
   ==================================================================== */

/* Quiz Results Header */
.quiz-results-header {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

.quiz-results-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,100 1000,0 1000,100"/></svg>');
    background-size: cover;
}

.results-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.results-icon-wrapper {
    position: relative;
}

.results-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.results-icon.success {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
}

.results-icon.failure {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.results-status {
    position: absolute;
    top: -12px;
    right: -12px;
}

.status-badge.passed {
    background: #10b981;
    color: white;
}

.status-badge.failed {
    background: #ef4444;
    color: white;
}

.status-badge.in-progress {
    background: #3b82f6;
    color: white;
}

.results-info {
    flex: 1;
    margin-left: 40px;
}

.results-summary {
    display: flex;
    gap: 40px;
}

.score-display, .passing-score {
    text-align: center;
}

.score-value, .passing-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.score-label, .passing-label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

.btn-back-to-course {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 16px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-back-to-course:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
}

.quiz-results-content {
    background: #f8fafc;
    padding: 40px 0;
    min-height: 100vh;
}

.results-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Score Breakdown Card */
.score-breakdown-card, .question-review-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.card-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.score-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
}

.stat-icon.correct {
    background: #10b981;
}

.stat-icon.incorrect {
    background: #ef4444;
}

.stat-icon.total {
    background: #6366f1;
}

.stat-icon.points {
    background: #f59e0b;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

/* Toggle Button */
.toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background: #2563eb;
}

/* Question Review */
.questions-review {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.question-review-item {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.question-review-item.correct {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.02);
}

.question-review-item.incorrect {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.02);
}

.question-header-review {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.question-number-review {
    display: flex;
    align-items: center;
    gap: 12px;
}

.question-number-review .number {
    width: 40px;
    height: 40px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #374151;
}

.result-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

.result-indicator.correct {
    background: #10b981;
}

.result-indicator.incorrect {
    background: #ef4444;
}

.question-points-review {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.points-earned {
    color: #10b981;
    font-size: 16px;
}

.points-total {
    color: #6b7280;
    font-size: 14px;
}

.question-text-review {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Option Review Styles */
.options-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.option-review {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.option-review.correct-option {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.option-review.user-choice:not(.correct-option) {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.option-indicator-review {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.option-review.correct-option .option-indicator-review {
    background: #10b981;
    color: white;
}

.option-review.user-choice:not(.correct-option) .option-indicator-review {
    background: #ef4444;
    color: white;
}

.option-letter {
    font-weight: 600;
    color: #6b7280;
}

.option-text-review {
    flex: 1;
    font-weight: 500;
    color: #374151;
}

.choice-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #6b7280;
    color: white;
}

.choice-label.correct {
    background: #10b981;
}

/* True/False Review */
.true-false-review {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.tf-option-review {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.tf-option-review.correct-option {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.tf-option-review.user-choice:not(.correct-option) {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.tf-indicator-review {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.tf-option-review.correct-option .tf-indicator-review {
    background: #10b981;
    color: white;
}

.tf-option-review.user-choice:not(.correct-option) .tf-indicator-review {
    background: #ef4444;
    color: white;
}

/* Short Answer Review */
.short-answer-review {
    margin-bottom: 20px;
}

.answer-section {
    margin-bottom: 16px;
}

.answer-section h5 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.user-answer, .correct-answer {
    padding: 12px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
}

.user-answer.correct {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #064e3b;
}

.user-answer.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #7f1d1d;
}

.correct-answer {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #064e3b;
}

/* Explanation Section */
.explanation-section {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.explanation-section h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 8px;
}

.explanation-section p {
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

/* Sidebar Styles */
.results-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 20px;
}

.performance-card, .quiz-details-card, .whats-next-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.performance-card h3, .quiz-details-card h3, .whats-next-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 24px 0;
}

/* Performance Circle */
.performance-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.circular-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 3.8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.circular-chart.green .circle {
    stroke: #10b981;
}

.circular-chart.red .circle {
    stroke: #ef4444;
}

.percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 22px;
    color: #1e293b;
}

.status-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
}

.status-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #064e3b;
}

.status-message.failure {
    background: rgba(239, 68, 68, 0.1);
    color: #7f1d1d;
}

/* Detail Items */
.detail-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.detail-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.detail-content {
    display: flex;
    flex-direction: column;
}

.detail-value {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
}

.detail-label {
    font-size: 12px;
    color: #6b7280;
}

/* What's Next Card */
.next-steps-success, .next-steps-failed {
    padding: 0;
}

.success-header, .failed-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.success-header {
    background: #f0fdf4;
    border: 1px solid #10b981;
}

.failed-header {
    background: #fef2f2;
    border: 1px solid #ef4444;
}

.success-icon, .failed-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.success-icon {
    background: #10b981;
}

.failed-icon {
    background: #ef4444;
}

.success-text h4, .failed-text h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #1e293b;
}

.success-text p, .failed-text p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action.primary {
    background: #3b82f6;
    color: white;
}

.btn-action.primary:hover {
    background: #2563eb;
    color: white;
    text-decoration: none;
}

.btn-action.secondary {
    background: #f8fafc;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.btn-action.secondary:hover {
    background: #f1f5f9;
    color: #374151;
    text-decoration: none;
}

.attempts-info {
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

.text-muted {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* Hidden class for toggle functionality */
.question-review-item.hidden {
    display: none;
}

/* ====================================================================
   SOURCE: resources/views/student/quizzes/take.blade.php & take-standalone.blade.php
   Quiz Taking Page Styles
   ==================================================================== */

/* Modern Quiz Header */
.quiz-header-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

.quiz-header-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,100 1000,0 1000,100"/></svg>');
    background-size: cover;
}

.quiz-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.quiz-header-info {
    display: flex;
    align-items: center;
    gap: 24px;
}

.quiz-icon-wrapper {
    position: relative;
}

.quiz-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: rgba(16, 185, 129, 0.3);
}

.quiz-summary {
    display: flex;
    gap: 40px;
}

.quiz-detail {
    text-align: center;
}


.detail-label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

.quiz-main-content {
    background: #f8fafc;
    padding: 40px 0;
    min-height: 100vh;
}

.quiz-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.quiz-content-area {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Modern Timer */
.quiz-timer-modern {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    border: 3px solid #ff6b6b;
}

.quiz-timer-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 167, 38, 0.05) 100%);
    border-radius: 17px;
}

.timer-visual {
    position: relative;
    z-index: 1;
}

.timer-circle {
    width: 80px;
    height: 80px;
    position: relative;
}

.timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 6;
}

.timer-progress {
    fill: none;
    stroke: #ff6b6b;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.timer-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b6b;
    font-weight: 700;
    font-size: 16px;
}

.timer-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.timer-title {
    display: block;
    color: #1e293b;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
}

.timer-warning {
    display: block;
    color: #ef4444;
    font-weight: 600;
    font-size: 14px;
}

/* Question Cards */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.question-card-modern {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.question-card-modern:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.question-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.question-number-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.question-number-badge .number {
    font-size: 16px;
}

.question-number-badge .total {
    font-size: 12px;
    opacity: 0.8;
}

.question-points-modern {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
}

/* Multiple Choice Options */
.options-grid {
    display: grid;
    gap: 16px;
}

.option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.option-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.option-input {
    display: none;
}

.option-input:checked + .option-indicator + .option-text {
    color: #1e40af;
    font-weight: 600;
}

.option-input:checked ~ * {
    color: #1e40af;
}

.option-card:has(.option-input:checked) {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}

.option-input:checked + .option-indicator {
    border-color: #3b82f6;
    background: #3b82f6;
}

.option-input:checked + .option-indicator .option-letter {
    display: none;
}

.option-check {
    display: none;
    color: white;
    font-size: 16px;
}

.option-input:checked + .option-indicator .option-check {
    display: block;
}

.option-text {
    flex: 1;
    font-weight: 500;
    color: #374151;
    font-size: 16px;
}

.tf-input {
    display: none;
}

.tf-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.tf-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.tf-input:checked + .tf-card {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}

.true-option .tf-input:checked + .tf-card {
    border-color: #10b981;
    background: linear-gradient(135deg, #d1fae5 0%, #dcfce7 100%);
}

.false-option .tf-input:checked + .tf-card {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.tf-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: white;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.true-option .tf-input:checked + .tf-card .tf-icon {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.false-option .tf-input:checked + .tf-card .tf-icon {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.tf-text {
    font-weight: 600;
    font-size: 18px;
    color: #374151;
}

/* Short Answer */
.short-answer-modern {
    margin-top: 16px;
}

.answer-input-wrapper {
    position: relative;
}

.answer-textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s ease;
    background: #f8fafc;
}

.answer-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.char-count {
    color: #6b7280;
    font-size: 12px;
}

/* Submit Section */
.quiz-submit-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e5e7eb;
}

.submit-card {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.submit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white" opacity="0.1"><path d="M0,100 C40,80 60,120 100,100 L100,0 L0,0 Z"/></svg>');
    background-size: cover;
}

.submit-info {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.submit-info h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.submit-info p {
    opacity: 0.9;
    margin: 0;
}

.submit-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.submit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Modern Sidebar */
.quiz-sidebar-modern {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 20px;
}

.progress-card-modern, .quiz-info-modern, .quiz-navigation {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.progress-header h3, .quiz-info-modern h3, .quiz-navigation h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.progress-circle {
    position: relative;
    width: 60px;
    height: 60px;
}

.progress-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.progress-stat {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.quiz-info-modern h3 {
    margin: 0 0 20px 0;
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.info-content {
    display: flex;
    flex-direction: column;
}

.info-value {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
}

.info-label {
    font-size: 12px;
    color: #6b7280;
}

.quiz-navigation h3 {
    margin: 0 0 20px 0;
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.question-nav-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 8px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.question-nav-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

.question-nav-btn.answered {
    border-color: #10b981;
    background: #10b981;
    color: white;
}

.question-nav-btn.current {
    border-color: #f59e0b;
    background: #f59e0b;
    color: white;
}

/* ====================================================================
   SOURCE: resources/views/student/quizzes/index.blade.php
   Quiz History Page Styles
   ==================================================================== */

/* Quiz History Page Styling */
.quiz-history-header {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

.quiz-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.quiz-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quiz-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.quiz-stat-card.total-attempts::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.quiz-stat-card.passed-attempts::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.quiz-stat-card.average-score::before {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.quiz-stat-card.total-points::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

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

.total-attempts .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.passed-attempts .stat-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.average-score .stat-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.total-points .stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Quiz Attempts Section */
.quiz-attempts-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

.quiz-attempts-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quiz-attempt-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quiz-attempt-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.quiz-attempt-item.attempt-passed::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.quiz-attempt-item.attempt-failed::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quiz-attempt-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.attempt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.attempt-info {
    flex: 1;
}

.attempt-info .quiz-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
    text-shadow: none;
}

.quiz-source-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.source-badge i {
    font-size: 14px;
}

.source-badge.source-course {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

.source-badge.source-material {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #9f1239;
}

.source-link {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.source-link:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

.attempt-score {
    display: flex;
    align-items: center;
    gap: 16px;
}

.score-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 16px;
}

.score-circle.score-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.score-circle.score-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.score-status {
    text-align: center;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.attempt-details {
    margin-bottom: 20px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.attempt-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.empty-description {
    color: #6b7280;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ====================================================================
   SOURCE: resources/views/student/quizzes/cannot-take.blade.php & cannot-take-standalone.blade.php
   Quiz Unavailable Page Styles
   ==================================================================== */

/* Theme Variables */
:root {
    --quiz-bg-primary: #ffffff;
    --quiz-bg-secondary: #f8fafc;
    --quiz-text-primary: #1e293b;
    --quiz-text-secondary: #64748b;
    --quiz-border: #e5e7eb;
    --unavailable-icon-bg: rgba(55, 65, 81, 0.2);
    --unavailable-icon-color: #374151;
    --unavailable-icon-border: rgba(55, 65, 81, 0.3);
    --stat-card-bg: #f8fafc;
    --stat-card-border: #e5e7eb;
    --stat-card-text: #374151;
    --stat-card-number: #1f2937;
    --badge-bg: #dc2626;
    --badge-text: #ffffff;
    --step-item-bg: #f8fafc;
    --step-item-border: #e5e7eb;
    --step-text-title: #374151;
    --step-text-desc: #6b7280;
}

[data-theme="dark"] {
    --quiz-bg-primary: #1f2937;
    --quiz-bg-secondary: #374151;
    --quiz-text-primary: #ffffff;
    --quiz-text-secondary: #d1d5db;
    --quiz-border: #4b5563;
    --unavailable-icon-bg: rgba(255, 255, 255, 0.2);
    --unavailable-icon-color: #ffffff;
    --unavailable-icon-border: rgba(255, 255, 255, 0.3);
    --stat-card-bg: #374151;
    --stat-card-border: #4b5563;
    --stat-card-text: #d1d5db;
    --stat-card-number: #ffffff;
    --badge-bg: #374151;
    --badge-text: #ffffff;
    --step-item-bg: #374151;
    --step-item-border: #4b5563;
    --step-text-title: #ffffff;
    --step-text-desc: #d1d5db;
}

/* Modern Quiz Unavailable Styles */
.quiz-unavailable-header {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .quiz-unavailable-header {
    background: linear-gradient(135deg, #1e293b 0%, #374151 100%) !important;
}

.quiz-unavailable-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,100 1000,0 1000,100"/></svg>');
    background-size: cover;
}

.unavailable-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.unavailable-icon-wrapper {
    position: relative;
}

.unavailable-icon {
    width: 100px;
    height: 100px;
    background: var(--unavailable-icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--unavailable-icon-color);
    backdrop-filter: blur(10px);
    border: 3px solid var(--unavailable-icon-border);
}

.unavailable-status {
    position: absolute;
    top: -12px;
    right: -12px;
}

.unavailable-info {
    flex: 1;
    margin-left: 40px;
}

.unavailable-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.summary-item.success {
    color: #10b981;
}

.summary-item i {
    font-size: 16px;
}

.quiz-unavailable-content {
    background: var(--quiz-bg-secondary);
    padding: 40px 0;
    min-height: 100vh;
}

.unavailable-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Modern Reason Card */
.modern-reason-card {
    background: var(--quiz-bg-primary);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border: 1px solid var(--quiz-border);
}

.reason-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.reason-icon-modern {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fecaca 0%, #dc2626 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

.reason-details h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--quiz-text-primary);
    margin: 0 0 8px 0;
}

.reason-details p {
    color: var(--quiz-text-secondary);
    margin: 0;
    font-size: 16px;
}

/* Restriction Stats */
.restriction-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--stat-card-bg);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    border: 2px solid var(--stat-card-border);
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: #dc2626;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.1);
}

.stat-icon.attempts {
    background: #f59e0b;
}

.stat-icon.limit {
    background: #dc2626;
}

.stat-icon.score.passed {
    background: #10b981;
}

.stat-icon.score.failed {
    background: #ef4444;
}

/* Success/Failure Messages */
.success-message, .failure-message {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.success-message {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.failure-message {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.failure-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.failure-icon {
    background: #f59e0b;
    color: white;
}

.success-text h4, .failure-text h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.success-text h4 {
    color: #065f46;
}

.failure-text h4 {
    color: #92400e;
}

.success-text p, .failure-text p {
    margin: 0;
    font-size: 14px;
}

.success-text p {
    color: #047857;
}

.failure-text p {
    color: #a16207;
}

/* Attempts History Modern */
.attempts-history-modern {
    background: var(--quiz-bg-primary);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--quiz-border);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--quiz-border);
}

.history-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--quiz-text-primary);
    margin: 0;
}

/* Timeline */
.attempts-timeline {
    position: relative;
    padding: 0 0 20px 0;
    min-height: 100px;
}

.attempts-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--quiz-border);
}

.timeline-item {
    position: relative;
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

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

.timeline-marker {
    position: relative;
    z-index: 1;
}

.marker-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-item.passed .marker-icon {
    background: #10b981;
}

.timeline-item.failed .marker-icon {
    background: #ef4444;
}

.timeline-content {
    flex: 1;
    background: var(--quiz-bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--quiz-border);
    position: relative;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}

.timeline-item.passed .timeline-content {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.timeline-item.failed .timeline-content {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.attempt-title {
    font-weight: 600;
    color: #374151;
}

.attempt-score.passed {
    background: #10b981;
    color: white;
}

.attempt-score.failed {
    background: #ef4444;
    color: white;
}

.attempt-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.attempt-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.attempt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attempt-badge.success {
    background: #10b981;
    color: white;
}

/* Sidebar Styles */
.unavailable-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 20px;
}

.quiz-details-modern, .next-steps-card {
    background: var(--quiz-bg-primary);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--quiz-border);
}

.quiz-details-modern h3, .next-steps-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--quiz-text-primary);
    margin: 0 0 20px 0;
}

/* Next Steps */
.next-steps-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--step-item-bg);
    border-radius: 12px;
    border: 1px solid var(--step-item-border);
}

.step-item.success {
    background: rgba(16, 185, 129, 0.05);
    border-color: #10b981;
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.step-item.success .step-icon {
    background: #10b981;
}

.step-item.study .step-icon {
    background: #3b82f6;
}

.step-item.practice .step-icon {
    background: #f59e0b;
}

.step-item.continue .step-icon {
    background: #8b5cf6;
}

.step-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--step-text-title);
    margin: 0 0 4px 0;
}

.step-text p {
    font-size: 12px;
    color: var(--step-text-desc);
    margin: 0;
    line-height: 1.4;
}

.action-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    border: none;
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* ====================================================================
   RESPONSIVE DESIGN
   ==================================================================== */

@media (max-width: 1200px) {
    .results-layout,
    .quiz-layout,
    .unavailable-layout {
        grid-template-columns: 1fr 300px;
        gap: 30px;
    }

    .restriction-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .results-layout,
    .quiz-layout,
    .unavailable-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .results-sidebar,
    .quiz-sidebar-modern,
    .unavailable-sidebar {
        position: relative;
        top: 0;
    }

    .results-header-content,
    .quiz-header-content,
    .unavailable-header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .results-info,
    .quiz-info,
    .unavailable-info {
        margin-left: 0;
    }

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

    .true-false-review,
    .true-false-options {
        flex-direction: column;
    }

    .unavailable-summary {
        justify-content: center;
    }

    .restriction-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .quiz-results-header,
    .quiz-header-gradient,
    .quiz-unavailable-header {
        padding: 40px 0 30px;
    }

    .quiz-title {
        font-size: 16px;
    }

    .score-value, .passing-value,
    .detail-value {
        font-size: 24px;
    }

    .results-summary,
    .quiz-summary {
        gap: 20px;
    }

    .performance-card, .quiz-details-card, .next-steps-card,
    .score-breakdown-card, .question-review-card,
    .quiz-stat-card {
        padding: 20px;
    }

    .quiz-content-area {
        padding: 20px;
    }

    .quiz-timer-modern {
        flex-direction: column;
        text-align: center;
    }

    .question-card-modern {
        padding: 20px;
    }

    .question-text-modern {
        font-size: 18px;
    }

    .question-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .attempt-header {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        text-align: center;
    }

    .quiz-source-info {
        justify-content: center;
    }

    .attempt-score {
        flex-direction: column;
        gap: 12px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .attempt-actions {
        flex-direction: column;
    }

    .modern-reason-card {
        padding: 24px;
    }

    .reason-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

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

    .attempts-timeline::before {
        left: 12px;
    }

    .timeline-marker {
        margin-left: -4px;
    }

    .attempt-meta {
        flex-direction: column;
        gap: 8px;
    }

    .quiz-details-modern, .next-steps-card {
        padding: 20px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .quiz-history-header,
[data-theme="dark"] .quiz-attempts-section,
[data-theme="dark"] .quiz-stat-card,
[data-theme="dark"] .quiz-attempt-item {
    background-color: #1e2433;
    border-color: #374151;
}

[data-theme="dark"] .quiz-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .empty-title {
    color: #ffffff;
}

[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .empty-description {
    color: #d1d5db;
}

[data-theme="dark"] .source-link {
    color: #60a5fa;
}

[data-theme="dark"] .source-link:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .empty-icon {
    background: #374151;
    color: #6b7280;
}

/* ========================================
   Student Materials CSS
   Extracted from student/materials/* blade files
   ======================================== */

/* ====================
   Dark Mode Variables
   ==================== */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #9ca3af;
    --main-color: #3b82f6;
    --main-color-25: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-card: #1e2433;
    --border-color: #374151;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
}

/* ====================
   Dark Mode Styling
   ==================== */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .border-neutral-30,
[data-theme="dark"] .border-neutral-100 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-600 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-neutral-400 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .bg-neutral-50 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-neutral-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-neutral-200 {
    background-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-secondary);
    border-color: #60a5fa;
    color: var(--text-primary);
}

[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-main-25 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* ====================
   Breadcrumb
   ==================== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: #9ca3af;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

.breadcrumb-item a,
.breadcrumb-item {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.breadcrumb-item a:hover {
    color: #000000;
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb-current,
.breadcrumb-item.active {
    color: #f37739;
    font-weight: 500;
}

[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .breadcrumb-current,
[data-theme="dark"] .breadcrumb-item.active {
    color: #f37739;
}

/* ====================
   Page Header
   ==================== */
.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
}

[data-theme="dark"] .page-header h1 {
    color: var(--text-primary);
}

.page-header p {
    font-size: 1rem;
    color: #64748b;
}

[data-theme="dark"] .page-header p {
    color: var(--text-secondary);
}

/* ====================
   Form Card
   ==================== */
.form-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

[data-theme="dark"] .form-card {
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ====================
   Section Title
   ==================== */
.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #066ac9;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

[data-theme="dark"] .section-title {
    color: #4d9fff;
}

.section-title i {
    font-size: 1.25rem;
}

/* ====================
   Form Controls
   ==================== */
.form-control {
    border-radius: 12px;
    border: 1px solid #d1d5db;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: white;
}

.form-control:focus {
    border-color: #066ac9;
    box-shadow: 0 0 0 3px rgba(6, 106, 201, 0.1);
    background-color: white;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-secondary);
    border-color: #4d9fff;
    box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.1);
}

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

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

/* ====================
   Color Picker
   ==================== */
.color-picker-wrapper {
    position: relative;
}

.color-picker {
    width: 100%;
    height: 60px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    padding: 4px;
}

[data-theme="dark"] .color-picker {
    border-color: var(--border-color);
    background-color: var(--bg-secondary);
}

.color-preview {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid white;
    pointer-events: none;
    background-color: #066ac9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .color-preview {
    border-color: var(--bg-card);
}

/* ====================
   Preview Cards
   ==================== */
.preview-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

[data-theme="dark"] .preview-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.subject-preview-card,
.lesson-preview-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

[data-theme="dark"] .subject-preview-card,
[data-theme="dark"] .lesson-preview-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.subject-stats-card {
    border: 1px solid #e5e7eb;
}

/* ====================
   Lesson Items
   ==================== */
.lesson-item {
    transition: all 0.3s ease;
}

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

[data-theme="dark"] .lesson-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ====================
   Markdown Preview
   ==================== */
.markdown-preview {
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
}

.lesson-content-markdown {
    line-height: 1.8;
    font-size: 16px;
    line-height: 1.7;
}

.lesson-content-markdown h1,
.lesson-h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.lesson-content-markdown h2,
.lesson-h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
    color: #374151;
}

.lesson-content-markdown h3,
.lesson-h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem 0;
    color: #4b5563;
}

.lesson-content-markdown h4,
.lesson-h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: #6b7280;
}

.lesson-content-markdown p,
.lesson-paragraph {
    margin: 1rem 0;
    color: #374151;
}

.lesson-content-markdown ul,
.lesson-content-markdown ol,
.lesson-list {
    margin: 1rem 0;
    padding-left: 2rem;
}

.lesson-content-markdown li,
.lesson-list-item {
    margin: 0.5rem 0;
    color: #374151;
}

.lesson-content-markdown strong {
    font-weight: 600;
    color: #334155;
}

.lesson-content-markdown em {
    font-style: italic;
}

.lesson-content-markdown code,
.lesson-inline-code {
    background-color: #f1f5f9;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Monaco, monospace;
    font-size: 0.9em;
    color: #dc2626;
}

.lesson-content-markdown pre,
.lesson-code-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
    font-family: 'Courier New', Monaco, monospace;
    font-size: 14px;
    line-height: 1.5;
}

.lesson-code-block code {
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
}

.lesson-content-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    display: block;
}

.lesson-content-markdown a {
    color: #3b82f6;
    text-decoration: underline;
}

.lesson-content-markdown a:hover {
    color: #1d4ed8;
}

/* Dark mode support for lesson content */
[data-theme="dark"] .lesson-h1,
[data-theme="dark"] .lesson-h2,
[data-theme="dark"] .lesson-h3,
[data-theme="dark"] .lesson-h4,
[data-theme="dark"] .lesson-paragraph,
[data-theme="dark"] .lesson-list-item,
[data-theme="dark"] .lesson-content-markdown h1,
[data-theme="dark"] .lesson-content-markdown h2,
[data-theme="dark"] .lesson-content-markdown h3,
[data-theme="dark"] .lesson-content-markdown h4,
[data-theme="dark"] .lesson-content-markdown p,
[data-theme="dark"] .lesson-content-markdown li {
    color: var(--text-primary);
}

[data-theme="dark"] .lesson-h1,
[data-theme="dark"] .lesson-content-markdown h1 {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .lesson-code-block,
[data-theme="dark"] .lesson-content-markdown pre {
    background: #1e293b;
    border-color: var(--border-color);
    color: #e2e8f0;
}

[data-theme="dark"] .lesson-inline-code,
[data-theme="dark"] .lesson-content-markdown code {
    background: #334155;
    color: #fbbf24;
}

/* ====================
   Button Group
   ==================== */
.btn-group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    margin: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-group .btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-group-sm .btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: 6px;
}

/* ====================
   Badges
   ==================== */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.bg-success {
    background-color: #22c55e !important;
    color: white;
}

.bg-warning {
    background-color: #f59e0b !important;
    color: white;
}

/* Removed duplicate utility - defined in main.css */

.text-neutral-600 {
    color: #6b7280;
}

[data-theme="dark"] .bg-neutral-100 {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .text-neutral-600 {
    color: var(--text-secondary);
}

/* ====================
   Loading & Animations
   ==================== */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    max-width: 400px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Hover effects */
.hover\:text-main-600:hover {
    color: #3b82f6 !important;
    transition: color 0.3s ease;
}

/* ====================
   Responsive Design
   ==================== */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .form-card,
    .p-32 {
        padding: 16px;
    }

    .p-24 {
        padding: 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn:hover,
    .lesson-item:hover {
        transform: none;
    }
}

@media (max-width: 992px) {
    .h-100 {
        min-height: auto;
    }
}

/* ====================
   Fullscreen Mode
   ==================== */
#lesson-content-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: white;
    overflow-y: auto;
    padding: 40px;
    margin: 0;
}

[data-theme="dark"] #lesson-content-container.fullscreen {
    background-color: var(--bg-card);
}

#lesson-content-container.fullscreen .content-display {
    max-width: 900px;
    margin: 0 auto;
    background-color: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] #lesson-content-container.fullscreen .content-display {
    background-color: var(--bg-secondary);
}

#lesson-content-container.fullscreen .lesson-content-markdown {
    font-size: 18px;
    line-height: 1.8;
}

/* Audio Player Styles */
.audio-player-container {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

[data-theme="dark"] .audio-player-container {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.audio-player {
    display: flex;
    align-items: center;
    gap: 16px;
}

.audio-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
}

.audio-control-btn:hover {
    background: #2563eb;
    transform: scale(1.1);
}

.audio-progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.audio-time {
    font-size: 12px;
    color: #6b7280;
    min-width: 40px;
    text-align: center;
}

[data-theme="dark"] .audio-time {
    color: var(--text-secondary);
}

.audio-progress-bar {
    flex: 1;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .audio-progress-bar {
    background-color: var(--border-color);
}

.audio-progress {
    height: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

/* Responsive Fullscreen */
@media (max-width: 768px) {
    #lesson-content-container.fullscreen {
        padding: 20px;
    }

    #lesson-content-container.fullscreen .content-display {
        padding: 24px;
    }

    #lesson-content-container.fullscreen .lesson-content-markdown {
        font-size: 16px;
    }
}

/* Course Player Modern Styles */

/* Video Player Section */
.video-player-section.compact-player {
    margin-bottom: 24px;
}

.video-player-wrapper-compact {
    width: 100%;
}

.video-player-container {
    width: 100%;
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

#preview-player {
    width: 100%;
    min-height: 500px;
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-player iframe,
#preview-player video {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    display: block;
}

/* Default placeholder state */
#preview-player .bg-neutral-100 {
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video Info Panel */
.video-info-compact {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    margin-top: -12px;
}

[data-theme="dark"] .video-info-compact {
    background: #1e293b;
}

.video-info-compact .video-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.video-info-compact .video-description {
    font-size: 14px;
    line-height: 1.6;
}

/* Video Grid */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Video Cards */
.video-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
}

[data-theme="dark"] .video-card {
    background: #1e293b;
    border-color: #334155;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .video-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.video-card.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.video-card.locked {
    opacity: 0.7;
    cursor: not-allowed;
}

.video-card.locked:hover {
    transform: none;
}

/* Video Card Header */
.video-card-header {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #f3f4f6;
}

[data-theme="dark"] .video-card-header {
    background: #0f172a;
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

[data-theme="dark"] .video-placeholder {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.video-placeholder i {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 8px;
}

[data-theme="dark"] .video-placeholder i {
    color: #64748b;
}

.video-placeholder .status-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
    opacity: 1;
}

.video-overlay i {
    font-size: 48px;
    color: white;
}

.video-overlay.locked-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

/* Video Card Body */
.video-card-body {
    padding: 16px;
}

.video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6b7280;
}

[data-theme="dark"] .video-meta {
    color: #94a3b8;
}

.video-number {
    font-weight: 600;
    color: #3b82f6;
}

.video-duration {
    display: flex;
    align-items: center;
    gap: 4px;
}

.video-title-card {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .video-title-card {
    color: #f1f5f9;
}

.video-description-card {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .video-description-card {
    color: #94a3b8;
}

.video-footer-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.video-footer-badges .badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
}

/* Video Section */
.video-section {
    margin-bottom: 32px;
}

.video-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

[data-theme="dark"] .video-section-header {
    border-bottom-color: #334155;
}

.section-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-name {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .section-name {
    color: #f1f5f9;
}

.section-count {
    font-size: 14px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

[data-theme="dark"] .section-count {
    color: #94a3b8;
    background: #334155;
}

/* Enrollment CTA Section */
.enrollment-cta-section {
    margin: 60px 0 40px;
}

.enrollment-cta-card {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .enrollment-cta-card {
    background: linear-gradient(135deg, #4c51bf 0%, #6b46c1 100%);
}

/* Background Pattern */
.cta-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.1;
}

.pattern-circle {
    position: absolute;
    border-radius: 50%;
    background: white;
}

.pattern-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
}

.pattern-circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: 10%;
}

.pattern-circle-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 20%;
}

/* CTA Content */
.cta-content {
    position: relative;
    padding: 48px;
    z-index: 1;
}

.cta-text {
    color: white;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    color: white;
}

.cta-badge i {
    font-size: 16px;
}

.cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
    line-height: 1.2;
}

.cta-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
}

/* CTA Benefits */
.cta-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefit-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon i {
    font-size: 24px;
    color: white;
}

.benefit-text {
    color: white;
    font-size: 14px;
    line-height: 1.4;
}

.benefit-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

/* CTA Action Box */
.cta-action-box {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .cta-action-box {
    background: #1e293b;
}

.cta-price-box {
    text-align: center;
    margin-bottom: 24px;
}

.cta-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.cta-price .currency {
    font-size: 20px;
    font-weight: 600;
    color: #2563eb;
}

[data-theme="dark"] .cta-price .currency {
    color: #818cf8;
}

.cta-price .amount {
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

[data-theme="dark"] .cta-price .amount {
    color: #f1f5f9;
}

.cta-price.free .amount {
    font-size: 40px;
    color: #10b981;
}

[data-theme="dark"] .cta-price.free .amount {
    color: #34d399;
}

.cta-price-label {
    font-size: 14px;
    color: #6b7280;
}

[data-theme="dark"] .cta-price-label {
    color: #94a3b8;
}

.btn-cta {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    color: white;
}

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

.cta-guarantee {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

[data-theme="dark"] .cta-guarantee {
    color: #94a3b8;
}

.cta-guarantee i {
    font-size: 16px;
    color: #10b981;
}

/* Responsive Design */
@media (max-width: 768px) {
    #preview-player {
        min-height: 300px;
    }

    #preview-player .bg-neutral-100 {
        min-height: 300px;
    }

    #preview-player iframe,
    #preview-player video {
        min-height: 300px;
    }

    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }

    .video-card-body {
        padding: 12px;
    }

    .video-title-card {
        font-size: 14px;
    }

    .section-name {
        font-size: 16px;
    }

    /* CTA Responsive */
    .cta-content {
        padding: 32px 24px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-description {
        font-size: 15px;
    }

    .cta-benefits {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cta-action-box {
        padding: 24px;
        margin-top: 32px;
    }

    .cta-price .amount {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    #preview-player {
        min-height: 250px;
    }

    #preview-player .bg-neutral-100 {
        min-height: 250px;
    }

    #preview-player iframe,
    #preview-player video {
        min-height: 250px;
    }

    .videos-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Content Manipulator Features Styles
   =================================== */

/* Quiz List Styles */
.quiz-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-header {
    margin-bottom: 1rem;
}

.quiz-title i {
    color: #066ac9;
}

.quiz-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #666;
}

.meta-item i {
    color: #999;
}

.quiz-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.latest-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-label {
    font-size: 0.875rem;
    color: #666;
}

.score-value {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

.score-value.passed {
    color: #2563eb;
    background: #dbeafe;
}

.score-value.failed {
    color: #ef4444;
    background: #fee2e2;
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-primary {
    background: #066ac9;
    color: white;
    border: none;
}

.btn-secondary {
    background: white;
    color: #066ac9;
    border: 1px solid #066ac9;
}

.btn-secondary:hover {
    background: #f0f4ff;
}

.no-quizzes-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.no-quizzes-message i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ddd;
}

.no-quizzes-message p {
    font-size: 1.125rem;
    margin: 0.5rem 0;
    color: #666;
}

.no-quizzes-message small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Flashcards Styles */
.flashcards-wrapper {
    padding: 20px 0;
}

.card-stack-indicator {
    text-align: center;
    margin-top: 24px;
}

.stack-count {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #066ac9;
    background: #eff6ff;
    padding: 6px 16px;
    border-radius: 20px;
    margin-top: 12px;
}

.progress-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}

.dot.active {
    background: #066ac9;
    width: 24px;
    border-radius: 4px;
}

.flashcard-deck {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
}

.nav-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    color: white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

.nav-arrow:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.nav-arrow:active:not(.disabled) {
    transform: scale(0.95);
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #9ca3af;
    box-shadow: none;
}

.card-stack {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 400px;
}

.card-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-shadow-1 {
    transform: scale(0.95) translateY(-8px);
    opacity: 0.5;
    z-index: 1;
}

.card-shadow-2 {
    transform: scale(0.90) translateY(-16px);
    opacity: 0.3;
    z-index: 0;
}

.flashcard-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 2;
}

.flashcard-3d.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.card-front {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 3px solid #e5e7eb;
}

.card-back {
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    transform: rotateY(180deg);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.4), 0 8px 16px rgba(59, 130, 246, 0.2);
}

.card-content {
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-label {
    position: absolute;
    top: 20px;
    left: 24px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
}

.card-front .card-label {
    color: #066ac9;
}

.card-back .card-label {
    color: white;
}

.card-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}

.card-front .card-text {
    color: #1f2937;
}

.card-back .card-text {
    color: white;
}

.flip-hint {
    position: absolute;
    bottom: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.card-front .flip-hint {
    color: #6b7280;
}

.card-back .flip-hint {
    color: white;
}

.flashcard-3d:hover .flip-hint {
    opacity: 0.7;
}

.flip-hint i {
    font-size: 16px;
}

.flashcard-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.action-btn i {
    font-size: 18px;
}

.empty-state-feature {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.empty-state-feature i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-feature p {
    margin: 0;
    font-size: 14px;
}

/* Audio Overview Styles */
.audio-player-container {
    margin-bottom: 20px;
    padding: 30px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.audio-animation-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.audio-lottie {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.audio-player {
    width: 100%;
    height: 54px;
    border-radius: 12px;
    outline: none;
}

.audio-player::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
}

.audio-warning {
    background: #fef3c7;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #92400e;
}

.audio-warning i {
    font-size: 24px;
}

.audio-warning p {
    margin: 0;
    font-size: 14px;
}

.audio-script-toggle {
    margin-bottom: 16px;
}

.audio-script {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    line-height: 1.6;
    font-size: 14px;
    margin-top: 16px;
}

.btn-regenerate {
    margin-top: 12px;
    padding: 10px 20px;
    background: #066ac9;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-regenerate:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-regenerate:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.audio-warning > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Mind Map Styles */
.mindmap-wrapper {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 16px;
    padding: 20px;
    min-height: 500px;
}

.mindmap-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mindmap-canvas {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    min-height: 450px;
    overflow: auto;
    position: relative;
}

.mind-map-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    min-width: max-content;
}

.topic-group {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    animation: fadeSlideIn 0.5s ease-out;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.main-topic {
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 200px;
    text-align: center;
    position: relative;
    user-select: none;
}

.main-topic:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
}

.main-topic.collapsed {
    opacity: 0.7;
}

.main-topic .toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    transition: transform 0.3s;
}

.main-topic.collapsed .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

.subtopics-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 30px;
}

.subtopics-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #066ac9 0%, #2563eb 100%);
    opacity: 0.3;
    border-radius: 2px;
}

.subtopic {
    background: white;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    border-left: 4px solid #066ac9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    animation: slideIn 0.4s ease-out;
    position: relative;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.subtopic:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    border-left-color: #2563eb;
}

.subtopic::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #066ac9 100%);
}

.connection-line {
    position: absolute;
    stroke: #066ac9;
    stroke-width: 2;
    fill: none;
    opacity: 0.4;
    pointer-events: none;
}

.mindmap-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.mindmap-empty i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mindmap-canvas::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mindmap-canvas::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
}

.mindmap-canvas::-webkit-scrollbar-thumb {
    background: #066ac9;
    border-radius: 4px;
}

.mindmap-canvas::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .flashcard-deck {
        gap: 12px;
    }

    .nav-arrow {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .card-stack {
        max-width: 100%;
        height: 350px;
    }

    .card-content {
        padding: 24px;
    }

    .card-text {
        font-size: 16px;
    }
}


/* ============================================
   student/content-manipulator/create.blade.php
   ============================================ */
/* Page Header */
.page-header {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

/* Form Card */
.form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

/* Section Title */
.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

/* Video Source Options */
.video-source-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.source-option {
    position: relative;
}

.source-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.source-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
}

.source-label i {
    font-size: 40px;
    margin-bottom: 12px;
}

.source-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    display: block;
}

.source-label small {
    color: #6b7280;
    font-size: 13px;
}

.source-option input[type="radio"]:checked + .source-label {
    border-color: #066ac9;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.source-input {
    margin-top: 24px;
}

/* Upload Area */
.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #066ac9;
    background: #f8fafc;
}

.upload-area.dragover {
    border-color: #066ac9;
    background: #eff6ff;
}

/* Action Options */
.action-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.action-card {
    position: relative;
}

.action-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.action-label {
    display: block;
    padding: 24px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    height: 100%;
    position: relative;
}

.action-icon i {
    font-size: 28px;
    color: #6b7280;
}

.checkmark {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.checkmark i {
    font-size: 20px;
    color: white;
}

.action-card input[type="checkbox"]:checked + .action-label {
    border-color: #066ac9;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.action-card input[type="checkbox"]:checked + .action-label .action-icon {
    background: linear-gradient(135deg, #066ac9 0%, #1d4ed8 100%);
}

.action-card input[type="checkbox"]:checked + .action-label .action-icon i {
    color: white;
}

.action-card input[type="checkbox"]:checked + .action-label .checkmark {
    opacity: 1;
    background: #2563eb;
    transform: scale(1.1);
}

.quiz-options {
    margin-top: 24px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
}

/* Form Actions */
.form-actions {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Result Card */
.result-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.result-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #066ac9 0%, #1d4ed8 100%);
    color: white;
}

.result-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.result-content {
    padding: 24px;
}

.summary-text {
    line-height: 1.8;
    color: #374151;
    white-space: pre-wrap;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.feature-icon i {
    font-size: 32px;
    color: #066ac9;
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Dark Mode */
[data-theme="dark"] .page-header,
[data-theme="dark"] .form-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .feature-card {
    background-color: #1e2433;
    border-color: #374151;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .action-title,
[data-theme="dark"] .source-name,
[data-theme="dark"] .summary-text,
[data-theme="dark"] .feature-card h4 {
    color: #ffffff;
}

[data-theme="dark"] .source-label,
[data-theme="dark"] .action-label {
    background-color: #1a1f2e;
    border-color: #374151;
}

[data-theme="dark"] .source-option input[type="radio"]:checked + .source-label,
[data-theme="dark"] .action-card input[type="checkbox"]:checked + .action-label {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: #066ac9;
}

[data-theme="dark"] .quiz-options {
    background-color: #1a1f2e;
}

[data-theme="dark"] .upload-area {
    border-color: #374151;
    background-color: #1a1f2e;
}

[data-theme="dark"] .upload-area:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .video-source-options,
    .action-options {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   student/content-manipulator/features/quiz.blade.php
   ============================================ */
/* Quiz Wrapper */
.quiz-wrapper {
    padding: 12px 0;
    max-width: 700px;
    margin: 0 auto;
}

/* Progress Bar */
.quiz-progress-bar {
    margin-bottom: 16px;
}

.progress-track {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Quiz Card */
.quiz-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}

/* Question Header */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.question-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 12px;
}

.question-badge i {
    font-size: 14px;
}

.answered-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2563eb;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.answered-badge i {
    font-size: 14px;
}

/* Question Text */
.question-text {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

/* Quiz Options */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.quiz-option {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-option:hover .option-content {
    border-color: #066ac9;
    background: #eff6ff;
    transform: translateX(3px);
}

.quiz-option.selected .option-content {
    border-color: #066ac9;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

.option-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.quiz-option:hover .option-letter {
    border-color: #066ac9;
    color: #066ac9;
}

.quiz-option.selected .option-letter {
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    border-color: #066ac9;
    color: white;
}

.option-text {
    flex: 1;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    line-height: 1.5;
}

.option-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.option-check i {
    font-size: 20px;
    color: #066ac9;
}

.quiz-option.selected .option-check {
    opacity: 1;
}

/* Navigation Buttons */
.quiz-navigation {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn i {
    font-size: 16px;
}

.nav-btn-secondary {
    background: #f3f4f6;
    color: #4b5563;
}

.nav-btn-secondary:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

.nav-btn-primary {
    background: linear-gradient(135deg, #066ac9 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.nav-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.nav-btn-submit {
    background: #2563eb;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.nav-btn-submit:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.nav-btn-large {
    padding: 12px 32px;
    font-size: 15px;
}

/* Answer Dots */
.answer-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.answer-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
}

.answer-dots .dot:hover {
    transform: scale(1.2);
}

.answer-dots .dot.active {
    background: #066ac9;
    width: 24px;
    border-radius: 4px;
}

.answer-dots .dot.answered {
    background: #2563eb;
}

.answer-dots .dot.answered.active {
    background: #066ac9;
}

/* Results Screen */
.quiz-results {
    padding: 12px 0;
}

.results-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.results-emoji {
    font-size: 48px;
    margin-bottom: 12px;
    animation: bounceIn 0.6s ease-out;
}

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

.results-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 24px 0;
}

/* Score Circle */
.score-circle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 10;
}

.score-progress {
    fill: none;
    stroke: url(#scoreGradient);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 395;
    stroke-dashoffset: 395;
    transition: stroke-dashoffset 1s ease-out;
}

.score-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-percentage {
    font-size: 32px;
    font-weight: 700;
    color: #066ac9;
    line-height: 1;
}

.score-fraction {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

.results-message {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
    font-weight: 500;
}

/* Review Section */
.review-section {
    text-align: left;
    margin: 24px 0;
    max-height: 350px;
    overflow-y: auto;
    padding: 0 8px;
}

.review-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    text-align: center;
}

.review-item {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    border-left: 3px solid #e5e7eb;
}

.review-item.correct {
    border-left-color: #2563eb;
    background: #eff6ff;
}

.review-item.incorrect {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.review-number {
    background: #066ac9;
    color: white;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.review-icon {
    font-size: 16px;
}

.review-item.correct .review-icon {
    color: #2563eb;
}

.review-item.incorrect .review-icon {
    color: #ef4444;
}

.review-question {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.review-answer {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 4px;
}

.review-label {
    font-weight: 600;
    margin-right: 4px;
}

/* Scrollbar for Review Section */
.review-section::-webkit-scrollbar {
    width: 5px;
}

.review-section::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.review-section::-webkit-scrollbar-thumb {
    background: #066ac9;
    border-radius: 10px;
}

/* SVG Gradient Definition */
.quiz-wrapper svg defs {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .quiz-card {
        padding: 18px;
    }

    .question-text {
        font-size: 16px;
    }

    .option-content {
        padding: 10px 14px;
        gap: 10px;
    }

    .option-letter {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .option-text {
        font-size: 13px;
    }

    .quiz-navigation {
        flex-direction: column;
    }

    .nav-btn {
        width: 100%;
        justify-content: center;
    }

    .results-card {
        padding: 24px 18px;
    }

    .results-title {
        font-size: 18px;
    }

    .score-circle {
        width: 120px;
        height: 120px;
    }

    .score-percentage {
        font-size: 28px;
    }
}


/* ============================================
   student/content-manipulator/features/video_overview.blade.php
   ============================================ */
.video-overview-container {
    margin-top: 1rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.video-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.video-thumbnail:hover .play-overlay {
    opacity: 1;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #666;
}

.scene-count, .created-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.video-processing, .video-failed {
    padding: 2rem;
    text-align: center;
}

.processing-icon, .error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.processing-icon {
    color: #066ac9;
}

.error-icon {
    color: #e53e3e;
}

.processing-text {
    font-weight: 500;
    color: #066ac9;
    margin: 0.5rem 0;
}

.processing-note {
    color: #666;
    font-size: 0.875rem;
}

.error-text {
    font-weight: 500;
    color: #e53e3e;
    margin: 0.5rem 0;
}

.error-details {
    display: block;
    color: #999;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.no-videos-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.no-videos-message i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ddd;
}

.no-videos-message p {
    font-size: 1.125rem;
    margin: 0.5rem 0;
    color: #666;
}

.no-videos-message small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Video Modal */
.video-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal .modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

.close-modal:hover,
.close-modal:focus {
    color: #ddd;
}


/* ============================================
   student/content-manipulator/index.blade.php
   ============================================ */
/* Enhanced Video Card Styles */
.video-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.thumbnail-placeholder i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.course-status-badge.completed {
    background: rgba(16, 185, 129, 0.95);
    color: white;
}

.course-status-badge.processing {
    background: rgba(59, 130, 246, 0.95);
    color: white;
}

.course-status-badge.failed {
    background: rgba(239, 68, 68, 0.95);
    color: white;
}

.course-status-badge i {
    font-size: 1rem;
}

.view-details-btn i {
    transition: transform 0.3s ease;
}

.view-details-btn:hover i {
    transform: translateX(4px);
}

.processing-state {
    padding: 20px;
}

/* Empty State Improvements */
.empty-state {
    padding: 80px 20px;
    text-align: center;
}

.empty-state-icon i {
    font-size: 4rem;
    color: white;
}

/* Custom Pagination Styles */
.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination .page-link {
    text-decoration: none;
    border: 1px solid;
    transition: all 0.3s ease;
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-main-600);
    border-color: var(--bs-main-600);
    color: white;
}

.pagination .page-item.disabled .page-link {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Dark Mode Support */
[data-theme="dark"] .video-card {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .course-title {
    color: #f9fafb;
}

[data-theme="dark"] .course-description {
    color: #9ca3af;
}

[data-theme="dark"] .metadata-item {
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
}

[data-theme="dark"] .course-metadata {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .empty-state-title {
    color: #f9fafb;
}

[data-theme="dark"] .empty-state-description {
    color: #9ca3af;
}

[data-theme="dark"] .pagination .page-link {
    background-color: rgba(var(--bs-main-rgb), 0.1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bs-main-600);
    border-color: var(--bs-main-600);
    color: white;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-main-600);
    border-color: var(--bs-main-600);
    color: white;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.pagination-section {
    margin-top: 2rem;
}

/* RTL Support */
[dir="rtl"] .view-details-btn:hover i {
    transform: translateX(-4px);
}

/* Spinner Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ph-spin {
    animation: spin 1s linear infinite;
}

/* Solid color variations */
.status-badge.success {
    background-color: #16a34a; /* green */
}

.status-badge.processing {
    background-color: #066ac9; /* blue */
}

.status-badge.failed,
.status-badge.error {
    background-color: #dc2626; /* red */
}

.status-badge.pending {
    background-color: #8b93ea; /* amber */
}

.status-badge.canceled {
    background-color: #6b7280; /* gray */
}


/* ============================================
   NotebookLM-Style AI Results List
   =================================== */

/* AI Results List Container */
.ai-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

/* Empty State */
.empty-state-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #9ca3af;
}

/* AI Item Card - Compact Design */
.ai-item-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.ai-item-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ai-item-card.expanded {
    border-color: #066ac9;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* AI Item Header - Compact */
.ai-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ai-item-header:hover {
    background-color: #f9fafb;
}

.ai-item-card.expanded .ai-item-header {
    background-color: #eff6ff;
}

/* AI Item Icon */
.ai-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #066ac9;
    color: white;
    font-size: 1.125rem;
}

/* AI Item Info */
.ai-item-info {
    flex: 1;
    min-width: 0;
}

.ai-item-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-item-timestamp {
    margin: 0.125rem 0 0 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* AI Item Actions */
.ai-item-actions {
    flex-shrink: 0;
}

.ai-item-expand-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #6b7280;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.ai-item-expand-btn:hover {
    color: #066ac9;
}

.ai-item-expand-btn i.rotated {
    transform: rotate(180deg);
}

/* AI Item Body - Expandable Content */
.ai-item-body {
    border-top: 1px solid #e5e7eb;
    padding: 1rem;
    background: #f9fafb;
}

/* ===================================
   Compact Feature Content Styles
   =================================== */

.compact-feature-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Compact Audio Player */
.compact-audio-player {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audio-player-compact {
    width: 100%;
    height: 40px;
    border-radius: 6px;
}

.audio-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.audio-duration,
.audio-voice {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.audio-duration i,
.audio-voice i {
    font-size: 1rem;
    color: #9ca3af;
}

/* Compact Actions */
.compact-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-compact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-compact:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-compact i {
    font-size: 1rem;
}

/* Compact Script/Transcript */
.compact-script {
    margin-top: 0.5rem;
}

.script-content {
    padding: 0.875rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #4b5563;
    max-height: 300px;
    overflow-y: auto;
}

/* Compact Mind Map */
.compact-mindmap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mindmap-stats {
    display: flex;
    gap: 0.5rem;
}

.mindmap-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compact-topic-group {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.compact-main-topic {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: #1f2937;
    transition: background-color 0.15s ease;
}

.compact-main-topic:hover {
    background: #f9fafb;
}

.compact-main-topic.expanded {
    background: #eff6ff;
}

.topic-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.topic-icon.rotated {
    transform: rotate(90deg);
}

.compact-subtopics {
    padding: 0 0.75rem 0.75rem 2rem;
}

.subtopics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtopics-list li {
    font-size: 0.8125rem;
    color: #6b7280;
    padding-left: 1rem;
    position: relative;
}

.subtopics-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #9ca3af;
}

/* Compact Flashcards */
.compact-flashcards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.flashcard-stats {
    display: flex;
    gap: 0.5rem;
}

.compact-flashcard-viewer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.compact-flashcard {
    position: relative;
    width: 100%;
    height: 200px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
}

.compact-flashcard.flipped {
    transform: rotateY(180deg);
}

.compact-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
}

.compact-card-front {
    background: #066ac9;
    color: white;
    border-color: #066ac9;
}

.compact-card-back {
    background: #764ba2;
    color: white;
    border-color: #764ba2;
    transform: rotateY(180deg);
}

.compact-card-face .card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.compact-card-face .card-text {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

.compact-card-face .flip-hint {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.compact-flashcard-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.btn-compact-nav {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1.125rem;
    color: #374151;
}

.btn-compact-nav:hover:not(.disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-compact-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.card-counter {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    min-width: 3rem;
    text-align: center;
}

/* Compact Video Player */
.compact-video-player {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.video-thumbnail-compact {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.video-thumbnail-compact img {
    width: 100%;
    height: auto;
    display: block;
}

.play-overlay-compact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.video-thumbnail-compact:hover .play-overlay-compact {
    opacity: 1;
}

.video-player-compact {
    width: 100%;
    border-radius: 8px;
}

.video-meta-compact {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.video-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.video-stat i {
    font-size: 1rem;
    color: #9ca3af;
}

/* Compact Quiz Info */
.compact-quiz-info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.quiz-stats-compact {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.quiz-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.quiz-stat i {
    font-size: 1rem;
    color: #9ca3af;
}

.quiz-progress-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-bar-compact {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.attempts-left {
    color: #066ac9;
    font-weight: 500;
}

.quiz-actions-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-compact-primary,
.btn-compact-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-compact-primary {
    background: #066ac9;
    color: white;
    border: none;
}

.btn-compact-primary:hover {
    transform: translateY(-1px);
    background: #5568d3;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.btn-compact-secondary {
    background: white;
    color: #066ac9;
    border: 1px solid #d1d5db;
}

.btn-compact-secondary:hover {
    background: #f9fafb;
    border-color: #066ac9;
}

.no-attempts-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

/* Compact Warning/Error States */
.compact-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
}

.compact-warning.processing {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.compact-warning.error {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.compact-warning i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.compact-warning p {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.compact-warning small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Scrollbar Styling for AI Results List */
.ai-results-list::-webkit-scrollbar {
    width: 6px;
}

.ai-results-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.ai-results-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ai-results-list::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-item-card {
    animation: slideInUp 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .ai-results-list {
        padding: 0.5rem;
        max-height: calc(100vh - 250px);
    }

    .ai-item-header {
        padding: 0.75rem;
    }

    .ai-item-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .ai-item-title {
        font-size: 0.8125rem;
    }

    .ai-item-body {
        padding: 0.75rem;
    }

    .compact-flashcard {
        height: 180px;
    }
}

/* ===================================
   NotebookLM Two-View System
   =================================== */

/* Wrapper for both views */
.ai-results-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* List View - Compact clickable links */
.ai-results-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    height: 100%;
}

.ai-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
    background: white;
}

.ai-item-link:hover {
    background: #f9fafb;
}

.ai-item-link.active {
    background: #eff6ff;
    border-left: 3px solid #066ac9;
}

.ai-item-link .ai-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #3b82f6;
    color: white !important;
    font-size: 1.125rem;
}

.ai-item-link .ai-item-info {
    flex: 1;
    min-width: 0;
}

.ai-item-link .ai-item-title {
    margin: 0;
    display: contents;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-item-link .ai-item-timestamp {
    margin: 0.125rem 0 0 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

.ai-item-chevron {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.ai-item-link:hover .ai-item-chevron {
    transform: translateX(2px);
    color: #6b7280;
}

/* Detail View - Full content display */
.ai-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    overflow: hidden;
}

.ai-detail-header {
    flex-shrink: 0;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-back:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-back i {
    font-size: 1rem;
}

.ai-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.detail-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.detail-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #066ac9;
    color: white;
    font-size: 1.5rem;
}

.detail-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.detail-timestamp {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #9ca3af;
}

.detail-body {
    animation: fadeIn 0.3s ease;
}

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

/* Scrollbar for detail view */
.ai-detail-content::-webkit-scrollbar {
    width: 6px;
}

.ai-detail-content::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.ai-detail-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ai-detail-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-item-link {
        padding: 0.75rem;
    }

    .ai-item-link .ai-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .detail-icon {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }

    .detail-title {
        font-size: 1.125rem;
    }

    .ai-detail-content {
        padding: 1rem;
    }
}

/* Processing/Generating State */
.ai-item-link.processing {
    opacity: 0.7;
    background: #f9fafb;
    cursor: default;
}

.ai-item-link.processing .ai-item-icon {
    background: #9ca3af;
}

.generating-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #066ac9;
    background: #eff6ff;
    border-radius: 12px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Failed State */
.ai-item-link.failed {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
}

.ai-item-link.failed .ai-item-icon {
    background: #ef4444;
}

.failed-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #ef4444;
    background: #fee2e2;
    border-radius: 12px;
}

/* ===================================
.inline-quiz-container {
    padding: 0;
}

/* Quiz Header */
.inline-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #2563eb;
    border-radius: 12px 12px 0 0;
    color: white;
    margin-bottom: 0;
}

.quiz-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.quiz-title-section .quiz-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.quiz-title-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.quiz-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.quiz-meta i {
    font-size: 1rem;
}

/* Timer */
.inline-timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.inline-timer .timer-icon {
    font-size: 1.25rem;
}

.inline-timer .timer-display {
    font-size: 1.125rem;
    font-weight: 600;
    min-width: 4rem;
    text-align: center;
}

.inline-timer.warning {
    background: rgba(239, 68, 68, 0.3);
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Progress Bar */
.inline-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 0;
    overflow: hidden;
}

.inline-progress-bar .progress-fill {
    height: 100%;
    background: #2563eb;
    transition: width 0.3s ease;
}

/* Questions Container */
.inline-questions {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Question Card */
.inline-question-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.2s ease;
}

.inline-question-card:focus-within {
    border-color: #2563eb;
}

.question-number-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.question-number-header .q-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2563eb;
    text-transform: uppercase;
}

.question-number-header .q-points {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

/* Options */
.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inline-option {
    position: relative;
    cursor: pointer;
}

.inline-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inline-option .option-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.inline-option:hover .option-content {
    background: #f3f4f6;
    border-color: #2563eb;
}

.inline-option input[type="radio"]:checked ~ .option-content {
    background: #eff6ff;
    border-color: #2563eb;
}

.inline-option .option-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    flex-shrink: 0;
}

.inline-option input[type="radio"]:checked ~ .option-content .option-letter {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.inline-option .tf-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #6b7280;
    flex-shrink: 0;
}

.inline-option input[type="radio"]:checked ~ .option-content .tf-icon {
    color: #2563eb;
}

.inline-option .option-text {
    flex: 1;
    font-size: 0.9375rem;
    color: #374151;
}

.inline-option .option-check {
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
}

.inline-option input[type="radio"]:checked ~ .option-content .option-check {
    display: flex;
}

/* Textarea */
.inline-textarea-wrapper {
    margin-top: 0.5rem;
}

.inline-textarea-wrapper textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease;
}

.inline-textarea-wrapper textarea:focus {
    outline: none;
    border-color: #2563eb;
}

.inline-textarea-wrapper textarea::placeholder {
    color: #9ca3af;
}

/* Submit Section */
.inline-submit-section {
    padding: 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.submit-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.submit-info i {
    font-size: 1.125rem;
    color: #2563eb;
}

.btn-submit-inline {
    padding: 0.75rem 2rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-submit-inline:hover:not(:disabled) {
    background: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-submit-inline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit-inline i {
    font-size: 1.125rem;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   Inline Quiz Results Styles
   =================================== */

.inline-quiz-result {
    padding: 0;
}

/* Result Header */
.result-header {
    padding: 2rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
}

.result-header.passed {
    background: #2563eb;
}

.result-header.failed {
    background: #8b93ea;
}

.result-header .result-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.result-header .result-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.result-header .result-info p {
    margin: 0;
    opacity: 0.95;
    font-size: 0.9375rem;
}

/* Score Card */
.result-score-card {
    padding: 2rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.score-main {
    text-align: center;
    margin-bottom: 2rem;
}

.score-circle {
    width: 140px;
    height: 140px;
    margin: 0 auto 1rem;
    position: relative;
}

.circular-chart {
    display: block;
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 2.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

.circular-chart.green .circle {
    stroke: #2563eb;
}

.circular-chart.orange .circle {
    stroke: #8b93ea;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}

.score-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.stat-item .stat-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #2563eb;
}

.stat-item .stat-content {
    flex: 1;
}

.stat-item .stat-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.stat-item .stat-label {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Passing Score Info */
.passing-score-info {
    padding: 1rem 2rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.passing-score-info i {
    font-size: 1rem;
    color: #2563eb;
}

/* Questions Review */
.questions-review {
    padding: 2rem;
}

.questions-review h4 {
    margin: 0 0 1.5rem 0;
    font-size: 1.125rem;
    color: #1f2937;
}

.review-question.correct {
    border-color: #2563eb;
    background: #eff6ff;
}

.review-question.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.review-number .number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
}

.review-number .result-icon {
    font-size: 1.25rem;
}

.review-question.correct .review-number .result-icon {
    color: #2563eb;
}

.review-question.incorrect .review-number .result-icon {
    color: #ef4444;
}

.review-points {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

.review-question-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2937;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Review Options */
.review-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
}

.review-option.correct-option {
    background: #eff6ff;
    border-color: #2563eb;
}

.review-option.student-answer:not(.correct-option) {
    background: #fef2f2;
    border-color: #ef4444;
}

.review-option .option-indicator {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}

.review-option.correct-option .option-indicator {
    background: #2563eb;
    color: white;
}

.review-option.student-answer:not(.correct-option) .option-indicator {
    background: #ef4444;
    color: white;
}

.review-option .option-text {
    flex: 1;
    font-size: 0.9375rem;
    color: #374151;
}

.review-option .answer-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.review-option .answer-badge:not(.correct) {
    background: #fee2e2;
    color: #dc2626;
}

.review-option .answer-badge.correct {
    background: #dbeafe;
    color: #5568d3;
}

/* True/False Review */
.review-tf {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.tf-result {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.tf-result .label {
    color: #6b7280;
    font-weight: 500;
}

.tf-result .value {
    font-weight: 600;
}

.tf-result .value.correct {
    color: #2563eb;
}

.tf-result .value.incorrect {
    color: #ef4444;
}

/* Short Answer Review */
.review-short-answer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.answer-box {
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid;
}

.student-answer-box {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.correct-answer-box {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Question Explanation */
.question-explanation {
    margin-top: 1rem;
    padding: 1rem;
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
}

.explanation-header i {
    font-size: 1rem;
}

.explanation-text {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

/* Result Actions */
.result-actions {
    padding: 2rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-retake,
.btn-back-to-list {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: 2px solid;
}

.btn-retake {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

.btn-retake:hover {
    background: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-back-to-list {
    background: white;
    color: #6b7280;
    border-color: #e5e7eb;
}

.btn-back-to-list:hover {
    background: #f9fafb;
    border-color: #2563eb;
    color: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
    .inline-quiz-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

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

    .result-actions {
        flex-direction: column;
    }

    .btn-retake,
    .btn-back-to-list {
        width: 100%;
        justify-content: center;
    }

    .inline-submit-section {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-submit-inline {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
   Fullscreen Mode Styles
   =================================== */

.btn-fullscreen {
    padding: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.btn-fullscreen:hover {
    background: #f9fafb;
    border-color: #2563eb;
    color: #2563eb;
}

.btn-fullscreen i {
    font-size: 1.125rem;
}

/* Fullscreen Mode */
.ai-studio-section.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: white;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.ai-studio-section.fullscreen-mode .ai-results-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.ai-studio-section.fullscreen-mode .ai-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ai-studio-section.fullscreen-mode .ai-detail-content {
    flex: 1;
    overflow-y: auto;
}

.ai-studio-section.fullscreen-mode .ai-detail-header {
    flex-shrink: 0;
}

/* Fullscreen Animation */
.ai-studio-section {
    transition: all 0.3s ease;
}

/* Adjust detail header spacing in fullscreen */
.ai-studio-section.fullscreen-mode .ai-detail-header {
    padding: 1.25rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-studio-section.fullscreen-mode .btn-back {
    padding: 0.625rem 1.25rem;
}

.ai-studio-section.fullscreen-mode .btn-fullscreen {
    width: 40px;
    height: 40px;
}

/* Responsive Fullscreen */
@media (max-width: 768px) {
    .ai-studio-section.fullscreen-mode .ai-detail-header {
        padding: 1rem 1.5rem;
    }

    .btn-fullscreen {
        width: 32px;
        height: 32px;
    }

    .btn-fullscreen i {
        font-size: 1rem;
    }
}

/* ===================================
   Modern Card Grid Styles (Index Page)
   =================================== */

.scale-hover-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scale-hover-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

.scale-hover-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail-placeholder-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    color: white;
}

.thumbnail-placeholder-modern i {
    font-size: 4rem;
    opacity: 0.9;
}

/* Removed duplicate utility - defined in main.css */

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.link {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s ease;
}

.link:hover {
    color: #2563eb;
}

.cover-img {
    object-fit: cover;
}

.transition-1 {
    transition: all 0.15s ease;
}

/* Removed duplicate - defined in main.css */

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.check-list li {
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .course-item__thumb {
        height: 160px;
    }

    .thumbnail-placeholder-modern i {
        font-size: 3rem;
    }
}

/* Filter visibility for new grid */
#videosGrid .video-card {
    display: block;
}

#videosGrid .video-card.hidden {
    display: none;
}

/* ===================================
   Document Thumbnail Placeholder
   =================================== */

.thumbnail-placeholder-document {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    padding: 2rem;
}

.document-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.document-pages {
    position: relative;
    width: 120px;
    height: 140px;
}

.page {
    position: absolute;
    width: 90px;
    height: 110px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.page::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 4px;
    background: #2563eb;
    border-radius: 2px;
}

.page::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 12px;
    right: 20px;
    bottom: 12px;
    background: linear-gradient(#e5e7eb 2px, transparent 2px),
    linear-gradient(#e5e7eb 2px, transparent 2px);
    background-size: 100% 12px;
    background-position: 0 0, 0 6px;
}

.page-1 {
    left: 0;
    top: 30px;
    transform: rotate(-8deg);
    z-index: 1;
}

.page-2 {
    left: 15px;
    top: 15px;
    transform: rotate(-3deg);
    z-index: 2;
}

.page-3 {
    left: 30px;
    top: 0;
    transform: rotate(2deg);
    z-index: 3;
}

.scale-hover-item:hover .page-1 {
    transform: rotate(-10deg) translateY(2px);
}

.scale-hover-item:hover .page-2 {
    transform: rotate(-4deg) translateY(1px);
}

.scale-hover-item:hover .page-3 {
    transform: rotate(3deg) translateY(-1px);
}

.document-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 600;
    color: #2563eb;
    font-size: 0.9375rem;
}

.document-label i {
    font-size: 1.25rem;
}

/* Responsive adjustments for document placeholder */
@media (max-width: 768px) {
    .document-pages {
        width: 100px;
        height: 120px;
    }

    .page {
        width: 75px;
        height: 95px;
    }

    .document-label {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .document-label i {
        font-size: 1.125rem;
    }
}

/* ===================================
   Video Preview & Transcript Styles
   =================================== */

/* Video Preview Section */
.source-video-preview {
    margin: 1.5rem 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.video-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 500;
    color: #333;
}

.video-preview-header i {
    font-size: 1.25rem;
    color: #2563eb;
}

.video-embed-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Source Actions (Transcript Button) */
.source-actions {
    margin: 1rem 0;
}

.source-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.source-action-btn:hover {
    background: #f8f9fa;
    border-color: #2563eb;
    color: #2563eb;
}

.source-action-btn i {
    font-size: 1.25rem;
}

/* Transcript Section */
.source-transcript {
    margin: 1rem 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.transcript-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #2563eb;
    color: white;
    font-weight: 500;
}

.transcript-header i {
    font-size: 1.25rem;
}

.transcript-content {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Transcript scrollbar styling */
.transcript-content::-webkit-scrollbar {
    width: 8px;
}

.transcript-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.transcript-content::-webkit-scrollbar-thumb {
    background: #2563eb;
    border-radius: 4px;
}

.transcript-content::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-embed-wrapper {
        padding-bottom: 75%; /* Adjust aspect ratio for mobile */
    }

    .transcript-content {
        max-height: 300px;
        font-size: 0.875rem;
    }
}

/* ===================================
   Audio Overview Styles
   =================================== */

.source-audio-overview {
    margin: 1rem 0;
}

.source-audio-content {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.audio-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #2563eb;
    color: white;
    font-weight: 500;
}

.audio-preview-header i {
    font-size: 1.25rem;
}

.audio-player-wrapper {
    padding: 1rem;
}

.audio-player-full {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    outline: none;
}

.audio-player-full:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.audio-info {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.875rem;
    color: #666;
}

.audio-info span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.audio-info i {
    font-size: 1rem;
    color: #2563eb;
}

.audio-processing,
.audio-error {
    padding: 2rem 1rem;
    text-align: center;
    color: #666;
}

.audio-processing i {
    font-size: 2rem;
    color: #2563eb;
    margin-bottom: 0.5rem;
}

.audio-error i {
    font-size: 2rem;
    color: #dc2626;
    margin-bottom: 0.5rem;
}

.audio-processing p,
.audio-error p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Spin animation for processing icon */
@keyframes ph-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   MODERN CONTENT MANIPULATOR UI/UX
   ========================================== */

:root {
    /* Modern Color Palette - Blue Theme */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --secondary: #10b981;
    --accent: #f59e0b;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;

    /* Neutrals */
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-dark: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Resets & Base Styles */
.notebook-lm-container {
    display: flex;
    height: calc(100vh - 70px);
    background: transparent;
    padding: var(--space-lg);
    gap: var(--space-lg);
    overflow: hidden;
}

/* Removed main-content-area - now using direct two-panel layout */

/* ==========================================
   SOURCES PANEL (Left Sidebar)
   ========================================== */
.sources-panel {
    width: 100%;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--transition-slow);
}

.panel-header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.panel-header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.panel-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.panel-header h2 i {
    font-size: 1.5rem;
    color: var(--primary);
}

.download-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.download-link:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Sources List */
.sources-list {
    padding: var(--space-xl);
    overflow-y: auto;
    flex: 1;
}

.source-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
    transition: all var(--transition);
}

.source-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.source-item.active {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.source-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.source-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.source-info p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Video/Document Preview */
.source-video-preview {
    margin-top: var(--space-lg);
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.video-preview-header {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
}

.video-embed-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Transcript */
.source-actions {
    margin-top: var(--space-lg);
}

.source-action-btn {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
    cursor: pointer;
}

.source-action-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.source-transcript {
    margin-top: var(--space-md);
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.transcript-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.transcript-content {
    padding: var(--space-lg);
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ==========================================
   CHAT PANEL (Main - Takes 70% of space)
   ========================================== */
.chat-panel-main {
    display: flex;
    flex-direction: column;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    position: relative;
    transition: all var(--transition-slow);
    min-width: 0;
    /* flex: removed to allow Split.js to control width */
}

.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    position: relative;
    transition: all var(--transition-slow);
}

/* Empty state for full panel */
.empty-state-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
    height: 100%;
}

.empty-state-full i {
    font-size: 5rem;
    color: var(--primary);
    margin-bottom: var(--space-lg);
}

.empty-state-full h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--space-md) 0 var(--space-sm);
}

.empty-state-full p {
    font-size: 1rem;
    max-width: 500px;
}

.empty-state-full.error i {
    color: var(--danger);
}

.chat-panel.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
    margin: 0;
}

.chat-header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.chat-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.chat-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.3;
}

.chat-header .summary-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.chat-header .summary {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.chat-header .summary-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-xs) 0;
    transition: all var(--transition);
}

.chat-header .summary-toggle:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.fullscreen-btn {
    padding: var(--space-sm) var(--space-md);
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fullscreen-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

/* Chat Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Empty State */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
}

.empty-state i {
    font-size: 2rem;
    opacity: 0.8;
}

.empty-state h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.empty-state p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.empty-state.error i {
    color: var(--danger);
}

/* Message Bubbles */
.message-wrapper {
    animation: slideIn 0.3s ease-out;
}

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

.message-row {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
}

.message-row.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.message-row.user .message-avatar {
    background: linear-gradient(135deg, var(--secondary) 0%, #059669 100%);
}

.message-text {
    max-width: 70%;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    line-height: 1.6;
    box-shadow: var(--shadow);
}

.message-row.ai .message-text {
    background: white;
    color: var(--text-primary);
    border-bottom-left-radius: var(--space-sm);
}

.message-row.user .message-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white !important;
    border-bottom-right-radius: var(--space-sm);
}

/* Chat Input */
.chat-input-area {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-light);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.input-wrapper {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-sm);
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

#chatInput {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--space-md);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    max-height: 150px;
    font-family: inherit;
}

#sendBtn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

#sendBtn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

#sendBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================
   AI STUDIO PANEL (Right Sidebar)
   ========================================== */
.studio-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--transition-slow);
    min-width: 300px;
    /* flex, min-width, max-width removed to allow Split.js to control width */
}

/* Tab Navigation */
.studio-tabs {
    display: flex;
    gap: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-bottom: 2px solid var(--border-light);
    padding: 0;
}

.studio-tab {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.studio-tab i {
    font-size: 1.25rem;
}

.studio-tab:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.studio-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.studio-tab.active i {
    color: var(--primary);
}

/* Tab Content */
.studio-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sources-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* AI Actions Toolbar */
.ai-actions-toolbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.ai-action-btn {
    aspect-ratio: 1;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.ai-action-btn i {
    font-size: 1.25rem;
    color: var(--primary);
}

.ai-action-btn:hover {
    border-color: var(--primary);
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.ai-action-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.ai-action-btn.loading i {
    animation: spin 1s linear infinite;
}

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

/* AI Results */
.ai-results-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.ai-results-list {
    display: contents;
    flex-direction: column;
    gap: var(--space-sm);
}

.empty-state-results {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-results i {
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: var(--space-md);
}

/* AI Item Link */
.ai-item-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: white;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.ai-item-link:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.ai-item-link.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
}

.ai-item-link.processing {
    opacity: 0.7;
}

.ai-item-link.failed {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.ai-item-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.ai-item-link.failed .ai-item-icon {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
}

.ai-item-info {
    flex: 1;
    min-width: 0;
}

.ai-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.generating-badge,
.failed-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.generating-badge {
    background: var(--primary);
    color: white;
}

.failed-badge {
    background: var(--danger);
    color: white;
}

.ai-item-timestamp {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.ai-item-chevron {
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.ai-item-link:hover .ai-item-chevron {
    transform: translateX(4px);
}

/* AI Detail View */
.ai-detail-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-glass-dark);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.ai-detail-header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.btn-back,
.btn-fullscreen {
    padding: var(--space-sm) var(--space-md);
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-primary);
}

.btn-back:hover,
.btn-fullscreen:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ai-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.detail-title-section {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

.detail-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-lg);
}

.detail-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.detail-timestamp {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.detail-body {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

/* Empty State Studio */
.empty-state-studio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
}

/* Gutter Styles for Split.js */
.gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative;
    pointer-events: auto;
}

.gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}

.gutter-collapse-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow);
    z-index: 1000;
    pointer-events: auto;
}

.gutter-collapse-btn i {
    pointer-events: none;
    font-size: 16px;
}

.gutter-collapse-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .notebook-lm-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 70px);
    }

    .ai-actions-toolbar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .notebook-lm-container {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .panel-header,
    .chat-header,
    .ai-detail-header {
        padding: var(--space-md);
    }

    .sources-list,
    .chat-messages,
    .ai-results-wrapper,
    .ai-detail-content {
        padding: var(--space-md);
    }

    .ai-actions-toolbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .message-text {
        max-width: 85%;
    }
}

/* Loading Animation */
.ph-spin {
    animation: spin 1s linear infinite;
}

/* Notification Styles (already in the blade file, but adding here for completeness) */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
    box-shadow: var(--shadow-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    backdrop-filter: blur(20px);
}

.notification-success {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
}

.notification-error {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    color: white;
}

.notification-info {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
}

@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;
    }
}

/* ==========================================
   MODERN FLASHCARDS WITH 3D FLIP EFFECT
   ========================================== */
.modern-flashcards {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.flashcard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.stat-badge i {
    font-size: 1.25rem;
}

.card-counter-top {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Flashcard Stack Container */
.flashcard-stack-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    margin: var(--space-md) 0;
}

/* Shadow Cards for Depth Effect */
.shadow-card {
    position: absolute;
    width: 85%;
    height: 450px;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.shadow-card-1 {
    transform: translateY(8px) scale(0.95);
    opacity: 0.7;
    z-index: 1;
}

.shadow-card-2 {
    transform: translateY(16px) scale(0.9);
    opacity: 0.4;
    z-index: 0;
}

.shadow-card-3 {
    transform: translateY(24px) scale(0.85);
    opacity: 0.2;
    z-index: -1;
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--primary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-arrow:hover:not(.disabled) {
    background: var(--primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-arrow-left {
    left: -60px;
}

.nav-arrow-right {
    right: -60px;
}

/* 3D Flashcard Container */
.flashcard-3d-container {
    width: 90%;
    max-width: 500px;
    height: 450px;
    perspective: 1500px;
    cursor: pointer;
    z-index: 5;
}

.flashcard-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard-3d.flipped {
    transform: rotateY(180deg);
}

/* Card Faces */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.card-front {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid var(--primary);
}

.card-back {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    transform: rotateY(180deg);
    color: white;
}

/* Card Corner Badge */
.card-corner-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.card-back .card-corner-badge {
    background: white;
    color: var(--primary);
}

/* Card Content */
.card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) 0;
}

.card-text {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    color: var(--text-primary);
}

.card-back .card-text {
    color: white;
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 2px dashed rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.card-back .card-footer {
    border-top-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.card-footer i {
    font-size: 1.25rem;
    animation: tap-hint 2s ease-in-out infinite;
}

@keyframes tap-hint {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Progress Dots */
.flashcard-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--border);
    cursor: pointer;
    transition: all var(--transition);
}

.progress-dot:hover {
    background: var(--primary-light);
    transform: scale(1.2);
}

.progress-dot.active {
    background: var(--primary);
    width: 32px;
    border-radius: var(--radius-full);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .nav-arrow-left {
        left: -50px;
    }

    .nav-arrow-right {
        right: -50px;
    }

    .flashcard-3d-container {
        width: 100%;
        height: 480px;
        max-width: 100%;
    }

    .flashcard-3d {
        height: 480px;
    }

    .card-face {
        padding: var(--space-xl);
    }

    .card-text {
        font-size: 1.25rem;
    }

    .shadow-card {
        height: 480px;
    }
}

@media (max-width: 480px) {
    .modern-flashcards {
        padding: 1rem 0;
    }

    .flashcard-header {
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .flashcard-stack-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        min-height: auto !important;
        padding: 0 1rem !important;
        position: relative !important;
    }

    /* Navigation buttons row above card */
    .nav-arrow-left,
    .nav-arrow-right {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .nav-arrow-left {
        margin-right: auto !important;
    }

    .nav-arrow-right {
        margin-left: auto !important;
    }

    /* Full width card below buttons */
    .flashcard-3d-container {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 450px !important;
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .flashcard-3d {
        width: 100% !important;
        height: 450px !important;
    }

    /* Hide shadow cards on mobile */
    .shadow-card,
    .shadow-card-1,
    .shadow-card-2,
    .shadow-card-3 {
        display: none !important;
    }

    /* Larger text for readability */
    .card-face {
        padding: 2rem 1.5rem !important;
    }

    .card-text {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
    }

    .card-content {
        padding: 1.5rem 0 !important;
    }

    .card-corner-badge {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
        top: 1rem;
        right: 1rem;
    }

    .card-footer {
        font-size: 0.875rem;
    }

    /* Progress dots */
    .flashcard-progress {
        padding: 1rem;
        gap: 0.625rem;
    }

    .progress-dot {
        width: 10px;
        height: 10px;
    }

    .progress-dot.active {
        width: 28px;
    }
}

/* ============================================
   SIMPLE AUDIO PLAYER
   ============================================ */

.simple-audio-feature {
    width: 100%;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Simple Player Container */
.simple-player {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 530px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.15);
    overflow: hidden;
}

/* Custom Range Input Styling */
.simple-player input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    background: #e5e7eb;
    height: 5px;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
}

.simple-player input[type="range"]::-ms-fill-lower {
    background: #e5e7eb;
}

.simple-player input[type="range"]::-ms-fill-upper {
    background: #e5e7eb;
}

.simple-player input[type="range"]::-moz-range-track {
    border: none;
    background: #e5e7eb;
}

.simple-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #3b82f6;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    box-shadow: -100vw 0 0 100vw #93c5fd;
}

.simple-player input[type="range"]::-moz-range-thumb {
    background: #3b82f6;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    border: none;
}

.simple-player input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    background: #3b82f6;
    height: 8px;
    width: 8px;
    border-radius: 100%;
}

/* Player Cover (Lottie) */
.player-cover {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Player Info */
.player-info {
    position: absolute;
    left: 50%;
    top: 230px;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    padding: 0 var(--space-lg);
}

.info-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.info-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.info-subtitle i {
    font-size: 1rem;
    color: #3b82f6;
}

/* Button Box */
.btn-box {
    position: absolute;
    top: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
}

.btn-box i {
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-box i:hover {
    color: #3b82f6;
    transform: scale(1.1);
}

.btn-box i.active {
    color: #3b82f6;
}

/* Volume Box */
.volume-box {
    display: none;
    position: absolute;
    left: 50%;
    top: 270px;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0 20px;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.volume-box.active {
    display: flex;
    align-items: center;
}

.volume-down,
.volume-up {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.3s ease;
    border-radius: var(--radius-md);
}

.volume-down:hover,
.volume-up:hover {
    color: #3b82f6;
    background: #eff6ff;
}

.volume-down i,
.volume-up i {
    font-size: 1.125rem;
}

.volume-range {
    width: 150px;
    margin: 0 var(--space-sm);
}

/* Music Box */
.music-box {
    position: absolute;
    left: 50%;
    top: 360px;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 var(--space-2xl);
}

.seekbar {
    width: 100%;
    margin-bottom: 12px;
}

.seekbar::-webkit-slider-thumb {
    height: 5px;
    width: 7px;
}

.current-time {
    position: absolute;
    left: var(--space-lg);
    top: 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.duration-time {
    position: absolute;
    right: var(--space-lg);
    top: 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.play-btn {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn:hover {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.45);
}

.play-btn:active {
    transform: translateX(-50%) scale(1.02);
}

.play-btn i {
    font-size: 2rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Transcript Section */
.simple-audio-feature .text-center {
    width: 100%;
    max-width: 600px;
    margin-top: var(--space-xl);
}

/* Transcript Button */
.btn-transcript {
    padding: var(--space-sm) var(--space-lg);
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-transcript:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-transcript i {
    font-size: 1.125rem;
}

/* Transcript Box */
.transcript-box {
    margin-top: var(--space-md);
    width: 100%;
}

.script-content {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.8;
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

.script-content::-webkit-scrollbar {
    width: 8px;
}

.script-content::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: var(--radius-full);
}

.script-content::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: var(--radius-full);
}

.script-content::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Audio Status Messages */
.audio-status-message {
    padding: var(--space-xl);
    text-align: center;
}

.audio-status-message .status {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.audio-status-message .status i {
    font-size: 3rem;
}

.audio-status-message .status.processing {
    border: 2px solid rgba(59, 130, 246, 0.2);
}

.audio-status-message .status.failed {
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.audio-status-message .status.info {
    border: 2px solid rgba(234, 179, 8, 0.2);
}

.audio-status-message p {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.audio-status-message small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Responsive Simple Audio Player */
@media (max-width: 768px) {
    .simple-player {
        max-width: 350px;
        height: 500px;
    }

    .player-cover {
        width: 130px;
        height: 130px;
        top: 40px;
    }

    .player-info {
        top: 200px;
    }

    .btn-box {
        top: 270px;
    }

    .volume-box {
        top: 240px;
    }

    .music-box {
        top: 330px;
    }

    .play-btn {
        width: 56px;
        height: 56px;
        top: 55px;
    }

    .play-btn i {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .simple-player {
        max-width: 320px;
        height: 480px;
    }

    .player-cover {
        width: 120px;
        height: 120px;
        top: 35px;
    }

    .player-info {
        top: 185px;
    }

    .info-title {
        font-size: 1.125rem;
    }

    .info-subtitle {
        font-size: 0.8125rem;
    }

    .btn-box {
        top: 250px;
    }

    .btn-box i {
        font-size: 1.375rem;
    }

    .volume-box {
        top: 220px;
    }

    .volume-range {
        width: 120px;
    }

    .music-box {
        top: 310px;
        padding: 0 var(--space-lg);
    }

    .play-btn {
        width: 52px;
        height: 52px;
        top: 50px;
    }

    .play-btn i {
        font-size: 1.5rem;
    }

    .script-content {
        max-height: 200px;
        padding: var(--space-md);
    }
}

/* ==========================================
   CONFIRMATION MODAL
   ========================================== */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-xl);
}

.confirm-modal-content {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 450px;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
}

.confirm-modal-header {
    padding: var(--space-xl);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.confirm-modal-header i {
    font-size: 2rem;
    opacity: 0.95;
}

.confirm-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.confirm-modal-body {
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-primary);
}

.confirm-modal-body .modal-message {
    margin: 0 0 var(--space-lg) 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-weight: 500;
}

/* Language Selection */
.language-selection {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.language-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
}

.language-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.language-option:hover {
    border-color: var(--primary-light);
    background: rgba(59, 130, 246, 0.03);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.language-option.active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: var(--shadow-md);
}

.language-icon {
    font-size: 2rem;
    line-height: 1;
    min-width: 40px;
    text-align: center;
}

.language-name {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checkmark {
    color: var(--border);
    font-size: 1.5rem;
    transition: all var(--transition);
}

.language-option.active .checkmark {
    color: var(--primary);
}

.language-option:not(.active) .checkmark {
    opacity: 0.3;
}

.confirm-modal-actions {
    padding: var(--space-lg) var(--space-xl);
    background: white;
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
    border-top: 1px solid var(--border-light);
}

.confirm-modal-actions button {
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    outline: none;
}

.confirm-modal-actions .btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.confirm-modal-actions .btn-cancel:hover {
    background: var(--border);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.confirm-modal-actions .btn-confirm {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.confirm-modal-actions .btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.confirm-modal-actions button i {
    font-size: 1.125rem;
}

/* RTL Support for Arabic */
[dir="rtl"] .confirm-modal-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .confirm-modal-header,
[dir="rtl"] .confirm-modal-actions button {
    flex-direction: row-reverse;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .confirm-modal-overlay {
        padding: var(--space-md);
    }

    .confirm-modal-content {
        max-width: 100%;
    }

    .confirm-modal-header {
        padding: var(--space-lg);
    }

    .confirm-modal-header i {
        font-size: 1.5rem;
    }

    .confirm-modal-header h3 {
        font-size: 1.125rem;
    }

    .confirm-modal-body {
        padding: var(--space-xl) var(--space-lg);
    }

    .confirm-modal-body .modal-message {
        font-size: 0.9375rem;
    }

    .language-option {
        padding: var(--space-md);
    }

    .language-icon {
        font-size: 1.5rem;
        min-width: 32px;
    }

    .language-name {
        font-size: 1rem;
    }

    .checkmark {
        font-size: 1.25rem;
    }

    .confirm-modal-actions {
        padding: var(--space-md) var(--space-lg);
        flex-direction: column-reverse;
    }

    .confirm-modal-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================
   QUIZ UI/UX MODERN STYLES
   ========================================== */

/* Quiz Compact View */
.compact-quiz-info {
    padding: var(--space-lg);
}

.quiz-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.quiz-stats-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.quiz-stat {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.quiz-stat i {
    font-size: 1.125rem;
    color: var(--primary);
}

.quiz-progress-compact {
    margin-bottom: var(--space-lg);
}

.progress-bar-compact {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.progress-bar-compact .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attempts-left {
    color: var(--primary);
    font-weight: 600;
}

.quiz-actions-compact {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.btn-compact-primary,
.btn-compact-secondary {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition);
    text-decoration: none;
}

.btn-compact-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.btn-compact-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-compact-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-compact-secondary:hover {
    background: var(--border);
    transform: translateY(-2px);
}

.no-attempts-left {
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Inline Quiz Container */
.inline-quiz-container {
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Quiz Header */
.inline-quiz-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: var(--space-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.quiz-title-section {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    flex: 1;
}

.quiz-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.quiz-title-info h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    opacity: 0.95;
}

.quiz-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
}

.quiz-meta i {
    font-size: 1.125rem;
}

/* Timer */
.inline-timer {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition);
}

.inline-timer.warning {
    background: rgba(239, 68, 68, 0.2);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.timer-icon i {
    font-size: 1.5rem;
}

.timer-display {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Progress Bar */
.inline-progress-bar {
    height: 6px;
    background: var(--bg-secondary);
    position: relative;
}

.inline-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    transition: width 0.3s ease;
}

.inline-quiz-container > .progress-text {
    padding: var(--space-md) var(--space-2xl);
    background: var(--bg-primary);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
}

/* Questions Container */
.inline-questions {
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Question Card */
.inline-question-card {
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition);
}

.inline-question-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.question-number-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-light);
}

.q-number {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.q-points {
    background: var(--bg-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.question-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: var(--space-xl);
    font-weight: 500;
}

/* Question Options */
.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.inline-option {
    cursor: pointer;
    position: relative;
}

.inline-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.inline-option:hover .option-content {
    border-color: var(--primary-light);
    background: rgba(59, 130, 246, 0.05);
    transform: translateX(4px);
}

.inline-option input:checked + .option-content {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    box-shadow: var(--shadow-sm);
}

.option-letter,
.tf-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-lg);
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9375rem;
    flex-shrink: 0;
    transition: all var(--transition);
}

.inline-option input:checked + .option-content .option-letter,
.inline-option input:checked + .option-content .tf-icon {
    background: var(--primary);
    color: white;
}

.tf-icon {
    font-size: 1.25rem;
}

.option-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.option-check {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    opacity: 0;
    transition: all var(--transition);
}

.inline-option input:checked + .option-content .option-check {
    opacity: 1;
    background: var(--success);
    border-color: var(--success);
}

/* Textarea */
.inline-textarea-wrapper {
    width: 100%;
}

.inline-textarea-wrapper textarea {
    width: 100%;
    padding: var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
    transition: all var(--transition);
}

.inline-textarea-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.inline-textarea-wrapper textarea::placeholder {
    color: var(--text-tertiary);
}

/* Submit Section */
.inline-submit-section {
    padding: var(--space-2xl);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.submit-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.submit-info i {
    font-size: 1.25rem;
    color: var(--primary);
}

.btn-submit-inline {
    padding: var(--space-lg) var(--space-2xl);
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    cursor: pointer;
    transition: all var(--transition);
    width: 100%;
}

.btn-submit-inline:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-submit-inline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit-inline i {
    font-size: 1.25rem;
}

/* RTL Support */
[dir="rtl"] .inline-option:hover .option-content {
    transform: translateX(-4px);
}

[dir="rtl"] .submit-info {
    border-left: none;
    border-right: 4px solid var(--primary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .inline-quiz-header {
        padding: var(--space-lg);
    }

    .quiz-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .quiz-title-info h3 {
        font-size: 1.25rem;
    }

    .quiz-meta {
        font-size: 0.875rem;
        gap: var(--space-md);
    }

    .inline-timer {
        padding: var(--space-sm) var(--space-md);
    }

    .timer-display {
        font-size: 1.125rem;
    }

    .inline-questions {
        padding: var(--space-lg);
        gap: var(--space-lg);
    }

    .inline-question-card {
        padding: var(--space-md);
    }

    .question-text {
        font-size: 1rem;
    }

    .option-content {
        padding: var(--space-md);
    }

    .inline-submit-section {
        padding: var(--space-lg);
    }

    .btn-submit-inline {
        font-size: 1rem;
        padding: var(--space-md) var(--space-xl);
    }

    .quiz-actions-compact {
        flex-direction: column;
    }

    .btn-compact-primary,
    .btn-compact-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================
   FULLSCREEN MODAL
   ========================================== */
.fullscreen-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: var(--space-xl);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fullscreen-modal-overlay.active {
    opacity: 1;
}

.fullscreen-modal-content {
    background: white;
    border-radius: var(--radius-2xl);
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.fullscreen-modal-overlay.active .fullscreen-modal-content {
    transform: scale(1);
}

.fullscreen-modal-header {
    padding: var(--space-xl) var(--space-2xl);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    flex-shrink: 0;
}

.fullscreen-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.fullscreen-modal-close {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}

.fullscreen-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.fullscreen-modal-close i {
    font-size: 1.5rem;
}

.fullscreen-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2xl);
}

/* Smooth scrolling */
.fullscreen-modal-body {
    scroll-behavior: smooth;
}

/* Custom scrollbar for modal */
.fullscreen-modal-body::-webkit-scrollbar {
    width: 12px;
}

.fullscreen-modal-body::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
}

.fullscreen-modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-lg);
    border: 3px solid var(--bg-primary);
}

.fullscreen-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Ensure content is responsive in modal */
.fullscreen-modal-body > * {
    max-width: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fullscreen-modal-overlay {
        padding: 0;
    }

    .fullscreen-modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        max-width: none;
    }

    .fullscreen-modal-header {
        padding: var(--space-lg);
        border-radius: 0;
    }

    .fullscreen-modal-header h3 {
        font-size: 1.25rem;
    }

    .fullscreen-modal-close {
        width: 36px;
        height: 36px;
    }

    .fullscreen-modal-close i {
        font-size: 1.25rem;
    }

    .fullscreen-modal-body {
        padding: var(--space-lg);
    }
}

/* ============================================
   MODERN MIND MAP STYLES
   ============================================ */

.modern-mindmap {
    width: 100%;
    padding: var(--space-lg);
}

/* Header */
.mindmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-light);
}

.mindmap-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mindmap-title i {
    font-size: 1.5rem;
    color: var(--primary);
}

.mindmap-stats {
    display: flex;
    gap: var(--space-md);
}

.mindmap-stats .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

.mindmap-stats .stat-item i {
    font-size: 1rem;
}

/* Controls */
.mindmap-controls {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.mindmap-controls .control-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.mindmap-controls .control-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.mindmap-controls .control-btn i {
    font-size: 1rem;
}

/* Mind Map Tree */
.mindmap-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.topic-card {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main Topic Card */
.main-topic-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.main-topic-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    transform: scaleY(0);
    transition: transform var(--transition);
}

.main-topic-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.main-topic-card:hover::before {
    transform: scaleY(1);
}

.main-topic-card.expanded {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: var(--primary);
}

.main-topic-card.expanded::before {
    transform: scaleY(1);
}

.topic-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.topic-icon-wrapper i {
    font-size: 1.5rem;
    color: white;
}

.topic-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.topic-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.subtopic-count {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: all var(--transition);
}

.expand-icon i {
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: transform var(--transition);
}

.expand-icon i.rotated {
    transform: rotate(180deg);
}

.main-topic-card:hover .expand-icon {
    background: var(--primary);
}

.main-topic-card:hover .expand-icon i {
    color: white;
}

/* Subtopics */
.subtopics-wrapper {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.subtopics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm);
    padding: var(--space-md);
    padding-left: 60px;
    margin-top: var(--space-md);
}

.subtopic-card {
    display: flex;
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    animation: slideInLeft 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.subtopic-card:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.02);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.subtopic-bullet {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 6px;
}

.subtopic-text {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Empty State */
.mindmap-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
    color: var(--text-muted);
}

.mindmap-empty-state i {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.mindmap-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* Fullsize variant */
.modern-mindmap.fullsize {
    max-width: 100%;
}

.modern-mindmap.fullsize .mindmap-tree {
    max-width: 100%;
}

.modern-mindmap.fullsize .subtopics-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Responsive */
@media (max-width: 768px) {
    .mindmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .mindmap-controls {
        flex-wrap: wrap;
    }

    .subtopics-grid {
        grid-template-columns: 1fr;
        padding-left: var(--space-lg);
    }

    .main-topic-card {
        padding: var(--space-md);
    }

    .topic-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .topic-icon-wrapper i {
        font-size: 1.25rem;
    }

    .topic-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .modern-mindmap {
        padding: var(--space-md);
    }

    .mindmap-controls .control-btn span {
        display: none;
    }

    .subtopics-grid {
        padding-left: var(--space-md);
    }

    .main-topic-card {
        gap: var(--space-sm);
    }
}

/* ==============================
   MODERN SUMMARY STYLES
   ============================== */

.modern-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
}

.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border);
}

.summary-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-title i {
    font-size: 1.5rem;
    color: var(--primary);
}

.summary-stats {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.summary-stats .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.summary-stats .stat-item i {
    font-size: 1rem;
    color: var(--primary);
}

.summary-controls {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.summary-controls .control-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.summary-controls .control-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.summary-controls .control-btn i {
    font-size: 1rem;
}

.summary-content-wrapper {
    position: relative;
    padding: var(--space-md);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
}

.summary-text-container {
    position: relative;
    transition: all 0.3s ease;
}

.summary-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.summary-expand-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) 0;
    margin-top: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.summary-expand-dots:hover {
    opacity: 0.7;
}

.summary-expand-dots .dots-text {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.summary-expand-dots .dots-text i {
    font-size: 1.25rem;
}

.summary-footer {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.summary-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.summary-meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.summary-meta .meta-item i {
    font-size: 1rem;
    color: var(--primary);
}

.summary-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    text-align: center;
    color: var(--text-secondary);
}

.summary-empty-state i {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    color: var(--text-muted);
}

.summary-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.summary-empty-state p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Fullsize Summary */
.modern-summary.fullsize {
    min-height: 100%;
}

.modern-summary.fullsize .summary-content-wrapper {
    flex: 1;
}

.modern-summary.fullsize .summary-text-container {
    max-height: none !important;
}

/* Copy Toast Notification */
.copy-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: var(--space-md) var(--space-lg);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 10000;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .summary-stats {
        width: 100%;
        justify-content: space-between;
    }

    .summary-text {
        font-size: 0.9375rem;
    }

    .copy-toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        text-align: center;
    }
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.alert-danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.rounded-16 {
    border-radius: 1rem;
}

.btn-close {
    margin-left: auto;
    opacity: 0.5;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.btn-close:hover {
    opacity: 1;
}

/* Result Cards */
.result-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.result-header {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
}

.result-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.result-content {
    padding: 1.5rem;
}

.summary-text {
    line-height: 1.7;
    color: #374151;
}

.audio-player-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* Form Card */
.form-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* Form Sections */
.form-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f3f4f6;
}

/* Form Controls */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control.is-invalid {
    border-color: #ef4444;
}

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

/* Video Source Options */
.video-source-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.source-option {
    position: relative;
}

.source-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.source-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 140px;
}

.source-label i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.source-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
    display: block;
}

.source-label small {
    color: #6b7280;
    font-size: 0.8125rem;
}

.source-option input[type="radio"]:checked + .source-label {
    background: #eff6ff;
    border-color: #2563eb;
}

.source-option input[type="radio"]:checked + .source-label .source-name {
    color: #2563eb;
}

.source-label:hover {
    border-color: #2563eb;
    background: #f9fafb;
}

/* Source Inputs */
.source-input {
    margin-top: 1.5rem;
    animation: slideDown 0.3s ease;
}

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

/* Upload Area */
.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.upload-area:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.upload-area.dragover {
    border-color: #2563eb;
    background: #eff6ff;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-info {
    display: none;
    flex-direction: column;
    align-items: center;
}

.file-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.file-size {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Form Actions */
.form-actions {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Features Section */
.features-section {
    margin-top: 2.5rem;
}

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

.feature-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon i {
    font-size: 2rem;
    color: white;
}

.feature-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .video-source-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 1.5rem;
    }

    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .video-source-options {
        grid-template-columns: 1fr;
    }

    .source-label {
        min-height: 120px;
    }
}

/* ==========================================
   TEACHER STYLES
   Merged from: teacher.css, meetings.css, quiz-dashboard.css
   ========================================== */
/* ================================================================
   Teacher Pages Styles
   Extracted from Blade templates
   ================================================================ */

/* ========================================
   dashboard.blade.php
   ======================================== */
/* Removed duplicate - defined in main.css */

.action-card {
    transition: all 0.3s ease;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

    .stats-card:hover,
    .course-card:hover,
    .action-card:hover {
        transform: none;
    }
}

/* ========================================
   edit.blade.php
   ======================================== */
.file-preview-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.file-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-icon i {
    font-size: 28px;
    color: white;
    display: block;
    line-height: 1;
}

.file-details {
    flex: 1;
}

/* Light mode - explicit styles */
.file-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 18px;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
}

[data-theme="dark"] .file-name {
    color: #f1f5f9;
}

.file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #64748b;
}

.file-meta span {
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
}

/* Dark mode support for file meta */
[data-theme="dark"] .file-meta {
    color: #94a3b8;
}

[data-theme="dark"] .file-meta span {
    background: #1e40af;
    color: #93c5fd;
}

.file-actions {
    flex-shrink: 0;
}

.stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

/* Dark mode support */
[data-theme="dark"] .stat-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .stat-card:hover {
    background: #334155;
    border-color: #60a5fa;
    box-shadow: 0 8px 30px rgba(96, 165, 250, 0.15);
}

/* Light mode - explicit styles */
.stat-number {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

[data-theme="dark"] .stat-number {
    color: #f1f5f9;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .file-preview-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .file-meta {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .stat-number {
        font-size: 16px;
    }
}

/* Dark mode support for buttons */
[data-theme="dark"] .btn[type="submit"],
[data-theme="dark"] .btn.btn-main {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .btn[type="submit"]:hover,
[data-theme="dark"] .btn.btn-main:hover {
    background: #2563eb;
    border-color: #2563eb;
}

[data-theme="dark"] .btn.btn-neutral {
    background: #374151;
    border-color: #374151;
    color: #e5e7eb;
}

[data-theme="dark"] .btn.btn-neutral:hover {
    background: #4b5563;
    border-color: #4b5563;
}

[data-theme="dark"] .btn.btn-danger-outline {
    background: transparent;
    border-color: #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .btn.btn-danger-outline:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.file-preview-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.file-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-icon i {
    font-size: 28px;
    color: white;
    display: block;
    line-height: 1;
}

.file-details {
    flex: 1;
}

/* Light mode - explicit styles */
.file-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 18px;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
}

[data-theme="dark"] .file-name {
    color: #f1f5f9;
}

.file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #64748b;
}

.file-meta span {
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
}

/* Dark mode support for file meta */
[data-theme="dark"] .file-meta {
    color: #94a3b8;
}

[data-theme="dark"] .file-meta span {
    background: #1e40af;
    color: #93c5fd;
}

.file-actions {
    flex-shrink: 0;
}

.stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

/* Dark mode support */
[data-theme="dark"] .stat-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .stat-card:hover {
    background: #334155;
    border-color: #60a5fa;
    box-shadow: 0 8px 30px rgba(96, 165, 250, 0.15);
}

/* Light mode - explicit styles */
.stat-number {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

[data-theme="dark"] .stat-number {
    color: #f1f5f9;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .file-preview-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .file-meta {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .stat-number {
        font-size: 16px;
    }
}

/* Dark mode support for buttons */
[data-theme="dark"] .btn[type="submit"],
[data-theme="dark"] .btn.btn-main {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .btn[type="submit"]:hover,
[data-theme="dark"] .btn.btn-main:hover {
    background: #2563eb;
    border-color: #2563eb;
}

[data-theme="dark"] .btn.btn-neutral {
    background: #374151;
    border-color: #374151;
    color: #e5e7eb;
}

[data-theme="dark"] .btn.btn-neutral:hover {
    background: #4b5563;
    border-color: #4b5563;
}

[data-theme="dark"] .btn.btn-danger-outline {
    background: transparent;
    border-color: #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .btn.btn-danger-outline:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* ========================================
   public-profile.blade.php
   ======================================== */
.course-card {
    transition: all 0.3s ease;
}

/* Removed duplicate utility - defined in main.css */

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

    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================
   profile.blade.php
   ======================================== */
/* Removed duplicate - defined in main.css */

.form-control {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.alert {
    border: none;
    border-radius: 12px;
}

/* Cool Calendar Styles */
.calendar-container {
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.mini-calendar {
    backdrop-filter: blur(10px);
}

.calendar-day-header {
    width: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.calendar-dot {
    width: 24px;
    display: flex;
    justify-content: center;
}

.calendar-dot .dot {
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

.calendar-dot.active .dot {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    transform: scale(1.2);
}

.bg-white-50 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Gradient Buttons */
.btn-gradient-main {
    background: linear-gradient(135deg, var(--bs-main-600) 0%, #3b82f6 100%);
    border: none;
    color: white;
}

.btn-gradient-main:hover {
    background: linear-gradient(135deg, #3b82f6 0%, var(--bs-main-600) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--bs-main-rgb), 0.3);
}

/* Hover Effects */
.hover-shadow {
    transition: all 0.3s ease;
}

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

.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

.transition-all {
    transition: all 0.3s ease;
}

/* Gradient Backgrounds */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.from-green-50 {
    --tw-gradient-from: #f0fdf4;
}

.to-emerald-50 {
    --tw-gradient-to: #ecfdf5;
}

.from-gray-50 {
    --tw-gradient-from: #f9fafb;
}

.to-slate-50 {
    --tw-gradient-to: #f8fafc;
}

.border-green-200 {
    border-color: #bbf7d0 !important;
}

.border-gray-200 {
    border-color: #e5e7eb !important;
}

.text-blue-600 {
    color: #3b82f6 !important;
}

/* Modern Tab Styling */
.nav-tabs {
    border-bottom: 2px solid #e5e7eb;
    padding: 0 24px;
    display: flex;
    gap: 8px;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px 16px 0 0;
}

[data-theme="dark"] .nav-tabs {
    background: linear-gradient(to bottom, #1e293b 0%, #0f1419 100%);
    border-bottom-color: #374151;
}

.nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 16px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
}

.nav-tabs .nav-link i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #6366f1;
    border-color: transparent;
    background: rgba(99, 102, 241, 0.05);
    transform: translateY(-2px);
}

.nav-tabs .nav-link:hover i {
    transform: scale(1.1);
}

.nav-tabs .nav-link.active {
    color: #6366f1;
    border-color: transparent;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    box-shadow: 0 -2px 8px rgba(99, 102, 241, 0.1);
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #3b82f6 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.nav-tabs .nav-link.active i {
    color: #6366f1;
    transform: scale(1.05);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: #a5b4fc;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
}

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

/* RTL Support for Tabs */
[dir="rtl"] .nav-tabs .nav-link {
    flex-direction: row-reverse;
}

/* Mobile Responsive Tabs */
@media (max-width: 768px) {
    .nav-tabs {
        padding: 0 12px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .nav-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .nav-tabs::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

    .nav-tabs .nav-link {
        padding: 12px 16px;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .nav-tabs .nav-link i {
        font-size: 1.1rem;
    }
}


/* Toast Notification Styles */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
}

.toast-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.toast-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast-notification.toast-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.toast-notification.toast-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.toast-content {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.toast-content i {
    font-size: 16px;
}

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

    .flex-between {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   create.blade.php
   ======================================== */
.quiz-setting-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: all 0.3s ease;
}

/* Quiz option card styles */
.quiz-option-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Schedule card styles */
.schedule-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: all 0.3s ease;
}

/* Empty questions state */
.empty-questions-state {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin: 20px 0;
}

/* Dark mode styles */
[data-theme="dark"] .quiz-setting-card,
[data-theme="dark"] .quiz-option-card,
[data-theme="dark"] .schedule-card,
[data-theme="dark"] .empty-questions-state {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .quiz-setting-card:hover,
[data-theme="dark"] .quiz-option-card:hover,
[data-theme="dark"] .schedule-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .quiz-setting-icon,
[data-theme="dark"] .schedule-icon {
    background: #374151 !important;
}

/* ========================================
   edit.blade.php
   ======================================== */
/* Dark Theme Variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-hero: #6366f1;
    --border-color: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #9ca3af;
    --text-on-dark: #ffffff;
    --btn-primary: #6366f1;
    --btn-primary-hover: #5b21b6;
    --btn-secondary: #6c757d;
    --btn-success: #22c55e;
    --btn-warning: #f59e0b;
    --btn-danger: #ef4444;
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-color: #22c55e;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-color: #f59e0b;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-color: #ef4444;
    --info-bg: rgba(59, 130, 246, 0.1);
    --info-color: #3b82f6;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus: #6366f1;
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-card: #1e2433;
    --bg-hero: #2d3748;
    --border-color: #374151;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-on-dark: #ffffff;
    --btn-primary: #6366f1;
    --btn-primary-hover: #5b21b6;
    --btn-secondary: #4b5563;
    --btn-success: #22c55e;
    --btn-warning: #f59e0b;
    --btn-danger: #ef4444;
    --success-bg: rgba(34, 197, 94, 0.15);
    --success-color: #34d399;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-color: #fbbf24;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-color: #f87171;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-color: #60a5fa;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-focus: #63b3ed;
}

/* Global Page Styling */
.quiz-edit-page {
    background: var(--bg-primary);
    min-height: 100vh;
    padding: 2rem 0;
    transition: all 0.3s ease;
}

/* Hero Section */
.quiz-hero-section {
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px var(--shadow-light);
}

.hero-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.3;
}

/* Action Buttons */
.hero-actions-section {
    display: flex;
    justify-content: flex-end;
}

/* Modern Cards */
.modern-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--shadow-light);
    transition: all 0.3s ease;
    overflow: hidden;
}

.header-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.header-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Form Styling */
.form-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.95rem;
}

.form-label.required::after {
    content: ' *';
    color: var(--danger-color);
}

.form-control,
.modern-input,
.modern-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus,
.modern-input:focus,
.modern-textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: var(--input-bg);
}

.form-control::placeholder,
.modern-input::placeholder,
.modern-textarea::placeholder {
    color: var(--text-muted);
}

.invalid-feedback {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Form Switches */
.form-switches {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.switch-item:hover {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-light);
}

.switch-content {
    flex: 1;
}

.switch-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    display: block;
}

.switch-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-link-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.quick-link-item:hover {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-light);
    transform: translateX(4px);
}

.link-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary);
    color: white;
    border-radius: 8px;
    font-size: 1.25rem;
}

.link-content {
    flex: 1;
}

.link-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.link-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* Checkboxes and Switches */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
}

.form-check-label {
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}

/* Submit Button */
.btn-submit {
    background: var(--btn-success);
    color: white;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.btn-submit:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

/* Dark Mode Hover Fixes */
[data-theme="dark"] .card-body-modern:hover {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .modern-card:hover .card-body-modern {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .form-section:hover {
    background: var(--bg-secondary) !important;
}

/* Text Color Overrides for Dark Mode */
[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .invalid-feedback {
    color: var(--danger-color) !important;
}

/* Additional Text Elements for Dark Mode */
[data-theme="dark"] .switch-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .switch-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .preview-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .preview-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .preview-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .link-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .link-subtitle {
    color: var(--text-secondary) !important;
}

/* Additional Dark Mode Fixes */
[data-theme="dark"] .switch-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .switch-item:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .quick-link-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quick-link-item:hover {
    background: var(--bg-secondary) !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-main-title {
        font-size: 2rem;
    }

    .card-body-modern {
        padding: 1.5rem;
    }

    .form-section {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .quiz-edit-page {
        padding: 1rem 0;
    }

    .quiz-hero-content {
        padding: 2rem 0;
    }

    .hero-main-title {
        font-size: 1.75rem;
    }

    .action-buttons-group {
        flex-direction: column;
        width: 100%;
    }

    .card-body-modern {
        padding: 1rem;
    }

    .form-section {
        padding: 1rem;
    }

    .hero-breadcrumb {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* Animation Classes */
.modern-card {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.6s ease forwards;
}

.modern-card:nth-child(1) {
    animation-delay: 0.1s;
}

.modern-card:nth-child(2) {
    animation-delay: 0.2s;
}

.modern-card:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   show.blade.php
   ======================================== */
/* Dark Theme Variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-hero: #6366f1;
    --border-color: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #9ca3af;
    --text-on-dark: #ffffff;
    --btn-primary: #6366f1;
    --btn-primary-hover: #5b21b6;
    --btn-secondary: #6c757d;
    --btn-success: #22c55e;
    --btn-warning: #f59e0b;
    --btn-danger: #ef4444;
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-color: #22c55e;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-color: #f59e0b;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-color: #ef4444;
    --info-bg: rgba(59, 130, 246, 0.1);
    --info-color: #3b82f6;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-card: #1e2433;
    --bg-hero: #2d3748;
    --border-color: #374151;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-on-dark: #ffffff;
    --btn-primary: #6366f1;
    --btn-primary-hover: #5b21b6;
    --btn-secondary: #4b5563;
    --btn-success: #22c55e;
    --btn-warning: #f59e0b;
    --btn-danger: #ef4444;
    --success-bg: rgba(34, 197, 94, 0.15);
    --success-color: #34d399;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-color: #fbbf24;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-color: #f87171;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-color: #60a5fa;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);
}

/* Global Page Styling */
.quiz-show-page {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    min-height: 100vh;
    padding: 2rem 0;
    transition: all 0.3s ease;
}

/* Hero Section */
.quiz-hero-section {
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px var(--shadow-light);
}

.hero-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.3;
}

/* Modern Cards */
.modern-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--shadow-light);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Fix card body hover in dark mode */
.card-body-modern:hover {
    background: var(--bg-card) !important;
}

.header-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.header-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Quiz Configuration */
.quiz-description-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border-left: 4px solid var(--btn-primary);
}

/* Statistics Card */
.stats-overview {
    text-align: center;
}

/* No Data State */
.no-data-state {
    text-align: center;
    padding: 3rem 1rem;
}

/* Questions Section */
.modern-question-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Question Options */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.option-modern.correct .option-indicator {
    background: var(--success-color);
}

/* Empty State */
.empty-questions-modern {
    text-align: center;
    padding: 4rem 2rem;
}

/* Action Panel */
.action-panel-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.status-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.danger-section {
    padding: 1.5rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-color);
    border-radius: 12px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-main-title {
        font-size: 2rem;
    }

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

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .stat-row {
        flex-direction: column;
    }

    .true-false-options {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .quiz-show-page {
        padding: 1rem 0;
    }

    .quiz-hero-content {
        padding: 2rem 0;
    }

    .hero-main-title {
        font-size: 1.75rem;
    }

    .action-buttons-group {
        flex-direction: column;
        width: 100%;
    }

    .card-body-modern {
        padding: 1.5rem;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .hero-metadata {
        flex-direction: column;
        gap: 0.5rem;
    }

    .metadata-chip {
        justify-content: center;
    }
}

/* Animation Classes */
.modern-card {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.6s ease forwards;
}

.modern-card:nth-child(1) {
    animation-delay: 0.1s;
}

.modern-card:nth-child(2) {
    animation-delay: 0.2s;
}

.modern-card:nth-child(3) {
    animation-delay: 0.3s;
}

.modern-card:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Additional Dark Mode Fixes */
[data-theme="dark"] .feature-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-info {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-info span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-body-modern:hover {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .modern-card:hover .card-body-modern {
    background: var(--bg-card) !important;
}

/* Ensure text in feature items stays visible */
[data-theme="dark"] .feature-item .feature-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .feature-item.active .feature-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .feature-item.inactive .feature-text {
    color: var(--text-secondary) !important;
}

/* Force specific status text to be black in dark mode */
[data-theme="dark"] .status-info span {
    color: #000000 !important;
}

/* Alternative approach - target the specific text content */
[data-theme="dark"] .status-controls .status-info {
    color: #000000 !important;
}

[data-theme="dark"] .status-controls .status-info span {
    color: #000000 !important;
}

/* Force danger warning text to be black in dark mode */
[data-theme="dark"] .danger-warning {
    color: #000000 !important;
}

[data-theme="dark"] .danger-warning span {
    color: #000000 !important;
}

[data-theme="dark"] .danger-section .danger-warning {
    color: #000000 !important;
}

[data-theme="dark"] .danger-section .danger-warning span {
    color: #000000 !important;
}

/* Fix modern-question-card hover effect in dark mode */
[data-theme="dark"] .modern-question-card:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .modern-question-card:hover .question-card-header {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .modern-question-card:hover .question-card-body {
    background: var(--bg-secondary) !important;
}

/* Fix option-content text to be black in dark mode */
[data-theme="dark"] .option-content {
    color: #000000 !important;
}

[data-theme="dark"] .option-modern .option-content {
    color: #000000 !important;
}

[data-theme="dark"] .tf-label {
    color: #000000 !important;
}

[data-theme="dark"] .answer-content {
    color: #000000 !important;
}

/* Fix action-item hover effects in dark mode */
[data-theme="dark"] .action-item:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .action-item.duplicate-action:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .action-item.edit-action:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .action-item.analytics-action:hover {
    background: var(--bg-secondary) !important;
}

/* Ensure action titles and subtitles stay black in dark mode */
[data-theme="dark"] .action-item .action-title {
    color: #000000 !important;
}

[data-theme="dark"] .action-item .action-subtitle {
    color: #000000 !important;
}

/* ========================================
   AI Token Card - Simple Design
   ======================================== */
.ai-tokens-card-simple {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.token-icon-simple {
    font-size: 48px;
    color: white !important;
}

.token-balance-simple {
    font-size: 48px;
    font-weight: 800;
    color: white !important;
    line-height: 1;
}

.btn-simple-action {
    background: white;
    color: #1d4ed8;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-simple-action:hover {
    background: #f3f4f6;
    color: #1e40af;
    transform: translateY(-1px);
}

.btn-simple-link {
    background: transparent;
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-simple-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Text color utilities */
.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

/* Meeting Card Design - Matching Student Materials Style */
.meeting-details-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 32px;
    margin-bottom: 24px;
}

.meeting-status-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 12px;
}

.meeting-status-section.live {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #10b981;
}

.meeting-status-section.upcoming {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #10b981;
}

.meeting-status-section.ended {
    background: #ff572214;
    border: 1px solid #d71313;
}

.status-icon.live {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
}

.status-icon.upcoming {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.status-icon.ended {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
}

.status-content h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
}

.status-content p {
    margin: 0;
    font-size: 16px;
    color: #64748b;
}

.status-content.live h3 {
    color: #15803d;
}

.status-content.upcoming h3 {
    color: #2563eb;
}

.status-content.ended h3 {
    color: #6b7280;
}

.meeting-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-join-live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    animation: pulse-glow 2s infinite;
}

.btn-join-live:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    color: white;
    text-decoration: none;
}

.btn-join-live:disabled,
.btn-join-live[disabled] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #d1d5db;
    cursor: not-allowed;
    animation: none;
    opacity: 0.7;
}

.btn-join-live:disabled:hover,
.btn-join-live[disabled]:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2);
    color: #d1d5db;
}

.btn-cannot-start {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
    color: #d1d5db !important;
    cursor: pointer !important;
    animation: none !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}

.btn-cannot-start:hover {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(107, 114, 128, 0.3) !important;
    color: #d1d5db !important;
}

/* Cannot Start Modal */
.cannot-start-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.cannot-start-modal-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.cannot-start-modal.show .cannot-start-modal-content {
    transform: scale(1);
}

.cannot-start-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #d97706;
    font-size: 28px;
}

.cannot-start-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.cannot-start-modal-message {
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.cannot-start-modal-close {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cannot-start-modal-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Dark mode for cannot start modal */
[data-theme="dark"] .cannot-start-modal-content {
    background: #1e2433;
    color: #ffffff;
}

[data-theme="dark"] .cannot-start-modal-title {
    color: #ffffff;
}

[data-theme="dark"] .cannot-start-modal-message {
    color: #d1d5db;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    }
    50% {
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }
}

.btn-edit,
.btn-delete {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-edit {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-edit:hover {
    background: #f1f5f9;
    color: #374151;
    text-decoration: none;
}

.btn-delete {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
    text-decoration: none;
}

.btn-share {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-share:hover {
    background: #e0f2fe;
    color: #0284c7;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Share Modal */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.share-modal-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 800px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.share-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.share-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.share-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.share-url-section {
    margin-bottom: 28px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.share-url-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.share-url-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.share-url-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: monospace;
    font-size: 14px;
    background: #f9fafb;
}

.share-url-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-copy {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-copy:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-copy.copied {
    background: #10b981;
    color: white;
}

.share-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.share-option {
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    text-decoration: none;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    justify-content: center;
}

@media (max-width: 768px) {
    .share-options {
        grid-template-columns: 1fr;
    }
}

.share-option:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Dark mode for share modal */
[data-theme="dark"] .share-modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .share-modal-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .share-url-section {
    background: #0f172a !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .share-url-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .share-url-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .share-option {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .share-option:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Analytics Dashboard Cards */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.analytics-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.analytics-card.clickable {
    cursor: pointer;
}

.analytics-card.clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
}

.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.analytics-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.analytics-icon.users {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.analytics-icon.activity {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.analytics-icon.timeline {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.analytics-icon.polls {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.analytics-trend {
    color: #10b981;
    font-size: 18px;
}

.analytics-score {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.analytics-duration {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.analytics-count {
    background: #ede9fe;
    color: #6b21a8;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.analytics-content {
    margin-bottom: 16px;
}

.analytics-title {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analytics-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.2;
}

.analytics-subtitle {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

.analytics-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.analytics-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.analytics-footer i {
    color: #9ca3af;
    transition: color 0.2s ease;
}

.analytics-card.clickable:hover .analytics-footer i {
    color: #3b82f6;
}

/* Engagement Summary */
.engagement-summary {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

.engagement-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
}

.engagement-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.engagement-stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

/* Dark mode for analytics */
[data-theme="dark"] .analytics-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .analytics-card.clickable:hover {
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .analytics-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .analytics-title {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .analytics-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .analytics-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .analytics-footer {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .engagement-summary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .engagement-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}

/* Responsive design for analytics */
@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }

    .analytics-card {
        padding: 20px;
    }

    .analytics-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .analytics-value {
        font-size: 24px;
    }

    .engagement-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Analytics Modals */
.analytics-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.analytics-modal-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.analytics-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px 0 32px;
    margin-bottom: 24px;
}

.analytics-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.analytics-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.analytics-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.analytics-modal-body {
    padding: 0 32px 32px 32px;
}

/* Users Modal Styles */
.users-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.user-type {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.user-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.user-type-icon.moderator {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.user-type-icon.attendee {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.user-type-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
}

.user-count {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    display: block;
    margin-bottom: 4px;
}

.user-type-info p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.users-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-item {
    text-align: center;
    padding: 16px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

/* Attendees Section */
.attendees-section {
    margin-top: 24px;
    border-top: 1px solid #f3f4f6;
    padding-top: 24px;
}

.attendees-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
}

.attendees-list {
    max-height: 300px;
    overflow-y: auto;
}

.attendee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafbfc;
    transition: all 0.2s ease;
}

.attendee-item.clickable {
    cursor: pointer;
}

.attendee-item:hover {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.attendee-item.clickable:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.attendee-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #e5e7eb;
    color: #6b7280;
}

.attendee-avatar i.ph-crown {
    color: #f59e0b;
}

.attendee-info {
    flex: 1;
}

.attendee-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
}

.attendee-details {
    display: flex;
    gap: 8px;
    align-items: center;
}

.attendee-role {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.attendee-role.moderator {
    background: #fef3c7;
    color: #92400e;
}

.attendee-role.viewer {
    background: #e0f2fe;
    color: #0284c7;
}

.attendee-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.attendee-badge.presenter {
    background: #dcfce7;
    color: #166534;
}

.attendee-status {
    display: flex;
    gap: 6px;
    align-items: center;
}

.status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.status-indicator.voice {
    background: #dcfce7;
    color: #166534;
}

.status-indicator.video {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-indicator.listening {
    background: #f3f4f6;
    color: #6b7280;
}

.attendee-time {
    font-size: 11px;
    color: #6b7280;
    min-width: 80px;
    text-align: right;
}

.attendee-action {
    color: #9ca3af;
    font-size: 16px;
    transition: color 0.2s ease;
}

.attendee-item.clickable:hover .attendee-action {
    color: #3b82f6;
}

/* Activity Modal Styles */
.activity-score-display {
    text-align: center;
    margin-bottom: 32px;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    color: white;
}

.score-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.score-level {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.activity-breakdown h4 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 20px 0;
}

.engagement-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.engagement-label {
    min-width: 120px;
    font-weight: 500;
    color: #374151;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill.video {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.engagement-value {
    min-width: 40px;
    text-align: right;
    font-weight: 600;
    color: #374151;
}

/* Timeline Modal Styles */
.timeline-view {
    max-height: 400px;
    overflow-y: auto;
}

.timeline-event {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.timeline-event:last-child {
    border-bottom: none;
}

.timeline-time {
    min-width: 80px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    font-family: monospace;
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
}

.timeline-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 16px;
}

.timeline-event.start .timeline-icon {
    background: #d1fae5;
    color: #065f46;
}

.timeline-event.join .timeline-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.timeline-event.current .timeline-icon {
    background: #fef3c7;
    color: #92400e;
}

.no-timeline {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.no-timeline i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* Polls Modal Styles */
.no-polls {
    text-align: center;
    padding: 40px 20px;
}

.no-polls-icon {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.no-polls h4 {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.no-polls p {
    color: #6b7280;
    margin: 0 0 24px 0;
}

.btn-create-poll {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    transition: all 0.2s ease;
}

.btn-create-poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.poll-item {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
}

.poll-item h5 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.poll-item p {
    color: #6b7280;
    margin: 0 0 12px 0;
}

.poll-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.poll-status.active {
    background: #d1fae5;
    color: #065f46;
}

/* Dark mode for analytics modals */
[data-theme="dark"] .analytics-modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .analytics-modal-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .user-type {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .user-type-info h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .user-count {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .user-type-info p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .timeline-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .timeline-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .no-polls h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .no-polls p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .poll-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Responsive design for analytics modals */
@media (max-width: 768px) {
    .analytics-modal-content {
        width: 95%;
        margin: 20px;
    }

    .analytics-modal-header,
    .analytics-modal-body {
        padding: 20px;
    }

    .users-breakdown {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .users-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .engagement-item {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .engagement-label {
        min-width: auto;
    }

    .progress-bar {
        width: 100%;
    }

    .engagement-value {
        min-width: auto;
        text-align: left;
    }
}

/* Participant Detail Modal */
.participant-modal {
    max-width: 700px;
}

.participant-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
}

.participant-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.participant-avatar-large.moderator {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.participant-main-info h4 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.participant-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.participant-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.participant-badge.moderator {
    background: #fef3c7;
    color: #92400e;
}

.participant-badge.presenter {
    background: #dcfce7;
    color: #166534;
}

.participant-badge.voice {
    background: #d1fae5;
    color: #065f46;
}

.participant-badge.video {
    background: #dbeafe;
    color: #1d4ed8;
}

.participant-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.participant-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.stat-icon.voice {
    background: #dcfce7;
    color: #166534;
}

.stat-icon.video {
    background: #dbeafe;
    color: #1d4ed8;
}

.stat-icon.role {
    background: #fef3c7;
    color: #92400e;
}

.stat-icon.time {
    background: #f3f4f6;
    color: #6b7280;
}

.stat-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-info span {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.participant-details-section,
.participant-activity-section,
.participant-actions {
    margin-bottom: 24px;
}

.participant-details-section h5,
.participant-activity-section h5,
.participant-actions h5 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.participant-tech-info {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

.tech-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.tech-item:last-child {
    border-bottom: none;
}

.tech-label {
    font-weight: 500;
    color: #6b7280;
}

.tech-value {
    font-weight: 600;
    color: #374151;
    font-family: monospace;
}

.participant-timeline {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

.timeline-text {
    font-size: 14px;
    color: #374151;
}

.action-btn.message {
    border-color: #3b82f6;
    color: #3b82f6;
}

.action-btn.message:hover {
    background: #eff6ff;
}

.action-btn.mute {
    border-color: #f59e0b;
    color: #f59e0b;
}

.action-btn.mute:hover {
    background: #fffbeb;
}

.action-btn.presenter {
    border-color: #10b981;
    color: #10b981;
}

.action-btn.presenter:hover {
    background: #ecfdf5;
}

.action-btn.remove {
    border-color: #ef4444;
    color: #ef4444;
}

.action-btn.remove:hover {
    background: #fef2f2;
}

.actions-note {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin: 0;
}

/* Dark mode for participant modal */
[data-theme="dark"] .participant-header {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .participant-main-info h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .participant-stat {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .stat-info span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .participant-tech-info {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .tech-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tech-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .participant-timeline {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .timeline-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .action-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Recording Cards Styles */
.recordings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
}

.recording-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

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

.recording-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.recording-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.recording-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
}

.meta-item i {
    font-size: 16px;
}

.status-badge.published {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.processing {
    background: #fef3c7;
    color: #92400e;
}

.recording-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.format-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.format-button:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.format-button.presentation {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.format-button.presentation:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.format-button.video {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.format-button.video:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.format-button.podcast {
    background: #f3e8ff;
    color: #2563eb;
    border-color: #ddd6fe;
}

.format-button.podcast:hover {
    background: #ede9fe;
    color: #6d28d9;
}

.format-button.notes {
    background: #ecfdf5;
    color: #059669;
    border-color: #bbf7d0;
}

.format-button.notes:hover {
    background: #dcfce7;
    color: #047857;
}

.format-button.caption {
    background: #fef7ff;
    color: #c026d3;
    border-color: #f3e8ff;
}

.format-button.caption:hover {
    background: #faf5ff;
    color: #a21caf;
}

.format-button.main {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

.format-button.main:hover {
    background: #f1f5f9;
    color: #334155;
}

.recording-details {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.recording-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
}

.processing-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    font-style: italic;
}

.processing-indicator i {
    font-size: 24px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Dark mode for recordings */
[data-theme="dark"] .recording-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .recording-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .meta-item {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .detail-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .detail-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .recording-details {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .recording-processing {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .processing-indicator {
    color: var(--text-secondary) !important;
}

/* Responsive design for recordings */
@media (max-width: 768px) {
    .recordings-grid {
        grid-template-columns: 1fr;
    }

    .recording-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .recording-formats {
        justify-content: center;
    }

    .format-button {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    .recording-details {
        grid-template-columns: 1fr;
    }
}

.meeting-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.info-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 500;
    color: #6b7280;
}

.info-value {
    color: #374151;
    font-weight: 500;
}

.participants-section {
    margin-top: 32px;
}

.participants-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 20px;
}

.participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.participant-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.participant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #6b7280;
}

.participant-info h6 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.participant-info p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* Dark mode styles */
[data-theme="dark"] .meeting-details-card,
[data-theme="dark"] .participant-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .info-card {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .meeting-status-section.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
}

[data-theme="dark"] .meeting-status-section.upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%) !important;
}

[data-theme="dark"] .meeting-status-section.ended {
    background: #ff572214;
}

[data-theme="dark"] .status-content h3,
[data-theme="dark"] .info-card-title,
[data-theme="dark"] .info-value,
[data-theme="dark"] .participant-info h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-content p,
[data-theme="dark"] .info-label,
[data-theme="dark"] .participant-info p {
    color: var(--text-secondary) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .meeting-details-card {
        padding: 20px;
    }

    .meeting-status-section {
        flex-direction: column;
        text-align: center;
    }

    .meeting-actions {
        width: 100%;
        justify-content: center;
    }

    .btn-join-live,
    .btn-edit,
    .btn-delete {
        flex: 1;
        justify-content: center;
    }

    .meeting-info-grid {
        grid-template-columns: 1fr;
    }
}

.meeting-room-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.meeting-header {
    background: #1e293b;
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #374151;
}

.meeting-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meeting-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.meeting-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #10b981;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.meeting-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-control {
    background: #374151;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-control:hover {
    background: #4b5563;
    color: white;
    text-decoration: none;
}

.btn-control.danger {
    background: #dc2626;
}

.btn-control.danger:hover {
    background: #b91c1c;
}

.meeting-frame-container {
    flex: 1;
    position: relative;
    background: #f3f4f6;
}

.meeting-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

.error-state {
    display: none;
    text-align: center;
    padding: 40px;
    color: #dc2626;
}

.error-state.show {
    display: block;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.error-message {
    color: #6b7280;
    margin-bottom: 20px;
}

.btn-retry {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover {
    background: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meeting-header {
        padding: 8px 12px;
    }

    .meeting-title {
        font-size: 16px;
    }

    .meeting-controls {
        gap: 8px;
    }

    .btn-control {
        padding: 6px 12px;
        font-size: 13px;
    }
}

.form-section {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 32px;
    margin-bottom: 24px;
}

.form-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.form-section-description {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label .required {
    color: #ef4444;
}

.form-control,
.form-select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.form-text {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
}

.datetime-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.recurring-options {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    border: 1px solid #e2e8f0;
}

.recurring-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.form-check-input {
    margin: 0;
}

.form-check-label {
    font-size: 14px;
    color: #374151;
    margin: 0;
    cursor: pointer;
}

.btn-section {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-secondary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #374151;
    text-decoration: none;
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group-text {
    background: #f8fafc;
    border: 1px solid #d1d5db;
    border-right: none;
    padding: 12px 16px;
    font-size: 14px;
    color: #6b7280;
    border-radius: 8px 0 0 8px;
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 8px 8px 0;
}

/* Dark mode styles */
[data-theme="dark"] .form-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-section-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--bg-card) !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .recurring-options {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .input-group-text {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-section {
        padding: 24px 20px;
    }

    .datetime-group {
        grid-template-columns: 1fr;
    }

    .recurring-controls {
        grid-template-columns: 1fr;
    }

    .btn-section {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

.meeting-form-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 32px;
    margin-bottom: 24px;
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.invalid-feedback {
    color: #ef4444;
    font-size: 14px;
    margin-top: 4px;
}

.btn-submit {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.btn-cancel {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    margin-right: 12px;
}

.btn-cancel:hover {
    background: #f1f5f9;
    color: #374151;
    text-decoration: none;
}

.datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}

/* Dark mode styles */
[data-theme="dark"] .meeting-form-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .btn-cancel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-cancel:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

@media (max-width: 768px) {
    .meeting-form-card {
        padding: 20px;
    }

    .datetime-row {
        grid-template-columns: 1fr;
    }
}


.meeting-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.meeting-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.meeting-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.meeting-status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
}

.meeting-status-badge.live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.1);
}

.meeting-status-badge.live .status-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse-live 2s infinite;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.meeting-status-badge.upcoming {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.meeting-status-badge.ended {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border-color: rgba(107, 114, 128, 0.3);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2), 0 0 0 1px rgba(107, 114, 128, 0.1);
}

.meeting-status-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.meeting-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.meeting-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
}

.meeting-icon.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.meeting-icon.upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    color: #3b82f6;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.meeting-icon.ended {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.1) 100%);
    color: #94a3b8;
    border: 2px solid rgba(148, 163, 184, 0.3);
}

.meeting-details {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

.meeting-details .meeting-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.meeting-details .meeting-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.meeting-course {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meeting-course:hover {
    color: #3b82f6;
    text-decoration: none;
}

.meeting-time {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.meeting-participants {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.meeting-meta {
    flex: 1;
}

.btn-join-meeting {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-join-meeting:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: white;
    text-decoration: none;
}

.btn-view-meeting {
    border: 1px solid #3b82f6;
    color: #3b82f6;
    background: transparent;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-view-meeting:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Recording Button Styles */
.btn-view-recording {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    justify-content: center;
}

.btn-view-recording:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Recording Indicator */
.recording-indicator {
    margin-left: 8px;
    color: #dc2626;
    font-size: 14px;
    animation: pulse-recording 2s infinite;
    background: rgba(220, 38, 38, 0.1);
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

@keyframes pulse-recording {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Subtle hover effects for metadata elements */

.meeting-participants:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.action-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    height: 100%;
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.schedule-card .action-icon {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #059669;
}

.calendar-toggle-card .action-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.action-content h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.action-content p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.schedule-card .action-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.schedule-card .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: white;
    text-decoration: none;
}

.calendar-toggle-card .action-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calendar-toggle-card .action-btn:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Calendar section */
.calendar-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    padding: 32px;
    margin-bottom: 32px;
    animation: slideDown 0.4s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

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

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.calendar-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-title i {
    font-size: 28px;
    color: #3b82f6;
}

#calendar {
    font-family: inherit;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    width: 100%;
}

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

.fc-tooltip .tooltip-header strong {
    color: #1e293b;
    font-weight: 600;
}

.fc-tooltip .tooltip-body p {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
}

.fc-tooltip .tooltip-body i {
    width: 14px;
    color: #94a3b8;
}

.fc-tooltip .tooltip-footer small {
    color: #94a3b8;
    font-style: italic;
}

.fc-button-group .fc-button {
    border-radius: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.fc-button-group .fc-button:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-left: none !important;
}

.fc-button-group .fc-button:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-right: none !important;
}

.fc-button-group .fc-button:only-child {
    border-radius: 12px !important;
    border: none !important;
}

/* Dark mode CSS variables */
[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-card: #1e2433;
    --bg-hover: #252b3c;
    --border-color: #374151;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
}

/* Dark mode styles for quick actions section */
[data-theme="dark"] .quick-actions-section {
    background: var(--bg-primary);
}

[data-theme="dark"] .meeting-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .meeting-card.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
}

[data-theme="dark"] .meeting-card.upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%) !important;
}

[data-theme="dark"] .meeting-title {
    color: var(--text-primary) !important;
}

/* Dark mode for modernized meeting header */
[data-theme="dark"] .meeting-header {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .meeting-details .meeting-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .meeting-icon.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .meeting-icon.upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

[data-theme="dark"] .meeting-icon.ended {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.3) 0%, rgba(148, 163, 184, 0.15) 100%) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

/* Dark mode for meeting status badges */
[data-theme="dark"] .meeting-status-badge.live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .meeting-status-badge.upcoming {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .meeting-status-badge.ended {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    border-color: rgba(75, 85, 99, 0.4) !important;
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3), 0 0 0 1px rgba(75, 85, 99, 0.2) !important;
}

[data-theme="dark"] .meeting-status-badge:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .meeting-course,
[data-theme="dark"] .meeting-time,
[data-theme="dark"] .meeting-participants {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .meeting-course:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .calendar-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .calendar-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .meeting-actions {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-view-meeting {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-view-meeting:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for action cards */
[data-theme="dark"] .action-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .action-content h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .action-content p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .calendar-toggle-card .action-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-toggle-card .action-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for action icons */
[data-theme="dark"] .action-icon {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .schedule-card .action-icon {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .calendar-toggle-card .action-icon {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

/* Dark mode for action buttons */
[data-theme="dark"] .action-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .action-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .schedule-card .action-btn {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .schedule-card .action-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* Dark mode for alert messages */
[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for page container */
[data-theme="dark"] .container-xxl {
    background: var(--bg-primary);
}

/* Dark mode for dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for calendar */
[data-theme="dark"] #calendar {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for calendar toolbar */
[data-theme="dark"] .fc-header-toolbar,
[data-theme="dark"] .fc-toolbar,
[data-theme="dark"] .fc-toolbar-ltr {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode for calendar body */
[data-theme="dark"] tbody[role="rowgroup"] {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .fc-scrollgrid tbody {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-theme-standard .fc-scrollgrid-section > * {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-col-header-cell {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-daygrid-day-number {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-button-primary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-button-primary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-toolbar-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-today-button,
[data-theme="dark"] .fc-prev-button,
[data-theme="dark"] .fc-next-button {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-today-button:hover,
[data-theme="dark"] .fc-prev-button:hover,
[data-theme="dark"] .fc-next-button:hover {
    background: var(--bg-hover) !important;
}

[data-theme="dark"] .fc-daygrid-day-events {
    background: transparent !important;
}

[data-theme="dark"] .fc-event {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-event:hover {
    background: var(--bg-hover) !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .meeting-card {
        border-radius: 16px;
    }

    .meeting-content {
        padding: 20px;
    }

    .meeting-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .meeting-title {
        font-size: 17px;
    }

    .meeting-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-join-meeting,
    .btn-view-meeting,
    .btn-view-recording {
        width: 100%;
        justify-content: center;
    }

    .action-card {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .action-content {
        order: 1;
    }

    .action-icon {
        order: 0;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .action-btn {
        order: 2;
        width: 100%;
        min-width: auto;
    }

    .calendar-section {
        padding: 20px;
        border-radius: 16px;
    }

    .fc-toolbar {
        padding: 12px 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .fc-toolbar-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }

    .fc-button-group {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .meeting-status-badge {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 10px;
    }

    .calendar-title {
        font-size: 20px;
    }

    .calendar-title i {
        font-size: 24px;
    }
}

/* Meeting-specific status badge styles for course-card layout */
.meeting-card .course-status-badge.live {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
}

.meeting-card .course-status-badge.live .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.meeting-card .course-status-badge.upcoming {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
}

.meeting-card .course-status-badge.ended {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    border: none;
}

/* Meeting card thumbnail placeholder styles */
.meeting-card .thumbnail-placeholder {
    background: linear-gradient(135deg, var(--bs-main-100), var(--bs-main-200));
}

/* Quiz Dashboard with Dark Mode Support */
.quiz-dashboard {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: all 0.3s ease;
    min-height: 100vh;
}

/* Dark Mode Styles */
[data-theme="dark"] .quiz-dashboard,
[data-bs-theme="dark"] .quiz-dashboard {
    background-color: var(--bs-dark, #212529) !important;
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .container,
[data-bs-theme="dark"] .container {
    background-color: var(--bs-dark, #212529) !important;
}

[data-theme="dark"] .dashboard-hero-card,
[data-bs-theme="dark"] .dashboard-hero-card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .quiz-dashboard .courses-management-section,
[data-bs-theme="dark"] .quiz-dashboard .courses-management-section,
[data-theme="dark"] .quiz-dashboard .quick-actions-section,
[data-bs-theme="dark"] .quiz-dashboard .quick-actions-section {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .course-card,
[data-bs-theme="dark"] .quiz-dashboard .course-card {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .course-card:hover,
[data-bs-theme="dark"] .quiz-dashboard .course-card:hover {
    border-color: var(--bs-primary);
}

[data-theme="dark"] .quiz-dashboard .course-thumbnail,
[data-bs-theme="dark"] .quiz-dashboard .course-thumbnail {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-dark, #0056b3)) !important;
}

[data-theme="dark"] .quiz-dashboard .search-input,
[data-bs-theme="dark"] .quiz-dashboard .search-input,
[data-theme="dark"] .quiz-dashboard .filter-btn,
[data-bs-theme="dark"] .quiz-dashboard .filter-btn {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .search-input:focus,
[data-bs-theme="dark"] .quiz-dashboard .search-input:focus {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-primary);
    color: var(--bs-light, #f8f9fa);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

[data-theme="dark"] .quiz-dashboard .filter-btn:hover,
[data-bs-theme="dark"] .quiz-dashboard .filter-btn:hover {
    background: var(--bs-secondary, #6c757d);
    border-color: var(--bs-primary);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .actions-menu,
[data-bs-theme="dark"] .quiz-dashboard .actions-menu,
[data-theme="dark"] .quiz-dashboard .filter-menu,
[data-bs-theme="dark"] .quiz-dashboard .filter-menu {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
}

[data-theme="dark"] .quiz-dashboard .action-item:hover,
[data-bs-theme="dark"] .quiz-dashboard .action-item:hover,
[data-theme="dark"] .quiz-dashboard .filter-option:hover,
[data-bs-theme="dark"] .quiz-dashboard .filter-option:hover {
    background: var(--bs-secondary, #6c757d);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .course-category,
[data-bs-theme="dark"] .quiz-dashboard .course-category {
    background: var(--bs-secondary, #6c757d);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .actions-trigger,
[data-bs-theme="dark"] .quiz-dashboard .actions-trigger {
    background: var(--bs-secondary, #6c757d);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .actions-trigger:hover,
[data-bs-theme="dark"] .quiz-dashboard .actions-trigger:hover {
    background: var(--bs-primary);
    color: white;
}

[data-theme="dark"] .quiz-dashboard .empty-state,
[data-bs-theme="dark"] .quiz-dashboard .empty-state {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
}

[data-theme="dark"] .quiz-dashboard .empty-state-icon,
[data-bs-theme="dark"] .quiz-dashboard .empty-state-icon {
    background: var(--bs-secondary, #6c757d);
}

[data-theme="dark"] .quiz-dashboard .quick-action-item,
[data-bs-theme="dark"] .quiz-dashboard .quick-action-item {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, #495057);
}

[data-theme="dark"] .quiz-dashboard .quick-action-item:hover,
[data-bs-theme="dark"] .quiz-dashboard .quick-action-item:hover {
    background: var(--bs-secondary, #6c757d);
    color: var(--bs-light, #f8f9fa);
}

[data-theme="dark"] .quiz-dashboard .section-title,
[data-bs-theme="dark"] .quiz-dashboard .section-title,
[data-theme="dark"] .quiz-dashboard .course-title,
[data-bs-theme="dark"] .quiz-dashboard .course-title,
[data-theme="dark"] .quiz-dashboard .action-title,
[data-bs-theme="dark"] .quiz-dashboard .action-title,
[data-theme="dark"] .quiz-dashboard .empty-state-title,
[data-bs-theme="dark"] .quiz-dashboard .empty-state-title,
[data-theme="dark"] .quiz-dashboard .filter-title,
[data-bs-theme="dark"] .quiz-dashboard .filter-title {
    color: var(--bs-light, #f8f9fa) !important;
}

[data-theme="dark"] .quiz-dashboard .section-subtitle,
[data-bs-theme="dark"] .quiz-dashboard .section-subtitle,
[data-theme="dark"] .quiz-dashboard .course-description,
[data-bs-theme="dark"] .quiz-dashboard .course-description,
[data-theme="dark"] .quiz-dashboard .action-description,
[data-bs-theme="dark"] .quiz-dashboard .action-description,
[data-theme="dark"] .quiz-dashboard .empty-state-description,
[data-bs-theme="dark"] .quiz-dashboard .empty-state-description,
[data-theme="dark"] .quiz-dashboard .filter-label,
[data-bs-theme="dark"] .quiz-dashboard .filter-label {
    color: var(--bs-light-emphasis, #dee2e6) !important;
}

[data-theme="dark"] .quiz-dashboard .metadata-item,
[data-bs-theme="dark"] .quiz-dashboard .metadata-item {
    color: var(--bs-light-emphasis, #dee2e6) !important;
}

/* ==========================================
   CAREGIVER STYLES
   Merged from: caregiver.css
   ========================================== */
/* ================================================================
   Caregiver Pages Styles
   Extracted from Blade templates
   ================================================================ */

/* ========================================
   dashboard.blade.php
   ======================================== */
/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link .badge {
    margin-left: auto;
}

.nav-menu-list__link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.nav-menu-list__link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
}


/* Hover effects */
.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .p-80 {
        padding: 40px 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .nav-menu-list__link:hover {
        transform: none;
    }

    .hover-card:hover {
        transform: none;
    }
}

/* ========================================
   subscriptions.blade.php
   ======================================== */
/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link .badge {
    margin-left: auto;
}

.nav-menu-list__link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.nav-menu-list__link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
}

/* Accordion styling */
.accordion-button {
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Table styling */
.table tbody tr:hover {
    background-color: #f8fafc;
}

/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .nav-menu-list__link:hover {
        transform: none;
    }

    .hover-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .table-responsive {
        font-size: 0.875rem;
    }
}

/* ========================================
   profile.blade.php
   ======================================== */
/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link .badge {
    margin-left: auto;
}

.nav-menu-list__link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.nav-menu-list__link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
}

/* Form styling */
.form-control, .form-select {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .nav-menu-list__link:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .flex {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ========================================
   chat-session.blade.php
   ======================================== */
/* Dark Theme Variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #9ca3af;
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-card: #1e2433;
    --border-color: #374151;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
}

/* Dark Mode Card Styling */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .border-neutral-30,
[data-theme="dark"] .border-neutral-100 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-600 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-neutral-400 {
    color: var(--text-muted) !important;
}

/* Chat Session Wrapper */
.chat-session-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Message Styling */
.message-bubble {
    position: relative;
    transition: all 0.3s ease;
}

.message-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message-content {
    border-radius: 16px;
    padding: 20px;
    position: relative;
    max-width: 100%;
}

.user-content {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 8px;
}

.ai-content {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--text-primary);
    margin-right: auto;
    border-bottom-left-radius: 8px;
}

.message-text {
    line-height: 1.6;
    font-size: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.user-message {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ai-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-message .message-header {
    align-self: flex-end;
}

.ai-message .message-header {
    align-self: flex-start;
}

/* Dark mode specific */
[data-theme="dark"] .message-bubble:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ai-content {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-outline-neutral-500 {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline-neutral-500:hover {
    background: var(--text-secondary);
    color: var(--bg-card);
}

/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .message-content {
        max-width: 100%;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn:hover {
        transform: none;
    }

    .message-bubble:hover {
        transform: none;
    }
}

/* Dark Mode Card Styling */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .border-neutral-30,
[data-theme="dark"] .border-neutral-100 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-600 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-neutral-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-neutral-400 {
    color: var(--text-muted) !important;
}


.flex {
    display: flex;
}

/* Question Card Styling */
.question-card {
    transition: all 0.3s ease;
    margin-bottom: 32px;
}

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

.question-card:last-child {
    margin-bottom: 0;
}

.question-number {
    background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

/* Options Grid */
.options-grid {
    display: grid;
    gap: 16px;
}

.option-card {
    border-radius: 12px;
    padding: 16px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-text {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

.option-correct-chosen {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.option-incorrect-chosen {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.option-correct-not-chosen {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.option-neutral {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-text {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* Short Answer Styling */
.answer-display {
    border-radius: 12px;
    padding: 16px;
    border: 2px solid transparent;
}

.answer-correct {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.answer-incorrect {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.answer-reference {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.answer-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.answer-text {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

/* Explanation Styling */
.explanation-card {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.explanation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.explanation-title {
    color: #3b82f6;
    font-weight: 600;
    font-size: 14px;
}

.explanation-content {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dark Mode Specific */
[data-theme="dark"] .option-neutral {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .option-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .answer-text {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .explanation-card {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .explanation-content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .question-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .question-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .question-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .option-label {
    color: inherit !important;
}

[data-theme="dark"] .answer-status {
    color: inherit !important;
}

[data-theme="dark"] .explanation-title {
    color: #60a5fa !important;
}


/* Fix text-info class for dark mode */
[data-theme="dark"] .text-info {
    color: #60a5fa !important;
}

/* Fix question-number for dark mode */
[data-theme="dark"] .question-number {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
}

/* Enhanced Typography and Spacing */
.question-text {
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.option-text {
    font-size: 1rem;
    line-height: 1.5;
    padding: 4px 0;
}

.answer-text {
    font-size: 1rem;
    line-height: 1.6;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.explanation-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

.question-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

[data-theme="dark"] .question-header {
    border-color: var(--border-color);
}

/* Quiz Content Wrapper for Better Width Control */
.quiz-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.questions-list {
    max-width: 100%;
    margin: 0 auto;
}

/* Responsive Width Control */
@media (min-width: 1200px) {
    .quiz-content-wrapper {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .quiz-content-wrapper {
        max-width: 1400px;
    }
}

@media (min-width: 1600px) {
    .quiz-content-wrapper {
        max-width: 1500px;
    }
}

/* Improved spacing for mobile */
@media (max-width: 768px) {
    .quiz-content-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }

    .question-card {
        margin-bottom: 24px;
        padding: 20px;
    }

    .question-text {
        font-size: 1rem;
    }

    .option-text {
        font-size: 0.9rem;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .p-24 {
        padding: 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn:hover {
        transform: none;
    }

    .question-card:hover {
        transform: none;
    }
}

/* ========================================
   children.blade.php
   ======================================== */
/* Navigation Menu Styling */
.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu-list__item {
    margin-bottom: 8px;
}

.nav-menu-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-menu-list__link .badge {
    margin-left: auto;
}

.nav-menu-list__link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-menu-list__link.bg-main-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-menu-list__link.bg-main-600:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: white;
    transform: translateX(0);
}

.nav-menu-list__link i {
    font-size: 1.25rem;
    opacity: 0.8;
}

.nav-menu-list__link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

/* Sizing utilities */
.w-32 {
    width: 32px;
}

.h-32 {
    height: 32px;
}

.w-40 {
    width: 40px;
}

.h-40 {
    height: 40px;
}

.w-48 {
    width: 48px;
}

.h-48 {
    height: 48px;
}

.w-60 {
    width: 60px;
}

.h-60 {
    height: 60px;
}

.w-64 {
    width: 64px;
}

.h-64 {
    height: 64px;
}

.w-80 {
    width: 80px;
}

.h-80 {
    height: 80px;
}

/* Text utilities */
.text-sm {
    font-size: 0.875rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.fw-medium {
    font-weight: 500;
}

/* Spacing utilities */
.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-40 {
    margin-bottom: 40px;
}

.p-16 {
    padding: 16px;
}

.p-20 {
    padding: 20px;
}

.p-24 {
    padding: 24px;
}

.p-32 {
    padding: 32px;
}

.px-12 {
    padding-left: 12px;
    padding-right: 12px;
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.px-24 {
    padding-left: 24px;
    padding-right: 24px;
}

.py-6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.py-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.pt-16 {
    padding-top: 16px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.me-2 {
    margin-right: 8px;
}

/* Border radius utilities */
.rounded-12 {
    border-radius: 12px;
}

.rounded-16 {
    border-radius: 16px;
}

.rounded-pill {
    border-radius: 50px;
}

.rounded-circle {
    border-radius: 50%;
}

/* Color utilities */
.bg-success-25 {
    background-color: rgba(34, 197, 94, 0.1);
}

.bg-info-25 {
    background-color: rgba(59, 130, 246, 0.1);
}

.bg-warning-25 {
    background-color: rgba(245, 158, 11, 0.1);
}

.bg-danger-25 {
    background-color: rgba(239, 68, 68, 0.1);
}

.bg-purple-25 {
    background-color: rgba(147, 51, 234, 0.1);
}

.bg-neutral-25 {
    background-color: rgba(115, 115, 115, 0.1);
}

/* Removed duplicate utilities - defined in main.css */

.text-success {
    color: #22c55e;
}

.text-success-600 {
    color: #16a34a;
}

.text-info {
    color: #3b82f6;
}

.text-warning {
    color: #f59e0b;
}

.text-danger {
    color: #ef4444;
}

.text-purple {
    color: #9333ea;
}

.text-neutral-400 {
    color: #9ca3af;
}

.text-neutral-500 {
    color: #6b7280;
}

.text-neutral-600 {
    color: #4b5563;
}

.text-neutral-700 {
    color: #374151;
}

.text-main-600 {
    color: #3b82f6;
}

/* Progress bars */
.progress {
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
}

.bg-gradient-main {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

/* Dark Mode Progress Bars */
[data-theme="dark"] .progress {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gradient-main {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}


/* Badge styling */
.badge {
    font-weight: 600;
}

/* Dark Mode Button and Badge Styling */
[data-theme="dark"] .btn-outline-neutral-500 {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .btn-outline-neutral-500:hover {
    background-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-neutral-200 {
    background-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-main-600 {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
}

/* Chat History Section Styling */
.chat-session-item {
    transition: all 0.3s ease;
}

.chat-session-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

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

.last-message {
    font-style: italic;
}

/* Removed duplicate utility - defined in main.css */

/* Dark mode for chat history */
[data-theme="dark"] .chat-session-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .chat-session-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .last-message {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bg-main-25 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .btn-outline-main-600 {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .btn-outline-main-600:hover {
    background-color: #60a5fa !important;
    color: var(--bg-card) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .py-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-32 {
        padding: 16px;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn:hover {
        transform: none;
    }
}


/* ==========================================
   MAIN CONTENT SPACING FIX
   Fix header overlap and scrolling issues
   ========================================== */

/* Mobile adjustments */
@media (max-width: 767px) {
    .container-xxl,
    .container-fluid,
    .container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* ==========================================
   CRITICAL: Fix header overlap and scrolling
   ========================================== */

/* Add top margin to first container inside main */
main.main-content > .container:first-child,
main.main-content > .container-xxl:first-child,
main.main-content > .container-fluid:first-child {
    margin-top: 1rem;
}

/* Ensure body can scroll */
html, body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
}

/* Fix for sticky header */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
}