/* ========================================
   Light Theme: Cream + Leaf Pattern
   ======================================== */

/* Light theme cream background with subtle leaf pattern */
.theme-light-cream {
    background-color: #FAF7F2;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%2390B77D' fill-opacity='0.08'%3E%3Cpath d='M20 35c-3 0-5-2-7-5s-3-6-3-10c0 6 2 10 5 13s7 5 12 5c-3-1-5-2-7-3zm40 0c3 0 5-2 7-5s3-6 3-10c0 6-2 10-5 13s-7 5-12 5c3-1 5-2 7-3zM35 60c0 3-2 5-5 7s-6 3-10 3c6 0 10-2 13-5s5-7 5-12c-1 3-2 5-3 7zm10 0c0 3 2 5 5 7s6 3 10 3c-6 0-10-2-13-5s-5-7-5-12c1 3 2 5 3 7z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* Ensure dark mode overrides the cream background */
.dark .theme-light-cream {
    background-color: #111827 !important;
    background-image: none !important;
}

/* Honey button styles for light mode */
.btn-honey {
    background: linear-gradient(135deg, #E8A86B 0%, #D9924D 50%, #C47D3A 100%);
    color: white;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(196, 125, 58, 0.3);
}

.btn-honey:hover {
    background: linear-gradient(135deg, #D9924D 0%, #C47D3A 50%, #A86A2D 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(196, 125, 58, 0.4);
}

/* Honey gradient for section headers */
.bg-honey-gradient {
    background: linear-gradient(135deg, #E8A86B 0%, #D9924D 50%, #C47D3A 100%);
}

/* Decorative leaf element */
.leaf-decoration {
    position: absolute;
    opacity: 0.15;
    pointer-events: none;
}

.leaf-decoration-left {
    left: 0;
    bottom: 0;
    transform: rotate(-15deg);
}

.leaf-decoration-right {
    right: 0;
    top: 0;
    transform: rotate(165deg) scaleX(-1);
}

/* Light mode: Override white backgrounds to cream */
:root:not(.dark) .bg-white {
    background-color: #FAF7F2 !important;
}

:root:not(.dark) .bg-gray-50 {
    background-color: #F5F0E8 !important;
}

:root:not(.dark) .bg-gray-100 {
    background-color: #EDE5D8 !important;
}

/* Cards and containers in light mode */
:root:not(.dark) .theme-light-cream .bg-white {
    background-color: #FDFCFA !important;
    border-color: #E0D4C3 !important;
}

/* Breadcrumb background */
:root:not(.dark) .theme-light-cream nav .bg-gradient-to-r {
    background: linear-gradient(to right, #FDFCFA, #FAF7F2, #FDFCFA) !important;
}

/* Breadcrumb bar - force cream gradient in light mode (lines 20–21) */
:root:not(.dark) .breadcrumb-bar {
    background: linear-gradient(to right, #FDFCFA, #FAF7F2, #FDFCFA) !important;
    border-color: #EDE5D8 !important;
}

/* เนื้อหาในคอร์ส - force cream background in light mode */
:root:not(.dark) .course-content-sidebar,
:root:not(.dark) .module-content-panel {
    background-color: #FDFCFA !important;
    border-color: #EDE5D8 !important;
}

/* ========================================
   Dark Mode Styles - Force Override
   ======================================== */

/* Dark Mode Styles - Force Override */

/* Navbar Dark Mode (Admin & Frontend) - Semi-transparent */
.dark nav,
.dark header {
    background-color: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(55, 65, 81, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Sidebar Dark Mode - Semi-transparent */
.dark aside#admin-sidebar {
    background-color: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(55, 65, 81, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark aside#admin-sidebar > div {
    background-color: transparent !important;
}

/* Sections - Content areas */
.dark section.py-12 {
    background-color: #1f2937 !important;
}

/* Specific section overrides */
.dark section.bg-white {
    background-color: #1f2937 !important;
}

.dark section.bg-gray-50 {
    background-color: #111827 !important;
}

/* Override bg-white in dark mode */
.dark .bg-white:not(.course-card):not([class*="bg-gradient"]):not(.carousel-control-prev):not(.carousel-control-next) {
    background-color: #1f2937 !important;
}

/* Content wrappers */
.dark .bg-gray-50.dark\:bg-gray-900 {
    background-color: #111827 !important;
}

/* Dashboard Content */
.dark body {
    background-color: #111827 !important;
}

/* Cards - Semi-transparent */
.dark .bg-white {
    background-color: rgba(31, 41, 55, 0.8) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Text Colors */
.dark .text-gray-900 {
    color: #f9fafb !important;
}

.dark .text-gray-800 {
    color: #f9fafb !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

/* Borders */
.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-100 {
    border-color: #374151 !important;
}

/* Backgrounds */
.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #374151 !important;
}

/* Hover States */
.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* Inputs */
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="email"],
.dark input[type="password"],
.dark select,
.dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Buttons */
.dark button {
    color: #d1d5db !important;
}

.dark button:hover {
    background-color: #374151 !important;
}

/* Logo - Don't invert any images by default */
.dark img {
    filter: none !important;
}

/* Don't invert icons/svg */
.dark svg {
    filter: none !important;
}

/* Don't invert course images and carousel images */
.dark .course-image-view,
.dark [class*="bg-gradient"],
.dark .carousel-item img,
.dark .carousel-item div[style*="background-image"],
.dark section[class*="bg-gray-900"] img,
.dark .course-card img {
    filter: none !important;
}

/* Course Cards - keep background */
.dark .course-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Hero/Carousel sections - don't change */
.dark section.relative.bg-gray-900,
.dark .bg-gradient-to-r {
    background: inherit !important;
}

/* Dropdown menus - Semi-transparent */
.dark #user-menu-dropdown {
    background-color: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(55, 65, 81, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark #user-menu-dropdown a {
    color: #d1d5db !important;
}

.dark #user-menu-dropdown a:hover {
    background-color: #374151 !important;
}

/* Modal/Bootstrap overrides - Semi-transparent */
/* Light mode: modal cream background */
.modal-content {
    background-color: #FAF7F2 !important;
}

.dark .modal-content {
    background-color: rgba(31, 41, 55, 0.95) !important;
    color: #f9fafb !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .modal-header,
.dark .modal-footer {
    border-color: #374151 !important;
}

/* Transition for smooth theme switching */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Shimmer Animation for Progress Bars and Gradients */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Embedded Content Full Width Styles */
.module-embedded-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.module-embedded-content > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full width embedded container */
.module-embedded-content > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.module-embedded-content iframe,
.module-embedded-content video,
.module-embedded-content embed,
.module-embedded-content object {
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.module-embedded-content video {
    height: auto !important;
    max-height: 800px !important;
}

/* Override prose styles for embedded content */
.module-embedded-content .prose {
    max-width: 100% !important;
}

.module-embedded-content .prose iframe,
.module-embedded-content .prose video,
.module-embedded-content .prose embed,
.module-embedded-content .prose object {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Force full width for embedded content containers */
.bg-white.dark\:bg-gray-700\/50 > .module-embedded-content > div,
#module-content-wrapper .module-embedded-content > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove padding from parent when has embedded content */
#module-content-wrapper .module-embedded-content {
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    width: calc(100% + 4rem) !important;
    max-width: calc(100% + 4rem) !important;
}

#module-content-wrapper .module-embedded-content > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}