.sidebar-compact {
     width: 240px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .sidebar-transition {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .sidebar-compact.collapsed {
     width: 80px;
 }

 /* Hide text when collapsed */
 .sidebar-compact.collapsed .sidebar-text {
     opacity: 0;
     width: 0;
     padding: 0;
     margin: 0;
     pointer-events: none;
     transition: all 0.2s ease-in-out;
 }

 .sidebar-text {
     transition: all 0.3s ease-in-out;
 }

 /* Adjust logo when collapsed */
 .sidebar-compact.collapsed .flex.items-center.space-x-3 {
     justify-content: center;
 }

 .sidebar-compact.collapsed>div:first-child {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 /* Submenu Enhancements */
 .submenu {
     transition: all 0.1s ease-in-out;
     overflow: hidden;
 }

 .submenu-arrow {
     transition: transform 0.2s ease-in-out;
     font-size: 12px;
 }

 .submenu-arrow.rotate-180 {
     transform: rotate(180deg);
 }

 /* Enhanced hover effects */
 .submenu a:hover {
     transform: translateX(4px);
     transition: all 0.2s ease-in-out;
 }

 /* Active submenu item styling */
 .submenu a.bg-indigo-50 {
     border-left: 3px solid #4f46e5;
     background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%);
     color: #4338ca !important;
     font-weight: 600;
 }

 /* Sidebar scrollbar styling */
 #sidebar::-webkit-scrollbar {
     width: 4px;
 }

 #sidebar::-webkit-scrollbar-track {
     background: #f1f5f9;
 }

 #sidebar::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 2px;
 }

 #sidebar::-webkit-scrollbar-thumb:hover {
     background: #94a3b8;
 }

 /* Submenu toggle button styling */
 .submenu-toggle {
     position: relative;
 }

 .submenu-toggle:focus {
     outline: 2px solid #4f46e5;
     outline-offset: -2px;
 }

 /* Animation for submenu items */
 .submenu a {
     opacity: 0.9;
     transition: all 0.2s ease-in-out;
 }

 .submenu a:hover {
     opacity: 1;
 }

 /* Badge/counter styling for menu items (optional) */
 .menu-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 18px;
     height: 18px;
     padding: 0 6px;
     font-size: 10px;
     font-weight: 600;
     color: white;
     background-color: #ef4444;
     border-radius: 9px;
     margin-left: auto;
 }

 /* Responsive improvements */
 @media (max-width: 1023px) {
     .sidebar-compact {
         width: 260px;
     }
 }

 /* Loading state for menu items */
 .menu-loading {
     position: relative;
     pointer-events: none;
 }

 .menu-loading::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 12px;
     width: 12px;
     height: 12px;
     margin-top: -6px;
     border: 2px solid #e2e8f0;
     border-top: 2px solid #4f46e5;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Improved focus states for accessibility */
 .submenu a:focus,
 .nav-link:focus,
 .submenu-toggle:focus {
     outline: 2px solid #4f46e5;
     outline-offset: 2px;
 }

 /* Submenu separator lines */
 .submenu-separator {
     height: 1px;
     background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
     margin: 8px 16px;
 }

 /* Improved active state transitions */
 .nav-link,
 .submenu-toggle {
     transition: all 0.2s ease-in-out;
 }

 /* Subtle shadow for active items */
 .nav-link.bg-indigo-600,
 .submenu-toggle.bg-indigo-600,
 .active-nav-item {
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
     position: relative;
 }

 .active-nav-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 20%;
     bottom: 20%;
     width: 3px;
     background: #4f46e5;
     border-radius: 0 4px 4px 0;
 }


 /* Overlay animation */
 #sidebar-overlay {
     transition: opacity 0.3s ease-in-out;
 }

 /* Menu item border accent */
 .nav-link,
 .submenu-toggle {
     border-left-width: 0;
     /* Removing fixed border width, using ::before instead for cleaner look */
 }

 /* Collapsed state adjustments */
 .sidebar-compact.collapsed .submenu {
     display: none;
 }

 .sidebar-compact.collapsed .nav-link,
 .sidebar-compact.collapsed .submenu-toggle {
     justify-content: center;
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .sidebar-compact.collapsed .submenu-arrow {
     display: none;
 }

 /* Allow submenu toggle clicks when collapsed */
 .sidebar-compact.collapsed .submenu-toggle {
     pointer-events: auto;
     cursor: pointer;
 }

 /* Keep nav-link clickable in collapsed state */
 .sidebar-compact.collapsed .nav-link {
     pointer-events: auto;
     cursor: pointer;
 }

 /* Main content transition when sidebar toggles */
 .lg\:ml-60,
 .lg\:ml-\[240px\],
 .lg\:ml-\[80px\],
 #main-content-wrapper,
 main {
     transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }

 @media (min-width: 1024px) {
     .lg\:ml-60 {
         margin-left: 15rem !important;
         /* 240px */
     }

     .lg\:ml-\[80px\] {
         margin-left: 80px !important;
     }
 }

 .lg\:ml-60,
 .lg\:ml-\[240px\],
 .lg\:ml-\[80px\],
 #main-content-wrapper {
     display: flex !important;
     flex-direction: column !important;
     min-height: 100vh !important;
 }

 .lg\:ml-60 main,
 .lg\:ml-\[240px\] main,
 .lg\:ml-\[80px\] main,
 #main-content-wrapper main {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 !important;
 }