/**
 * Z-Index 层级修复 - 确保所有弹窗正确显示
 * 解决 Modal/Dialog/Dropdown 被 Header/Sidebar 遮挡的问题
 */

/* ========== 全局层级规范 ========== */
/* Base层 (0-999): 普通内容 */
/* Dropdown层 (1000-1019): 下拉菜单 */
/* Sticky层 (1020-1029): 固定导航 */
/* Fixed层 (1030-1039): 固定定位元素 */
/* Modal Backdrop层 (1040-1049): 模态框背景 */
/* Modal层 (1050-1059): 模态框主体 */
/* Popover层 (1060-1069): 弹出菜单 */
/* Tooltip层 (1070-1079): 工具提示 */

/* ========== 修复所有 Modal 层级 ========== */
[role="dialog"],
[id*="modal"],
[id*="Modal"],
[class*="modal"],
.modal,
.dialog,
div[style*="position: fixed"][style*="inset: 0"] {
    z-index: 1050 !important;
}

/* Modal Backdrop */
[role="dialog"] + div[class*="backdrop"],
[id*="modal"] + div,
.modal-backdrop,
.dialog-backdrop,
div[style*="position: fixed"][style*="background"][style*="inset: 0"]:not([role="dialog"]) {
    z-index: 1040 !important;
}

/* ========== 修复 Provider Config Modal ========== */
#providerConfigModal {
    z-index: 1050 !important;
}

#providerConfigModal ~ div[style*="position: fixed"] {
    z-index: 1040 !important;
}

/* ========== 修复所有 Dropdown/Select ========== */
[role="menu"],
[role="listbox"],
[role="combobox"],
select[multiple],
.dropdown-menu,
.select-menu,
[class*="dropdown"],
[class*="select"][class*="menu"],
div[style*="position: absolute"][class*="menu"] {
    z-index: 1060 !important;
}

/* ========== 修复语言切换菜单 ========== */
#languageMenu,
[id*="language"][id*="menu"],
[class*="language"][class*="menu"] {
    z-index: 1060 !important;
}

/* ========== 修复 Tooltip ========== */
[role="tooltip"],
.tooltip,
[class*="tooltip"],
div[style*="position: absolute"][class*="tip"] {
    z-index: 1070 !important;
}

/* ========== 确保 Header/Sidebar 不遮挡弹窗 ========== */
header,
.header,
.apple-header,
[class*="header"]:not([role="dialog"]):not([class*="modal"]) {
    z-index: 1020 !important;
}

aside,
.sidebar,
.apple-sidebar,
[class*="sidebar"] {
    z-index: 1020 !important;
}

nav:not([role="menu"]),
.nav,
.navbar,
[class*="nav"]:not([role="menu"]) {
    z-index: 1020 !important;
}

/* ========== 主题切换按钮层级 ========== */
[data-theme-toggle] {
    z-index: inherit;
    position: relative;
}

/* 主题切换浮动按钮 */
.theme-toggle-floating {
    z-index: 1030 !important;
}

/* ========== Notification/Toast 层级 ========== */
.notification,
.toast,
[class*="notification"],
[class*="toast"],
[role="alert"][style*="position: fixed"] {
    z-index: 1065 !important;
}

/* ========== Loading Overlay 层级 ========== */
.loading-overlay,
[class*="loading"][class*="overlay"],
div[style*="position: fixed"][style*="loading"] {
    z-index: 1055 !important;
}

/* ========== 确保弹窗内容可点击 ========== */
[role="dialog"] *,
.modal *,
.dialog * {
    pointer-events: auto;
}

/* ========== Portal 根元素 ========== */
#portal-root,
[id*="portal"],
.portal-root {
    z-index: 1050;
}

/* ========== React/Vue Portal ========== */
body > div[data-portal],
body > div[data-reach-portal],
body > div[data-headlessui-portal] {
    z-index: 1050;
}

/* ========== 确保背景遮罩可点击关闭 ========== */
[role="dialog"] ~ div[style*="background"],
.modal-backdrop {
    cursor: pointer;
}

/* ========== Fixed Positioning 修复 ========== */
[style*="position: fixed"] {
    /* 确保 fixed 元素正确堆叠 */
    isolation: isolate;
}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
    /* 移动端全屏弹窗 */
    [role="dialog"],
    .modal,
    .dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* 移动端导航降低层级 */
    header,
    aside,
    nav {
        z-index: 1015 !important;
    }
}

/* ========== 调试辅助 ========== */
/* 取消注释以查看层级 */
/*
[role="dialog"]::before {
    content: "z: 1050";
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 9999;
}

header::before {
    content: "z: 1020";
    position: absolute;
    top: 0;
    right: 0;
    background: blue;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 9999;
}
*/

/* ========== 特殊情况处理 ========== */

/* Tailwind z-50 class 覆盖 */
.z-50 {
    z-index: 1050 !important;
}

/* 确保所有 fixed 弹窗都在正确层级 */
div[style*="position: fixed"][style*="inset"][role] {
    z-index: 1050 !important;
}

/* ========== Select2/Chosen 等第三方库 ========== */
.select2-container,
.chosen-container,
.selectize-dropdown {
    z-index: 1060 !important;
}

/* ========== DatePicker/TimePicker ========== */
.datepicker,
.timepicker,
[class*="picker"][class*="dropdown"] {
    z-index: 1060 !important;
}

/* ========== Autocomplete/TypeAhead ========== */
.autocomplete-dropdown,
.typeahead-dropdown,
[class*="autocomplete"][class*="list"] {
    z-index: 1060 !important;
}

/* ========== Context Menu ========== */
.context-menu,
[class*="context"][class*="menu"] {
    z-index: 1065 !important;
}

/* ========== 确保遮罩层覆盖整个视口 ========== */
.modal-backdrop,
[role="dialog"] ~ div[style*="inset: 0"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* ========== 防止body滚动（弹窗打开时）========== */
body.modal-open,
body[style*="overflow: hidden"] {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* ========== 弹窗动画不影响层级 ========== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-enter,
.dialog-enter {
    animation: modalFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 确保弹窗内的下拉菜单更高层级 ========== */
[role="dialog"] [role="menu"],
.modal [role="listbox"],
.dialog .dropdown-menu {
    z-index: 1061 !important;
}

/* ========== 暗色模式适配 ========== */

@media (prefers-color-scheme: DISABLED-dark) {
    /* Modal 暗色背景 */
    .modal-backdrop,
    [role="dialog"] ~ div[style*="inset: 0"] {
        background: rgba(0, 0, 0, 0.75) !important;
    }

    /* 遮罩层暗色 */
    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.7);
    }
}