body.dark-mode {
    --light-bg: #1e293b;
    --dark-text: #f8fafc;
    --primary-color: #3b82f6;
    --secondary-color: #94a3b8;
    --card-bg: #334155;
    --card-header-bg: #475569;
    --border-color: #475569;
}

.dark-mode .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .card-header {
    background: linear-gradient(135deg, var(--card-header-bg) 0%, #334155 100%);
    border-bottom-color: var(--border-color);
}

.dark-mode .form-control {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--dark-text);
}

.dark-mode .form-control:focus {
    border-color: var(--primary-color);
    background-color: var(--card-bg);
    color: var(--dark-text);
}

.dark-mode .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .dropdown-menu {
    background-color: var(--card-bg);
}

.dark-mode .dropdown-item:hover {
    background-color: #475569;
}

/* Dark mode for tables */
.dark-mode .table {
    color: var(--dark-text);
    --bs-table-color: var(--dark-text);
    --bs-table-bg: var(--card-bg);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: #3b4a5b; /* Slightly different background for striped rows */
    --bs-table-striped-color: var(--dark-text);
    --bs-table-active-bg: #4f6075;
    --bs-table-active-color: var(--dark-text);
    --bs-table-hover-color: var(--dark-text);
    --bs-table-hover-bg: #4f6075;
}

.dark-mode .table thead {
    background-color: var(--card-header-bg);
}

.dark-mode .table th,
.dark-mode .table td {
    border-color: var(--border-color);
}

.dark-mode a {
    color: #ffffff;
}

.dark-mode a:hover {
    color: #dcdcdc;
}

.dark-mode p {
    color: var(--dark-text);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--dark-text);
}

.dark-mode select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--dark-text);
}

.dark-mode option {
    background-color: var(--card-bg);
    color: var(--dark-text);
}

.dark-mode label {
    color: var(--dark-text);
}

.dark-mode .table td a {
    color: var(--dark-text);
}

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode textarea {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: #ffffff;
    
}