/* ============================================================================
   GLOBAL TOPBAR - DETECTIVE THEME (Light Variant)
   Light-themed top navigation with detective/cyber investigation colors
   ============================================================================ */

/* Import Detective Theme System */
@import '../themes/detective-dossier.css';
@import '../themes/detective-utilities.css';

/* Main topbar styling - light theme with detective fonts */
.topbar {
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 65, 107, 0.1);
}

/* Topbar text */
.topbar .nav-link,
.topbar .navbar-nav .small {
    font-weight: 600;
    color: var(--color-text-primary) !important;
    transition: all 0.2s ease;
}

.topbar .nav-link:hover {
    color: var(--detective-blue) !important;
}

/* Username text */
.topbar .text-white-600 {
    letter-spacing: 0.3px;
}

/* Active users count */
.topbar #navbar-active-users-count {
    font-weight: 700;
    color: var(--detective-blue);
}

/* Streak count */
.topbar #navbar-streak-count {
    font-weight: 700;
    color: var(--detective-orange);
}

/* Icons in topbar */
.topbar .fas,
.topbar .fab {
    transition: transform 0.2s ease;
}

.topbar .nav-link:hover .fas,
.topbar .nav-link:hover .fab {
    transform: scale(1.1);
}

/* Fire icon for streak */
.topbar .fa-fire {
    color: var(--detective-orange) !important;
}

/* Users icon */
.topbar .fa-users {
    color: var(--detective-blue) !important;
}

/* Profile image */
.topbar .img-profile {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border: 2px solid var(--detective-blue);
    transition: all 0.2s ease;
}

.topbar .img-profile:hover {
    border-color: var(--detective-orange);
    box-shadow: 0 0 8px rgba(255, 87, 2, 0.3);
}

/* Dropdown menu - light themed */
.topbar .dropdown-menu {
    border: 1px solid var(--detective-blue);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 65, 107, 0.15);
}

.topbar .dropdown-item {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.topbar .dropdown-item:hover {
    background: rgba(0, 65, 107, 0.05);
    color: var(--detective-blue);
}

.topbar .dropdown-item:active {
    background: rgba(0, 65, 107, 0.1);
    color: var(--detective-blue);
}

/* Dropdown icons */
.topbar .dropdown-item .fas,
.topbar .dropdown-item .fab {
    color: var(--detective-blue-bright);
}

.topbar .dropdown-item:hover .fas,
.topbar .dropdown-item:hover .fab {
    color: var(--detective-orange);
}

/* Divider in dropdown */
.topbar .dropdown-divider {
    border-color: rgba(0, 65, 107, 0.1);
}

/* Sidebar toggle button */
.topbar #sidebarToggleTop {
    color: var(--detective-blue);
    transition: all 0.2s ease;
}

.topbar #sidebarToggleTop:hover {
    color: var(--detective-orange);
    transform: scale(1.1);
}

/* Topbar divider */
.topbar-divider {
    border-right: 1px solid rgba(0, 65, 107, 0.15);
}

/* Claim account button integration */
.topbar .btn-claim-account {
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .topbar .navbar-nav .small {
        font-size: 0.85rem;
    }
}