/* ==========================================================================
   Module Financiers — éléments propres à la maquette Pierre.
   Le reste (en-tête, barre de recherche, tableau, pied, pagination) réutilise
   les classes de sales.css : les listes de l'application doivent se ressembler.
   ========================================================================== */

/* Retour aux comptes : discret, au-dessus du titre. */
.fin-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    width: fit-content;
}

.fin-back:hover { color: #1e293b; }

/* Ligne d'identité du compte : numéro, nature, source, état. */
.fin-account-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.fin-account-identity__number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #475569;
}

.fin-dot { color: #cbd5e1; }

.fin-state-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.fin-state-badge--connected { background: #dcfce7; color: #15803d; }
.fin-state-badge--error     { background: #fee2e2; color: #b91c1c; }
.fin-state-badge--pending   { background: #fef3c7; color: #b45309; }
.fin-state-badge--manual    { background: #f1f5f9; color: #475569; }

/* ── Bandeau de synthèse ──────────────────────────────────────────────────
   Quatre chiffres sur une ligne, séparés par un filet. La spéc §4 les veut
   ensemble : lus côte à côte ils racontent le mois, empilés ils ne disent rien. */
.fin-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    margin: 0 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    background: #fff;
}

.fin-kpi {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    border-left: 1px solid #eef1f5;
}

.fin-kpi:first-child { border-left: none; }

.fin-kpi__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.fin-kpi__value {
    font-size: 1.375rem;
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.fin-kpi__value--in      { color: #16a34a; }
.fin-kpi__value--out     { color: #dc2626; }
.fin-kpi__value--pending { color: #d97706; }

.fin-sync-line {
    padding: 0.65rem 1.5rem 0;
    font-size: 0.75rem;
    color: #64748b;
}

/* ── Onglets soulignés ────────────────────────────────────────────────────
   Même marquage que la barre workflow des Achats : un trait sous l'onglet
   actif plutôt qu'une pastille pleine. */
.fin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.fin-tab {
    position: relative;
    padding: 0.5rem 0.85rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
}

.fin-tab:hover:not(.active) { color: #1e293b; }

.fin-tab.active {
    color: #1e293b;
    font-weight: 600;
}

.fin-tab.active::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background: #6d28d9;
}

/* ── Titre de section + compteur ──────────────────────────────────────────*/
.fin-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem 0;
}

.fin-section-head__title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.fin-count-chip {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

/* ── Montant et allocation dans une seule cellule ─────────────────────────
   Le montant au-dessus, la pièce et le reste à allouer en dessous. La spéc
   les lit d'un trait : « -220,00 € · F260089 · Reste à allouer : 0,00 € ». */
.fin-amount-cell { white-space: nowrap; }

.fin-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fin-amount--in  { color: #16a34a; }
.fin-amount--out { color: #dc2626; }

.fin-allocation {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #64748b;
}

.fin-allocation i { font-size: 0.9rem; }

.fin-allocation--settled i { color: #16a34a; }
.fin-allocation--open i    { color: #dc2626; }

.fin-allocation__ref {
    font-weight: 600;
    color: #4338ca;
}

.fin-info-list dt {
    font-weight: 600;
    color: #475569;
    padding-bottom: 0.5rem;
}

.fin-info-list dd {
    color: #0f172a;
    padding-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .fin-kpi-strip { margin-inline: 1rem; }
    .fin-kpi { flex-basis: 100%; border-left: none; border-top: 1px solid #eef1f5; }
    .fin-kpi:first-child { border-top: none; }
    .fin-sync-line, .fin-tabs, .fin-section-head { padding-inline: 1rem; }
}

/* ── Compteur porté par l'onglet ──────────────────────────────────────────*/
.fin-tab { display: inline-flex; align-items: center; gap: 0.4rem; }

.fin-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e9ecef;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6c757d;
}

.fin-tab.active .fin-tab__count { background: #ede9fe; color: #6d28d9; }

/* ── Tuiles de synthèse de l'écran À traiter ──────────────────────────────
   Trois cartes distinctes ici, contrairement au bandeau de la fiche compte :
   ce ne sont pas quatre facettes d'un même compte mais trois totaux séparés. */
.fin-kpi-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem 0;
}

.fin-kpi-card {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    background: #fff;
}

.fin-kpi-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fin-kpi-card__icon--in      { background: #dcfce7; color: #16a34a; }
.fin-kpi-card__icon--out     { background: #fee2e2; color: #dc2626; }
.fin-kpi-card__icon--pending { background: #fef3c7; color: #d97706; }

.fin-kpi-card__body { display: flex; flex-direction: column; gap: 0.15rem; }

/* ── Badge de rapprochement ───────────────────────────────────────────────*/
.fin-match-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.fin-match-badge--open { background: #fef3c7; color: #b45309; }

/* Bouton Traiter : ardoise foncé, comme la maquette — il n'est pas l'action
   principale de la page mais celle de la ligne. */
.fin-process-btn {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
    border-radius: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.fin-process-btn:hover { background: #0f172a; border-color: #0f172a; color: #fff; }

/* ── Modale « Traiter la transaction » ────────────────────────────────────*/
.fin-modal { background: rgba(15, 23, 42, 0.45); }

/* Largeur fixe quelle que soit l'étape (choix de la nature vs liste de candidats, parfois
   réduite à une seule ligne) : sans ça, .modal-dialog se redimensionne au contenu et la
   modale "saute" visuellement d'une étape à l'autre. */
.fin-modal .modal-dialog {
    width: 96vw;
    max-width: 1600px;
}

.fin-modal__content { border: none; border-radius: 0.85rem; overflow: hidden; min-height: 36rem; max-height: 90vh; }

.fin-modal__header {
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #eef1f5;
}

.fin-modal__title { font-size: 1rem; font-weight: 600; color: #0f172a; }

.fin-modal__position {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
}

.fin-modal__nav { padding: 0.15rem 0.45rem; line-height: 1; }

/* Deux colonnes : ce qu'il y a à répartir, et où le mettre. */
.fin-modal__grid { display: flex; flex-wrap: wrap; }

.fin-modal__summary {
    flex: 1 1 15rem;
    padding: 1.25rem;
    border-right: 1px solid #eef1f5;
}

.fin-modal__targets { flex: 2 1 22rem; padding: 1.25rem; }

.fin-modal__section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.fin-modal__hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.85rem;
}

.fin-modal__amount {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.85rem;
}

.fin-modal__totals,
.fin-modal__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.fin-modal__totals dt,
.fin-modal__details dt { color: #64748b; font-weight: 500; }

.fin-modal__totals dd,
.fin-modal__details dd { margin: 0; text-align: right; color: #0f172a; }

.fin-modal__details dd { text-align: left; word-break: break-word; }

.fin-modal__remaining { color: #dc2626 !important; font-weight: 600; }

/* Une nature d'opération : icône, libellé, explication, chevron. */
.fin-target {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.6rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.fin-target:hover {
    border-color: #c7d2fe;
    background: #f8f9ff;
}

.fin-target__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fin-target__body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }

.fin-target__title { font-size: 0.875rem; font-weight: 600; color: #0f172a; }

.fin-target__hint { font-size: 0.75rem; color: #64748b; }

.fin-target__chevron { color: #94a3b8; font-size: 1.15rem; }

.fin-modal__footer {
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #eef1f5;
}

@media (max-width: 767.98px) {
    .fin-kpi-cards { padding-inline: 1rem; }
    .fin-modal__summary { border-right: none; border-bottom: 1px solid #eef1f5; }
}

/* Une date n'a pas besoin de la taille d'un montant : elle se lit, elle ne se compare pas. */
.fin-kpi__value--small { font-size: 0.9375rem; font-weight: 600; }

/* Champ de montant à allouer : étroit, aligné à droite, chiffres tabulaires pour
   que les décimales se superposent d'une ligne à l'autre. */
.fin-allocate-input {
    width: 7.5rem;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Recherche de facture dans la modale de traitement. */
.fin-modal__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.fin-modal__search > i {
    position: absolute;
    left: 0.6rem;
    color: #adb5bd;
    font-size: 1rem;
    pointer-events: none;
}

.fin-modal__search .form-control {
    padding-left: 2rem;
    border-radius: 0.5rem;
    background: #f8f9fa;
    border-color: #e9ecef;
}

.fin-modal__search .form-control:focus { background: #fff; }

/* Affectations deja posees sur le mouvement, dans le resume de la modale. */
.fin-allocation-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.75rem;
}

.fin-allocation-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-top: 1px dashed #eef1f5;
}

.fin-allocation-list__label {
    flex: 1;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-allocation-list__amount {
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Confirmation d'un changement de source : elle expose a des doublons, elle se lit avant d'agir. */
.fin-source-confirm {
    margin: 0 1rem 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 0.6rem;
    background: #fffbeb;
}

.fin-source-confirm__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 0.4rem;
}

.fin-source-confirm__line {
    font-size: 0.8125rem;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.fin-source-confirm__facts {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.fin-source-confirm__facts li { margin-bottom: 0.15rem; }