/* ===== NAVBAR STYLES ===== */

/* Light mode navbar background */
.main-nav {
    background: #e3f2fd;
}

/* Dark mode navbar background and border */
html[data-theme="dark"] .main-nav {
    background: #263238;
    border-color: #81c784;
}

/* Navbar links */
.nav-link {
    font-weight: 600;
    color: #1e88e5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #1565c0;
}

/* Navbar links in dark mode */
html[data-theme="dark"] .nav-link {
    color: #bbdefb;
}

html[data-theme="dark"] .nav-link:hover {
    color: #81c784;
}

/* Improve visibility of hamburger icon in dark mode */
html[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* Brand logo font */
.logo {
    font-family: 'Segoe UI', sans-serif;
}


/* ===== THEME TOGGLE BUTTON ===== */

#theme-toggle {
    border-radius: 50px;
    font-weight: 600;
    transition: background 0.3s, color 0.3s;
}

/* Theme toggle button in dark mode */
html[data-theme="dark"] #theme-toggle {
    background: #263238;
    color: #bbdefb;
    border-color: #81c784;
}

html[data-theme="dark"] #theme-toggle:hover {
    background: #81c784;
    color: #263238;
}

/* ===== LOGIN BUTTON STYLES ===== */

/* Login button in light mode */
.btn-outline-primary {
    border-color: #1e88e5;
    color: #1e88e5;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #1e88e5;
    border-color: #1e88e5;
    color: white;
}

/* Login button in dark mode */
html[data-theme="dark"] .btn-outline-primary {
    background: #263238;
    color: #81c784;
    border-color: #81c784;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background: #81c784;
    color: #263238;
    border-color: #81c784;
}


/* ===== DATE LABEL STYLING ===== */

.date-label {
    color: #607d8b;
}

html[data-theme="dark"] .date-label {
    color: #b0bec5 !important;
}


/* ===== FOOTER STYLES ===== */

.main-footer {
    background-color: #eceff1;
    color: #546e7a;
}

html[data-theme="dark"] .main-footer {
    background-color: #1c1f22;
    color: #90a4ae;
}

/* Remove margin between stacked paragraphs */
.footer-content p {
    margin: 0;
}

/* Make muted footer text readable in dark mode */
html[data-theme="dark"] .footer-content .text-muted {
    color: #b0bec5 !important;
}