<script>
(function() {
    if (localStorage.getItem("dark_mode") === "on") {
        document.documentElement.classList.add("dark-mode");
        document.body.classList.add("dark-mode");
        document.documentElement.style.background = "#121212";
        document.body.style.background = "#121212";
    }
})();
</script>

<style>

/* ============================================================
   GLOBAL ROOT OVERRIDES
   ============================================================ */
html.dark-mode,
body.dark-mode {
    --body-bg: #121212 !important;
    --body-color: #e0e0e0 !important;

    --100: #1e1e1e !important;
    --200: #2a2a2a !important;
    --300: #333333 !important;
    --400: #3d3d3d !important;
    --500: #555555 !important;
    --600: #777777 !important;
    --700: #aaaaaa !important;
    --800: #cccccc !important;
    --900: #e0e0e0 !important;

    --bg-light: #1e1e1e !important;
    --color-light: #e0e0e0 !important;

    --navbar-color: #e0e0e0 !important;
    --navbar-hover-color: #ffffff !important;
    --navbar-brand-color: #e0e0e0 !important;
    --navbar-brand-hover-color: #ffffff !important;

    --btn-primary: #4a90e2 !important;
    --btn-primary-text: #ffffff !important;
    --btn-primary-border: #4a90e2 !important;

    --btn-secondary: #2a2a2a !important;
    --btn-secondary-text: #e0e0e0 !important;
    --btn-secondary-border: #3a3a3a !important;

    --dropdown-bg: #1e1e1e !important;
    --dropdown-link-color: #e0e0e0 !important;
    --dropdown-link-hover-color: #ffffff !important;
    --dropdown-border-color: #3a3a3a !important;
}

/* ============================================================
   SAFE GLOBAL TEXT COLOR (NO BADGES / INPUTS / SEARCH / QUIZ)
   ============================================================ */
html.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link),
body.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link) {
    color: var(--body-color) !important;
}

/* ============================================================
   BADGES / FILTER TAGS
   ============================================================ */
