/* Sidebar Styles - Based on index.html */

/* ============================================
   Graph Page Specific Overrides
   ============================================ */

/* For graph.html flex layout */
.app-container .sidebar {
  position: relative;
  flex-shrink: 0;
}

/* Control Panel (graph.html only) */
.control-panel {
  width: var(--control-panel-width, 280px);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-light);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 100;
}

@media (max-width: 1024px) {
  .control-panel {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s;
    height: 100%;
  }

  .control-panel.open {
    transform: translateX(0);
  }
}

/* ============================================
   CSS Variables (from index.html)
   ============================================ */
:root {
  --bg-primary: #FAF6E9;
  --bg-secondary: #F5F0E1;
  --bg-tertiary: #EDE6D3;
  --text-primary: #2C2416;
  --text-secondary: #5A4D3A;
  --text-tertiary: #8B7D68;
  --accent-primary: #8B4513;
  --accent-secondary: #D2691E;
  --border-light: #D9CFC0;
  --border-medium: #C4B8A8;
  --font-serif: 'Noto Serif SC', Georgia, 'Songti SC', serif;
  --font-sans: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  --sidebar-width: 220px;
  --sidebar-collapsed: 24px;
}

/* ============================================
   Sidebar Container
   ============================================ */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: #2A3447;
  border-right: 1px solid #3a4556;
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.3s ease;
}

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

/* ============================================
   Sidebar Header
   ============================================ */
.sidebar-header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #3a4556;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1;
  height: 48px;
  box-sizing: border-box;
}

.sidebar-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.2s;
}

.sidebar-logo {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: #C0C0C0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s;
  margin-left: 0.5rem;
  line-height: 1;
}

.sidebar.collapsed .sidebar-logo,
.sidebar.collapsed .sidebar-logo-img {
  opacity: 0;
  width: 0;
}

/* ============================================
   Sidebar Collapse Button
   ============================================ */
.collapse-btn {
  position: absolute;
  right: -10px;
  top: 64px;
  width: 20px;
  height: 60px;
  background: #2A3447;
  border: 1px solid #3a4556;
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  color: #C0C0C0;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 201;
  transition: all 0.3s ease;
  padding: 0;
}

.collapse-btn:hover {
  background: #3a4556;
  color: #ffffff;
  width: 32px;
  right: -16px;
}

.sidebar.collapsed .collapse-btn {
  right: -10px;
  border-radius: 0 8px 8px 0;
  border: 1px solid #3a4556;
  border-left: none;
}

.sidebar.collapsed .collapse-btn::before {
  content: "▶";
}

.sidebar:not(.collapsed) .collapse-btn::before {
  content: "◀";
}

.collapse-btn {
  font-size: 0;
}

.collapse-btn::before {
  font-size: 0.75rem;
}

/* 收起状态下隐藏展开/收起三角形图标 */
.sidebar.collapsed .sidebar-nav .toggle-icon {
  display: none;
}

/* ============================================
   Sidebar Navigation (Tree Menu)
   ============================================ */
.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 页面加载时先隐藏菜单内容，避免滚动闪烁 */
.sidebar-nav.loading {
  visibility: hidden;
}

.sidebar-nav ul {
  list-style: none;
}

.sidebar-nav li {
  position: relative;
  margin: 0;
}

/* 菜单项基础样式 */
.sidebar-nav .menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  color: #C0C0C0;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.3;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-nav .menu-item:hover {
  background: #3a4556;
  color: #ffffff;
}

.sidebar-nav .menu-item.active {
  background: #3a4556;
  color: #ffffff;
}

/* 展开指示器 */
.sidebar-nav .toggle-icon {
  font-size: 0.7rem;
  width: 12px;
  text-align: center;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sidebar-nav li.expanded > .menu-item .toggle-icon {
  transform: rotate(90deg);
}

.sidebar-nav .no-toggle {
  width: 12px;
}

/* 子菜单 */
.sidebar-nav .submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
  will-change: max-height, opacity;
}

.sidebar-nav li.expanded > .submenu {
  max-height: 2000px;
  opacity: 1;
}

/* 层级缩进 - 目录子菜单缩进 */
.sidebar-nav .level-1 {
  padding-left: 1.5rem;
}

.sidebar-nav .level-2 {
  padding-left: 2.5rem;
  font-size: 0.8rem;
}

.sidebar-nav .level-3 {
  padding-left: 3.5rem;
  font-size: 0.75rem;
}

/* 收起状态隐藏文字 */
.sidebar.collapsed .sidebar-nav .menu-text,
.sidebar.collapsed .sidebar-nav .submenu {
  display: none;
}

/* ============================================
   Main Wrapper
   ============================================ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed ~ .main-wrapper {
  margin-left: var(--sidebar-collapsed);
}

/* ============================================
   Sidebar Overlay (Mobile)
   ============================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 150;
}

.sidebar-overlay.active {
  display: block;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    width: var(--sidebar-width) !important;
  }

  .sidebar.collapsed .sidebar-nav .menu-text,
  .sidebar.collapsed .sidebar-nav .submenu {
    display: block;
  }

  .main-wrapper {
    margin-left: 0 !important;
  }
}