/*
    Esplora documenti («Documentazione varia») — stile del componente.

    Tutto con prefisso .ed- e solo variabili del tema Ynex del portale (styles.css): niente colori fissi,
    così i due temi (chiaro e scuro, data-theme-mode sull'elemento html) escono dalle stesse regole.
    Unica eccezione, come fa il tema stesso per .dropdown-menu e .modal: le ombre, che in entrambi i temi
    devono essere nere trasparenti e nessuna variabile del tema lo è in tutti e due.

    Chi usa il portale è spesso in Desktop remoto: nessuna animazione, nessun movimento; le sole transizioni
    sono sui colori e durano un attimo. Sotto «prefers-reduced-motion» si spengono anche quelle.

    Il tema azzera l'outline di a e button con !important: il fuoco da tastiera qui è un anello fatto con
    box-shadow (--ed-anello), che il tema non tocca.
*/

/* ───────────────────────────── Base e misure ───────────────────────────── */

/* Le variabili valgono sulla card e sui pezzi che stanno fuori da essa (menu contestuali, dialoghi, fantasma
   del trascinamento), perché nel portale potranno essere disegnati in fondo alla pagina. */
.ed-card, .ed-menu, .ed-velo, .ed-fantasma {
    /* misure */
    --ed-altezza-area: 520px;           /* zona cartelle + contenuto, con scorrimento interno */
    --ed-tessera: 124px;                /* larghezza minima di una tessera nella vista Icone */
    --ed-pastiglia: 52px;               /* lato della «pastiglia» colorata dietro il glifo */
    --ed-albero-largo: 272px;           /* pannello delle cartelle aperto */
    --ed-albero-stretto: 36px;          /* linguetta quando è chiuso */
    --ed-raggio: .5rem;
    /* colori, tutti dal tema */
    --ed-fondo: var(--custom-white);
    --ed-fondo-2: var(--default-background);
    --ed-fondo-sopra: var(--custom-white);      /* superfici che galleggiano: menu, coda, dialoghi, albero sovrapposto */
    --ed-bordo: var(--default-border);
    --ed-bordo-campo: var(--input-border);
    --ed-testo: var(--default-text-color);
    /* il grigio del tema (#8c9097) sta a 3,2:1 sul bianco: per i testi piccoli lo si scurisce un po' */
    --ed-muto: color-mix(in srgb, var(--text-muted) 55%, var(--default-text-color));
    /* --ed-primario serve ai riempimenti con testo bianco (pulsante principale, contatore del fantasma);
       --ed-accento a icone, testi, bordi e barre: nel tema scuro si schiarisce, il primario (58,88,146) lì non si legge */
    --ed-primario: rgb(var(--primary-rgb));
    --ed-accento: var(--ed-primario);
    --ed-primario-tenue: rgba(var(--primary-rgb), .08);
    --ed-sel-fondo: rgba(var(--primary-rgb), .11);
    --ed-sel-bordo: rgba(var(--primary-rgb), .45);
    --ed-hover: var(--list-hover-focus-bg);
    --ed-traccia: rgba(var(--dark-rgb), .08);   /* fondo delle barre di avanzamento (--default-background non si vedeva) */
    --ed-anello: 0 0 0 2px var(--ed-fondo), 0 0 0 4px var(--ed-accento);
    --ed-ombra: 0 .5rem 1.5rem rgba(10, 10, 10, .14);
    --ed-ombra-menu: 0 .375rem 1.125rem rgba(10, 10, 10, .16);
    /* tinta del tipo di file: ogni .ed-tipo-* cambia --ed-tinta-rgb; le variabili ricavate si ricalcolano
       sull'elemento stesso (vedi «Tipi di file» in fondo), perché una variabile ricavata si calcola dove è
       dichiarata e i figli ne ereditano il valore già risolto.
       --ed-tinta-testo e --ed-tinta-glifo scuriscono la tinta nel tema chiaro (pillole e glifi a linea sul
       bianco erano a 2:1); nel tema scuro la tinta resta com'è (--ed-mix-* al 100 %) */
    --ed-mix-testo: 55%;
    --ed-mix-glifo: 80%;
    --ed-tinta-rgb: var(--primary-rgb);
    --ed-tinta-alfa: .12;
    --ed-tinta: rgb(var(--ed-tinta-rgb));
    --ed-tinta-fondo: rgba(var(--ed-tinta-rgb), var(--ed-tinta-alfa));
    --ed-tinta-glifo: color-mix(in srgb, var(--ed-tinta) var(--ed-mix-glifo), var(--custom-black));
    --ed-tinta-testo: color-mix(in srgb, var(--ed-tinta) var(--ed-mix-testo), var(--custom-black));

    color: var(--ed-testo);
    font-size: .8125rem;
}
/* Solo la card è un «contenitore» per le query @container: su un elemento che galleggia (menu, fantasma)
   container-type azzererebbe la larghezza naturale */
.ed-card { container-type: inline-size; position: relative; }

[data-theme-mode=dark] .ed-card, [data-theme-mode=dark] .ed-menu, [data-theme-mode=dark] .ed-velo, [data-theme-mode=dark] .ed-fantasma {
    --ed-muto: var(--text-muted);
    --ed-accento: color-mix(in srgb, rgb(var(--primary-rgb)) 55%, var(--custom-black));   /* --custom-black è bianco nel tema scuro: 6,7:1 sulla card */
    --ed-sel-fondo: rgba(var(--primary-rgb), .32);
    --ed-sel-bordo: color-mix(in srgb, rgb(var(--primary-rgb)) 60%, var(--custom-black));
    --ed-ombra: 0 .5rem 1.5rem rgba(0, 0, 0, .55);
    --ed-ombra-menu: 0 .375rem 1.125rem rgba(0, 0, 0, .6);
    --ed-tinta-alfa: .18;
    --ed-mix-testo: 100%;
    --ed-mix-glifo: 100%;
    /* nel tema scuro la card e il fondo hanno lo stesso colore: ciò che galleggia è un passo più chiaro,
       come fa il tema con i propri menu a discesa */
    --ed-fondo-sopra: rgb(var(--light-rgb));
}

/* Il tema dà 20 px di margine interno a .card.custom-card .card-body e 4 px di gap al card-header: qui le
   barre devono arrivare ai bordi della card, perciò i selettori ripetono le classi del tema per vincere */
.card.custom-card.ed-card > .card-header { gap: .75rem; }
.card.custom-card.ed-card > .card-body { padding: 0; }

