/* ===== SIMPLE BRUTE-FORCE DARK MODE ===== */
/* Everything black, text white, buttons blue bg + white text */

/* Force EVERYTHING to black background */
body.dark-mode,
body.dark-mode * {
    4background-color: #000000 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Explicitly force divs and other containers */
body.dark-mode,
body.dark-mode div,
body.dark-mode section,
body.dark-mode article,
body.dark-mode aside,
body.dark-mode header,
body.dark-mode footer,
body.dark-mode main,
body.dark-mode nav,
body.dark-mode ul,
body.dark-mode ol,
body.dark-mode li,
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    background-color: #000000 !important;
}

/* Preserve background images */
body.dark-mode *[style*="background-image"],
body.dark-mode .has-background-image,
body.dark-mode img,
body.dark-mode video,
body.dark-mode canvas,
body.dark-mode svg {
    background-color: transparent !important;
}

/* All buttons - blue background + white text */
body.dark-mode button,
body.dark-mode .btn,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"],
body.dark-mode input[type="reset"],
body.dark-mode [role="button"],
body.dark-mode a.button {
    background-color: var(--hb-primary) !important;
    color: #ffffff !important;
    border-color: var(--hb-primary) !important;
}

/* Button hover state */
body.dark-mode button:hover,
body.dark-mode .btn:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="reset"]:hover,
body.dark-mode [role="button"]:hover,
body.dark-mode a.button:hover {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
}

/* Keep links blue-ish but readable */
body.dark-mode a:not(.btn):not(.button) {
    color: #6ea8fe !important;
}

body.dark-mode a:not(.btn):not(.button):hover {
    color: #9ec5fe !important;
}

/* Input fields */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Input placeholders */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Focus states */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode button:focus {
    outline-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
}

/* Images, icons, media - don't touch their background */
body.dark-mode img,
body.dark-mode svg,
body.dark-mode video,
body.dark-mode canvas,
body.dark-mode iframe,
body.dark-mode picture,
body.dark-mode .icon,
body.dark-mode i[class*="fa"],
body.dark-mode i[class*="bi"] {
    background-color: transparent !important;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar {
    background: #000000 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Code blocks */
body.dark-mode code,
body.dark-mode pre {
    background-color: #1a1a1a !important;
    color: #e4e6eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Tables */
body.dark-mode table,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tr,
body.dark-mode th,
body.dark-mode td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Checkbox and radio inputs - special handling */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    background-color: #000000 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
    background-color: var(--hb-primary) !important;
}