@media screen and (max-width: 768px) {
  /* 1. Configuration des blocs et conteneurs */
  .com-cashbox .table-responsive,
  #cashboxList,
  #cashboxList tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #cashboxList thead {
    display: none !important;
  }

  /* 2. Style du conteneur de chaque carte */
  #cashboxList tbody tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
  }

  /* 3. Lignes de la carte avec libellé à gauche et valeur à droite */
  #cashboxList td {
    display: flex !important;
	justify-content: flex-start !important; /* Aligne le contenu juste après le titre */
    /*justify-content: space-between !important;*/
    align-items: center !important;
	gap: 8px !important; /* Espace fixe de 8px entre le titre et la valeur */
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px dashed #e9ecef !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  #cashboxList td:last-child {
    border-bottom: none !important;
  }

  /* 4. Insertion des titres de colonnes à gauche */
  #cashboxList td:nth-child(1)::before { content: "Propriétaire :"; font-weight: bold; color: #495057; }
  #cashboxList td:nth-child(2)::before { content: "Utilisateurs :"; font-weight: bold; color: #495057; }
  #cashboxList td:nth-child(3)::before { content: "Bloqué :"; font-weight: bold; color: #495057; }
  #cashboxList td:nth-child(4)::before { content: "Solde :"; font-weight: bold; color: #495057; }
  #cashboxList td:nth-child(5)::before { content: "Action :"; font-weight: bold; color: #495057; }

  /* 5. Rapprochement du texte (Inactif) du nom du propriétaire */
  #cashboxList td:nth-child(1) {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #cashboxList td:nth-child(1) a {
    margin-left: auto; /* Aligne le nom à droite face au titre */
    margin-right: 4px; /* Espace de séparation avant (Inactif) */
  }

  #cashboxList td:nth-child(1) span.cashbox-inactive {
    margin-left: 0 !important; /* Rapproche le badge du nom */
  }
}

@media screen and (max-width: 768px) {
  /* 1. Configuration des conteneurs pour la vue "Mouvements" */
  .com-cashbox-items .table-responsive,
  .com-cashbox-items table,
  .com-cashbox-items tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .com-cashbox-items thead {
    display: none !important;
  }

  /* 2. Formatage de la carte */
  .com-cashbox-items tbody tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
  }

  /* 3. Disposition des cellules (Titre à gauche / Valeur à droite) */
  .com-cashbox-items td {
    display: flex !important;
	justify-content: flex-start !important; /* Aligne le contenu juste après le titre */
    /*justify-content: space-between !important;*/
    align-items: center !important;
	gap: 8px !important; /* Espace fixe de 8px entre le titre et la valeur */
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px dashed #e9ecef !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .com-cashbox-items td:last-child {
    border-bottom: none !important;
  }

  /* 4. Libellés spécifiques pour la liste des mouvements */
  .com-cashbox-items td:nth-child(1)::before { content: "Action :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(2)::before { content: "Propriétaire :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(3)::before { content: "Date :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(4)::before { content: "Valeur :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(5)::before { content: "Statut :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(6)::before { content: "Référence :"; font-weight: bold; color: #495057; }
  .com-cashbox-items td:nth-child(7)::before { content: "Motif :"; font-weight: bold; color: #495057; }
}


/* =========================================================
   STYLE DES LIGNES INACTIVES (CSS PUR)
   ========================================================= */

/* =========================================================
   STYLE DES LIGNES INACTIVES (GRIS ITALIQUE)
   ========================================================= */

/* =========================================================
   STYLE DES LIGNES INACTIVES (GRIS ITALIQUE FIXÉ)
   ========================================================= */

/* 1. Fond gris + Bordure pour les cartes inactives */
#cashboxList tbody tr:has(td:first-child a:not(.fw-bold)) {
  background-color: #f1f3f5 !important;
  border-color: #dee2e6 !important;
  opacity: 0.85 !important;
}

/* 2. Style mobile : alignement strict à gauche et annulation des marges */
@media screen and (max-width: 768px) {
  /* Bordure d'accentuation pour la carte inactive */
  #cashboxList tbody tr:has(td:first-child a:not(.fw-bold)) {
    background-color: #f1f3f5 !important;
    border-left: 4px solid #adb5bd !important;
  }

  /* Rétablissement de l'alignement à gauche pour la 1re cellule */
  #cashboxList td:nth-child(1) {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Annule le margin-left: auto qui poussait le nom vers la droite */
  #cashboxList td:nth-child(1) a {
    margin-left: 0 !important;
    margin-right: 4px !important;
  }
}

/* 3. Texte et liens en gris sombre + Italique */
#cashboxList tbody tr:has(td:first-child a:not(.fw-bold)) td,
#cashboxList tbody tr:has(td:first-child a:not(.fw-bold)) a {
  color: #6c757d !important;
  font-style: italic !important;
}

/* Garde les titres des colonnes (::before) en gras et droits */
#cashboxList tbody tr:has(td:first-child a:not(.fw-bold)) td::before {
  font-style: normal !important;
  color: #495057 !important;
}