/* PC 端主布局结构样式(layout.js 的 .app-container/.sidebar/.main-container 等历史上无任何 CSS 定义,
   导致侧边栏/内容竖排堆叠、头部无样式、整页超高。此文件补齐布局结构 + 布局专用设计令牌。) */

:root {
  --sidebar-bg: #1f2937;
  --sidebar-text: rgba(255, 255, 255, 0.65);
  --sidebar-active-bg: var(--color-primary, #4f46e5);
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --pc-header-height: 56px;
  --primary: var(--color-primary, #4f46e5);
  --primary-light: #818cf8;
  --primary-dark: #3730a3;
  --success: var(--color-success, #16a34a);
  --warning: var(--color-warning, #d97706);
  --danger: var(--color-danger, #dc2626);
  --info: var(--color-info, #0284c7);
  --text-regular: #374151;
  --text-secondary: var(--color-text-secondary, #6b7280);
}

/* ===== 整体骨架 ===== */
.app-container {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
}

/* ===== 侧边栏 ===== */
.app-container .sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-base);
}

.app-container .sidebar.sidebar-collapsed {
  width: var(--sidebar-collapsed-width);
}

.app-container .sidebar .logo {
  height: var(--pc-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
}

.app-container .sidebar .el-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: none !important;
}

.app-container .sidebar .el-menu-item.is-active {
  background-color: var(--sidebar-active-bg) !important;
}

.app-container .sidebar .el-menu-item:hover,
.app-container .sidebar .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== 主内容区 ===== */
.app-container .main-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ===== 顶部导航 ===== */
.app-container .main-container .header {
  height: var(--pc-header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-container .header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.app-container .collapse-btn {
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-secondary);
  margin-right: 12px;
}

.app-container .collapse-btn:hover {
  color: var(--color-primary);
}

.app-container .page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-container .header-right {
  display: flex;
  align-items: center;
}

/* ===== 用户区 ===== */
.app-container .user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 14px;
  outline: none;
}

.app-container .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== 内容区 ===== */
.app-container .main-container .content {
  flex: 1;
  padding: 16px;
  min-width: 0;
}

/* Element Plus 弹出层挂在 body 下, 需要同样的令牌 */
.el-popper {
  --primary: var(--color-primary, #4f46e5);
  --success: var(--color-success, #16a34a);
  --warning: var(--color-warning, #d97706);
  --danger: var(--color-danger, #dc2626);
  --info: var(--color-info, #0284c7);
  --text-regular: #374151;
  --text-secondary: var(--color-text-secondary, #6b7280);
}

/* 折叠时隐藏菜单文字 */
.sidebar-collapsed .logo span {
  letter-spacing: 0;
}