/* Final Navigation Fix for All Templates */

/* Ensure SVG icons display properly */
.nav-pill svg {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.nav-pill svg path,
.nav-pill svg polyline,
.nav-pill svg line,
.nav-pill svg rect,
.nav-pill svg circle {
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Ensure proper nav pill spacing */
.nav-pills {
    display: flex !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
}

/* Mobile navigation fix - show first 4 pills + hamburger */
@media (max-width: 768px) {
    /* Override any rules that hide nav-pills completely */
    .nav-pills {
        display: flex !important; /* Keep nav pills visible */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show first 4 pills */
    .nav-pill {
        display: flex !important; /* Ensure pills are visible */
    }
    
    /* Hide 5th pill onwards */
    .nav-pill:nth-child(n+5) {
        display: none !important;
    }
    
    /* Show hamburger menu */
    .nav-fab {
        display: flex !important;
    }
}

/* Remove any conflicting box shadows or outlines */
.nav-pill {
    outline: none !important;
    box-shadow: none !important;
}

.nav-pill.active {
    box-shadow: 0 4px 12px rgba(53, 67, 240, 0.2) !important;
}