/* Custom styles to override theme defaults */

.sidebar {
  background-color: #3c4b64 !important;
  border-right: 3px solid #3c4b64;
}

/* Ensure text is visible on the new background */
.sidebar .nav .nav-item .nav-link {
  color: #FFFFFF;
  transition: all 0.3s ease;
}

/* Modification du style au survol pour les éléments de navigation */
.sidebar .nav .nav-item .nav-link:hover {
  background-color: #FF69B4 !important;
  color: #FFFFFF;
}

.sidebar .nav .nav-item .nav-link i {
  color: #FFFFFF;
  transition: transform 0.3s ease;
}

.sidebar .nav .nav-item .nav-link .menu-title {
  color: #FFFFFF;
}

/* Improved hover styling with a pink color */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
  background-color: #FF69B4;
  transform: translateX(5px);
  transition: all 0.3s ease;
  border-right: 3px solid #3c4b64;
}

.sidebar .nav .nav-item:hover .nav-link i {
  transform: scale(1.2);
}

/* Active menu item styling */
.sidebar .nav .nav-item.active > .nav-link {
  background-color: #FF69B4;
  border-left: 3px solid #3c4b64;
}

/* Top navbar styling */
.navbar {
  border-bottom: 3px solid #3c4b64;
}

/* Styles spécifiques pour surcharger les couleurs dans la navbar */
/* La partie logo (gauche) - Supprimer les transitions qui peuvent causer un flash */
.navbar-brand-wrapper {
  border-right: 3px solid #3c4b64;
  background-color: #3c4b64 !important;
}

.navbar .navbar-brand-wrapper {
  background-color: #3c4b64 !important;
  border-right: 3px solid #3c4b64;
}

/* Classes pour gérer les couleurs de fond */
.navbar-blue-bg {
  background-color: #3c4b64 !important;
}

.navbar-white-bg {
  background-color: #ffffff !important;
}

/* La partie menu (droite) */
.navbar.fixed-top {
  border-bottom: 3px solid #3c4b64 !important;
}

.navbar .navbar-menu-wrapper {
  background-color: #ffffff !important;
}

/* S'assurer que le texte du logo est visible */
.navbar .navbar-brand-wrapper .navbar-brand {
  color: #ffffff !important;
  font-weight: bold;
  visibility: visible !important;
  display: block !important;
}

/* Viser spécifiquement le texte h3 Janazapp dans la navbar-brand */
.navbar .navbar-brand-wrapper .navbar-brand h3 {
  color: #ffffff !important;
  font-weight: bold;
  visibility: visible !important;
  display: inline-block !important;
}

.navbar .navbar-brand-wrapper .brand-logo-mini {
  color: #ffffff !important;
  visibility: visible !important;
}

/* Préchargement de styles pour empêcher le flash rose */
.text-center.navbar-brand-wrapper {
  background-color: #3c4b64 !important;
}

/* Cacher le texte JanazApp et changer le fond en blanc quand la fenêtre est rétrécie ou la navbar est réduite */
@media (max-width: 991px) {
  .navbar .navbar-brand-wrapper .navbar-brand h3 {
    display: none !important;
  }
   
  .navbar .navbar-brand-wrapper {
    background-color: #ffffff !important;
  }
  
  .text-center.navbar-brand-wrapper {
    background-color: #ffffff !important;
  }

  /* Changer aussi les couleurs d'icônes en cas de fond blanc */
  .navbar-white-bg i, 
  .navbar-white-bg .navbar-brand {
    color: #3c4b64 !important;
  }
}

/* Préchargement des styles pour le corps - Empêcher les flashs */
body::before {
  content: "";
  display: none;
}

body.sidebar-icon-only::before {
  content: "";
  display: none;
}

/* Changer le fond en blanc et cacher le texte quand le sidebar est en mode mini */
body.sidebar-icon-only .navbar-brand-wrapper,
body.sidebar-icon-only .text-center.navbar-brand-wrapper,
.sidebar-icon-only .navbar-brand-wrapper,
.sidebar-icon-only .text-center.navbar-brand-wrapper {
  background-color: #ffffff !important;
}

body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand h3 {
  display: none !important;
}

/* Force le fond blanc quand la class est appliquée */
.navbar-brand-wrapper.navbar-white-bg {
  background-color: #ffffff !important;
  border-right: 3px solid #3c4b64;
}

/* Force le fond bleu quand la class est appliquée */
.navbar-brand-wrapper.navbar-blue-bg {
  background-color: #3c4b64 !important;
  border-right: 3px solid #3c4b64;
}

/* Styles pour les textes et icônes dans la barre de menu droite */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
  color: #3c4b64 !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
  color: #3c4b64 !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle:after {
  color: #3c4b64 !important;
}

/* Dashboard admin cards styling */
.card {
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  border: none;
  border: 1px solid #d8dbe0;
}

.card .card-body {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #f8f9fa, #ffffff);
  color: #333333;
}

.card .card-body:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Style for dashboard stat cards */
.card .count-number {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0;
  color: #333333;
}

.card .count-title {
  font-size: 1rem;
  color: #6c7383;
  margin-bottom: 0;
}

