/* ============================================================================
   LE TRE AREE DELLA COLONNA DI SINISTRA — Cliente · Seller · Networker/Nexodus
   ----------------------------------------------------------------------------
   ALLINEATE AL MARKETPLACE ✓ (14/10/2026). IL TITOLARE, guardando lo schermo: «non è allineato al marketplace il
   css» ✓ — e aveva ragione ✓: le voci delle aree portavano le MIE classi e le MIE misure ✗, diverse da quelle della
   colonna di sempre ✗.
   LA CURA ✓ (la regola di casa: «le voci che già funzionano si riusano» ✓): le aree usano **le classi del
   marketplace** ✓ — i titoli `nx-app-nav-label` ✓, le voci `nx-app-nav-link` dentro `nx-app-nav-list` ›
   `nx-app-nav-item` ✓ (gli stessi del menu di sempre ✓, vestiti da `main.css` ✓), le pastiglie `nx-app-badge--…` ✓.
   Così l'allineamento è **per costruzione** ✓ e non per imitazione ✗: maiuscolo ✓ spaziatura ✓ filo attivo ✓
   pastiglie ✓ li decide il foglio di casa, come per qualunque altra voce ✓.
   QUESTO FOGLIO AGGIUNGE SOLO LE TRE COSE CHE IL MENU DI CASA NON HA ✓:
     1. il TITOLO DELL'AREA è un PULSANTE ✓ (apre e chiude ✓) e porta la freccia che gira ✓;
     2. le VOCI si aprono e si chiudono con una dissolvenza ✓ (e restano visibili **senza JavaScript** ✓: si
        nascondono solo quando il modulo ha acceso il segno `nx-aree-vive` ✓ sul contenitore radice ✓);
     3. un FILO DI COLORE per area ✓ (Cliente · Seller · Networker ✓) sull'icona del titolo ✓.
   NIENTE STILE IN LINEA ✗, NIENTE utility nel markup ✗, NIENTE dipendenze da altri fogli ✗ (regole d'oro ✓).
   ============================================================================ */

/* LE VOCI COMUNI ✓ (Esplora · Dashboard) stanno SOPRA le aree ✓ (14/10/2026): un filo sottile le separa dai
   toggle, cosi' si vede che sotto cominciano «le aree» ✓ — la stessa idea dell'etichetta di sezione di casa ✓. */
.nx-aree-sopra + .nx-aree,
.nx-aree {
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, .12));
    margin-top: 4px;
    padding-top: 4px;
    height: 100vh;
}

.nx-aree-sopra .nx-aree-comuni {
    margin-bottom: 2px;
}

