.brand-logo {
  height: 5rem;
  border-bottom: 2px solid var(--bs-border-layout-color);
}

.title-section {
  margin-block: 1rem;
}

.left-sidebar .scroll-sidebar {
  padding-top: 1rem;
  height: calc(100vh - 10rem) !important;
  padding: 0 10px !important;
}

.app-header {
  height: 5rem;
  border-bottom: 2px solid var(--bs-border-layout-color);
}

.sidebar-item {
  margin-bottom: 1rem;
}

.sidebar-link {
  padding-left: 1.5rem !important;
}

.sidebar-link.has-arrow {
  margin-bottom: 1rem !important;
}

#search-addon {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #777e89;
  text-align: center;
  white-space: nowrap;
  /* background-color: #ecf0f2; */
  /* border: var(--bs-border-width) solid #f6f8fb; */
  border-radius: 7px;
}

.search-all-input {
  border: none;
  width: 20rem !important;
}

.input-wrapper {
  position: relative;
  display: inline-block;
  /* ou block selon ton besoin */
  width: 100%;
  /* ou fixe */
}

.input-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  border-bottom: 1px solid #9ba1a3;
  pointer-events: none;
}

.navbar-nav>.nav-item:not(:last-child)>.nav-link {
  position: relative;
}

.navbar-nav>.nav-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%;
  /* start point of the border */
  bottom: 20%;
  /* end point of the border */
  right: 0;
  /* place at right side */
  width: 1px;
  background-color: var(--bs-border-layout-color);
}

.card-category-shortcut {
  border: none;
  border-radius: 1.5rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: all 0.3s ease-in-out;
}

/* .list-action-right {
  text-align: end;
} */

.input-group-text {
  border: var(--bs-border-width) solid #dfe5ef;
}

.dt-paging {
  margin-block: 1rem !important;
}

.page-link {
  position: relative;
  display: block;
  /* color: var(--bs-app-green); */
  color: #777e89;
  text-decoration: none;
  /* border: 1px solid var(--bs-app-green); */
  border: var(--bs-border-width) solid #dfe5ef;

  &:hover {
    z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: var(--bs-app-green);
    border-color: var(--bs-app-green);
  }

  &:focus {
    z-index: 3;
    color: #fff;
    background-color: var(--bs-app-green);
    box-shadow: 0 0 0 0.25rem rgba(39, 175, 97, 0.4);
  }

  &.active,
  .active>& {
    z-index: 3;
    color: #fff;
    background-color: var(--bs-app-green);
    border-color: var(--bs-app-green);
  }

  /* &.disabled,
  .disabled > & {
    color: var(--#{$prefix}pagination-disabled-color);
    pointer-events: none;
    background-color: var(--#{$prefix}pagination-disabled-bg);
    border-color: var(--#{$prefix}pagination-disabled-border-color);
  } */
}

#menu-toggle {
  cursor: pointer;
  width: -webkit-fit-content;
}




/* BUTTON */
.btn-app-green {
  --bs-btn-color: #fff;
  --bs-btn-bg: #27af61;
  --bs-btn-border-color: #27af61;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(34, 153, 86);
  /* lighter hover */
  --bs-btn-hover-border-color: rgb(32, 143, 80);
  --bs-btn-focus-shadow-rgb: 71, 182, 126;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(32, 143, 80);
  /* darker active */
  --bs-btn-active-border-color: rgb(29, 130, 73);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #27af61;
  --bs-btn-disabled-border-color: #27af61;
}

.btn-outline-app-green {
  --bs-btn-color: #27af61;
  --bs-btn-border-color: #27af61;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27af61;
  --bs-btn-hover-border-color: #27af61;
  --bs-btn-focus-shadow-rgb: 39, 175, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #27af61;
  --bs-btn-active-border-color: #27af61;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #27af61;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #27af61;
  --bs-gradient: none;
}

.text-app-green {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-app-green-rgb), var(--bs-text-opacity)) !important;
}

.btn-wishlist {
  --bs-btn-color: #d74e55;
  --bs-btn-bg: #f6f8fb;
  --bs-btn-border-color: #f6f8fb;
  --bs-btn-hover-color: #d74e55;
  --bs-btn-hover-bg: #e9edf3;
  /* slightly darker */
  --bs-btn-hover-border-color: #e9edf3;
  --bs-btn-focus-shadow-rgb: 215, 78, 85;
  --bs-btn-active-color: #d74e55;
  --bs-btn-active-bg: #dce2eb;
  /* one step darker */
  --bs-btn-active-border-color: #dce2eb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #d74e55;
  --bs-btn-disabled-bg: #f6f8fb;
  --bs-btn-disabled-border-color: #f6f8fb;
  --bs-gradient: none;
}