/* Styles spécifiques pour chaque type de card */
.card-janazas .card-body {
  background: linear-gradient(145deg, #f2f7ff, #e6f0ff);
  border-left: 4px solid #3c4b64;
}

.card-janazas .count-number {
  color: #3c4b64;
}

.card-participations .card-body {
  background: linear-gradient(145deg, #f2f7ff, #e6f0ff);
  border-left: 4px solid #4d5f82;
}

.card-participations .count-number {
  color: #4d5f82;
}

.card-lieux .card-body {
  background: linear-gradient(145deg, #f2f7ff, #e6f0ff);
  border-left: 4px solid #2c3e50;
}

.card-lieux .count-number {
  color: #2c3e50;
}

.card-utilisateurs .card-body {
  background: linear-gradient(145deg, #f2f7ff, #e6f0ff);
  border-left: 4px solid #546e7a;
}

.card-utilisateurs .count-number {
  color: #546e7a;
}

.card .icon-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 2px solid #3c4b64;
}

.card-janazas .icon-holder i {
  color: #3c4b64;
}

.card-participations .icon-holder i {
  color: #4d5f82;
}

.card-lieux .icon-holder i {
  color: #2c3e50;
}

.card-utilisateurs .icon-holder i {
  color: #546e7a;
}

/* Assurer la visibilité du texte dans le main-panel */
.main-panel {
  color: #333333;
}

.main-panel h1, .main-panel h2, .main-panel h3, 
.main-panel h4, .main-panel h5, .main-panel h6 {
  color: #333333;
  border-bottom: 2px solid #3c4b64;
  padding-bottom: 5px;
  display: inline-block;
}

.main-panel a {
  color: #3c4b64;
}

.main-panel a:hover {
  color: #263345;
}

/* Tables avec bordure */
.table {
  border: 1px solid #d8dbe0;
}

.table thead th {
  border-bottom: 2px solid #3c4b64 !important;
}

.table-bordered td, .table-bordered th {
  border: 1px solid #d8dbe0 !important;
}

/* Styles pour les flèches de tri dans les tableaux */
table .sortable a, 
table .sortable button,
table thead th a,
table thead th button,
table th.sortable a,
.table th.sortable a,
.table-sortable th a,
.sorted a {
  color: #3c4b64 !important;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  padding-right: 20px !important;
}

table .sortable a:hover, 
table .sortable button:hover,
table thead th a:hover,
table thead th button:hover,
.table-sortable th a:hover,
.sorted a:hover {
  color: #263345 !important;
  text-decoration: underline;
}

/* Icônes de tri des tableaux */
.sorted .arrow,
.sorting-icon,
.sort-icon,
table .sortable i,
table thead th i.fa,
table thead th i.fas,
table thead th span.fa,
table thead th span.fas,
.table th .fa,
.table th .fas {
  color: #3c4b64 !important;
  opacity: 1 !important;
  font-size: 1rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Flèches de tri spécifiques */
.fa-sort-up, .fa-sort-down, .fa-sort,
.fas-sort-up, .fas-sort-down, .fas-sort,
.sort-up, .sort-down, .sort {
  color: #3c4b64 !important;
  opacity: 1 !important;
  margin-left: 5px;
}

/* Pour les flèches Font Awesome dans certains frameworks */
.sorted[data-sort="asc"]::after,
.sorted[data-sort="desc"]::after,
th[data-sort="asc"]::after,
th[data-sort="desc"]::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #3c4b64 !important;
  opacity: 1 !important;
  font-size: 1rem;
  margin-left: 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.sorted[data-sort="asc"]::after,
th[data-sort="asc"]::after {
  content: "\f0de"; /* fa-sort-up */
}

.sorted[data-sort="desc"]::after,
th[data-sort="desc"]::after {
  content: "\f0dd"; /* fa-sort-down */
}

/* Pour DataTables spécifiquement */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #3c4b64 !important;
  opacity: 1 !important;
  font-size: 1rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Ajout des icônes de tri par défaut */
table thead th.sortable::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0dc"; /* fa-sort */
  color: #3c4b64 !important;
  opacity: 1 !important;
  font-size: 1rem;
  margin-left: 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

table thead th.sorting_asc::after {
  content: "\f0de"; /* fa-sort-up */
}

table thead th.sorting_desc::after {
  content: "\f0dd"; /* fa-sort-down */
}

/* Remove background from logout button */
.navbar-nav.navbar-nav-right .nav-item.nav-profile .nav-link {
  background-color: transparent !important;
}

/* Style the logout icon */
.navbar-nav.navbar-nav-right .nav-item.nav-profile .nav-link i {
  transition: transform 0.3s ease;
  color: #3c4b64 !important;
}

.navbar-nav.navbar-nav-right .nav-item.nav-profile .nav-link:hover i {
  transform: translateX(3px);
}

/* Styles pour la pagination */
.pagination {
  margin-top: 20px;
}

.pagination .page-item .page-link {
  color: #3c4b64;
  border-color: #d8dbe0;
  background-color: #ffffff;
}

.pagination .page-item:hover .page-link {
  background-color: #f3f3f3;
  color: #263345;
}

/* Style pour l'élément actif de la pagination */
.pagination .page-item.active .page-link {
  background-color: #3c4b64;
  border-color: #3c4b64;
  color: #ffffff !important; /* Forcer la couleur du texte en blanc */
  font-weight: bold;
}

/* S'assurer que le texte est bien visible dans l'élément actif */
.page-item.active > .page-link {
  color: #ffffff !important;
  background-color: #3c4b64 !important;
  border-color: #3c4b64 !important;
  z-index: 3;
}

/* KnpPaginator spécifique */
.pagination span.current {
  background-color: #3c4b64 !important;
  border-color: #3c4b64 !important;
  color: #ffffff !important;
  font-weight: bold;
}

/* Style pour les autres librairies de pagination */
.pagination li.active a, 
.pagination li.active span, 
.pagination .active > a, 
.pagination .active > span {
  background-color: #3c4b64 !important;
  border-color: #3c4b64 !important;
  color: #ffffff !important;
  font-weight: bold;
}