/*
    Esplora documenti («Documentazione varia») — le aggiunte del portale al disegno.

    esplora-documenti.css è la copia SENZA modifiche di quello del disegno (_Documenti/Proposte/esplora-documenti):
    se il disegno cambia lo si ricopia. Qui sta solo ciò che il disegno non aveva o che il componente Blazor fa
    diversamente, con le stesse regole: prefisso .ed-, solo variabili del tema (e le --ed-… del disegno), nessuna
    animazione. Va linkato DOPO esplora-documenti.css.
*/

/* Il componente avvolge card, menu e dialoghi in un contenitore (serve al JS per trovarli): non deve
   cambiare l'impaginazione della colonna in cui sta */
.ed-ospite { display: contents; }

/* Zona cartelle + documenti più bassa del 20 % rispetto al disegno (richiesta dell'utente del 20/10): 520 → 416 px.
   Stessa specificità della regola del disegno, che sta in esplora-documenti.css, linkato prima: vince questa.
   Nella finestra della gara la zona non usa questa misura (prende l'altezza che resta, vedi .ed-finestra). */
.ed-card { --ed-altezza-area: 416px; }

/* Nel disegno la riga della barra di stato aveva un id; qui una classe, perché il componente può stare due
   volte nella stessa pagina */
.ed-stato .ed-stato-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────────────── Ricerca ───────────────────────────── */

/* «in “Certificati”» nei risultati: è un pulsante (porta a quella cartella) che si presenta come il testo
   del disegno */
button.ed-dove {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
}
button.ed-dove:hover { color: var(--ed-accento); text-decoration: underline; }

/* La colonna «Cartella» dei risultati nella vista Dettagli: il percorso, che porta lì */
.ed-tabella .ed-col-cartella { width: 200px; }
.ed-tabella td.ed-col-cartella { color: var(--ed-muto); }
.ed-link-cartella {
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ed-accento);
    font: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ed-link-cartella:hover { text-decoration: underline; }
/* con la colonna «Cartella» il nome non ripete «in “…”»; quando la colonna sparisce, torna nel nome */
.ed-tabella-risultati .ed-cella-nome .ed-dove { display: none; }
/* nei risultati lo spazio di «Tipo» va al nome: il tipo lo dice la pillola, come quando la card è stretta */
.ed-tabella-risultati .ed-col-tipo { display: none; }
.ed-tabella-risultati .ed-cella-nome .ed-pillola { display: inline-block; }
@container (max-width: 700px) {
    .ed-tabella .ed-col-cartella { display: none; }
    .ed-tabella-risultati .ed-cella-nome .ed-dove { display: inline; }
}

