/**
 * ============================================================================
 * MAIN NAVIGATION - Horizontal Menu (Design System PraticaFlash)
 * ============================================================================
 * Menu principale orizzontale: DASHBOARD | PRATICHE | IMMOBILI | LEADS
 * Pattern: Allineato al design system Settings (linee sottili, no sfondo bianco)
 */

/* ============================================================================
   BLOCCO 1: Layout Base
   ============================================================================ */

.main-nav {
    display: flex;
    gap: var(--spacing-1);
    background: var(--color-background-primary); /* Grigio-rosa come Settings */
    border-bottom: 1px solid var(--color-border); /* Linea sottile */
    padding: 0 var(--spacing-6);
    position: sticky;
    top: 0;
    z-index: 1000; /* Aumentato per essere sopra tutti i contenuti (non modals) */
    pointer-events: auto; /* Assicura che sia cliccabile */
}

.main-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    border: none;
    background: transparent;
    color: #918b9a; /* Stesso grigio di Settings nav-item */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* Overlap con border del parent */
    white-space: nowrap;
    border-radius: var(--radius-md) var(--radius-md) 0 0; /* Arrotondato sopra */
    position: relative;
}

.main-nav-item i {
    font-size: var(--font-size-lg);
    transition: all var(--transition-fast);
}

/* ============================================================================
   BLOCCO 2: States (Hover, Active)
   ============================================================================ */

.main-nav-item:hover:not(.active) {
    background: var(--brand-primary-lightest); /* Viola leggerissimo */
    color: var(--brand-primary);
}

.main-nav-item:hover:not(.active) i {
    color: var(--brand-primary);
}

.main-nav-item.active {
    color: var(--brand-primary); /* Viola brand */
    border-bottom-color: var(--brand-primary); /* Linea sottile viola */
    background: transparent;
    font-weight: var(--font-weight-semibold);
}

.main-nav-item.active i {
    color: var(--brand-primary);
}

.main-nav-item:active {
    transform: translateY(1px);
}

/* ============================================================================
   BLOCCO 3: Responsive (Mobile)
   ============================================================================ */

@media (max-width: 768px) {
    .main-nav {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 var(--spacing-3);
        -webkit-overflow-scrolling: touch; /* Smooth scroll su iOS */
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    }

    /* Hide scrollbar Webkit */
    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav-item {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-xs);
    }

    .main-nav-item span {
        display: none; /* Hide text su mobile, solo icone */
    }

    .main-nav-item i {
        font-size: var(--font-size-xl);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet: Text più piccolo */
    .main-nav-item {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-sm);
    }
}