/* =========================================================================
   iView Learning - Dark Mode (Accessibility > Dark Mode)
   Applied when <body> has .dark-mode (see js/accessibility-redesign.js).

   Approach: re-map the design tokens used across the platform to a single
   coherent dark palette, then fix the few components that hard-code light
   colours. Brand colour stays a *fill* colour; --dm-accent is the lightened
   variant used wherever the brand colour is used as *text* or an icon.
   Contrast targets: 4.5:1 body text, 3:1 large text / UI boundaries.
   Load after every other stylesheet.
   ========================================================================= */

body.dark-mode {
    color-scheme: dark;

    /* Palette */
    --dm-bg: #0B1220;
    --dm-surface: #111A2B;
    --dm-surface-2: #172236;
    --dm-surface-3: #1F2D45;
    --dm-border: #2B3A55;
    --dm-border-strong: #3E5073;
    --dm-text: #E8EDF6;
    --dm-text-2: #CBD5E4;
    --dm-muted: #A9B5C9;
    --dm-subtle: #8D9BB3;
    --dm-card-rgb: 17, 26, 43;
    --dm-accent: #5FC2BC;
    --dm-link: #7DB8FF;

    /* Redesign tokens (css/redesign.css) */
    --bg-app: var(--dm-bg);
    --bg-panel: var(--dm-surface);
    --text-main: var(--dm-text);
    --text-light: var(--dm-muted);
    --primary-soft: rgba(95, 194, 188, 0.16);

    /* Design-system tokens (css/design-system.css) */
    --bg-primary: var(--dm-surface);
    --bg-secondary: var(--dm-surface-2);
    --bg-tertiary: var(--dm-surface-3);
    --bg-overlay: rgba(2, 6, 14, 0.7);
    --text-primary: var(--dm-text);
    --text-secondary: var(--dm-text-2);
    --text-tertiary: var(--dm-muted);
    --text-disabled: #6B7A93;
    --hover-overlay: rgba(95, 194, 188, 0.12);
    --active-overlay: rgba(95, 194, 188, 0.22);
    --focus-ring: var(--dm-accent);

    --neutral-900: #F1F5F9;
    --neutral-800: #E2E8F0;
    --neutral-700: #CBD5E1;
    --neutral-600: #A9B5C9;
    --neutral-500: #8D9BB3;
    --neutral-400: #6B7A93;
    --neutral-300: #2F3E5A;
    --neutral-200: #25324A;
    --neutral-100: #172236;
    --neutral-50: #111A2B;

    --glass-bg: rgba(var(--dm-card-rgb), 0.85);
    --glass-border: rgba(148, 163, 184, 0.18);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.55);

    /* Bootstrap 4 / backend.css theme vars */
    --primary: var(--dm-accent);
    --blue: var(--dm-accent);

    /* Status colours (admin + dashboard chips) */
    --adm-brand-text: var(--dm-accent);
    --adm-success-fg: #6EE7B7;
    --adm-warning-fg: #FCD34D;
    --adm-danger-fg: #FCA5A5;
    --adm-info-fg: #93C5FD;
    --adm-neutral-fg: #CBD5E1;
    --adm-purple-fg: #C4B5FD;
    --adm-border: var(--dm-border);

    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