html.dark-mode .badge,
body.dark-mode .badge,
html.dark-mode .o_filter_tag,
body.dark-mode .o_filter_tag {
    background: var(--bg-light) !important;
    color: var(--color-light) !important;
    border-color: var(--bg-solid, #555) !important;
}

/* ============================================================
   QUIZ ICON FIX
   ============================================================ */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle,
body.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle {
    color: #6A3DFF !important;
}

/* ============================================================
   GLOBAL BACKGROUND FIX
   ============================================================ */
html.dark-mode,
body.dark-mode,
html.dark-mode #wrapwrap,
body.dark-mode #wrapwrap,
html.dark-mode #wrapwrap > main,
body.dark-mode #wrapwrap > main {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   FIX .bg-white OVERRIDES
   ============================================================ */
html.dark-mode .bg-white,
body.dark-mode .bg-white,
html.dark-mode .bg-100,
body.dark-mode .bg-100,
html.dark-mode .bg-200,
body-dark-mode .bg-200,
html.dark-mode .bg-300,
body-dark-mode .bg-300,
html.dark-mode .bg-400,
body-dark-mode .bg-400,
html.dark-mode .bg-500,
body-dark-mode .bg-500,
html.dark-mode .bg-600,
body-dark-mode .bg-600,
html.dark-mode .bg-700,
body-dark-mode .bg-700,
html.dark-mode .bg-800,
body-dark-mode .bg-800,
html.dark-mode .bg-900,
body-dark-mode .bg-900 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   SLIDES / COURSE CONTENT
   ============================================================ */
html.dark-mode .o_wslides_body,
body-dark-mode .o_wslides_body,
html.dark-mode .o_wslides_body > #wrapwrap > main,
body-dark-mode .o_wslides_body > #wrapwrap > main,
html.dark-mode .o_wslides_course_main,
body-dark-mode .o_wslides_course_main,
html.dark-mode .o_wslides_course_main *,
body-dark-mode .o_wslides_course_main *,
html.dark-mode .o_wslides_course_sidebar,
body-dark-mode .o_wslides_course_sidebar,
html.dark-mode .o_wslides_course_sidebar *,
body-dark-mode .o_wslides_course_sidebar *,
html.dark-mode .o_wslides_lesson_content,
body-dark-mode .o_wslides_lesson_content,
html.dark-mode .o_wslides_lesson_content *,
body-dark-mode .o_wslides_lesson_content *,
html.dark-mode .o_wslides_quiz,
body-dark-mode .o_wslides_quiz,
html.dark-mode .o_wslides_quiz *,
body-dark-mode .o_wslides_quiz * {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   SECTIONS / SNIPPETS
   ============================================================ */
html.dark-mode section,
body-dark-mode section,
html.dark-mode .s_block,
body-dark-mode .s_block,
html.dark-mode .s_text_block,
body-dark-mode .s_text_block,
html.dark-mode .s_cover,
body-dark-mode .s_cover,
html.dark-mode .s_banner,
body-dark-mode .s_banner,
html.dark-mode .s_features,
body-dark-mode .s_features,
html.dark-mode .s_call_to_action,
body-dark-mode .s_call_to_action,
html.dark-mode .o_panel,
body-dark-mode .o_panel,
html.dark-mode .o_cc1,
body-dark-mode .o_cc1,
html.dark-mode .o_cc2,
body-dark-mode .o_cc2,
html.dark-mode .o_cc3,
body-dark-mode .o_cc3,
html.dark-mode .o_cc4,
body-dark-mode .o_cc4,
html.dark-mode .o_cc5,
body-dark-mode .o_cc5 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   CONTAINERS / CARDS
   ============================================================ */
html.dark-mode .container,
body-dark-mode .container,
html.dark-mode .row,
body-dark-mode .row,
html.dark-mode .card,
body-dark-mode .card,
html.dark-mode .card-body,
body-dark-mode .card-body,
html.dark-mode .o_panel,
body-dark-mode .o_panel {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   INPUTS / FORM CONTROLS
   ============================================================ */
html.dark-mode input,
body-dark-mode input,
html.dark-mode textarea,
body-dark-mode textarea,
html.dark-mode select,
body-dark-mode select,
html.dark-mode .form-control,
body-dark-mode .form-control,
html.dark-mode .form-select,
body-dark-mode .form-select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* ============================================================
   SEARCHBAR RESULTS / AUTOCOMPLETE
   ============================================================ */
html.dark-mode .o-autocomplete--dropdown-menu,
body-dark-mode .o-autocomplete--dropdown-menu,
html.dark-mode .o_dropdown_menu,
body-dark-mode .o_dropdown_menu {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

html.dark-mode .o-autocomplete--dropdown-item,
body-dark-mode .o-autocomplete--dropdown-item,
html.dark-mode .o_dropdown_menu .dropdown-item,
body-dark-mode .o_dropdown_menu .dropdown-item {
    color: #e0e0e0 !important;
    background-color: transparent !important;
}

html.dark-mode .o-autocomplete--dropdown-item:hover,
body-dark-mode .o-autocomplete--dropdown-item:hover,
html.dark-mode .o_dropdown_menu .dropdown-item:hover,
body-dark-mode .o_dropdown_menu .dropdown-item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

html.dark-mode .o-autocomplete--dropdown-item *,
body-dark-mode .o-autocomplete--dropdown-item *,
html.dark-mode .o_dropdown_menu .dropdown-item *,
body-dark-mode .o_dropdown_menu .dropdown-item * {
    color: inherit !important;
}

/* ============================================================
   DESKTOP NAVBAR
   ============================================================ */
html.dark-mode header,
body-dark-mode header,
html.dark-mode .navbar,
body-dark-mode .navbar,
html.dark-mode .navbar-light,
body-dark-mode .navbar-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html.dark-mode .navbar a,
body-dark-mode .navbar a,
html.dark-mode .navbar-nav .nav-link,
body-dark-mode .navbar-nav .nav-link {
    color: #e0e0e0 !important;
}

html.dark-mode .navbar-nav .nav-link:hover,
body-dark-mode .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

/* ============================================================
   MOBILE NAVBAR
   ============================================================ */
html.dark-mode .o_navbar_mobile,
body-dark-mode .o_navbar_mobile {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html.dark-mode .o_menu_toggle,
body-dark-mode .o_menu_toggle {
    color: #e0e0e0 !important;
    filter: invert(1) brightness(2);
}

html.dark-mode .o_menu_drawer,
body-dark-mode .o_menu_drawer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    backdrop-filter: none !important;
}

html.dark-mode .o_menu_sections,
body-dark-mode .o_menu_sections {
    background-color: #1e1e1e !important;
}

html.dark-mode .o_nav_entry,
body-dark-mode .o_nav_entry,
html.dark-mode .o_menu_item,
body-dark-mode .o_menu_item {
    color: #e0e0e0 !important;
}

html.dark-mode .o_nav_entry:hover,
body-dark-mode .o_nav_entry:hover,
html.dark-mode .o_menu_item:hover,
body-dark-mode .o_menu_item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

html.dark-mode .o_nav_entry.active,
body-dark-mode .o_nav_entry.active,
html.dark-mode .o_menu_item.active,
body-dark-mode .o_menu_item.active {
    background-color: #4a90e2 !important;
    color: #ffffff !important;
}

/* ============================================================
   DARK MODE MENU LINK
   ============================================================ */
a[href="#darkmode"] {
    display: inline-block !important;
    padding: .5rem 1rem !important;
    color: inherit !important;
}

html.dark-mode a[href="#darkmode"]:hover,
body-dark-mode a[href="#darkmode"]:hover {
    color: #ffffff !important;
}

/* ============================================================
   HAMBURGER ICON
   ============================================================ */
html.dark-mode .navbar-toggler-icon,
body-dark-mode .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* ============================================================
   FOOTER
   ============================================================ */
html.dark-mode footer,
body-dark-mode footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* ============================================
   FINAL OVERRIDE — FIX WHITE DROPDOWN BACKGROUND
   ============================================ */

html.dark-mode:root,
body.dark-mode:root {
    --dropdown-bg: #000000 !important;
    --dropdown-link-color: #e0e0e0 !important;
    --dropdown-link-hover-bg: #2a2a2a !important;
    --dropdown-link-hover-color: #ffffff !important;
}
html.dark-mode .dropdown-menu,
body.dark-mode .dropdown-menu,
html.dark-mode .o_dropdown_menu,
body.dark-mode .o_dropdown_menu {
    background-color: #000000 !important;
}
/* ============================================
   PORTAL CHATTER — JS-INJECTED STYLE OVERRIDE
   ============================================ */

html.dark-mode .o-mail-Chatter-top,
html.dark-mode .o-portal-Chatter .o-mail-Chatter-top,
html.dark-mode .o-mail-Chatter-top.o-mail-Chatter-top,
html.dark-mode .o-mail-Chatter-top[class],
html.dark-mode .o-mail-Chatter-top:not([style]) {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* ============================================================
   BOOTSTRAP 5.3 POPOVER + TOOLTIP DARK-MODE FIX
   ============================================================ */

html.dark-mode,
body.dark-mode {
    /* Core BS popover tokens */
    --bs-popover-bg: #1e1e1e !important;
    --bs-popover-border-color: #3a3a3a !important;
    --bs-popover-header-bg: #2a2a2a !important;
    --bs-popover-header-color: #e0e0e0 !important;
    --bs-popover-body-color: #e0e0e0 !important;
    --bs-popover-box-shadow: 0px 4px 16px rgba(0,0,0,0.45) !important;

    /* Tooltip tokens */
    --bs-tooltip-bg: #2a2a2a !important;
    --bs-tooltip-color: #e0e0e0 !important;
}

/* Hard element overrides (Bootstrap injects these dynamically) */
html.dark-mode .popover,
body.dark-mode .popover {
    background-color: var(--bs-popover-bg) !important;
    border-color: var(--bs-popover-border-color) !important;
    color: var(--bs-popover-body-color) !important;
}

html.dark-mode .popover-header,
body.dark-mode .popover-header {
    background-color: var(--bs-popover-header-bg) !important;
    color: var(--bs-popover-header-color) !important;
    border-bottom-color: var(--bs-popover-border-color) !important;
}

html.dark-mode .popover-body,
body.dark-mode .popover-body {
    color: var(--bs-popover-body-color) !important;
}

/* Tooltip hard override */
html.dark-mode .tooltip-inner,
body.dark-mode .tooltip-inner {
    background-color: var(--bs-tooltip-bg) !important;
    color: var(--bs-tooltip-color) !important;
}

/* ============================================================
   DARK MODE ALERT FIX — CORRECT COLORS
   ============================================================ */

html.dark-mode .alert,
body.dark-mode .alert {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* Danger */
html.dark-mode .alert-danger,
body.dark-mode .alert-danger {
    --alert-bg: #2a1a1a !important;
    --alert-border-color: #5a2a2a !important;
    --alert-color: #ffb3b3 !important;
}

/* Warning */
html.dark-mode .alert-warning,
body.dark-mode .alert-warning {
    --alert-bg: #3a3200 !important;
    --alert-border-color: #5a4a00 !important;
    --alert-color: #ffe9a6 !important;
}

/* Success */
html.dark-mode .alert-success,
body.dark-mode .alert-success {
    --alert-bg: #0f2a1a !important;
    --alert-border-color: #1f4a2a !important;
    --alert-color: #b3ffd1 !important;
}

/* Info */
html.dark-mode .alert-info,
body.dark-mode .alert-info {
    --alert-bg: #0a2a33 !important;
    --alert-border-color: #0f3a4a !important;
    --alert-color: #b3ecff !important;
}
html.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o,
body.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o {
    color: #6A3DFF !important;
}
/* ============================================================
   DARK MODE QUIZ LIST-GROUP — HARD OVERRIDE
   ============================================================ */

/* Force background + text for quiz answer blocks */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group,
body.dark-mode .o_wslides_js_lesson_quiz_question .list-group {
    background-color: #232323 !important;
}
/* Actual answer rows */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item,
body-dark-mode .o_wslides_js_lesson_quiz_question .list-group-item {
    background-color: #121212 !important;
    color: #f5f5f5 !important;
    border-color: #1e1e1e !important;
}



</style>