/* Interruttore «Solo in questa cartella» nella barra di stato, mentre si cerca */
.ed-solo-qui {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    font-size: .75rem;
    color: var(--ed-muto);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.ed-solo-qui:hover { color: var(--ed-testo); }
.ed-solo-qui input { width: 14px; height: 14px; margin: 0; accent-color: var(--ed-primario); }

/* ───────────────────────────── Proprietà ───────────────────────────── */

/* Il pulsante (i) della barra con selezione sta DENTRO il distanziatore del disegno (.ed-spazio-flex: flex 1,
   base 0, che non fa mai andare a capo la barra) e si vede solo se lì c'è posto. Il distanziatore diventa un
   contenitore: la sua larghezza è lo spazio vuoto fra «Elimina» e «Carica file», e non dipende dal pulsante.
   Così la barra è quella della prova a ogni larghezza; quando non c'è posto, Proprietà resta nel menu, nel «⋯»
   e con Alt+Invio. Il padding si fissa perché le @container senza nome del disegno, dentro questo contenitore,
   misurerebbero lui e non la card. */
.ed-comandi .ed-posto-proprieta {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    /* Restituisce lo spazio fra i pulsanti (gap di .ed-gruppo) che lo precede: così non finisce mai da solo su
       una riga nuova. Nel disegno, quando i pulsanti riempiono la riga al pixel, il distanziatore vuoto ci finiva
       (2 px in più, invisibili); qui, largo quanto la riga, mostrerebbe la (i) su una seconda riga. */
    margin-left: -.125rem;
    container: ed-posto / inline-size;
}
.ed-comandi .ed-posto-proprieta .ed-btn.ed-btn-icona { flex: none; padding: 0; }
@container ed-posto (max-width: 39.98px) {
    .ed-comandi .ed-posto-proprieta .ed-btn { display: none; }
}

.ed-dialogo.ed-dialogo-proprieta { width: 540px; }
/* la testata è quella degli altri dialoghi, con il glifo del tipo grande come nella vista Icone */
.ed-dialogo-proprieta .ed-dialogo-testa .ed-dialogo-icona { width: 44px; height: 44px; border-radius: 12px; }
.ed-dialogo-proprieta .ed-dialogo-testa .ed-dialogo-icona i { font-size: 24px; }
.ed-dialogo-proprieta .ed-dialogo-testa h5 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-proprieta-elenco {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .5rem 1.25rem;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.4;
}
.ed-proprieta-elenco dt { margin: 0; font-weight: 500; color: var(--ed-muto); }
.ed-proprieta-elenco dd { margin: 0; color: var(--ed-testo); overflow-wrap: anywhere; }
.ed-proprieta-elenco .ed-impronta { display: flex; align-items: flex-start; gap: .5rem; }
.ed-proprieta-elenco .ed-impronta code {
    flex: 1;
    min-width: 0;
    padding: .25rem .375rem;
    border-radius: .25rem;
    background: var(--ed-fondo-2);
    color: var(--ed-testo);
    font-size: .6875rem;
    line-height: 1.45;
    word-break: break-all;
}
.ed-proprieta-elenco .ed-impronta .ed-btn { flex: none; height: 26px; font-size: .75rem; border-color: var(--ed-bordo-campo); }
.ed-proprieta-elenco .ed-link-cartella { white-space: normal; overflow-wrap: anywhere; }

/* ───────────────────────────── Riquadro di riepilogo (RiquadroDocumenti) ───────────────────────────── */

/* Nella colonna di destra della scheda gara: una card come le altre della colonna (titolo h6 in grassetto con
   l'icona), che si clicca tutta per aprire la finestra. Stesso linguaggio della card «Gara correlata» del
   progetto (pas-card-cliccabile): bordo colorato al passaggio e al fuoco, contorno col fuoco da tastiera, ma nel
   colore del titolo e senza transizione. Selettori con .card.custom-card: gli stili pagina «Classic» e «Modern»
   del tema azzerano l'ombra delle card con [data-page-style] .card.custom-card. */
.ed-riepilogo {
    --ed-riepilogo-accento: rgb(var(--primary-rgb));
    --ed-riepilogo-anello: rgba(var(--primary-rgb), .55);
    --ed-riepilogo-muto: color-mix(in srgb, var(--text-muted) 55%, var(--default-text-color));
    --ed-riepilogo-traccia: rgba(var(--dark-rgb), .08);
}
/* nel tema scuro il primario (58,88,146) sul fondo della card non si legge: si schiarisce come --ed-accento */
[data-theme-mode=dark] .ed-riepilogo {
    --ed-riepilogo-accento: color-mix(in srgb, rgb(var(--primary-rgb)) 55%, var(--custom-black));
    --ed-riepilogo-anello: color-mix(in srgb, rgb(var(--primary-rgb)) 70%, var(--custom-black));
    --ed-riepilogo-muto: var(--text-muted);
}
.card.custom-card.ed-riepilogo[role=button] { cursor: pointer; }
.card.custom-card.ed-riepilogo[role=button]:hover,
.card.custom-card.ed-riepilogo[role=button]:focus-visible { box-shadow: 0 0 0 2px var(--ed-riepilogo-anello); }
.card.custom-card.ed-riepilogo[role=button]:focus-visible { outline: 2px solid var(--ed-riepilogo-accento); outline-offset: 2px; }

/* «Apri ›» accanto al titolo: un segno, non un pulsante (il pulsante è tutto il riquadro) */
.ed-riepilogo-apri {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ed-riepilogo-accento);
    white-space: nowrap;
}
.ed-riepilogo-apri i { font-size: 1rem; line-height: 1; }
.ed-riepilogo[role=button]:hover .ed-riepilogo-apri { text-decoration: underline; }

/* File e cartelle */
.ed-riepilogo-conti {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    margin-bottom: .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--default-text-color);
}
.ed-riepilogo-conti span { display: inline-flex; align-items: center; gap: .375rem; }
.ed-riepilogo-conti i { font-size: 1rem; font-weight: 400; color: var(--ed-riepilogo-accento); }

/* Spazio usato: testo e barretta, con i colori e le soglie dell'indicatore del componente (.ed-spazio) */
.ed-riepilogo-spazio-testo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .375rem;
    font-size: .75rem;
    color: var(--ed-riepilogo-muto);
}
.ed-riepilogo-spazio-testo strong { font-weight: 600; color: var(--default-text-color); }
.ed-riepilogo-barra { height: 6px; border-radius: 999px; background: var(--ed-riepilogo-traccia); overflow: hidden; }
.ed-riepilogo-barra > div { height: 100%; border-radius: 999px; background: rgb(var(--success-rgb)); }
.ed-riepilogo-attenzione .ed-riepilogo-barra > div { background: rgb(var(--warning-rgb)); }
.ed-riepilogo-esaurito .ed-riepilogo-barra > div { background: rgb(var(--danger-rgb)); }
.ed-riepilogo-esaurito .ed-riepilogo-spazio-testo strong { color: rgb(var(--danger-rgb)); }

