/* === Navbar Components === */

/* Search Container */
.navbar-search-container {
    flex-grow: 1;
}

/* Search Bar */
.navbar-embedded {
    width: 100%;
    height: 36px;
    color: var(--an-text-primary);
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px var(--an-shadow-sm);
    padding: 0 12px;
    font-size: 14px;
    border: 1.5px solid var(--an-border-light);
    background: var(--an-bg-secondary);
    transition: all 0.2s;
}

.navbar-embedded:focus {
    border: 1.5px solid var(--an-accent-primary) !important;
    box-shadow: 0 0 10px var(--an-accent-primary) !important;
    color: var(--an-text-primary) !important;
    outline: none !important;
}

.navbar-embedded input::placeholder {
    color: var(--an-text-muted);
}

.navbar-embedded button {
    border: none;
    background: transparent;
    color: var(--an-text-secondary);
    padding: 0 12px;
    font-size: 16px;
    transition: color 0.2s ease-in-out;
}

.navbar-embedded button:hover {
    color: var(--an-text-primary);
}

.navbar-embedded .autocomplete-dropdown {
    top: 100%;
    left: 0;
    z-index: 1050;
    background: var(--an-bg-tertiary);
    
    box-shadow: 0 4px 8px var(--an-shadow-md);
    border-radius: 8px;
    margin-top: 4px;
}

/* Responsive Adjustments */
/* Desktop */
@media (min-width: 1024px) {
    .navbar-embedded {
        width: 800px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column;
        gap: 8px;
    }

    .navbar-search-container {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .navbar-embedded {
        width: 100%;
        min-width: 220px;
        flex-grow: 1;
        margin: 8px 0;
    }

    #global-search-form {
        width: 100%;
    }

    .navbar .btn {
        width: 100%;
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .navbar-embedded {
        padding: 0 8px;
        font-size: 12px;
    }
}

/* === Navbar Modern Fintech Style === */

/* Base Navbar */
.navbar {
    background-color: var(--an-bg-primary);
    border-bottom: 1px solid var(--an-border-dark);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 4px var(--an-shadow-sm);
}

/* Brand */
.navbar-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--an-text-primary);
    letter-spacing: 0.5px;
    transition: color 0.2s ease-in-out;
}

.navbar-brand:hover {
    color: var(--an-accent-primary);
    text-decoration: none;
}

/* Nav Links */
.nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--an-text-muted);
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    position: relative;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--an-text-primary);
    background-color: var(--an-bg-hover);
}

.nav-link.active {
    color: var(--an-accent-primary);
    background-color: var(--an-hover-active);
}

.nav-link::after {
    content: '';
    display: block;
    height: 2px;
    width: 0;
    background: var(--an-accent-primary);
    transition: width 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

/* Buttons */
.navbar .btn,
.navbar .btn:hover,
.navbar .btn:focus {
    text-decoration: none !important;
}

.navbar .btn {
    font-size: 0.9rem;
    padding: 6px 12px;
    color: var(--an-accent-primary);
    border: 1px solid var(--an-border-light);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
}

.navbar .btn:hover {
    background-color: var(--an-bg-hover);
    color: var(--an-text-accent);
    
}

/* Profile Avatar */
.navbar .profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--an-border-medium);
    transition: border-color 0.2s ease-in-out;
}

.navbar .profile-avatar:hover {
    border-color: var(--an-accent-primary);
}