/* assets/css/dark-mode.css - Complete Refined Dark Mode Styles for All Pages */

/* ========== DARK MODE ROOT VARIABLES ========== */
.dark-mode {
    --primary-color: var(--mb-primary-500);
    --primary-dark: var(--mb-primary);
    --primary-light: var(--mb-primary-400);
    --secondary-color: #10B981;
    --accent-color: #F59E0B;
    --danger-color: #EF4444;
    
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-card: #1E293B;
    --bg-hover: #334155;
    --bg-input: #0F172A;
    
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-dark: #F1F5F9;
    
    --border-color: #334155;
    --border-light: #1E293B;
    
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* ========== BASE DARK MODE STYLES ========== */
.dark-mode body,
.dark-mode {
    background-color: #0F172A;
    color: #F1F5F9;
}

/* ========== NAVIGATION BAR DARK MODE (Fixed) ========== */
.dark-mode .navbar {
    background: linear-gradient(135deg, #0F172A 0%, var(--mb-surface-3) 100%) !important;
    border-bottom: 1px solid #334155;
}

.dark-mode .navbar-brand {
    color: white;
}

.dark-mode .navbar-brand span {
    background: linear-gradient(135deg, #fff 0%, var(--mb-primary-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark-mode .navbar-nav .nav-link {
    color: #CBD5E1;
}

.dark-mode .navbar-nav .nav-link:hover,
.dark-mode .navbar-nav .nav-link.active {
    color: white;
    background: rgba(var(--mb-primary-rgb), 0.1);
    border-radius: 6px;
}

.dark-mode .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Dark Mode */
.dark-mode .dropdown-menu {
    background-color: #1E293B;
    border-color: #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.dark-mode .dropdown-item {
    color: #CBD5E1;
}

.dark-mode .dropdown-item:hover {
    background-color: #334155;
    color: white;
}

.dark-mode .dropdown-divider {
    border-top-color: #334155;
}

/* ========== THEME TOGGLE BUTTON (Fixed) ========== */
.dark-mode .btn-theme-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FCD34D;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dark-mode .btn-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(15deg) scale(1.05);
    border-color: rgba(255, 255, 255, 0.4);
}

.dark-mode .btn-theme-toggle .fa-sun {
    display: inline-block;
}

.dark-mode .btn-theme-toggle .fa-moon {
    display: none;
}

/* Light mode toggle button (when in dark mode CSS is loaded but body has no dark-mode class) */
body:not(.dark-mode) .btn-theme-toggle {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--mb-primary);
}

body:not(.dark-mode) .btn-theme-toggle .fa-sun {
    display: none;
}

body:not(.dark-mode) .btn-theme-toggle .fa-moon {
    display: inline-block;
}

body:not(.dark-mode) .btn-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: rotate(-15deg) scale(1.05);
}

/* ========== COMPACT SEARCH BAR (Navbar) ========== */
.dark-mode .navbar-search-compact .search-input-compact {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.dark-mode .navbar-search-compact .search-input-compact:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.dark-mode .navbar-search-compact .search-input-compact::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .navbar-search-compact .search-btn-compact {
    background: rgba(var(--mb-primary-rgb), 0.8);
}

.dark-mode .navbar-search-compact .search-btn-compact:hover {
    background: var(--mb-primary);
}

/* ========== HERO SEARCH SECTION ========== */
.dark-mode .hero-search-section {
    background: linear-gradient(135deg, var(--mb-surface-3) 0%, var(--mb-surface-3) 100%);
}

.dark-mode .center-search-box {
    background: #1E293B;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.dark-mode .center-search-box input {
    background: #1E293B;
    color: #F1F5F9;
}

.dark-mode .center-search-box input::placeholder {
    color: #94A3B8;
}

.dark-mode .search-tags a {
    background: rgba(255, 255, 255, 0.15);
}

.dark-mode .search-tags a:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ========== CARDS DARK MODE ========== */
.dark-mode .card,
.dark-mode .category-card,
.dark-mode .tutorial-card,
.dark-mode .course-card,
.dark-mode .blog-card,
.dark-mode .feature-card,
.dark-mode .tutorial-card-v2,
.dark-mode .trending-card,
.dark-mode .project-card,
.dark-mode .roadmap-card,
.dark-mode .resource-card,
.dark-mode .widget,
.dark-mode .sidebar-widget {
    background-color: #1E293B;
    border-color: #334155;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.dark-mode .card-header {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border-bottom-color: #334155;
}

.dark-mode .card-header h5,
.dark-mode .card-header h6 {
    color: #F1F5F9;
}

.dark-mode .card-body {
    background-color: #1E293B;
}

.dark-mode .card-footer {
    background-color: #0F172A;
    border-top-color: #334155;
}

.dark-mode .category-card:hover,
.dark-mode .tutorial-card:hover,
.dark-mode .course-card:hover,
.dark-mode .blog-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    border-color: var(--mb-primary-500);
}

