/* Sidebar Overlay V1
   - Main sidebar: compact 220px
   - Submenus: right-side overlay panel; never pushes .erp-main
   - Existing content max-width rules remain unchanged
*/

:root {
  --erp-main-sidebar-width: 220px;
  --erp-sub-sidebar-width: 252px;
  --erp-topbar-height: 72px;
}

/* Main sidebar: main categories only */
.erp-sidebar {
  width: var(--erp-main-sidebar-width) !important;
  flex: 0 0 var(--erp-main-sidebar-width) !important;
  padding: 18px 10px !important;
  overflow-y: auto;
  overflow-x: visible;
  position: relative;
  z-index: 40;
}

.erp-sidebar-group {
  position: static;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}

.erp-sidebar-toggle {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 11px;
  color: rgba(255,255,255,.86) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .15s ease, color .15s ease;
}

.erp-sidebar-toggle:hover,
.erp-sidebar-group.submenu-open > .erp-sidebar-toggle,
.erp-sidebar-group.current-section > .erp-sidebar-toggle {
  background: rgba(255,255,255,.10);
  color: #fff !important;
}

.erp-sidebar-group.current-section > .erp-sidebar-toggle {
  box-shadow: inset 3px 0 0 rgba(255,255,255,.9);
}

/* Chevron points to the right because submenu opens horizontally. */
.erp-sidebar .chev-svg {
  transform: rotate(-90deg) !important;
}

/* Right-side submenu overlay. It does NOT participate in flex layout. */
.erp-sidebar-menu {
  display: none !important;
  position: fixed;
  left: var(--erp-main-sidebar-width);
  top: var(--erp-topbar-height);
  bottom: 0;
  width: var(--erp-sub-sidebar-width);
  box-sizing: border-box;
  padding: 18px 14px 20px !important;
  background: #f8fafc;
  border-right: 1px solid #d9e1ec;
  box-shadow: 12px 0 28px rgba(15,23,42,.14);
  overflow-y: auto;
  z-index: 1040;
}

.erp-sidebar-group.submenu-open > .erp-sidebar-menu {
  display: block !important;
}

.erp-submenu-title {
  margin: 0 2px 12px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid #d9e1ec;
  color: #1f3a5f;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

/* Override old dark-sidebar link rules inside the light overlay. */
.erp-sidebar .erp-sidebar-menu a {
  min-height: 42px !important;
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 4px 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px;
  color: #344054 !important;
  background: transparent;
  font-size: 14px !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}

.erp-sidebar .erp-sidebar-menu a .nav-svg {
  color: #98a2b3 !important;
}

.erp-sidebar .erp-sidebar-menu a:hover {
  background: #eef2f7 !important;
  color: #1f3a5f !important;
  transform: none !important;
}

.erp-sidebar .erp-sidebar-menu a.active {
  background: #e7edf5 !important;
  color: #1f3a5f !important;
  box-shadow: inset 4px 0 0 #1f3a5f !important;
}

.erp-sidebar .erp-sidebar-menu a.active .nav-svg {
  color: #1f3a5f !important;
}

/* Important: no width/margin change is applied to .erp-main when submenu opens. */
.erp-main {
  min-width: 0;
}

/* Desktop overlay only. On smaller screens, use in-flow submenu to avoid covering the page. */
@media (max-width: 1000px) {
  :root {
    --erp-main-sidebar-width: 100%;
  }

  .erp-sidebar {
    width: 100% !important;
    flex-basis: auto !important;
    overflow-x: hidden;
  }

  .erp-sidebar .chev-svg {
    transform: none !important;
  }

  .erp-sidebar-menu {
    position: static;
    width: auto;
    padding: 4px 0 8px !important;
    background: transparent;
    border-right: 0;
    box-shadow: none;
  }

  .erp-submenu-title {
    display: none;
  }

  .erp-sidebar .erp-sidebar-menu a {
    color: rgba(255,255,255,.88) !important;
    margin: 3px 6px !important;
  }

  .erp-sidebar .erp-sidebar-menu a:hover,
  .erp-sidebar .erp-sidebar-menu a.active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
}