/* Custom menu styles for Luctiva */

/* Default state for the collapsed menu on larger screens */
.layout-menu-collapsed .layout-menu {
  width: 90px !important;
  top: 0.75rem;
  height: calc(100% - 1.5rem);
  border-radius: 0.5rem;
  left: 1.5rem;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

/* Hide text and headers in collapsed state */
.layout-menu-collapsed .layout-menu .menu-inner > .menu-item > .menu-link span,
.layout-menu-collapsed .layout-menu .menu-inner > .menu-header {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

/* SOLUTION ULTRA SPÉCIFIQUE : Force l'application des styles */
.layout-menu-collapsed .layout-menu .app-brand .app-brand-text {
  opacity: 0 !important;
}

/* RÈGLE UNIQUE ET CLAIRE - Décalage du logo vers la gauche */
.layout-menu-collapsed .layout-menu .app-brand {
  transform: translateX(-5px) !important; /* Décalage de 9px vers la gauche */
  text-align: center !important;
}

/* Hover State: Expand the menu */
.layout-menu-collapsed .layout-menu:hover {
  width: 260px !important;
  top: 0;
  height: 100%;
  left: 0;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  overflow: visible !important;
}

/* Reveal menu item text and headers on hover */
.layout-menu-collapsed .layout-menu:hover .menu-inner > .menu-item > .menu-link span,
.layout-menu-collapsed .layout-menu:hover .menu-inner > .menu-header {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Révéler le texte au survol avec positionnement à gauche - ULTRA SPÉCIFIQUE */
.layout-menu-collapsed .layout-menu:hover .app-brand.demo {
  text-align: left !important; /* Positionner à gauche */
  padding-left: 1rem !important; /* Plus décalé vers la gauche */
  padding-right: 2rem !important;
  width: 100% !important; /* S'assurer que le container prend toute la largeur */
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Règle alternative pour le hover */
.layout-menu-collapsed .layout-menu:hover .app-brand {
  text-align: left !important; /* Positionner à gauche */
  padding-left: 1rem !important; /* Plus décalé vers la gauche */
  padding-right: 2rem !important;
  width: 100% !important; /* S'assurer que le container prend toute la largeur */
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.layout-menu-collapsed .layout-menu:hover .app-brand .app-brand-link {
  display: flex !important;
  align-items: center !important;
  /* Pas de gap - logo et texte collés */
}

.layout-menu-collapsed .layout-menu:hover .app-brand .app-brand-text {
  opacity: 1 !important;
  white-space: nowrap !important; /* Empêcher la coupure du texte */
  overflow: visible !important; /* S'assurer que le texte ne soit pas coupé */
}

/* Ensure the main content area adjusts correctly */
.layout-menu-collapsed .layout-page {
    padding-left: calc(90px + 2.5rem) !important;
    transition: padding-left 0.3s ease-in-out;
}
.layout-menu-collapsed .layout-menu:hover + .layout-page {
    padding-left: calc(260px + 1rem) !important;
}

/* Hide the menu toggle button when the custom animation is active,
   as the hover animation replaces its functionality on desktop. */
.layout-menu-collapsed .layout-navbar .layout-menu-toggle {
    display: none;
}