/* =========================================================================
   BODEZIA — LIGNE DE TRANSACTION
   -------------------------------------------------------------------------
   Composant partagé par la page Transactions et l'activité récente du
   tableau de bord. À charger une seule fois dans includes/header.php :

       <link rel="stylesheet" href="/css/transaction-row.css">

   Le tableau de bord affichait auparavant une grille Bootstrap avec ses
   propres classes .dashboard-transaction-* : deux composants pour une
   seule et même ligne, qui divergeaient à chaque retouche.

   STRUCTURE

       <div class="transactions-card">
         <div class="transactions-card-header"> titre + sous-titre
         <div class="transactions-list">
           <div class="transaction-modern-item is-mobile-topup | is-transfer">
             .transaction-modern-date      jour + mois
             .transaction-modern-icon      pictogramme du type
             .transaction-modern-main      titre + sous-titre + référence
             .transaction-modern-status    pastille
             .transaction-modern-amount    montant + devise
             .transaction-modern-arrow     chevron

   RESPONSIVE
     - au-dessus de 992px : six colonnes
     - de 768 à 991px : l'icône de type reste, les colonnes se resserrent
     - sous 768px : deux rangées, le statut passe sous la description
       plutôt que de disparaître (il répond à « est-ce parti ? », la
       question qu'on se pose en ouvrant l'historique)
   ========================================================================= */


/* =========================================================
   TRANSACTIONS CARD
   ========================================================= */

.transactions-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #edf0f2;
    border-radius: 12px;

    box-shadow:
            0 3px 12px rgba(30, 40, 50, 0.05);
}

.transactions-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    border-bottom: 1px solid #edf0f2;
}

.transactions-card-header h3 {
    margin: 0;

    color: #2b3034;

    font-size: 1rem;
    font-weight: 600;
}

.transactions-card-header p {
    margin: 3px 0 0;

    color: #5c6670;

    font-size: 0.875rem;
}

/* =========================================================
   TRANSACTION ITEM
   ========================================================= */

.transaction-modern-item {
    display: grid;

    grid-template-columns:
        52px
        44px
        minmax(0, 1fr)
        125px
        115px
        20px;

    align-items: center;

    gap: 12px;

    min-height: 82px;

    padding: 13px 18px;

    border-bottom: 1px solid #edf0f2;

    cursor: pointer;

    transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;
}

.transaction-modern-item:last-child {
    border-bottom: 0;
}

@media (hover: hover) {

    .transaction-modern-item:hover {
        background:
                rgba(116, 65, 212, 0.025);

        box-shadow:
                inset 3px 0 0
                rgba(116, 65, 212, 0.45);
    }

}


/* =========================================================
   DATE
   ========================================================= */

.transaction-modern-date {
    text-align: center;
}

.transaction-modern-day {
    display: block;

    color: #2b3034;

    font-size: 0.9375rem;
    font-weight: 600;
}

.transaction-modern-month {
    display: block;

    margin-top: 2px;

    color: #5c6670;

    font-size: 0.75rem;
    font-weight: 600;
}


/* =========================================================
   TYPE ICON
   ========================================================= */

.transaction-modern-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    font-size: 0.9375rem;
}

.transaction-modern-icon.is-mobile-topup {
    color: #7441d4;

    background: #f3eefd;
}

.transaction-modern-icon.is-transfer {
    color: #5c6670;

    background: #f0f3f4;
}


/* =========================================================
   MAIN
   ========================================================= */

.transaction-modern-main {
    min-width: 0;
}

.transaction-modern-title {
    overflow: hidden;

    color: #2b3034;

    font-size: 0.9375rem;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-modern-subtitle {
    overflow: hidden;

    margin-top: 2px;

    color: #5c6670;

    font-size: 0.875rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-modern-reference {
    overflow: hidden;

    margin-top: 3px;

    color: #5c6670;

    font-size: 0.75rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   STATUS
   ========================================================= */

.transaction-status-pill {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 600;

    white-space: nowrap;
}

.transaction-status-pill.is-completed {
    color: #197a33;

    background: rgba(39, 174, 96, 0.10);
}

.transaction-status-pill.is-pending {
    color: #8a5a00;

    background: rgba(242, 178, 38, 0.12);
}

.transaction-status-pill.is-failed {
    color: #b42318;

    background: rgba(235, 87, 87, 0.10);
}


/* =========================================================
   AMOUNT
   ========================================================= */

.transaction-modern-amount {
    text-align: right;

    white-space: nowrap;
}

/* Bleu réservé aux montants : dans une liste où tout le reste est
   neutre, c'est le chiffre qu'on vient chercher. Bleu ardoise foncé
   (10,2:1 sur blanc) plutôt qu'un bleu vif, qui se lirait comme un
   lien alors que rien n'est cliquable à cet endroit. */

.transaction-modern-item .transaction-modern-amount strong {
    display: block;

    color: #1c3f7c !important;

    font-size: 1rem;
    font-weight: 600;
}

.transaction-modern-item .transaction-modern-amount span {
    display: block;

    margin-top: 1px;

    color: #5c6670;

    font-size: 0.75rem;
    font-weight: 600;

    text-transform: uppercase;
}


/* ARROW */

.transaction-modern-arrow {
    color: #98a2ac;

    font-size: 0.75rem;
}


/* =========================================================================
   TABLETTE  (< 992px)
   ========================================================================= */

@media (max-width: 991.98px) {

    .transaction-modern-item {
        grid-template-columns:
            48px
            40px
            minmax(0, 1fr)
            auto
            96px
            18px;

        gap: 10px;
    }

}


/* =========================================================================
   MOBILE  (< 768px)
   Deux rangées : la date et le chevron tiennent la hauteur, le statut
   passe sous la description.
   ========================================================================= */

@media (max-width: 767.98px) {

    .transaction-modern-item {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto
            14px;

        grid-template-areas:
            "date main   amount arrow"
            "date status status arrow";

        column-gap: 10px;
        row-gap: 8px;

        min-height: 0;

        padding: 14px 14px;
    }

    .transaction-modern-date {
        grid-area: date;

        align-self: center;
    }

    .transaction-modern-icon {
        display: none;
    }

    .transaction-modern-main {
        grid-area: main;
    }

    .transaction-modern-amount {
        grid-area: amount;
    }

    .transaction-modern-arrow {
        grid-area: arrow;

        align-self: center;
    }

    .transaction-modern-status {
        grid-area: status;
    }

    /* La référence disparaît, pas le statut : on peut la retrouver dans
       le détail, alors que le statut est ce qu'on vient vérifier. */

    .transaction-modern-reference {
        display: none;
    }

    .transactions-card-header {
        padding: 16px;
    }

}


/* =========================================================================
   LISTE VIDE
   ========================================================================= */

.transactions-list-empty {
    padding: 40px 20px;

    color: #5c6670;

    font-size: 0.9375rem;

    text-align: center;
}


/* =========================================================================
   PIED DE CARTE  (« Afficher tout »)
   ========================================================================= */

.transactions-card-footer {
    padding: 16px 20px;

    border-top: 1px solid #edf0f2;

    text-align: center;
}

.transactions-view-all {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #7441d4;

    font-size: 0.9375rem;
    font-weight: 600;

    text-decoration: none;
}

.transactions-view-all:hover,
.transactions-view-all:focus {
    color: #6737c7;

    text-decoration: underline;
}

.transactions-view-all i {
    font-size: 0.75rem;
}