/* 壳层布局：左侧固定导航 + 顶栏 + 主内容区 */
:root {
  --wbr-sidebar-width-expanded: 180px;
  --wbr-sidebar-width-collapsed: 56px;
  --wbr-sidebar-width: var(--wbr-sidebar-width-expanded);
  --wbr-sidebar-pad-x: 0.75rem;
  --wbr-topbar-height: 56px;
}

body.wbr-shell {
  background: #f5f6f8;
}

.wbr-sidebar {
  width: var(--wbr-sidebar-width);
  /* 必须是定长而不是 min-height：侧栏是 fixed 的，min-height 会让它随条目数往下长，
     长出视口的部分既滚不到也点不着，里层 nav 的 overflow-auto 也因为不缺空间而不出滚动条 */
  height: 100vh;
  background: #1c2434;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
/* 侧栏滚动条：细条 + 无轨道，平时把滑块透明掉，鼠标进侧栏才浮出来。
   宽度一直占着，所以显隐不会让菜单文字左右跳。 */
.wbr-sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.wbr-sidebar:hover nav {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.wbr-sidebar nav::-webkit-scrollbar {
  width: 6px;
}
.wbr-sidebar nav::-webkit-scrollbar-track {
  background: transparent;
}
.wbr-sidebar nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.wbr-sidebar:hover nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}
.wbr-sidebar nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.wbr-sidebar .brand {
  height: var(--wbr-topbar-height);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 var(--wbr-sidebar-pad-x);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wbr-sidebar .nav-group-label {
  color: #8a93a5;
  font-size: 0.72rem;
  padding: 0.8rem var(--wbr-sidebar-pad-x) 0.2rem;
  letter-spacing: 0.5px;
}
.wbr-sidebar .nav-link {
  display: flex;
  align-items: center;
  color: #c3cad6;
  padding: 0.4rem var(--wbr-sidebar-pad-x);
  font-size: 0.875rem;
  white-space: nowrap;
  border-left: 3px solid transparent;
}
.wbr-sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.wbr-sidebar .nav-link.active {
  color: #fff;
  background: rgba(13, 110, 253, 0.18);
  border-left-color: #0d6efd;
}
.wbr-sidebar .nav-link .bi {
  width: 1.15rem;
  margin-right: 0.5rem;
  flex: none;
  text-align: center;
}

.wbr-topbar {
  height: var(--wbr-topbar-height);
  margin-left: var(--wbr-sidebar-width);
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.wbr-main {
  margin-left: var(--wbr-sidebar-width);
  padding: 1.25rem;
}

/* 折叠成图标条：只在桌面生效，窄屏用的是下面的抽屉式收起 */
@media (min-width: 992px) {
  .wbr-sidebar,
  .wbr-topbar,
  .wbr-main {
    transition: width 0.15s, margin-left 0.15s;
  }
  :root.nav-collapsed {
    --wbr-sidebar-width: var(--wbr-sidebar-width-collapsed);
  }
  .nav-collapsed .wbr-sidebar .brand,
  .nav-collapsed .wbr-sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .nav-collapsed .wbr-sidebar .brand-text,
  .nav-collapsed .wbr-sidebar .nav-text,
  .nav-collapsed .wbr-sidebar .sidebar-footer {
    display: none;
  }
  .nav-collapsed .wbr-sidebar .nav-link .bi {
    margin-right: 0;
    font-size: 1.05rem;
  }
  /* 分组名藏掉后留一条分隔线，否则各组图标会连成一片分不出层级 */
  .nav-collapsed .wbr-sidebar .nav-group-label {
    padding: 0;
    margin: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-collapsed .wbr-sidebar .nav-group-label span {
    display: none;
  }
}

/* 图标条上悬停浮出的条目名。侧栏滚动容器会裁掉横向溢出，
   所以这个浮层挂在 body 上按视口坐标定位，位置由 shell.js 算。 */
.wbr-nav-tip {
  position: fixed;
  z-index: 1040;
  display: none;
  padding: 0.25rem 0.6rem;
  background: #2b3648;
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  border-radius: 0.25rem;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.35);
  transform: translateY(-50%);
  pointer-events: none;
}
.wbr-nav-tip.show {
  display: block;
}

@media (max-width: 991.98px) {
  .wbr-sidebar {
    left: calc(-1 * var(--wbr-sidebar-width));
    transition: left 0.2s;
  }
  .wbr-sidebar.show {
    left: 0;
  }
  .wbr-topbar,
  .wbr-main {
    margin-left: 0;
  }
}

/* 扩展色：需采购橙 / 滞销紫（Bootstrap 没有的两档） */
.text-bg-orange {
  background-color: #fd7e14 !important;
  color: #fff !important;
}
.text-bg-purple {
  background-color: #6f42c1 !important;
  color: #fff !important;
}

.wbr-page-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* 登录页 */
.wbr-login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1c2434 0%, #26364f 100%);
}
.wbr-login-card {
  width: 380px;
}