:root {
                        --sidebar-collapsed: 72px;
                        --sidebar-expanded: 230px;     
                         
                 }
                 /* Sidebar */
       /* Sidebar (collapsed by default) */
       .sidebar-logo{
        display: none;
       }
.sidebar{
  width: var(--sidebar-collapsed);
  background: rgba(15, 23, 42, 0.95);
  padding: 25px 0;
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
transition: all 0.4s ;
  z-index: 99999;         /* overlay above content */
  overflow-x: hidden;
  overflow-y: hidden;

}

/* Expand on hover (overlay) */
.sidebar:hover{
  width: var(--sidebar-expanded);
  overflow-y: auto;
  box-shadow: 5px 0 50px rgba(0,0,0,.5);
}

         /* Enhanced scrollbar */
         .sidebar::-webkit-scrollbar {
             width: 5px;
         }
         
         
         .sidebar::-webkit-scrollbar-track {
             border-radius: 4px;
             margin: 10px 0;
         }
         
         .sidebar::-webkit-scrollbar-thumb {
             background: #0a0f0d6c;
             border-radius: 4px;
         }
         
         .sidebar::-webkit-scrollbar-thumb:hover {
             background: var(--primary);
         }
         
         /* Navigation section enhancement */
         .sidebar-nav {
             padding: 0 3px;
             flex: 1;
         }
         
         .sidebar-nav li {
             margin-bottom: 8px;
             position: relative;
             transition: transform 0.3s ease;
         }
         
       .sidebar:hover .sidebar-nav li:hover{
}
         
         .sidebar-nav li:not(:last-child) {

         }
         
         /* Enhanced navigation links */
         .sidebar-nav a {
             display: flex;
             align-items: center;
              justify-content: center;
              
             padding: 14px 0px;
             border-radius: 12px;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             gap: 0px;
          
             color: #e2e8f0;
             font-size: 0.95rem;
             text-decoration: none;
             position: relative;
             overflow: hidden;
             border: 1px solid transparent;
         }
         .sidebar:hover .sidebar-nav a{
  justify-content: flex-start;
  gap: 20PX;
    padding: 14px 20px;
}
         
         /* Glow effect on hover */
         .sidebar-nav a::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, 
                 transparent, 
                 rgba(255, 255, 255, 0.1), 
                 transparent);
             transition: left 0.7s ease;
         }
         
         .sidebar-nav a:hover::before {
             left: 100%;
         }
         
         /* Active state indicator */
         .sidebar-nav a::after {
             content: '';
             position: absolute;
             right: 15px;
             top: 50%;
             transform: translateY(-50%);
             width: 8px;
             height: 8px;
             background: #22c55e;
             border-radius: 50%;
             opacity: 0;
             transition: all 0.3s ease;
             box-shadow: 0 0 10px #22c55e;
         }
         
         
         
         @keyframes pulse {
             0%, 100% {
                 box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
             }
             50% {
                 box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
             }
         }
         
         /* Icons enhancement */
         .sidebar-nav i {
             font-size: 1.2rem;
             width: auto;
             text-align: center;
             color: #94a3b8;
             transition: all 0.3s ease;
             position: relative;
             z-index: 1;
         }
         
         .sidebar-nav a:hover i,
         .sidebar-nav a.active i {
             color: #22c55e;
             filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
         }
         
         /* Text enhancement */
         .sidebar-nav a span {
             opacity: 0;
             display: none;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
             flex: 1;
             font-weight: 500;
             letter-spacing: 0.3px;
              transition: opacity .2s ease, width .2s ease;
             position: relative;
             z-index: 1;
         }
         .sidebar:hover .sidebar-nav a span{
  opacity: 1;
       display: initial;
  width: auto;
}
         .sidebar-nav a:hover {
             background: linear-gradient(135deg, 
                 rgba(34, 197, 94, 0.15), 
                 rgba(34, 197, 94, 0.05));
             color: #ffffff;
             border-color: rgba(34, 197, 94, 0.3);
             box-shadow: 
                 0 4px 20px rgba(34, 197, 94, 0.15),
                 inset 0 1px 0 rgba(255, 255, 255, 0.1);
             transform: translateY(-1px);
         }
         
         .sidebar-nav a.active {
             background: linear-gradient(135deg, 
                 rgba(34, 197, 94, 0.25), 
                 rgba(34, 197, 94, 0.1));
             color: #ffffff;
             border-color: rgba(34, 197, 94, 0.5);
             box-shadow: 
                 0 6px 25px rgba(34, 197, 94, 0.25),
                 inset 0 1px 0 rgba(255, 255, 255, 0.15);
             font-weight: 600;
         }
         .sidebar-logo-img{
            display: none;
         }
           @media (max-width: 992px) {
                   .sidebar-logo{
        display:flex;
        gap: 0;
       }
        .sidebar-logo-img{
            display: flex;
            height: 25Px;
            width: 25Px;
            object-fit: cover;
            border-radius: 50%;
         }
                     .sidebar {
                           z-index: 999;
                        transform: translateX(-100%);
                           overflow-y:auto;
                             width: 200px;
                         border-bottom-right-radius: 10PX;
                         border-bottom-left-radius: 10PX;
                            
                     }
                     
                     .sidebar.active {
                         transform: translateX(0);
                     }
                     
                  
                  
                .sidebar:hover{
   width: 300px;
  overflow-y: hidden;
  box-shadow: 5px 0 50px rgba(0,0,0,.5);
}

         /* Enhanced scrollbar */
         .sidebar::-webkit-scrollbar {
             width: 5px;
         }
         
         
         .sidebar::-webkit-scrollbar-track {
             border-radius: 4px;
             margin: 10px 0;
         }
         
         .sidebar::-webkit-scrollbar-thumb {
             background: #0a0f0d6c;
             border-radius: 4px;
         }
         
         .sidebar::-webkit-scrollbar-thumb:hover {
             background: var(--primary);
         }
         
         /* Navigation section enhancement */
         .sidebar-nav {
             padding: 0 3px;
             flex: 1;
         }
         
         .sidebar-nav li {
             margin-bottom: 8px;
             position: relative;
             transition: transform 0.3s ease;
         }
         
       .sidebar:hover .sidebar-nav li:hover{
}
         
         .sidebar-nav li:not(:last-child) {

         }
         .sidebar-nav .gap{
            gap: 10px;
            display: flex;
             align-items: center;
              justify-content: center;
              
             padding: 14px 12px;
             border-radius: 12px;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             flex-wrap: wrap;
             color: #e2e8f0;
             font-size: 0.7rem;
             font-weight: 600;
             text-decoration: none;
             position: relative;
             overflow: hidden;
             border: 1px solid transparent;

         }
         /* Enhanced navigation links */
         .sidebar-nav .a {
             display: flex;
             align-items: center;
              justify-content: center;
              
             padding: 14px 14px;
             border-radius: 12px;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             gap: 20px;
          
             color: #e2e8f0;
             font-size: 0.95rem;
             text-decoration: none;
             position: relative;
             overflow: hidden;
             border: 1px solid transparent;
         }
         
         .sidebar:hover .sidebar-nav a{
  justify-content: flex-start;
  gap: 20PX;
    padding: 14px 20px;
}
         
         /* Glow effect on hover */
         .sidebar-nav a::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, 
                 transparent, 
                 rgba(255, 255, 255, 0.1), 
                 transparent);
             transition: left 0.7s ease;
         }
         
         .sidebar-nav a:hover::before {
             left: 100%;
         }
         
         /* Active state indicator */
         .sidebar-nav a::after {
             content: '';
             position: absolute;
             right: 15px;
             top: 50%;
             transform: translateY(-50%);
             width: 8px;
             height: 8px;
             background: #22c55e;
             border-radius: 50%;
             opacity: 0;
             transition: all 0.3s ease;
             box-shadow: 0 0 10px #22c55e;
         }
         
         
         
         @keyframes pulse {
             0%, 100% {
                 box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
             }
             50% {
                 box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
             }
         }
         
         /* Icons enhancement */
         .sidebar-nav i {
             font-size: 1.2rem;
             width: auto;
             text-align: left;
             color: #94a3b8;
             transition: all 0.3s ease;
             position: relative;
             z-index: 1;
         }
         
         .sidebar-nav a:hover i,
         .sidebar-nav a.active i {
             color: #22c55e;
             filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
         }
         
         /* Text enhancement */
         .sidebar-nav a span {
             opacity: 1;
           display: initial;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
             flex: 1;
             font-weight: 500;
             align-items: center;
             letter-spacing: 0.3px;
              transition: opacity .2s ease, width .2s ease;
             position: relative;
             z-index: 1;
         }
         .sidebar:hover .sidebar-nav a span{
  opacity: 1;
       display: initial;
  width: auto;
}
         .sidebar-nav a:hover {
             background: linear-gradient(135deg, 
                 rgba(34, 197, 94, 0.15), 
                 rgba(34, 197, 94, 0.05));
             color: #ffffff;
             border-color: rgba(34, 197, 94, 0.3);
             box-shadow: 
                 0 4px 20px rgba(34, 197, 94, 0.15),
                 inset 0 1px 0 rgba(255, 255, 255, 0.1);
             transform: translateY(-1px);
         }
         
         .sidebar-nav a.active {
             background: linear-gradient(135deg, 
                 rgba(34, 197, 94, 0.25), 
                 rgba(34, 197, 94, 0.1));
             color: #ffffff;
             border-color: rgba(34, 197, 94, 0.5);
             box-shadow: 
                 0 6px 25px rgba(34, 197, 94, 0.25),
                 inset 0 1px 0 rgba(255, 255, 255, 0.15);
             font-weight: 600;
         }
                     
                  
                  
                 }