body.dark-theme {
    /* background: #181818; */
    background-color: var(--theme-background-color-dark);
    color: #ffffff;
}

body.dark-theme .modal {
    background: var(--modal-bg-dark, rgba(0, 0, 0, 0.3));
}

body.dark-theme .modal-content {
    background: var(--modal-content-bg-dark, #fff);
}

.dark-theme .topnav {
    /* background-color: #222 !important; */
    background-color: var(--nav-bg-dark) !important;
    color: var(--nav-text-dark);
    box-shadow: var(--nav-shadow-dark);
}

.dark-theme a,
.dark-theme .topnav a {
    color: #f1f1f1;
    /* color: var(--accent-green) !important; */
}

.dark-theme .bottomNav {
    background-color: var(--nav-bg-dark) !important;
    color: var(--nav-text-dark);
    box-shadow: var(--nav-shadow-dark);
}

.dark-theme .header1,
.dark-theme .header2 {
    color: #f1f1f1;
}

/* .dark-theme h3 {
    color: var(--accent-green) !important;
} */

.dark-theme .profile-pic {
    border: 2px solid #f1f1f1;
}

.dark-theme .topNav {
    background: var(--nav-bg-dark);
    color: var(--nav-text-dark);
    box-shadow: var(--nav-shadow-dark);
}

.dark-theme .card {
    background: var(--card-bg-dark);
    /* color: var(--card-text-dark); */
    box-shadow: var(--card-shadow-dark);
}

.dark-theme .card:hover {
    box-shadow: var(--card-shadow-dark-hover);
}

/* Toggle button background based on current theme */
/*body.dark-theme .theme-toggle-btn {
    background: #222;
    color: #f1f1f1;
}

body:not(.dark-theme) .theme-toggle-btn {
    background: #f8f9fa;
    color: #222;
} */

/* Flexbox wrapper for theme toggle button */
.theme-toggle-flex,
.download-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
}

/* Prevent white flash in dark mode before JS loads */
.dark-theme-preload,
.dark-theme-preload body {
    background: #181818 !important;
    color: #f1f1f1 !important;
}