.ed-card *, .ed-card *::before, .ed-card *::after,
.ed-menu *, .ed-velo *, .ed-fantasma * { box-sizing: border-box; }
/* :where() tiene bassa la specificità: le regole dei singoli pulsanti (.ed-btn-principale ecc.) devono vincere */
:where(.ed-card, .ed-menu, .ed-velo) button { font: inherit; color: inherit; }
.ed-card [hidden], .ed-menu[hidden], .ed-velo[hidden], .ed-fantasma[hidden], .ed-menu [hidden], .ed-velo [hidden] { display: none !important; }
.ed-menu, .ed-velo, .ed-fantasma { font-family: var(--default-font-family); font-size: .8125rem; line-height: 1.5; }

/* Fuoco da tastiera: anello esterno su pulsanti e campi; dentro le zone che scorrono (contenuto, albero,
   linguetta) l'anello è interno, così non viene tagliato */
:where(.ed-card, .ed-menu, .ed-velo) :is(button, input, [tabindex]):not(.ed-menu):focus-visible { outline: 0; box-shadow: var(--ed-anello); }
:where(.ed-card) :is(.ed-contenuto, .ed-nodo, .ed-albero-linguetta, .ed-albero-lista):focus-visible { box-shadow: inset 0 0 0 2px var(--ed-accento); }
.ed-cerca input:focus-visible, .ed-rinomina:focus-visible { box-shadow: 0 0 0 3px var(--ed-sel-fondo); border-color: var(--ed-accento); }

/* Etichetta che resta solo per i lettori di schermo (pulsanti ridotti a icona nelle card strette) */
.ed-solo-lettore { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────────────────────────── Spazio usato (intestazione) ───────────────────────────── */

.ed-spazio {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    font-size: .75rem;
    color: var(--ed-muto);
    white-space: nowrap;
}
.ed-spazio .ed-spazio-eti { margin-right: .125rem; }
.ed-spazio-testo strong { color: var(--ed-testo); font-weight: 600; }
.ed-spazio-barra {
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--ed-traccia);
    overflow: hidden;
}
.ed-spazio-pieno {
    height: 100%;
    border-radius: 999px;
    background: rgb(var(--success-rgb));
}
.ed-spazio.ed-spazio-attenzione .ed-spazio-pieno { background: rgb(var(--warning-rgb)); }
.ed-spazio.ed-spazio-esaurito .ed-spazio-pieno { background: rgb(var(--danger-rgb)); }
.ed-spazio.ed-spazio-esaurito .ed-spazio-testo strong { color: rgb(var(--danger-rgb)); }

.ed-badge-lettura {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    background: var(--ed-fondo-2);
    color: var(--ed-muto);
}

/* Avviso «spazio quasi esaurito»: sotto l'intestazione, prima dei comandi, a tutta larghezza */
.ed-avviso {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--ed-bordo);
    font-size: .75rem;
    background: rgba(var(--danger-rgb), .08);
    color: var(--ed-testo);
}
.ed-avviso i { font-size: 1rem; color: rgb(var(--danger-rgb)); }
.ed-avviso.ed-avviso-attenzione { background: rgba(var(--warning-rgb), .12); }
.ed-avviso.ed-avviso-attenzione i { color: rgb(var(--warning-rgb)); }
.ed-avviso strong { font-weight: 600; }

/* ───────────────────────────── Barra dei comandi ───────────────────────────── */

/* Comandi, percorso e barra di stato partono tutti a 20 px dal bordo, come il titolo della card */
.ed-comandi {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    padding: .375rem 1.25rem;
    border-bottom: 1px solid var(--ed-bordo);
    flex-wrap: wrap;
}
.ed-gruppo { display: flex; align-items: center; gap: .125rem; flex-wrap: wrap; }
.ed-sep {
    width: 1px;
    height: 22px;
    margin: 0 .25rem;
    background: var(--ed-bordo-campo);
}
/* Pulsante piatto da barra: icona + etichetta, come la barra di Esplora file */
.ed-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: transparent;
    color: var(--ed-testo);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .1s, color .1s, border-color .1s;
}
.ed-btn-principale { padding: 0 .625rem; }
.ed-btn i { font-size: 1.05rem; line-height: 1; color: var(--ed-accento); }
.ed-btn:hover { background: var(--ed-hover); }
.ed-btn:active { background: var(--ed-sel-fondo); }
/* niente pointer-events: none, così un pulsante spento mostra lo stesso il suo suggerimento («Seleziona un solo documento») */
.ed-btn[disabled] { opacity: .45; cursor: default; }
.ed-btn[disabled]:hover { background: transparent; }
.ed-btn.ed-btn-pericolo i { color: rgb(var(--danger-rgb)); }
.ed-btn.ed-btn-pericolo:hover { background: rgba(var(--danger-rgb), .08); color: rgb(var(--danger-rgb)); }
.ed-btn.ed-btn-icona { width: 32px; padding: 0; justify-content: center; }
.ed-btn.ed-btn-icona i { color: var(--ed-testo); }
.ed-btn-principale {
    background: var(--ed-primario);
    color: #fff;
    border-color: var(--ed-primario);
}
.ed-btn-principale i, .ed-btn-principale.ed-btn-icona i { color: inherit; }
.ed-btn-principale:hover, .ed-btn-principale[disabled]:hover { background: rgba(var(--primary-rgb), .9); }
.ed-comandi .ed-spazio-flex { flex: 1; }

/* Interruttore di vista (Icone / Dettagli): segmentato, nella barra di stato in basso a destra */
.ed-vista {
    display: inline-flex;
    padding: 2px;
    border-radius: .375rem;
    background: var(--ed-fondo-2);
}
.ed-vista button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
    transition: background-color .1s, color .1s;
}
.ed-vista button i { font-size: 1.05rem; }
.ed-vista button:hover { color: var(--ed-testo); }
.ed-vista button.ed-attivo {
    background: var(--ed-fondo);
    color: var(--ed-accento);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .12);
}