.dark-mode .category-card h3,
.dark-mode .tutorial-card h3,
.dark-mode .course-card h3,
.dark-mode .blog-card h3 {
    color: #F1F5F9;
}

.dark-mode .category-card p,
.dark-mode .tutorial-card p,
.dark-mode .course-card p,
.dark-mode .blog-card p {
    color: #CBD5E1;
}

/* ========== TABLES DARK MODE (Critical Fix) ========== */
.dark-mode .table {
    color: #CBD5E1;
    background-color: #1E293B;
}

.dark-mode .table thead th {
    color: #F1F5F9;
    background-color: #1E293B;
    border-bottom-color: #334155;
}

.dark-mode .table tbody td {
    color: #CBD5E1;
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #0F172A;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) td {
    color: #CBD5E1;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: #334155;
}

.dark-mode .table-hover tbody tr:hover td {
    color: #F1F5F9;
}

.dark-mode .table-bordered {
    border-color: #334155;
}

.dark-mode .table-bordered td,
.dark-mode .table-bordered th {
    border-color: #334155;
}

/* Force fix for any table text visibility */
.dark-mode .table td,
.dark-mode .table th {
    color: #CBD5E1 !important;
}

/* ========== FORMS DARK MODE ========== */
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .input-group-text {
    background-color: #0F172A;
    border-color: #334155;
    color: #F1F5F9;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #0F172A;
    border-color: var(--mb-primary-500);
    color: #F1F5F9;
    box-shadow: 0 0 0 0.2rem rgba(var(--mb-primary-rgb), 0.25);
}

.dark-mode .form-control::placeholder {
    color: #64748B;
}

.dark-mode .form-label {
    color: #CBD5E1;
}

/* ========== BUTTONS DARK MODE ========== */
.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--mb-primary), var(--mb-primary-500));
    border: none;
}

.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, var(--mb-primary-500), var(--mb-primary-400));
}

.dark-mode .btn-outline-primary {
    border-color: var(--mb-primary-500);
    color: var(--mb-primary-400);
}

.dark-mode .btn-outline-primary:hover {
    background-color: var(--mb-primary-500);
    color: white;
}

.dark-mode .btn-outline-secondary {
    border-color: #64748B;
    color: #94A3B8;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: #64748B;
    color: white;
}