/* Avviso sullo spazio: come .ed-avviso del componente, in piccolo */
.ed-riepilogo-avviso {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .75rem;
    padding: .5rem .625rem;
    border-radius: .375rem;
    font-size: .75rem;
    line-height: 1.45;
    background: rgba(var(--danger-rgb), .08);
    color: var(--default-text-color);
}
.ed-riepilogo-avviso i { font-size: 1rem; line-height: 1.1; color: rgb(var(--danger-rgb)); }
.ed-riepilogo-avviso strong { font-weight: 600; }
.ed-riepilogo-attenzione .ed-riepilogo-avviso { background: rgba(var(--warning-rgb), .12); }
.ed-riepilogo-attenzione .ed-riepilogo-avviso i { color: rgb(var(--warning-rgb)); }

/* Gli stati senza numeri: attesa, vuoto, errore, senza abilitazione */
.ed-riepilogo-nota {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ed-riepilogo-muto);
}
.ed-riepilogo-nota > i { flex: none; font-size: 1.25rem; line-height: 1.1; }
.ed-riepilogo-nota strong { display: block; font-weight: 600; color: var(--default-text-color); }
.ed-riepilogo-nota span { display: block; }
.ed-riepilogo-vuoto > i, .ed-riepilogo-attesa > i { color: var(--ed-riepilogo-accento); }
.ed-riepilogo-errore > i { color: rgb(var(--danger-rgb)); }

/* ───────────────────────────── Finestra con il componente (RiquadroDocumenti) ───────────────────────────── */

/* Come le altre finestre del portale (modal show d-block col velo nero), ma larga quanto serve a un Esplora
   file e alta quanto lo schermo. Il componente riempie la finestra: la sua card perde margine, bordo, raggio e
   ombra (sotto la testata della finestra resta la sua intestazione, con lo spazio usato), e la zona di cartelle
   e documenti (.ed-area, 416 px fissi nella card del progetto) prende l'altezza che resta. Corpo della finestra,
   card e corpo della card sono colonne flex: quando l'intestazione o la barra dei comandi vanno a capo (finestra
   stretta, barra con la selezione) o compare l'avviso sullo spazio, la zona si accorcia e la finestra non
   scorre. Scorre (modal-dialog-scrollable) solo se la zona scenderebbe sotto i 240 px (due file di icone, sei
   righe nei Dettagli). Nelle misure fatte (larghezze da 390 a 1920 px, altezze da 600 px in su, con l'avviso
   o con la barra della selezione su due righe) non scorre; a 1280x540 scorre solo con l'avviso.
   Niente «fade»: nessun movimento all'apertura. */
.ed-finestra {
    background: rgba(0, 0, 0, .55);
    overscroll-behavior: contain;
}
/* l'intestazione è blu come le altre finestre del portale (bg-primary, titolo e ✕ bianchi: RiquadroDocumenti.razor) */
@media (min-width: 1400px) {
    .ed-finestra .modal-xl { --bs-modal-width: 1320px; }
}
/* Fra 576 e 991 px di larghezza (browser affiancato a metà schermo, zoom al 150 %, tablet) Bootstrap lascia a
   modal-xl la larghezza standard di 500 px: la barra dei comandi resterebbe di sole icone, su due righe. Qui la
   finestra prende la larghezza della pagina, con ai lati il margine che ha sopra e sotto (1,75rem). Da 992 px
   restano gli 800 e i 1140 px di modal-xl. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ed-finestra .modal-xl { --bs-modal-width: calc(100% - 3.5rem); }
}
/* Più bassa del 25 % (richiesta dell'utente del 20/10): tre quarti dell'altezza che Bootstrap le darebbe
   (schermo meno i due margini), centrata in verticale, così sopra e sotto resta visibile la pagina.
   margin-top = (100vh − altezza) / 2 = 12,5vh + 0,75 × margine. */
.ed-finestra .modal-dialog-scrollable {
    height: calc((100% - var(--bs-modal-margin) * 2) * .75);
    margin-top: calc(12.5vh + var(--bs-modal-margin) * .75);
}
.ed-finestra .modal-header { gap: .75rem; }
/* La X non si stringe: con un nome lungo nel titolo scendeva da 26 a 18 px (prove del 20/10). */
.ed-finestra .modal-header .btn-close { flex-shrink: 0; }
.ed-finestra-titolo { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.ed-finestra-titolo .ed-finestra-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Alta quanto lo schermo solo col componente vero: la card col lucchetto (nessun permesso) resta piccola */
.ed-finestra .modal-content:has(.ed-card) { height: 100%; }
.ed-finestra .modal-body { display: flex; flex-direction: column; padding: 0; overscroll-behavior: contain; }
.ed-finestra .card.custom-card.ed-card,
.ed-finestra .modal-body > .card.custom-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ed-finestra .card.custom-card.ed-card { flex: 1 0 auto; }
.ed-finestra .ed-card > .card-body { display: flex; flex-direction: column; }
.ed-finestra .ed-card .ed-area { flex: 1 1 0; height: auto; min-height: 240px; }