/* ========================================
   弘度生活 - z-index 层级管理规范
   创建日期: 2026-05-31
   用途: 统一管理所有组件的堆叠顺序，防止遮挡冲突
   规范: 每层间隔 100，便于插入中间层级
   ======================================== */

:root {
    /* ========== 基础层 (0-99) ========== */
    --z-base: 0;              /* 默认背景 */
    --z-content: 1;           /* 页面内容 */
    --z-card: 10;             /* 卡片组件 */

    /* ========== 浮动层 (100-199) ========== */
    --z-dropdown: 100;        /* 下拉菜单/筛选器 */
    --z-sticky-header: 150;   /* 吸顶导航栏 */
    --z-sticky: 200;          /* 通用吸顶（兼容映射） */

    /* ========== 导航层 (300-599) ========== */
    --z-nav: 500;             /* 顶部/底部导航栏 */
    --z-bottom-bar: 550;      /* 页面底部操作栏（高于导航栏背景，避免被遮挡） */
    --z-fab: 560;             /* 浮动操作按钮 */
    --z-overlay: 600;          /* 覆盖层/遮罩 */

    /* ========== 覆盖层 (200-299) ========== */
    --z-skeleton: 200;        /* 骨架屏加载 */
    --z-tooltip: 250;         /* 工具提示 */
    --z-tooltip-high: 1100;   /* 高优先级工具提示（兼容映射） */

    /* ========== 模态层 (300-999) ========== */
    --z-modal-backdrop: 900;  /* 模态框背景遮罩 */
    --z-modal: 950;           /* 模态框本体 */

    /* ========== 通知层 (1000-1999) ========== */
    --z-toast: 1000;          /* Toast 轻提示 */
    --z-snackbar: 1050;       /* Snackbar 消息条 */

    /* ========== 弹窗层 (2000-2999) ========== */
    --z-dialog: 2000;         /* 对话框 */
    --z-popover: 2050;        /* 气泡卡片 */

    /* ========== 紧急层 (9000-9999) ========== */
    --z-loading: 9000;        /* 全局加载遮罩 */
    --z-guide: 9500;          /* 新手引导高亮 */
    --z-emergency: 9999;      /* SOS紧急呼叫 */
    --z-top-nav: 9999;        /* 顶部导航最高层（兼容映射） */
}

/* ========== 使用示例 ========== */

/* 普通卡片 */
.card {
    z-index: var(--z-card);
}

/* 下拉菜单 */
.dropdown-menu {
    z-index: var(--z-dropdown);
}

/* Toast 提示 */
.toast-container {
    z-index: var(--z-toast);
}

/* 模态框 */
.modal-overlay {
    z-index: var(--z-modal-backdrop);
}

.modal-content {
    z-index: var(--z-modal);
}

/* 全局加载 */
.loading-mask {
    z-index: var(--z-loading);
}

/* SOS 紧急按钮（最高优先级） */
.sos-button {
    z-index: var(--z-emergency);
}

/* ========== 注意事项 ========== */
/* 
1. 禁止在 CSS 中硬编码 z-index 数值
2. 必须使用 CSS 变量 var(--z-xxx)
3. 新增层级时优先使用现有区间，避免跨区间跳跃
4. 如需调整，确保相邻层级间隔 >= 50
*/