/* ===== Liste fichiers uploadés - mobile-first ===== */

.uploaded-files-list {
    text-align: left;

    & hr {
        border: none;
        border-top: 0.1rem solid var(--color-border);
        margin: var(--spacing-xs5) 0;
    }
}

/* -----------------------------------------------
   uploaded-file-item
   Mobile  : [icon] [file-name flex:1] [burger]
   >= 480px: [icon] [file-name flex:1] [file-actions] (burger masqué)
----------------------------------------------- */
.uploaded-file-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs4);
    margin: var(--spacing-xs3) 0;

    &:hover { background-color: var(--color-bg-hover); }

    & .document-status-icon {
        order: -1;
        flex-shrink: 0;
        display: block;
        width: var(--spacing-lg); /* 32px */
        height: var(--spacing-lg); /* 32px */
        object-fit: contain;
    }
}

.file-name {
    flex: 1 1 0;
    font-family: var(--font-family-label); /* alias Open Sans */
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Burger (mobile uniquement) ---- */
.file-menu-trigger {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    &:hover { background-color: rgba(var(--color-primary-rgb), 0.1); }
    &:focus { outline: 0.1rem solid var(--color-primary); outline-offset: 0.1rem; }
}

/* ---- Popup actions (mobile) ---- */
.file-actions {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% - 0.3rem);
    right: 0.6rem;
    z-index: 100;
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-popover);
    min-width: 10rem;
    padding: 0.3rem 0;

    &.is-open { display: flex; }
}

/* Même famille/poids que .btn--link (buttons.css) — reste un menuitem (fond au survol,
   pas de soulignement) plutôt qu'un vrai .btn--link, mais garde la même identité texte. */
.file-action-link {
    display: block;
    width: 100%;
    padding: var(--spacing-xs5) var(--spacing-sm4);
    font-family: var(--font-family-btn); /* Open Sans (alias) */
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-quick), color var(--transition-quick);

    &:hover { background-color: var(--color-primary-light); color: var(--color-btn-primary-hover); }
    &:focus { outline: 0.1rem solid var(--color-primary); outline-offset: -0.1rem; border-radius: var(--border-radius-xs); }
}

/* ---- Input file : masqué visuellement, accessible au clic via le label/bouton ---- */
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}