/* Dark Mode Overrides for Navbar Search - Professional Palette */

/* Dark Mode - Search Box */
.dark-mode .navbar-search-box {
    background: #1a1d20 !important;
    border-color: #374151 !important;
    opacity: 0.6 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset !important;
}

.dark-mode .navbar-search-box:focus-within {
    background: #1a1d20 !important;
    opacity: 1 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.dark-mode .navbar-search-input {
    color: #f3f4f6 !important;
}

.dark-mode .navbar-search-input::placeholder {
    color: #9ca3af !important;
}

.dark-mode .search-icon {
    color: #9ca3af !important;
}

.dark-mode .navbar-search-box:focus-within .search-icon {
    color: #3b82f6 !important;
}

.dark-mode .clear-btn {
    color: #9ca3af !important;
}

.dark-mode .clear-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark Mode - Results Panel with professional contrast */
.dark-mode .navbar-search-panel {
    background: #1a1d20 !important;
    border-color: #374151 !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .search-loading {
    color: #9ca3af !important;
}

.dark-mode .search-empty {
    color: #9ca3af !important;
}

.dark-mode .group-header {
    color: #9ca3af !important;
    font-weight: 600 !important;
}

/* Dark Mode - Result Items with contrasting hover (#2d3238) */
.dark-mode .result-item {
    background-color: transparent !important;
    border-color: transparent !important;
}

.dark-mode .result-item:hover {
    background-color: #2d3238 !important;
    border-color: #3f4654 !important;
    transform: translateX(2px) !important;
}

/* Dark Mode - Icon with professional blue */
.dark-mode .icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15)) !important;
    color: #60a5fa !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Dark Mode - Typography with strong hierarchy */
.dark-mode .title {
    color: #f9fafb !important;
    font-weight: 600 !important;
}

.dark-mode .subtitle {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.dark-mode .arrow {
    color: #6b7280 !important;
}

.dark-mode .result-item:hover .arrow {
    color: #60a5fa !important;
}

.dark-mode .show-more {
    color: #60a5fa !important;
    font-weight: 500 !important;
}

.dark-mode .show-more:hover {
    background-color: #2d3238 !important;
}

/* Dark Mode - Highlight with professional yellow */
.dark-mode .highlight {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25) inset !important;
}