/* CSS cho tính năng resize cột trong CyberGridEdit và SmReport */

.resizable-column {
    position: relative;
    box-sizing: border-box;
}

.column-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.2s;
    z-index: 10;
}

    .column-resizer:hover {
        background-color: rgba(0, 123, 255, 0.3);
    }

    .column-resizer:active {
        background-color: rgba(0, 123, 255, 0.5);
    }

/* Styling khi đang resize */
table.cyber-grid-resizing {
    user-select: none;
    cursor: col-resize;
}

    table.cyber-grid-resizing .column-resizer {
        background-color: rgba(0, 123, 255, 0.5);
    }

/* Đảm bảo header có chiều cao đủ */
.resizable-column > div {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Fix table layout để resize hoạt động tốt */
table {
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    /* Đảm bảo cells không bị collapse khi resize nhỏ */
    table th,
    table td {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ============================================== */
/* FIX FROZEN COLUMNS - QUAN TRỌNG */
/* ============================================== */

/* 1. Z-index cho frozen columns - ngăn cột scroll đè lên */
.Cyber-Css-Head-Grid-Fix {
    position: sticky !important;
    z-index: 100 !important; /* Cao hơn cột thường */
    background-color: var(--color-head-grid) !important;
}

.Cyber-Css-Body-Grid-Fix,
.Cyber-Css-Body-GridReport-Fix {
    position: sticky !important;
    z-index: 90 !important; /* Cao hơn cột thường, thấp hơn header */
    background-color: #ffffff !important; /* Background đặc để che cột scroll */
}

    /* 2. Đảm bảo cột frozen luôn có background đặc */
    .Cyber-Css-Head-Grid-Fix::before,
    .Cyber-Css-Body-Grid-Fix::before,
    .Cyber-Css-Body-GridReport-Fix::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: inherit;
        z-index: -1;
    }

/* 3. Border cho frozen columns để phân biệt rõ */
.Cyber-Css-Head-Grid-Fix,
.Cyber-Css-Body-Grid-Fix,
.Cyber-Css-Body-GridReport-Fix {
    border-right: 2px solid #dee2e6 !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); /* Shadow để tạo hiệu ứng nổi */
}

/* 4. Fix overflow cho frozen cells khi resize */
.Cyber-Css-Head-Grid-Fix,
.Cyber-Css-Body-Grid-Fix,
.Cyber-Css-Body-GridReport-Fix {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    /* 5. Đảm bảo nội dung trong frozen cell không scroll */
    .Cyber-Css-Head-Grid-Fix > *,
    .Cyber-Css-Body-Grid-Fix > *,
    .Cyber-Css-Body-GridReport-Fix > * {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

/* 6. Fix cho CyberGridEdit - cột số thứ tự, action buttons */
table th[style*="position:sticky"],
table td[style*="position:sticky"] {
    z-index: 100 !important;
    background-color: white !important;
}

table thead th[style*="position:sticky"] {
    z-index: 110 !important;
    background-color: var(--color-head-grid) !important;
}

/* 7. Fix khi resize - đảm bảo không có khoảng trống */
table.cyber-resizable-table {
    width: auto !important;
    /*min-width: 100% !important;*/
}

/* 8. Container cho table - cho phép scroll horizontal */
.w3-border[style*="overflow:scroll"] {
    position: relative;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* 9. Fix cho table trong SmReport */
table.w3-white.cyber-resizable-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* 10. Đảm bảo thead sticky hoạt động đúng */
thead[style*="position: sticky"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important; /* Cao nhất để luôn ở trên */
}

/* 11. Fix cho row hover không che mất frozen columns */
.cyberrowhover:hover {
    position: relative;
    z-index: 1;
}

    .cyberrowhover:hover .Cyber-Css-Body-Grid-Fix,
    .cyberrowhover:hover .Cyber-Css-Body-GridReport-Fix {
        z-index: 91 !important; /* Vẫn cao hơn row */
    }

/* 12. Fix riêng cho cột đầu tiên (drag, checkbox, STT) */
table th:first-child,
table td:first-child {
    left: 0 !important;
    z-index: 100 !important;
}

table thead th:first-child {
    z-index: 110 !important;
}

/* 13. Fix cho resizer trong frozen columns */
.Cyber-Css-Head-Grid-Fix .column-resizer,
.Cyber-Css-Body-Grid-Fix .column-resizer,
.Cyber-Css-Body-GridReport-Fix .column-resizer {
    z-index: 120 !important; /* Cao nhất để có thể click */
}

/* 14. Ngăn overflow của table container */
table {
    max-width: none !important;
}

/* 15. Fix cho search row trong header */
thead tr:last-child th {
    z-index: 100 !important;
}

    thead tr:last-child th.Cyber-Css-Head-Grid-Fix {
        z-index: 105 !important;
    }