/* Barra con selezione: cambia gruppo */
.ed-comandi .ed-gruppo-selezione { display: none; }
.ed-card.ed-ha-selezione .ed-comandi .ed-gruppo-selezione { display: flex; flex: 1 1 auto; }
.ed-card.ed-ha-selezione .ed-comandi .ed-gruppo-base { display: none; }
/* «3 selezionati» con la ✕ per deselezionare */
.ed-conta-sel {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-right: .25rem;
    padding: .15rem .2rem .15rem .55rem;
    border-radius: .375rem;
    background: var(--ed-sel-fondo);
    color: var(--ed-accento);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.ed-conta-sel button {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.ed-conta-sel button i { font-size: .95rem; }
.ed-conta-sel button:hover { background: rgba(var(--primary-rgb), .18); }

/* Sola lettura: i comandi di modifica spariscono, al loro posto una riga che dice cosa si può fare */
.ed-card.ed-sola-lettura .ed-modifica { display: none !important; }
.ed-suggerimento {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .25rem;
    font-size: .75rem;
    color: var(--ed-muto);
}
.ed-suggerimento i { font-size: 1rem; }

/* Quando la card è stretta, i pulsanti perdono l'etichetta a scaglioni: l'etichetta resta ai lettori di
   schermo (nascosta alla vista, non tolta) e il suggerimento (title) c'è sempre.
   Taglia, Copia, Incolla e Rinomina sono le prime a ridursi, come nella barra di Esplora file di Windows 11
   dove sono sempre e solo icone: così a 1280 px di finestra (card ≈ 990 px) la barra con la selezione sta in
   una riga e Apri, Scarica, Scarica ZIP, Invia per e-mail ed Elimina tengono il nome. */
@container (max-width: 1000px) {
    .ed-btn.ed-btn-secondario .ed-eti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ed-btn.ed-btn-secondario { padding: 0 .5rem; }
}
@container (max-width: 820px) {
    .ed-btn.ed-btn-esteso .ed-eti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ed-btn.ed-btn-esteso { padding: 0 .5rem; }
}
@container (max-width: 700px) {
    .ed-btn.ed-btn-pericolo .ed-eti, .ed-btn[data-az="scarica"] .ed-eti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ed-btn.ed-btn-pericolo, .ed-btn[data-az="scarica"] { padding: 0 .5rem; }
    .ed-gruppo-selezione .ed-btn-principale { display: none; }   /* «Carica file» resta nella barra senza selezione */
}
@container (max-width: 600px) {
    .ed-btn:not(.ed-btn-principale) .ed-eti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ed-btn:not(.ed-btn-principale) { padding: 0 .5rem; }
}

/* ───────────────────────────── Barra del percorso ───────────────────────────── */

.ed-indirizzo {
    display: flex;
    align-items: center;
    gap: .375rem;
    height: 44px;
    padding: .375rem 1.25rem;
    border-bottom: 1px solid var(--ed-bordo);
}
.ed-nav { display: flex; gap: 2px; margin-left: -.375rem; }   /* la freccia parte a 20 px come i comandi */
.ed-nav button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--ed-testo);
    cursor: pointer;
    transition: background-color .1s;
}
.ed-nav button i { font-size: 1.1rem; }
.ed-nav button:hover { background: var(--ed-hover); }
.ed-nav button[disabled] { color: var(--ed-muto); opacity: .45; cursor: default; }
.ed-nav button[disabled]:hover { background: transparent; }

.ed-percorso {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 .25rem 0 .5rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .375rem;
    background: var(--form-control-bg);
    overflow: hidden;
}
.ed-percorso > i { color: var(--ed-accento); font-size: 1rem; margin-right: .25rem; }
.ed-briciola {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 .4rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--ed-testo);
    font-size: .8125rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .1s;
}
.ed-briciola:hover { background: var(--ed-hover); }
/* la cartella corrente è un testo, non un pulsante */
.ed-briciola.ed-corrente { font-weight: 600; cursor: default; flex: 0 1 auto; min-width: 60px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
/* i tratti del percorso accettano un rilascio (come in Windows): la cartella superiore è sempre raggiungibile */
.ed-briciola.ed-destinazione { background: var(--ed-sel-fondo); box-shadow: inset 0 0 0 1px var(--ed-accento); }
/* Percorso lungo in poco spazio: i primi tratti si chiudono in «…» (col percorso intero nel suggerimento) */
.ed-briciola.ed-puntini { color: var(--ed-muto); letter-spacing: .1em; }
.ed-percorso .ed-freccia { color: var(--ed-muto); font-size: 1rem; flex: none; }

.ed-cerca {
    position: relative;
    flex: 0 0 240px;
}
.ed-cerca i {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ed-muto);
    font-size: 1rem;
    pointer-events: none;
}
.ed-cerca input {
    width: 100%;
    height: 32px;
    padding: 0 1.85rem 0 1.9rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .375rem;
    background: var(--form-control-bg);
    color: var(--ed-testo);
    font: inherit;
    font-size: .8125rem;
    outline: none;
    transition: border-color .1s;
}
.ed-cerca input::placeholder { color: var(--ed-muto); text-overflow: ellipsis; }
.ed-cerca input::-webkit-search-cancel-button { display: none; }
.ed-cerca .ed-cerca-x {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
}
.ed-cerca .ed-cerca-x i { position: static; transform: none; font-size: 1rem; }
.ed-cerca.ed-piena .ed-cerca-x { display: inline-flex; }
.ed-cerca .ed-cerca-x:hover { background: var(--ed-hover); color: var(--ed-testo); }

@container (max-width: 760px) {
    .ed-cerca { flex-basis: 200px; }   /* quanto basta al suggerimento «Cerca in Allegati»; il percorso si chiude in «…» */
}

/* ───────────────────────────── Area: albero + contenuto ───────────────────────────── */

.ed-area {
    position: relative;
    display: flex;
    height: var(--ed-altezza-area);
    overflow: hidden;
}

/* Albero delle cartelle: chiuso è una linguetta sottile, tutta cliccabile; aperto si sovrappone al
   contenuto; «fissato» torna in colonna e stringe il contenuto. */
.ed-albero {
    position: relative;
    z-index: 6;
    flex: 0 0 var(--ed-albero-stretto);
    width: var(--ed-albero-stretto);
    border-right: 1px solid var(--ed-bordo);
    background: var(--ed-fondo-2);
}
.ed-albero-linguetta {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    padding: .625rem 0 0;
    border: 0;
    background: transparent;
    color: var(--ed-testo);
    cursor: pointer;
    transition: background-color .1s;
}
.ed-albero-linguetta:hover { background: var(--ed-hover); }
.ed-albero-linguetta i { font-size: 1.15rem; line-height: 1; color: var(--ed-accento); }
.ed-albero-linguetta .ed-verticale {
    writing-mode: vertical-rl;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ed-muto);
    user-select: none;
}
/* durante un trascinamento la linguetta si evidenzia: tenendoci sopra l'elemento l'albero si apre */
.ed-albero-linguetta.ed-destinazione { background: var(--ed-sel-fondo); box-shadow: inset 0 0 0 2px var(--ed-sel-bordo); }
.ed-albero-pannello {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ed-albero-largo);
    flex-direction: column;
    background: var(--ed-fondo-sopra);
    border-right: 1px solid var(--ed-bordo);
    box-shadow: var(--ed-ombra);
}
.ed-albero.ed-aperto .ed-albero-pannello { display: flex; }
.ed-albero.ed-aperto .ed-albero-linguetta { display: none; }
/* fissato: in colonna, senza ombra */
.ed-albero.ed-aperto.ed-fisso { flex-basis: var(--ed-albero-largo); width: var(--ed-albero-largo); background: var(--ed-fondo); }
.ed-albero.ed-aperto.ed-fisso .ed-albero-pannello { position: static; box-shadow: none; border-right: 0; height: 100%; background: var(--ed-fondo); }
.ed-albero.ed-aperto.ed-fisso .ed-fissa i { color: var(--ed-accento); }
/* card stretta: anche fissato, l'albero si sovrappone (in colonna lascerebbe due sole tessere) */
@container (max-width: 760px) {
    .ed-albero.ed-aperto.ed-fisso { flex-basis: var(--ed-albero-stretto); width: var(--ed-albero-stretto); background: var(--ed-fondo-2); }
    .ed-albero.ed-aperto.ed-fisso .ed-albero-pannello { position: absolute; box-shadow: var(--ed-ombra); border-right: 1px solid var(--ed-bordo); height: auto; background: var(--ed-fondo-sopra); }
}

