@charset "UTF-8";
/**
 * 下拉菜单 Z-Index 层级修复 v2.0
 * 解决表格中下拉菜单被遮挡的问题
 * 修复hover时按钮与下拉菜单冲突的问题
 */

/* ========================================
   1. 表格容器设置
   ======================================== */

/* 确保表格容器不会裁剪下拉菜单 */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative;
}

/* 确保卡片容器不会裁剪内容 */
.card:has(.table-responsive),
.card-body:has(.table-responsive) {
    overflow: visible !important;
}

.card-modern:has(.table) {
    overflow: visible !important;
}

/* ========================================
   2. 表格行层级控制
   ======================================== */

/* 默认状态：所有行不提升层级 */
.table tbody tr {
    position: relative;
    z-index: auto;
    transition: background-color 0.2s ease;
}

/* hover状态：仅改变背景色，不改变z-index */
.table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
    z-index: auto;
}

/* 只有当下拉菜单真正打开时才提升行的层级 */
.table tbody tr:has(.dropdown.show) {
    z-index: 99998 !important;
    position: relative;
    background-color: rgba(102, 126, 234, 0.05);
}

/* ========================================
   3. 单元格层级控制
   ======================================== */

/* 操作列单元格 */
.table tbody td {
    position: relative;
    z-index: auto;
}

/* 只有包含打开的下拉菜单的单元格才提升到最高层级 */
.table tbody td:has(.dropdown.show) {
    z-index: 99999 !important;
    position: relative;
}

/* ========================================
   4. 按钮组和按钮层级控制
   ======================================== */

/* 按钮组默认不创建新的堆叠上下文 */
.table td .btn-group {
    position: static;
    z-index: auto;
}

/* 详情和编辑按钮默认不提升层级 */
.table td .btn-outline-primary,
.table td .btn-outline-warning,
.table td .btn {
    position: relative;
    z-index: auto;
}

/* 按钮hover时仅在按钮组内部相对提升 */
.table td .btn:hover,
.table td .btn:focus {
    z-index: 1;
}

/* 下拉菜单容器默认不提升层级 */
.table td .dropdown {
    position: static;
    z-index: auto;
}

/* 只有当dropdown实际打开时才设置position: relative */
.table td .dropdown.show {
    position: relative;
    z-index: 99998;
}

/* ========================================
   5. 下拉菜单内容层级（最高层级）
   ======================================== */

/* 下拉菜单本体 - 最高层级 */
.table td .dropdown-menu,
.dropdown-menu {
    z-index: 99999 !important;
    position: absolute !important;
    min-width: 180px;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    margin-top: 0.125rem;
}

/* 确保打开的下拉菜单显示在最上层 */
.dropdown.show .dropdown-menu,
.dropdown-menu.show {
    z-index: 99999 !important;
}

/* ========================================
   6. 下拉菜单项样式
   ======================================== */

.table td .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    z-index: auto;
}

.table td .dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}

.table td .dropdown-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
}

.table td .dropdown-item.text-success:hover {
    background-color: #d1f4e0;
    color: #198754 !important;
}

.table td .dropdown-item.text-primary:hover {
    background-color: #cfe2ff;
    color: #0d6efd !important;
}

.table td .dropdown-item.text-danger:hover {
    background-color: #f8d7da;
    color: #dc3545 !important;
}

/* ========================================
   7. 响应式设计
   ======================================== */

@media (max-width: 768px) {
    .table td .dropdown-menu {
        min-width: 150px;
        font-size: 0.8rem;
    }
    
    .table td .dropdown-item {
        padding: 0.4rem 0.8rem;
    }
}

/* ========================================
   8. 特殊场景支持
   ======================================== */

/* 模态框中的表格 */
.modal .table tbody tr:has(.dropdown.show) {
    z-index: 99998 !important;
}

.modal .table td .dropdown-menu {
    z-index: 99999 !important;
}

/* 侧边栏中的表格 */
.sidebar .table tbody tr:has(.dropdown.show) {
    z-index: 99998 !important;
}

/* ========================================
   8.5 Card Header 中的筛选下拉菜单
   ======================================== */

/* 确保 card-header 和 card-modern 不裁剪下拉菜单 */
.card-header,
.card-modern .card-header {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

/* 当下拉菜单打开时，提升 card-header 层级 */
.card-header:has(.show),
.card-modern .card-header:has(.show),
.card-header:has(.dropdown-menu.show) {
    z-index: 10000 !important;
}

/* card-header 内的按钮组 */
.card-header .btn-group {
    position: relative;
    z-index: auto;
}

/* card-header 内打开的按钮组 */
.card-header .btn-group.show,
.card-header .btn-group:has(.dropdown-menu.show) {
    z-index: 10000 !important;
    position: relative;
}

/* card-header 内的所有下拉菜单 */
.card-header .dropdown-menu,
.card-header .dropdown-menu.show,
.card-header .dropdown-menu[data-bs-popper] {
    z-index: 10002 !important;
    position: absolute !important;
}

/* 特定筛选按钮ID */
#filterDropdownBtn {
    position: relative;
    z-index: auto;
}

#filterDropdownBtn[aria-expanded="true"] {
    z-index: 10000 !important;
}

/* 筛选按钮的下拉菜单 */
#filterDropdownBtn + .dropdown-menu,
#filterDropdownBtn ~ .dropdown-menu {
    z-index: 10002 !important;
}

/* 确保 card-modern 容器不裁剪 */
.card-modern {
    overflow: visible !important;
}

.card-modern:has(.table-responsive) {
    overflow: visible !important;
}

/* 确保 table-responsive 不影响 card-header */
.card-modern .table-responsive {
    position: relative;
    z-index: 1;
}

/* Bootstrap popper dropdown */
[data-bs-toggle="dropdown"] + .dropdown-menu[data-bs-popper] {
    z-index: 10002 !important;
}

/* ========================================
   9. Bootstrap兼容性
   ======================================== */

/* 确保与Bootstrap的dropdown触发器兼容 */
[data-bs-toggle="dropdown"] {
    position: relative;
    z-index: auto;
}

[data-bs-toggle="dropdown"]:hover {
    z-index: 1;
}

/* Bootstrap dropdown打开时的backdrop不影响层级 */
.dropdown-backdrop {
    z-index: 99997;
}

/* ========================================
   10. 防止transform创建新的堆叠上下文
   ======================================== */

/* 移除可能导致堆叠上下文问题的transform */
.table tbody tr:hover {
    transform: none !important;
}

.table-modern tbody tr:hover {
    transform: none !important;
}

/* ========================================
   11. 调试辅助（可选）
   ======================================== */

/* 取消注释以调试层级问题 */
/*
.table tbody tr:has(.dropdown.show) {
    outline: 2px solid blue !important;
}

.table tbody td:has(.dropdown.show) {
    outline: 2px solid green !important;
}

.dropdown-menu.show {
    outline: 2px solid red !important;
}
*/