/* Dark mode styles */
body.dark-mode {
    --primary-color: #8ABF83; /* Light Pickle Green */
    --primary-color-dark: #6E9C69;
    --secondary-color: #547851;
    --background-color: #212121; /* Dark Gray */
    --surface-color: #333333;
    --on-primary-color: #212121;
    --on-surface-color: #F5F5F5; /* Off White Text */
    --on-surface-variant-color: #BDBDBD;
    --border-color: #616161;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode select {
    background-color: var(--surface-color);
    color: var(--on-surface-color);
    border-color: var(--border-color);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(138, 191, 131, 0.3);
}

body.dark-mode .table th {
    background-color: #202124;
}

body.dark-mode .dropdown-content a:hover {
    background-color: var(--background-color);
}

body.dark-mode .alert-danger {
    color: #f8d7da;
    background-color: #721c24;
    border-color: #f5c6cb;
}

body.dark-mode .alert-success {
    color: #d4edda;
    background-color: #155724;
    border-color: #c3e6cb;
}

body.dark-mode .clickable-row:hover {
    background-color: var(--background-color);
}

body.dark-mode .loader {
    border: 5px solid var(--surface-color);
    border-top: 5px solid var(--primary-color);
}

body.dark-mode a {
    color: #8ab4f8; /* A light, high-contrast blue */
}

body.dark-mode .btn {
    color: var(--on-primary-color);
}

body.dark-mode .dropbtn {
    background-color: var(--surface-color);
}

body.dark-mode .hamburger-menu {
    background-color: transparent;
}

body.dark-mode .header {
    background-color: var(--primary-color-dark);
    border-bottom: 1px solid var(--primary-color);
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-menu a {
    color: var(--on-surface-color);
}