.ed-albero-testa {
    display: flex;
    align-items: center;
    gap: .25rem;
    height: 38px;
    padding: 0 .5rem 0 .875rem;
    border-bottom: 1px solid var(--ed-bordo);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ed-muto);
}
.ed-albero-testa .ed-spazio-flex { flex: 1; }
.ed-albero-testa button {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
}
.ed-albero-testa button i { font-size: 1rem; }
.ed-albero-testa button:hover { background: var(--ed-hover); color: var(--ed-testo); }

.ed-albero-lista {
    flex: 1;
    padding: .375rem .375rem .375rem .25rem;
    margin: 0;
    list-style: none;
    outline: none;
}
.ed-albero-lista ul { list-style: none; margin: 0; padding: 0 0 0 .875rem; }
.ed-nodo {
    display: flex;
    align-items: center;
    gap: .2rem;
    height: 28px;
    padding: 0 .375rem 0 .125rem;
    border-radius: .375rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    transition: background-color .1s;
}
.ed-nodo:hover { background: var(--ed-hover); }
.ed-nodo.ed-corrente { background: var(--ed-sel-fondo); color: var(--ed-accento); font-weight: 600; }
.ed-nodo.ed-destinazione { outline: 2px solid var(--ed-sel-bordo); outline-offset: -2px; background: var(--ed-sel-fondo); }
.ed-nodo .ed-chev {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--ed-muto);
    flex: none;
    cursor: pointer;
}
.ed-nodo .ed-chev:hover { background: var(--ed-sel-fondo); color: var(--ed-testo); }
.ed-nodo .ed-chev i { font-size: 1rem; }
/* cartella senza sottocartelle: il chevron occupa lo spazio ma non si vede (classe sua, non quella dello stato «cartella vuota») */
.ed-nodo .ed-chev.ed-chev-vuoto { visibility: hidden; }
.ed-nodo > i.ed-cartella-icona { font-size: 1.05rem; color: color-mix(in srgb, rgb(var(--warning-rgb)) var(--ed-mix-glifo), var(--custom-black)); flex: none; }
.ed-nodo.ed-radice > i.ed-cartella-icona { color: var(--ed-accento); }
.ed-nodo .ed-nome { overflow: hidden; text-overflow: ellipsis; }
.ed-albero-lista li.ed-chiuso > ul { display: none; }

/* Contenuto che scorre */
.ed-contenuto {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    outline: none;
    user-select: none;
}
/* col fuoco da tastiera l'anello sta sull'elemento attivo (ed-fuoco); senza un elemento attivo, sul bordo interno */
.ed-contenuto.ed-con-attivo:focus-visible { box-shadow: none; }
.ed-contenuto:focus-visible .ed-tessera.ed-fuoco { box-shadow: inset 0 0 0 2px var(--ed-accento); }
.ed-contenuto:focus-visible tr.ed-fuoco { outline: 2px solid var(--ed-accento); outline-offset: -2px; }

/* ───────────────────────────── Vista Icone ───────────────────────────── */

.ed-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ed-tessera), 1fr));
    gap: .25rem .375rem;
    padding: .75rem;
    align-content: start;
}
.ed-tessera {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .625rem .375rem .5rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    text-align: center;
    cursor: default;
    transition: background-color .1s, border-color .1s;
}
/* le tessere di una riga sono alte uguali: l'ultimo pezzo (pillola o «14 elementi») va in fondo, così le
   pillole stanno sulla stessa linea anche se un nome prende due righe */
.ed-tessera > :last-child { margin-top: auto; }
.ed-tessera:hover { background: var(--ed-hover); }
.ed-tessera.ed-selezionato { background: var(--ed-sel-fondo); border-color: var(--ed-sel-bordo); }
.ed-tessera.ed-selezionato:hover { background: rgba(var(--primary-rgb), .15); }
.ed-tessera.ed-trascinato { opacity: .4; }
.ed-tessera.ed-destinazione {
    background: var(--ed-sel-fondo);
    border-color: var(--ed-accento);
    box-shadow: 0 0 0 2px var(--ed-sel-bordo);
}
.ed-tessera.ed-tagliato .ed-pastiglia { opacity: .5; }

/* Casella di spunta e «altre azioni» al passaggio del mouse (come le «caselle di controllo» di Windows 11):
   chi non prova Ctrl o il tasto destro scopre così selezione multipla e menu */
.ed-casella {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ed-muto);
    border-radius: 3px;
    background: var(--ed-fondo);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}
.ed-casella i { display: none; }
.ed-selezionato .ed-casella, .ed-casella.ed-piena { background: var(--ed-primario); border-color: var(--ed-primario); }
.ed-selezionato .ed-casella i, .ed-casella.ed-piena i { display: inline; }
.ed-casella.ed-parziale { background: var(--ed-primario); border-color: var(--ed-primario); }
.ed-casella.ed-parziale i { display: inline; }
.ed-tessera .ed-casella { position: absolute; left: 6px; top: 6px; visibility: hidden; }
.ed-tessera:hover .ed-casella, .ed-tessera.ed-selezionato .ed-casella, .ed-tessera.ed-fuoco .ed-casella { visibility: visible; }
.ed-altro {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
    flex: none;
}
.ed-altro i { font-size: 1rem; }
.ed-altro:hover { background: var(--ed-hover); color: var(--ed-testo); }
.ed-tessera .ed-altro { position: absolute; right: 4px; top: 4px; visibility: hidden; }
.ed-tessera:hover .ed-altro, .ed-tessera.ed-selezionato .ed-altro { visibility: visible; }

