/**
 * Z-Index 标准规范
 * 统一管理项目的z-index层级,避免冲突和混乱
 */

:root {
  /* 基础层级 */
  --z-base: 0;

  /* 页面内容层级 */
  --z-content: 1;

  /* 固定元素层级 */
  --z-header: 2000; /* 页面顶部导航 (above all page content) */
  --z-footer: 9000; /* 移动端底部 Tab 导航 */
  --z-back-to-top: 20; /* 返回顶部按钮 */

  /* Hero 视频层级 */
  --z-hero-poster: 1; /* 视频封面图 */
  --z-hero-player: 2; /* 视频播放器 */
  --z-hero-overlay: 3; /* 静音按钮容器 */
  --z-hero-fallback: 5; /* 降级播放按钮 */
  --z-hero-info: 15; /* 底部信息卡片 */

  /* 浮动元素层级 */
  --z-fab: 50; /* 浮动操作按钮 (WhatsApp, LINE等) */
  --z-bottom-nav: 50; /* 移动端底部导航栏 */

  /* 筛选面板层级 */
  --z-filter-overlay: 55; /* 产品筛选遮罩 */
  --z-filter-sheet: 60; /* 产品筛选面板 */

  /* 交互元素层级 */
  --z-dropdown: 200; /* 下拉菜单 */
  --z-language-dropdown: 2500; /* 语言选择下拉框 (above header) */
  --z-popover: 210; /* 气泡提示 */
  --z-sticky: 100; /* 粘性元素 */

  /* 覆盖层层级 */
  --z-modal-backdrop: 300; /* 模态框背景 */
  --z-modal: 310; /* 模态框内容 */
  --z-drawer: 10000; /* 抽屉式菜单 (above footer) */
  --z-dialog: 330; /* 对话框 */

  /* 通知层级 (above header) */
  --z-toast: 11000; /* 消息提示 (above drawer) */
  --z-notification: 11100; /* 通知提醒 */
  --z-alert: 11200; /* 警告提示 */

  /* 最高层级 */
  --z-tooltip: 12000; /* 工具提示 */
  --z-loading: 13000; /* 加载遮罩 */
  --z-overlay: 14000; /* 遮罩层 (最高) */
}

/* Tailwind CSS 映射类
 * 在项目中使用时,请优先使用 CSS 变量:
 *   z-[var(--z-header)]  代替  z-10
 *   z-[var(--z-fab)]     代替  z-50
 *   z-[var(--z-dropdown)] 代替  z-200
 */

/* 兼容旧代码的过渡类 */
.z-header {
  z-index: var(--z-header);
}
.z-fab {
  z-index: var(--z-fab);
}
.z-dropdown {
  z-index: var(--z-dropdown);
}
.z-language-dropdown {
  z-index: var(--z-language-dropdown);
}
.z-modal {
  z-index: var(--z-modal);
}
.z-toast {
  z-index: var(--z-toast);
}
.z-tooltip {
  z-index: var(--z-tooltip);
}