/* --- Dark Mode Base Styles --- */
body.dark-mode {
    background-color: #121212; /* Or your preferred dark bg */
    color: #e0e0e0;           /* Or your preferred light text */
}

/* Example: Adjust links in dark mode */
body.dark-mode a {
    color: #58a6ff; /* Light blue for links */
}
body.dark-mode a:hover {
    color: #80baff;
}

/* --- Dark Mode Toggle Button Icon Visibility --- */
/* By default, show the sun (light mode icon) */
#darkModeToggle .bi-moon-stars-fill {
    display: none;
}
#darkModeToggle .bi-sun-fill {
    display: inline-block;
}

/* When body has .dark-mode class, show the moon and hide the sun */
body.dark-mode #darkModeToggle .bi-moon-stars-fill {
    display: inline-block;
}
body.dark-mode #darkModeToggle .bi-sun-fill {
    display: none;
}

/* Add other general dark mode styles for navbar, cards, text, etc. here */
body.dark-mode .navbar.bg-dark { /* Example if navbar is dark */
    /* background-color: #1f1f1f !important; */ /* Usually no change needed if already dark */
}
body.dark-mode .navbar.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75); /* Adjust link color if needed */
}
body.dark-mode .navbar.navbar-dark .navbar-nav .nav-link.active,
body.dark-mode .navbar.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}
body.dark-mode .navbar.navbar-dark .navbar-brand {
    color: #fff;
}
/* ... etc for all other components ... */