/* Pastiglia e glifo */
.ed-pastiglia {
    width: var(--ed-pastiglia);
    height: var(--ed-pastiglia);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ed-tinta-fondo);
    color: var(--ed-tinta-glifo);
}
.ed-pastiglia i { font-size: 28px; line-height: 1; }
.ed-tessera.ed-cartella .ed-pastiglia i { font-size: 30px; }

/* Nella griglia il nome è senza estensione (la dice la pillola, come fa Windows): due righe al massimo,
   poi i puntini; una parola troppo lunga si spezza solo se non c'è altro modo */
.ed-tessera .ed-nome {
    width: 100%;
    font-size: .75rem;
    line-height: 1.25;
    color: var(--ed-testo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}
/* niente testo sotto gli 11 px: in Desktop remoto si impasta */
.ed-tessera .ed-sotto {
    font-size: .6875rem;
    line-height: 1;
    color: var(--ed-muto);
}
/* nei risultati di una ricerca: in quale sottocartella sta il documento */
.ed-dove { font-size: .6875rem; line-height: 1.2; color: var(--ed-muto); }
.ed-pillola {
    display: inline-block;
    padding: .2rem .4rem;
    border-radius: .25rem;        /* come i badge del portale */
    background: var(--ed-tinta-fondo);
    color: var(--ed-tinta-testo);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
/* Pillola neutra per zip/txt e simili: leggibile sul fondo tenue in tutti e due i temi */
.ed-tipo-neutro .ed-pillola { color: var(--ed-testo); }
/* il termine cercato, evidenziato nel nome */
.ed-evid { background: var(--ed-sel-fondo); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Rinomina sul posto */
.ed-rinomina {
    width: calc(100% + .5rem);
    margin: 0 -.25rem;
    padding: .2rem .3rem;
    border: 1px solid var(--ed-accento);
    border-radius: .25rem;
    background: var(--form-control-bg);
    color: var(--ed-testo);
    font: inherit;
    font-size: .75rem;
    text-align: center;
    outline: none;
    box-shadow: 0 0 0 2px var(--ed-sel-fondo);
}
.ed-rinomina.ed-errore, .ed-rinomina.ed-errore:focus-visible { border-color: rgb(var(--danger-rgb)); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .15); }
/* messaggio sotto il campo: errore (rosso) o avviso sull'estensione (giallo scurito) */
.ed-rinomina-msg { width: 100%; font-size: .6875rem; line-height: 1.3; color: rgb(var(--danger-rgb)); text-align: center; }
.ed-rinomina-msg.ed-attenzione { color: color-mix(in srgb, rgb(var(--warning-rgb)) var(--ed-mix-testo), var(--custom-black)); }
.ed-tabella .ed-rinomina { width: auto; min-width: 220px; margin: 0; text-align: left; }
.ed-tabella .ed-rinomina-msg { width: auto; text-align: left; white-space: normal; }

/* ───────────────────────────── Vista Dettagli ───────────────────────────── */

.ed-tabella {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.ed-tabella th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 34px;
    padding: 0;
    border-bottom: 1px solid var(--ed-bordo);
    /* fascia tenue che resta coprente anche nel tema scuro, dove --default-background è trasparente */
    background: linear-gradient(var(--ed-fondo-2), var(--ed-fondo-2)), var(--ed-fondo);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}
/* l'intestazione è un pulsante: si ordina anche da tastiera */
.ed-tabella th .ed-th {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    gap: .2rem;
    padding: 0 .75rem;
    border: 0;
    background: transparent;
    color: var(--ed-muto);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.ed-tabella th .ed-th:hover { color: var(--ed-testo); }
.ed-tabella th .ed-th:focus-visible { box-shadow: inset 0 0 0 2px var(--ed-accento); }
.ed-tabella th .ed-ordine { font-size: .85rem; visibility: hidden; }
.ed-tabella th[aria-sort] .ed-ordine { visibility: visible; color: var(--ed-accento); }
.ed-tabella th[aria-sort] .ed-th { color: var(--ed-testo); }
.ed-tabella th.ed-col-nome .ed-th-nome { display: flex; align-items: center; gap: .5rem; padding-left: .75rem; }
.ed-tabella th.ed-col-nome .ed-th-nome .ed-th { padding-left: 0; }
.ed-tabella th.ed-col-dim .ed-th { justify-content: flex-end; }
.ed-tabella td {
    padding: 0 .75rem;
    height: 36px;
    border-bottom: 1px solid var(--ed-bordo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.ed-tabella tr { transition: background-color .1s; }
.ed-tabella tbody tr:hover td { background: var(--ed-hover); }
.ed-tabella tbody tr.ed-selezionato td { background: var(--ed-sel-fondo); }
.ed-tabella tbody tr.ed-selezionato td:first-child { box-shadow: inset 3px 0 0 var(--ed-accento); }
.ed-tabella tbody tr.ed-destinazione td { background: var(--ed-sel-fondo); box-shadow: inset 0 0 0 1px var(--ed-accento); }
.ed-tabella tbody tr.ed-trascinato td { opacity: .4; }
/* elementi tagliati: glifo e nome al 50 %, anche qui */
.ed-tabella tbody tr.ed-tagliato .ed-cella-nome > i, .ed-tabella tbody tr.ed-tagliato .ed-nome { opacity: .5; }
.ed-tabella .ed-col-nome { width: auto; }
.ed-tabella .ed-col-data { width: 150px; }
.ed-tabella .ed-col-tipo { width: 170px; }
.ed-tabella .ed-col-dim { width: 112px; text-align: right; }
.ed-tabella .ed-col-autore { width: 150px; }
.ed-tabella td.ed-col-dim { font-variant-numeric: tabular-nums; }
.ed-tabella td.ed-col-data, .ed-tabella td.ed-col-tipo, .ed-tabella td.ed-col-autore, .ed-tabella td.ed-col-dim { color: var(--ed-muto); }
.ed-tabella .ed-cella-nome { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ed-tabella .ed-cella-nome > i { font-size: 1.15rem; color: var(--ed-tinta-glifo); flex: none; }
.ed-tabella .ed-cella-nome .ed-nome { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ed-tabella .ed-cella-nome .ed-dove { flex: none; }
/* la casella resta nel flusso (nascosta, non tolta) così glifi e nomi non si spostano al passaggio del mouse */
.ed-tabella .ed-cella-nome .ed-casella { visibility: hidden; }
.ed-tabella tbody tr:hover .ed-casella, .ed-tabella tbody tr.ed-selezionato .ed-casella, .ed-tabella tbody tr.ed-fuoco .ed-casella { visibility: visible; }
.ed-tabella .ed-cella-nome .ed-altro { margin-left: auto; visibility: hidden; }
.ed-tabella tbody tr:hover .ed-altro, .ed-tabella tbody tr.ed-selezionato .ed-altro { visibility: visible; }
/* nei Dettagli il tipo lo dice già la colonna: la pillola compare solo quando la colonna sparisce */
.ed-tabella .ed-cella-nome .ed-pillola { flex: none; display: none; }

/* Card stretta: prima sparisce «Tipo» (ripete glifo e pillola), poi «Caricato da» */
@container (max-width: 860px) {
    .ed-tabella .ed-col-tipo { display: none; }
    .ed-tabella .ed-cella-nome .ed-pillola { display: inline-block; }
}
@container (max-width: 700px) {
    .ed-tabella .ed-col-autore { display: none; }
}

/* ───────────────────────────── Cartella vuota / nessun risultato ───────────────────────────── */

.ed-vuoto {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: 2rem;
    text-align: center;
}
.ed-vuoto > i { font-size: 56px; line-height: 1; color: var(--ed-muto); opacity: .4; margin-bottom: .5rem; }
.ed-vuoto h6 { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ed-testo); }
.ed-vuoto p { margin: 0; color: var(--ed-muto); max-width: 380px; }
.ed-vuoto .ed-vuoto-azioni { display: flex; gap: .5rem; margin-top: .75rem; }
.ed-vuoto .ed-btn { border-color: var(--ed-bordo-campo); }

/* ───────────────────────────── Riquadro di selezione ───────────────────────────── */

.ed-riquadro {
    position: absolute;
    z-index: 4;
    border: 1px solid var(--ed-accento);
    background: rgba(var(--primary-rgb), .14);
    pointer-events: none;
}

/* ───────────────────────────── Rilascio dal PC ───────────────────────────── */

/* niente backdrop-filter: in Desktop remoto costa e il contenuto sembrava rotto */
.ed-rilascio {
    position: absolute;
    inset: .5rem;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 2px dashed var(--ed-sel-bordo);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--ed-fondo) 72%, transparent);
    pointer-events: none;
    text-align: center;
}
.ed-rilascio-scatola {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.25rem 2rem;
    border-radius: .75rem;
    background: var(--ed-fondo-sopra);
    box-shadow: var(--ed-ombra);
}
.ed-rilascio-scatola i { font-size: 40px; line-height: 1; color: var(--ed-accento); }
.ed-rilascio-scatola strong { font-size: .9375rem; font-weight: 600; color: var(--ed-testo); }
.ed-rilascio-scatola span { font-size: .75rem; color: var(--ed-muto); }
/* variante «qui non si può»: sola lettura o spazio esaurito */
.ed-rilascio.ed-rilascio-no { border-color: rgba(var(--danger-rgb), .5); }
.ed-rilascio.ed-rilascio-no .ed-rilascio-scatola i { color: rgb(var(--danger-rgb)); }

/* Fantasma del trascinamento interno */
.ed-fantasma {
    position: fixed;
    z-index: 1120;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .625rem .375rem .375rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .5rem;
    background: var(--ed-fondo-sopra);
    box-shadow: var(--ed-ombra-menu);
    pointer-events: none;
    font-size: .75rem;
    color: var(--ed-testo);
}
.ed-fantasma .ed-pila { position: relative; width: 34px; height: 30px; flex: none; }
.ed-fantasma .ed-pila i {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--ed-tinta-fondo);
    color: var(--ed-tinta-glifo);
    font-size: 15px;
}
.ed-fantasma .ed-pila i:nth-child(2) { left: 4px; top: 2px; }
.ed-fantasma .ed-pila i:nth-child(3) { left: 8px; top: 4px; }
.ed-fantasma .ed-conta {
    position: absolute;
    right: -6px;
    top: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ed-primario);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ed-fantasma strong { font-weight: 600; }
.ed-fantasma small { display: block; color: var(--ed-muto); }

/* ───────────────────────────── Coda delle operazioni ───────────────────────────── */

.ed-coda {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 9;
    width: 424px;
    max-width: calc(100% - 1.5rem);
    max-height: calc(100% - 1.5rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .5rem;
    background: var(--ed-fondo-sopra);
    box-shadow: var(--ed-ombra);
}
.ed-coda-testa {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .5rem 0 .875rem;
    border-bottom: 1px solid var(--ed-bordo);
    font-weight: 600;
}
.ed-coda-testa .ed-spazio-flex { flex: 1; }
.ed-coda-testa .ed-link {
    border: 0;
    border-radius: .25rem;
    padding: .2rem .375rem;
    background: transparent;
    color: var(--ed-accento);
    font-size: .75rem;
    cursor: pointer;
}
.ed-coda-testa .ed-link:hover { text-decoration: underline; }
.ed-coda-testa .ed-chiudi {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
}
.ed-coda-testa .ed-chiudi:hover { background: var(--ed-hover); color: var(--ed-testo); }
.ed-coda-lista { overflow-y: auto; }
.ed-op {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-areas: "icona titolo azione" "icona dettaglio azione" "icona barra azione";
    column-gap: .625rem;
    row-gap: .2rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--ed-bordo);
}
.ed-op:last-child { border-bottom: 0; }
.ed-op-icona {
    grid-area: icona;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ed-tinta-fondo);
    color: var(--ed-tinta-glifo);
}
.ed-op-icona i { font-size: 18px; }
.ed-op-titolo { grid-area: titolo; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* il dettaglio può andare su due righe: a 1280 px «… · circa 2 min» non ci stava in una */
.ed-op-dettaglio { grid-area: dettaglio; font-size: .75rem; line-height: 1.35; color: var(--ed-muto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-op-azione { grid-area: azione; align-self: center; }
.ed-barra { grid-area: barra; height: 6px; margin-top: .2rem; border-radius: 999px; background: var(--ed-traccia); overflow: hidden; }
.ed-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--ed-accento); }
/* indeterminata: righe oblique ferme (niente movimento), tenui per non sembrare una barra piena */
.ed-barra.ed-indeterminata > span {
    width: 100%;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ed-accento) 35%, transparent) 0 10px, color-mix(in srgb, var(--ed-accento) 12%, transparent) 10px 20px);
}
.ed-op.ed-finita .ed-op-icona { --ed-tinta-rgb: var(--success-rgb); }
.ed-op.ed-errore .ed-op-icona { --ed-tinta-rgb: var(--danger-rgb); }
.ed-op.ed-errore .ed-op-dettaglio { color: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--ed-testo)); }
.ed-op.ed-annullata .ed-op-icona { background: var(--ed-fondo-2); color: var(--ed-muto); }
.ed-op.ed-annullata .ed-op-titolo { color: var(--ed-muto); font-weight: 500; }
.ed-op .ed-btn { height: 28px; font-size: .75rem; border-color: var(--ed-bordo-campo); }

