/* CPanel left menu (src/layouts/DashboardLayout.jsx, DashboardSidebar.jsx).
   Loaded after styles.css, whose own rules hid the menu on every screen up
   to 1440px wide (most laptops) and only showed it via its "full-width"
   class. Here instead:
     - 992px and wider: menu open, page pushed right; .sidebar-collapsed
       hides it until the "Menu" tab reopens it.
     - narrower: menu closed; .sidebar-open-mobile slides it in over the
       page with a dimmed backdrop. */

/* "Show Dashboard" text link from the theme -- replaced by the Menu tab */
.layout-wrap .main-content-inner > .show-mb {
  display: none !important;
}

/* Hide (collapse / close) button at the top-right of the menu */
.sidebar-menu-dashboard .sidebar-hide-btn {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sidebar-menu-dashboard .sidebar-hide-btn:hover {
  background: #ff5930;
  border-color: #ff5930;
}

/* "Menu" tab on the left edge that brings the menu back */
.sidebar-reopen-btn {
  display: none;
  position: fixed;
  left: 0;
  top: 160px;
  z-index: 999;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 12px;
  border: none;
  border-radius: 0 12px 12px 0;
  background: #ff5930;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(22, 30, 45, 0.18);
  cursor: pointer;
}
.sidebar-reopen-btn i {
  font-size: 20px;
  line-height: 1;
}

@media (min-width: 992px) {
  .layout-wrap .sidebar-menu-dashboard {
    transform: translateX(0);
  }
  .layout-wrap .main-content {
    padding-left: 280px;
  }
  .layout-wrap.sidebar-collapsed .sidebar-menu-dashboard {
    transform: translateX(-100%);
  }
  .layout-wrap.sidebar-collapsed .main-content {
    padding-left: 0;
  }
  .layout-wrap.sidebar-collapsed .sidebar-reopen-btn {
    display: inline-flex;
  }
  .layout-wrap .overlay-dashboard {
    display: none;
  }
}

@media (max-width: 991px) {
  .layout-wrap .sidebar-menu-dashboard {
    transform: translateX(-100%);
  }
  .layout-wrap .main-content {
    padding-left: 0;
  }
  .layout-wrap:not(.sidebar-open-mobile) .sidebar-reopen-btn {
    display: inline-flex;
  }
  .layout-wrap.sidebar-open-mobile .sidebar-menu-dashboard {
    transform: translateX(0);
  }
  .layout-wrap .overlay-dashboard {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(22, 30, 45, 0.35);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .layout-wrap.sidebar-open-mobile .overlay-dashboard {
    visibility: visible;
    opacity: 1;
  }
}