* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #f4f6f9; color: #333; }

    .topperbar {
        background: #1d2327;
      color: #fff;
      padding: 0px 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }


    .topperbar .user-menu {
      position: relative;
      cursor: pointer;
      font-size: 13px;
    }

    .topperbar .user-menu:hover .dropdown {
      display: block;
    }

    .topperbar .dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: #2c3338;
      border: 1px solid #444;
      min-width: 150px;
      z-index: 1000;
    }

    .topperbar .dropdown a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 10px;
    }

    .topperbar .dropdown a:hover {
      background-color: #444;
    }


   .logo-img {
  max-height: 26px;
  

  
}
 

    .dashboard {
      display: flex;
      height: auto;
     
      transition: 0.3s ease;
    }
.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  height: 130vh;
  width: 150px;
  background: #1d2327;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 13px;

}

.fa{
  font-size: 16px;
}

.fa-solid {
  font-size: 16px;
}

.fa-regular{
  font-size: 16px;
}


    .dashboard.collapsed .sidebar {
      width: 60px;
    }

    .menu a, .menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 13px;
      color: #ddd;
      cursor: pointer;
      text-decoration: none;
      transition: 0.2s;
      
    }


    .menu a:hover,
    .menu-item:hover {
      background: #2c3338;
      color: #fff;
      
     
    }

     .arrow {
      margin-left: auto;
      font-size: 12px;
    }
      .menu-item.active .arrow {
      color: #fff;
    }

    .label {
      transition: 0.2s;
    }
    .dashboard.collapsed .arrow, 
    .dashboard.collapsed .label {
      display: none;
    }

    .submenu-group {
      position: relative;
    }

   
 .toggle-sidebar {
   
      border: none;
      color: white;
      font-size: 18px;
      padding: 8px;
      cursor: pointer;
      border-top: 1px solid #333;
      background: #1d2327;
    }

    .submenu {
      display: none;
      flex-direction: column;
      background: #2c3338;
    
  left: 100%;
  top: 0;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  padding: 5px 0;
  border-radius: 4px;
    }

    .submenu a {
      padding: 8px 16px;
      color: #ccc;
      font-size: 13px;
      text-decoration: none;
      
    }
    .submenu a:hover {
      background: #3a3f44;
      color: #fff;
      
    }

    .submenu a.active {
      border-left: 4px solid #e4e4e4;
      font-weight: bold;
      
    }

    .menu-item.active {
      background: #007cba;
      color: #fff;
    }

    /* Expanded mode inline submenu */
    .submenu-group.active .submenu {
      display: flex;
     
    }
 .icon-collapsed {
      display: none;
    }

    .dashboard.collapsed .icon-expanded {
      display: none;
    }

    .dashboard.collapsed .icon-collapsed {
      display: inline;
    }

 .dashboard.collapsed .sidebar {
      width: 40px;
    }
    /* Collapsed flyout */
    .dashboard.collapsed .submenu {
      position: absolute;
      left: 100%;
      top: 0;
      width: 140px;
      z-index: 1000;
      display: none;
      border-radius: 4px;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }

    .dashboard.collapsed .submenu-group:hover .submenu {
      display: flex;
     
    }

    /* Expanded mode: flyout on hover for inactive submenu-groups */
    .dashboard:not(.collapsed) .submenu-group:hover:not(.active) .submenu {
      display: flex;
      position: absolute;
      left: 100%;
      top: 0;
      width: 140px;
      background: #2c3338;
      z-index: 1000;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
      border-radius: 4px;
      padding: 5px 0;
      transition: 0.3s ease;
    }

    .main {
      flex: 1;
      padding: 8px;
      
      transition: 0.3s ease;
      margin-left: 8px;
    }

  .dashboard.collapsed .main {
      margin-left: 8px;
    }
    .toggle-sidebar {
      background: none;
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px;
      border-top: 1px solid #333;
    }
    
    body.expanding .submenu {
  display: none !important;
}