/* Navbar-specific styles moved from base.html for better maintainability */

body { 
    font-family: 'Satoshi', 'Inter', 'Segoe UI', Arial, sans-serif; 
}

/* Dynamic navbar layout using flexbox for better positioning */
.navbar-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    max-width: 600px; /* Reasonable max width for center section */
}

.navbar-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem; /* sm:space-x-8 equivalent */
    flex-shrink: 0; /* Prevent nav links from shrinking */
}

/* Ensure Finch Insights link maintains its position */
.navbar-nav-links a[href*="chat"] {
    position: relative;
    z-index: 10;
}

/* Position notification container dynamically between nav links and right edge */
#navbar-progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* Match navbar height */
    z-index: 5;
    flex: 1; /* Take remaining space */
    max-width: 280px; /* Prevent it from getting too wide */
    margin-left: 1rem; /* Space from nav links - moved left */
}

/* Ensure notification doesn't cause layout shifts */
.navbar-interview-progress-card {
    position: relative;
    z-index: 5;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .navbar-nav-container {
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        gap: 1rem;
    }
    
    #navbar-progress-container {
        margin-left: 0;
        max-width: none;
        width: 100%;
    }
}

/* Additional responsive adjustments for medium screens */
@media (max-width: 1024px) {
    .navbar-nav-container {
        max-width: 500px;
    }
    
    #navbar-progress-container {
        max-width: 200px;
        margin-left: 0.5rem; /* Moved left for medium screens */
    }
}