/* ============================================================================
   LogiFlotte — alertes documents (dashboard).
   Classes issues de dashboard/index.php :
     .doc-alert-list, .doc-alert, .doc-alert--danger, .doc-alert--warning,
     .doc-alert-label, .doc-alert-target, .doc-alert-badge
   ============================================================================ */

.doc-alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.doc-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.doc-alert-label {
    flex: 1;
    font-weight: 500;
    color: var(--color-text);
}

.doc-alert-target {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: block;
}

.doc-alert-badge {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-bg);
    color: var(--color-text);
    white-space: nowrap;
}

.doc-alert--warning {
    background: var(--color-warning-light);
    border-left-color: var(--color-warning);
}
.doc-alert--warning .doc-alert-badge {
    background: var(--color-warning);
    color: #fff;
}

.doc-alert--danger {
    background: var(--color-danger-light);
    border-left-color: var(--color-danger);
}
.doc-alert--danger .doc-alert-badge {
    background: var(--color-danger);
    color: #fff;
}

/* ==================== Bibliothèque de documents ==========================
   Cartes plutôt que lignes de tableau : un document porte peu de champs mais
   un état qui doit sauter aux yeux. Le liseré de gauche encode l'urgence. */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-4);
}

.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-4);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.doc-card:hover { box-shadow: var(--shadow-md); }

.doc-card--expire   { border-left-color: var(--color-danger); }
.doc-card--critique { border-left-color: var(--color-danger); }
.doc-card--bientot  { border-left-color: var(--color-warning); }
.doc-card--valide   { border-left-color: var(--color-success); }
.doc-card--neutre   { border-left-color: var(--color-border-strong); }

.doc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.doc-card__type {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
}
.doc-card__state {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.doc-card--expire   .doc-card__state,
.doc-card--critique .doc-card__state { background: var(--color-danger-light);  color: #991b1b; }
.doc-card--bientot  .doc-card__state { background: var(--color-warning-light); color: #92400e; }
.doc-card--valide   .doc-card__state { background: var(--color-success-light); color: #166534; }
.doc-card--neutre   .doc-card__state { background: var(--color-surface-alt);   color: var(--color-text-muted); }

.doc-card__name {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-md);
    font-weight: 650;
    line-height: 1.3;
}
.doc-card__owner {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.doc-card__owner strong { color: var(--color-text); font-weight: 600; }

.doc-card__meta {
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-sm);
}
.doc-card__meta > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--space-2);
    align-items: baseline;
}
.doc-card__meta dt {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
}
.doc-card__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.doc-card__delay { color: var(--color-text-muted); font-size: 0.75rem; margin-left: 4px; }
.doc-card--expire .doc-card__delay,
.doc-card--critique .doc-card__delay { color: var(--color-danger); font-weight: 600; }

.doc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.doc-card__nofile {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Compteur dans les onglets de filtre. */
.tabs__btn .pill {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}
.tabs__btn[aria-selected="true"] .pill {
    background: var(--color-primary-light);
    color: var(--color-primary);
}