/* --- Dark Mode Override --- */
body.dark-mode {
    /* 1. Reassign Colors (The Variable Swap) */
    
    /* Background: Peach -> Dark Blue */
    --bg-main: #090335; 
    --bg-secondary: #15094c;
    /* Content Background: Cream -> Purple */
    --bg-light: #6149a7; 
    --bg-modal: #4d3a8a;
    --bg-hover: #3d2d6a;

    /* Text/Borders: Dark Blue -> Cream */
    --text-primary: #fbf6cf;
    --text-secondary: #a3a3a3;
    --text-white: #fbf6cf;
    --border-primary: #090335;

    /* Links/Buttons: Pink -> Gold */
    --btn-primary: #ffc965;
    --btn-primary-hover: #e6b55b;

    --header-bg: #ffc965;

}

body.dark-mode,
body.dark-mode * {
    scrollbar-color: var(--btn-primary) var(--bg-modal);
    scrollbar-width: thin;
}

/* 2. Specific Exceptions (Where variables aren't enough) */

/* The Navbar needs to stay Dark Blue, even though we changed the variable for text */
body.dark-mode .brand,
body.dark-mode .navbar,
body.dark-mode .footer {
    background-color: #090335;
}

/* Respect dark-mode text color - buttons and headers need dark text on light backgrounds */
body.dark-mode .btn,
body.dark-mode .server-table th,
body.dark-mode div.modal-header * {
    color: #090335 !important;
}

/* All form inputs - dark text on cream background */
body.dark-mode .form-input,
body.dark-mode input[type="email"],
body.dark-mode select,
body.dark-mode .ram-input,
body.dark-mode .edit-text-input {
    color: #090335 !important;
}

/* Navbar items need to inherit the new text color (Cream) */
body.dark-mode .navbar a,
body.dark-mode .navbar button {
    background-color: #090335;
    color: var(--text-primary);
}

body.dark-mode .navbar a:hover,
body.dark-mode .navbar button:hover {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

/* Button active state shadows */
body.dark-mode .btn:active { 
    transform: translateY(0.2em); 
    box-shadow: 
        -0.2em 0 0 0 var(--bg-main), 
        0.2em 0 0 0 var(--bg-main), 
        0 -0.2em 0 0 var(--bg-main), 
        0 0.2em 0 0 var(--bg-main); 
}

/* 3. Image Swap */
body.dark-mode .content::before,
body.dark-mode .content::after {
    background-image: url('../images/dark/pillartop.png'), url('../images/dark/pillar.png');
}