/* CSS để áp dụng chế độ tối/sáng dựa trên class của html */
html.dark-theme body, 
body.dark {
    background-color: #18191a !important;
    color: #e4e6eb !important;
}

html.light-theme body,
body.light {
    background-color: #fff !important;
    color: #333 !important;
}

/* Đảm bảo theme được áp dụng ngay lập tức */
html.theme-pending {
    visibility: hidden;
}

/* Class khi chủ đề đã được khởi tạo */
html.theme-ready {
    visibility: visible;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Đảm bảo CSS theme được áp dụng cho toàn bộ site - Phần chung */
html.dark-theme *, 
body.dark * {
    --box-bg: #242526 !important;
    --input-bg: #3a3b3c !important;
    --text-color: #e4e6eb !important;
    --text-muted: #b0b3b8 !important;
}

html.light-theme *,
body.light * {
    --main-bg: #fff !important;
    --box-bg: #f5f5f5 !important;
    --input-bg: #fff !important;
    --text-color: #333 !important;
    --text-muted: #666 !important;
}

/* Đảm bảo CSS theme được áp dụng cho toàn bộ site - Các container chính */
html.dark-theme .content, 
html.dark-theme .main_content,
html.dark-theme .div_middle,
html.dark-theme .box,
html.dark-theme .row,
html.dark-theme section,
html.dark-theme article,
html.dark-theme aside,
html.dark-theme .container,
html.dark-theme .wrapper,
html.dark-theme .page,
html.dark-theme .main,
html.dark-theme #wrapper,
html.dark-theme #main,
html.dark-theme #content,
body.dark .content,
body.dark .main_content,
body.dark .div_middle, 
body.dark .box,
body.dark .row,
body.dark section,
body.dark article,
body.dark aside,
body.dark .container,
body.dark .wrapper,
body.dark .page,
body.dark .main,
body.dark #wrapper,
body.dark #main,
body.dark #content {
    background-color: var(--main-bg) !important;
    color: var(--text-color) !important;
}

/* Các thành phần cụ thể */
html.dark-theme .box, 
html.dark-theme .story-list,
html.dark-theme .story-item,
html.dark-theme .module, 
html.dark-theme .card,
html.dark-theme .panel,
html.dark-theme .sidebar-box,
body.dark .box, 
body.dark .story-list,
body.dark .story-item,
body.dark .module,
body.dark .card,
body.dark .panel,
body.dark .sidebar-box {
    background-color: var(--box-bg) !important;
}

/* Đảm bảo các input, form elements cũng thay đổi theo theme */
html.dark-theme input, 
html.dark-theme select, 
html.dark-theme textarea,
body.dark input, 
body.dark select, 
body.dark textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-bg) !important;
}

/* Đảm bảo màu text trong light theme */
html.light-theme .content,
html.light-theme .main_content,
html.light-theme .div_middle,
html.light-theme .box, 
html.light-theme .row,
html.light-theme section,
html.light-theme article,
html.light-theme aside,
html.light-theme .container,
html.light-theme .wrapper,
html.light-theme .page,
html.light-theme .main,
html.light-theme #wrapper,
html.light-theme #main,
html.light-theme #content,
body.light .content,
body.light .main_content,
body.light .div_middle,
body.light .box,
body.light .row,
body.light section,
body.light article,
body.light aside,
body.light .container,
body.light .wrapper,
body.light .page,
body.light .main,
body.light #wrapper,
body.light #main,
body.light #content {
    background-color: var(--main-bg) !important;
    color: var(--text-color) !important;
}

/* Đảm bảo header, footer cũng đổi màu theo theme */
html.dark-theme header, html.dark-theme footer,
body.dark header, body.dark footer {
    background-color: var(--box-bg) !important;
    color: var(--text-color) !important;
}

html.light-theme header, html.light-theme footer,
body.light header, body.light footer {
    background-color: var(--box-bg) !important;
    color: var(--text-color) !important;
}

/* Thêm transition để chuyển đổi theme mượt mà hơn */
body, body *, html, html * {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Đặt lại transition khi chuyển đổi theme để tránh chuyển đổi nhiều lần */
html.theme-switch * {
    transition: none !important;
}

/* Đặc biệt cho trang chủ và tìm kiếm nâng cao */
html.dark-theme .module_box,
html.dark-theme .advanced-search-container,
html.dark-theme .home-page,
html.dark-theme .search-page,
html.dark-theme .genre-box,
html.dark-theme .list-genre,
html.dark-theme .list-story,
body.dark .module_box,
body.dark .advanced-search-container,
body.dark .home-page,
body.dark .search-page,
body.dark .genre-box,
body.dark .list-genre,
body.dark .list-story {
    background-color: var(--main-bg) !important;
    color: var(--text-color) !important;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
    html.dark-theme .mobile-only,
    html.dark-theme .mobile_display,
    html.dark-theme [class*="mobile-"],
    body.dark .mobile-only,
    body.dark .mobile_display,
    body.dark [class*="mobile-"] {
        background-color: var(--main-bg) !important;
        color: var(--text-color) !important;
    }
    
    html.dark-theme .story-list.mobile,
    html.dark-theme .story-item.mobile,
    body.dark .story-list.mobile,
    body.dark .story-item.mobile {
        background-color: var(--box-bg) !important;
    }
}