.layout-navbar,
#layout-navbar {
  z-index: 1030 !important; /* doit être < z-index de la modal (2000 ci-dessus) */
  position: relative !important; /* ou fixed si tu veux qu'elle reste sticky, mais garde z-index moindre */
}

/* dropdowns dans la navbar (sécuriser) */
#rtl-nav-user .dropdown-menu,
nav .dropdown-menu {
  z-index: 1040 !important;
}

/* ensure transform animates reliably and pointer-events behave */
@media (max-width: 1199.98px) {
  #layout-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 86%;
    transform: translateX(110%);
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
    will-change: transform;
    z-index: 1050;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 40px rgba(6,10,30,0.18);
  }
  body.menu-open #layout-menu { transform: translateX(0); }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(6,10,30,0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.menu-open .menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* avoid CSS conflict with collapsed class */
  #layout-menu.menu-collapsed { transform: translateX(110%); }
}
.layout-menu-toggle { display: flex !important; align-items:center; }

/* collapsed sidebar appearance (desktop) */
#layout-menu.menu-collapsed {
  width: 72px !important;
  transition: width .24s ease, transform .28s cubic-bezier(.2,.9,.3,1);
}

/* hide textual elements when collapsed */
#layout-menu.menu-collapsed .brand-text,
#layout-menu.menu-collapsed .menu-label,
#layout-menu.menu-collapsed .menu-title {
  display: none !important;
}

/* make icons full-width and centered when collapsed */
#layout-menu.menu-collapsed .menu-icon {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center;
  padding: 10px 0;
}

/* reduce padding / visual noise */
#layout-menu.menu-collapsed .menu-link {
  padding: 6px 8px !important;
  justify-content: center;
}

/* keep the brand logo visible but smaller when collapsed */
#layout-menu.menu-collapsed .app-brand-img {
  max-height: 42px;
  margin: 6px auto;
}

/* show chevron direction when collapsed/expanded (header toggle icon) */
#global-layout-toggle .bx {
  transition: transform .18s ease;
}
#layout-menu.menu-collapsed ~ .layout-navbar #global-layout-toggle .bx,
body.menu-collapsed #global-layout-toggle .bx {
  transform: rotate(180deg);
}

/* ensure off-canvas mobile rules still work (keeps previous mobile sliding behaviour) */
@media (max-width: 1199.98px) {
  #layout-menu { /* keep your existing off-canvas translate rules */ }
  /* When in off-canvas mode we don't show the mini collapsed state; ensure collapsed class doesn't hide it unintentionally */
  #layout-menu.menu-collapsed { transform: translateX(110%); width: 300px !important; }
}
/* Desktop collapse behavior (visible effect) */
@media (min-width: 1200px) {
  #layout-menu.menu-collapsed {
    width: 72px !important;
    overflow-x: hidden !important;
  }

  #layout-menu.menu-collapsed .menu-text,
  #layout-menu.menu-collapsed .brand-text {
    display: none !important;
  }

  #layout-menu.menu-collapsed .menu-icon {
    justify-content: center;
    width: 100%;
  }

  #layout-menu.menu-collapsed .menu-link {
    justify-content: center;
  }
}
/* ---------- Collapsed: center brand + icons ---------- */
#layout-menu.menu-collapsed .app-brand.demo {
  justify-content: center !important;   /* center logo when collapsed */
  padding: .45rem 0;
  gap: 0;
}

#layout-menu.menu-collapsed .brand-text { 
  display: none !important;             /* hide text */
}

/* make sure only the logo remains and is centered */
#layout-menu.menu-collapsed .app-brand-link {
  display: block;
  margin: 0 auto;
}
#layout-menu.menu-collapsed .app-brand-img {
  max-height: 48px;                      /* appropriate smaller size */
  width: auto;
  display: block;
  margin: 6px auto;
}

/* center icons & menu links when collapsed */
#layout-menu.menu-collapsed .menu-list {
  padding-top: .6rem;
}
#layout-menu.menu-collapsed .menu-item {
  margin: .18rem 0;
}
#layout-menu.menu-collapsed .menu-link {
  display: flex;
  justify-content: center !important;   /* center the icon horizontally */
  align-items: center;
  padding: 8px 0 !important;
  text-align: center;
}

/* icon container: full-width, centered */
#layout-menu.menu-collapsed .menu-icon {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center;
  padding: 8px 0;
}

/* remove any left-side active indicator and center the active item */
/* #layout-menu .menu-item.active > .menu-link::after {
  display: none !important;
} */

/* give the active item a subtle centered background (instead of a left bar) */
#layout-menu.menu-collapsed .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(47,119,217,0.06), rgba(232,91,23,0.03));
  border-radius: 10px;
  box-shadow: none;
  justify-content: center !important;
}

/* remove extra left padding that could push icons off-center */
#layout-menu .menu-link { padding-left: .5rem; padding-right: .5rem; }
#layout-menu.menu-collapsed .menu-link { padding-left: 0; padding-right: 0; }

/* hide icon container if there is no icon inside */
#layout-menu .menu-icon:empty { display: none !important; }

/* small tweak: ensure title rows also don't show text when collapsed */
#layout-menu.menu-collapsed .menu-title,
#layout-menu.menu-collapsed .menu-label {
  display: none !important;
}
/* Mobile off-canvas + backdrop (keep after existing sidebar CSS) */
@media (max-width:1199.98px) {
  #layout-menu {
    position: fixed;
    top: 0;
    right: 0;            /* RTL: menu slides from right */
    bottom: 0;
    width: 300px;
    max-width: 86%;
    transform: translateX(110%); /* hidden by default */
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
    will-change: transform;
    z-index: 1050;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 40px rgba(6,10,30,0.18);
    pointer-events: auto;
  }

  body.menu-open #layout-menu {
    transform: translateX(0);
  }

  /* backdrop */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(6,10,30,0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.menu-open .menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* === Mobile: show full menu content when open === */
@media (max-width: 1199.98px) {
  /* Ensure opened off-canvas uses full layout (ignore collapsed styles) */
  body.menu-open #layout-menu,
  body.menu-open #layout-menu.menu-collapsed {
    transform: translateX(0) !important;
    width: 300px !important;
  }

  /* When open, always show brand text & labels */
  body.menu-open #layout-menu .brand-text,
  body.menu-open #layout-menu .menu-label,
  body.menu-open #layout-menu .menu-title {
    display: block !important;
    opacity: 1 !important;
  }

  /* keep icons in their normal column (not centered) */
  body.menu-open #layout-menu .menu-icon {
    width: var(--icon-width) !important;
    min-width: var(--icon-width) !important;
    justify-content: center; /* icon centered inside its column */
  }

  /* restore normal link layout: icon + label on one line */
  body.menu-open #layout-menu .menu-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    padding: .6rem .9rem !important;
    text-align: right;
  }

  /* make sure header brand shows full */
  body.menu-open #layout-menu .app-brand-img {
    max-height: 78px;
    margin: 0;
  }
}