/**
 * Sidebar V2 Fixed - 固定侧边栏组件
 * 风格：简洁、美观、大方，灰色黑色为主，卡片直角，无彩色图标
 * 
 * 使用方式：
 * 1. 标准方式（推荐）：在模板中先引入 common.css，再引入此文件
 *    <link rel="stylesheet" href="{% static 'css/common.css' %}">
 *    <link rel="stylesheet" href="{% static 'css/components/sidebar_v2_fixed.css' %}">
 *    此时 common.css 已包含 core/variables.css，变量已可用，无需额外引入
 * 
 * 2. 独立使用：如果单独使用此文件（不引入 common.css），需要取消下面的注释
 *    @import url('../core/variables.css'); 
 */
/* @import url('../core/variables.css'); */ /* 如果独立使用，取消此注释 */

/* ===== 组件内部变量定义 ===== */
:root {
  --vh-sb-width: 232px;
  --vh-sb-top-height: 56px;
  --vh-sb-icon-size: 18px;
  --vh-sb-child-indent: 40px;
  --vh-sb-nav-padding-bottom: 80px;
  --vh-sb-active-bg: #E8E8E8;
  --vh-sb-bottom-bg: #FAFAFA;
  --vh-sb-hover-border: #CCCCCC;
}

/* ===== 主容器 ===== */
/* 侧栏：固定在视口，不随页面滚动 */
.vh-sb {
  width: var(--vh-sb-width, 232px);
  position: fixed;
  top: var(--navbar-height, 62px);
  bottom: 0;
  left: 0;
  height: calc(100vh - var(--navbar-height, 62px));
  display: flex;
  flex-direction: column;
  background: var(--vh-bg, #FFFFFF);
  border-right: 1px solid var(--vh-border, #E0E0E0);
  box-shadow: var(--shadow-sm, 1px 0 2px rgba(0, 0, 0, 0.05));
  overflow: hidden;
  z-index: var(--z-sticky, 1020);
  font-family: var(--font-family, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif);
}

/* ===== 顶部区域 ===== */
.vh-sb__top {
  height: var(--vh-sb-top-height, 56px);
  flex: 0 0 var(--vh-sb-top-height, 56px);
  border-bottom: 1px solid var(--vh-border, #E0E0E0);
  background: var(--vh-bg, #FFFFFF);
}

.vh-sb__topInner {
  height: var(--vh-sb-top-height, 56px);
  padding: var(--spacing-sm, 12px) var(--spacing-md, 16px);
  display: flex;
  align-items: center;
  gap: 0;
}
.vh-sb__titleWrap{
  flex: 1 1 auto;
  min-width: 0;
}
.vh-sb__title{
  font-weight: 600;
  font-size: var(--font-size-base, 14px);
  line-height: 1.2;
  color: var(--vh-primary, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.vh-sb__sub{
  font-size: var(--font-size-xs, 11px);
  color: var(--vh-text-muted, #666666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* 展开/收起全部按钮 */
.vh-sb__expandAll {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--vh-border, #E0E0E0);
  background: var(--vh-bg, #FFFFFF);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vh-text-muted, #666666);
  transition: background 0.2s, color 0.2s;
}
.vh-sb__expandAll:hover {
  background: var(--vh-sb-active-bg, #E8E8E8);
  color: var(--vh-primary, #1A1A1A);
}
.vh-sb__expandAll-icon {
  font-size: 14px;
  line-height: 1;
}
/* ===== 导航区域 ===== */
/* 中部：占满剩余高度，可滚动 */
.vh-sb__nav {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-sm, 8px) var(--spacing-xs, 4px);
  padding-bottom: var(--vh-sb-nav-padding-bottom, 80px);
  display: flex;
  flex-direction: column;
}

/* ===== 分组样式 ===== */
.vh-sb__group {
  margin-bottom: var(--spacing-sm, 12px);
}

.vh-sb__group:last-child {
  margin-bottom: 0;
}
.vh-sb__gtitle{
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  color: var(--vh-text-muted, #666666);
  padding: var(--spacing-sm, 8px) var(--spacing-sm, 12px) 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ===== 图标样式 ===== */
/* 简洁符号，灰色，无彩色 */
.vh-sb__icon {
  width: var(--vh-sb-icon-size, 18px);
  height: var(--vh-sb-icon-size, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--vh-text-light, #999999);
  flex: 0 0 auto;
  transition: filter var(--transition-base, 0.2s ease);
  font-weight: normal;
  filter: grayscale(100%) brightness(0.6);
}

.vh-sb__icon i,
.vh-sb__icon svg,
.vh-sb__icon .bi {
  color: var(--vh-text-light, #999999);
  filter: grayscale(100%) brightness(0.6);
}

/* 激活状态的图标 */
.vh-sb__item.is-active .vh-sb__icon,
.vh-sb__child.is-active .vh-sb__icon {
  color: var(--vh-text-muted, #666666);
  font-weight: 600;
  filter: grayscale(100%) brightness(0.4);
}

.vh-sb__item.is-active .vh-sb__icon i,
.vh-sb__item.is-active .vh-sb__icon svg,
.vh-sb__item.is-active .vh-sb__icon .bi,
.vh-sb__child.is-active .vh-sb__icon i,
.vh-sb__child.is-active .vh-sb__icon svg,
.vh-sb__child.is-active .vh-sb__icon .bi {
  color: var(--vh-text-muted, #666666);
  filter: grayscale(100%) brightness(0.4);
}

/* ===== 标签样式 ===== */
.vh-sb__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 菜单项样式 ===== */
/* 简洁、直角设计 */
.vh-sb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-sm, 8px) var(--spacing-sm, 12px);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vh-accent, #333333);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base, 0.2s ease);
  margin-bottom: 1px;
  text-decoration: none;
  user-select: none;
  font-weight: 400;
}

.vh-sb__item:hover {
  background: var(--vh-surface, #F5F5F5);
  color: var(--vh-primary, #1A1A1A);
  text-decoration: none !important; /* 移除全局链接样式添加的下划线 */
}

.vh-sb__item.is-active {
  background: var(--vh-sb-active-bg, #E8E8E8);
  color: var(--vh-primary, #1A1A1A);
  font-weight: 600;
}

/* ===== 子菜单项样式 ===== */
.vh-sb__child {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px var(--spacing-sm, 12px) 6px var(--vh-sb-child-indent, 40px);
  border-radius: 0;
  font-size: var(--font-size-sm, 12px);
  line-height: 1.4;
  color: var(--vh-text-muted, #666666);
  cursor: pointer;
  transition: background-color var(--transition-base, 0.2s ease);
  margin-bottom: 1px;
  text-decoration: none;
  user-select: none;
  width: 100%;
  font-weight: 400;
}

.vh-sb__child:hover {
  background: var(--vh-surface, #F5F5F5);
  color: var(--vh-primary, #1A1A1A);
  text-decoration: none !important; /* 移除全局链接样式添加的下划线 */
}

.vh-sb__child.is-active {
  background: var(--vh-sb-active-bg, #E8E8E8);
  color: var(--vh-primary, #1A1A1A);
  font-weight: 600;
}

/* ===== Badge 样式 ===== */
.vh-sb__badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--vh-text-muted, #666666);
  background: var(--vh-sb-active-bg, #E8E8E8);
  border-radius: 0;
  padding: 2px 6px;
  margin-left: auto;
  flex: 0 0 auto;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
}

.vh-sb__badge--dot {
  padding: 2px 6px;
  background: #CCCCCC;
  color: var(--vh-accent, #333333);
}

/* 红色数字徽章（待办数量等，必须红色） */
.vh-sb__badge--count {
  background: #dc3545 !important;
  color: #fff !important;
}

/* ===== 父菜单项样式 ===== */
.vh-sb__parent .vh-sb__item--parent {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--spacing-sm, 8px) var(--spacing-sm, 12px);
}

.vh-sb__parent .vh-sb__item--parent:hover {
  background: var(--vh-surface, #F5F5F5);
  text-decoration: none !important; /* 移除全局链接样式添加的下划线 */
}

.vh-sb__parent .vh-sb__item--parent.is-active {
  background: var(--vh-sb-active-bg, #E8E8E8);
}

/* 一级菜单折叠按钮：去除点击后的黑色外框，改用轻微轮廓避免影响可访问性 */
.vh-sb__parent .vh-sb__item--parent[data-sb-toggle]:focus,
.vh-sb__item--parent[data-sb-toggle]:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--vh-border, #E0E0E0);
}
.vh-sb__parent .vh-sb__item--parent[data-sb-toggle]:focus-visible,
.vh-sb__item--parent[data-sb-toggle]:focus-visible {
  outline: 2px solid var(--vh-text-muted, #666666);
  outline-offset: 2px;
  box-shadow: none;
}

/* 确保子菜单项在容器中垂直排列 */
.vh-sb__parent .vh-sb__children > .vh-sb__child {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 1px;
}

/* ===== 底部区域 ===== */
/* 永远贴住屏幕底边 */
.vh-sb__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--spacing-sm, 12px);
  border-top: 1px solid var(--vh-border, #E0E0E0);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  background: var(--vh-sb-bottom-bg, #FAFAFA);
  z-index: 10;
}

.vh-sb__mini {
  font-size: var(--font-size-xs, 11px);
  color: var(--vh-text-muted, #666666);
  padding: 6px 10px;
  border-radius: 0;
  border: 1px solid var(--vh-border, #E0E0E0);
  background: var(--vh-bg, #FFFFFF);
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  line-height: 1.4;
  text-align: center;
  font-family: inherit;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* 确保 button 和 a 标签都可以使用此样式 */
.vh-sb__bottom button.vh-sb__mini,
.vh-sb__bottom a.vh-sb__mini {
  display: block;
  text-decoration: none;
}

/* A5 治理：可点击的 mini 使用 data-action，样式归位 */
.vh-sb__mini[data-action] {
  cursor: pointer;
}

.vh-sb__mini:hover {
  background: var(--vh-surface, #F5F5F5);
  color: var(--vh-primary, #1A1A1A);
  border-color: var(--vh-sb-hover-border, #CCCCCC);
}

.vh-sb__mini:focus {
  outline: 2px solid var(--vh-text-muted, #666666);
  outline-offset: 2px;
}

/* ===== 主内容区 ===== */
/* 自动让出左侧宽度 */
.vh-main {
  margin-left: 0;
  min-height: calc(100vh - var(--vh-sb-top-height, 56px));
  padding-top: 0;
  width: 100%;
}

/* ===== 子菜单样式 ===== */
/* 默认折叠，点击展开 */
.vh-sb__parent .vh-sb__children {
  display: none;
  padding-left: var(--spacing-md, 16px);
}

.vh-sb__parent.is-open .vh-sb__children {
  display: block;
}

.vh-sb__item--parent {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

.vh-sb__chev {
  margin-left: auto;
  transition: transform var(--transition-fast, 0.15s ease);
}



/* ===== 强制样式覆盖 ===== */
/* 确保布局正确，仅在必要时使用 */
.vh-sb {
  height: calc(100vh - var(--navbar-height, 62px));
}

.vh-sb__nav {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--vh-sb-nav-padding-bottom, 80px);
}

.vh-sb__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}


/* ========== Sidebar Submenu Collapse ========== */
.vh-sb__item--parent {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vh-sb__chev {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.vh-sb__parent.is-open .vh-sb__chev {
  transform: rotate(90deg);
}