.dark-mode .btn-light {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

.dark-mode .btn-light:hover {
    background-color: #334155;
    color: white;
}

/* Login/Signup Nav Buttons */
.dark-mode .btn-login-nav {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.dark-mode .btn-login-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode .btn-signup-nav {
    background: linear-gradient(135deg, var(--mb-primary), var(--mb-primary-600));
}

.dark-mode .btn-signup-nav:hover {
    background: linear-gradient(135deg, var(--mb-primary-600), var(--mb-primary-700));
}

/* ========== ALERTS DARK MODE ========== */
.dark-mode .alert {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .alert-info {
    background-color: #1E3A5F;
    border-color: #2563EB;
    color: #93C5FD;
}

.dark-mode .alert-success {
    background-color: #064E3B;
    border-color: #059669;
    color: #6EE7B7;
}

.dark-mode .alert-warning {
    background-color: #78350F;
    border-color: #D97706;
    color: #FCD34D;
}

.dark-mode .alert-danger {
    background-color: #7F1D1D;
    border-color: #DC2626;
    color: #FCA5A5;
}

.dark-mode .alert-dismissible .btn-close {
    filter: invert(1);
}

/* ========== MODAL DARK MODE ========== */
.dark-mode .modal-content {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: #334155;
}

.dark-mode .modal-title {
    color: #F1F5F9;
}

.dark-mode .btn-close {
    filter: invert(1);
}

/* ========== PAGINATION DARK MODE ========== */
.dark-mode .page-link {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

.dark-mode .page-link:hover {
    background-color: #334155;
    border-color: var(--mb-primary);
    color: white;
}

.dark-mode .page-item.active .page-link {
    background-color: var(--mb-primary);
    border-color: var(--mb-primary);
}

.dark-mode .page-item.disabled .page-link {
    background-color: #0F172A;
    color: #64748B;
}

/* ========== BREADCRUMBS DARK MODE ========== */
.dark-mode .breadcrumb {
    background-color: #1E293B;
}

.dark-mode .breadcrumb-item a {
    color: var(--mb-primary-400);
}

.dark-mode .breadcrumb-item a:hover {
    color: var(--mb-primary-300);
}

.dark-mode .breadcrumb-item.active {
    color: #CBD5E1;
}

.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #64748B;
}

/* ========== BADGES DARK MODE ========== */
.dark-mode .badge {
    color: white;
}

.dark-mode .badge.bg-info {
    background-color: #1E3A5F !important;
    color: #93C5FD;
}

.dark-mode .badge.bg-success {
    background-color: #064E3B !important;
    color: #6EE7B7;
}

.dark-mode .badge.bg-warning {
    background-color: #78350F !important;
    color: #FCD34D;
}

.dark-mode .badge.bg-danger {
    background-color: #7F1D1D !important;
    color: #FCA5A5;
}

.dark-mode .badge.bg-secondary {
    background-color: #334155 !important;
    color: #CBD5E1;
}

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

/* ========== PROGRESS BAR DARK MODE ========== */
.dark-mode .progress {
    background-color: #334155;
}

.dark-mode .progress-bar {
    background: linear-gradient(135deg, var(--mb-primary), var(--mb-primary-500));
}

/* ========== CODE BLOCKS DARK MODE ========== */
.dark-mode pre,
.dark-mode code {
    background-color: #0F172A;
    color: #CBD5E1;
}

.dark-mode pre {
    border: 1px solid #334155;
    border-radius: 8px;
}

.dark-mode code[class*="language-"],
.dark-mode pre[class*="language-"] {
    text-shadow: none;
}

/* Prism.js Dark Mode Override */
.dark-mode .token.comment,
.dark-mode .token.prolog,
.dark-mode .token.doctype,
.dark-mode .token.cdata {
    color: #94A3B8;
}

.dark-mode .token.punctuation {
    color: #CBD5E1;
}

.dark-mode .token.property,
.dark-mode .token.tag,
.dark-mode .token.boolean,
.dark-mode .token.number,
.dark-mode .token.constant,
.dark-mode .token.symbol,
.dark-mode .token.deleted {
    color: #F87171;
}

.dark-mode .token.selector,
.dark-mode .token.attr-name,
.dark-mode .token.string,
.dark-mode .token.char,
.dark-mode .token.builtin,
.dark-mode .token.inserted {
    color: #6EE7B7;
}

.dark-mode .token.operator,
.dark-mode .token.entity,
.dark-mode .token.url,
.dark-mode .language-css .token.string,
.dark-mode .style .token.string {
    color: #FCD34D;
}

.dark-mode .token.atrule,
.dark-mode .token.attr-value,
.dark-mode .token.keyword {
    color: var(--mb-primary-400);
}

.dark-mode .token.function,
.dark-mode .token.class-name {
    color: #FDE047;
}

/* ========== FOOTER DARK MODE ========== */
.dark-mode footer,
.dark-mode .footer {
    background: #0F172A;
    border-top: 1px solid #334155;
}

.dark-mode footer h5,
.dark-mode .footer h5 {
    color: #F1F5F9;
}

.dark-mode .footer-links a {
    color: #94A3B8;
}

.dark-mode .footer-links a:hover {
    color: var(--mb-primary-400);
}

.dark-mode .social-links a {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .social-links a:hover {
    background: var(--mb-primary);
}

.dark-mode .footer-bottom {
    border-top-color: #334155;
}

/* ========== MCQ/QUIZ PAGE DARK MODE ========== */
.dark-mode .mcq-container,
.dark-mode .quiz-container {
    background: #0F172A;
}

.dark-mode .mcq-hero,
.dark-mode .quiz-hero {
    background: linear-gradient(135deg, var(--mb-surface-3) 0%, #0F172A 100%);
}

.dark-mode .quiz-settings-widget,
.dark-mode .recent-results,
.dark-mode .top-quizzes,
.dark-mode .tips-widget,
.dark-mode .leaderboard-widget {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .quiz-option {
    background-color: #0F172A;
    border-color: #334155;
    color: #CBD5E1;
}

.dark-mode .quiz-option:hover {
    background-color: #334155;
}

.dark-mode .quiz-option.selected {
    background-color: var(--mb-primary);
    border-color: var(--mb-primary);
    color: white;
}

.dark-mode .quiz-timer {
    background: #1E293B;
    border-color: #334155;
}

.dark-mode .question-text {
    color: #F1F5F9;
}

.dark-mode .result-card {
    background-color: #1E293B;
    border-color: #334155;
}

/* ========== BLOG PAGE DARK MODE ========== */
.dark-mode .blog-container {
    background: #0F172A;
}

.dark-mode .blog-post,
.dark-mode .single-post {
    background-color: #1E293B;
}

.dark-mode .post-title {
    color: #F1F5F9;
}

.dark-mode .post-meta {
    color: #94A3B8;
}

.dark-mode .post-category a {
    background: var(--mb-primary);
    color: white;
}

.dark-mode .post-tags .tag {
    background: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

.dark-mode .post-tags .tag:hover {
    background: var(--mb-primary);
    color: white;
}

.dark-mode .author-box {
    background: #1E293B;
    border-color: #334155;
}

.dark-mode .comments-section .comment {
    background: #1E293B;
    border-color: #334155;
}

.dark-mode .comment-meta {
    color: #94A3B8;
}

/* ========== FAQ PAGE DARK MODE ========== */
.dark-mode .faq-container {
    background: #0F172A;
}

.dark-mode .faq-item {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .faq-item .card-header {
    background-color: #1E293B;
}

.dark-mode .faq-item button {
    color: #F1F5F9;
}

.dark-mode .faq-item button:hover {
    color: var(--mb-primary-400);
}

.dark-mode .faq-item .card-body {
    background-color: #0F172A;
    border-top-color: #334155;
}

/* ========== AUTH PAGES (Login/Register) DARK MODE ========== */
.dark-mode .auth-container {
    background: linear-gradient(135deg, var(--mb-surface-3) 0%, #0F172A 100%);
}

.dark-mode .auth-card {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .auth-header h2 {
    color: #F1F5F9;
}

.dark-mode .auth-footer {
    border-top-color: #334155;
}

/* ========== PROFILE/DASHBOARD DARK MODE ========== */
.dark-mode .profile-container,
.dark-mode .dashboard-container {
    background: #0F172A;
}

.dark-mode .profile-card,
.dark-mode .stats-card,
.dark-mode .progress-card {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .stat-number {
    color: var(--mb-primary-400);
}

.dark-mode .stat-label {
    color: #94A3B8;
}

/* ========== PLAYGROUND PAGE DARK MODE ========== */
.dark-mode .playground-container {
    background: #0F172A;
}

.dark-mode .editor-container {
    background: #1E1E1E;
    border-color: #334155;
}

.dark-mode .output-container {
    background: #1E293B;
    border-color: #334155;
}

/* ========== ROADMAPS PAGE DARK MODE ========== */
.dark-mode .roadmap-container {
    background: #0F172A;
}

.dark-mode .roadmap-node {
    background: #1E293B;
    border-color: #334155;
}

.dark-mode .roadmap-node.completed {
    background: #064E3B;
    border-color: #059669;
}

.dark-mode .roadmap-connector {
    background: #334155;
}

/* ========== SEARCH RESULTS PAGE DARK MODE ========== */
.dark-mode .search-results-container {
    background: #0F172A;
}

.dark-mode .search-result-item {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .search-result-title {
    color: var(--mb-primary-400);
}

.dark-mode .search-result-title:hover {
    color: var(--mb-primary-300);
}

.dark-mode .search-result-excerpt {
    color: #94A3B8;
}

/* ========== CATEGORY/TUTORIAL LISTING DARK MODE ========== */
.dark-mode .category-header {
    background: linear-gradient(135deg, var(--mb-surface-3) 0%, #0F172A 100%);
}

.dark-mode .tutorial-list-item {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .tutorial-list-item:hover {
    background-color: #334155;
}

/* ========== ERROR PAGES DARK MODE ========== */
.dark-mode .error-container {
    background: #0F172A;
}

.dark-mode .error-code {
    color: var(--mb-primary);
}

.dark-mode .error-message {
    color: #94A3B8;
}

/* ========== SCROLLBAR DARK MODE ========== */
.dark-mode::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-mode::-webkit-scrollbar-track {
    background: #0F172A;
}

.dark-mode::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--mb-primary);
}

/* ========== UTILITY CLASSES DARK MODE ========== */
.dark-mode .bg-white {
    background-color: #1E293B !important;
}

.dark-mode .bg-light {
    background-color: #0F172A !important;
}

.dark-mode .bg-dark {
    background-color: #0F172A !important;
}

.dark-mode .bg-gray {
    background-color: #1E293B !important;
}

.dark-mode .border {
    border-color: #334155 !important;
}

.dark-mode .border-top,
.dark-mode .border-bottom,
.dark-mode .border-start,
.dark-mode .border-end {
    border-color: #334155 !important;
}

.dark-mode .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

/* ========== TEXT COLORS DARK MODE ========== */
.dark-mode .text-primary {
    color: var(--mb-primary-400) !important;
}

.dark-mode .text-success {
    color: #6EE7B7 !important;
}

.dark-mode .text-warning {
    color: #FCD34D !important;
}

.dark-mode .text-danger {
    color: #FCA5A5 !important;
}

.dark-mode .text-info {
    color: #93C5FD !important;
}

.dark-mode .text-dark {
    color: #CBD5E1 !important;
}

.dark-mode .text-muted {
    color: #94A3B8 !important;
}

/* ========== LINK COLORS DARK MODE ========== */
.dark-mode main a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="mb-"]):not(.page-link) {
    color: var(--mb-primary-400);
}

/* Scoped to page content and excluding design-system components (mb-*):
   the global version recoloured buttons, nav pills and footer links. */
.dark-mode main a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="mb-"]):not(.page-link):hover {
    color: var(--mb-primary-300);
}

/* ========== LIST GROUP DARK MODE ========== */
.dark-mode .list-group-item {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

.dark-mode .list-group-item:hover {
    background-color: #334155;
}

/* ========== NAV TABS DARK MODE ========== */
.dark-mode .nav-tabs {
    border-bottom-color: #334155;
}

.dark-mode .nav-tabs .nav-link {
    color: #94A3B8;
}

.dark-mode .nav-tabs .nav-link:hover {
    color: var(--mb-primary-400);
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: #1E293B;
    border-color: #334155;
    border-bottom-color: #1E293B;
    color: var(--mb-primary-400);
}

/* ========== ACCORDION DARK MODE ========== */
.dark-mode .accordion-item {
    background-color: #1E293B;
    border-color: #334155;
}

.dark-mode .accordion-button {
    background-color: #1E293B;
    color: #F1F5F9;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: #334155;
    color: var(--mb-primary-400);
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

.dark-mode .accordion-body {
    background-color: #0F172A;
}

/* ========== RESPONSIVE DARK MODE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .dark-mode .navbar-collapse {
        background: #0F172A;
        border-top: 1px solid #334155;
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
    }
    
    .dark-mode .dropdown-menu {
        background-color: #1E293B;
    }
    
    .dark-mode .table-responsive {
        background-color: #1E293B;
    }
}

/* ========== SMOOTH TRANSITION FOR DARK MODE ========== */
.dark-mode,
.dark-mode * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
}

/* ========== PRINT STYLES DARK MODE (Optional) ========== */
@media print {
    .dark-mode body {
        background-color: white;
        color: black;
    }
    
    .dark-mode .card,
    .dark-mode .table {
        background-color: white;
        color: black;
        border-color: #ccc;
    }
}
/* ============================================================
   TOOLS PAGES - Word to HTML converter, Code Playground
   Added for the /word-to-html and /playground routes, whose
   styles are scoped in-page and so were not covered above.
   ============================================================ */

/* ---------- Word to HTML: page shell ---------- */
.dark-mode .w2h-container {
    background-color: var(--bg-primary);
}

.dark-mode .w2h-header h1 {
    color: var(--text-primary);
}

.dark-mode .w2h-header p {
    color: var(--text-muted);
}

/* ---------- Drop zone ---------- */
.dark-mode .w2h-drop {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .w2h-drop:hover,
.dark-mode .w2h-drop.dragover {
    background-color: var(--bg-hover);
    border-color: var(--primary-light);
}

.dark-mode .w2h-drop i {
    color: var(--primary-light);
}

.dark-mode .drop-title {
    color: var(--text-secondary);
}

.dark-mode .drop-title .browse {
    color: var(--primary-light);
}

.dark-mode .drop-sub {
    color: var(--text-muted);
}

/* ---------- Split panes ---------- */
.dark-mode .w2h-pane {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .pane-head {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

.dark-mode .pane-title {
    color: var(--text-primary);
}

.dark-mode .pane-title i {
    color: var(--primary-light);
}

.dark-mode .pane-hint,
.dark-mode .char-count {
    color: var(--text-muted);
}

/* Fallback textarea, shown only if the CodeMirror CDN fails */
.dark-mode #codeEditor {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

/* ---------- Cleaning options ---------- */
.dark-mode .w2h-clean {
    border-color: var(--border-color);
}

.dark-mode .w2h-clean .card-header {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.dark-mode .clean-opt {
    color: var(--text-secondary);
}

.dark-mode .clean-opt code {
    background-color: var(--bg-hover);
    color: #FDA4AF;
}

.dark-mode .w2h-actions {
    border-top-color: var(--border-color);
}

.dark-mode .w2h-status.ok  { color: #34D399; }
.dark-mode .w2h-status.err { color: #F87171; }
.dark-mode .w2h-status.busy { color: #FBBF24; }

/* ---------- Supporting content ---------- */
.dark-mode .w2h-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.dark-mode .w2h-content h2,
.dark-mode .w2h-content h3 {
    color: var(--text-primary);
}

.dark-mode .w2h-content code {
    background-color: var(--bg-hover);
    color: #FDA4AF;
}

.dark-mode .w2h-table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.dark-mode .w2h-table td {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.dark-mode .w2h-faq details {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-mode .w2h-faq summary {
    color: var(--text-primary);
}

.dark-mode .w2h-faq summary::before {
    color: var(--primary-light);
}

.dark-mode .w2h-faq details p {
    color: var(--text-secondary);
}

.dark-mode .w2h-related {
    border-top-color: var(--border-color);
}

/* CODEMIRROR - themed in-page by views/word-to-html.php.
   Rules here would lose the cascade: the page's own light rules are in an
   in-page <style>, which is applied after this external stylesheet. */

/* TINYMCE - themed in-page by views/word-to-html.php.
   TinyMCE injects its own stylesheet into <head> at runtime, after this
   file loads, so rules here lose on source order. */

/* ============================================================
   CODE PLAYGROUND
   ============================================================ */
/* .playground-container and .playground-header are themed in-page by
   views/playground.php; duplicating them here would be overridden by the
   later in-page <style> anyway. */

.dark-mode .editor-panel,
.dark-mode .preview-panel {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .code-editor {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode .example-btn {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.dark-mode .example-btn:hover {
    background-color: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
}

/* The expanded preview must stay opaque, or the page shows through */
.dark-mode .preview-panel.expanded {
    background-color: var(--bg-card);
}

/* The preview iframe renders the user's own document, so it keeps a
   white background regardless of theme - otherwise their CSS would be
   judged against the wrong canvas. */
.dark-mode .preview-frame {
    background-color: #ffffff;
}