/* Variables de couleurs principales */
:root {
  --main-blue: #1a237e;
  --main-yellow: #ffd600;
  --main-text: #1a237e;
  --main-bg: #f5f7fa;
}
/* Mode sombre */
.dark-mode {
  background-color: #181a20 !important;
  color: #e0e0e0 !important;
}
.dark-mode .bg-primary {
  background-color: #23263a !important;
}
.dark-mode .text-primary {
  color: #90caf9 !important;
}
.dark-mode .sidebar {
  background-color: #23263a !important;
  color: #e0e0e0 !important;
}
.dark-mode .sidebar-menu .nav-link {
  color: #e0e0e0 !important;
}
.dark-mode .sidebar-menu .nav-link:hover,
.dark-mode .sidebar-menu .nav-link:focus {
  background: #181a20;
  color: #90caf9 !important;
}
.dark-mode .card {
  background: #23263a;
  color: #e0e0e0;
  border-color: #23263a;
}
.dark-mode .card-title {
  color: #90caf9 !important;
}
.dark-mode .btn-primary {
  background-color: #23263a !important;
  color: #90caf9 !important;
  border: none;
}
.dark-mode .btn-outline-primary {
  border-color: #90caf9 !important;
  color: #90caf9 !important;
}
.dark-mode footer {
  background-color: #23263a !important;
  color: #e0e0e0 !important;
}
.btn-primary#sidebarToggle,
#sidebarToggle.btn-primary {
  background-color: var(--main-blue) !important;
  border: none;
  color: #fff;
  z-index: 1100;
  position: relative;
}
#sidebarToggle.btn-primary:active,
#sidebarToggle.btn-primary:focus,
#sidebarToggle.btn-primary:hover {
  background-color: #16206a !important;
  color: #fff;
}
body {
  background-color: var(--main-bg);
  font-family: 'Segoe UI', Arial, sans-serif;
/* Suppression accolade isolée */
.bg-primary {
  background-color: var(--main-blue) !important;
}
.text-primary {
  color: var(--main-text) !important;
}
.btn-warning {
  background-color: var(--main-yellow);
  color: var(--main-blue);
  border: none;
}
/* Formulaire de personnalisation des couleurs */
.color-form-inline {
  display: inline-block;
}
.color-form-input {
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  margin: 0;
}
.sidebar {
  width: 260px;
  min-width: 260px;
  transition: left 0.3s, transform 0.3s;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-content {
  min-width: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 2rem;
}
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1050;
    box-shadow: 2px 0 10px rgba(0,0,0,0.08);
    width: 260px;
    min-width: 260px;
    background: #1a237e;
    transition: left 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
  }
  .sidebar.active {
    left: 0;
    transform: none;
  }
  .main-content {
    width: 100%;
    margin-left: 0;
  }
    .sidebar-menu .nav-link {
      font-size: 1.1rem;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
  }
   .sidebar-menu .nav-link:hover,
   .sidebar-menu .nav-link:focus {
    background: #fff;
    color: #1a237e !important;
    box-shadow: 0 2px 8px rgba(26,35,126,0.10);
    border-radius: 6px;
    font-weight: 500;
  }
/* Amélioration de la visibilité du lien actif dans le menu latéral */
.sidebar-menu .nav-link.active {
  background: #fff;
  color: var(--main-blue) !important;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(26,35,126,0.10);
}
/* Effet hover sur les cartes du dashboard */
.card {
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 6px 24px rgba(26,35,126,0.15), 0 1.5px 6px #1a237e;
  transform: translateY(-4px) scale(1.03);
  border: 1.5px solid #1a237e;
  background: #fff;
}
}
@media (max-width: 767.98px) {
  .card-title {
    font-size: 1rem;
  }
  .card-text {
    font-size: 0.95rem;
  }
  .card {
    margin-bottom: 1rem;
  }
  header.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
}
footer {
  background-color: #1a237e;
}
img {
  transition: transform 0.3s;
}
img:hover {
  transform: scale(1.05);
}

/* Largeur personnalisée pour les filtres et la recherche paiements */
.w-classe { width: 120px; }
.w-status { width: 120px; }
.w-period { width: 130px; }
.w-search { width: 160px; }

/* Style badge statut paiement */
.badge.bg-success { font-size: 0.95em; }
.badge.bg-warning { font-size: 0.95em; }

/* Boutons d'action paiements */
.btn-facture, .btn-historique {
  min-width: 36px;
}

/* Statistiques paiements */
#totalEncaisse, #totalAttente, #nbPaiements {
  color: var(--main-blue);
}