/* Sidebar Hover Expand for 'sm' state - Assumed Widths */
html[data-sidebar-size="sm"] .app-menu {
  transition: width 0.3s ease;
}

html[data-sidebar-size="sm"] .main-content {
  transition: margin-left 0.3s ease;
}

/* Initial state for sm (ensure text/logo are hidden) */
html[data-sidebar-size="sm"] .navbar-nav .nav-link span,
html[data-sidebar-size="sm"] .menu-title span {
    display: none;
}
html[data-sidebar-size="sm"] .logo-lg {
    display: none;
}
html[data-sidebar-size="sm"] .logo-sm {
    display: inline-block;
}

/* Hover state */
html[data-sidebar-size="sm"] .app-menu:hover {
  width: 250px; /* Expanded width */
  box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}

html[data-sidebar-size="sm"] .app-menu:hover .navbar-nav .nav-link span,
html[data-sidebar-size="sm"] .app-menu:hover .menu-title span {
  display: inline-block; /* Show text */
  animation: fadeIn 0.3s ease;
  padding-left: 0.5rem;
}

html[data-sidebar-size="sm"] .app-menu:hover .logo-sm {
  display: none; /* Hide small logo */
}

html[data-sidebar-size="sm"] .app-menu:hover .logo-lg {
  display: inline-block; /* Show large logo */
}

/* Adjust main content when sidebar is hovered */
html[data-sidebar-size="sm"]:not([data-layout-style=detached]) .app-menu:hover ~ .main-content {
    margin-left: 250px;
}

/* Optional fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}