/**
 * La tua rete (sedi e utenti interni).
 *
 * Qui c'è solo l'albero della struttura, che nel kit non c'è perché è di questa
 * schermata sola. Tutto il resto (schede, bottoni, campi, pastiglie, riquadro)
 * viene da assets/css/nosumo-kit.css.
 */

/**
 * ⛔ LARGA COME LE ALTRE SEZIONI, dal 13/08/2026.
 * [il titolare: «ha il margine a destra e quindi è più schiacciata»]
 *
 * Qui c'era `max-width: 940px; padding: 22px`, e faceva due danni insieme:
 *   · il `max-width` lasciava un vuoto a destra che le altre sezioni non hanno,
 *     quindi «La tua rete» sembrava un'altra app;
 *   · il padding orizzontale si **sommava** ai 36px per lato che mette gia'
 *     `.main-area`, e la sezione partiva 58px dentro invece di 36.
 *
 * ⚠ Era anche l'originale da cui `pagine.css` aveva copiato il 940px, e li'
 * era gia' stato tolto: questa era l'ultima copia rimasta. La ragione che lo
 * giustificava («e' un elenco di righe, oltre una certa larghezza si legge
 * peggio») vale in astratto, ma non vale piu' della coerenza fra le sezioni:
 * il titolare le vede una dopo l'altra, non una alla volta.
 */
.sedi-wrap { padding: 0 0 22px; }

/* Sotto i 901px `.main-area` non ha piu' il suo padding: da li' in giu' serve
   che se lo metta la sezione. Stessa riga di `pagine.css`. */
@media (max-width: 900px) { .sedi-wrap { padding: 0 16px 22px; } }

/* ── L'albero: capo, e sotto le persone ────────────────────────────── */

.sedi-nodo {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px;
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink);
    margin-bottom: 6px;
    font-size: 13px;
}
.sedi-nodo.figlio { margin-left: 26px; background: var(--nk-ink-2); }
.sedi-nodo-m { flex: 1; min-width: 0; }
.sedi-nodo-nome { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.sedi-nodo-sotto { font-size: 11.5px; color: var(--nk-muted); margin-top: 1px; }
.sedi-nodo-azioni { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Chi e' uscito. [27/08/2026]
   ⚠ Il grigio e' decorazione, non l'unico segnale: la riga sotto il nome dice
   «accesso tolto» a parole, e i due bottoni spariscono. Serve a non ripetere
   l'errore gia' preso nella schermata Piano, dove compreso e non compreso si
   distinguevano **solo** dal colore e a un lettore di schermo suonavano uguali. */
.sedi-nodo.uscito .sedi-nodo-nome { color: var(--nk-muted); font-weight: 500; }
.sedi-nodo.uscito { opacity: .72; }

/* La linea che lega il figlio al capo: si vede subito chi sta sotto chi */
.sedi-nodo.figlio { position: relative; }
.sedi-nodo.figlio::before {
    content: ''; position: absolute; left: -14px; top: -7px; bottom: 50%;
    width: 12px; border-left: 1px solid var(--nk-line-2);
    border-bottom: 1px solid var(--nk-line-2);
    border-bottom-left-radius: 6px;
}

/* ── I permessi, nel riquadro ──────────────────────────────────────── */

.sedi-perm { display: flex; align-items: center; gap: 10px; padding: 9px 0;
             border-bottom: 1px solid var(--nk-line); }
.sedi-perm:last-child { border-bottom: 0; }
.sedi-perm-nome { flex: 1; font-size: 13px; font-weight: 550; text-transform: capitalize; }
.sedi-scelta { display: inline-flex; background: var(--nk-ink-3); border-radius: 999px; padding: 3px; gap: 2px; }
.sedi-scelta button {
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--nk-font); font-size: 11.5px; font-weight: 550; color: var(--nk-muted);
    padding: 5px 12px; border-radius: 999px; transition: all .2s var(--nk-ease);
}
.sedi-scelta button[aria-pressed="true"] {
    background: var(--nk-ink); color: var(--nk-accent);
    box-shadow: 0 1px 3px rgb(0 0 0 / .09); font-weight: 650;
}

/* ── La password da consegnare ─────────────────────────────────────── */

.sedi-consegna { display: grid; gap: 8px; }
.sedi-consegna .nk-copy code { font-size: 12.5px; }

@media (max-width: 640px) {
    .sedi-wrap { padding: 15px; }
    .sedi-nodo.figlio { margin-left: 14px; }
    .sedi-nodo { flex-wrap: wrap; }
}