/* Form switch label */
.form-check-label {
    /* Always white regardless of theme */
    color: #fff;
    margin-left: 0.5rem;
}

/* Weather dropdown styling */
#weatherDropdown {
    background-color: #e9ecef;
    color: #212529;
    border-color: #dee2e6;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}

#weatherDropdown:hover {
    background-color: #dee2e6;
    color: #212529;
}

.dark-theme #weatherDropdown {
    background-color: #495057;
    color: #fff;
    border-color: #6c757d;
}

.dark-theme #weatherDropdown:hover {
    background-color: #6c757d;
    color: #fff;
}

.dropdown-menu {
    max-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item-text {
    font-size: 0.9rem;
    white-space: normal;
}

.dropdown-menu .dropdown-item-text:first-child {
    font-weight: bold;
}

/* Specific styling for the "Запомнить меня" checkbox label – green text */
.form-check-label[for="remember"] {
    color: #28a745 !important; /* Bootstrap success green */
}

/* Toggle switch styling */
/* Unchecked – medium gray track */
.navbar .form-check-input {
    background-color: #6c757d; /* gray */
    border-color: #6c757d;
    filter: none;
}

/* Checked – dark track for visibility on dark background */
/* Checked – visible dark gray track */
.navbar .form-check-input:checked {
    background-color: #495057; /* Bootstrap dark gray */
    border-color: #495057;
    box-shadow: none;
    background-image: none;
}

/* Thumb (the circle) – always white */
.navbar .form-check-input::before {
    background-color: #fff !important;
}

/* Ensure thumb stays white when checked */
.navbar .form-check-input:checked::before {
    background-color: #fff !important;
}

/* Dark theme overrides – keep same colors (unchecked stays gray, checked stays dark) */
.dark-theme .navbar .form-check-input {
    background-color: #6c757d;
    border-color: #6c757d;
}
/* Dark theme overrides – same visible dark gray */
.dark-theme .navbar .form-check-input:checked {
    background-color: #495057;
    border-color: #495057;
}

/* Add spacing between nav items and the theme switch */
.navbar .form-check {
    margin-left: 1rem;
}

/* Ensure the flex container with the theme switch does not shrink */
.navbar .d-flex {
    flex-shrink: 0;
    margin-left: auto;
}

/* Space out navigation links to avoid overlap with toggle */
.navbar .nav-link {
    margin-right: 0.5rem;
}

/* Space between nav items */
.navbar .nav-item {
    margin-right: 0.5rem;
}

/* Ensure the navigation list does not wrap and pushes the toggle to the far right */
.navbar .navbar-nav {
    margin-right: auto; /* same as me-auto, guarantees left alignment */
    flex-wrap: nowrap;
}

/* Extra right margin for the last navigation item (Logout/Вход) to keep distance from the toggle */
.navbar .nav-item:last-child {
    margin-right: 1rem;
}

/* Make the mobile navbar toggler icon visible on dark backgrounds */
.navbar-toggler {
    border-color: #fff;
}
.navbar-toggler-icon {
    /* default icon is a dark SVG; invert colors for visibility */
    filter: invert(1);
}

/* Ensure the theme switch stays visible on mobile */
@media (max-width: 576px) {
    .navbar .form-check {
        margin-top: 0.5rem;
        margin-left: 0;
        /* make switch take full width and align right */
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
}

/* Additional layout tweaks: make the form-check container flex and right‑aligned */
.navbar .form-check {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}
/* Define CSS variables for light theme */
html {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    /* Original dark navbar */
    --navbar-bg: #343a40; /* dark gray (Bootstrap default) */
    --navbar-text: #fff;
    --link-color: #0d6efd;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Dark theme overrides */
html.dark-theme {
    --bg-color: #212529;
    --text-color: #f8f9fa;
    /* Original dark navbar for dark mode */
    --navbar-bg: #212529;
    --navbar-text: #fff;
    --link-color: #66b2ff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
}

/* Ensure caption text (Bootstrap .text-muted) is readable in dark mode */
.dark-theme .text-muted {
    color: #adb5bd !important;   /* более светлый серый на тёмном фоне */
}

/* Navbar styling uses variables */
.navbar {
    background-color: var(--navbar-bg) !important;
}
.navbar .navbar-brand, .navbar .nav-link {
    color: var(--navbar-text) !important;
    font-weight: bold;
}

/* Оранжевый цвет бренда */
.navbar .navbar-brand {
    color: orange !important;
}

/* Override brand color to orange */

/* Headings */
.container h1, .container h2 {
    margin-top: 20px;
    color: var(--text-color);
}

/* List items */
.list-group-item {
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Warning button */
.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px 0;
    color: var(--text-color);
    font-size: 0.9rem;
    background-color: var(--bg-color);
}

/* Links */
a {
    color: var(--link-color);
}

/* Rounded corners for news images */
.img-fluid.mb-2 {
    border-radius: 8px;
    overflow: hidden;
}