/* 避免页面因出现纵向滚动条而突然变窄，导致侧栏「看起来」变窄 */
html {
  scrollbar-gutter: stable;
}

/* 布局：顶栏 + 侧栏 + 主区 */
.app-body {
  min-height: 100vh;
}

.app-shell {
  min-height: calc(100vh - 52px);
}

.app-topbar {
  min-height: 52px;
  z-index: 1030;
  /* 与 flex-nowrap 配合：多角色时仍一行展示，极窄时整栏可横向滚动 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.app-topbar-actions {
  flex-shrink: 0;
}

.app-topbar-quicklinks .nav-link {
  flex-shrink: 0;
  white-space: nowrap;
}

.app-topbar-userrow {
  flex: 0 1 auto;
  min-width: 0;
}

/* 角色名过长时截断，为日程/消息与下拉留出横向空间 */
.app-topbar-role-badge {
  max-width: 7rem;
}

@media (min-width: 576px) {
  .app-topbar-role-badge {
    max-width: 10rem;
  }
}

@media (min-width: 992px) {
  .app-topbar-role-badge {
    max-width: 14rem;
  }
}

/* 顶栏角色切换：约 5 个汉字宽，避免挤掉退出/密码；选项列表仍完整展开 */
.app-topbar-role-select {
  width: 5.5rem;
  max-width: 5.5rem;
  min-width: 0;
  flex: 0 0 5.5rem;
  box-sizing: border-box;
  padding-left: 0.3rem;
  padding-right: 1.65rem;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
}

/* 顶栏右侧：用户名宽度随内容（不换行）；极窄屏再截断避免挤压「消息 / 退出」 */
.app-topbar-user {
  flex: 0 1 auto;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .app-topbar-user {
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 桌面侧栏宽度：统一在 :root 调整；勿再用 64px 窄栏，否则二级菜单难以阅读 */
:root {
  --app-sidebar-width: 168px;
}

/* 桌面侧栏：一级 + 二级内联折叠（见 sidebar_nav_recursive.html） */
.app-sidebar {
  flex: 0 0 var(--app-sidebar-width);
  width: var(--app-sidebar-width);
  min-width: var(--app-sidebar-width);
  max-width: var(--app-sidebar-width);
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: calc(100vh - 52px);
  transition:
    flex-basis 0.22s ease,
    width 0.22s ease,
    min-width 0.22s ease,
    max-width 0.22s ease,
    opacity 0.18s ease,
    border-color 0.18s ease;
}

html.app-sidebar-collapsed .app-sidebar {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0;
  overflow: hidden;
  border-color: transparent !important;
  pointer-events: none;
}

.app-sidebar-nav > .nav-link,
.app-sidebar-nav > .app-sidebar-section {
  width: 100%;
  box-sizing: border-box;
}

.app-sidebar-nav .nav-link {
  color: #333;
}

/* 二级：长文案换行，避免被裁切 */
.app-sidebar-section .collapse .nav-link {
  white-space: normal;
  line-height: 1.35;
}

.app-sidebar-section .collapse .nav-link span {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.app-sidebar-nav .nav-link:hover {
  background-color: rgba(13, 110, 253, 0.08);
}

.app-sidebar-nav .nav-link.active {
  background-color: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.app-sidebar-nav .nav-link.active .text-body-secondary {
  color: inherit !important;
  opacity: 0.9;
}

.app-sidebar-section .collapse .nav-link.active {
  color: #0d6efd;
}

.app-main {
  min-width: 0;
  overflow-x: auto;
}