:root {
    /* light defaults (fall back to current site styling) */
    --dp-bg: #ffffff;
    --dp-text: #111111;
    --dp-muted: #666666;
    --dp-card: #f8f8f8;
    --dp-accent: #007bff;
    --dp-border: #e0e0e0;
}

/* Dark theme variables */
html.dark-mode {
    /* page / theme colors */
    --dp-bg: #1A1A1E;
    --dp-text: rgb(229, 231, 235);
    --dp-muted: #9aa6b2;
    --dp-card: #101317;
    --dp-input: #17181b; /* input background */
    --dp-accent: #4aa3ff;
    --dp-border: rgba(255,255,255,0.06);
    --dp-border-weak: rgba(255,255,255,0.03);
    --dp-placeholder: rgba(229,231,235,0.48);
    --dp-navbar: #222327; /* menu background requested */
    --dp-navbar-contrast: #121214; /* fallback for small menus */
}

/* Apply variables site wide */
html, body {
    background: var(--dp-bg) !important;
    color: var(--dp-text) !important;
}

    /* Navbar / menu - use requested lighter color */
    html.dark-mode .navbar,
    html.dark-mode .navbar .dropdown-menu {
        background-color: var(--dp-navbar) !important;
        border-color: var(--dp-border-weak) !important;
    }

        html.dark-mode .navbar .nav-link,
        html.dark-mode .navbar .navbar-brand,
        html.dark-mode .navbar .dropdown-item {
            color: var(--dp-text) !important;
        }

            /* avoid pure-white hover; use accent + subtle background */
            html.dark-mode .navbar .nav-link:hover,
            html.dark-mode .navbar .nav-link:focus {
                color: var(--dp-accent) !important;
                background: rgba(255,255,255,0.01) !important;
                text-decoration: none;
            }

    /* dropdown item hover */
    html.dark-mode .dropdown-menu .dropdown-item,
    html.dark-mode .dropdown-menu a.dropdown-item {
        color: var(--dp-text) !important;
        background-color: transparent !important;
    }

        html.dark-mode .dropdown-menu .dropdown-item:hover,
        html.dark-mode .dropdown-menu .dropdown-item:focus {
            color: var(--dp-accent) !important;
            background-color: rgba(255,255,255,0.02) !important;
        }

    /* Common containers */
    html.dark-mode .container,
    html.dark-mode .container-fluid,
    html.dark-mode .widget-content,
    html.dark-mode .tabcontent,
    html.dark-mode .panel,
    html.dark-mode .well,
    html.dark-mode .panel-body,
    html.dark-mode .card {
        background: var(--dp-card) !important;
        color: var(--dp-text) !important;
        border-color: var(--dp-border) !important;
    }

    /* Ensure card headers / panel headings don't stay white */
    html.dark-mode .panel-heading,
    html.dark-mode .card-header,
    html.dark-mode .modal-header {
        background: transparent !important;
        color: var(--dp-text) !important;
    }

    /* Form controls (inputs, selects, textareas) */
    html.dark-mode .form-control,
    html.dark-mode input[type="text"],
    html.dark-mode input[type="search"],
    html.dark-mode input[type="email"],
    html.dark-mode input[type="password"],
    html.dark-mode textarea,
    html.dark-mode select,
    html.dark-mode .custom-select {
        background: var(--dp-input) !important;
        color: var(--dp-text) !important;
        border: 1px solid var(--dp-border) !important;
        box-shadow: none !important;
    }

        /* Remove browser autofill yellow etc where possible */
        html.dark-mode input:-webkit-autofill,
        html.dark-mode input:-webkit-autofill:hover,
        html.dark-mode input:-webkit-autofill:focus,
        html.dark-mode textarea:-webkit-autofill,
        html.dark-mode textarea:-webkit-autofill:hover,
        html.dark-mode textarea:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--dp-text) !important;
            transition: background-color 5000s ease-in-out 0s !important;
        }

    /* Placeholder text */
    html.dark-mode ::-webkit-input-placeholder {
        color: var(--dp-placeholder) !important;
    }

    html.dark-mode :-ms-input-placeholder {
        color: var(--dp-placeholder) !important;
    }

    html.dark-mode ::placeholder {
        color: var(--dp-placeholder) !important;
    }

    /* Labels */
    html.dark-mode label,
    html.dark-mode .control-label,
    html.dark-mode .form-label {
        color: var(--dp-text) !important;
    }

    /* Buttons (general) */
    html.dark-mode .btn,
    html.dark-mode input[type="submit"].btn,
    html.dark-mode button.btn {
        background: rgba(255,255,255,0.02) !important;
        color: var(--dp-text) !important;
        border: 1px solid var(--dp-border) !important;
        box-shadow: none !important;
    }

    /* Primary / accent button */
    html.dark-mode .btn-primary,
    html.dark-mode input[type="submit"].btn-primary {
        background: var(--dp-accent) !important;
        color: #fff !important;
        border-color: rgba(0,0,0,0.15) !important;
    }

    /* Button hover states */
    html.dark-mode .btn:hover,
    html.dark-mode button.btn:hover,
    html.dark-mode input[type="submit"].btn:hover {
        background: rgba(255,255,255,0.04) !important;
        color: var(--dp-text) !important;
    }

    /* Avoid forcing white text on hover for simple .btn */
    html.dark-mode .btn:active,
    html.dark-mode .btn:focus {
        outline: none;
        box-shadow: none;
    }

    /* Pagination */
    html.dark-mode .pagination .page-link {
        background: transparent !important;
        color: var(--dp-text) !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
    }

    html.dark-mode .pagination .page-item.active .page-link,
    html.dark-mode .pagination .page-item.active > a.page-link {
        background: rgba(255,255,255,0.03) !important;
        color: var(--dp-accent) !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    html.dark-mode .pagination .page-link:hover {
        background: rgba(255,255,255,0.02) !important;
        color: var(--dp-accent) !important;
    }

    /* Tables */
    html.dark-mode table {
        color: var(--dp-text) !important;
        border-collapse: collapse;
    }

        html.dark-mode table th,
        html.dark-mode table td {
            border: 1px solid var(--dp-border-weak) !important;
            background: transparent !important;
            padding: 6px;
        }

    /* Tabs */
    html.dark-mode .nav-tabs,
    html.dark-mode .tab-control .nav-tabs {
        border-bottom: 1px solid rgba(255,255,255,0.04);
        background: transparent;
    }

        html.dark-mode .nav-tabs .nav-link,
        html.dark-mode .tab-control .nav-tabs .nav-link {
            background: transparent !important;
            color: var(--dp-text) !important;
            border: 1px solid transparent !important;
            border-radius: 4px 4px 0 0;
        }

            html.dark-mode .nav-tabs .nav-link.active,
            html.dark-mode .tab-control .nav-tabs .nav-link.active {
                background: var(--dp-card) !important;
                color: var(--dp-text) !important;
                border-color: var(--dp-border) !important;
                border-bottom-color: var(--dp-card) !important;
            }

            html.dark-mode .nav-tabs .nav-link:hover,
            html.dark-mode .tab-control .nav-tabs .nav-link:hover {
                color: var(--dp-accent) !important;
                background: rgba(255,255,255,0.02) !important;
            }

    /* Muted text */
    html.dark-mode .text-muted,
    html.dark-mode .muted,
    html.dark-mode .small {
        color: var(--dp-muted) !important;
    }

    /* Footer */
    html.dark-mode .footer {
        background: transparent;
        color: var(--dp-muted) !important;
        border-top: 1px solid var(--dp-border-weak);
    }

    /* Utility: invert images that should be flipped on dark mode (apply class .invert-on-dark to assets) */
    html.dark-mode img.invert-on-dark {
        filter: invert(1) hue-rotate(180deg);
    }

    /* Color swatches (.cNN) used across site: reduce brightness edges for dark mode */
    html.dark-mode [class^="c"] {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    }

    /* Increase specificity for any remaining white backgrounds */
    html.dark-mode .panel,
    html.dark-mode .panel .panel-body,
    html.dark-mode .card,
    html.dark-mode .card .card-body,
    html.dark-mode .modal-content {
        background: var(--dp-card) !important;
        color: var(--dp-text) !important;
        border-color: var(--dp-border) !important;
    }

    /* Keep inputs and selects readable inside input groups */
    html.dark-mode .input-group .form-control,
    html.dark-mode .input-group .custom-select {
        background: var(--dp-input) !important;
        color: var(--dp-text) !important;
    }

/* Add more component-specific overrides below as needed */