/* ───────────────────────────── Barra di stato ───────────────────────────── */

.ed-stato {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 36px;
    padding: 0 1.25rem;
    border-top: 1px solid var(--ed-bordo);
    font-size: .75rem;
    color: var(--ed-muto);
}
.ed-stato #ed-stato-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-stato .ed-stato-sel { color: var(--ed-testo); font-weight: 600; }
.ed-stato .ed-spazio-flex { flex: 1; }
.ed-chip-coda {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 26px;
    padding: 0 .625rem 0 .5rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: 999px;
    background: var(--ed-fondo);
    color: var(--ed-testo);
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .1s;
}
.ed-chip-coda:hover { background: var(--ed-hover); }
.ed-chip-coda.ed-attivo { border-color: var(--ed-sel-bordo); background: var(--ed-sel-fondo); color: var(--ed-accento); }
.ed-chip-coda i { font-size: 1rem; color: var(--ed-accento); }
.ed-chip-coda.ed-chip-errore i { color: rgb(var(--danger-rgb)); }
.ed-chip-coda .ed-mini-barra { width: 56px; height: 4px; border-radius: 999px; background: var(--ed-traccia); overflow: hidden; }
.ed-chip-coda .ed-mini-barra span { display: block; height: 100%; background: var(--ed-accento); }

