body {
    font-family: 'Onest', sans-serif !important;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ===== DARK MODE LOGIN ===== */
body.dark-mode {
    background-color: #1D1D1F !important;
    color: #e0e0e0 !important;
}

body.dark-mode .main-wrapper,
body.dark-mode .account-content {
    background-color: #1D1D1F !important;
}

body.dark-mode .login-content {
    background-color: #2C2C2E !important;
}

body.dark-mode .login-userheading h3 {
    color: #f0f0f0 !important;
}

body.dark-mode .login-userheading h4 {
    color: #a0a0a0 !important;
}

body.dark-mode .form-login label {
    color: #d1d1d6 !important;
}

body.dark-mode .form-login input[type="text"],
body.dark-mode .form-login input[type="password"],
body.dark-mode .pass-input {
    background: #3a3a3c !important;
    border: 1px solid #4a4a4c !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-login input::placeholder,
body.dark-mode .pass-input::placeholder {
    color: #888 !important;
}

body.dark-mode .form-login input:focus,
body.dark-mode .pass-input:focus {
    border-color: #ff9f43 !important;
    outline: none;
    box-shadow: none;
}

body.dark-mode .toggle-password {
    color: #aaa !important;
}

body.dark-mode .alert-danger {
    background-color: #3b1f1f !important;
    border-color: #7a2e2e !important;
    color: #f5a0a0 !important;
}

body.dark-mode .alert-success {
    background-color: #1a3b2a !important;
    border-color: #2e7a4e !important;
    color: #a0f5c0 !important;
}

/* ===== FIX AUTOFILL DARK MODE ===== */
body.dark-mode .form-login input:-webkit-autofill,
body.dark-mode .form-login input:-webkit-autofill:hover,
body.dark-mode .form-login input:-webkit-autofill:focus,
body.dark-mode .form-login input:-webkit-autofill:active,
body.dark-mode .pass-input:-webkit-autofill,
body.dark-mode .pass-input:-webkit-autofill:hover,
body.dark-mode .pass-input:-webkit-autofill:focus,
body.dark-mode .pass-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #3a3a3c inset !important;
    box-shadow: 0 0 0 1000px #3a3a3c inset !important;
    -webkit-text-fill-color: #e0e0e0 !important;
    caret-color: #e0e0e0 !important;
    border: 1px solid #4a4a4c !important;
    transition: background-color 5000s ease-in-out 0s;
}