/* ============================================================
   eb_attachment — drop zone de pièce jointe factorisée
   Remplace le vieux pattern <label class="btn-file"> + <input type=file>
   + selected_file_name + filetrashbin que l'on retrouve partout.

   Markup attendu (généré par eb_attachment_field() en PHP) :
     <div class="eb-attachment" data-eb-attachment data-max-mb="10">
        <input type="file" class="eb-attachment-input" ... hidden>
        <input type="hidden" class="eb-attachment-delete" name="deletefile" value="0">
        <div class="eb-attachment-drop"> ... zone cliquable / drag&drop ... </div>
        <ul class="eb-attachment-files"> ... chips fichiers ... </ul>
     </div>

   Le <input type=file> reste un vrai champ du formulaire : la soumission
   multipart classique ($_FILES) continue de fonctionner sans backend.
   ============================================================ */

.eb-attachment {
    width: 100%;
}

.eb-attachment-input {
    /* champ réel conservé pour la soumission ; jamais affiché */
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.eb-attachment-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
    padding: 16px 18px;
    border: 2px dashed var(--eb-border, #E2E8F0);
    border-radius: var(--eb-radius, 12px);
    background: var(--eb-surface-hover, #F8FAFC);
    color: var(--eb-text-secondary, #64748B);
    cursor: pointer;
    transition: border-color var(--eb-transition, .2s ease),
                background var(--eb-transition, .2s ease),
                color var(--eb-transition, .2s ease);
}

.eb-attachment-drop:hover {
    border-color: var(--eb-primary, #2563EB);
    background: var(--eb-primary-light, #EFF6FF);
    color: var(--eb-primary, #2563EB);
}

.eb-attachment-drop .eb-attachment-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--eb-primary, #2563EB);
}

.eb-attachment-drop .eb-attachment-text {
    font-size: .85rem;
}

.eb-attachment-drop .eb-attachment-hint {
    display: block;
    font-size: .72rem;
    color: var(--eb-text-muted, #94A3B8);
    margin-top: 2px;
}

/* survol durant un drag */
.eb-attachment--over .eb-attachment-drop {
    border-color: var(--eb-primary, #2563EB);
    background: var(--eb-primary-dim, #DBEAFE);
    color: var(--eb-primary-hover, #1D4ED8);
}

/* liste des fichiers sélectionnés */
.eb-attachment-files {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eb-attachment-files:empty {
    display: none;
}

.eb-attachment-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--eb-border, #E2E8F0);
    border-radius: 8px;
    background: var(--eb-surface, #FFFFFF);
    font-size: .82rem;
    color: var(--eb-text, #1E293B);
}

.eb-attachment-file .eb-attachment-file-icon {
    color: var(--eb-text-secondary, #64748B);
    flex: 0 0 auto;
}

.eb-attachment-file .eb-attachment-file-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eb-attachment-file .eb-attachment-file-size {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--eb-text-muted, #94A3B8);
}

.eb-attachment-file .eb-attachment-remove {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--eb-danger, #EF4444);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: background var(--eb-transition, .2s ease);
}

.eb-attachment-file .eb-attachment-remove:hover {
    background: var(--eb-danger-light, #FEF2F2);
}

/* fichier déjà enregistré (mode édition) */
.eb-attachment-file--existing {
    border-style: dashed;
}