/* /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;
  
  /* 背景色使用主题变量 */
  background-color: var(--overlay-surface-bg, 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--dense .dropdown-menu__item {
  padding-top: 0.375rem;  /* 6px */
  padding-bottom: 0.375rem; /* 6px */
  padding-left: 0.5rem;   /* 8px */
  padding-right: 0.75rem; /* 12px */
}

.dropdown-menu--dense .dropdown-menu__content > .dropdown-menu__item + .dropdown-menu__item {
  margin-top: 0.125rem; /* 2px */
}

/* ===== 位置变体 ===== */
.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.5rem; /* 8px 统一间距 */
  max-height: 400px;
  overflow-y: auto;

  /* 隐藏滚动条但保持滚轮可滚动 */
  scrollbar-width: none; /* Firefox: 完全隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge: 隐藏滚动条 */
}

/* Webkit浏览器：隐藏滚动条但保持滚轮功能 */
.dropdown-menu__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.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;
  width: 100%;
  box-sizing: border-box;

  /* 视觉与可点击区域 */
  padding: 0.5rem 0.75rem; /* 上下8px，左右12px */
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 150ms;
  text-decoration: none;
  color: inherit;

  /* 按钮与链接统一重置（避免原生按钮边框/背景影响布局和点击范围） */
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* 在菜单项之间增加垂直间距，避免项与项贴得过近 */
.dropdown-menu__content > .dropdown-menu__item + .dropdown-menu__item {
  margin-top: 0.25rem; /* 4px */
}

/* 菜单项 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: var(--secondary-text-color); /* 使用主题变量，自动适配亮/暗模式 */
}

.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: var(--secondary-text-color); /* 使用主题变量，自动适配亮/暗模式 */
  border-bottom: 1px solid rgba(var(--light-border-color-rgb), 0.3); /* 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(var(--dark-border-color-rgb), 0.3); /* slate-700 */
}

/* ===== 分隔线 ===== */
.dropdown-menu__divider {
  height: 1px;
  background-color: rgba(var(--light-border-color-rgb), 0.60); /* 日间分隔线 */
  margin: 0.25rem 0; /* my-1 */
}

:root.dark .dropdown-menu__divider {
  background-color: rgba(var(--dark-border-color-rgb), 0.60); /* 夜间分隔线 */
}

/* ===== 暗色/毛玻璃模式由主题变量 --overlay-surface-bg 统一控制 ===== */
/* 已通过 var(--overlay-surface-bg) 在基础样式中实现，无需单独覆盖 */

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