/* Dark mode overrides for Words web app (Bootstrap 5.2.3 doesn't ship built-in dark mode). */

/* Divider between the regular nav items and the theme toggle menu item.
   Bootstrap's default .dropdown-divider opacity is very faint, so make it more obvious. */
.offcanvas-body .dropdown-divider {
    margin: 0.5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    opacity: 1;
}

body.dark-mode {
    background-color: #121212 !important;
    color: #e4e4e4;
}

body.dark-mode .card {
    background-color: #1e1e1e;
    color: #e4e4e4;
    border-color: #333;
}

body.dark-mode .architecture-section {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e4e4e4 !important;
}

body.dark-mode .navbar {
    background-color: transparent;
    color: #e4e4e4;
}

body.dark-mode .offcanvas {
    background-color: #1e1e1e;
    color: #e4e4e4;
}

body.dark-mode .offcanvas-title {
    color: #e4e4e4;
}

body.dark-mode .nav-link {
    color: #e4e4e4;
}

body.dark-mode .nav-link.active {
    color: #ffffff !important;
    font-weight: bold;
}

body.dark-mode .nav-link:hover {
    color: #ffffff;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2a2a2a;
    color: #e4e4e4;
    border-color: #444;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #2a2a2a;
    color: #e4e4e4;
}

body.dark-mode .form-control::placeholder {
    color: #888;
}

body.dark-mode .form-label,
body.dark-mode .text-muted {
    color: #b0b0b0 !important;
}

body.dark-mode .invalid-feedback {
    color: #ff6b6b;
}

body.dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #e4e4e4;
}

body.dark-mode .list-group-item {
    background-color: #1e1e1e;
    color: #e4e4e4;
    border-color: #333;
}

body.dark-mode hr {
    border-color: #333;
    opacity: 1;
}

/* Wordle-specific dark mode overrides */
body.dark-mode .wordle-cell.empty {
    background-color: #1e1e1e;
    color: #e4e4e4;
    border-color: #3a3a3c;
}

body.dark-mode .wordle-cell.active {
    border-color: #9a9a9a;
    box-shadow: 0 0 0 1px #9a9a9a;
}

body.dark-mode button.key {
    background-color: #565758 !important;
    color: #e4e4e4 !important;
}

body.dark-mode button.key:hover {
    background-color: #6b6c6d !important;
}

/* Navbar icon buttons (offcanvas menu) need to stay visible in dark mode */
body.dark-mode .navbar .btn {
    color: #e4e4e4;
}

body.dark-mode .dropdown-divider {
    border-top-color: rgba(228, 228, 228, 0.35);
}

body.dark-mode .navbar .btn:hover {
    color: #ffffff;
}

body.dark-mode .color-swatch {
    border-color: rgba(255, 255, 255, 0.35);
}