/*
 * Les documents en vignettes et en dossiers.
 *
 * La liste, elle, est le tableau de toutes les rubriques, et n'a rien ici. Rien n'est écrit en
 * dur : chaque couleur, chaque espacement et chaque rayon vient d'un alias du design system.
 */

/* ═══ Les vignettes ════════════════════════════════════════════════════════════════════════ */

/*
 * Autant de colonnes que la largeur en laisse passer, chacune assez large pour qu'un titre de
 * deux lignes s'y lise.
 */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--app-space-md);
}

.document-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
    padding: var(--app-space-sm);
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    transition: border-color 150ms var(--app-ease);
}

.document-card:hover {
    border-color: var(--app-accent);
}

/* Un document archivé reste lisible, et s'annonce comme tel, comme sa rangée dans la liste. */
.document-card-muted {
    opacity: .65;
}

.document-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    color: var(--app-ink);
    text-decoration: none;
}

/*
 * Un cadre de proportion fixe : les vignettes s'alignent en rangées égales, qu'elles portent une
 * photo en hauteur, en largeur, ou un simple dessin.
 */
.document-card-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--app-radius-ui);
    background: var(--app-accent-soft);
}

.document-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * La première page d'un PDF couvre le dessin de sa sorte, le haut de la page en vue : c'est là
 * que se lisent l'en-tête et le titre. Une image qui ne vient pas reste transparente, et le
 * dessin se voit dessous.
 */
.document-card-preview .document-card-page {
    position: absolute;
    inset: 0;
    object-position: top;
}

.document-card-kind {
    display: inline-flex;
    font-size: 2.5rem;
    color: var(--app-accent);
}

/* Deux lignes au plus : au-delà, le titre entier se lit sur la fiche. */
.document-card-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-weight: var(--app-weight-medium);
}

.document-card-link:hover {
    text-decoration: none;
}

.document-card-link:hover .document-card-title {
    color: var(--app-accent);
}

.document-card-meta {
    display: flex;
    align-items: center;
    gap: var(--app-space-2xs);
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}

/* Le menu du document, posé sur le coin de la vignette. */
.document-card-tools {
    position: absolute;
    top: var(--app-space-sm);
    right: var(--app-space-sm);
    border-radius: var(--app-radius-ui);
    background: var(--app-surface);
}

/* ═══ Les dossiers ═════════════════════════════════════════════════════════════════════════ */

.document-path {
    margin-bottom: var(--app-space-md);
}

.document-folders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--app-space-sm);
    margin: 0 0 var(--app-space-lg);
    padding: 0;
    list-style: none;
}

.document-folder {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--app-space-sm);
    align-items: center;
    padding: var(--app-space-sm) var(--app-space-md);
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    color: var(--app-ink);
    text-decoration: none;
    transition: border-color 150ms var(--app-ease);
}

.document-folder:hover {
    border-color: var(--app-accent);
    text-decoration: none;
}

.document-folder-icon {
    display: inline-flex;
    grid-row: span 2;
    font-size: 1.5rem;
    color: var(--app-accent);
}

.document-folder-name {
    font-weight: var(--app-weight-medium);
}

.document-folder-count {
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}