/*
 * File: dark-mode.css
 * Chứa TOÀN BỘ các quy tắc cho Giao diện Tối
 */

/* ===================================================================
 * DARK MODE
 * =================================================================== */
html.dark body {
    background-color: #111827 !important; /* Màu nền chính (xám-900) */
    color: #a0aec0;
}

/* SỬA LỖI: Ép màu nền tối cho class bg-gray-50 */
html.dark .bg-gray-50 {
    background-color: #111827 !important; /* Dùng cùng màu với body */
}

html.dark .bg-white,
html.dark .custom-shadow,
html.dark .story-header-container,
html.dark .story-chapters-container,
html.dark .similar-stories-container,
html.dark .story-comments-container,
html.dark .listen-audio-container,
html.dark #commentform,
html.dark .comment-list .comment-body,
html.dark .commentlist .comment,
html.dark .story-synopsis-wrapper,
/* DÒNG GÂY LỖI ĐÃ ĐƯỢC XÓA */
html.dark .bg-gray-100,
html.dark .ranking-tab-btn.active,
html.dark .widget_truyenchuhub_recommended_widget,
html.dark .reader-header-wrapper,
html.dark .mobile-menu-panel,
html.dark .chapter-select-dropdown, 
html.dark .reader-settings-panel,
html.dark .pagination .page-numbers,
html.dark .chapter-pagination .page-numbers {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}
html.dark .text-gray-900,
html.dark .section-title,
html.dark .widget-title,
html.dark .entry-title a,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark #reply-title, html.dark .comment-reply-title,
html.dark .comment-author .fn,
html.dark .story-rating-box .rating-box-header,
html.dark .ranking-widget-story-title a,
html.dark .reader-header-story-link,
html.dark .reader-header-story-link .story-title, 
html.dark .reader-header-chapter-select,
html.dark .panel-header,
html.dark .search-results-grid .search-result-item .entry-title a {
    color: #f7fafc !important; 
}
html.dark .text-gray-500,
html.dark .rating-box-score,
html.dark .rating-box-score span,
html.dark .comment-meta a,
html.dark .latest-update-row .chapter-title {
    color: #a0aec0;
}
html.dark .text-gray-600,
html.dark .ranking-tab-btn,
html.dark .dropdown-list a,
html.dark .comment-meta,
html.dark .reader-tool-btn,
html.dark .latest-update-row .chapter-title {
    color: #cbd5e0;
}
html.dark .text-gray-700,
html.dark .rating-box-score .font-bold {
    color: #e2e8f0;
}
html.dark .text-gray-800,
html.dark .latest-update-row .story-title {
    color: #edf2f7;
}
html.dark .border-b, html.dark .border-t, html.dark .border-gray-100,
html.dark .border-gray-200, html.dark .border-dashed, html.dark .comment-list .children {
    border-color: #4a5568; 
}
html.dark header.bg-white {
    background-color: #2d3748;
    border-bottom-color: #4a5568;
}
/* Trong dark-mode.css */
html.dark .main-menu-item {
    color: #d1d5db; /* gray-300 */
}
html.dark .main-menu-item:hover {
    color: #FF6F61;
}
html.dark .mobile-main-menu a {
    color: #d1d5db;
    border-bottom-color: #374151; /* gray-700 */
}
html.dark .mobile-main-menu a:hover {
    color: #FF6F61;
}
html.dark .mobile-menu-panel { 
    background-color: #1f2937; /* gray-800 */
}
html.dark footer.bg-gray-900 {
    background-color: #171923;
}
html.dark .search-field,
html.dark #chapter-search-input {
    background-color: #4a5568;
    border-color: #718096;
    color: #f7fafc;
}
html.dark .search-field::placeholder {
    color: #a0aec0;
}
html.dark .button-secondary,
html.dark .nav-btn,
html.dark .setting-btn,
html.dark .reader-header-chapter-select,
html.dark .reader-tool-btn,
html.dark .pagination .page-numbers, 
html.dark .chapter-pagination .page-numbers { 
    background-color: #4a5568;
    color: #f7fafc;
    border-color: #718096;
}
html.dark .button-secondary:hover,
html.dark .pagination .page-numbers:hover, 
html.dark .chapter-pagination .page-numbers:hover {
    background-color: #718096;
}
html.dark .nav-btn.disabled,
html.dark .reader-tool-btn.disabled {
    background-color: #2d3748;
    opacity: 0.4;
}
html.dark .story-tag {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}
html.dark .story-tag.status-completed {
    background-color: #27573d;
    color: #9ae6b4;
    border-color: #38a169;
}
html.dark .story-tag.status-updating {
    background-color: #2c5282;
    color: #90cdf4;
    border-color: #4299e1;
}
html.dark .chapter-link {
    color: #cbd5e0 !important;
}
html.dark .chapter-link:hover {
    background-color: #4a5568;
}
html.dark .sort-btn:hover,
html.dark .sort-btn.active,
html.dark .dropdown-list a:hover,
html.dark .dropdown-list a.current-chapter {
    background-color: #4a5568;
}
html.dark .story-rating-box {
    background-color: #1a202c;
    border-color: #4a5568;
}
html.dark #commentform p label {
    color: #cbd5e0;
}
html.dark #commentform input[type="text"],
html.dark #commentform input[type="email"],
html.dark #commentform input[type="url"],
html.dark #commentform textarea {
    background-color: #4a5568;
    border-color: #718096;
    color: #f7fafc;
}
html.dark .truyen-tts-playlist-player,
html.dark .truyen-tts-single-player,
html.dark .tts-settings-modal,
html.dark .tts-header-actions {
    background-color: #2d3748 !important; 
    color: #cbd5e0 !important;
    border-color: #4a5568 !important;
}
html.dark .tts-action-btn,
html.dark .tts-settings-select {
    background-color: #4a5568 !important;
    color: #f7fafc !important;
    border-color: #718096 !important;
}
html.dark .truyen-tts-playlist-player h2, html.dark .truyen-tts-playlist-player h3,
html.dark .truyen-tts-playlist-player .playlist-track-title,
html.dark .truyen-tts-playlist-player .wp-playlist-caption,
html.dark .truyen-tts-single-player h2,
html.dark .truyen-tts-single-player h3,
html.dark .tts-settings-modal h2,
html.dark .tts-settings-modal h3,
html.dark .tts-settings-modal label,
html.dark .reply a.comment-reply-link {
    color: #f7fafc !important;
}
html.dark .reply a.comment-reply-link {
    background-color: #4a5568;
}

