/* /static/css/components/dropdown-menu.css */
/* 功能：下拉菜单组件样式（统一视觉与交互，提升复用性） */
/* 原因：基于导航栏下拉菜单的成功样式，创建可复用组件，减少重复代码 */
/* 相关文件：views/appbar.html, views/stats/dashboard.html, static/css/components/glassmorphism.css */

/* ===== 基础样式 ===== */
.dropdown-menu {
  /* 定位与层级 */
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem; /* mt-1 */
  
  /* 基础视觉 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  
  /* 无边框 */
  border: none;
  
  /* 动画状态（默认隐藏） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem); /* -translate-y-2 */
  transition: opacity 200ms, visibility 200ms, transform 200ms;
  
  /* 毛玻璃效果（硬编码：75%不透明 + 8px模糊） */
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 显示状态 */
.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 隐藏状态（显式类，可与 is-open 配合使用） */
.dropdown-menu.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
}

/* ===== 尺寸变体 ===== */
.dropdown-menu--sm {
  min-width: 8rem; /* w-32 */
  max-width: calc(100vw - 2rem);
}

.dropdown-menu--auto {
  width: max-content;
  min-width: 10rem; /* w-40 */
  max-width: calc(100vw - 2rem);
}

.dropdown-menu--md {
  min-width: 12rem; /* w-48 */
  max-width: calc(100vw - 2rem);
}

/* 响应式：中等屏幕及以上使用更大宽度 */
@media (min-width: 640px) {
  .dropdown-menu--md {
    min-width: 14rem; /* sm:w-56 */
  }
}

.dropdown-menu--lg {
  min-width: 15rem; /* w-60 */
  max-width: calc(100vw - 2rem);
}

/* ===== 位置变体 ===== */
.dropdown-menu--left {
  left: 0;
  right: auto;
}

.dropdown-menu--right {
  right: 0;
  left: auto;
}

.dropdown-menu--center {
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
}

.dropdown-menu--center.is-open {
  transform: translateX(-50%) translateY(0);
}

/* ===== 内容区域 ===== */
.dropdown-menu__content {
  padding: 0.375rem 0.25rem; /* 上下6px，左右4px */
  max-height: 400px;
  overflow-y: auto;
  
  /* 默认隐藏滚动条但保持可滚动 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Webkit浏览器：默认隐藏滚动条 */
.dropdown-menu__content::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
  height: var(--scrollbar-height, 8px);
}

.dropdown-menu__content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--scrollbar-radius, 4px);
}

.dropdown-menu__content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--scrollbar-radius, 4px);
  transition: background-color 0.2s ease;
}

/* 滚动时显示滚动条 */
.dropdown-menu__content.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb, #cbd5e1) var(--scrollbar-track, #f1f5f9);
}

.dropdown-menu__content.is-scrolling::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #f1f5f9);
}

.dropdown-menu__content.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #cbd5e1);
}

.dropdown-menu__content.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #94a3b8);
}

/* 暗色模式支持 */
:root.dark .dropdown-menu__content.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb, #475569) var(--scrollbar-track, #1e293b);
}

:root.dark .dropdown-menu__content.is-scrolling::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #1e293b);
}

:root.dark .dropdown-menu__content.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #475569);
}

:root.dark .dropdown-menu__content.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #64748b);
}

/* ===== 菜单项 ===== */
.dropdown-menu__item {
  display: block;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem; /* 上下8px，右14px，左10px */
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 150ms;
  text-decoration: none;
  color: inherit;
}

/* 菜单项 hover 效果（日间模式） */
.dropdown-menu__item:hover {
  background-color: #e0e7ff !important; /* indigo-100, 浅蓝色 */
}

/* 菜单项 hover 效果（夜间模式） */
:root.dark .dropdown-menu__item:hover {
  background-color: #3b4764 !important; /* 深蓝灰色 */
}

/* ===== 菜单项图标与文本布局 ===== */
.dropdown-menu__item-content {
  display: flex;
  align-items: center;
}

.dropdown-menu__item-icon {
  margin-right: 0.75rem; /* mr-3 */
  font-size: 1rem; /* text-base */
  color: rgb(71, 85, 105); /* slate-600 */
}

:root.dark .dropdown-menu__item-icon {
  color: rgb(148, 163, 184); /* slate-400 */
}

.dropdown-menu__item-text {
  font-size: 0.875rem; /* text-sm */
  color: rgb(51, 65, 85); /* slate-700 */
}

:root.dark .dropdown-menu__item-text {
  color: rgb(203, 213, 225); /* slate-300 */
}

/* ===== 菜单分组标题 ===== */
.dropdown-menu__section-title {
  padding: 0.5rem 0.75rem 0.25rem; /* px-3 py-1 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  color: rgb(100, 116, 139); /* slate-500 */
  border-bottom: 1px solid rgba(226, 232, 240, 0.60); /* slate-200 */
  margin-bottom: 0.5rem; /* mb-2 */
}

:root.dark .dropdown-menu__section-title {
  color: rgb(148, 163, 184); /* slate-400 */
  border-bottom-color: rgba(51, 65, 85, 0.60); /* slate-700 */
}

/* ===== 分隔线 ===== */
.dropdown-menu__divider {
  height: 1px;
  background-color: rgba(226, 232, 240, 0.60); /* slate-200 */
  margin: 0.25rem 0; /* my-1 */
}

:root.dark .dropdown-menu__divider {
  background-color: rgba(51, 65, 85, 0.60); /* slate-700 */
}

/* ===== 暗色模式毛玻璃效果 ===== */
:root.dark .dropdown-menu,
html.dark .dropdown-menu,
.dark .dropdown-menu {
  background-color: rgba(30, 41, 59, 0.75); /* slate-800，75%不透明 */
}

/* ===== 完全不透明（兼容禁用玻璃效果的场景） ===== */
body.no-glassmorphism .dropdown-menu {
  background-color: #ffffff;
}

:root.dark body.no-glassmorphism .dropdown-menu,
html.dark body.no-glassmorphism .dropdown-menu,
.dark body.no-glassmorphism .dropdown-menu {
  background-color: #1e293b; /* slate-800 */
}

/* ===== 固定定位变体（用于某些场景） ===== */
.dropdown-menu--fixed {
  position: fixed;
}