@supports (color: color-mix(in oklch, red 50%, white)) {
    body.dark-mode {
        /* Hero banners carry white text, so keep every gradient stop dark enough for it */
        --gradient-brand: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #12807C) 72%, #000) 0%, var(--brand-primary, #12807C) 100%);
        --gradient-subtle: linear-gradient(135deg, rgba(95, 194, 188, 0.14) 0%, rgba(95, 194, 188, 0.06) 100%);
        --dm-accent: color-mix(in oklch, var(--brand-primary, #12807C) 52%, #fff);
        --primary-soft: color-mix(in srgb, var(--brand-primary, #12807C) 26%, transparent);
        --hover-overlay: color-mix(in srgb, var(--brand-primary, #12807C) 18%, transparent);
        --active-overlay: color-mix(in srgb, var(--brand-primary, #12807C) 30%, transparent);
    }
}

/* -------------------------------------------------------------------------
   Page shell
   ------------------------------------------------------------------------- */
body.dark-mode .iq-top-navbar,
body.dark-mode .iq-footer,
body.dark-mode .iq-sidebar,
body.dark-mode .sidebar-footer {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .iq-sidebar-menu,
body.dark-mode .iq-sidebar-menu.glass-effect {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li a,
body.dark-mode .iq-sidebar-menu .iq-menu li a span {
    color: var(--dm-text-2) !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li a i {
    color: var(--dm-muted) !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li a:hover,
body.dark-mode .iq-sidebar-menu .iq-menu li a.active,
body.dark-mode .iq-sidebar-menu .iq-menu li a.iq-active,
body.dark-mode .iq-sidebar-menu .iq-menu li.active > a {
    background-color: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li a.active,
body.dark-mode .iq-sidebar-menu .iq-menu li.active > a {
    box-shadow: inset 3px 0 0 var(--dm-accent) !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li a:hover i,
body.dark-mode .iq-sidebar-menu .iq-menu li a.active i,
body.dark-mode .iq-sidebar-menu .iq-menu li a.iq-active i,
body.dark-mode .iq-sidebar-menu .iq-menu li.active > a i,
body.dark-mode .iq-sidebar-menu .iq-menu li a:hover span,
body.dark-mode .iq-sidebar-menu .iq-menu li a.active span,
body.dark-mode .iq-sidebar-menu .iq-menu li.active > a span,
body.dark-mode .iq-sidebar-menu .iq-menu li a.iq-parent-active,
body.dark-mode .iq-sidebar-menu .iq-menu li a.iq-parent-active i,
body.dark-mode .iq-sidebar-menu .iq-menu li a.iq-parent-active span {
    color: var(--dm-accent) !important;
}

body.dark-mode .iq-sidebar-menu .iq-menu li ul,
body.dark-mode .iq-sidebar-menu .iq-submenu {
    background: transparent !important;
}

body.dark-mode .iq-sidebar-menu hr,
body.dark-mode .iq-sidebar-menu .iq-menu > li + li.menu-separator,
body.dark-mode .iq-sidebar-menu .iq-menu li.sidebar-layout {
    border-color: var(--dm-border) !important;
}

/* The logo artwork has dark lettering, so keep it on a light chip */
body.dark-mode .iq-sidebar-logo .header-logo {
    display: block;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 6px 12px;
}

body.dark-mode .iq-top-navbar .navbar-toggler,
body.dark-mode .iq-top-navbar .wrapper-menu,
body.dark-mode .iq-top-navbar i {
    color: var(--dm-text-2) !important;
}

/* Site tabs */
body.dark-mode #site-tab-bar {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .site-tab {
    --site-tab-bg: var(--dm-surface-2);
    color: var(--dm-text-2) !important;
}

body.dark-mode .site-tab:hover {
    --site-tab-bg: var(--dm-surface-3);
    color: var(--dm-text) !important;
}

body.dark-mode .site-tab.active {
    --site-tab-bg: var(--dm-bg);
    color: var(--dm-accent) !important;
    border-color: var(--dm-border-strong);
}

body.dark-mode .site-tab.active .site-tab-label,
body.dark-mode .site-tab.active i {
    color: var(--dm-accent) !important;
}

body.dark-mode #site-tab-bar-actions {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode #site-tab-bar-actions i,
body.dark-mode #site-tab-bar-actions button {
    color: var(--dm-text-2) !important;
}

body.dark-mode .site-tab-scroll-btn {
    color: var(--dm-text-2) !important;
}

body.dark-mode .site-tab-scroll-btn:not(:disabled):hover,
body.dark-mode .site-tab-scroll-btn:not(:disabled):focus-visible {
    background: var(--dm-surface-3) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .stc-menu,
body.dark-mode .site-tab-context-menu {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .stc-item:hover {
    background: var(--dm-surface-3) !important;
}

/* -------------------------------------------------------------------------
   Cards and panels
   ------------------------------------------------------------------------- */
body.dark-mode .card,
body.dark-mode .iq-card,
body.dark-mode .card-glass,
body.dark-mode .header-card,
body.dark-mode.glass-mode .card,
body.dark-mode.glass-mode .iq-card {
    background: rgba(var(--dm-card-rgb), 0.92) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .card .card,
body.dark-mode .card .iq-card {
    background: var(--dm-surface-2) !important;
}

body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background: transparent !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .card-title,
body.dark-mode .card-header h1,
body.dark-mode .card-header h2,
body.dark-mode .card-header h3,
body.dark-mode .card-header h4,
body.dark-mode .card-header h5,
body.dark-mode .card-header h6 {
    color: var(--dm-text) !important;
}

/* Learner dashboard inner tiles */
body.dark-mode .ivl-dash .dash-stat,
body.dark-mode .ivl-dash .dash-nav-item,
body.dark-mode .ivl-dash .dash-item,
body.dark-mode .ivl-dash .dash-tabs,
body.dark-mode .ivl-dash .dash-search-input,
body.dark-mode .ivl-dash .dash-chip,
body.dark-mode .ivl-dash .dash-pager-btn {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .ivl-dash .dash-nav-item:hover,
body.dark-mode .ivl-dash .dash-item:hover {
    background: var(--dm-surface-3) !important;
}

body.dark-mode .ivl-dash .dash-eyebrow,
body.dark-mode .ivl-dash .dash-card-subtitle,
body.dark-mode .ivl-dash .dash-empty-text,
body.dark-mode .ivl-dash .dash-nav-item small,
body.dark-mode .ivl-dash .text-muted {
    color: var(--dm-muted) !important;
}

body.dark-mode .ivl-dash .dash-tabs .nav-link {
    color: var(--dm-link) !important;
    background: transparent !important;
}

body.dark-mode .ivl-dash .dash-tabs .nav-link.active {
    background: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
}

/* -------------------------------------------------------------------------
   Typography and utilities
   ------------------------------------------------------------------------- */
body.dark-mode .text-dark,
body.dark-mode .text-body,
body.dark-mode .text-black,
body.dark-mode .text-black-50 {
    color: var(--dm-text) !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .text-black-50,
body.dark-mode small.text-muted {
    color: var(--dm-muted) !important;
}

body.dark-mode .text-primary,
body.dark-mode .text-brand,
body.dark-mode .text-info {
    color: var(--dm-accent) !important;
}

body.dark-mode .text-success { color: #6EE7B7 !important; }
body.dark-mode .text-warning { color: #FCD34D !important; }
body.dark-mode .text-danger { color: #FCA5A5 !important; }

body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .bg-soft-primary,
body.dark-mode .bg-soft-info {
    background-color: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .bg-soft-light,
body.dark-mode .bg-soft-secondary {
    background-color: rgba(148, 163, 184, 0.12) !important;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right,
body.dark-mode hr {
    border-color: var(--dm-border) !important;
}

/* Content links keep the readable light-blue; buttons, tabs and menu items
   style themselves */
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.site-tab):not(.badge):not([class*="dash-"]):not([class*="sw-"]):not(.skip-link):not(.profile-menu-link) {
    color: var(--dm-link);
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.site-tab):not(.badge):not([class*="dash-"]):not([class*="sw-"]):not(.skip-link):not(.profile-menu-link):hover {
    color: #A8D0FF;
}

body.dark-mode .skip-link {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-secondary,
body.dark-mode .btn-success {
    color: #fff !important;
}

body.dark-mode .btn-light,
body.dark-mode .btn-secondary.btn-light,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-default {
    background: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-default:hover {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .btn-outline-primary {
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

body.dark-mode .btn-soft-primary,
body.dark-mode .btn-soft-action,
body.dark-mode .btn-soft-info {
    background: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
    border-color: transparent !important;
}

body.dark-mode .btn-soft-primary:hover,
body.dark-mode .btn-soft-action:hover {
    background: var(--active-overlay) !important;
    color: #fff !important;
}

body.dark-mode .btn-link {
    color: var(--dm-link) !important;
}

body.dark-mode .btn-outline-danger { color: #FCA5A5 !important; border-color: #F87171 !important; }
body.dark-mode .btn-outline-danger:hover { background: #DC2626 !important; color: #fff !important; }

body.dark-mode .close,
body.dark-mode .btn-close {
    color: var(--dm-text) !important;
    text-shadow: none;
    opacity: 0.8;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .form-select,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode .search-input,
body.dark-mode .iq-search-bar .searchbox,
body.dark-mode .bootstrap-select > .dropdown-toggle,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px rgba(95, 194, 188, 0.28) !important;
    outline: 0;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .search-input::placeholder {
    color: var(--dm-subtle) !important;
    opacity: 1;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode input:disabled,
body.dark-mode select:disabled {
    background-color: var(--dm-surface) !important;
    color: var(--dm-subtle) !important;
}

body.dark-mode .bootstrap-select .filter-option,
body.dark-mode .bootstrap-select .filter-option-inner,
body.dark-mode .bootstrap-select .filter-option-inner-inner,
body.dark-mode .select2-container--default .select2-selection__rendered {
    color: var(--dm-text) !important;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode legend {
    color: var(--dm-text-2);
}

body.dark-mode .input-group-text {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode .form-text,
body.dark-mode .help-block,
body.dark-mode .invalid-feedback {
    color: var(--dm-muted);
}

body.dark-mode .invalid-feedback { color: #FCA5A5; }

/* Search icons inside the top bar and dashboard search */
body.dark-mode .iq-search-bar i,
body.dark-mode .iq-search-bar .search-link i {
    color: var(--dm-muted) !important;
}

/* -------------------------------------------------------------------------
   Dropdowns, menus, modals, popovers
   ------------------------------------------------------------------------- */
body.dark-mode .dropdown-menu,
body.dark-mode .iq-sub-dropdown,
body.dark-mode .select2-dropdown,
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

body.dark-mode .tooltip-inner {
    background: var(--dm-surface-3) !important;
}

body.dark-mode .popover-header {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .popover-body { color: var(--dm-text-2) !important; }

body.dark-mode .dropdown-item,
body.dark-mode .select2-results__option,
body.dark-mode .bootstrap-select .dropdown-menu li a {
    color: var(--dm-text-2) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus,
body.dark-mode .select2-results__option--highlighted,
body.dark-mode .bootstrap-select .dropdown-menu li a:hover,
body.dark-mode .bootstrap-select .dropdown-menu li.active a {
    background: var(--primary-soft) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .dropdown-divider { border-color: var(--dm-border) !important; }
body.dark-mode .dropdown-header { color: var(--dm-muted) !important; }

body.dark-mode .modal-content {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .modal-backdrop.show { opacity: 0.7; }

/* -------------------------------------------------------------------------
   Tabs, pills, lists, pagination
   ------------------------------------------------------------------------- */
body.dark-mode .nav-tabs {
    border-color: var(--dm-border) !important;
}

body.dark-mode .nav-tabs .nav-link,
body.dark-mode .nav-pills .nav-link {
    color: var(--dm-text-2) !important;
}

body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .nav-pills .nav-link:hover {
    color: var(--dm-text) !important;
}

body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
    background: transparent !important;
    border-color: var(--dm-border) var(--dm-border) transparent !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .nav-pills .nav-link.active,
body.dark-mode .nav-pills .show > .nav-link {
    background: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .list-group-item {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item.active {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .page-link {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode .page-item.active .page-link {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

body.dark-mode .page-item.disabled .page-link { color: var(--dm-subtle) !important; }

body.dark-mode .breadcrumb { background: transparent !important; }
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item.active { color: var(--dm-muted) !important; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-subtle) !important; }

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
body.dark-mode .table,
body.dark-mode table.dataTable {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .table thead th,
body.dark-mode table.dataTable td,
body.dark-mode table.dataTable th {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .table thead th,
body.dark-mode table.dataTable thead th {
    color: var(--dm-muted) !important;
    background: transparent !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.dark-mode table.dataTable.stripe tbody tr.odd {
    background: rgba(148, 163, 184, 0.06) !important;
}

body.dark-mode .table-hover tbody tr:hover,
body.dark-mode table.dataTable.hover tbody tr:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .table-light,
body.dark-mode .thead-light th {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: var(--dm-muted) !important;
}

/* -------------------------------------------------------------------------
   Alerts, badges, progress
   ------------------------------------------------------------------------- */
body.dark-mode .alert { border-width: 1px; }
body.dark-mode .alert-info,
body.dark-mode .alert-primary { background: rgba(59, 130, 246, 0.14) !important; border-color: rgba(59, 130, 246, 0.4) !important; color: #BFDBFE !important; }
body.dark-mode .alert-success { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.4) !important; color: #A7F3D0 !important; }
body.dark-mode .alert-warning { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: #FDE68A !important; }
body.dark-mode .alert-danger { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #FECACA !important; }
body.dark-mode .alert-secondary,
body.dark-mode .alert-light { background: rgba(148, 163, 184, 0.12) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text-2) !important; }
body.dark-mode .alert a { color: inherit !important; text-decoration: underline; }

body.dark-mode .badge-light,
body.dark-mode .badge-secondary,
body.dark-mode .badge-light-primary {
    background: var(--primary-soft) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode .progress {
    background: rgba(148, 163, 184, 0.2) !important;
}

/* -------------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------------- */
body.dark-mode .accordion-item,
body.dark-mode .accordion-button,
body.dark-mode .collapse .card-body {
    background: transparent;
    color: var(--dm-text);
    border-color: var(--dm-border);
}

body.dark-mode .accordion-button:not(.collapsed) {
    background: var(--primary-soft);
    color: var(--dm-accent);
}

body.dark-mode code,
body.dark-mode pre {
    background: var(--dm-surface-3);
    color: #F9A8D4;
    border-color: var(--dm-border);
}

body.dark-mode .jumbotron {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

body.dark-mode ::selection {
    background: rgba(95, 194, 188, 0.35);
    color: #fff;
}

body.dark-mode .tox .tox-edit-area__iframe,
body.dark-mode .ql-container,
body.dark-mode .ql-editor {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

body.dark-mode .ql-toolbar {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode .ql-toolbar .ql-stroke { stroke: var(--dm-text-2) !important; }
body.dark-mode .ql-toolbar .ql-fill { fill: var(--dm-text-2) !important; }
body.dark-mode .ql-toolbar .ql-picker { color: var(--dm-text-2) !important; }

/* Admin chart text and gridlines pick up the tokens above; keep SVG labels readable */
body.dark-mode .apexcharts-text,
body.dark-mode .apexcharts-legend-text { fill: var(--dm-muted) !important; color: var(--dm-muted) !important; }
body.dark-mode .apexcharts-gridline { stroke: var(--dm-border); }
body.dark-mode .apexcharts-tooltip,
body.dark-mode .apexcharts-xaxistooltip,
body.dark-mode .apexcharts-yaxistooltip {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .apexcharts-tooltip-title {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

/* -------------------------------------------------------------------------
   Brand colour used as text / icons on soft backgrounds
   (the brand teal is only ~3.6:1 on the dark surfaces, so lift it)
   ------------------------------------------------------------------------- */
body.dark-mode .text-brand,
body.dark-mode .ivl-progress .text-brand,
body.dark-mode .dash-icon-chip,
body.dark-mode .dash-tone-brand,
body.dark-mode .dash-link,
body.dark-mode .dash-chip i,
body.dark-mode .dash-tab-count,
body.dark-mode .dash-thumb,
body.dark-mode .dash-badge.dash-tone-brand,
body.dark-mode .dash-item-action,
body.dark-mode .btn-play-pulse,
body.dark-mode .dash-empty-icon,
body.dark-mode .dash-pager-btn,
body.dark-mode .dash-nav-item:hover .dash-nav-arrow,
body.dark-mode .dash-date-tile,
body.dark-mode .dash-step:hover,
body.dark-mode .dash-step-num,
body.dark-mode .ivl-progress .mp-icon-chip,
body.dark-mode .ivl-progress .mp-link,
body.dark-mode .ivl-progress .mp-tod-item i,
body.dark-mode .ivl-progress .mp-insight i,
body.dark-mode .ivl-progress .mp-thumb,
body.dark-mode .ivl-progress .mp-round-btn,
body.dark-mode .ivl-progress .mp-badge-soft,
body.dark-mode .ivl-progress .mp-segmented button[aria-pressed="true"],
body.dark-mode .section-pill.active,
body.dark-mode .module-list-item:hover,
body.dark-mode .module-list-item.active,
body.dark-mode .lms-resource-chip,
body.dark-mode .btn-play-soft i,
body.dark-mode .badge-light-primary,
body.dark-mode .nav-soft-primary .sw-nav-btn:hover,
body.dark-mode .nav-soft-primary .sw-nav-btn.active,
body.dark-mode .nav-soft-primary .sw-nav-btn.active i,
body.dark-mode .workplace-skills-sidebar-card .wp-sidebar-heading i,
body.dark-mode .workplace-skills-sidebar-card .wp-sidebar-browse,
body.dark-mode .workplace-skills-sidebar-card .wp-sidebar-badge--progress,
body.dark-mode .site-tab.pinned,
body.dark-mode .sgp-title i,
body.dark-mode .sgp-open-btn,
body.dark-mode .stc-check,
body.dark-mode .breadcrumb-item a,
body.dark-mode ol.breadcrumb .breadcrumb-item a,
body.dark-mode .bootstrap-select .dropdown-menu li.selected a,
body.dark-mode .bootstrap-select .dropdown-menu li.selected a span.check-mark,
body.dark-mode .glass-search-input:focus + .glass-search-icon,
body.dark-mode.admin-view .adm-icon-chip,
body.dark-mode.admin-view .adm-segmented .btn.active,
body.dark-mode.admin-view .adm-segmented .btn:hover,
body.dark-mode.admin-view .nav-tabs:not(.card-header-tabs) .nav-link.active,
body.dark-mode.admin-view .nav-tabs:not(.card-header-tabs) .nav-link:hover,
body.dark-mode.admin-view .dropdown-item:hover,
body.dark-mode.admin-view .btn-light:hover,
body.dark-mode.admin-view .btn-outline-secondary:hover {
    color: var(--dm-accent) !important;
}

/* Hovered/active chips that become a solid brand fill keep white text */
body.dark-mode .dash-chip:hover,
body.dark-mode .dash-chip:hover i,
body.dark-mode .dash-item:hover .dash-item-action,
body.dark-mode .btn-play-pulse:hover,
body.dark-mode .list-view-item:hover .btn-play-pulse,
body.dark-mode .dash-pager-btn.is-active,
body.dark-mode .dash-date-tile.is-today,
body.dark-mode .dash-step.active .dash-step-num,
body.dark-mode .ivl-progress .mp-round-btn:hover {
    color: #fff !important;
}

body.dark-mode .admin-mode-label,
body.dark-mode .course-view-btn[aria-pressed="true"],
body.dark-mode .course-view-btn[aria-pressed="true"] span {
    color: var(--dm-accent) !important;
}

/* Page-local alert styles */
body.dark-mode .alert-soft-info,
body.dark-mode .alert-soft-primary { background: rgba(59, 130, 246, 0.14) !important; border-color: rgba(59, 130, 246, 0.4) !important; color: #BFDBFE !important; }
body.dark-mode .alert-soft-success { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.4) !important; color: #A7F3D0 !important; }
body.dark-mode .alert-soft-warning { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: #FDE68A !important; }
body.dark-mode .alert-soft-danger { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #FECACA !important; }
body.dark-mode .alert[class*="alert-soft-"] .text-primary,
body.dark-mode .alert[class*="alert-soft-"] a { color: inherit !important; }

/* Admin > Security notifications */
body.dark-mode .security-notification { color: var(--dm-text-2) !important; }
body.dark-mode .security-notification.alert-success { background-color: rgba(16, 185, 129, 0.12) !important; }
body.dark-mode .security-notification.alert-success strong,
body.dark-mode .security-notification.alert-success p,
body.dark-mode .security-feature-list li { color: #A7F3D0 !important; }
body.dark-mode .security-notification.alert-info { background-color: rgba(59, 130, 246, 0.12) !important; }
body.dark-mode .security-notification.alert-info strong,
body.dark-mode .security-notification.alert-info p,
body.dark-mode .security-notification.alert-info div { color: #BFDBFE !important; }
body.dark-mode .security-notification.alert-warning { background-color: rgba(245, 158, 11, 0.12) !important; }
body.dark-mode .security-notification.alert-warning strong,
body.dark-mode .security-notification.alert-warning p { color: #FDE68A !important; }

/* Pastel status badges carry white text in light mode */
body.dark-mode .badge-warning,
body.dark-mode .badge-danger,
body.dark-mode .badge-info,
body.dark-mode .badge-success { color: #0B1220 !important; }

/* DataTables paging */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--dm-muted) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-soft) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

/* ApexCharts titles and axis labels set their own fill */
body.dark-mode .apexcharts-title-text,
body.dark-mode .apexcharts-subtitle-text,
body.dark-mode .apexcharts-xaxis-title-text,
body.dark-mode .apexcharts-yaxis-title-text,
body.dark-mode .apexcharts-datalabel-label,
body.dark-mode .apexcharts-legend-text {
    fill: var(--dm-text-2) !important;
    color: var(--dm-text-2) !important;
}
body.dark-mode .apexcharts-yaxis-label,
body.dark-mode .apexcharts-xaxis-label { fill: var(--dm-muted) !important; }
body.dark-mode .apexcharts-datalabel-value { fill: var(--dm-text) !important; }

/* -------------------------------------------------------------------------
   Study Skills shell tokens
   (page-local hard-coded colours are handled by js/dark-mode-adapter.js)
   ------------------------------------------------------------------------- */
body.dark-mode {
    --ss-bg: var(--dm-bg);
    --ss-surface: var(--dm-surface);
    --ss-border: var(--dm-border);
    --ss-text: var(--dm-text);
    --ss-muted: var(--dm-muted);
    --ss-tab-bar-bg: var(--dm-surface-2);
    --ss-primary-light: rgba(95, 194, 188, 0.16);
    --ss-primary-soft: rgba(95, 194, 188, 0.1);
    --ss-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --ss-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
   Runtime adapter output (js/dark-mode-adapter.js)
   Remaps leftover hard-coded light surfaces, light borders and dark text
   found on pages with page-local styling. Hue is preserved for tinted ones.
   ------------------------------------------------------------------------- */
body.dark-mode [data-dm-bg="n0"] { background-color: var(--dm-surface) !important; }
body.dark-mode [data-dm-bg="n1"] { background-color: var(--dm-surface-2) !important; }
body.dark-mode [data-dm-bg="n2"] { background-color: var(--dm-surface-3) !important; }
body.dark-mode [data-dm-bg="o"] { background-color: rgba(148, 163, 184, 0.07) !important; }
body.dark-mode [data-dm-bg="t"] {
    background-color: color-mix(in srgb, rgb(var(--dm-orig-bg)) 22%, var(--dm-surface)) !important;
}
@supports (color: oklch(from red l c h)) {
    body.dark-mode [data-dm-bg="t"] {
        background-color: oklch(from rgb(var(--dm-orig-bg)) calc(0.2 + (1 - l) * 0.25) calc(c * 0.55) h) !important;
    }
}

body.dark-mode [data-dm-bd] { border-color: var(--dm-border) !important; }

body.dark-mode [data-dm-fg="text"] { color: var(--dm-text) !important; }
body.dark-mode [data-dm-fg="muted"] { color: var(--dm-muted) !important; }
body.dark-mode [data-dm-fg="c"] { color: color-mix(in srgb, rgb(var(--dm-orig-fg)) 35%, #fff) !important; }
@supports (color: oklch(from red l c h)) {
    body.dark-mode [data-dm-fg="c"] {
        color: oklch(from rgb(var(--dm-orig-fg)) max(0.78, calc(1 - l)) c h) !important;
    }
}

/* -------------------------------------------------------------------------
   FullCalendar (events, planner)
   ------------------------------------------------------------------------- */
body.dark-mode .fc {
    --fc-border-color: var(--dm-border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--dm-surface-2);
    --fc-neutral-text-color: var(--dm-muted);
    --fc-list-event-hover-bg-color: var(--dm-surface-3);
    --fc-today-bg-color: rgba(95, 194, 188, 0.12);
    --fc-button-text-color: var(--dm-text);
    --fc-button-bg-color: var(--dm-surface-2);
    --fc-button-border-color: var(--dm-border-strong);
    --fc-button-hover-bg-color: var(--dm-surface-3);
    --fc-button-hover-border-color: var(--dm-border-strong);
    --fc-button-active-bg-color: var(--brand-primary);
    --fc-button-active-border-color: var(--brand-primary);
    color: var(--dm-text);
}

body.dark-mode .fc .fc-button-primary:not(:disabled),
body.dark-mode .fc .fc-button-primary:not(:disabled):hover {
    color: var(--dm-text) !important;
}

body.dark-mode .fc .fc-button-primary:not(:disabled).fc-button-active,
body.dark-mode .fc .fc-button-primary:not(:disabled):active {
    color: #fff !important;
}

body.dark-mode .fc .fc-button-primary:disabled {
    color: var(--dm-subtle) !important;
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .fc .fc-toolbar-title,
body.dark-mode .fc .fc-col-header-cell-cushion,
body.dark-mode .fc .fc-daygrid-day-number,
body.dark-mode .fc .fc-list-day-text,
body.dark-mode .fc .fc-list-day-side-text,
body.dark-mode .fc .fc-list-event-title a {
    color: var(--dm-text) !important;
}

body.dark-mode .fc .fc-list-empty,
body.dark-mode .fc .fc-list-day-cushion,
body.dark-mode .fc .fc-scrollgrid,
body.dark-mode .fc table {
    background: transparent !important;
    color: var(--dm-text) !important;
}

/* -------------------------------------------------------------------------
   Accessibility panel (its markup carries inline light-mode colours)
   ------------------------------------------------------------------------- */
body.dark-mode #accessibility-panel {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border-strong) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    color: var(--dm-text) !important;
}

body.dark-mode #accessibility-panel > div:first-child {
    border-bottom-color: var(--dm-border) !important;
}

body.dark-mode #accessibility-panel #accessibility-title,
body.dark-mode h2#accessibility-title {
    color: var(--dm-text) !important;
}

body.dark-mode #accessibility-panel .accessibility-section h4 {
    color: var(--dm-muted) !important;
}

body.dark-mode #accessibility-panel #reset-acc {
    border-color: var(--dm-subtle) !important;
    color: var(--dm-muted) !important;
}

body.dark-mode #accessibility-panel #reset-acc:hover {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-muted) !important;
}

body.dark-mode #accessibility-panel .close-panel {
    color: var(--dm-muted) !important;
}

body.dark-mode #accessibility-panel .close-panel:hover {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text) !important;
}

body.dark-mode #accessibility-panel .acc-toggle {
    border-color: var(--dm-border-strong) !important;
    background: transparent !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode #accessibility-panel .acc-toggle:hover {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

body.dark-mode #accessibility-panel .acc-toggle.active,
body.dark-mode #accessibility-panel .acc-toggle.active span:first-child {
    background: var(--primary-soft) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
}

body.dark-mode #accessibility-panel .acc-toggle.active span:first-child {
    background: transparent !important;
}

body.dark-mode #accessibility-panel .theme-btn-mini {
    background: var(--dm-surface-2) !important;
}

body.dark-mode #accessibility-panel .theme-btn-mini:not(.active) {
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode #accessibility-panel .theme-btn-mini > span:not(.color-dot) {
    color: var(--dm-text-2) !important;
}

body.dark-mode #accessibility-panel .acc-cursor-color-btn:not([data-cursor="black"]) {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

body.dark-mode #accessibility-panel .keyboard-shortcuts ul,
body.dark-mode #accessibility-panel .text-center,
body.dark-mode #accessibility-panel small {
    color: var(--dm-muted) !important;
}