/* ============================================================================
   Page Créances — entête + onglets Dettes / Arriérés.

   Hiérarchie :
     .creances-head        → bandeau titre + total agrégé à droite
     .creances-tabs        → barre d'onglets (rôle="tablist")
       .creances-tab       → onglet (Dettes / Arriérés) avec compteur + montant
     .creances-panel       → panneau de contenu (un par onglet)
     .pill                 → pastille de comptage (réutilisée par les onglets)

   Les pastilles .pill sont volontairement génériques pour pouvoir être
   réutilisées hors des onglets Encaissements (où elles sont scopées).
   ============================================================================ */

/* ===== Bandeau titre =====================================================  */
.creances-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.creances-head__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.creances-head__title h1 {
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 700;
    color: var(--color-text);
}
.creances-head__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width: 200px;
}
.creances-head__total strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ===== Onglets ============================================================ */
.creances-tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.creances-tab {
    flex: 1 1 220px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.creances-tab:hover {
    background: var(--color-bg-alt, rgba(0,0,0,0.03));
    color: var(--color-text);
}
.creances-tab.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.creances-tab .muted {
    font-variant-numeric: tabular-nums;
}

/* ===== Pastilles de comptage (génériques) ================================ */
.creances-tab .pill,
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
    border-radius: 999px;
}
.pill--danger {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}
.pill--warning {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}
.pill--info {
    color: var(--color-info, var(--color-primary));
    background: color-mix(in srgb, var(--color-info, var(--color-primary)) 15%, transparent);
}
.pill--success {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

/* ===== Panneaux =========================================================== */
.creances-panel[hidden] {
    display: none;
}
.creances-panel {
    animation: creances-fade-in var(--transition) ease-out;
}
@keyframes creances-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* ===== Mobile ============================================================ */
@media (max-width: 540px) {
    .creances-head__total {
        align-self: stretch;
        align-items: flex-start;
        min-width: 0;
    }
    .creances-tab {
        flex: 1 1 100%;
    }
}

/* ============================================================================
   Onglet « Avoirs » — ce que l'entreprise doit à ses chauffeurs.
   ============================================================================ */

.avoirs-intro p {
  margin: 0 0 var(--space-4, 1rem);
  max-width: 68ch;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.avoirs-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .8rem 1rem;
  margin-bottom: var(--space-4, 1rem);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

.avoirs-total strong {
  font-size: 1.35rem;
  color: var(--color-success, #16a34a);
  font-variant-numeric: tabular-nums;
}

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

.avoir-carte {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface);
  padding: 1rem;

  /* La bande verte dit d'un coup d'œil que ce solde est en faveur du
     chauffeur — l'inverse des dettes et arriérés, qui bordent en rouge. */
  border-left: 3px solid var(--color-success, #16a34a);
}

.avoir-carte__tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.avoir-carte__qui a { text-decoration: none; }
.avoir-carte__qui small { display: block; }

.avoir-carte__solde { text-align: right; white-space: nowrap; }

.avoir-carte__solde strong {
  display: block;
  font-size: 1.2rem;
  color: var(--color-success, #16a34a);
  font-variant-numeric: tabular-nums;
}

.avoir-carte__histo { margin-top: .8rem; }

.avoir-carte__histo summary {
  cursor: pointer;
  font-size: var(--font-sm, .85rem);
  color: var(--color-text-muted);
  padding: .35rem 0;
}

.avoir-mvts {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  font-size: var(--font-sm, .82rem);
}

.avoir-mvt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .6rem;
  align-items: baseline;
  padding: .35rem 0;
  border-bottom: 1px solid var(--color-border-faible, #f3f4f6);
}

.avoir-mvt:last-child { border-bottom: 0; }
.avoir-mvt__date  { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.avoir-mvt__motif { min-width: 0; }

.avoir-mvt__montant { font-variant-numeric: tabular-nums; font-weight: 600; }
.avoir-mvt.est-credit .avoir-mvt__montant { color: var(--color-success, #16a34a); }
.avoir-mvt.est-debit  .avoir-mvt__montant { color: var(--color-text-muted); }

.avoir-carte__rendre {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.avoir-carte__rendre input[type="number"] { flex: 0 0 110px; min-width: 0; }
.avoir-carte__rendre input[type="text"]   { flex: 1 1 120px; min-width: 0; }

@media (max-width: 640px) {
  .avoirs-liste { grid-template-columns: 1fr; }
  .avoir-carte__rendre input,
  .avoir-carte__rendre .btn { flex: 1 1 100%; }
  .avoir-mvt { grid-template-columns: 1fr auto; }
  .avoir-mvt__date { grid-column: 1 / -1; }
}

/* ==========================================================================
   Créances sur téléphone

   Le repli d'un chauffeur porte, sur une seule ligne : un avatar, un nom,
   trois pastilles (lignes, montant, ancienneté) et jusqu'à trois boutons.
   Cela tient sur un écran d'ordinateur ; sur 360 px, cela se chevauchait.

   On sépare donc les deux rôles : l'identité occupe la ligne, les actions
   passent dessous et prennent toute la largeur.
   ========================================================================== */

@media (max-width: 640px) {
    .dette-group .accordion__summary,
    .arriere-group .accordion__summary {
        align-items: flex-start;
        row-gap: var(--space-3);
    }

    /* Le bloc d'actions passe sur sa propre ligne. `data-no-toggle` marque
       la zone qui ne doit pas ouvrir le repli quand on la touche : elle
       existe déjà, on s'appuie dessus plutôt que d'ajouter une classe. */
    .dette-group .accordion__summary > [data-no-toggle],
    .arriere-group .accordion__summary > [data-no-toggle] {
        width: 100%;
        justify-content: flex-start;
    }

    /* Les boutons se partagent la largeur au lieu de déborder. « Convertir en
       arriéré » est long : sur une demi-largeur il reste lisible, à côté de
       deux autres il ne l'était plus. */
    .dette-group .accordion__summary > [data-no-toggle] .btn,
    .arriere-group .accordion__summary > [data-no-toggle] .btn {
        flex: 1 1 auto;
        min-width: 9rem;
        justify-content: center;
    }

    /* Le chevron reste sur la première ligne, aligné avec le nom. */
    .dette-group .accordion__summary::after,
    .arriere-group .accordion__summary::after {
        align-self: flex-start;
        margin-top: .35rem;
    }
}