/* =====================================================================
   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, spinner căn giữa khung nhìn của ô cuộn.
   Lưu ý: containing block của box absolute này chỉ cao bằng KHUNG NHÌN và neo vào
   ĐẦU NỘI DUNG, nên nó cuộn theo bảng — đang cuộn dở mà bật loading thì lớp phủ trôi
   khỏi tầm mắt. Vì vậy TableCustom kéo ô cuộn về đầu NGAY KHI bắt đầu tải (VeDauAsync)
   chứ không xử lý bằng CSS: dòng đầu của tập dữ liệu mới cũng phải nằm đúng chỗ đó. */
.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;
    }

    /* Ô tiêu đề bấm được để sắp xếp (ThSortCustom). Mũi tên nằm trong span có bề
       rộng cố định nên bật/tắt sắp xếp không làm cột co giãn — header đang
       white-space:nowrap, đổi bề rộng là cả bảng nhảy. */
    .ctbl-table thead th.ctbl-sort {
        cursor: pointer;
        user-select: none;
    }

        .ctbl-table thead th.ctbl-sort:hover {
            filter: brightness(1.08);
        }

        .ctbl-table thead th.ctbl-sort .ctbl-caret {
            display: inline-block;
            width: 11px;
            margin-left: 2px;
            font-size: 10px;
            line-height: 1;
            text-align: center;
        }

        .ctbl-table thead th.ctbl-sorted {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    .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;
}

/* =====================================================================
   Thanh phân trang của TableCustom (AllowPaging="true").
   Tự có style riêng, không mượn .it-* của it-checklist.css để component
   dùng được ở mọi màn hình.
   ===================================================================== */

/* Bọc ngoài chỉ xuất hiện khi bật phân trang: bảng co giãn, thanh phân
   trang cao cố định nằm dưới. min-height:0 để bảng cuộn được trong flex. */
.ctbl-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ctbl-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12.5px;
    color: #5a6b7b;
    flex: none;
}

    .ctbl-pager b {
        color: #24405c;
    }

    .ctbl-pager .ctbl-pager-spacer {
        flex: 1;
    }

    .ctbl-pager select {
        padding: 4px 8px;
        border: 1px solid #dde3ea;
        border-radius: 6px;
        font-size: 12.5px;
        font-family: inherit;
        background: #fff;
        margin-left: 4px;
    }

    .ctbl-pager button {
        min-width: 30px;
        height: 28px;
        padding: 0 8px;
        border: 1px solid #cfd8e3;
        border-radius: 6px;
        background: #fff;
        color: #2f6fb2;
        font-size: 12.5px;
        font-family: inherit;
        cursor: pointer;
        line-height: 1;
    }

        .ctbl-pager button:hover:not(:disabled):not(.on) {
            background: #f2f7fc;
        }

        .ctbl-pager button:disabled {
            opacity: .45;
            cursor: default;
        }

        .ctbl-pager button.on {
            background: #2f6fb2;
            border-color: #2f6fb2;
            color: #fff;
            font-weight: 600;
            cursor: default;
        }

    .ctbl-pager .ctbl-pager-gap {
        padding: 0 2px;
        color: #9aa7b4;
    }