/* Bổ sung style cho story-tag trong Dark Mode */
html.dark .story-tag {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}
html.dark .story-tag.status-completed {
    background-color: #27573d;
    color: #9ae6b4;
    border-color: #38a169;
}
html.dark .story-tag.status-updating {
    background-color: #2c5282;
    color: #90cdf4;
    border-color: #4299e1;
}

/* ===================================================================
 * PHIÊN BẢN 31.2: CẬP NHẬT DARK MODE CHO WIDGET 3 CỘT
 * =================================================================== */
html.dark .widget_tch_three_column_widget,
html.dark .widget-column {
    background-color: #2d3748 !important; /* gray-800 */
    border-color: #4a5568 !important; /* gray-700 */
}

/* SỬA LỖI: Thêm quy tắc màu cho tiêu đề cột */
html.dark .widget-column-title {
    color: #f7fafc !important; /* gray-50 */
    border-bottom-color: #4a5568;
}

html.dark .rank-number {
    color: #4a5568;
}
html.dark .ranked-list-item.is-top-1 .rank-number {
    color: #f87171;
}
html.dark .ranked-item-title a,
html.dark .latest-update-row-widget .story-title,
html.dark .latest-update-row-widget .update-story-title {
    color: #e2e8f0; 
}
html.dark .ranked-list-item.is-top-1 .ranked-item-title a {
    color: #e2e8f0;
}
html.dark .ranked-item-title a:hover,
html.dark .latest-update-row-widget .story-title:hover,
html.dark .latest-update-row-widget .update-main-link:hover .update-story-title {
    color: #FF6F61;
}
html.dark .ranked-item-meta,
html.dark .latest-update-row-widget .time-ago,
html.dark .latest-update-row-widget .update-chapter-title {
    color: #a0aec0;
}
html.dark .ranked-list-item.is-top-1 .ranked-item-meta {
    color: #cbd5e0;
}
html.dark .latest-update-row-widget .story-title i {
    color: #718096;
}
html.dark .latest-update-row-widget .story-title:hover i {
    color: #FF6F61;
}
html.dark .ranked-item-thumb {
    border-color: #4a5568;
}
html.dark .ranked-list-item.is-top-1 {
    border-bottom-color: #4a5568 !important;
}
html.dark .latest-update-row-widget:not(:last-child) {
    border-bottom-color: #4a5568;
}

}