.btn-wishlist-active {
  --bs-btn-color: #d74e55;
  --bs-btn-bg: #fae8e5;
  --bs-btn-border-color: #fae8e5;
  --bs-btn-hover-color: #d74e55;
  --bs-btn-hover-bg: #f2d2cd;
  /* slightly darker pastel */
  --bs-btn-hover-border-color: #f2d2cd;
  --bs-btn-focus-shadow-rgb: 215, 78, 85;
  --bs-btn-active-color: #d74e55;
  --bs-btn-active-bg: #e6c0bb;
  /* another step darker */
  --bs-btn-active-border-color: #e6c0bb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #d74e55;
  --bs-btn-disabled-bg: #fae8e5;
  --bs-btn-disabled-border-color: #fae8e5;
  --bs-gradient: none;
}

.btn-danger-light {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-bg: #f6f8fb;
  --bs-btn-border-color: #f6f8fb;
  --bs-btn-hover-color: var(--bs-danger);
  --bs-btn-hover-bg: #e9edf3;
  /* slightly darker */
  --bs-btn-hover-border-color: #e9edf3;
  --bs-btn-focus-shadow-rgb: 215, 78, 85;
  --bs-btn-active-color: var(--bs-danger);
  --bs-btn-active-bg: #dce2eb;
  /* one step darker */
  --bs-btn-active-border-color: #dce2eb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: #f6f8fb;
  --bs-btn-disabled-border-color: #f6f8fb;
  --bs-gradient: none;
}

.btn-success-light {
  --bs-btn-color: var(--bs-success);
  --bs-btn-bg: #f6f8fb;
  --bs-btn-border-color: #f6f8fb;
  --bs-btn-hover-color: var(--bs-success);
  --bs-btn-hover-bg: #e9edf3;
  /* slightly darker */
  --bs-btn-hover-border-color: #e9edf3;
  --bs-btn-focus-shadow-rgb: 215, 78, 85;
  --bs-btn-active-color: var(--bs-success);
  --bs-btn-active-bg: #dce2eb;
  /* one step darker */
  --bs-btn-active-border-color: #dce2eb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-bg: #f6f8fb;
  --bs-btn-disabled-border-color: #f6f8fb;
  --bs-gradient: none;
}


@media (max-width: 575.98px) {
  .form-button {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .list-action-section .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  #navbarNav {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #navbarNav {
    display: none;
  }
}

/* chevron du menu */
.chevron-icon {
  transition: transform 0.3s ease;
}

.chevron-rotated {
  transform: rotate(180deg);
}

/* recherche et per page DATATABLE */
/* .dt-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Ajuster largeur si besoin /
.dt-length,
.dt-search {
    margin-bottom: 1rem;
} */

/* backround sous menus */
/* Background des sous-menus quand le menu est ouvert */
.sidebar-item ul li {
  background-color: #ddebff !important;
  /* width: 110% !important; */
}

.greenIcone {
  color: green !important;
}

/* border bottom de tous les form */
form input,
form select,
form textarea {
  border-bottom: 1px solid #9f9d9d !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link {
  padding-left: 14px !important;
}

/* les boutons action */
/* Ajoute un style pour le conteneur flex */
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  /* Empêche le wrapping */
  justify-content: flex-end;
  /* Alignement des éléments à droite */
  gap: 8px;
  /* Espacement entre les boutons */
}

.form-commande form {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
}
.card-category-shortcut img {
    width: 100%;         
    height: 150px;        
    object-fit: cover;   
    border-radius: 8px; 
    transition: 0.5s;
}
.card-category-shortcut span{
    transition: 0.5s;
}

.card-category-shortcut:hover > img{
  transform: scale(1.1);
}
.card-category-shortcut:hover > span{
  font-weight: 500;
}

@media (max-width: 825px) { 
  .list-categorie {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) { 
  .list-categorie {
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}

/* hover sur les commandes */

/* Style de base des cartes pour une transition douce */
.card-category-shortcut {
    border: 1px solid #dee2e6;
    transition: all 0.3s ease-in-out; 
    color: #212529;
}

/* Effet au survol (hover) */
.card-category-shortcut:hover {
    background-color: #27af61;
    border-color: #27af61; 
    color: #ffffff; 
    /* transform: translateY(-5px);  */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* Assurer que l'icône (SVG) change aussi de couleur au survol */
.card-category-shortcut:hover .bi {
    fill: #ffffff !important;
}

/* Assurer que le titre (h5) reste blanc au survol */
.card-category-shortcut:hover .card-title {
    color: #ffffff !important;
}