.navbar {
background-color: #FFFFFF !important;
}

.navbar-collapse {
    background-color: #FFFFFF !important;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
     background-color: #FFFFFF !important;
}

.nav-link {
    color: #000000 !important;
}

.navbar-nav a {
    color: #000000 !important;
}

.nav-link:hover {
    color: #111111 !important;
}

.navbar-toggler svg {
    fill: #111111 !important;
}

.dropdown-item:active, .dropdown-item:hover {
  background-color: #FFFFFF !important;
  color: #111111 !important;
}

.dropdown-toggle::after {
      color: #111111 !important;
}

.offcanvas-title {
      color: #000000 !important;
}

/* ==========================================
   Dark Theme System
   ========================================== */

.dark-theme body {
    background-color: #121212 !important;
    color: #f3f4f6 !important;
}

.dark-theme a,
.dark-theme p,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme span,
.dark-theme small,
.dark-theme label,
.dark-theme strong,
.dark-theme td,
.dark-theme th,
.dark-theme li {
    color: #f3f4f6 !important;
}

.dark-theme a:hover {
    color: #3b82f6 !important;
}

.dark-theme svg {
    fill: #f3f4f6 !important;
}

/* Card & Backgrounds Override */
.dark-theme .bg-white,
.dark-theme .card,
.dark-theme .modal-content,
.dark-theme .dropdown-menu,
.dark-theme .navbar,
.dark-theme .navbar-collapse,
.dark-theme .offcanvas-collapse,
.dark-theme .shadow-sm,
.dark-theme .app-details,
.dark-theme .tags,
.dark-theme .breadcrumbs,
.dark-theme .reviews-list,
.dark-theme .footer-container,
.dark-theme footer {
    background-color: #1e1e1e !important;
    color: #f3f4f6 !important;
    border-color: #2d2d2d !important;
}

/* Offcanvas mobile menu overlay override */
.dark-theme .offcanvas-collapse {
    background-color: #1e1e1e !important;
}

.dark-theme .app-list .item,
.dark-theme .topic-list .item,
.dark-theme .news-list .item,
.dark-theme .category-list .item {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
}

/* Specific elements */
.dark-theme .nav-link,
.dark-theme .navbar-nav a {
    color: #f3f4f6 !important;
}

.dark-theme .nav-link:hover,
.dark-theme .navbar-nav a:hover {
    color: #3b82f6 !important;
}

.dark-theme .dropdown-item:active,
.dark-theme .dropdown-item:hover {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* Form Controls */
.dark-theme .form-control,
.dark-theme .form-select,
.dark-theme select,
.dark-theme input,
.dark-theme textarea {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

.dark-theme .form-text {
    color: #9ca3af !important;
}

.dark-theme .border,
.dark-theme .border-bottom,
.dark-theme .border-top,
.dark-theme .border-start,
.dark-theme .border-end {
    border-color: #2d2d2d !important;
}

.dark-theme .text-muted {
    color: #9ca3af !important;
}

.dark-theme hr,
.dark-theme .dropdown-divider {
    background-color: #2d2d2d !important;
    border-color: #2d2d2d !important;
    opacity: 0.2;
}

/* Rating / Votes */
.dark-theme .votes {
    color: #9ca3af !important;
}

/* Search Box Overlay */
.dark-theme .search-results {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
}

.dark-theme .search-results .item:hover {
    background-color: #2d2d2d !important;
}

/* Buttons */
.dark-theme .btn-link {
    color: #f3f4f6 !important;
}

/* Theme Toggle Button Styles */
#themeToggle {
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

#themeToggle:hover {
    transform: scale(1.1);
}

#themeToggle svg {
    width: 20px;
    height: 20px;
    transition: fill 0.2s;
    fill: #6b7280 !important;
}

.dark-theme #themeToggle svg {
    fill: #fbbf24 !important; /* Warm gold for sun */
}