:root {
    --primary-color: #0A84FF;
    --secondary-color: #30D158;
    --background-color: #1C1C1E;
    --card-background: #2C2C2E;
    --text-color: #FFFFFF;
    --secondary-text-color: #8E8E93;
    --border-color: #38383A;
    --input-background: #1C1C1E;
}

/* Override input text color for dark mode */
input[type="text"], 
input[type="datetime-local"], 
input[type="number"], 
textarea, 
select {
    color: var(--text-color) !important;
    background-color: var(--input-background);
    -webkit-text-fill-color: var(--text-color);
}

/* Ensure placeholder text is visible */
input::placeholder,
textarea::placeholder {
    color: var(--secondary-text-color);
}

/* Adjust other elements if needed */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.card {
    background-color: var(--card-background);
}

/* Override autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color);
    -webkit-box-shadow: 0 0 0px 1000px var(--input-background) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Add any other specific dark mode adjustments here */

body.dark-mode {
    --primary-color: #0A84FF;
    --secondary-color: #30D158;
    --background-color: #1C1C1E;
    --card-background: #2C2C2E;
    --text-color: #FFFFFF;
    --secondary-text-color: #8E8E93;
    --border-color: #38383A;
    --input-background: #1C1C1E;
}

body.dark-mode input[type="text"], 
body.dark-mode input[type="datetime-local"], 
body.dark-mode input[type="number"], 
body.dark-mode textarea, 
body.dark-mode select {
    color: var(--text-color) !important;
    background-color: var(--input-background);
    -webkit-text-fill-color: var(--text-color);
}

/* ... rest of your dark mode styles ... */