/**
 * Theme Overrides CSS
 * 
 * This file contains high-specificity overrides for custom.css hardcoded colors.
 * Uses html[data-theme="dark"] for maximum specificity to beat !important rules.
 * 
 * IMPORTANT: This file must load AFTER custom.css
 */

/* ============================================
   HIGHEST SPECIFICITY DARK MODE OVERRIDES
   Using html[data-theme="dark"] for maximum specificity
   ============================================ */

/* Main right column - override custom.css:782 and custom.css:26 */
html[data-theme="dark"] body .container.body .right_col,
html[data-theme="dark"] body.nav-md .container.body .right_col,
html[data-theme="dark"] body.nav-sm .container.body .right_col {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-left: 1px solid #334155 !important;
}

/* Body backgrounds */
html[data-theme="dark"] body,
html[data-theme="dark"] body.nav-md,
html[data-theme="dark"] body.nav-sm {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Container body */
html[data-theme="dark"] .container.body,
html[data-theme="dark"] body .container.body {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* Main container */
html[data-theme="dark"] .main_container,
html[data-theme="dark"] body .main_container {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* Left column / sidebar */
html[data-theme="dark"] body .container.body .left_col,
html[data-theme="dark"] .left_col,
html[data-theme="dark"] .col-md-3.left_col {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

/* Top navigation */
html[data-theme="dark"] .top_nav,
html[data-theme="dark"] .nav_menu,
html[data-theme="dark"] .top_nav .nav_menu {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Navigation links */
html[data-theme="dark"] .top_nav .nav_menu nav > ul.nav.navbar-nav > li > a,
html[data-theme="dark"] .top_nav .nav_menu nav > ul.navbar-right > li > a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .top_nav .nav_menu nav > ul.nav.navbar-nav > li > a:hover,
html[data-theme="dark"] .top_nav .nav_menu nav > ul.nav.navbar-nav > li > a:focus,
html[data-theme="dark"] .top_nav .nav_menu nav > ul.navbar-right > li > a:hover {
    color: var(--clr-primary, #1A82C3) !important;
    background-color: rgba(26, 130, 195, 0.15) !important;
}

html[data-theme="dark"] .top_nav .nav_menu nav > ul.nav.navbar-nav > li.open > a,
html[data-theme="dark"] .top_nav .nav_menu nav > ul.nav.navbar-nav > li.active > a {
    color: var(--clr-primary, #1A82C3) !important;
    background-color: rgba(26, 130, 195, 0.2) !important;
}

/* Dropdown menus */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .top_nav .dropdown-menu {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .top_nav .dropdown-menu > li > a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .top_nav .dropdown-menu > li > a:hover {
    background: #334155 !important;
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Mega menu */
html[data-theme="dark"] .dropdown-menu.mega-menu,
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .dropdown-menu.mega-menu li ul li a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-menu.mega-menu li ul li a:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .dropdown-menu.mega-menu > li > a {
    color: #94a3b8 !important;
}

/* x_panel widgets */
html[data-theme="dark"] .x_panel,
html[data-theme="dark"] body .x_panel,
html[data-theme="dark"] .x_panel.tile {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Announcement card */
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] div.announcement-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .announcement-header {
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .announcement-content {
    color: #cbd5e1 !important;
}

/* Practice activity panel */
html[data-theme="dark"] #practice-activity-panel,
html[data-theme="dark"] div#practice-activity-panel {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] #practice-activity-panel .x_title {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

/* Practice activity table */
html[data-theme="dark"] #practice-activity-panel table,
html[data-theme="dark"] #practice-activity-panel tbody,
html[data-theme="dark"] #practice-activity-panel tr,
html[data-theme="dark"] #practice-activity-panel td,
html[data-theme="dark"] #practice-activity-panel th,
html[data-theme="dark"] #practice-activity-body,
html[data-theme="dark"] #practice-activity-body tr,
html[data-theme="dark"] #practice-activity-body td {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Circular progress widgets - dark mode */
html[data-theme="dark"] .circular-progress > div,
html[data-theme="dark"] .ts-widget-circular_progress > div,
html[data-theme="dark"] .circular-progress > div[style],
html[data-theme="dark"] .ts-widget-circular_progress > div[style] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .circular-progress > div big,
html[data-theme="dark"] .ts-widget-circular_progress > div big {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .circular-progress,
html[data-theme="dark"] .ts-widget-circular_progress {
    /* Override the color-mix with #ffffff to use dark background */
    --circular-bg-dark: #334155;
}

/* Announcement content text */
html[data-theme="dark"] .announcement-content strong {
    color: #f1f5f9 !important;
}

/* Section header icon - override color-mix with #fff */
html[data-theme="dark"] .section-header-icon.primary {
    background: color-mix(in srgb, var(--clr-primary) 20%, #1e293b) !important;
}

html[data-theme="dark"] .section-header-icon.secondary {
    background: color-mix(in srgb, var(--clr-secondary) 20%, #1e293b) !important;
}

/* Activity column toggle buttons */
html[data-theme="dark"] #practice-activity-panel #activity-column-toggles .btn {
    border-color: color-mix(in srgb, var(--clr-primary) 30%, #334155) !important;
    background: color-mix(in srgb, var(--clr-primary) 10%, #1e293b) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #practice-activity-panel #activity-column-toggles .btn:hover,
html[data-theme="dark"] #practice-activity-panel #activity-column-toggles .btn.active {
    background: color-mix(in srgb, var(--clr-primary) 25%, #1e293b) !important;
    color: #f1f5f9 !important;
}

/* Activity pills and meters */
html[data-theme="dark"] .activity-total-pill {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .activity-minutes-pill {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .activity-total-meter {
    background: #334155 !important;
}

html[data-theme="dark"] .activity-total-wrap {
    background: transparent !important;
}

/* Practice toolbar dark mode */
html[data-theme="dark"] .practice-toolbar,
html[data-theme="dark"] #practice-toolbar {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

/* Practice index container and all child panels */
html[data-theme="dark"] .practice-index-container,
html[data-theme="dark"] .practice-index-container .x_panel,
html[data-theme="dark"] .practice-index-container .x_panel.title {
    background: #1e293b !important;
}

/* Practice header section */
html[data-theme="dark"] .practice-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .practice-header .panel-title {
    color: var(--clr-primary) !important;
}

/* Back button modern */
html[data-theme="dark"] .back-btn-modern:hover {
    background-color: rgba(26, 130, 195, 0.15) !important;
}

/* Questions grid section */
html[data-theme="dark"] .questions-grid-section {
    background: #1e293b !important;
}

html[data-theme="dark"] .questions-grid-section .summary {
    color: #94a3b8 !important;
}

/* Filter label mini */
html[data-theme="dark"] .filter-label-mini {
    color: #94a3b8 !important;
}

/* Search box modern dark mode */
html[data-theme="dark"] .search-box-modern,
html[data-theme="dark"] #box-search {
    background: transparent !important;
}

html[data-theme="dark"] .search-box-modern #search,
html[data-theme="dark"] .search-box-modern #file_search,
html[data-theme="dark"] .search-box-modern input {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
}

html[data-theme="dark"] .search-box-modern #search:focus,
html[data-theme="dark"] .search-box-modern #file_search:focus,
html[data-theme="dark"] .search-box-modern input:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 130, 195, 0.2) !important;
}

html[data-theme="dark"] .search-box-modern #search::placeholder,
html[data-theme="dark"] .search-box-modern #file_search::placeholder,
html[data-theme="dark"] .search-box-modern input::placeholder {
    color: #64748b !important;
}

/* Header search button (magnifying glass icon button) */
html[data-theme="dark"] .btn-search,
html[data-theme="dark"] .search-btn,
html[data-theme="dark"] #btn-search,
html[data-theme="dark"] .x_title .btn-search,
html[data-theme="dark"] .practice-header .btn-search,
html[data-theme="dark"] button[type="search"] {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-search:hover,
html[data-theme="dark"] .search-btn:hover,
html[data-theme="dark"] #btn-search:hover {
    background: #475569 !important;
    color: #f1f5f9 !important;
}

/* Search dropdown/autocomplete results */
html[data-theme="dark"] .tt-menu,
html[data-theme="dark"] .tt-dropdown-menu,
html[data-theme="dark"] .typeahead-dropdown,
html[data-theme="dark"] .search-results-dropdown,
html[data-theme="dark"] .ui-autocomplete {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .tt-suggestion,
html[data-theme="dark"] .tt-menu .tt-suggestion,
html[data-theme="dark"] .ui-autocomplete li,
html[data-theme="dark"] .ui-menu-item {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .tt-suggestion:hover,
html[data-theme="dark"] .tt-suggestion.tt-cursor,
html[data-theme="dark"] .ui-autocomplete li:hover,
html[data-theme="dark"] .ui-menu-item:hover,
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-state-focus {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .tt-hint {
    color: #64748b !important;
}

html[data-theme="dark"] .found-in-title,
html[data-theme="dark"] .found-in-text,
html[data-theme="dark"] .search-section-header {
    color: #94a3b8 !important;
}

/* View All button dark mode */
html[data-theme="dark"] .x_panel.title .x_title .btn-view-all {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .x_panel.title .x_title .btn-view-all:hover {
    background: #475569 !important;
    border-color: var(--clr-secondary) !important;
    color: var(--clr-secondary) !important;
}

html[data-theme="dark"] .x_title {
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .x_title h2,
html[data-theme="dark"] .x_panel h2 {
    color: #f1f5f9 !important;
}

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

/* Cards and panels */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .well {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: var(--clr-primary, #1A82C3) !important;
}

/* Tables */
html[data-theme="dark"] .table,
html[data-theme="dark"] table {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > thead > tr > td {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(30, 41, 59, 0.5) !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background: #334155 !important;
    background-color: #334155 !important;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer_fixed {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-top-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Sidebar menu */
html[data-theme="dark"] .nav.side-menu > li > a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .nav.side-menu > li > a:hover,
html[data-theme="dark"] .nav.side-menu > li.active > a {
    background: rgba(26, 130, 195, 0.15) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .menu_section h3 {
    color: #64748b !important;
}

/* Profile section */
html[data-theme="dark"] .profile,
html[data-theme="dark"] .profile_info {
    background: #334155 !important;
}

html[data-theme="dark"] .profile_info h2 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .profile_info span {
    color: #cbd5e1 !important;
}

/* Tiles and dashboard cards */
html[data-theme="dark"] .tile,
html[data-theme="dark"] .tile-stats {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .tile h3,
html[data-theme="dark"] .tile-stats h3,
html[data-theme="dark"] .tile h4,
html[data-theme="dark"] .tile-stats h4 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .tile p,
html[data-theme="dark"] .tile-stats p {
    color: #cbd5e1 !important;
}

/* List groups */
html[data-theme="dark"] .list-group-item {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .list-group-item:hover {
    background: #334155 !important;
    background-color: #334155 !important;
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb {
    background: #334155 !important;
    background-color: #334155 !important;
}

html[data-theme="dark"] .breadcrumb > li > a,
html[data-theme="dark"] .breadcrumb > li {
    color: #cbd5e1 !important;
}

/* Modal */
html[data-theme="dark"] .modal-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .modal-header .close {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .modal-body {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .modal-footer {
    border-top-color: #334155 !important;
}

/* Labels and badges */
html[data-theme="dark"] .label-default {
    background: #334155 !important;
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Progress bars */
html[data-theme="dark"] .progress {
    background: #334155 !important;
    background-color: #334155 !important;
}

/* Jumbotron */
html[data-theme="dark"] .jumbotron {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Code blocks */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background: #334155 !important;
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* HR */
html[data-theme="dark"] hr {
    border-color: #334155 !important;
}

/* Notification list */
html[data-theme="dark"] .msg_list li a {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .msg_list li a:hover {
    background: #334155 !important;
}

html[data-theme="dark"] .msg_list li a .message {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .msg_list li a .time {
    color: #64748b !important;
}

/* Page titles */
html[data-theme="dark"] .page-title h3,
html[data-theme="dark"] .page-title h2 {
    color: #f1f5f9 !important;
}

/* Generic text overrides */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #f1f5f9;
}

html[data-theme="dark"] p {
    color: #cbd5e1;
}

html[data-theme="dark"] a {
    color: var(--clr-primary, #60a5fa);
}

html[data-theme="dark"] a:hover {
    color: var(--clr-primary, #93c5fd);
}

/* Tooltips and popovers */
html[data-theme="dark"] .tooltip-inner {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .popover {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .popover-title {
    background: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .popover-content {
    color: #cbd5e1 !important;
}

/* Select2 dropdowns */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--krajee-bs3 .select2-selection {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--krajee-bs3 .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option:hover {
    background: var(--clr-primary, #1A82C3) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Krajee Bootstrap 3 Select2 - comprehensive dark mode */
html[data-theme="dark"] .select2-container--krajee-bs3 .select2-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results {
    background: #1e293b !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option,
html[data-theme="dark"] .select2-container--krajee-bs3 li.select2-results__option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option[aria-selected] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option[aria-selected="true"] {
    background-color: var(--clr-primary, #1A82C3) !important;
    color: #fff !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option--highlighted,
html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--krajee-bs3 .select2-results__option:hover {
    background-color: var(--clr-primary, #1A82C3) !important;
    color: #fff !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-search--dropdown {
    background: #1e293b !important;
}

html[data-theme="dark"] .select2-container--krajee-bs3 .select2-search--dropdown .select2-search__field {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Alert overrides */
html[data-theme="dark"] .alert {
    border-width: 1px !important;
}

html[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

/* ============================================
   USER DROPDOWN MENU DARK MODE
   Override hardcoded colors from main.php inline styles
   ============================================ */

/* User dropdown menu container */
html[data-theme="dark"] .dropdown-usermenu,
html[data-theme="dark"] .dropdown-menu.dropdown-usermenu {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Username text */
html[data-theme="dark"] .dropdown-usermenu .user-dropdown-username {
    color: #f1f5f9 !important;
}

/* User email text */
html[data-theme="dark"] .dropdown-usermenu .user-email span {
    color: #94a3b8 !important;
}

/* Divider line */
html[data-theme="dark"] .dropdown-usermenu .divider {
    border-top-color: #334155 !important;
}

/* Dropdown items */
html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item span {
    color: #94a3b8 !important;
}

/* Hover state for regular items */
html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item:not(.user-info):not(.user-email):not(.divider):not(.user-logout):hover {
    background-color: #334155 !important;
}

html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item:not(.user-info):not(.user-email):not(.divider):not(.user-logout):hover a,
html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item:not(.user-info):not(.user-email):not(.divider):not(.user-logout):hover span {
    color: #f1f5f9 !important;
}

/* Logout item - keep red color but adjust background hover */
html[data-theme="dark"] .dropdown-usermenu .user-logout:hover {
    background-color: rgba(220, 38, 38, 0.15) !important;
}

/* User info section text */
html[data-theme="dark"] .dropdown-usermenu .user-info span,
html[data-theme="dark"] .dropdown-usermenu .user-info .user-dropdown-username {
    color: #f1f5f9 !important;
}

/* SVG icons in dropdown */
html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item svg {
    fill: #94a3b8 !important;
}

html[data-theme="dark"] .dropdown-usermenu .user-dropdown-item:hover svg {
    fill: #f1f5f9 !important;
}

/* Keep logout icon red */
html[data-theme="dark"] .dropdown-usermenu .user-logout svg {
    fill: #dc2626 !important;
}

/* Mega menu badges - section-specific colors for dark mode */
/* Use color-mix with dark background instead of white */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-speaking .menu-badge {
    color: var(--sec-speaking) !important;
    background: color-mix(in srgb, var(--sec-speaking) 20%, var(--bg-secondary)) !important;
}

html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-reading .menu-badge {
    color: var(--sec-reading) !important;
    background: color-mix(in srgb, var(--sec-reading) 20%, var(--bg-secondary)) !important;
}

html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-writing .menu-badge {
    color: var(--sec-writing) !important;
    background: color-mix(in srgb, var(--sec-writing) 20%, var(--bg-secondary)) !important;
}

html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-listening .menu-badge {
    color: var(--sec-listening) !important;
    background: color-mix(in srgb, var(--sec-listening) 20%, var(--bg-secondary)) !important;
}

/* AI badge dark mode */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu .badge-ai {
    color: var(--clr-primary) !important;
    background: color-mix(in srgb, var(--clr-primary) 20%, var(--bg-secondary)) !important;
}

/* Template badge dark mode */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu .badge-template {
    color: #fbbf24 !important;
    background: rgba(217, 119, 6, 0.2) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
}

/* ============================================
   DASHBOARD DARK MODE STYLES
   Override all dashboard widgets, cards, charts
   ============================================ */

/* Dashboard stat cards */
html[data-theme="dark"] .stat-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .stat-card-title {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .stat-card-value {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .stat-card-subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .stat-card-metric + .stat-card-metric {
    border-left-color: #334155 !important;
}

/* Dashboard chart card */
html[data-theme="dark"] .chart-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .chart-card-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .chart-card-title {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .chart-type-select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .chart-type-select:focus {
    border-color: var(--clr-secondary) !important;
}

/* Stat card icon backgrounds in dark mode */
html[data-theme="dark"] .stat-card-icon.expiry,
html[data-theme="dark"] .stat-card-icon.target {
    background: rgba(26, 130, 195, 0.2) !important;
}

html[data-theme="dark"] .stat-card-icon.mock {
    background: rgba(var(--clr-secondary-rgb, 16, 185, 129), 0.2) !important;
}

html[data-theme="dark"] .stat-card-icon.refer {
    background: rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] .section-header-icon.primary {
    background: rgba(26, 130, 195, 0.2) !important;
}

html[data-theme="dark"] .section-header-icon.secondary {
    background: rgba(var(--clr-secondary-rgb, 16, 185, 129), 0.2) !important;
}

/* x_panel widget cards */
html[data-theme="dark"] .x_panel {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .x_title {
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .x_title h2 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .x_title h2 small {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .x_content {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .x_content h4 {
    color: #f1f5f9 !important;
}

/* Panel and card widgets */
html[data-theme="dark"] .panel {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .panel-heading {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .panel-body {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .panel-footer {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .panel-title {
    color: #f1f5f9 !important;
}

/* Well */
html[data-theme="dark"] .well {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* List groups */
html[data-theme="dark"] .list-group-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] a.list-group-item:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .list-group-item-heading {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .list-group-item-text {
    color: #94a3b8 !important;
}

/* Table styling */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: #0f172a !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background: #334155 !important;
}

html[data-theme="dark"] .table-bordered {
    border-color: #334155 !important;
}

html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
    border-color: #334155 !important;
}

/* Progress bars */
html[data-theme="dark"] .progress {
    background: #334155 !important;
}

/* Tile styling */
html[data-theme="dark"] .tile {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .tile h3,
html[data-theme="dark"] .tile h4,
html[data-theme="dark"] .tile span {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] table.tile th,
html[data-theme="dark"] table.tile td {
    color: #cbd5e1 !important;
}

/* Highcharts dark mode */
html[data-theme="dark"] .highcharts-background {
    fill: #1e293b !important;
}

html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle {
    fill: #f1f5f9 !important;
}

html[data-theme="dark"] .highcharts-axis-title {
    fill: #94a3b8 !important;
}

html[data-theme="dark"] .highcharts-axis-labels text {
    fill: #94a3b8 !important;
}

html[data-theme="dark"] .highcharts-legend-item text {
    fill: #cbd5e1 !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: #334155 !important;
}

html[data-theme="dark"] .highcharts-tick {
    stroke: #334155 !important;
}

html[data-theme="dark"] .highcharts-axis-line {
    stroke: #475569 !important;
}

html[data-theme="dark"] .highcharts-tooltip-box {
    fill: #0f172a !important;
    stroke: #334155 !important;
}

html[data-theme="dark"] .highcharts-tooltip text {
    fill: #f1f5f9 !important;
}

html[data-theme="dark"] .highcharts-label-box {
    fill: #1e293b !important;
}

/* Dashboard specific sections */
html[data-theme="dark"] .pdf_download {
    background: #1e293b !important;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3) !important;
}

html[data-theme="dark"] .pdf_download h4 {
    color: #f1f5f9 !important;
}

/* Disable account warning */
html[data-theme="dark"] .disable_account {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

/* Forms and inputs */
html[data-theme="dark"] .form-control {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .form-control:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 130, 195, 0.2) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] .input-group-addon {
    background: #334155 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Labels */
html[data-theme="dark"] label {
    color: #cbd5e1 !important;
}

/* Blockquotes */
html[data-theme="dark"] blockquote {
    background: #1e293b !important;
    border-left-color: var(--clr-primary) !important;
    color: #cbd5e1 !important;
}

/* Modal dark mode */
html[data-theme="dark"] .modal-content {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .modal-header {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .modal-title {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .modal-body {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .modal-footer {
    background: #0f172a !important;
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .close {
    color: #94a3b8 !important;
    opacity: 0.8 !important;
}

html[data-theme="dark"] .close:hover {
    color: #f1f5f9 !important;
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb {
    background: #1e293b !important;
}

html[data-theme="dark"] .breadcrumb > li > a {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .breadcrumb > .active {
    color: #cbd5e1 !important;
}

/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > .active > a {
    background: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: #fff !important;
}

/* Text colors for dark mode */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3, html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] p {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] a {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] a:hover {
    color: color-mix(in srgb, var(--clr-primary) 80%, #fff) !important;
}

/* Keep button text colors */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
    color: #fff !important;
}

html[data-theme="dark"] .btn-default {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .btn-default:hover {
    background: #475569 !important;
    border-color: #64748b !important;
}

/* Nav tabs and pills */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .nav-tabs > li > a {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .nav-tabs > li > a:hover {
    border-color: #334155 !important;
    background: #334155 !important;
}

html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-bottom-color: transparent !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .tab-content {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Jumbotron */
html[data-theme="dark"] .jumbotron {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Card specific styles */
html[data-theme="dark"] .card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .card-header {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .card-body {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .card-footer {
    background: #0f172a !important;
    border-color: #334155 !important;
}