/* ============================================================================
   LogiFlotte — page Encaissements : vue tableau dense.

   Structure :
     .enc-toolbar         → bandeau supérieur (semaine + actions globales)
     .enc-filterbar       → onglets de statut + recherche + groupement
       .enc-tabs / .enc-tab
       .pill              → compteurs colorés dans les onglets
     .enc-tablewrap       → wrapper scrollable
       .enc-table         → tableau dense (thead sticky)
         .enc-row         → ligne encaissement (liseré gauche coloré)
         .enc-grouphead   → ligne de séparation de groupe (jour/équipe/statut)
     .enc-status          → badge pastille dans la colonne statut

   Objectif : afficher 100+ lignes sur une même page sans scroll vertical
   ingérable, tout en conservant la lisibilité des statuts.
   ============================================================================ */

/* ===== Barre d'outils supérieure ========================================== */
.enc-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.enc-toolbar__left,
.enc-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.enc-toolbar__right {
    margin-left: auto;
}
.enc-toolbar__week {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.enc-toolbar__week strong {
    color: var(--color-text);
    font-weight: 700;
}

/* ===== Barre de filtres (tabs + recherche + groupement) =================== */
.enc-filterbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.enc-filterbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

/* --- Onglets statut -------------------------------------------------------- */
.enc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.enc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.enc-tab:hover {
    background: var(--color-bg-alt, rgba(0,0,0,0.03));
    color: var(--color-text);
}
.enc-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);
}

/* Pastilles de comptage dans les onglets ---------------------------------- */
.enc-tab .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;
}
.enc-tab .pill--danger {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}
.enc-tab .pill--warning {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}
.enc-tab .pill--info {
    color: var(--color-info, var(--color-primary));
    background: color-mix(in srgb, var(--color-info, var(--color-primary)) 15%, transparent);
}
.enc-tab .pill--success {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

/* --- Recherche + groupement ---------------------------------------------- */
.enc-search {
    min-width: 220px;
    padding: 6px 10px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.enc-search:focus {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-color: var(--color-primary);
}
.enc-group-select {
    padding: 6px 10px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* ===== Wrapper table (scroll horizontal + ombre en bas) =================== */
.enc-tablewrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow-x: auto;
    overflow-y: visible;
    margin-bottom: var(--space-4);
}

/* ===== Tableau dense ======================================================= */
.enc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    color: var(--color-text);
}

.enc-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, var(--color-surface));
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.enc-table thead th.num,
.enc-table tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.enc-table thead th.actions-col {
    text-align: right;
}

/* Entête triable ----------------------------------------------------------- */
.enc-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.enc-table thead th.sortable:hover {
    color: var(--color-text);
}
.enc-table thead th.sortable .sort-ind {
    display: inline-block;
    width: 0.9em;
    margin-left: 4px;
    opacity: 0.5;
    font-size: 0.7rem;
}
.enc-table thead th.sortable.is-sorted {
    color: var(--color-primary);
}
.enc-table thead th.sortable.is-sorted .sort-ind::before {
    opacity: 1;
}
.enc-table thead th.sortable.is-sorted[data-dir="asc"]  .sort-ind::before { content: "▲"; }
.enc-table thead th.sortable.is-sorted[data-dir="desc"] .sort-ind::before { content: "▼"; }

/* Corps ------------------------------------------------------------------- */
.enc-table tbody td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

