/* ===== Locauxcom – styles légers pour mobile ===== */

/* 1) Textes qui ne doivent pas aller à la ligne (montants, dates) */
.nowrap { white-space: nowrap; }

/* 2) KPIs / gros chiffres : taille adaptée sur mobile */
.kpi { font-size: 1.5rem; }            /* desktop par défaut */
@media (max-width: 576px) {
  .kpi { font-size: 1.25rem; }         /* un peu plus petit sur mobile */
  .display-6 { font-size: 1.25rem; }   /* si tu utilises encore display-6 */
}

/* 3) Boutons plus “touch-friendly” sur mobile */
@media (max-width: 576px) {
  .btn { padding: .5rem .75rem; }
}

/* 4) Tableaux plus compacts & scroll doux */
.table.table-sm td, 
.table.table-sm th { padding: .4rem .5rem; }
.table-responsive { scrollbar-gutter: stable both-edges; }

/* 5) Cartes : espace cohérent sur petits écrans */
.card { border-radius: .75rem; }
@media (max-width: 576px) {
  .card .card-body { padding: .9rem; }
}

/* 6) Badges un peu plus lisibles */
.badge { letter-spacing: .2px; }

/* 7) Footer centré (nom du développeur) */
.app-footer { 
  text-align: center; 
  font-size: .9rem; 
  color: #6c757d; 
  padding: .75rem 0 1rem;
}

.btn-ctr {
    width: 85px;       /* tu peux augmenter ou diminuer */
    text-align: center; 
}

/* Pour que les derniers boutons ne passent pas sous la barre de défilement verticale */
.table-contrats-wrapper {
    padding-right: 0.75rem;   /* tu peux mettre 1rem si tu veux un peu plus d'air */
}

/* Donne un peu d'air à droite comme pour les contrats */
.table-paiements-wrapper {
  padding-right: 0.75rem;   /* tu peux monter à 1rem si tu veux */
}

/* Laisse Bootstrap gérer la largeur du tableau paiements */
.table-paiements {
  width: 100%;
  table-layout: auto;
}

/* On autorise les retours à la ligne, sauf dans les montants (alignés à droite) */
.table-paiements th,
.table-paiements td {
  white-space: normal;
}

.table-paiements td.text-end {
  white-space: nowrap;
}

/* Alternance légère sur mobile */
@media (max-width: 575.98px) {
  .table-paiements tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
  }
}


/* Règle générale : pas de nowrap global */
.table-contrats th,
.table-contrats td {
    white-space: normal;
}
.table-contrats th.loyer,
.table-contrats td.loyer,
.table-contrats th.impayes,
.table-contrats td.impayes {
    white-space: nowrap;
}

.table-contrats th:last-child,
.table-contrats td:last-child {
    /* on enlève le nowrap qui empêche les boutons de passer à la ligne */
    min-width: 130px;   /* tu peux mettre 120 ou 140 si besoin */
}

/* À tester sans les % pour commencer */
.table-contrats th.ref      { width: 13%; }
.table-contrats th.local    { width: 5%; }
.table-contrats th.client   { width: 21%; }
.table-contrats th.debut    { width: 10%; }
.table-contrats th.fin      { width: 10%; }
.table-contrats th.caution  { width: 6%; }
.table-contrats th.loyer    { width: 7%; }
.table-contrats th.impayes  { width: 6%; }
.table-contrats th.statut   { width: 7%; }
.table-contrats th.actions  { width: 15%; }

 
 .table td, .table th {
  border-right: 1px solid #dee2e6 !important; /* gris clair */
}

.table td:last-child,
.table th:last-child {
  border-right: none !important; /* propre sur la dernière colonne */
}

/* Tableau paiements : laisser Bootstrap gérer la largeur */
.table-paiements {
  width: 100%;
  table-layout: auto;
}

/* Par défaut : on autorise les retours à la ligne partout */
.table-paiements th,
.table-paiements td {
  white-space: normal;
}

/* On garde les montants / dates sur une seule ligne */
.table-paiements td.text-end {
  white-space: nowrap;
}

/* Sur petit écran : boutons d'actions empilés, pour éviter de déborder */
@media (max-width: 575.98px) {
  .table-paiements tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
  }
}



.logo-locauxcom {
  height: 32px;   /* ajuste la taille à ton goût (24, 32, 40…) */
  width: auto;    /* garde les proportions */
  object-fit: contain;
}
/* Taille raisonnable pour le logo dans la navbar */
.navbar-logo {
    height: 32px;      /* ou 40px si tu veux plus grand */
    width: auto;
    object-fit: contain;
}


/* Pour éviter que Bootstrap remette tout à zéro */
.table-responsive {
  overflow-x: auto;
}




/* Permet le scroll horizontal sur petit écran */
.card-body .table-responsive {
  overflow-x: auto;
}
/* Espace au-dessus des tables dans les cards */
.card-body > .table-responsive {
    margin-top: 10px;
}

/* Tableau des échéances impayées : laisser Bootstrap gérer */
.table-echeances th,
.table-echeances td {
  white-space: nowrap;   /* juste pour éviter les retours à la ligne moches */
}

/* ===== Vue mobile des échéances impayées ===== */
.echeances-mobile-list {
  /* rien de spécial pour l’instant */
}

.echeance-mobile-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e9ecef;
}

/* Fond alterné pour lisibilité */
.echeance-mobile-item:nth-child(even) {
  background-color: #f8f9fa;
}

/* Ligne du haut : client + badge reste dû */
.echeance-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

/* Empêcher le nom de déborder */
.echeance-mobile-client {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ligne de dates en plus petit */
.echeance-mobile-dates {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .8rem;
}

/* Texte secondaire */
.echeance-mobile-sub {
  font-size: .8rem;
  color: #6c757d;
}

/* Alternance de fond sur mobile pour les paiements */
@media (max-width: 575.98px) {
  .table-paiements tbody tr:nth-child(odd) {
    background-color: #f8f9fa; /* gris très léger */
  }
}

/* Wrappers pour éviter que la dernière colonne passe sous la barre de scroll */
.table-membres-wrapper,
.table-locaux-wrapper {
  padding-right: 0.75rem;   /* comme pour contrats / paiements */
}

/* Table membres : laisser Bootstrap gérer la largeur */
.table-membres {
  width: 100%;
  table-layout: auto;
}
.table-membres th,
.table-membres td {
  white-space: normal;      /* le mail peut aller à la ligne */
}

/* Table locaux : idem */
.table-locaux {
  width: 100%;
  table-layout: auto;
}
.table-locaux th,
.table-locaux td {
  white-space: normal;
}

/* Sur mobile : on évite que les boutons d'action débordent */
@media (max-width: 575.98px) {
  .table-membres td:last-child .btn,
  .table-locaux  td:last-child .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
  }
}