/* ===========================================
   FILEPOND COMPONENT — Stili
   ───────────────────────────────────────────
   Override globali per allineare FilePond allo stile Bootstrap/DocFinance.
   Caricato in _LayoutDefault.cshtml dopo lib/filepond/filepond.min.css.

   Struttura sezioni:
     1. ROOT              — max-height + scroll interno sulla lista
     2. PANEL ROOT        — bordo tratteggiato Bootstrap-style
     3. DROP AREA         — drop-label sottile (line-height/padding ridotti)
     4. HOVER/DRAG-OVER   — colorazione verde (Bootstrap success #198754)
     5. FILE CARICATI     — testo nero, nomi sempre leggibili (wrap)

   Note implementative:
     - Molti override usano !important perché FilePond applica regole con
       selettori a doppia classe (es. .filepond--drop-label.filepond--drop-label)
       per raddoppiare la specificità — bisogna allinearsi.
     - max-height su .filepond--root con !important: cappa l'altezza visibile
       indipendentemente da quanti file vengano caricati. Lo scroll si attiva
       sul figlio .filepond--list-scroller, lasciando il drop-label sempre
       visibile in cima.

   Tutti i selettori sono globali (non scoped): le regole valgono ovunque
   FilePond sia istanziato nella app via filepond-component.js.
   =========================================== */

/* Root: max-height per cappare l'esplosione verticale con molti file */
.filepond--root {
    margin: 0;
    font-size: .85rem;
    max-height: 9rem !important;
}

/* Scrolla solo la lista dei file, non il drop-label.
   In compact mode FilePond imposta overflow: hidden; height: 100% sullo scroller,
   sovrascrivo per attivare lo scroll automatico solo quando necessario. */
.filepond--list-scroller {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.filepond--panel-root {
    background-color: #fff;
    border: 1px dashed #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Drop area: FilePond JS calcola l'altezza del panel-center misurando il drop-label.
   La lib applica: min-height 4.75em sul drop-label, padding .5em e line-height 1.5
   sul <label> interno (con selettore doppia classe per specificità raddoppiata).
   Uso !important per garantire override anche contro cache aggressive del browser. */
.filepond--drop-label {
    min-height: 2rem !important;
    color: #6c757d;
    cursor: pointer;
    transition: color .15s ease;
}

.filepond--drop-label.filepond--drop-label label {
    cursor: pointer !important;
    line-height: 1.1 !important;
    padding: 0 .5rem !important;
    font-size: .8rem !important;
}

/* Hover / drag-over → verde (Bootstrap success) */
.filepond--root:hover .filepond--panel-root,
.filepond--root[data-drag-over] .filepond--panel-root {
    border-color: #198754;
    background-color: #f0fdf4;
}

.filepond--root:hover .filepond--drop-label,
.filepond--root[data-drag-over] .filepond--drop-label {
    color: #198754;
}

/* File caricati: testo nero (default FilePond è bianco/grigio chiaro) */
.filepond--file,
.filepond--file-info-main,
.filepond--file-info-sub,
.filepond--file-status-main,
.filepond--file-status-sub {
    color: #000;
}

/* Nomi file sempre leggibili interi (no ellipsis, wrap su più righe) */
.filepond--file-info-main {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}