html.dark .widget-column.wide {
    border-color: #4a5568;
}
/* Cập nhật Dark Mode cho Widget Bảng Xếp Hạng */
html.dark .ranking-widget-item:not(:last-child) {
    border-bottom-color: #4a5568;
}
html.dark .ranking-widget-content .rank-number {
    color: #4a5568;
}
html.dark .widget_truyenchuhub_ranking_widget .rank-number.is-top-1 { color: #f87171 !important; } /* Đỏ nhạt */
html.dark .widget_truyenchuhub_ranking_widget .rank-number.is-top-2 { color: #fb923c !important; } /* Cam nhạt */
html.dark .widget_truyenchuhub_ranking_widget .rank-number.is-top-3 { color: #facc15 !important; } /* Vàng nhạt */
html.dark .ranking-widget-meta,
html.dark .ranking-widget-genres { 
    color: #a0aec0; 
}
/* Dark Mode cho đường kẻ tiêu đề Widget BTV */
html.dark .widget_tch_btv_slider_widget .widget-title {
    border-bottom-color: #4a5568; /* Màu đường kẻ tối hơn */
}
/* Dark Mode cho đường kẻ tiêu đề Widget Bài Viết Mới */
html.dark .widget_tch_latest_posts_widget .widget-title {
    border-bottom-color: #4a5568; /* Màu đường kẻ tối hơn */
}
/* Dark Mode cho Widget Trang Tùy Chọn */
html.dark .widget_tch_selected_pages_widget .widget-title {
    border-bottom-color: #4a5568;
}
html.dark .selected-page-item:not(:last-child) {
    border-bottom-color: #4a5568;
}
html.dark .selected-page-item a {
    color: #cbd5e0;
}
/* ===================================================================
 * PHIÊN BẢN CUỐI CÙNG: HOÀN THIỆN DARK MODE
 * =================================================================== */

/* 1. Style cho các thẻ tag/thể loại mặc định */
html.dark .story-tag {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
    border-color: #4b5563; /* gray-600 */
}

/* 2. Style cho các dấu chấm của Slider BTV */
html.dark .bookshelf-indicator {
    background: #4a5568; /* gray-700 */
}
html.dark .bookshelf-indicator.active {
    background: #FF6F61; /* Màu chính của theme */
}

/* 3. Style cho đường kẻ và link trong widget Bài Viết Mới & Trang Tùy Chọn */
html.dark .latest-post-item:not(:last-child),
html.dark .selected-page-item:not(:last-child) {
    border-bottom-color: #4a5568; /* Màu đường kẻ tối hơn */
}
html.dark .latest-post-item a,
html.dark .selected-page-item a {
    color: #cbd5e0; /* Màu chữ sáng hơn */
}
html.dark .latest-post-item a:hover,
html.dark .selected-page-item a:hover {
    color: #FF6F61;
}
/* ===================================================================
 * PHIÊN BẢN 44.2: SỬA LỖI DARK MODE CHO TAB BẢNG XẾP HẠNG
 * =================================================================== */

/* Định dạng cho các tab không được chọn */
html.dark .ranking-tab-btn {
    background-color: transparent;
    color: #a0aec0; /* Màu chữ xám nhạt */
}

/* Hiệu ứng khi di chuột qua các tab không được chọn */
html.dark .ranking-tab-btn:hover:not(.active) {
    background-color: #4a5568; /* Nền xám đậm hơn */
}

/* Định dạng cho tab đang được chọn (active) */
html.dark .ranking-tab-btn.active {
    background-color: #FF6F61 !important; /* Dùng màu chính của theme */
    color: white !important;
}
/* ===================================================================
 * ÉP DARK MODE CHO PLUGIN TRUYEN TTS PLAYLIST
 * =================================================================== */

/* 1. Nền chính của toàn bộ playlist */
html.dark .tts-playlist-container {
    background-color: #2d3748 !important; /* Nền xám tối */
    border-color: #4a5568 !important;
}

/* 2. Ô nhập số trang và nút "Đi đến" */
html.dark .tts-jumpto-input,
html.dark .tts-jumpto-btn {
    background-color: #4a5568 !important; /* Nền xám đậm hơn */
    color: #f7fafc !important; /* Chữ trắng */
    border-color: #718096 !important;
}

/* Giữ màu cho placeholder của ô nhập */
html.dark .tts-jumpto-input::placeholder {
    color: #a0aec0 !important;
}

/* 3. Nền của các mục chương trong danh sách */
html.dark .tts-playlist-item {
    background-color: #2d3748 !important; /* Nền xám tối */
    color: #cbd5e0 !important; /* Chữ xám nhạt */
    border-color: #4a5568 !important;
}

/* 4. Đổi màu chữ của tiêu đề chương */
html.dark .tts-playlist-item .item-title {
    color: #e2e8f0 !important; /* Chữ trắng hơn */
}

/* 5. Style cho mục chương đang được chọn (nếu có) */
html.dark .tts-playlist-item.tts-current-item {
    background-color: #FF6F61 !important; /* Dùng màu chính của theme */
    color: #ffffff !important;
    border-color: #FF6F61 !important;
}
html.dark .tts-playlist-item.tts-current-item .item-title {
    color: #ffffff !important;
}

/* 6. Style cho các nút điều khiển media player (nếu có) */
html.dark .mejs-container .mejs-controls {
    background: #2d3748 !important;
}
html.dark .mejs-container .mejs-time,
html.dark .mejs-container .mejs-button>button {
    color: #cbd5e0 !important;
}
/* Dark Mode cho Widget 3 Cột */
html.dark .widget-column.wide,
html.dark .widget-column-title {
    border-color: #4a5568;
}