/* ---------- Dark Mode ---------- */
:root {
    /* ------    0d1117 ----*/

    --bg-body: #0d1117;
    --bg-card: #0d1117;
    --bg-panel: #f7f8f7;
    --border-color: #e0e0e0;
    --text-primary: #212529;
    --text-muted: #6c757d;
}

body.dark-mode {
    /*/--bg-body: #121417;*/
    --bg-body: #1c1f24;
    --bg-card: #1c1f24;
    --bg-panel: #1c1f24;
    --border-color: #33383f;
    --text-primary: #e8e9ea;
    --text-muted: #a0a4a8;
    background-color: var(--bg-body);
    color: var(--text-primary);
    --bg-hdr: #303234;
}

    body.dark-mode .container-fluid,
    body.dark-mode .container {
        background-color: transparent;
    }

    body.dark-mode .btnClaimBadge {
        background-color: var(--bg-hdr);
        color:white;
    }

    body.dark-mode [style*="color: #656667"] {
        color: white !important;
    }

    /* Cards / boxes that use border+radius pattern (news, webinar, coaches, badges) */
    body.dark-mode .newsInfo,
    body.dark-mode .newsSqr,
    body.dark-mode .webinarBadgeSqr,
    body.dark-mode .pastSessionsPage {
        background-color: var(--bg-hdr);
        border-color: var(--border-color) !important;
    }

    body.dark-mode .pstSessionSqr {
        background-color: #404040;
        border-color: var(--border-color) !important;
    }

    
    body.dark-mode .accordion-item,
    body.dark-mode .accordion-header,
    body.dark-mode .darkMode,
    body.dark-mode .webinarSqr,
    body.dark-mode .clientSuccessSqr,
    body.dark-mode .loginSqr,
    body.dark-mode .col-sm-12[style*="border-radius"] {
        /*background-color: var(--bg-card);*/

        background-color: var(--bg-hdr) !important;
        border-color: var(--border-color) !important;
    }

    body.dark-mode .accordion-header,
    body.dark-mode .accordion-button
    {
        color: #00838d !important;
    }

    body.dark-mode .accSelected {
        background-color: #555;
        
    }


    body.dark-mode .loginTxt {
        color: #fff;
    }
    
    body.dark-mode .webinarPic
    {
        background-color: #303234;
        border-color: #303234;
    }

    body.dark-mode .navBarLogo {
        content: url("/V3/images/logo/mcdNavLogoDarkMode.png");
    }

    body.dark-mode .imgLogoMed {
        content: url("/images/MCDLogo_Med_web_DarkMode.png");
    }

    body.dark-mode .watch-webinar-btn,
    body.dark-mode .heroPill,
    body.dark-mode .profileTxt{
        color: white !important;
    }

    body.dark-mode .dvWebIcon,
    body.dark-mode .dvTopSquare,
    body.dark-mode .hdrSqr {
        border-color: var(--border-color) !important;
    }

    body.dark-mode .webinarIcons svg,
    body.dark-mode .webinarIcons svg path {
        fill: var(--text-primary) !important;
    }

    body.dark-mode .pastSessionsPage svg,
    body.dark-mode .pastSessionsPage svg path {
        fill: var(--text-primary) !important;
    }

    body.dark-mode .heroPill{
        color:black;
    }

        body.dark-mode .heroPill svg,
        body.dark-mode .heroPill svg path {
            fill: black !important;
        }


    body.dark-mode .hdrIcons svg,
    body.dark-mode .hdrIcons svg path{
        fill: var(--text-primary) !important;
    }

    body.dark-mode .hdrIcon {
        border-color: var(--bg-body) !important;
        background-color: var(--bg-body) !important;
    }

    body.dark-mode .expoText
    {
        color:white !important;
    }

    body.dark-mode .section1,
    body.dark-mode .section2,
    body.dark-mode .section3,
    body.dark-mode .section4,
    body.dark-mode .profileName {
        color: white !important;
    }

    body.dark-mode .newsPic {
        background-color: var(--bg-panel) !important;
    }
        /* Navbar itself — inline style="background-color:white" needs !important to beat */
        body.dark-mode nav#UCNavBar_nbMain,
        body.dark-mode .navbar {
            background-color: var(--bg-card) !important;
            border-bottom: 1px solid var(--border-color);
        }
        /* Nav links */
        body.dark-mode .nav-link {
            color: var(--text-primary) !important;
        }

    body.dark-mode .hdrtext,
    body.dark-mode .hdrTestimonial {
        color: black;
    }

            body.dark-mode .nav-link:hover,
            body.dark-mode .nav-link.activeX {
                color: #4dd0d9 !important;
            }
        /* Dropdown menus (Live Courses, Learning Libraries, Tools, Events, Your Account) */
        body.dark-mode .dropdown-menu {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }

        body.dark-mode .dropdown-item {
            color: var(--text-primary) !important;
        }

            body.dark-mode .dropdown-item:hover,
            body.dark-mode .dropdown-item:focus {
                background-color: rgba(0, 133, 141, 0.2) !important;
                color: var(--text-primary) !important;
            }
        /* "Help & Support" button inside the dropdown — .emptyBtn is hardcoded white/black */
        body.dark-mode .emptyBtn {
            background-color: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }
        /* Mobile menu borders + submenu backgrounds */
        body.dark-mode .mobileMenuBorders {
            border-top-color: var(--border-color) !important;
        }

        body.dark-mode .mobileSubMenu {
            background-color: var(--bg-panel) !important;
            border-top-color: var(--border-color) !important;
        }

        body.dark-mode .mobileProfileSubMenu,
        body.dark-mode .mobileProfileBorders {
            border-bottom-color: var(--border-color) !important;
        }

        body.dark-mode .showMobile {
            color: var(--text-primary) !important;
        }
        /* Hamburger toggler icon — Bootstrap draws it via an SVG background-image bound to a CSS var,
   so we just re-point that var to a light-colored line SVG instead of trying to recolor a raster icon */
        body.dark-mode .navbar-toggler-icon {
            --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 233, 234, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        body.dark-mode .navbar-toggler {
            border-color: var(--border-color) !important;
        }
        /* profileCircle already has dark bg (#333) + white text — looks fine as-is in both modes, no change needed */
        /* Bookmark card titles use inline color:black — override in dark mode */
        body.dark-mode .pstSessionSqr span[style*="color:black"],
        body.dark-mode .pstSessionSqr span[style*="color: black"] {
            color: var(--text-primary) !important;
        }
        /* Bookmark card teal course-type labels stay readable on dark bg */
        body.dark-mode .pstSessionSqr span[style*="color: #00838d"],
        body.dark-mode .pstSessionSqr span[style*="color:#00838d"] {
            color: #4dd0d9 !important;
        }
        /* Grey info panels (bookmarks, sessions) */
        body.dark-mode div[style*="background-color: #F7F7F7"],
        body.dark-mode div[style*="background-color:#F7F7F7"] {
            background-color: var(--bg-panel) !important;
            color: var(--text-primary);
        }
        /* Upcoming events header block */
        body.dark-mode div[style*="background-color: #f7f8f7"] {
            background-color: var(--bg-panel) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }

.nav-tabs .nav-link.active {
    background-color: var(--bg-hdr);
}

    body.dark-mode .cjslib-day-radios:checked + .cjslib-day {
        background-color: #333 !important;
        -webkit-box-shadow: inset 0 0 4px rgba(255, 255, 255, .21) !important;
        box-shadow: inset 0 0 4px rgba(255, 255, 255, .21) !important;
    }

    /* Outer border around the entire calendar */
    body.dark-mode .cjslib-calendar {
        border: 2px solid var(--border-color) !important;
        box-sizing: border-box;
    }

        /* Calendar header bars — inline-styled by JS, need !important to override */
        body.dark-mode .cjslib-month,
        body.dark-mode .cjslib-year,
        body.dark-mode .cjslib-labels {
            background-color: var(--bg-panel) !important;
            color: var(--text-primary) !important;
        }

            body.dark-mode .cjslib-month svg path,
            body.dark-mode .cjslib-year svg path {
                fill: var(--text-primary) !important;
            }
        /* Calendar grid + day cells */
        body.dark-mode .cjslib-days,
        body.dark-mode .cjslib-row,
        body.dark-mode .cjslib-day {
            background-color: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }
        /* The actual day number text — this was the missing piece */
        body.dark-mode .cjslib-day-num,
        body.dark-mode .cjslib-day-num-2digit {
            color: var(--text-primary) !important;
        }
        /* Diluted (prev/next month spillover) rows — currently a light gray bar */
        body.dark-mode .cjslib-day-diluted {
            background-color: var(--bg-body) !important;
        }

            body.dark-mode .cjslib-day-diluted .cjslib-day-num,
            body.dark-mode .cjslib-day-diluted .cjslib-day-num-2digit {
                color: var(--text-muted) !important;
                opacity: 0.5;
            }
        /* The event list card below the calendar (Organizer output) — currently white */
        body.dark-mode .cjslib-events,
        body.dark-mode .cjslib-rows,
        body.dark-mode .cjslib-list,
        body.dark-mode #organizerContainer {
            background-color: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

            body.dark-mode .cjslib-list li {
                background-color: var(--bg-hdr) !important;
                color: var(--text-primary) !important;
                border-color: var(--border-color) !important;
            }
            /* Day-of-week / day-number in the event list rows (THU / 20) */
            body.dark-mode .cjslib-list [style*="font-weight: bold"] {
                color: var(--text-primary) !important;
            }
            /* Course title (teal) stays teal-on-dark, fine as-is — no override needed */
            /* Webinar title + coach/time lines — no inline color, but parent bg was white so text needs help too */
            body.dark-mode .webinarTitle,
            body.dark-mode .cjslib-list span:not(.courseTitle) {
                color: var(--text-primary) !important;
            }
            /* Google/Outlook calendar-add icon links — inline color:black */
            body.dark-mode .cjslib-list a[style*="color:black"],
            body.dark-mode .cjslib-list a[style*="color: black"] {
                color: var(--text-primary) !important;
            }
        /* Links */
        body.dark-mode a {
            color: #4dd0d9;
        }
        /* Modal */
        body.dark-mode .modal-content {
            background-color: var(--bg-card);
            color: var(--text-primary);
        }
        /* Toggle button */
        .dark-mode-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: #00838d;
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.25);
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .dark-mode-toggle:hover {
                background-color: #00686f;
            }

            .dark-mode-toggle svg {
                width: 22px;
                height: 22px;
            }

.dark-mode .accordion-button::after,
.dark-mode .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}