/* ───────────────────────────── Menu contestuale ───────────────────────────── */

.ed-menu {
    position: fixed;
    z-index: 1110;                 /* sopra .modal (105) del tema: il componente potrà stare anche in una finestra */
    min-width: 228px;
    padding: .25rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .5rem;
    background: var(--ed-fondo-sopra);
    box-shadow: var(--ed-ombra-menu);
    font-size: .8125rem;
    outline: none;
}
.ed-menu-voce {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    height: 32px;
    padding: 0 .625rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--ed-testo);
    text-align: left;
    cursor: pointer;
    transition: background-color .1s, color .1s;
}
.ed-menu-voce i { font-size: 1.05rem; color: var(--ed-accento); width: 18px; text-align: center; }
.ed-menu-voce:hover, .ed-menu-voce:focus-visible { background: var(--ed-primario-tenue); color: var(--ed-accento); box-shadow: none; }
.ed-menu-voce .ed-scorciatoia { margin-left: auto; font-size: .6875rem; color: var(--ed-muto); }
.ed-menu-voce[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.ed-menu-voce.ed-pericolo i { color: rgb(var(--danger-rgb)); }
.ed-menu-voce.ed-pericolo:hover, .ed-menu-voce.ed-pericolo:focus-visible { background: rgba(var(--danger-rgb), .08); color: rgb(var(--danger-rgb)); }
.ed-menu-sep { height: 1px; margin: .25rem .5rem; background: var(--ed-bordo-campo); }
.ed-menu-voce .ed-spunta { margin-left: auto; color: var(--ed-accento); font-size: 1rem; width: auto; }

/* ───────────────────────────── Dialoghi ───────────────────────────── */

.ed-velo {
    position: fixed;
    inset: 0;
    z-index: 1100;                 /* sopra .modal (105) del tema */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
}
[data-theme-mode=dark] .ed-velo { background: rgba(0, 0, 0, .62); }
/* stesse misure delle finestre del tema (.modal-content): raggio .5rem, margini 1rem 1.25rem */
.ed-dialogo {
    width: 480px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ed-bordo);
    border-radius: .5rem;
    background: var(--ed-fondo-sopra);
    color: var(--ed-testo);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .28);
}
.ed-dialogo-testa {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ed-bordo);
}
.ed-dialogo-testa .ed-dialogo-icona {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ed-tinta-fondo);
    color: var(--ed-tinta-glifo);
    flex: none;
}
.ed-dialogo-testa .ed-dialogo-icona i { font-size: 18px; }
.ed-dialogo-testa h5 { margin: 0; flex: 1; font-size: .9375rem; font-weight: 600; }
.ed-dialogo-testa .ed-chiudi {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--ed-muto);
    cursor: pointer;
}
.ed-dialogo-testa .ed-chiudi:hover { background: var(--ed-hover); color: var(--ed-testo); }
.ed-dialogo-corpo { padding: 1rem 1.25rem; overflow-y: auto; }
.ed-dialogo-corpo p { margin: 0 0 .75rem; }
.ed-dialogo-corpo p:last-child { margin-bottom: 0; }
.ed-dialogo-corpo small, .ed-dialogo-corpo .ed-muto { color: var(--ed-muto); }
.ed-dialogo-piede {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ed-bordo);
}
.ed-dialogo-piede .ed-spazio-flex { flex: 1; }
/* Il btn-light del tema ha lo stesso colore della superficie «sopra» nel tema scuro: qui prende un bordo e
   un fondo appena diversi, così «Salta» e «Annulla» restano pulsanti in tutti e due i temi */