/* Ligne encaissement ------------------------------------------------------ */
.enc-row {
    transition: background var(--transition);
    border-left: 3px solid transparent;
}
.enc-row:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Liseré gauche coloré selon le statut (appliqué sur la première cellule) */
.enc-row td:first-child {
    border-left: 3px solid transparent;
}
.enc-row--paid    td:first-child { border-left-color: var(--color-success); }
.enc-row--partial td:first-child { border-left-color: var(--color-warning); }
.enc-row--pending td:first-child { border-left-color: var(--color-info, var(--color-primary)); }
.enc-row--unpaid  td:first-child,
.enc-row--absent  td:first-child { border-left-color: var(--color-danger); }
.enc-row--skipped td:first-child { border-left-color: var(--color-text-muted); }
.enc-row--skipped { opacity: 0.7; }
.enc-row--imputed td:first-child { border-left-color: var(--color-info, var(--color-primary)); }
.enc-row--imputed { opacity: 0.85; }
.enc-row--rented  td:first-child { border-left-color: #7c3aed; }
.enc-row--rented  { opacity: 0.75; background: color-mix(in srgb, #7c3aed 3%, transparent); }

/* Cellule date : jour principal + jour de la semaine en petit ------------- */
.enc-cell-date strong {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}
.enc-cell-date small {
    display: block;
    font-size: 0.72rem;
}

/* Cellule immat ----------------------------------------------------------- */
.enc-cell-immat strong {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

/* Cellule chauffeur ------------------------------------------------------- */
.enc-cell-chauffeur small {
    font-size: 0.76rem;
}
/* Liste des payeurs effectifs (un chip par chauffeur ayant versé) ---------- */
.enc-payeurs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.enc-payeurs .chip {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
}
.enc-payeurs small { font-size: 0.7rem; }

/* Cellule actions --------------------------------------------------------- */
.enc-cell-actions {
    text-align: right;
    white-space: nowrap;
}
.enc-cell-actions .btn {
    margin-left: var(--space-1);
}

/* ===== Badge de statut (colonne Statut) =================================== */
.enc-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    white-space: nowrap;
}
.enc-status--paid {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
}
.enc-status--partial {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}
.enc-status--pending {
    color: var(--color-info, var(--color-primary));
    background: color-mix(in srgb, var(--color-info, var(--color-primary)) 15%, transparent);
}
.enc-status--unpaid,
.enc-status--absent {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}
.enc-status--skipped {
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
}
.enc-status--imputed {
    color: var(--color-info, var(--color-primary));
    background: color-mix(in srgb, var(--color-info, var(--color-primary)) 15%, transparent);
}
/* Encaissement « En location » : violet/gris pour le distinguer des cas
   d'erreur. Non actionnable côté UI. */
.enc-status--rented {
    color: #7c3aed;
    background: color-mix(in srgb, #7c3aed 12%, transparent);
}

/* Marqueur « ↩ » accolé au libellé du statut quand l'encaissement a été
   payé via imputation (statut='imputed' + toutes dettes réglées). Visuel
   identique à PAYÉ pour ne pas perturber l'utilisateur basique, mais le
   ↩ permet de retracer le chemin pour qui veut creuser. */
.enc-status__via {
    display: inline-block;
    margin-left: 2px;
    font-size: 0.95em;
    font-weight: 600;
    opacity: 0.75;
}
/* Liseré gauche très subtil pour distinguer une ligne PAYÉ classique
   d'une ligne PAYÉ ↩ — vert mais légèrement teinté info. */
.enc-row--via-imputation td:first-child {
    border-left-color: color-mix(in srgb, var(--color-success) 60%, var(--color-info, var(--color-primary)) 40%);
}

/* ===== Ligne d'en-tête de groupe (jour / équipe / statut) ================= */
.enc-grouphead {
    background: var(--color-bg-alt, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)));
}
.enc-grouphead th {
    position: static; /* ne pas devenir sticky */
    padding: var(--space-2) var(--space-3);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: inherit;
}
.enc-grouphead th.num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.enc-grouphead__label {
    color: var(--color-primary);
    text-transform: capitalize;
}

/* ===== État vide après filtres ============================================ */
.enc-empty-filter {
    padding: var(--space-4);
}

/* ===== Responsive ========================================================= */
@media (max-width: 900px) {
    .enc-filterbar__right {
        width: 100%;
        margin-left: 0;
    }
    .enc-search {
        flex: 1 1 200px;
        min-width: 0;
    }
    .enc-table {
        font-size: 0.86rem;
    }
    .enc-table thead th,
    .enc-table tbody td {
        padding: var(--space-1) var(--space-2);
    }
}

@media (max-width: 640px) {
    /* On garde le scroll horizontal plutôt que de casser le tableau :
       les tableaux denses sont illisibles en colonne sur mobile. */
    .enc-tablewrap {
        border-radius: var(--radius-md);
    }
    .enc-cell-actions .btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* ===== Modale « Imputer la dette » ======================================== */
/* Affichée par ligne d'encaissement impayé/partiel : permet de répartir le
   reste à imputer entre les chauffeurs de l'équipe (Principal + Copilote
   éventuel). Voir DetteConversionService::imputerEncaissement pour la
   logique côté serveur — l'imputation crée des DETTES (pas des arriérés). */

.enc-impute__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.enc-impute__summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.enc-impute__summary span.muted {
    font-size: 0.78rem;
}
.enc-impute__summary strong {
    font-size: 1rem;
    font-weight: 700;
}

.enc-impute__quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.enc-impute__quick .btn {
    flex: 1 1 auto;
    min-width: 110px;
}

.enc-impute__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}
.enc-impute__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
/* Ligne d'un chauffeur en location ce jour-là : signalé visuellement
   pour éviter de l'imputer par défaut. L'input reste actif (l'admin
   peut décider). */
.enc-impute__row--busy {
    background: color-mix(in srgb, #7c3aed 5%, var(--color-surface));
    border-color: color-mix(in srgb, #7c3aed 25%, var(--color-border));
}
.enc-impute__name strong {
    display: block;
    font-weight: 600;
}
.enc-impute__name small {
    font-size: 0.78rem;
}
.enc-impute__amount {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.enc-impute__amount input[type="number"] {
    width: 9rem;
    padding: var(--space-1) var(--space-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg, #fff);
}
.enc-impute__amount input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--color-primary-soft, rgba(37, 99, 235, 0.15));
}

.enc-impute__total {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt, #f8fafc);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}
.enc-impute__total strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.enc-impute__total.is-ok strong   { color: var(--color-success, #15803d); }
.enc-impute__total.is-bad strong  { color: var(--color-danger,  #b91c1c); }

.enc-impute__status {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 500;
}
.enc-impute__status.is-ok  { color: var(--color-success, #15803d); }
.enc-impute__status.is-bad { color: var(--color-danger,  #b91c1c); }

@media (max-width: 540px) {
    .enc-impute__summary {
        grid-template-columns: 1fr;
    }
    .enc-impute__row {
        grid-template-columns: 1fr;
    }
    .enc-impute__amount {
        justify-content: flex-end;
    }
    .enc-impute__amount input[type="number"] {
        width: 100%;
    }
}

/* ========================================================================== */
/* Bandeau « Zombies » : encaissements impayés/partiels des semaines passées  */
/* qui n'ont jamais été imputés. Affiché en haut de la page Encaissements     */
/* pour qu'ils ne soient pas oubliés et continuent de fausser les KPI.        */
/* ========================================================================== */
.enc-zombies {
    margin: var(--space-3) 0 var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface));
    overflow: hidden;
}
.enc-zombies[open] {
    background: var(--color-surface);
}

.enc-zombies__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.enc-zombies__summary::-webkit-details-marker { display: none; }
.enc-zombies__summary::marker { content: ''; }

.enc-zombies__summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.enc-zombies[open] .enc-zombies__summary::after {
    transform: rotate(90deg);
}

.enc-zombies__icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
}

.enc-zombies__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.enc-zombies__text strong {
    font-weight: 700;
    color: var(--color-text);
}
.enc-zombies__text small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.enc-zombies__cta {
    margin-left: var(--space-2);
}

.enc-zombies__body {
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.enc-zombies__hint {
    margin: 0 0 var(--space-2);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Variante compacte du tableau utilisée dans le bandeau zombies ----------- */
.enc-table--compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.enc-table--compact th,
.enc-table--compact td {
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.enc-table--compact th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.enc-table--compact tr:last-child td {
    border-bottom: none;
}
.enc-table--compact td.text--right,
.enc-table--compact th.text--right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .enc-zombies__summary {
        flex-wrap: wrap;
    }
    .enc-zombies__cta {
        margin-left: 0;
        width: 100%;
    }
    .enc-table--compact {
        font-size: 0.78rem;
    }
}