/* Dark Mode Variables Override */
html.dark {
    --colorWhite: #111111;
    --colorBlack: #ffffff;
    --paraColor: #b0b0b0;
    --boxShadow: 0px 6px 60px 5px rgba(255, 255, 255, 0.03);
    /* Keep primary color but maybe adjust brightness if needed */
}

/* Global Dark Mode Styles */
html.dark body {
    background-color: var(--colorWhite);
    color: var(--paraColor);
}

/* Specific Component Overrides */
html.dark .main_menu {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

html.dark .wsus__droap_menu {
    background-color: #222;
    border-color: #333;
}

html.dark .wsus__droap_menu li a {
    color: #ddd;
    border-bottom-color: #333;
}

html.dark .wsus__droap_menu li a:hover,
html.dark .wsus__droap_menu li a.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

html.dark input, 
html.dark textarea {
    background-color: #222;
    border-color: #444;
    color: #fff;
}

html.dark .user_droap_menu {
    background-color: #222;
    border-color: #333;
}

html.dark .user_droap_menu li a {
    color: #ddd;
    border-bottom-color: #333;
}

html.dark .user_droap_menu li a:hover {
    background-color: #333;
    color: var(--colorPrimary);
}

html.dark .user_droap_menu li h2 {
    color: #fff;
}

html.dark .wsus__topbar {
    /* Keep gradient or darken it? existing is consistent. */
}

html.dark .wsus__footer_content p,
html.dark .footer_counter p,
html.dark .wsus__footer_copyright p {
    color: #bbb;
}

html.dark .wsus__footer_content h4 {
    color: #fff;
}

html.dark .common_btn {
    color: #fff;
}

html.dark a.title:hover {
    color: var(--colorPrimary);
}

/* Ensure images don't get inverted or weird, but specific icons might need attention if they are black SVGs. 
   Assuming standard images for now. */