.ed-dialogo .btn-light { border: 1px solid var(--ed-bordo-campo); background-color: var(--ed-fondo-2); }
.ed-dialogo .btn-light:hover { background-color: var(--ed-hover); }
/* «Sostituisci»: chiaro ma rosso, non è più il pulsante predefinito */
.ed-dialogo .btn-light.ed-btn-rosso { color: rgb(var(--danger-rgb)); }
.ed-dialogo .btn-light.ed-btn-rosso:hover { background-color: rgba(var(--danger-rgb), .1); }
.ed-dialogo .btn:focus-visible { box-shadow: var(--ed-anello); }
.ed-dialogo .ed-pericolo { --ed-tinta-rgb: var(--danger-rgb); }
.ed-dialogo .ed-attenzione { --ed-tinta-rgb: var(--warning-rgb); }
.ed-dialogo .ed-nota {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .625rem .75rem;
    border-radius: .5rem;
    font-size: .75rem;
    line-height: 1.45;
    background: rgba(var(--warning-rgb), .12);
    color: var(--ed-testo);
}
.ed-dialogo .ed-nota i { color: rgb(var(--warning-rgb)); font-size: 1rem; flex: none; }
.ed-dialogo .ed-nota-muta { background: var(--ed-fondo-2); }
.ed-dialogo .ed-nota-muta i { color: var(--ed-muto); }
.ed-dialogo .ed-nota + .ed-nota { margin-top: .5rem; }
.ed-dialogo .ed-spunta-riga {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .875rem;
    font-size: .8125rem;
    cursor: pointer;
}
.ed-dialogo .ed-spunta-riga input { width: 15px; height: 15px; margin: 0; accent-color: var(--ed-primario); }
.ed-dialogo .ed-spunta-riga input[disabled] + span { color: var(--ed-muto); }
/* elenco dei nomi nella conferma di eliminazione */
.ed-dialogo .ed-elenco-nomi { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--ed-fondo-2); list-style: none; font-size: .75rem; line-height: 1.6; }
.ed-dialogo .ed-elenco-nomi li { display: flex; align-items: center; gap: .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-dialogo .ed-elenco-nomi li i { color: var(--ed-tinta-glifo); font-size: .95rem; flex: none; }
.ed-dialogo .ed-elenco-nomi li.ed-muto { color: var(--ed-muto); }

/* Conflitto di nomi: i due file a confronto */
.ed-confronto { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0 0; }
.ed-confronto > div {
    padding: .625rem .75rem;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .5rem;
    background: var(--ed-fondo-2);
}
.ed-confronto .ed-eti-piccola {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ed-muto);
    margin-bottom: .25rem;
}
.ed-confronto .ed-riga-file { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.ed-confronto .ed-riga-file i { font-size: 1.15rem; color: var(--ed-tinta-glifo); }
.ed-confronto small { display: block; color: var(--ed-muto); margin-top: .2rem; font-size: .6875rem; line-height: 1.4; }
/* «più recente» / «più grande» sul file che vince il confronto */
.ed-confronto .ed-etichette { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .4rem; }
.ed-confronto .ed-etichetta { padding: .15rem .4rem; border-radius: .25rem; background: rgba(var(--success-rgb), .12); color: color-mix(in srgb, rgb(var(--success-rgb)) var(--ed-mix-testo), var(--custom-black)); font-size: .6875rem; font-weight: 600; }
.ed-dialogo .ed-esito { margin-top: .75rem; font-size: .75rem; color: var(--ed-muto); }
.ed-dialogo .ed-esito strong { color: var(--ed-testo); font-weight: 600; }

/* Invia per e-mail: elenco allegati */
.ed-allegati {
    max-height: 190px;
    overflow-y: auto;
    margin: .5rem 0;
    border: 1px solid var(--ed-bordo-campo);
    border-radius: .5rem;
}
.ed-allegati .ed-allegato {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding: 0 .375rem 0 .75rem;
    border-bottom: 1px solid var(--ed-bordo);
}
.ed-allegati .ed-allegato:last-child { border-bottom: 0; }
.ed-allegati .ed-allegato i { font-size: 1.1rem; color: var(--ed-tinta-glifo); flex: none; }
.ed-allegati .ed-allegato .ed-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-allegati .ed-allegato .ed-dim { color: var(--ed-muto); font-variant-numeric: tabular-nums; font-size: .75rem; white-space: nowrap; }
.ed-allegati .ed-allegato .ed-altro { color: var(--ed-muto); }
.ed-allegati .ed-allegato .ed-altro i { color: inherit; font-size: 1rem; }
.ed-totale { display: flex; justify-content: space-between; font-size: .8125rem; margin-bottom: .75rem; }
.ed-totale strong { font-weight: 600; }
.ed-totale .ed-oltre { color: rgb(var(--danger-rgb)); }

/* ───────────────────────────── Tipi di file: tinta e glifo ───────────────────────────── */

/* Ogni elemento che cambia --ed-tinta-rgb deve anche ricavare di nuovo le variabili che ne dipendono */
.ed-tipo-cartella, .ed-tipo-pdf, .ed-tipo-word, .ed-tipo-excel, .ed-tipo-ppt, .ed-tipo-immagine, .ed-tipo-video,
.ed-tipo-cad, .ed-tipo-firmato, .ed-tipo-email, .ed-tipo-neutro,
.ed-op.ed-finita .ed-op-icona, .ed-op.ed-errore .ed-op-icona, .ed-dialogo .ed-pericolo, .ed-dialogo .ed-attenzione {
    --ed-tinta: rgb(var(--ed-tinta-rgb));
    --ed-tinta-fondo: rgba(var(--ed-tinta-rgb), var(--ed-tinta-alfa));
    --ed-tinta-glifo: color-mix(in srgb, var(--ed-tinta) var(--ed-mix-glifo), var(--custom-black));
    --ed-tinta-testo: color-mix(in srgb, var(--ed-tinta) var(--ed-mix-testo), var(--custom-black));
}
.ed-tipo-cartella { --ed-tinta-rgb: var(--warning-rgb); }
.ed-tipo-pdf      { --ed-tinta-rgb: var(--danger-rgb); }
.ed-tipo-word     { --ed-tinta-rgb: var(--info-rgb); }
.ed-tipo-excel    { --ed-tinta-rgb: var(--success-rgb); }
/* PowerPoint: l'arancio del tema si confondeva col giallo delle cartelle, qui tira al rosso come il programma */
.ed-tipo-ppt      { --ed-tinta-rgb: var(--orange-rgb); --ed-tinta: color-mix(in srgb, rgb(var(--orange-rgb)) 65%, rgb(var(--danger-rgb))); --ed-tinta-fondo: color-mix(in srgb, var(--ed-tinta) calc(var(--ed-tinta-alfa) * 100%), transparent); }
.ed-tipo-immagine { --ed-tinta-rgb: var(--pink-rgb); }
.ed-tipo-video    { --ed-tinta-rgb: var(--purple-rgb); }
.ed-tipo-cad      { --ed-tinta-rgb: var(--teal-rgb); }
/* firmati: sono quasi sempre PDF firmati, li distinguono lo scudo e la pillola «PDF+P7M» */
.ed-tipo-firmato  { --ed-tinta-rgb: var(--danger-rgb); }
/* e-mail: il blu del portale (Word usa l'azzurro --info, che era quasi uguale al --secondary di prima) */
.ed-tipo-email    { --ed-tinta-rgb: var(--primary-rgb); }
/* neutri (zip, testo, codice, audio, altro): grigio del tema, pastiglia appena accennata */
.ed-tipo-neutro   { --ed-tinta: var(--text-muted); --ed-tinta-fondo: rgba(var(--dark-rgb), .07); }
[data-theme-mode=dark] .ed-tipo-neutro { --ed-tinta-fondo: rgba(var(--dark-rgb), .1); }
/* Il blu del portale e il viola sono scuri: nel tema scuro si schiariscono mescolandoli col «nero» del tema (bianco lì) */
[data-theme-mode=dark] .ed-tipo-email { --ed-tinta: color-mix(in srgb, rgb(var(--primary-rgb)) 55%, var(--custom-black)); --ed-tinta-fondo: rgba(var(--primary-rgb), .3); }
[data-theme-mode=dark] .ed-tipo-video { --ed-tinta: color-mix(in srgb, rgb(var(--purple-rgb)) 65%, var(--custom-black)); }

/* ───────────────────────────── Meno movimento ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ed-card *, .ed-menu *, .ed-velo * { transition: none !important; }
}