/* =====================================================================
   CSS cho component TableCustom (Servers/Components/Custom/TableCustom.razor).
   Màu tuỳ biến qua CSS variable đổ từ param: --ctbl-head-bg / --ctbl-head-color
   / --ctbl-border / --ctbl-hover / --ctbl-radius. Mặc định = xám.
   ===================================================================== */

.ctbl-scroll {
    position: relative; /* neo overlay loading */
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--ctbl-border, #e3e7ec);
    border-radius: var(--ctbl-radius, 12px);
}

/* Overlay loading phủ lên bảng */
.ctbl-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    border-radius: var(--ctbl-radius, 12px);
}

.ctbl-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #d7dee6;
    border-top-color: #2f6fb2;
    border-radius: 50%;
    animation: ctbl-spin .8s linear infinite;
}

@keyframes ctbl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dòng trống (gộp cột) — bỏ viền để không tạo đường kẻ thừa dưới chữ */
.ctbl-table tr.ctbl-empty-row td {
    border: 0;
    text-align: center;
    color: #8a93a0;
    padding: 26px 10px;
    font-size: 13px;
}

    /* không đổi nền khi hover dòng trống */
    .ctbl-table tr.ctbl-empty-row:hover td {
        background: transparent;
    }

.ctbl-table {
    /* separate để header sticky không bị ô cuộn đè */
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 13px;
}

    .ctbl-table th, .ctbl-table td {
        border-right: 1px solid var(--ctbl-border, #e3e7ec);
        border-bottom: 1px solid var(--ctbl-border, #e3e7ec);
        padding: 8px 10px;
        text-align: left;
        vertical-align: middle;
    }

        /* Ô cột cuối bỏ border-right để không chồng với viền ngoài của khung (đỡ dày mép phải) */
        .ctbl-table th:last-child, .ctbl-table td:last-child {
            border-right: 0;
        }

    /* Header dính khi cuộn dọc */
    .ctbl-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--ctbl-head-bg, #f2f2f4);
        color: var(--ctbl-head-color, #1b222c);
        font-weight: 600;
        white-space: nowrap;
        box-shadow: inset 0 -1px 0 var(--ctbl-border, #e3e7ec);
        /* header căn giữa theo CHIỀU DỌC + cao hơn (áp dụng chung mọi bảng) */
        vertical-align: middle;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .ctbl-table tbody tr:hover td {
        background: var(--ctbl-hover, #fafbfc);
    }

    .ctbl-table td a {
        word-break: break-all;
    }

    .ctbl-table .ctr {
        text-align: center;
    }

/* Cột chỉ số / STT */
.ctbl-idx {
    text-align: center !important;
    width: 44px;
    color: #8a93a0;
}

/* Dòng nhóm (group header) — dùng class .grp trên <tr> */
.ctbl-table tr.grp td {
    background: #16345c;
    color: #fff;
    font-weight: 600;
}

/* Dòng cảnh báo / bất thường — dùng class .bad trên <tr> */
.ctbl-table tr.bad td {
    background: #ffe0e0;
    color: #b32020;
    font-weight: 600;
}

    .ctbl-table tr.bad td:first-child {
        box-shadow: inset 3px 0 0 #d23f3f;
    }

/* Ô nhập liệu trong bảng (width inline vẫn thắng nhờ độ ưu tiên cao hơn) */
.ctbl-table input:not([type=checkbox]):not([type=radio]),
.ctbl-table select,
.ctbl-table textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dde3ea;
    border-radius: 5px;
    padding: 5px 6px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
}