/**
 * 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 {

/* ============================================
   LOGO - Dark Mode Auto-Invert
   Inverts dark logos to white in dark mode.
   For colorful logos, add logo-dark.png per client.
   ============================================ */
html[data-theme="dark"] .navbar-brand img,
html[data-theme="dark"] .site_title img,
html[data-theme="dark"] .nav_title img,
html[data-theme="dark"] .logo img,
html[data-theme="dark"] img.logo,
html[data-theme="dark"] img.site-logo {
    filter: brightness(0) invert(1);
}

/* Skip filter if logo-dark class is present (for clients with custom dark logos) */
html[data-theme="dark"] .logo-no-invert img,
html[data-theme="dark"] img.logo-no-invert {
    filter: none;
}
    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;
}

/* ========== TOOLBAR TOGGLES DARK MODE ========== */

/* Inline Toggle - dark background and border */
html[data-theme="dark"] .inline-toggle {
    background: #0f172a !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .inline-toggle:hover {
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Inline Toggle Label - light text */
html[data-theme="dark"] .inline-toggle-label {
    color: #cbd5e1 !important;
}

/* Inline Toggle SVG icons */
html[data-theme="dark"] .inline-toggle svg {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .inline-toggle svg path[fill="currentColor"] {
    fill: #94a3b8 !important;
}

html[data-theme="dark"] .inline-toggle svg path[stroke="#30225e"] {
    stroke: #94a3b8 !important;
}

/* CSS Toggle Slider - darker track */
html[data-theme="dark"] .css-toggle-slider {
    background: #475569 !important;
}

html[data-theme="dark"] .inline-toggle:hover .css-toggle-slider {
    background: #64748b !important;
}

/* CSS Toggle Slider knob - slightly off-white */
html[data-theme="dark"] .css-toggle-slider::before {
    background: #e2e8f0 !important;
}

/* Checked state - keep primary color but adjust */
html[data-theme="dark"] .css-toggle-input:checked + .css-toggle-slider {
    background: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .inline-toggle:hover .css-toggle-input:checked + .css-toggle-slider {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 85%, #fff) !important;
}

/* Predictions toggle dark mode - danger scheme */
html[data-theme="dark"] .inline-toggle:has(#exam_occurring_practice_mode) {
    border-color: color-mix(in srgb, var(--danger) 40%, #475569) !important;
    background: color-mix(in srgb, var(--danger) 12%, #0f172a) !important;
}

html[data-theme="dark"] .inline-toggle:has(#exam_occurring_practice_mode):hover {
    border-color: var(--danger) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--danger) 25%, transparent) !important;
}

html[data-theme="dark"] .inline-toggle:has(#exam_occurring_practice_mode) .inline-toggle-label {
    color: #f87171 !important;
}

html[data-theme="dark"] .inline-toggle:has(#exam_occurring_practice_mode) svg,
html[data-theme="dark"] .inline-toggle:has(#exam_occurring_practice_mode) svg path {
    fill: #f87171 !important;
    color: #f87171 !important;
}

/* Show Answer toggles - Reading (orange) dark mode */
html[data-theme="dark"] .inline-toggle.inline-toggle-show-answer-reading {
    border-color: color-mix(in srgb, var(--sec-reading) 40%, #475569) !important;
    background: color-mix(in srgb, var(--sec-reading) 10%, #0f172a) !important;
}

html[data-theme="dark"] .inline-toggle.inline-toggle-show-answer-reading:hover {
    border-color: var(--sec-reading) !important;
}

/* Show Answer toggles - Listening (green) dark mode */
html[data-theme="dark"] .inline-toggle.inline-toggle-show-answer-listening {
    border-color: color-mix(in srgb, var(--sec-listening) 40%, #475569) !important;
    background: color-mix(in srgb, var(--sec-listening) 10%, #0f172a) !important;
}

html[data-theme="dark"] .inline-toggle.inline-toggle-show-answer-listening:hover {
    border-color: var(--sec-listening) !important;
}

/* Reading Fill-in-the-Blanks word hover - dark mode */
html[data-theme="dark"] #rlblanks.form-control.text span.word-def:hover,
html[data-theme="dark"] #text > span:hover {
    background-color: color-mix(in srgb, var(--section-color, var(--clr-primary)) 25%, #1e293b) !important;
    color: color-mix(in srgb, var(--section-color, var(--clr-primary)) 100%, #e2e8f0) !important;
}

/* Toolbar Divider */
html[data-theme="dark"] .toolbar-divider {
    background: #475569 !important;
}

/* ========== FILTER CHIPS DARK MODE ========== */

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

/* Filter Chips - dark background */
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .filter-chip.attempt-filter-pill,
html[data-theme="dark"] .filter-chip.di-filter-pill,
html[data-theme="dark"] .filter-chip.length-filter-pill {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .filter-chip:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 15%, #0f172a) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

/* Active filter chip - primary color stays */
html[data-theme="dark"] .filter-chip.active {
    background: var(--clr-primary-dark, var(--clr-primary)) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: #0f172a !important;
}

html[data-theme="dark"] .filter-chip:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 25%, transparent) !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-dark, 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-dark, var(--clr-primary)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 20%, transparent) !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;
}

/* Progress Bars - Dark Mode */
html[data-theme="dark"] .score-progress-bar-container,
html[data-theme="dark"] .accuracy-progress-bar-wrapper,
html[data-theme="dark"] .time-bar-wrapper {
    background: #334155 !important;
}
html[data-theme="dark"] .score-progress-label {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .score-progress-value,
html[data-theme="dark"] .accuracy-values,
html[data-theme="dark"] .time-bar-value {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .time-bar.time-bar-empty {
    background: #475569 !important;
}
html[data-theme="dark"] .analysis-table th {
    background: #1e293b !important;
}
html[data-theme="dark"] .analysis-table tr:hover {
    background: #334155 !important;
}

/* Question Type Cards - Dark Mode */
html[data-theme="dark"] .question-type-card {
    background: #1e293b !important;
    border-color: color-mix(in srgb, var(--section-color, #334155) 30%, #334155) !important;
}
html[data-theme="dark"] .question-type-header {
    background: linear-gradient(to right, color-mix(in srgb, var(--section-color, #0f172a) 15%, #0f172a), #1e293b) !important;
    border-bottom-color: color-mix(in srgb, var(--section-color, #334155) 25%, #334155) !important;
}
html[data-theme="dark"] .question-type-title {
    color: color-mix(in srgb, var(--section-color, #f1f5f9) 50%, #f1f5f9) !important;
}
html[data-theme="dark"] .meta-item {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .meta-item strong {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .question-row {
    border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .question-row:hover {
    background: #334155 !important;
}
html[data-theme="dark"] .question-row .q-number {
    color: #f1f5f9 !important;
}

/* Event & Count Badges - Dark Mode */
html[data-theme="dark"] .badge-event {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
html[data-theme="dark"] .badge-qcount {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ================================================================
   SKILL CONTRIBUTION - Dark Mode
   ================================================================ */
/* Section Summary Cards */
html[data-theme="dark"] .section-summary-card {
    background: #1e293b !important;
    border-color: color-mix(in srgb, var(--section-color, #334155) 30%, #334155) !important;
}
html[data-theme="dark"] .section-summary-header {
    background: linear-gradient(to right, color-mix(in srgb, var(--section-color, #0f172a) 15%, #0f172a), #1e293b) !important;
    border-bottom-color: color-mix(in srgb, var(--section-color, #334155) 25%, #334155) !important;
}
html[data-theme="dark"] .section-summary-title {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .section-summary-target {
    background: color-mix(in srgb, var(--section-color, #334155) 20%, #1e293b) !important;
    color: color-mix(in srgb, var(--section-color, #94a3b8) 60%, #f1f5f9) !important;
    border-color: color-mix(in srgb, var(--section-color, #334155) 30%, transparent) !important;
}
html[data-theme="dark"] .summary-type-row {
    border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .summary-type-abbr {
    background: color-mix(in srgb, var(--section-color, #64748b) 25%, #1e293b) !important;
    color: var(--section-color, #f1f5f9) !important;
}
html[data-theme="dark"] .summary-type-name {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .summary-bar-wrapper {
    background: #334155 !important;
}
html[data-theme="dark"] .summary-target-marker {
    background: #94a3b8 !important;
}
html[data-theme="dark"] .summary-target-marker::before {
    background: #94a3b8 !important;
}

/* Skill Bars in Card Headers - Dark Mode */
html[data-theme="dark"] .question-type-skills {
    border-top-color: #334155 !important;
}
html[data-theme="dark"] .skills-label {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .skill-pte-bar-wrapper {
    background: #334155 !important;
}
html[data-theme="dark"] .skill-pte-target-marker {
    background: #94a3b8 !important;
}

/* Skill Badges in Rows - Dark Mode */
html[data-theme="dark"] .skill-badge-s {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #4ade80 !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}
html[data-theme="dark"] .skill-badge-l {
    background: rgba(253, 126, 20, 0.2) !important;
    color: #fb923c !important;
    border-color: rgba(253, 126, 20, 0.4) !important;
}
html[data-theme="dark"] .skill-badge-r {
    background: rgba(23, 162, 184, 0.2) !important;
    color: #22d3ee !important;
    border-color: rgba(23, 162, 184, 0.4) !important;
}
html[data-theme="dark"] .skill-badge-w {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #f87171 !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
}

/* Skill Contribution Progress Bars - Dark Mode */
html[data-theme="dark"] .skill-contrib-track {
    background: #334155 !important;
}
html[data-theme="dark"] .skill-contrib-target {
    background: #94a3b8 !important;
}
html[data-theme="dark"] .skill-contrib-target::before {
    background: #94a3b8 !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 - Modern BS5 Dark Mode */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb.show-breadcrumb {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .breadcrumb > li > a,
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a {
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
}

html[data-theme="dark"] .breadcrumb > li > a:hover,
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--clr-primary-dark, var(--clr-primary, #93c5fd)) !important;
}

/* Active breadcrumb item (current page - no link) */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li.active {
    color: #e2e8f0 !important;
    background: transparent !important;
}

/* Ensure all li items have transparent background */
html[data-theme="dark"] .breadcrumb > li,
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li {
    background: transparent !important;
}

/* Dark mode separator - slash */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li + li::before {
    color: #64748b !important;
}

/* Dark mode home icon */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li:first-child > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") !important;
}

/* ============================================
   DARK MODE - Breadcrumb Tab Buttons
   ============================================ */

/* Answers Tab - Primary color (Dark Mode) */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="answers"] {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 15%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 40%, #334155) !important;
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="answers"]:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 55%, #334155) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, transparent) !important;
}

/* Score Report - Primary color (Dark Mode) */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="score_report"] {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 15%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 40%, #334155) !important;
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="score_report"]:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 55%, #334155) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, transparent) !important;
}

/* AI Feedback - Secondary color (Dark Mode) */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="ai_feedback"] {
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 15%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 40%, #334155) !important;
    color: var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="ai_feedback"]:hover {
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 25%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 55%, #334155) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 25%, transparent) !important;
}

/* Time Analysis - Secondary color (Dark Mode) */
html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="analysis"] {
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 15%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 40%, #334155) !important;
    color: var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .breadcrumb.show-breadcrumb > li > a[target*="analysis"]:hover {
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 25%, #1e293b) !important;
    border-color: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 55%, #334155) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #a78bfa)) 25%, transparent) !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 SECTION HEADERS - DARK MODE
   Use brighter section colors for visibility
   ============================================ */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu > li.mega-col-speaking > a {
    color: var(--sec-speaking-dark, #42a5f5) !important;
    background: color-mix(in srgb, var(--sec-speaking-dark, #42a5f5) 20%, var(--bg-secondary)) !important;
}

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

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

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

/* Mega menu badges - section-specific colors for dark mode */
/* Use brighter dark variants for better visibility */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-speaking .menu-badge {
    color: var(--sec-speaking-dark, #42a5f5) !important;
    background: color-mix(in srgb, var(--sec-speaking-dark, #42a5f5) 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-dark, #ffb74d) !important;
    background: color-mix(in srgb, var(--sec-reading-dark, #ffb74d) 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-dark, #ce93d8) !important;
    background: color-mix(in srgb, var(--sec-writing-dark, #ce93d8) 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-dark, #4ade80) !important;
    background: color-mix(in srgb, var(--sec-listening-dark, #4ade80) 20%, var(--bg-secondary)) !important;
}

/* Mega menu list item hover - section-specific colors for dark mode */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu li.mega-col-speaking ul li a:hover {
    background: color-mix(in srgb, var(--sec-speaking-dark, #42a5f5) 15%, var(--bg-secondary)) !important;
    color: var(--sec-speaking-dark, #42a5f5) !important;
}

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

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

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

/* AI badge dark mode */
html[data-theme="dark"] .top_nav .dropdown-menu.mega-menu .badge-ai {
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
    background: color-mix(in srgb, var(--clr-primary-dark, 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;
}

/* ============================================
   SECTION ICONS - DARK MODE (Practice Question Pages)
   Override SVG fill colors with brighter variants
   ============================================ */

/* Section icon text color */
html[data-theme="dark"] .section-icon[style*="--sec-speaking"] {
    color: var(--sec-speaking-dark, #42a5f5) !important;
}
html[data-theme="dark"] .section-icon[style*="--sec-writing"] {
    color: var(--sec-writing-dark, #ce93d8) !important;
}
html[data-theme="dark"] .section-icon[style*="--sec-reading"] {
    color: var(--sec-reading-dark, #ffb74d) !important;
}
html[data-theme="dark"] .section-icon[style*="--sec-listening"] {
    color: var(--sec-listening-dark, #4ade80) !important;
}

/* Section icon SVG fill - override inline fill attribute */
html[data-theme="dark"] .section-icon svg,
html[data-theme="dark"] .section-icon svg path {
    fill: currentColor !important;
}

/* Header type label colors */
html[data-theme="dark"] .header-type-label[style*="--sec-speaking"] {
    color: var(--sec-speaking-dark, #42a5f5) !important;
}
html[data-theme="dark"] .header-type-label[style*="--sec-writing"] {
    color: var(--sec-writing-dark, #ce93d8) !important;
}
html[data-theme="dark"] .header-type-label[style*="--sec-reading"] {
    color: var(--sec-reading-dark, #ffb74d) !important;
}
html[data-theme="dark"] .header-type-label[style*="--sec-listening"] {
    color: var(--sec-listening-dark, #4ade80) !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:not(.feedback-score-badge):not([class*="feedback-score-badge--"]) {
    color: #f1f5f9 !important;
}

/* Feedback score badges - dark mode */
html[data-theme="dark"] #wa_feedback .feedback-score-badge {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] #wa_feedback .feedback-score-badge--low {
    background: var(--danger-bg-dark, #7f1d1d) !important;
    color: #fca5a5 !important;
    border-color: #dc2626 !important;
}

html[data-theme="dark"] #wa_feedback .feedback-score-badge--mid {
    background: var(--warning-bg-dark, #78350f) !important;
    color: #fcd34d !important;
    border-color: #f59e0b !important;
}

html[data-theme="dark"] #wa_feedback .feedback-score-badge--high {
    background: var(--success-bg-dark, #14532d) !important;
    color: #86efac !important;
    border-color: #22c55e !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;
}

/* Pitch/Pace/Pause Chart Containers - Dark Mode */
html[data-theme="dark"] #pitch_chart,
html[data-theme="dark"] #pace_chart,
html[data-theme="dark"] #pause_chart {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .pause_meter_heading {
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !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-dark, var(--clr-primary)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 20%, transparent) !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-dark, var(--clr-primary)) !important;
    color: #cbd5e1 !important;
}

/* Sample answer blockquote - practice questions */
html[data-theme="dark"] blockquote.sample_answer,
html[data-theme="dark"] .sample_answer blockquote,
html[data-theme="dark"] body.controller-practice blockquote.sample_answer {
    background-color: var(--bg-tertiary, #334155) !important;
    border: 1px solid var(--border-color, #475569) !important;
    border-left: 1px solid var(--border-color, #475569) !important;
    color: var(--text-primary, #f1f5f9) !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 - Legacy Support (keeping for backwards compatibility) */
/* Primary dark mode breadcrumb styles are defined above in "Breadcrumbs - Modern BS5 Dark Mode" section */

/* 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-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] a:hover {
    color: color-mix(in srgb, var(--clr-primary-dark, 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;
}

/* Notification bell icon - dark mode */
html[data-theme="dark"] .info-number svg,
html[data-theme="dark"] .dropdown-toggle.info-number svg {
    fill: var(--clr-primary-dark, #4ade80) !important;
}

/* Notification dropdown "See All Alerts" - dark mode */
html[data-theme="dark"] .msg_list,
html[data-theme="dark"] ul.msg_list {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] ul.msg_list li,
html[data-theme="dark"] .msg_list li {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .msg_list li .text-center,
html[data-theme="dark"] .msg_list li .text-center a {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

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

html[data-theme="dark"] .msg_list li .text-center a strong {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .msg_list li .text-center a i {
    color: #94a3b8 !important;
}

/* ========== QUESTION PAGE HEADER DARK MODE ========== */

/* Question Header Primary Bar */
html[data-theme="dark"] .question-header-primary {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Back to Index Button */
html[data-theme="dark"] .btn-back-to-index {
    background: transparent !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .btn-back-to-index:hover {
    background: #334155 !important;
    border-color: #64748b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .btn-back-to-index svg {
    stroke: currentColor !important;
}

/* Header Action Buttons */
html[data-theme="dark"] .header-actions-right .btn-nav {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .header-actions-right .btn-nav:hover {
    background: #334155 !important;
    border-color: #64748b !important;
    color: #f1f5f9 !important;
}

/* Primary nav button stays primary */
html[data-theme="dark"] .header-actions-right .btn-nav.btn-primary {
    background: var(--clr-primary-dark, var(--clr-primary)) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: #0f172a !important;
}

html[data-theme="dark"] .header-actions-right .btn-nav.btn-primary:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 85%, #fff) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 85%, #fff) !important;
}

/* Re-Attempt Button */
html[data-theme="dark"] .header-actions-right .btn-reattempt {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 15%, #0f172a) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 50%, #475569) !important;
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .header-actions-right .btn-reattempt:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 25%, #0f172a) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

/* Re-Attempt button text color override (from custom.css) */
html[data-theme="dark"] body.nav-md.controller-practice.action-question button#btn-reattempt_question {
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

/* Report Button */
html[data-theme="dark"] .header-actions-right .btn-report {
    background: color-mix(in srgb, #fbbf24 10%, #0f172a) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .header-actions-right .btn-report:hover {
    background: color-mix(in srgb, #fbbf24 20%, #0f172a) !important;
}

/* Re-Attempt Bottom Button (in previous answer section) */
html[data-theme="dark"] .btn-reattempt-bottom {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 15%, #0f172a) !important;
    border-color: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 50%, #475569) !important;
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .btn-reattempt-bottom:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 25%, #0f172a) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

/* ========== X_TITLE QUESTION HEADER ROW DARK MODE ========== */

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

/* Question Title Text */
html[data-theme="dark"] .tile.x_panel .x_title .question-title-text,
html[data-theme="dark"] .question-title-text {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .question-title-text::before {
    color: #475569 !important;
}

/* Header Type Label - keep section color from inline style */
/* Color preserved via inline style, no override needed */

/* Badges in Title */
html[data-theme="dark"] .tile.x_panel .x_title .badge,
html[data-theme="dark"] .x_title .badge {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .badge.badge-success {
    background: color-mix(in srgb, var(--success) 20%, #0f172a) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .badge.badge-danger,
html[data-theme="dark"] .tile.x_panel .x_title .badge.hard_label {
    background: color-mix(in srgb, var(--danger) 20%, #0f172a) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .badge.badge-warning {
    background: color-mix(in srgb, #f59e0b 20%, #0f172a) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .badge.badge-info {
    background: color-mix(in srgb, #3b82f6 20%, #0f172a) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .length_label {
    background: #334155 !important;
    color: #94a3b8 !important;
}

/* Prediction Badge */
html[data-theme="dark"] .tile.x_panel .x_title .badge-prediction {
    background: color-mix(in srgb, var(--danger) 15%, #0f172a) !important;
    border-color: color-mix(in srgb, var(--danger) 40%, #334155) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .tile.x_panel .x_title .badge-prediction svg,
html[data-theme="dark"] .tile.x_panel .x_title .badge-prediction svg path {
    fill: #f87171 !important;
}

/* ========== HEADER ACTION BUTTONS DARK MODE ========== */

/* Font Size Buttons */
html[data-theme="dark"] .btn-header-action {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

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

html[data-theme="dark"] .btn-header-action .font-icon {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .btn-header-action .font-plus {
    color: #4ade80 !important;
}

html[data-theme="dark"] .btn-header-action .font-minus {
    color: #f87171 !important;
}

/* Mark for Revision Button */
html[data-theme="dark"] .btn-mark-revision {
    background: #0f172a !important;
    border-color: #64748b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-mark-revision:hover {
    background: #1e293b !important;
    border-color: #94a3b8 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .btn-mark-revision svg {
    stroke: #94a3b8 !important;
}

html[data-theme="dark"] .btn-mark-revision:hover svg {
    stroke: #cbd5e1 !important;
}

/* Mark for Revision - Marked State */
html[data-theme="dark"] .btn-mark-revision.marked {
    background: color-mix(in srgb, var(--danger) 15%, #0f172a) !important;
    border-color: var(--danger) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .btn-mark-revision.marked svg {
    stroke: #f87171 !important;
}

html[data-theme="dark"] .btn-mark-revision.marked:hover {
    background: color-mix(in srgb, var(--danger) 25%, #0f172a) !important;
}

/* ========== PRACTICE TOOLBAR IN QUESTION PAGE ========== */

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

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

/* Show Answer Mode Notice Banner */
html[data-theme="dark"] .show-answer-mode-notice {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .show-answer-mode-notice a {
    color: #93c5fd !important;
}

/* Filter Hint */
html[data-theme="dark"] .toolbar-filter-hint {
    border-color: color-mix(in srgb, var(--clr-primary) 30%, #334155) !important;
    color: #64748b !important;
}

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

/* ========== PREVIOUS ANSWER SECTION DARK MODE ========== */

html[data-theme="dark"] .prev-answer-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .prev-answer-icon {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

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

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

/* Instructions Toggle */
html[data-theme="dark"] .instructions-toggle-link {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .instructions-toggle-link:hover {
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .instructions-toggle-link .toggle-icon {
    color: #64748b !important;
}

/* ========== HIGHCHARTS DARK MODE ========== */

/* Highcharts container and background */
html[data-theme="dark"] .highcharts-container,
html[data-theme="dark"] [id^="highcharts-"] {
    background: #1e293b !important;
}

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

html[data-theme="dark"] .highcharts-plot-background {
    fill: #0f172a !important;
}

/* Highcharts title and subtitle */
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-title tspan {
    fill: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-subtitle tspan {
    fill: #94a3b8 !important;
    color: #94a3b8 !important;
}

/* Highcharts axis labels and titles */
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-title tspan {
    fill: #94a3b8 !important;
    color: #94a3b8 !important;
}

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

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

/* Highcharts axis lines and ticks */
html[data-theme="dark"] .highcharts-axis-line {
    stroke: #475569 !important;
}

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

/* Highcharts plot border */
html[data-theme="dark"] .highcharts-plot-border {
    stroke: #334155 !important;
}

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

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

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

/* Highcharts credits */
html[data-theme="dark"] .highcharts-credits {
    fill: #64748b !important;
}

/* Pitch chart specific - plot band labels keep original colors (red for warnings) */

/* ========== ALERT STATUS BOX DARK MODE ========== */

html[data-theme="dark"] .alert.alert-info.status,
html[data-theme="dark"] .alert-info.status {
    background: color-mix(in srgb, #3b82f6 15%, #0f172a) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .alert.alert-info.status strong,
html[data-theme="dark"] .alert-info.status #status {
    color: #60a5fa !important;
}

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

html[data-theme="dark"] #recording-progress .progress-bar {
    background: var(--clr-primary) !important;
}

/* ========== SHOW MY ANSWER BUTTON DARK MODE ========== */

html[data-theme="dark"] .btn-prev-answer,
html[data-theme="dark"] #btn-show-answer {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .btn-prev-answer:hover,
html[data-theme="dark"] #btn-show-answer:hover {
    background: #1e293b !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .btn-prev-answer svg,
html[data-theme="dark"] #btn-show-answer svg {
    stroke: currentColor !important;
}

/* General alert variants for dark mode */
html[data-theme="dark"] .alert-info {
    background: color-mix(in srgb, #3b82f6 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #3b82f6 40%, #334155) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .alert-success {
    background: color-mix(in srgb, #22c55e 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #22c55e 40%, #334155) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .alert-warning {
    background: color-mix(in srgb, #f59e0b 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #f59e0b 40%, #334155) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .alert-danger {
    background: color-mix(in srgb, #ef4444 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #ef4444 40%, #334155) !important;
    color: #fca5a5 !important;
}

/* ========== INSTRUCTIONS CONTENT DARK MODE ========== */

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

html[data-theme="dark"] .instructions-toggle-wrapper {
    background: #1e293b !important;
}

/* ========== JBOX TOOLTIP/POPUP DARK MODE (Dictionary) ========== */

html[data-theme="dark"] .jBox-container,
html[data-theme="dark"] .jBox-wrapper {
    background: #1e293b !important;
}

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

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

/* jBox close button */
html[data-theme="dark"] .jBox-closeButton {
    background: #334155 !important;
}

html[data-theme="dark"] .jBox-closeButton svg path {
    fill: #94a3b8 !important;
}

html[data-theme="dark"] .jBox-closeButton:hover {
    background: #475569 !important;
}

html[data-theme="dark"] .jBox-closeButton:hover svg path {
    fill: #f1f5f9 !important;
}

/* jBox pointer/arrow */
html[data-theme="dark"] .jBox-pointer::after {
    background: #1e293b !important;
}

html[data-theme="dark"] .jBox-pointer-top::after {
    border-bottom-color: #1e293b !important;
}

html[data-theme="dark"] .jBox-pointer-bottom::after {
    border-top-color: #1e293b !important;
}

html[data-theme="dark"] .jBox-pointer-left::after {
    border-right-color: #1e293b !important;
}

html[data-theme="dark"] .jBox-pointer-right::after {
    border-left-color: #1e293b !important;
}

/* Dictionary popup content styling */
html[data-theme="dark"] .jBox-content h3,
html[data-theme="dark"] .jBox-content h4,
html[data-theme="dark"] .jBox-content h5 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .jBox-content h3.text-primary {
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

html[data-theme="dark"] .jBox-content .text-muted {
    color: #94a3b8 !important;
}

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

/* Syllable badges - dark background */
html[data-theme="dark"] .jBox-content .badge.bg-dark {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

/* Info badge (noun, verb, etc.) */
html[data-theme="dark"] .jBox-content .badge.bg-info {
    background: color-mix(in srgb, #3b82f6 30%, #1e293b) !important;
    color: #93c5fd !important;
}

/* List items */
html[data-theme="dark"] .jBox-content ul {
    color: #cbd5e1 !important;
}

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

/* Usage tips */
html[data-theme="dark"] .jBox-content .usetips {
    color: #94a3b8 !important;
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* Play TTS button */
html[data-theme="dark"] .jBox-content .play-tts {
    background: var(--clr-primary-dark, var(--clr-primary)) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .jBox-content .play-tts i,
html[data-theme="dark"] .jBox-content .play-tts .fa {
    color: #ffffff !important;
}

/* Volume icon */
html[data-theme="dark"] .jBox-content .fa-volume-up {
    color: var(--clr-primary-dark, var(--clr-primary)) !important;
}

/* ========== PAGE LOADING OVERLAY DARK MODE ========== */

html[data-theme="dark"] .page-loading-overlay,
html[data-theme="dark"] #page-loading-overlay {
    background: #0f172a !important;
}

html[data-theme="dark"] .page-loading-overlay .loading-text,
html[data-theme="dark"] #page-loading-overlay .loading-text {
    color: #94a3b8 !important;
}

/* Loading dots - keep primary color */
html[data-theme="dark"] .page-loading-overlay .loading-dots span,
html[data-theme="dark"] #page-loading-overlay .loading-dots span {
    background: var(--clr-primary, #6366f1) !important;
}

/* ============================================
   COMPLETED EXAMS PAGE DARK MODE
   /exam_module/completed
   ============================================ */

/* Test Types Wrapper - sticky header */
html[data-theme="dark"] #test-types-wrapper {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

/* Desktop/Tablet Pills */
html[data-theme="dark"] .test-types-pills > li > a {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

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

html[data-theme="dark"] .test-types-pills > li.active > a {
    background: var(--exam-color) !important;
    color: #fff !important;
    border-color: var(--exam-color) !important;
}

/* Mobile Dropdown Bar */
html[data-theme="dark"] .test-dd-bar {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .test-dd-bar:hover {
    background: #334155 !important;
}

/* Mobile Dropdown Menu */
html[data-theme="dark"] .test-dd-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

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

html[data-theme="dark"] .test-dd-menu > li > a:hover,
html[data-theme="dark"] .test-dd-menu > li.active > a {
    background: var(--exam-color) !important;
    color: #fff !important;
}

/* Exam List Toolbar */
html[data-theme="dark"] #exam-list-toolbar {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] #exam-list-toolbar .toolbar-section label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #exam-list-toolbar .form-control {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #exam-list-toolbar .form-control:focus {
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary)) 20%, transparent) !important;
}

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

/* Layout Toggle Buttons */
html[data-theme="dark"] #exam-list-toolbar .toolbar-section.layout .btn {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] #exam-list-toolbar .toolbar-section.layout .btn:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #exam-list-toolbar .toolbar-section.layout .btn.active {
    background: var(--clr-primary-dark, var(--clr-primary)) !important;
    border-color: var(--clr-primary-dark, var(--clr-primary)) !important;
    color: #0f172a !important;
}

/* Status Bar */
html[data-theme="dark"] #status-bar {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #status-bar b {
    color: #f1f5f9 !important;
}

/* Exam List Header (List View) */
html[data-theme="dark"] .exam-list-header {
    background: var(--clr-secondary) !important;
    color: #fff !important;
}

/* Exam Items - Grid View */
html[data-theme="dark"] .layout-grid .exam-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-top-color: var(--exam-color) !important;
}

html[data-theme="dark"] .layout-grid .exam-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .layout-grid .exam-item::before {
    background: transparent !important;
}

/* Exam Items - List View */
html[data-theme="dark"] .layout-list .exam-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-left-color: var(--exam-color) !important;
}

html[data-theme="dark"] .layout-list .exam-item:nth-of-type(odd) {
    background: #0f172a !important;
}

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

/* Exam Name */
html[data-theme="dark"] .exam-item .exam-name__title {
    color: var(--exam-color) !important;
}

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

/* Exam Section */
html[data-theme="dark"] .exam-item .exam-section {
    color: var(--exam-color) !important;
}

/* Exam Timestamps */
html[data-theme="dark"] .exam-item .exam-started-at,
html[data-theme="dark"] .exam-item .exam-completed-in,
html[data-theme="dark"] .exam-item .exam-evaluated-at {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .exam-item .exam-started-at label,
html[data-theme="dark"] .exam-item .exam-completed-in label,
html[data-theme="dark"] .exam-item .exam-evaluated-at label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-item .exam-started-at b,
html[data-theme="dark"] .exam-item .exam-completed-in b,
html[data-theme="dark"] .exam-item .exam-evaluated-at b {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .exam-item .text-muted {
    color: #64748b !important;
}

/* Status Labels */
html[data-theme="dark"] .label-status {
    background: rgba(15, 23, 42, 0.5) !important;
}

html[data-theme="dark"] .label-status-evaluated {
    color: #4ade80 !important;
    border-color: #4ade80 !important;
    background: color-mix(in srgb, #4ade80 15%, #0f172a) !important;
}

html[data-theme="dark"] .label-status-not-evaluted {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    background: color-mix(in srgb, #fbbf24 15%, #0f172a) !important;
}

html[data-theme="dark"] .label-status-not-started {
    color: var(--exam-color) !important;
    border-color: var(--exam-color) !important;
    background: color-mix(in srgb, var(--exam-color) 15%, #0f172a) !important;
}

html[data-theme="dark"] .label-status-in-progress {
    color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    background: color-mix(in srgb, var(--clr-primary) 15%, #0f172a) !important;
}

html[data-theme="dark"] .label-status-error {
    color: #f87171 !important;
    border-color: #f87171 !important;
    background: color-mix(in srgb, #f87171 15%, #0f172a) !important;
}

/* Action Buttons - Completed/Assignments Page (Ghost Style) */
/* Higher specificity to override general .btn-primary/.btn-success rules */
/* Use --clr-primary-dark and --clr-secondary-dark with fallbacks for dark mode */
html[data-theme="dark"] .exam-item .exam-actions .btn-primary,
html[data-theme="dark"] .exam-item .exam-actions-row .btn-primary,
html[data-theme="dark"] .exam-item .exam-actions .btn.btn-primary,
html[data-theme="dark"] .exam-item .exam-actions-row .btn.btn-primary {
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    border: 1px solid var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 15%, #0f172a) !important;
}

html[data-theme="dark"] .exam-item .exam-actions .btn-primary:hover,
html[data-theme="dark"] .exam-item .exam-actions-row .btn-primary:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, #0f172a) !important;
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
}

html[data-theme="dark"] .exam-item .exam-actions .btn-success,
html[data-theme="dark"] .exam-item .exam-actions-row .btn-success,
html[data-theme="dark"] .exam-item .exam-actions .btn.btn-success,
html[data-theme="dark"] .exam-item .exam-actions-row .btn.btn-success {
    color: var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
    border: 1px solid var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) 15%, #0f172a) !important;
}

html[data-theme="dark"] .exam-item .exam-actions .btn-success:hover,
html[data-theme="dark"] .exam-item .exam-actions-row .btn-success:hover {
    background: color-mix(in srgb, var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) 25%, #0f172a) !important;
    color: var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
}

html[data-theme="dark"] .exam-item .exam-actions .btn:disabled,
html[data-theme="dark"] .exam-item .exam-actions-row .btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* AI Feedback Button */
html[data-theme="dark"] .exam-item .exam-actions .btn.ai-feedback,
html[data-theme="dark"] .exam-item .exam-actions-row .btn.ai-feedback,
html[data-theme="dark"] .exam-item .exam-actions .btn.btn-primary.ai-feedback,
html[data-theme="dark"] .exam-item .exam-actions-row .btn.btn-primary.ai-feedback {
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    border: 1px solid var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 15%, #0f172a) !important;
}

html[data-theme="dark"] .exam-item .exam-actions .btn.ai-feedback:hover,
html[data-theme="dark"] .exam-item .exam-actions-row .btn.ai-feedback:hover {
    background: color-mix(in srgb, var(--clr-primary-dark, var(--clr-primary, #60a5fa)) 25%, #0f172a) !important;
    color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
}

/* AI Feedback Status Messages */
html[data-theme="dark"] .ai-feedback-status-messages small {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .ai-feedback-unavailable small {
    color: #64748b !important;
}

/* Error State */
html[data-theme="dark"] .exam-item[data-status='error'] {
    border-color: rgba(239, 68, 68, 0.6) !important;
}

html[data-theme="dark"] .exam-item[data-status='error'] .exam-name__title {
    color: #f87171 !important;
}

/* Pagination in Toolbar */
html[data-theme="dark"] #exam-list-toolbar .pagination > li > a {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #exam-list-toolbar .pagination > li > a:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

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

/* Section Icons in Exam Items */
html[data-theme="dark"] .exam-section.speaking,
html[data-theme="dark"] .exam-section.speaking .exam-section-icon,
html[data-theme="dark"] .exam-section.speaking .exam-section-text {
    color: var(--sec-speaking-dark, #42a5f5) !important;
}

html[data-theme="dark"] .exam-section.writing,
html[data-theme="dark"] .exam-section.writing .exam-section-icon,
html[data-theme="dark"] .exam-section.writing .exam-section-text {
    color: var(--sec-writing-dark, #ce93d8) !important;
}

html[data-theme="dark"] .exam-section.reading,
html[data-theme="dark"] .exam-section.reading .exam-section-icon,
html[data-theme="dark"] .exam-section.reading .exam-section-text {
    color: var(--sec-reading-dark, #ffb74d) !important;
}

html[data-theme="dark"] .exam-section.listening,
html[data-theme="dark"] .exam-section.listening .exam-section-icon,
html[data-theme="dark"] .exam-section.listening .exam-section-text {
    color: var(--sec-listening-dark, #4ade80) !important;
}

/* H3 Title in Test Types Wrapper */
html[data-theme="dark"] #test-types-wrapper h3 {
    color: #f1f5f9 !important;
}

/* ============================================
   EXAM TYPE COLOR VARIABLES - DARK MODE
   Brighter/lighter versions for dark backgrounds
   ============================================ */

/* Dark mode exam-type color tokens */
html[data-theme="dark"] {
    --type-practice-dark: #4ade80;       /* bright green */
    --type-skill-dark: #a78bfa;          /* bright purple */
    --type-long-dark: #e879f9;           /* bright fuchsia */
}

html[data-theme="dark"] .exam-type-mock {
    --exam-color: var(--clr-secondary-dark, #60a5fa) !important;
}

html[data-theme="dark"] .exam-type-practice {
    --exam-color: var(--type-practice-dark, #4ade80) !important;
}

html[data-theme="dark"] .exam-type-skill {
    --exam-color: var(--type-skill-dark, #a78bfa) !important;
}

html[data-theme="dark"] .exam-type-long {
    --exam-color: var(--type-long-dark, #e879f9) !important;
}

html[data-theme="dark"] .exam-type-all {
    --exam-color: var(--clr-primary-dark, #60a5fa) !important;
}

/* ============================================
   EXAM ITEMS - ENHANCED GRID VIEW DARK MODE
   Fix border-top accent visibility
   ============================================ */

/* Grid view exam items - ensure top border accent shows */
html[data-theme="dark"] .layout-grid .exam-item,
html[data-theme="dark"] .exam-list-container.layout-grid .exam-item {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-top: 3px solid var(--exam-color) !important;
    border-radius: 6px !important;
}

/* ============================================
   BTN-AVAILABLE - START EXAM BUTTON DARK MODE
   ============================================ */

html[data-theme="dark"] .btn-available,
html[data-theme="dark"] .exam-actions .btn-available {
    color: var(--exam-color) !important;
    border: 1px solid var(--exam-color) !important;
    background: color-mix(in srgb, var(--exam-color) 15%, #0f172a) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-available:hover,
html[data-theme="dark"] .exam-actions .btn-available:hover {
    background: color-mix(in srgb, var(--exam-color) 25%, #0f172a) !important;
    color: var(--exam-color) !important;
}

/* ============================================
   ASSIGNMENTS PAGE SPECIFIC DARK MODE
   Additional elements for /exam_module/assignments
   ============================================ */

/* Attempted/Accessed timestamps */
html[data-theme="dark"] .exam-item .exam-attempted-at,
html[data-theme="dark"] .exam-item .exam-accessed-at,
html[data-theme="dark"] .exam-item .exam-assigned-at {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .exam-item .exam-attempted-at label,
html[data-theme="dark"] .exam-item .exam-accessed-at label,
html[data-theme="dark"] .exam-item .exam-assigned-at label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-item .exam-attempted-at em,
html[data-theme="dark"] .exam-item .exam-accessed-at em,
html[data-theme="dark"] .exam-item .exam-assigned-at em {
    color: #64748b !important;
}

/* Exam list body background */
html[data-theme="dark"] .exam-list-body {
    background: transparent !important;
}

/* Exam list container */
html[data-theme="dark"] .exam-list-container {
    background: transparent !important;
}

/* ============================================
   VIEW ANSWERS PAGE DARK MODE
   /exam_module/completed/view_answers
   ============================================ */

/* Page Title */
html[data-theme="dark"] #sa_feedback h2,
html[data-theme="dark"] .speech-feedback h2 {
    color: #f1f5f9 !important;
}

/* ─────────────────────────────────────────────
   SECTION NAVIGATION PILLS (Desktop)
   Use section-specific colors for S/W/R/L
   ───────────────────────────────────────────── */

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

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

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

/* Speaking tab - blue */
html[data-theme="dark"] .feedback-nav > li:nth-child(1).active > a,
html[data-theme="dark"] .feedback-nav > li:nth-child(1).active > a:hover,
html[data-theme="dark"] .feedback-nav > li:nth-child(1).active > a:focus {
    background: var(--sec-speaking-dark, #42a5f5) !important;
    border-color: var(--sec-speaking-dark, #42a5f5) !important;
    color: #fff !important;
}

/* Writing tab - purple */
html[data-theme="dark"] .feedback-nav > li:nth-child(2).active > a,
html[data-theme="dark"] .feedback-nav > li:nth-child(2).active > a:hover,
html[data-theme="dark"] .feedback-nav > li:nth-child(2).active > a:focus {
    background: var(--sec-writing-dark, #ce93d8) !important;
    border-color: var(--sec-writing-dark, #ce93d8) !important;
    color: #fff !important;
}

/* Reading tab - orange */
html[data-theme="dark"] .feedback-nav > li:nth-child(3).active > a,
html[data-theme="dark"] .feedback-nav > li:nth-child(3).active > a:hover,
html[data-theme="dark"] .feedback-nav > li:nth-child(3).active > a:focus {
    background: var(--sec-reading-dark, #ffb74d) !important;
    border-color: var(--sec-reading-dark, #ffb74d) !important;
    color: #1e293b !important;
}

/* Listening tab - green */
html[data-theme="dark"] .feedback-nav > li:nth-child(4).active > a,
html[data-theme="dark"] .feedback-nav > li:nth-child(4).active > a:hover,
html[data-theme="dark"] .feedback-nav > li:nth-child(4).active > a:focus {
    background: var(--sec-listening-dark, #4ade80) !important;
    border-color: var(--sec-listening-dark, #4ade80) !important;
    color: #1e293b !important;
}

/* ─────────────────────────────────────────────
   MOBILE DROPDOWN
   ───────────────────────────────────────────── */

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

html[data-theme="dark"] .feedback-dropdown-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

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

html[data-theme="dark"] .feedback-dropdown-menu > li > a:hover,
html[data-theme="dark"] .feedback-dropdown-menu > li.active > a {
    background: var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────
   TAB CONTENT / ANSWERS TABLE
   ───────────────────────────────────────────── */

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

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

/* Answers table container */
html[data-theme="dark"] .answers-table {
    color: #cbd5e1 !important;
}

/* Table header */
html[data-theme="dark"] .answers-table thead {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .answers-table thead th {
    color: #f1f5f9 !important;
    background: #1e293b !important;
}

/* Question rows */
html[data-theme="dark"] tr.question-row {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] tr.question-row td {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] tr.question-row td b {
    color: #f1f5f9 !important;
}

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

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

/* ─────────────────────────────────────────────
   BADGES (Exam Scores, Danger, etc.)
   ───────────────────────────────────────────── */

html[data-theme="dark"] .badge-exam-scores {
    color: var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
    background: color-mix(in srgb, var(--clr-secondary-dark, #4ade80) 15%, #0f172a) !important;
}

html[data-theme="dark"] .badge-danger {
    background: color-mix(in srgb, #ef4444 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #ef4444 40%, #334155) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .badge-success {
    background: color-mix(in srgb, #22c55e 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #22c55e 40%, #334155) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .badge-warning {
    background: color-mix(in srgb, #f59e0b 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #f59e0b 40%, #334155) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .badge-info {
    background: color-mix(in srgb, #3b82f6 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #3b82f6 40%, #334155) !important;
    color: #93c5fd !important;
}

/* Time target marker - dark mode */
html[data-theme="dark"] .time-target-marker {
    background: #94a3b8 !important;
}
html[data-theme="dark"] .time-target-marker::before {
    background: #94a3b8 !important;
}
html[data-theme="dark"] .time-bar-wrapper {
    background: #334155 !important;
}
html[data-theme="dark"] .time-bar-value {
    color: #e2e8f0 !important;
}

/* ─────────────────────────────────────────────
   ALERTS (Success, Danger, Warning, Info)
   ───────────────────────────────────────────── */

html[data-theme="dark"] .answers-table .alert-success,
html[data-theme="dark"] #sa_feedback .alert-success {
    background: color-mix(in srgb, #22c55e 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #22c55e 40%, #334155) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .answers-table .alert-danger,
html[data-theme="dark"] #sa_feedback .alert-danger {
    background: color-mix(in srgb, #ef4444 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #ef4444 40%, #334155) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .answers-table .alert-warning,
html[data-theme="dark"] #sa_feedback .alert-warning {
    background: color-mix(in srgb, #f59e0b 15%, #0f172a) !important;
    border-color: color-mix(in srgb, #f59e0b 40%, #334155) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .answers-table .alert-info,
html[data-theme="dark"] #sa_feedback .alert-info {
    background: #1e293b !important;
    border-color: var(--clr-secondary-dark, var(--clr-secondary, #4ade80)) !important;
    color: #cbd5e1 !important;
}

/* ─────────────────────────────────────────────
   TEXT COLORS (Warning, Danger, Muted)
   ───────────────────────────────────────────── */

html[data-theme="dark"] .answers-table .text-warning,
html[data-theme="dark"] #sa_feedback .text-warning {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .answers-table .text-danger,
html[data-theme="dark"] #sa_feedback .text-danger {
    color: #f87171 !important;
}

html[data-theme="dark"] .answers-table .text-success,
html[data-theme="dark"] #sa_feedback .text-success {
    color: #4ade80 !important;
}

html[data-theme="dark"] .answers-table .text-info,
html[data-theme="dark"] #sa_feedback .text-info {
    color: #60a5fa !important;
}

html[data-theme="dark"] .answers-table .text-muted,
html[data-theme="dark"] #sa_feedback .text-muted {
    color: #64748b !important;
}

html[data-theme="dark"] .answers-table em.text-warning {
    color: #fbbf24 !important;
}

/* ─────────────────────────────────────────────
   SPEECH DETAIL / FEEDBACK ROWS
   ───────────────────────────────────────────── */

html[data-theme="dark"] tr.speech-detail,
html[data-theme="dark"] tr.speech-detail-row {
    background: #1e293b !important;
}

html[data-theme="dark"] tr.speech-detail td,
html[data-theme="dark"] tr.speech-detail-row td {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* ─────────────────────────────────────────────
   FORM ELEMENTS IN ANSWERS
   ───────────────────────────────────────────── */

html[data-theme="dark"] .answers-table input[type="checkbox"],
html[data-theme="dark"] .answers-table input[type="radio"] {
    accent-color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
}

html[data-theme="dark"] .answers-table input.blank,
html[data-theme="dark"] .answers-table select {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .answers-table .drop-target {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ─────────────────────────────────────────────
   CORRECT/INCORRECT INDICATORS
   ───────────────────────────────────────────── */

html[data-theme="dark"] .answers-table .correct,
html[data-theme="dark"] .answers-table .text-correct {
    color: #4ade80 !important;
}

html[data-theme="dark"] .answers-table .incorrect,
html[data-theme="dark"] .answers-table .text-incorrect {
    color: #f87171 !important;
}

html[data-theme="dark"] .paragraph.incorrect-pair-start {
    border-bottom-color: #f87171 !important;
}

/* ─────────────────────────────────────────────
   MOBILE CARD LAYOUT
   ───────────────────────────────────────────── */

@media (max-width: 767px) {
    html[data-theme="dark"] tr.qtype-fill_in_the_blanks_reading_n_writing,
    html[data-theme="dark"] tr.qtype-multiple_answers_reading,
    html[data-theme="dark"] tr.qtype-reorder_paragraphs,
    html[data-theme="dark"] tr.qtype-fill_in_the_blanks_reading,
    html[data-theme="dark"] tr.qtype-single_answer_reading,
    html[data-theme="dark"] tr.qtype-multiple_answers_listening,
    html[data-theme="dark"] tr.qtype-fill_in_the_blanks_listening,
    html[data-theme="dark"] tr.qtype-highlight_correct_summary,
    html[data-theme="dark"] tr.qtype-single_answer_listening,
    html[data-theme="dark"] tr.qtype-select_missing_word,
    html[data-theme="dark"] tr.qtype-highlight_incorrect_words,
    html[data-theme="dark"] tr.qtype-write_from_dictation,
    html[data-theme="dark"] tr.qtype-summarize_spoken_text,
    html[data-theme="dark"] tr.qtype-summarize_written_text,
    html[data-theme="dark"] tr.qtype-write_essay,
    html[data-theme="dark"] tr.qtype-read_aloud,
    html[data-theme="dark"] tr.qtype-repeat_sentence,
    html[data-theme="dark"] tr.qtype-describe_image,
    html[data-theme="dark"] tr.qtype-retell_lecture,
    html[data-theme="dark"] tr.qtype-answer_short_question,
    html[data-theme="dark"] tr.qtype-respond_to_a_situation,
    html[data-theme="dark"] tr.qtype-summarize_group_discussion {
        background: #1e293b !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }

    html[data-theme="dark"] tr.xs-row {
        background: #1e293b !important;
    }

    html[data-theme="dark"] tr.xs-row td {
        background: #1e293b !important;
    }
}

/* ─────────────────────────────────────────────
   AUDIO/VIDEO PLAYERS
   ───────────────────────────────────────────── */

html[data-theme="dark"] .answers-table audio,
html[data-theme="dark"] .answers-table video {
    filter: invert(1) hue-rotate(180deg);
}

/* ─────────────────────────────────────────────
   POPOVER / DETAILS POPOVER
   ───────────────────────────────────────────── */

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

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

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

/* ─────────────────────────────────────────────
   SA FEEDBACK - FEEDBACK SECTION CONTENT
   ───────────────────────────────────────────── */

html[data-theme="dark"] #sa_feedback .feedback-section-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] #sa_feedback .feedback-section-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Feedback items within the content */
html[data-theme="dark"] #sa_feedback .feedback-item {
    background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] #sa_feedback .feedback-item strong {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #sa_feedback .feedback-item > div:last-child {
    color: #cbd5e1 !important;
}

/* Generic .feedback-section-content (for other contexts like writing feedback) */
html[data-theme="dark"] .feedback-section-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .feedback-item {
    background: rgba(255, 255, 255, 0.03) !important;
}

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

html[data-theme="dark"] .feedback-item > div:last-child {
    color: #cbd5e1 !important;
}

/* ─────────────────────────────────────────────
   VIEW FEEDBACK PAGE - AI FEEDBACK CARD
   ───────────────────────────────────────────── */

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

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

html[data-theme="dark"] .card-body h1,
html[data-theme="dark"] .card-body h2,
html[data-theme="dark"] .card-body h3,
html[data-theme="dark"] .card-body h4,
html[data-theme="dark"] .card-body h5,
html[data-theme="dark"] .card-body h6 {
    color: #f1f5f9 !important;
}

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

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

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

html[data-theme="dark"] .card-body code {
    background: #0f172a !important;
    color: #f8b4b4 !important;
}

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

html[data-theme="dark"] .card-body blockquote {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left-color: var(--clr-primary-dark, var(--clr-primary, #60a5fa)) !important;
    color: #cbd5e1 !important;
}

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

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

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

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






/* ============================================
   GRAMMAR / SPELLING ERROR FEEDBACK - DARK MODE
   ============================================ */

/* Hint bar - dark mode */
html[data-theme="dark"] .grammar-error-hint {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%) !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}

/* Error highlights - dark mode */
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .error:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .error.error-active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .grammar-error.error {
    background-color: rgba(251, 146, 60, 0.15) !important;
}
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .grammar-error.error:hover,
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .grammar-error.error.error-active {
    background-color: rgba(251, 146, 60, 0.25) !important;
}
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .spelling-error.error {
    background-color: rgba(248, 113, 113, 0.15) !important;
}
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .spelling-error.error:hover,
html[data-theme="dark"] #wa_feedback .grammar_spelling-feedback-input-item .spelling-error.error.error-active {
    background-color: rgba(248, 113, 113, 0.25) !important;
}

/* Error Detail Card - dark mode */
html[data-theme="dark"] .error-detail-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] .error-detail-card.grammar {
    border-top-color: #fb923c !important;
}
html[data-theme="dark"] .error-detail-card.spelling {
    border-top-color: #f87171 !important;
}

html[data-theme="dark"] .error-detail-header {
    background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
    border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .error-detail-type {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .error-detail-close {
    color: #64748b !important;
}
html[data-theme="dark"] .error-detail-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .error-detail-card.grammar .error-detail-icon {
    background: rgba(251, 146, 60, 0.2) !important;
    color: #fb923c !important;
}
html[data-theme="dark"] .error-detail-card.spelling .error-detail-icon {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .error-detail-correction .original {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #fca5a5 !important;
    text-decoration-color: #f87171 !important;
}
html[data-theme="dark"] .error-detail-correction .arrow {
    color: #64748b !important;
}
html[data-theme="dark"] .error-detail-correction .corrected {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .error-detail-message {
    background: #0f172a !important;
    color: #94a3b8 !important;
}