.nx-aree {
    --nx-area-cliente: var(--accent-sky, hsl(198.67deg 54.14% 40.08%));
    --nx-area-seller: var(--accent-gold, var(--nx-app-accent, #f6b122));
    --nx-area-networker: var(--accent-violet, hsl(268deg 60% 58%));
    display: block;
}

/* ---------------------------------------------------- il titolo dell'area (pulsante) */

.nx-area-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    /* LA TRAPPOLA DEL TITOLO «ENORME» ✓ (14/10/2026). IL TITOLARE: «<span class="nx-area-nome">Networker/Nexodus</span>
       è enorme va oltre la larghezza di ASIDE» ✓ — e aveva ragione ✓.
       IL PERCHÉ ✗: qui c'era `font: inherit` ✗, che è una scorciatoia ✓ e riporta il carattere a quello **della colonna**
       (16px ✓) ✗; il titolo di sezione di casa (`.nx-app-nav-label` ✓) ha invece la **sua** tipografia piccola ✓
       (`font-size: .65rem` ✓ maiuscolo ✓ spaziatura 1,5px ✓) e le due cose sulla stessa riga si annullavano ✓:
       vinceva l'ultima dichiarazione letta ✓, cioè la mia ✗ → il titolo usciva a 16px maiuscolo ✗ fuori dalla colonna ✗.
       ADESSO ✓: `font-family: inherit` ✓ soltanto ✓ (altrimenti il `<button>` userebbe il carattere del sistema ✗):
       la **misura** del testo resta quella del titolo di sezione ✓, come dev'essere ✓.
       (L'alternativa — copiare qui `.65rem` e il maiuscolo ✗ — avrebbe voluto dire riscrivere due volte la stessa
       regola ✓ e farle divergere al primo ritocco ✓.) */
    font-family: inherit;
    text-align: left;
    transition: color 0.2s ease;
}

.nx-area-toggle:hover {
    color: var(--text-primary);
}

.nx-area-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.nx-area-ico svg {
    width: 15px;
    height: 15px;
}

/* IL FILO DI COLORE D'OGNI AREA ✓ — solo sull'icona del titolo ✓ (le voci restano quelle di casa ✓) */
.nx-area--cliente .nx-area-ico {
    color: var(--nx-area-cliente);
}

.nx-area--seller .nx-area-ico {
    color: var(--nx-area-seller);
}

.nx-area--networker .nx-area-ico {
    color: var(--nx-area-networker);
}

.nx-area-nome {
    flex: 1 1 auto;
    min-width: 0;                  /* senza questo una parola lunga NON può rimpicciolirsi e spinge fuori la freccia ✓ */
    overflow-wrap: anywhere;       /* RETE DI SICUREZZA ✓: un nome lungo va a capo invece di uscire dalla colonna ✗ */
    line-height: 1.2;
}

/* LA FRECCIA ✓ — gira quando l'area è aperta ✓ (l'effetto è la transizione ✓: nessuno stile dal JavaScript ✗) */
.nx-area-freccia {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: 0.7;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.nx-area.is-aperta .nx-area-freccia {
    transform: rotate(180deg);
    opacity: 1;
}

/* L'AREA DOVE SEI ✓ — stesso segno di casa per la voce attiva ✓ (`nx-app-nav-link.is-active` ✓): il colore
   dell'accento sul titolo ✓ (nessuna barra disegnata a mano ✗). */
.nx-area.is-attiva .nx-area-toggle {
    color: var(--accent-primary);
}

/* ---------------------------------------------------- le voci: dissolvenza */

/* A nasconderle è QUESTO foglio ✓, e SOLO quando il modulo è montato ✓ (`html.nx-aree-vive` ✓): senza JavaScript
   si vedono tutte ✓ — mai un menu chiuso e nessun modo di aprirlo ✗. */
html.nx-aree-vive .nx-area-voci {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

html.nx-aree-vive .nx-area.is-aperta .nx-area-voci {
    max-height: 1000px;      /* il registro più lungo sono undici voci ✓: ci stanno larghe ✓ */
    opacity: 1;
}


/* ============================================================================
   LO STILE NUOVO DELLE VOCI DENTRO LE AREE ✓ (14/10/2026)
   ----------------------------------------------------------------------------
   LE SUE PAROLE: «di creare un nuovo stile .. è bello quello attuale ma visto che ora è slide come stile non è più
   appropriato» ✓. Tradotto in disegno ✓: la voce di casa (`nx-app-nav-link` ✓) è una riga **piatta** ✓, pensata per
   un elenco **sempre aperto** ✓; dentro un'area che si apre con la freccia ✗ quella riga «galleggia» ✓ — non è più
   il suo posto ✓.
   QUI LA VOCE DIVENTA UN PEZZO DI PANNELLO ✓: angoli tondi ✓, l'icona in una **pastiglia** ✓, e quando è quella
   dove sei ✓ prende il filo d'oro e il colore dell'accento ✓.
   RESTA ALLINEATA ✓: la base è sempre quella di casa ✓ (maiuscolo ✓ spaziatura ✓ misura del testo ✓ — non si
   tocca ✗) e i colori vengono dai gettoni del tema ✓ (`--accent-primary` ✓ `--glass-border` ✓ `--bg-glass-hover` ✓):
   **nessun colore inventato** ✗. Vale solo DENTRO le aree ✓ (`.nx-area-voci` ✓): le voci comuni in cima ✗ e la
   colonna di casa ✗ restano piatte come sono sempre state ✓.
   ============================================================================ */

/* LE SUE PAROLE, 14/10/2026 (sera) ✓: questa è la sua versione della regola, **parola per parola** ✓ — non c'è più
   il `border-left: 0` che avevo messo io ✗: quindi dentro l'area torna il **filo di casa** a sinistra ✓ (trasparente
   di norma ✓, oro quando la voce è quella dove sei ✓ — come in tutta la colonna ✓). */
.nx-area-voci .nx-area-voce {
    border-radius: 10px;
    margin: 2px 4px;
    padding: 9px 10px;
    gap: 10px;
    height: auto;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nx-area-voci .nx-area-voce:hover {
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    transform: translateX(2px);
}

/* LA PASTIGLIA DELL'ICONA ✓ — l'icona smette di essere un simbolo sciolto ✓ e diventa un segno riconoscibile ✓
   (`:first-child` perché Lucide SOSTITUISCE lo `<span data-lucide>` con un `<svg>` ✓: prima e dopo la conversione
   il primo figlio è sempre lei ✓). */
.nx-area-voci .nx-area-voce > :first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* MISURA GIUSTA DELL'ICONA DENTRO LA PASTIGLIA ✓ (misurato il 14/10: con il solo `width` l'icona restava
       a 24px dentro una pastiglia da 28px ✓ → sembrava stretta ✗). La pastiglia è 30px con 5px di respiro ✓
       e il disegno dentro è ~20px ✓: si legge senza toccare il bordo ✓. */
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 5px;
    flex: 0 0 30px;
    border-radius: 9px;
    /* LA PASTIGLIA SI DEVE VEDERE ✓ (misurata il 14/10: con il gettone più tenue restava quasi invisibile ✗
       — `rgba(6,168,249,.04)` ✓): si usa il gettone del passaggio ✓ e un filo di bordo ✓. */
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    color: var(--text-dim);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* (nessuna regola per l'icona DENTRO la pastiglia ✓: Lucide SOSTITUISCE lo `<span data-lucide>` con l'`<svg>`
   stesso ✓ → la pastiglia è l'svg ✓ e il disegno si adatta al suo riquadro ✓. Un `svg { … }` qui dentro non
   corrisponderebbe a niente ✓: l'ho tolto invece di lasciarlo a ingannare ✗.) */

.nx-area-voci .nx-area-voce:hover > :first-child {
    color: var(--accent-primary, #f6b122);
}

/* LA VOCE DOVE SEI ✓ — lo stesso linguaggio di casa (`is-active` ✓) con il vestito giusto per l'area ✓ */
.nx-area-voci .nx-area-voce.is-active {
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    box-shadow: inset 3px 0 0 0 var(--accent-primary, #f6b122);
    color: var(--accent-primary, #f6b122);
    font-weight: 700;
}

.nx-area-voci .nx-area-voce.is-active > :first-child {
    color: var(--accent-primary, #f6b122);
    background: rgba(246, 177, 34, 0.14);
}


/* ≤1200px la colonna diventa una barra di sole icone ✓ (è la regola di casa: `main.css` nasconde le parole ✓):
   anche il titolo dell'area si riduce alla sua icona ✓ — così l'area si apre e si chiude lo stesso ✓ e la barra
   resta leggibile ✓. */
@media (max-width: 1200px) {
    .nx-area-nome,
    .nx-area-freccia {
        display: none;
    }

    .nx-area-toggle {
        justify-content: center;
    }

    html.nx-aree-vive .nx-area.is-aperta .nx-area-voci {
        max-height: 1000px;
    }
}

/* LE VOCI COMUNI (Esplora · Dashboard) ✓ — LO STESSO VESTITO ✓ (14/10/2026).
   LE SUE PAROLE: «devi aggiornare anche questi» ✓, mostrando `ul.nx-app-nav-list.nx-aree-comuni` ✓.
   Perché serviva ✓: le due voci in cima erano rimaste **piatte** ✓ (come la colonna di casa ✗) mentre le voci dentro le
   aree avevano preso il vestito nuovo ✓ → la colonna sembrava fatta di **due pezzi diversi** ✗.
   COME ✓: le stesse dichiarazioni, applicate **per posizione** ✓ (`.nx-aree-comuni` ✓) invece che aggiungendo una
   classe nel markup ✓: così il disegno resta **uno** ✓ e nel markup non si tocca niente ✗. La regola delle voci delle
   aree resta **esattamente** quella che ha scritto lei ✓ (qui sotto c'è la stessa cosa, per l'altro contenitore ✓).
   NIENTE COLORI INVENTATI ✗: stesse classi di casa ✓ (`is-active` ✓ `nx-app-badge` ✓) e stessi gettoni ✓. */
.nx-aree-comuni .nx-app-nav-link {
    border-radius: 10px;
    margin: 2px 4px;
    padding: 9px 10px;
    gap: 10px;
    height: auto;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nx-aree-comuni .nx-app-nav-link:hover {
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    transform: translateX(2px);
}

/* LA PASTIGLIA DELL'ICONA ✓ — come dentro le aree ✓ (Lucide SOSTITUISCE lo `<span data-lucide>` con l'`<svg>` ✓:
   il primo figlio è sempre l'icona ✓, prima e dopo la conversione ✓). */
.nx-aree-comuni .nx-app-nav-link > :first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 5px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    color: var(--text-dim);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nx-aree-comuni .nx-app-nav-link:hover > :first-child {
    color: var(--accent-primary, #f6b122);
}

/* LA VOCE DOVE SEI ✓ — lo stesso linguaggio di casa (`is-active` ✓) con il filo d'oro ✓ */
.nx-aree-comuni .nx-app-nav-link.is-active {
    background: var(--bg-glass-hover, rgba(255, 255, 255, 0.07));
    box-shadow: inset 3px 0 0 0 var(--accent-primary, #f6b122);
    color: var(--accent-primary, #f6b122);
    font-weight: 700;
}

.nx-aree-comuni .nx-app-nav-link.is-active > :first-child {
    color: var(--accent-primary, #f6b122);
    background: rgba(246, 177, 34, 0.14);
}

/* ============================================================================
   LA COLONNA «DA CIMA A FONDO» ✓ (14/10/2026)
   ----------------------------------------------------------------------------
   LE SUE PAROLE: «quando ci sono poche voci o troppe voci non è ben distribuito .. deve essere che gli elementi si
   sviluppano dall'alto in basso · e che non si devono sovrapporre come succede ora che il nx-app-sidebar-footer
   essendo trasparente si vede tutto quello che scorre sotto .. non scrolla in verticale in modo organizzato» ✓.
   I DUE DIFETTI VERI, trovati leggendo i fogli di casa ✓ (non indovinati ✓):
     · `.nx-app-nav-group` (main.css riga 9751 ✓ apps.css riga 982 ✓) chiedeva `flex: 1` ✓ `position: sticky` ✓ e
       **`height: 100vh`** ✗ → ogni gruppo si prendeva **un'altezza da schermo intero** ✗ e il contenuto si
       distribuiva (o si accavallava ✗) invece di scorrere ✓;
     · `.nx-app-sidebar-footer` (apps.css riga 1076 ✓) aveva **solo** `padding` e un bordo ✗ **senza sfondo** ✗ →
       essendo l'ultimo pezzo della colonna ✓, le voci che scorrevano sotto si vedevano **attraverso** ✓.
   ADESSO ✓: i gruppi sono **blocchi normali** ✓ (altezza del loro contenuto ✓ niente `sticky` ✗ niente `100vh` ✗) e
   il piè di colonna **resta in basso con lo sfondo pieno** ✓. ATTENZIONE AL GETTONE ✓: si usa `--bg-secondary` ✓ che
   è un colore **SOLIDO** ✓ — **non** `--sidebar-bg` ✗ che è trasparente all'85% ✓ (era il modo più facile per
   rifare lo stesso difetto ✗).
   LO SCROLL ✓: la colonna scorre ✓ e adesso ha **la sua barra sottile** ✓ (prima era nascosta ✗: senza barra non si
   capisce che sotto c'è ancora roba ✓ — «non scrolla in verticale in modo organizzato» ✓).
   SOLO SU COMPUTER ✓ (`min-width: 993px` ✓): sul telefono la colonna è già un pannello a tutto schermo ✓.
   ============================================================================ */
@media (min-width: 993px) {
    html .nx-app-sidebar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        scrollbar-width: thin;
        scrollbar-color: var(--glass-border, rgba(255, 255, 255, 0.18)) transparent;
    }

    /* LA BARRA DI SCROLL SOTTILE ✓ — si vede che c'è altro sotto ✓ (la colonna di casa la nascondeva ✗) */
    html .nx-app-sidebar::-webkit-scrollbar {
        display: block;
        width: 6px;
    }

    html .nx-app-sidebar::-webkit-scrollbar-thumb {
        background: var(--glass-border, rgba(255, 255, 255, 0.18));
        border-radius: 3px;
    }

    html .nx-app-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    /* I GRUPPI: blocchi normali, dall'alto in basso ✓ */
    html .nx-app-sidebar .nx-app-nav-group {
        flex: 0 0 auto;
        position: static;
        top: auto;
        height: auto;
        min-height: 0;
        overflow-y: visible;
        z-index: auto;
    }

    html .nx-app-sidebar .nx-aree {
        flex: 0 0 auto;
    }

    /* IL PIÈ DI COLONNA ✓ — in basso con lo sfondo PIENO ✓: le voci scorrono sotto di lui ✓ e non si vedono più
       attraverso ✓ (era il difetto che ha visto ✓). Il filo e l'ombra lo staccano dalla lista ✓. */
    html .nx-app-sidebar .nx-app-sidebar-footer {
        position: sticky;
        bottom: 0;
        flex: 0 0 auto;
        z-index: 3;
        background: var(--bg-secondary, #12141D);
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
        box-shadow: 0 -14px 26px -16px rgba(0, 0, 0, 0.7);
    }
}


/* ============================================================================
   L'ANIMAZIONE ✓ — «sarebbe bella un'animazione evoluta moderna da ecosistema AI» ✓
   ----------------------------------------------------------------------------
   COSA FA ✓, e perché proprio questa ✓: quando un'area si apre ✓ le sue voci arrivano **a ondata** ✓ — una dopo
   l'altra **dall'alto in basso** ✓ (cioè la stessa cosa che chiede dei contenuti: «gli elementi si sviluppano
   dall'alto in basso» ✓). La voce dove sei **respira** ✓ (un alone d'oro lentissimo ✓), la freccia gira con un
   piccolo **ritorno elastico** ✓ (non meccanico ✗) e la pastiglia dell'icona si accende al passaggio del dito ✓.
   NIENTE STILE SCRITTO DAL JAVASCRIPT ✗: è tutto qui ✓ — i ritardi dell'onda si danno con `:nth-child` ✓ (dodici
   righe ✓, quante voci può avere un'area ✓).
   CHI NON VUOLE ANIMAZIONI ✓: se il sistema dice «riduci il movimento» ✓ (`prefers-reduced-motion` ✓) non si anima
   niente ✓ e le voci si vedono lo stesso ✓ (accessibilità: regola di casa ✓).
   ============================================================================ */
@keyframes nx-area-onda {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nx-area-respiro {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(246, 177, 34, 0);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(246, 177, 34, 0.12);
    }
}

@media (prefers-reduced-motion: no-preference) {
    html.nx-aree-vive .nx-area.is-aperta .nx-area-voce {
        animation: nx-area-onda 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

        /* L'ORDINE DELL'ONDA ✓ — si conta il `<li>` e NON la voce ✗: la voce sta dentro `<li>` ✓ e sarebbe
       sempre «figlia numero uno» ✗ → tutti i ritardi uguali ✓ (misurato il 14/10 ✓: onda ferma ✗). */
html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(1) .nx-area-voce { animation-delay: 0.01s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(2) .nx-area-voce { animation-delay: 0.05s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(3) .nx-area-voce { animation-delay: 0.09s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(4) .nx-area-voce { animation-delay: 0.13s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(5) .nx-area-voce { animation-delay: 0.17s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(6) .nx-area-voce { animation-delay: 0.21s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(7) .nx-area-voce { animation-delay: 0.25s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(8) .nx-area-voce { animation-delay: 0.29s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(9) .nx-area-voce { animation-delay: 0.33s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(10) .nx-area-voce { animation-delay: 0.37s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(11) .nx-area-voce { animation-delay: 0.41s; }
    html.nx-aree-vive .nx-area.is-aperta .nx-app-nav-item:nth-child(12) .nx-area-voce { animation-delay: 0.45s; }

    /* LA VOCE DOVE SEI RESPIRA ✓ — lenta ✓ discreta ✓ col colore dell'accento ✓ */
    .nx-area-voci .nx-area-voce.is-active > :first-child {
        animation: nx-area-respiro 3.4s ease-in-out infinite;
    }

    /* LA FRECCIA CON IL RITORNO ELASTICO ✓ */
    .nx-area.is-aperta .nx-area-freccia {
        transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* LA PASTIGLIA SI ACCENDE ✓ al passaggio del dito ✓ */
    .nx-area-voci .nx-area-voce:hover > :first-child {
        transform: scale(1.06);
    }
}