/* ============================================================================
   THEME OVERRIDES — Navigation
   NavMenu sidebar and QuickActions top-bar theme overrides.
   Must be global (not scoped) to reach html-level theme classes in Blazor WASM.
   ============================================================================ */

/* ============================================================================
   QUICKACTIONS — Light Theme
   ============================================================================ */

.theme-light .quick-search-input {
    background-color: #F9FAFB !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
}

.theme-light .quick-search-input:focus {
    background-color: white !important;
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

.theme-light .quick-search-input::placeholder { color: #9CA3AF !important; }

.theme-light .quick-search-btn { color: #6B7280 !important; }

.theme-light .quick-search-btn:hover {
    background-color: #F3F4F6 !important;
    color: #4F46E5 !important;
}

.theme-light .quick-btn {
    background-color: white !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}

.theme-light .quick-btn:hover {
    background-color: #EEF2FF !important;
    border-color: #4F46E5 !important;
    color: #4338CA !important;
}

/* ============================================================================
   QUICKACTIONS — Dark Theme
   ============================================================================ */

.theme-dark .quick-search-input {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

.theme-dark .quick-search-input:focus {
    background-color: #374151 !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.theme-dark .quick-search-input::placeholder { color: #9CA3AF !important; }

.theme-dark .quick-search-btn { color: #D1D5DB !important; }

.theme-dark .quick-search-btn:hover {
    background-color: #374151 !important;
    color: #60A5FA !important;
}

.theme-dark .quick-btn {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #E5E7EB !important;
}

.theme-dark .quick-btn:hover {
    background-color: #374151 !important;
    border-color: #3B82F6 !important;
    color: #60A5FA !important;
}

/* ============================================================================
   QUICKACTIONS — Default Theme (OS preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .theme-default .quick-search-input {
        background-color: #1F2937 !important;
        border-color: #374151 !important;
        color: #F9FAFB !important;
    }

    .theme-default .quick-search-input:focus {
        background-color: #374151 !important;
        border-color: #3B82F6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    }

    .theme-default .quick-search-input::placeholder { color: #9CA3AF !important; }
    .theme-default .quick-search-btn               { color: #D1D5DB !important; }

    .theme-default .quick-search-btn:hover {
        background-color: #374151 !important;
        color: #60A5FA !important;
    }

    .theme-default .quick-btn {
        background-color: #1F2937 !important;
        border-color: #374151 !important;
        color: #E5E7EB !important;
    }

    .theme-default .quick-btn:hover {
        background-color: #374151 !important;
        border-color: #3B82F6 !important;
        color: #60A5FA !important;
    }
}

/* ============================================================================
   NAVMENU — Light Theme
   ============================================================================ */

.theme-light .sidebar {
    background: #F4F7FB !important;
    background-image: none !important;
}

.theme-light .top-row {
    background: #E0E7EF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.theme-light .navbar-brand {
    color: #1F2937 !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.theme-light .navbar-brand img       { mix-blend-mode: normal !important; }
.theme-light .nav-scrollable         { background: #F4F7FB !important; }

.theme-light .navbar-toggler {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .navbar-toggler:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.theme-light .hamburger-line         { background-color: #1F2937 !important; }
.theme-light .nav-section-title      { color: rgba(0, 0, 0, 0.6) !important; }

.theme-light .nav-section-title:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

.theme-light .nav-item a             { color: #4B5563 !important; }

.theme-light .nav-item a.active {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #4338CA !important;
    font-weight: 600;
}

.theme-light .nav-item a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1F2937 !important;
}

.theme-light .nav-link-button        { color: #4B5563 !important; }

.theme-light .nav-link-button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1F2937 !important;
}

.theme-light .mobile-profile-info    { background-color: rgba(0, 0, 0, 0.03) !important; }
.theme-light .mobile-profile-name    { color: #1F2937 !important; }
.theme-light .mobile-profile-email   { color: #6B7280 !important; }

.theme-light .mobile-profile-avatar-placeholder {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .mobile-profile-avatar  { border-color: rgba(0, 0, 0, 0.15) !important; }

.theme-light .nav-scrollable::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.05) !important; }
.theme-light .nav-scrollable::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.2) !important; }
.theme-light .nav-scrollable::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3) !important; }

.theme-light .mobile-footer-content,
.theme-light .desktop-footer-content {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.theme-light .mobile-footer-version,
.theme-light .mobile-footer-build,
.theme-light .desktop-footer-version,
.theme-light .desktop-footer-build   { color: #6B7280 !important; }

/* ============================================================================
   NAVMENU — Dark Theme
   ============================================================================ */

.theme-dark .sidebar {
    background: #111827 !important;
    background-image: none !important;
}

.theme-dark .top-row {
    background: #1F2937 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .navbar-brand {
    color: white !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.theme-dark .navbar-brand img        { mix-blend-mode: normal !important; }
.theme-dark .nav-scrollable          { background: #111827 !important; }

.theme-dark .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .nav-section-title       { color: rgba(255, 255, 255, 0.7) !important; }

.theme-dark .nav-section-title:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.theme-dark .nav-item a              { color: rgba(255, 255, 255, 0.85) !important; }

.theme-dark .nav-item a.active {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
    font-weight: 600;
}

.theme-dark .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.theme-dark .nav-link-button         { color: rgba(255, 255, 255, 0.85) !important; }

.theme-dark .nav-link-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.theme-dark .mobile-profile-info     { background-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .mobile-profile-name     { color: white !important; }
.theme-dark .mobile-profile-email    { color: rgba(255, 255, 255, 0.6) !important; }

.theme-dark .mobile-profile-avatar-placeholder {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .mobile-profile-avatar   { border-color: rgba(255, 255, 255, 0.25) !important; }

.theme-dark .nav-scrollable::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.2) !important; }
.theme-dark .nav-scrollable::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.15) !important; }
.theme-dark .nav-scrollable::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25) !important; }

.theme-dark .mobile-footer-content,
.theme-dark .desktop-footer-content {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .mobile-footer-version,
.theme-dark .mobile-footer-build,
.theme-dark .desktop-footer-version,
.theme-dark .desktop-footer-build    { color: rgba(255, 255, 255, 0.8) !important; }

@media (min-width: 641px) and (max-width: 1199px) {
    .theme-dark .nav-section:not(:last-child)::after { background: rgba(255, 255, 255, 0.15) !important; }
    .theme-dark .nav-item a::after  { background-color: var(--sf-neutral-700) !important; color: white !important; }
    .theme-dark .nav-item a::before { border-color: transparent var(--sf-neutral-700) transparent transparent !important; }
}

/* ============================================================================
   NAVMENU — Default Theme (OS dark preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .theme-default .sidebar {
        background: #111827 !important;
        background-image: none !important;
    }

    .theme-default .top-row {
        background: #1F2937 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .theme-default .navbar-brand {
        background-color: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .theme-default .navbar-brand img   { mix-blend-mode: normal !important; }
    .theme-default .nav-scrollable     { background: #111827 !important; }

    .theme-default .navbar-toggler {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .theme-default .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .theme-default .nav-section-title  { color: rgba(255, 255, 255, 0.7) !important; }

    .theme-default .nav-section-title:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .theme-default .nav-item a         { color: rgba(255, 255, 255, 0.85) !important; }

    .theme-default .nav-item a.active {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #60A5FA !important;
        font-weight: 600;
    }

    .theme-default .nav-item a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    .theme-default .nav-link-button    { color: rgba(255, 255, 255, 0.85) !important; }

    .theme-default .nav-link-button:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    .theme-default .mobile-profile-info  { background-color: rgba(255, 255, 255, 0.08) !important; }
    .theme-default .mobile-profile-name  { color: white !important; }
    .theme-default .mobile-profile-email { color: rgba(255, 255, 255, 0.6) !important; }

    .theme-default .mobile-profile-avatar-placeholder {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .theme-default .mobile-profile-avatar { border-color: rgba(255, 255, 255, 0.25) !important; }

    .theme-default .nav-scrollable::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.2) !important; }
    .theme-default .nav-scrollable::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.15) !important; }
    .theme-default .nav-scrollable::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25) !important; }

    .theme-default .mobile-footer-content,
    .theme-default .desktop-footer-content {
        background-color: rgba(0, 0, 0, 0.3) !important;
        border-top-color: rgba(255, 255, 255, 0.15) !important;
    }

    .theme-default .mobile-footer-version,
    .theme-default .mobile-footer-build,
    .theme-default .desktop-footer-version,
    .theme-default .desktop-footer-build { color: rgba(255, 255, 255, 0.8) !important; }

    @media (min-width: 641px) and (max-width: 1199px) {
        .theme-default .nav-section:not(:last-child)::after { background: rgba(255, 255, 255, 0.15) !important; }
        .theme-default .nav-item a::after  { background-color: var(--sf-neutral-700) !important; color: white !important; }
        .theme-default .nav-item a::before { border-color: transparent var(--sf-neutral-700) transparent transparent !important; }
    }
}

/* ============================================================================
   NAVMENU — Default Theme (OS light preference)
   Mirrors .theme-light so device-light + theme-default matches explicit light.
   ============================================================================ */

@media (prefers-color-scheme: light) {
    .theme-default .sidebar {
        background: #F4F7FB !important;
        background-image: none !important;
    }

    .theme-default .top-row {
        background: #E0E7EF !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    }

    .theme-default .navbar-brand {
        color: #1F2937 !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .theme-default .navbar-brand img   { mix-blend-mode: normal !important; }
    .theme-default .nav-scrollable     { background: #F4F7FB !important; }

    .theme-default .navbar-toggler {
        background-color: rgba(0, 0, 0, 0.05) !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }

    .theme-default .navbar-toggler:hover {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(0, 0, 0, 0.2) !important;
    }

    .theme-default .hamburger-line     { background-color: #1F2937 !important; }
    .theme-default .nav-section-title  { color: rgba(0, 0, 0, 0.6) !important; }

    .theme-default .nav-section-title:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        color: rgba(0, 0, 0, 0.85) !important;
    }

    .theme-default .nav-item a         { color: #4B5563 !important; }

    .theme-default .nav-item a.active {
        background-color: rgba(99, 102, 241, 0.15) !important;
        color: #4338CA !important;
        font-weight: 600;
    }

    .theme-default .nav-item a:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        color: #1F2937 !important;
    }

    .theme-default .nav-link-button    { color: #4B5563 !important; }

    .theme-default .nav-link-button:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        color: #1F2937 !important;
    }

    .theme-default .mobile-profile-info  { background-color: rgba(0, 0, 0, 0.03) !important; }
    .theme-default .mobile-profile-name  { color: #1F2937 !important; }
    .theme-default .mobile-profile-email { color: #6B7280 !important; }

    .theme-default .mobile-profile-avatar-placeholder {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }

    .theme-default .mobile-profile-avatar { border-color: rgba(0, 0, 0, 0.15) !important; }

    .theme-default .nav-scrollable::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.05) !important; }
    .theme-default .nav-scrollable::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.2) !important; }
    .theme-default .nav-scrollable::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3) !important; }

    .theme-default .mobile-footer-content,
    .theme-default .desktop-footer-content {
        background-color: rgba(0, 0, 0, 0.05) !important;
        border-top-color: rgba(0, 0, 0, 0.1) !important;
    }

    .theme-default .mobile-footer-version,
    .theme-default .mobile-footer-build,
    .theme-default .desktop-footer-version,
    .theme-default .desktop-footer-build { color: #6B7280 !important; }

    @media (min-width: 641px) and (max-width: 1199px) {
        .theme-default .nav-section:not(:last-child)::after { background: rgba(0, 0, 0, 0.08) !important; }
        .theme-default .nav-item a::after  { background-color: #1F2937 !important; color: white !important; }
        .theme-default .nav-item a::before { border-color: transparent #1F2937 transparent transparent !important; }
    }
}