/* css\navigation.css */
.strategy-nav {
  position: fixed;
  top: var(--nona-header-height);
  width: var(--nav-width-expanded);
  background: var(--nav-bg-color, #fff);
  border-right: 1px solid var(--nav-border-color, #e5e7eb);
  border-bottom: 1px solid var(--nav-border-color, #e5e7eb);
  height: calc(100vh - var(--nona-header-height));
  z-index: 50;
  left: 0;
  margin-left: 0 !important;
  transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

/* Light theme variables for navigation */
.light-theme .strategy-nav {
  --nav-bg-color: #ffffff;
  --nav-border-color: #e5e7eb;
  --nav-text-color: #374151;
}

/* Dark theme variables for navigation (default) */
body:not(.light-theme) .strategy-nav {
  --nav-bg-color: #1f2937;
  --nav-border-color: #374151;
  --nav-text-color: #d1d5db;
}

.strategy-nav__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
}

.strategy-nav--collapsed {
  width: var(--nav-width-collapsed);
}

.strategy-nav__toggle {
  display: none; /* 隐藏原始顶部折叠按钮 */
}

.strategy-nav__toggle--bottom {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nav-text-color, var(--color-text));
  transition: all 0.2s;
  margin-top: auto; /* 确保按钮在底部 */
}

.strategy-nav__toggle--bottom:hover {
  background-color: var(--color-bg-hover);
}

.strategy-nav__item--toggle {
  display: none !important; /* 完全隐藏折叠按钮 */
}

/* 同时隐藏折叠按钮前面的分隔符 */
.strategy-nav__divider--bottom {
  display: none !important;
}

/* 确保在折叠状态下图标旋转 */
.strategy-nav--collapsed .toggle-icon {
  transform: rotate(180deg);
}

/* 确保底部按钮在折叠状态下仍然可见 */
.strategy-nav--collapsed .strategy-nav__toggle--bottom {
  padding: 12px 0;
  justify-content: center;
}

.strategy-nav--collapsed .strategy-nav__toggle--bottom .strategy-nav__text {
  display: none;
}

/* 确保导航包装器使用flex布局，这样底部部分才能正确定位 */
.strategy-nav__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* 确保列表占据可用空间，这样底部部分才能推到底部 */
.strategy-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.strategy-nav__bottom-section {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  padding-bottom: 0;
  z-index: 2;
  width: 100%;
}

.strategy-nav__bottom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.strategy-nav__item {
  margin: 12px 0;
}

.strategy-nav__divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 8px 16px;
}

.strategy-nav__link {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s;
}

.strategy-nav__link:hover {
  background-color: var(--color-bg-hover);
}

.strategy-nav__icon-wrapper {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.strategy-nav__icon {
  width: 16px;
  height: 16px;
  color: var(--color-text);
}

.strategy-nav__text {
  flex-grow: 1;
  font-family: Arial, sans-serif !important;
  white-space: nowrap;
}

.strategy-nav__arrow {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--color-text);
  flex-shrink: 0;
}

.strategy-nav__item--bottom {
  margin: 0;
}

.strategy-nav__item--bottom .strategy-nav__link {
  padding: 12px 16px;
}

.strategy-nav__submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 4px 0;
  background-color: transparent;
}

.strategy-nav__submenu--right {
  position: fixed; /* 改为fixed以确保正确定位 */
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  z-index: 1000;
  display: none;
}

.strategy-nav__item--active > .strategy-nav__submenu--right {
  display: block;
}

.strategy-nav__item--bottom .strategy-nav__submenu--right {
  top: auto;
  bottom: 0;
}

.strategy-nav__submenu-link {
  padding: 8px 16px 8px 48px; /* 上 右 下 左 */
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
  font-family: Arial, sans-serif !important;
  display: block;
  transition: all 0.2s;
  white-space: nowrap;
}

.strategy-nav__submenu-link:hover {
  background-color: var(--color-bg-hover);
}

/* Active state for submenu links (when selected) */
.strategy-nav__submenu-link.active {
  background-color: var(--color-bg-active);
  color: var(--nona-nav-color-active);
  font-weight: 500;
}

.strategy-nav__item--active > .strategy-nav__link {
  background-color: var(--color-bg-active);
  color: var(--nona-nav-color-active);
}

.strategy-nav__item--active .strategy-nav__icon {
  color: var(--nona-nav-color-active);
}

.strategy-nav__item--active .strategy-nav__arrow {
  transform: rotate(180deg);
}

/* Use is-expanded class to control submenu visibility */
.strategy-nav__item.is-expanded .strategy-nav__submenu {
  display: block;
}

/* Rotate arrow when expanded */
.strategy-nav__item.is-expanded .strategy-nav__arrow {
  transform: rotate(180deg);
}

/* Keep backward compatibility - active also shows submenu */
.strategy-nav__item--active .strategy-nav__submenu {
  display: block;
}

/* Collapsed State Styles */
.strategy-nav--collapsed .strategy-nav__text,
.strategy-nav--collapsed .strategy-nav__arrow,
.strategy-nav--collapsed .strategy-nav__submenu {
  display: none;
}

.strategy-nav--collapsed .strategy-nav__link {
  position: relative;
}

.strategy-nav--collapsed .strategy-nav__link:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  margin-left: 8px;
  z-index: 1000;
}

.strategy-nav--collapsed .strategy-nav__bottom-section {
  width: var(--nav-width-collapsed);
}

@media screen and (max-width: 768px) {
  :root {
    --nav-width-expanded: 260px;
  }
}

/* Submenu Separator Styles - Cloudflare-inspired */
.strategy-nav__submenu-separator {
  pointer-events: none;
  padding: 10px 16px 6px 48px;
  margin-top: 16px;
  margin-bottom: 2px;
}

.strategy-nav__submenu-separator:first-child {
  margin-top: 4px;
}

.strategy-nav__submenu-separator-text {
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  color: #3b82f6; /* Blue color - unified */
  text-transform: none;
  letter-spacing: normal;
  display: inline-flex; /* Changed from block to inline-flex */
  align-items: center;
  gap: 6px; /* Space between icon and text */
  padding: 4px 10px; /* Inner padding */
  border: 1px solid #3b82f6; /* Blue border */
  border-radius: 6px; /* Rounded corners */
  background-color: rgba(59, 130, 246, 0.05); /* Light blue background */
  transition: all 0.2s ease;
}

/* Icon styling */
.strategy-nav__submenu-separator-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Light theme separator */
.light-theme .strategy-nav__submenu-separator-text {
  color: #3b82f6;
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
}

/* Dark theme separator */
body:not(.light-theme) .strategy-nav__submenu-separator-text {
  color: #60a5fa;
  border-color: #60a5fa;
  background-color: rgba(96, 165, 250, 0.1);
}

/* Collapsed state - hide separators */
.strategy-nav--collapsed .strategy-nav__submenu-separator {
  display: none;
}

/* ISSUE_240 Backtest Results styling removed - migrated to ISSUE_241 floating widget */