/* ===== Composant document ===== */

.document-item {
    margin: var(--spacing-sm3) 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-document);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xs);
}

.document-item:first-child {
    margin-top: 0;
}

/* Document Header - mobile-first
   _DocumentsListToUpload (<480px) :
     ligne 1 : status-icon | title (flex:1) | collapse-document-info
     ligne 2 : document-actions (btn-file-trigger, pleine largeur)
   _DigitizedDocumentsList - cas non complete (<480px) :
     ligne 1 : status-icon | title (flex:1) | collapse-document-info
     ligne 2 : btn-file-trigger (pleine largeur)
   _DigitizedDocumentsList - cas complete (<480px) :
     ligne 1 : status-icon | title (flex:1) | digitized-menu-trigger | collapse-document-info
   >= 480px (tous les cas) :
     ligne unique : status-icon | title (flex:1) | btn-file-trigger ou file-actions inline | collapse-document-info
*/
.document-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-xs);
    row-gap: var(--spacing-xs4);
    max-width: 100%;
    position: relative;
    cursor: pointer; /* toute la ligne bascule l'accordéon (collapse.js), sauf boutons/liens */
}

/* Composant du bundle core ~/Content/VisaCSS (chargé sur toutes les pages Visa) : la taille
   (2.25rem, 2.857rem ≤ 38.75em) s'applique donc aussi à Process/LinkedClaimAttachments
   (.doc-item__icon document-status-icon, design de référence), qui ne redéclare plus
   width/height pour rester identique à Process/ClaimAttachmentsNextStep. */
.document-status-icon {
    order: 1;
    flex-shrink: 0;
    margin: var(--spacing-xs3);
    width: 2.25rem;
    height: 2.25rem;
}

@media (max-width: 38.75em) {
    .document-status-icon {
        width: 2.857rem;
        height: 2.857rem;
    }
}

.document-header .document-title {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: var(--font-family-label); /* Open Sans (alias) — même famille que .answer-card__title/.question-label */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    line-height: 1.1;
    text-align: left;
}

/* Mobile : btn-file-trigger sur ligne 2, pleine largeur (enfants directs uniquement) */
.document-header > .btn-file-trigger {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
}

/* Mobile : burger sur ligne 1, avant collapse */
.document-header .digitized-menu-trigger {
    order: 3;
    flex-shrink: 0;
}

/* Mobile : popup ancre sur le header */
.document-header .digitized-file-actions {
    top: calc(100% + 0.3rem);
    right: 2.9rem;
}

/* collapse toujours en dernier sur ligne 1 */
.collapse-document-info {
    order: 4;
    flex-shrink: 0;
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    margin: var(--spacing-xs3);
    color: var(--color-heading); /* #3C4D6A */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* _DocumentsListToUpload : document-actions sur ligne 2 en mobile */
.document-actions {
    order: 5;
    flex: 0 0 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.document-actions button:not(.file-menu-trigger) {
    width: 100%;
}

.document-actions .file-menu-trigger {
    display: flex;
    margin-left: auto;
}

.document-actions .file-actions {
    right: 0;
    left: auto;
    top: calc(100% + 0.3rem);
}
/* Collapse Toggle */
.collapse-toggle {
    display: none;
}

.collapse-toggle:checked ~ .document-header .collapse-document-info .chevron {
    transform: rotate(180deg);
}

.collapse-toggle:checked ~ .document-info {
    grid-template-rows: 1fr;
}

/* Collapse Button */
.collapse-document-info:hover {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

.collapse-document-info:focus {
    outline: 0.1rem solid var(--color-primary);
    outline-offset: 0.1rem;
    background-color: rgba(var(--color-primary-rgb), 0.15);
}

.collapse-document-info:active {
    background-color: rgba(var(--color-primary-rgb), 0.2);
}

/* Chevron collapse — design partagé avec .doc-item__chevron (Process/LinkedClaimAttachments,
   pages/linked-claim-attachments.css) : taille/transition factorisées ici (bundle core
   VisaCSS) pour éviter la duplication. Couleur non fixée ici : héritée du conteneur
   (.collapse-document-info → --color-heading) ; .doc-item__chevron garde la sienne
   (--color-text-secondary), propre à cette page. */
.collapse-document-info .chevron,
.doc-item__chevron {
    flex-shrink: 0;
    margin: 0;
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-base);
}

/* Document Info Panel */
.document-info {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-accordion);
    text-align: left;
    color: var(--color-text-dark);
}

.document-info-content {
    overflow: hidden;
}

.document-info-content hr {
    margin-top: var(--spacing-sm);
    border: none;
    border-top: 0.1rem solid var(--color-divider); /* #DBE1E2 */
    margin-bottom: var(--spacing-xs5);
}

/* Typographie label/texte de description — partagée avec .doc-item__desc-label/-text
   (Process/LinkedClaimAttachments, pages/linked-claim-attachments.css), factorisée ici
   (bundle core VisaCSS) pour éviter la duplication. Marge propre à chaque page : gap flex
   sur .doc-item__body/__desc-section là-bas, margin ici (pas de wrapper flex par section). */
.document-info-content h4,
.doc-item__desc-label {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-sm); /* 14px */
    color: var(--color-text-body); /* #3D515A */
    font-weight: var(--font-weight-bold);
}

.document-info-content p,
.doc-item__desc-text {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-sm); /* 14px */
    color: var(--color-text-body); /* #3D515A */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

.document-info-content h4,
.document-info-content p {
    /* Aligne le texte sur le bord gauche visible de .document-status-icon, qui a sa propre
       marge (--spacing-xs3) en plus du padding de la carte (.document-item, --spacing-xs) —
       contrairement à .document-info-content hr, qui reste bord à bord. */
    padding-left: var(--spacing-xs3);
}

.document-info-content h4 {
    margin: 0 0 var(--spacing-xs) 0;
}

.document-info-content p {
    margin: 0 0 var(--spacing-sm) 0;
}

.document-info-content p:last-child {
    margin: 0;
}