/* =========================
   LIST PAGE
========================= */

.list-page {
    width: 75%;
    min-height: 70vh;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background: #f7f7f7;
}
.list-page .card-header {
    position: sticky;
    top: var(--nav-height);
    z-index: 20;
    background: white;
}

/* One visual affordance for resizable voucher-detail columns across accounting modules. */
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .detailTable thead th,
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .voucher-detail-table thead th {
    position: relative;
    text-align: center !important;
    vertical-align: middle !important;
}

:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .detailTable .atf-detail-col-resizer,
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .voucher-detail-table .atf-detail-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 12;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .detailTable .atf-detail-col-resizer::after,
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) .voucher-detail-table .atf-detail-col-resizer::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 3px;
    width: 2px;
    background: transparent;
}

:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) :is(.detailTable, .voucher-detail-table) .atf-detail-col-resizer:hover::after,
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) :is(.detailTable, .voucher-detail-table).atf-detail-column-resizing .atf-detail-col-resizer::after {
    background: var(--atf-primary, #0d6efd);
}

:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) :is(.detailTable, .voucher-detail-table).atf-detail-column-resizing,
:is(.accounting-voucher-form, .inventory-voucher-form, #saReturnForm) :is(.detailTable, .voucher-detail-table).atf-detail-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* =========================
   WORK PAGE
   For newer HR/Payroll screens inside the fixed app shell.
   The page owns scrolling; card headers stay in normal flow so they do not
   cover form fields or table content.
========================= */

.work-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 14px 18px;
    background: #f7f7f7;
}

.work-page > .card {
    min-height: 0;
}

.work-page .card-header {
    position: static;
    top: auto;
    z-index: auto;
    flex: 0 0 auto;
    background: #fff;
}

.form-modal #FormHeader > .card-header.bg-primary,
.cash-payment-form #FormHeader > .card-header.bg-primary,
.purchase-voucher-form #FormHeader > .card-header.bg-primary,
.purchase-service-form #FormHeader > .card-header.bg-primary {
    color: #fff !important;
    background: var(--bs-primary, var(--atf-primary, #0d6efd)) !important;
    background-color: var(--bs-primary, var(--atf-primary, #0d6efd)) !important;
    border-color: var(--bs-primary, var(--atf-primary, #0d6efd)) !important;
}

.form-modal #FormHeader > .card-header.bg-primary .modal-title,
.cash-payment-form #FormHeader > .card-header.bg-primary .modal-title,
.purchase-voucher-form #FormHeader > .card-header.bg-primary .modal-title,
.purchase-service-form #FormHeader > .card-header.bg-primary .modal-title {
    color: #fff !important;
}

.work-page .card-body {
    min-height: 0;
    overflow: visible;
}

.work-page .table-responsive {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .list-page {
        width: 100% !important;
        min-height: 0;
        padding: 8px;
    }

    .work-page {
        padding: 8px;
    }

    .list-page .list-table-wrapper,
    .work-page .table-responsive,
    .detail-table-container .list-table-wrapper {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* vùng scroll table */
.list-page .list-table-wrapper {
    max-height: calc(100vh - 120px);
    overflow: auto;
    
    /*width: 100%;*/
    /* cuộn ngang khi cần */
    /*overflow-x: auto;
    overflow-y: hidden;*/
}

.list-page .my-table {
    width: 100%; /* Bảng chiếm toàn bộ chiều ngang container */
    border-collapse: collapse; /* Gộp viền nếu có border */
    font-size: var(--atf-catalog-font-size, 14px) !important;
}

.list-page .my-table thead th,
.list-page .my-table tbody td,
#employeeListContextArea .employee-list-table,
#employeeListContextArea .employee-list-table thead th,
#employeeListContextArea .employee-list-table tbody td {
    font-size: inherit !important;
}

#employeeListContextArea .employee-list-table {
    font-size: var(--atf-catalog-font-size, 14px) !important;
}

.list-page .inventory-item-table {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

.list-page .inventory-item-table th,
.list-page .inventory-item-table td {
    box-sizing: border-box;
    max-width: 1px;
    overflow: hidden;
    padding-left: 6px;
    padding-right: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-page .inventory-item-table thead th {
    line-height: 1.15;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
}

.list-page .inventory-item-table .inventory-item-name-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    vertical-align: top;
}

.list-page .inventory-item-table thead th:not(.catalog-actions-header) {
    position: sticky;
}

.list-page .inventory-item-table .inventory-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 12;
    touch-action: none;
}

.list-page .inventory-item-table .inventory-col-resizer::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 3px;
    width: 1px;
    background: rgba(255, 255, 255, .45);
}

.list-page .inventory-item-table .inventory-col-resizer:hover::after,
.list-page .inventory-item-table.inventory-resizing .inventory-col-resizer::after {
    background: rgba(255, 255, 255, .95);
}

/* sticky table header */
    .list-page .my-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: dodgerblue #f9f9f9;
        line-height: normal;
    }

    .list-page .my-table th {
        font-weight: 600; /* Chữ in đậm ở tiêu đề cột */
        text-align: left; /* Căn lề trái tiêu đề */
    }

    .list-page .my-table thead tr.text-center > th {
        text-align: center;
    }

/* sticky table row data */
.list-page .my-table td {
    padding: 4px 4px; /* Padding nhỏ hơn th để bảng gọn gàng */
    vertical-align: middle; /* Căn giữa theo chiều dọc */
    /*display: inline-block;*/
}


.list-page .my-table tr {
    margin-left: 4px; /* Khoảng cách nhỏ bên trái từng dòng (nếu có spacing giữa các dòng) */
}


    .list-page .my-table tr:hover td,
    .list-page .my-table tr:focus td {
        color: #113afe;
        /*border: 1px solid #113afe;*/
        /*background-color: #f9f9f9;*/
    }




/* =========================
   PHẦN DÀNH CHO CHI TIẾT CỦA form NHẬP LIỆU
========================= */

.detail-table-container {
    width: 100%;
}

    .detail-table-container .list-table-wrapper {
        /* luôn cao đúng 15 dòng + header; khi ít hơn vẫn giữ khung */
        min-height: calc(var(--acc-rows) * var(--acc-row-h) + var(--acc-head-h));
        max-height: calc(var(--acc-rows) * var(--acc-row-h) + var(--acc-head-h));
        /*overflow: auto;*/
        /* để tránh body cuộn: */
        overscroll-behavior: contain; /* chặn “trôi” cuộn ra ngoài */
        background: #f7f7f7;
    }


/* Tiêu đề dính (Sticky Header) */
.listDetail-wrapper thead th {
    position: sticky;
    top: 0; /* Dính vào đỉnh của .table-responsive */
    background-color: var(--br-detail-color);
    font-weight: normal;
    font-size: var(--detail-font-size);
    /*color: white;*/
    z-index: 2; /* Đảm bảo tiêu đề nằm trên nội dung cuộn */
    box-sizing: border-box; /* QUAN TRỌNG: padding và border không làm tăng kích thước */
    padding: 2px;
    text-align: center;
}

.listDetail-wrapper tr {
    padding: 0px 0px;
    /*line-height: 1.6; */
    /* Giảm khoảng cách dòng */
}



/* Trong file CSS của bạn, ví dụ site.css */

/* Đặt chiều cao tối đa cho phần tử chứa bảng để kích hoạt cuộn */
/* Chọn class hoặc ID phù hợp với div chứa bảng */
.my-table .table-responsive {
    /* Điều chỉnh chiều cao tối đa theo ý muốn của bạn */
    max-height: 400px;
    overflow-y: auto;
    /* Thêm thanh cuộn dọc khi nội dung tràn */
    /* Có thể cần overflow-x: auto; nếu bảng quá rộng */
}





/* Font chữ chung của table */
.detailTable {
    table-layout: fixed; /* QUAN TRỌNG NHẤT */
    width: auto; /* KHÔNG ép full 100% */
    min-width: 100%; /* nhưng không nhỏ hơn container */
    border-collapse: collapse;
    font-size: var(--input-font-size);
    /*table-layout: fixed;*/
    overflow: hidden; /* Ngăn nội dung tràn ra ngoài */
}



/* Tiêu đề dính (Sticky Header) */
/*.detailTable thead th
{
    position: sticky;
    top: 0;*/ /* Dính vào đỉnh của .table-responsive */
/*background-color: #99cdff;
    font-weight: normal;*/
/*color: white;*/
/*z-index: 2;*/ /* Đảm bảo tiêu đề nằm trên nội dung cuộn */
/*box-sizing: border-box;*/ /* QUAN TRỌNG: padding và border không làm tăng kích thước */
/*padding: 2px;
    text-align: center;
}*/



/*Tieu đề Chi tiết phiếu*/
.detail-title {
    font-weight: bold;
    font-size: var(--atf-control-font-size, 12px);
    margin-bottom: 10px;
    background-color: #f0f2f5;
    color: #333;
}


/* Thêm một container để xử lý thanh cuộn ngang nếu nội dung quá rộng */
/*.detail-table-container {
    overflow-x: auto;*/ /* Kích hoạt thanh cuộn ngang */
/*}*/





/* dòng đang kéo */
.detail-row .dragging {
    opacity: .6;
    background: #f0f8ff;
}

/* vị trí drop */
.detail-row .drag-over {
    outline: 2px dashed #0d6efd;
}



.clickable-row {
    cursor: pointer;
}

.account-number-cell {
    font-weight: 600;
    font-size: var(--atf-control-font-size, 12px);
}

#customContextMenu {
    position: fixed;
    display: none;
    z-index: 99999;
}

/* =========================
   CASH PAYMENT FORM
========================= */

#cashVoucherModal .cash-voucher-dialog,
#bankVoucherModal .cash-voucher-dialog {
    max-width: min(1320px, calc(100vw - 16px));
    margin-top: 8px;
    margin-bottom: 8px;
}

#cashVoucherModal .modal-content,
#cashVoucherModalBody,
#bankVoucherModal .modal-content,
#bankVoucherModalBody {
    max-height: calc(100vh - 16px);
    overflow: hidden;
}

#cashVoucherPrintPreviewModal .cash-voucher-print-dialog {
    max-width: min(1160px, calc(100vw - 24px));
}

#cashVoucherPrintPreviewFrame {
    display: block;
    width: 100%;
    height: min(760px, calc(100vh - 152px));
    border: 0;
    background: #eef2f6;
}

@media (min-width: 992px) and (max-width: 1599.98px) {
    #cashVoucherModal .cash-voucher-dialog,
    #bankVoucherModal .cash-voucher-dialog {
        width: 75vw !important;
        max-width: 75vw !important;
    }

    .cash-payment-form {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (min-width: 1600px) {
    #cashVoucherModal .cash-voucher-dialog,
    #bankVoucherModal .cash-voucher-dialog {
        width: fit-content !important;
        max-width: min(1500px, calc(100vw - 16px)) !important;
    }

    .cash-payment-form {
        width: min(1500px, calc(100vw - 16px)) !important;
        max-width: min(1500px, calc(100vw - 16px)) !important;
    }
}

.cash-payment-form {
    width: min(100%, 1280px);
    height: calc(100vh - var(--nav-height, 42px) - 12px);
    max-height: calc(100vh - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cash-payment-form #FormHeader {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cash-payment-form #FormHeader > .card-header,
.cash-payment-form #FormFooter {
    flex: 0 0 auto;
}

.cash-payment-form #FormHeader > .modal-body {
    flex: 0 0 auto;
    overflow: visible;
}

.cash-payment-form .detail-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cash-payment-form .detail-table-container .list-table-wrapper {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.cash-payment-form .detailTable {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

.cash-payment-form .detailTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.cash-payment-form {
    width: min(100%, 1500px);
}

/* Keep direct Bank vouchers compact and centered on desktop screens. */
@media (min-width: 992px) {
    .cash-payment-form.bank-voucher-form:not(.is-posting-partial) {
        width: 74vw !important;
        max-width: 74vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.cash-payment-form #FormHeader {
    border-radius: 4px;
}

.cash-payment-form #FormHeader > .modal-body {
    flex: 0 1 auto;
    max-height: min(48vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .35rem;
    align-items: flex-start;
}

.cash-payment-form .my-card {
    box-shadow: none !important;
    margin-bottom: .25rem;
}

.cash-payment-form .my-card .card-body,
.cash-payment-form .my-card .card-footer {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
}

.cash-payment-form .form-row-group {
    margin-bottom: .16rem;
    gap: .25rem;
}

.cash-payment-form #cardtt {
    border-top: 1px solid #d6deeb !important;
    background: #f8fbff;
}

.cash-payment-form #cardtt > .d-flex {
    gap: .5rem;
}

.cash-payment-form #cardtt .card-body {
    flex: 1 1 0;
    max-width: none;
}

.cash-payment-form input[readonly] {
    background: #eef6ff !important;
    color: #074b8f;
}

.cash-payment-form #TotalPaymentAmount,
.cash-payment-form #TotalPaymentAmountOC {
    font-weight: 700 !important;
}

.cash-payment-form .detail-table-container {
    flex: 1 1 190px;
    min-height: 150px;
    border-top: 1px solid #d6deeb;
    background: #fff;
}

.cash-payment-form .detail-table-container .list-table-wrapper {
    width: 100%;
    background: #fff;
}

.cash-payment-form .detailTable {
    min-width: 1380px;
    table-layout: fixed;
    font-size: var(--atf-detail-font-size, 11px);
}

.cash-payment-form .detailTable th,
.cash-payment-form .detailTable td {
    vertical-align: middle;
    padding: 1px 2px;
    white-space: nowrap;
}

.cash-payment-form .detailTable .col-stt {
    width: 28px !important;
    min-width: 18px !important;
    max-width: none !important;
}

.cash-payment-form .detailTable .col-code {
    width: 128px !important;
    min-width: 100px !important;
}

.cash-payment-form .detailTable .col-desc {
    width: 280px !important;
    min-width: 220px !important;
}

.cash-payment-form .detailTable .cell-refacc,
.cash-payment-form .detailTable .col-acc {
    width: 88px !important;
    min-width: 72px !important;
}

.cash-payment-form .detailTable .col-amvn,
.cash-payment-form .detailTable .col-amoc {
    width: 105px !important;
    min-width: 82px !important;
}

.cash-payment-form .detailTable .col-rate {
    width: 56px !important;
    min-width: 48px !important;
}

/* Shared CB/CBDetail layout: CA receipt/payment and bank GBC/GBN. */
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable {
    width: var(--bank-table-width, 768px) !important;
    min-width: 768px !important;
    max-width: none !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable .col-stt {
    width: 28px !important;
    min-width: 18px !important;
    max-width: none !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(2),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(2) {
    width: 115px !important; /* payment invoice: 90% of 128px */
    min-width: 90px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(3),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(3) {
    width: 95px !important;
    min-width: 82px !important;
    max-width: 95px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(4),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(4) {
    width: var(--bank-desc-width, 280px) !important;
    min-width: var(--bank-desc-width, 280px) !important;
    max-width: var(--bank-desc-width, 280px) !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(5),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(5) {
    width: 70px !important; /* TKDU: 80% of 88px */
    min-width: 64px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(6),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(6),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(7),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(7) {
    width: 95px !important; /* Amount: 90% of 105px */
    min-width: 74px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(8),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(8) {
    width: 45px !important; /* VAT rate: 80% of 56px */
    min-width: 42px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(9),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(9),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable th:nth-child(10),
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable td:nth-child(10) {
    width: 84px !important; /* VAT amount: 80% of 105px */
    min-width: 68px !important;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable .bank-desc-resizable {
    position: relative;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable .bank-desc-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable .bank-desc-resizer::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 3px;
    width: 2px;
    background: transparent;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable .bank-desc-resizer:hover::after,
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable.bank-desc-column-resizing .bank-desc-resizer::after {
    background: #0d6efd;
}

.cash-payment-form:not(.is-tax-invoice-payment) .detailTable.bank-desc-column-resizing,
.cash-payment-form:not(.is-tax-invoice-payment) .detailTable.bank-desc-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.cash-payment-form .detailTable .select2-container,
.cash-payment-form .detailTable .form-select,
.cash-payment-form .detailTable .form-control,
.cash-payment-form .detailTable input {
    min-height: 22px !important;
    height: 22px !important;
    font-size: var(--atf-detail-font-size, 11px) !important;
}

.cash-payment-form .detailTable .select2-selection--single {
    min-height: 22px !important;
    height: 22px !important;
}

.cash-payment-form .detailTable .select2-selection__rendered {
    line-height: 20px !important;
    padding-left: 2px !important;
    padding-right: 12px !important;
}

.cash-payment-form .detailTable .select2-selection__arrow {
    height: 20px !important;
}

.cash-payment-form .detailTable tr.ca-detail-selected > td {
    background: #eaf4ff !important;
    color: #084f87;
}

.cash-payment-form .detailTable tr.dragging > td {
    opacity: .65;
    background: #f3f8ff !important;
}

#detailContextMenu .dropdown-item.disabled {
    opacity: .45;
    pointer-events: none;
}

#detailContextMenu {
    position: fixed;
    min-width: 160px;
    border: 1px solid var(--atf-line, #d9e2ec);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(23,32,51,.16);
}

#detailContextMenu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 30px;
    gap: .25rem;
    border-radius: 4px;
    cursor: pointer;
}

#detailContextMenu .dropdown-item:hover {
    background: var(--atf-primary-soft, #e6f2fb);
    color: var(--atf-primary-dark, #084f87);
}

#detailContextMenu .float-end {
    margin-left: auto;
    font-size: 11px;
}

.cash-payment-form #FormFooter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem;
    min-height: 42px;
    border-top: 1px solid #d6deeb;
}

.cash-payment-form #FormFooter > .col-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}

.cash-payment-form #FormFooter > .text-start {
    margin-right: auto;
}

.cash-payment-form #FormFooter > .text-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cash-payment-form #FormFooter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    line-height: 1;
}

/* Cash voucher embedded beside an e-invoice in the posting workspace. */
.cash-payment-form.is-posting-partial {
    width: 100% !important;
    max-width: none !important;
    height: 100vh;
    max-height: none;
    margin: 0 !important;
    border-radius: 0;
}

.cash-payment-form.is-posting-partial #FormHeader {
    border-radius: 0;
}

.cash-payment-form.is-posting-partial #FormHeader > .card-header {
    min-height: 36px;
    align-items: center;
}

.cash-payment-form.is-posting-partial #FormHeader > .card-header .modal-title {
    margin: 0;
    line-height: 1.2;
}

.cash-payment-form.is-posting-partial #FormHeader > .modal-body {
    max-height: min(43vh, 360px);
}

/* Purchase tax-invoice workspace hides the payment-allocation columns. Keep the
   remaining ledger columns compact instead of stretching the shared 1380px grid. */
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable {
    min-width: 940px !important;
    width: 100% !important;
    table-layout: fixed;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th,
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable tbody td {
    padding: 0 !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable tbody td > input:not([type="hidden"]),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable tbody td > select,
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable tbody td > .select2-container {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable tbody td > .select2-container .select2-selection--single {
    box-sizing: border-box;
    width: 100%;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(1),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(1) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(2),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(2) {
    width: 24% !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .sort-order-display {
    display: inline-block;
    min-width: 14px;
    line-height: 20px;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(3),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(3) {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(5),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(5) {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(6),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(6) {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(8),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(8) {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
}

.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(9),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(9),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable th:nth-of-type(10),
.cash-payment-form.is-posting-partial.is-tax-invoice-payment .detailTable td:nth-of-type(10) {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

#bankVoucherModal .cash-payment-form.is-posting-partial {
    height: auto;
    max-height: calc(100vh - 16px);
}

#bankVoucherModal .cash-payment-form.is-posting-partial #FormHeader {
    flex: 0 1 auto;
}

#bankVoucherModal .cash-payment-form.is-posting-partial .detail-table-container {
    flex: 0 0 clamp(220px, 28vh, 310px);
    min-height: 180px;
    max-height: clamp(220px, 28vh, 310px);
}

#bankVoucherModal .cash-payment-form.is-posting-partial .detail-table-container .list-table-wrapper {
    height: 100%;
    max-height: 100%;
    overflow: auto !important;
}

/* The Cash index modal is a compact edit surface. Keep only ten editable
   detail rows visible instead of letting the form consume the viewport. */
#cashVoucherModal .cash-payment-form.is-posting-partial {
    height: auto;
    max-height: calc(100vh - 16px);
}

#cashVoucherModal .cash-payment-form.is-posting-partial #FormHeader {
    flex: 0 1 auto;
}

#cashVoucherModal .cash-payment-form.is-posting-partial .detail-table-container {
    --cash-modal-detail-height: calc(var(--atf-detail-head-height, 24px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + var(--atf-voucher-detail-cell-height, 22px) + 4px);
    flex: 0 0 var(--cash-modal-detail-height);
    height: var(--cash-modal-detail-height);
    min-height: var(--cash-modal-detail-height);
    max-height: var(--cash-modal-detail-height);
}

#cashVoucherModal .cash-payment-form.is-posting-partial .detail-table-container .list-table-wrapper {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: auto !important;
}

@media (min-width: 720px) {
    .cash-payment-form #FormHeader > .modal-body {
        flex-wrap: nowrap;
    }

    .cash-payment-form #cardvc {
        flex: 0 0 22% !important;
        width: 22% !important;
        max-width: 22% !important;
    }

    .cash-payment-form #carddt {
        flex: 0 0 52% !important;
        width: 52% !important;
        max-width: 52% !important;
    }

    .cash-payment-form #cardhd {
        flex: 0 0 26% !important;
        width: 26% !important;
        max-width: 26% !important;
    }
}

/* =========================
   PURCHASE VOUCHER FORM
========================= */

#puVoucherModal .pu-voucher-dialog {
    max-width: min(1650px, calc(100vw - 16px));
    margin-top: 8px;
    margin-bottom: 8px;
}

#puVoucherModal .modal-content,
#puVoucherModalBody {
    max-height: calc(100vh - 16px);
    overflow: hidden;
}

/* INT vouchers are designed against the laptop workspace. On larger desktop
   monitors, keep that canvas instead of stretching the form with the viewport. */
#intVoucherModal .pu-voucher-dialog {
    margin-top: 8px;
    margin-bottom: 8px;
}

#intVoucherModal .modal-content,
#intVoucherModalBody {
    max-height: calc(100vh - 16px);
    overflow: hidden;
}

@media (min-width: 992px) and (max-width: 1599.98px) {
    #intVoucherModal .pu-voucher-dialog {
        width: 82vw !important;
        max-width: 82vw !important;
    }

    #intVoucherModal .inventory-voucher-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width: 1600px) {
    #intVoucherModal .pu-voucher-dialog {
        width: 1650px !important;
        max-width: min(1650px, calc(100vw - 16px)) !important;
    }

    #intVoucherModal .modal-content,
    #intVoucherModalBody,
    #intVoucherModal .inventory-voucher-form {
        height: min(1000px, calc(100vh - 16px)) !important;
        max-height: min(1000px, calc(100vh - 16px)) !important;
    }

    #intVoucherModal .inventory-voucher-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

#intVoucherModal .inventory-voucher-form,
#intVoucherModal .inventory-voucher-form #FormHeader,
#intVoucherModal .inventory-voucher-form #FormFooter {
    box-sizing: border-box;
    min-width: 0;
}

#intVoucherModal .inventory-voucher-form .int-voucher-header {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

#intVoucherModal .inventory-voucher-form #FormFooter {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

#intVoucherModal .inventory-voucher-form #FormFooter .voucher-footer-right {
    min-width: 0;
    max-width: 100% !important;
    flex-wrap: wrap;
}

.inventory-voucher-form .voucher-detail-table thead th {
    position: sticky;
    overflow: visible;
}

.inventory-voucher-form .int-detail-col-resizer {
    position: absolute;
    z-index: 8;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.inventory-voucher-form .int-detail-col-resizer::after {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 3px;
    width: 2px;
    background: transparent;
}

.inventory-voucher-form .int-detail-col-resizer:hover::after,
.inventory-voucher-form .int-detail-column-resizing .int-detail-col-resizer::after {
    background: #0d6efd;
}

.inventory-voucher-form .int-detail-column-resizing,
.inventory-voucher-form .int-detail-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

@media (min-width: 992px) and (max-width: 1599.98px) {
    #puVoucherModal .pu-voucher-dialog {
        width: 82vw !important;
        max-width: 82vw !important;
    }
}

@media (min-width: 1600px) {
    #puVoucherModal .pu-voucher-dialog {
        width: fit-content !important;
        max-width: min(1650px, calc(100vw - 16px)) !important;
    }
}

:is(.purchase-voucher-form, .inventory-voucher-form) {
    width: min(100%, 1400px);
    height: calc(100vh - var(--nav-height, 42px) - 12px);
    max-height: calc(100vh - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#puVoucherModal .purchase-voucher-form {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
    margin: 0 !important;
}

@media (min-width: 992px) and (max-width: 1599.98px) {
    :is(.purchase-voucher-form, .inventory-voucher-form) {
        width: 82vw !important;
        max-width: 82vw !important;
    }
}

@media (min-width: 1600px) {
    :is(.purchase-voucher-form, .inventory-voucher-form) {
        width: min(1650px, calc(100vw - 16px)) !important;
        max-width: min(1650px, calc(100vw - 16px)) !important;
    }

    .inventory-voucher-form {
        height: min(1000px, calc(100vh - 16px)) !important;
        max-height: min(1000px, calc(100vh - 16px)) !important;
    }
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormHeader {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormHeader > .card-header,
:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter {
    flex: 0 0 auto;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    min-height: 42px;
    border-top: 1px solid #d6deeb;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter .voucher-footer-left,
:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter .voucher-footer-right {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter .voucher-footer-left {
    margin-right: auto;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter .voucher-footer-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormFooter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
}

/* INT keeps the proven laptop canvas on desktop monitors. The surrounding
   workspace can grow, but the voucher itself must not stretch its fields and
   detail grid beyond the 1200px layout. */
@media (min-width: 992px) {
    .inventory-voucher-form {
        width: min(1200px, calc(100vw - 16px)) !important;
        max-width: min(1200px, calc(100vw - 16px)) !important;
    }

    #intVoucherModal .pu-voucher-dialog {
        width: min(1200px, calc(100vw - 16px)) !important;
        max-width: min(1200px, calc(100vw - 16px)) !important;
    }

    #intVoucherModal .inventory-voucher-form {
        width: 100% !important;
        max-width: 100% !important;
    }
}

:is(.purchase-voucher-form, .purchase-service-form, .inventory-voucher-form) .pu-detail-context-menu {
    position: fixed;
    display: none;
    z-index: 1085;
    min-width: 132px;
    padding: 4px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

:is(.purchase-voucher-form, .purchase-service-form, .inventory-voucher-form) .pu-detail-context-item {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 5px 8px;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
    color: #1f2937;
}

:is(.purchase-voucher-form, .purchase-service-form, .inventory-voucher-form) .pu-detail-context-item:hover:not(:disabled) {
    background: #eaf3ff;
}

:is(.purchase-voucher-form, .purchase-service-form, .inventory-voucher-form) .pu-detail-context-item:disabled {
    color: #94a3b8 !important;
    cursor: not-allowed;
}

.inventory-voucher-form .pu-detail-context-item.is-add {
    color: #0b6fbe;
}

.inventory-voucher-form .pu-detail-context-item.is-delete {
    color: #c0392b;
}

.inventory-voucher-form .pu-detail-context-item.is-add:hover:not(:disabled) {
    background: #e6f2fb;
}

.inventory-voucher-form .pu-detail-context-item.is-delete:hover:not(:disabled) {
    background: #fff0f0;
}

/* Validation returned by the INT AJAX form is displayed by the shared error
   dialog. Keep the source summary hidden and make the popup readable above
   the voucher modal. */
.int-validation-source {
    display: none !important;
}

#atfErrorDialog.int-validation-popup {
    z-index: 1110;
}

#atfErrorDialog.int-validation-popup .modal-dialog {
    width: min(420px, calc(100vw - 24px));
    max-width: 420px;
}

#atfErrorDialog.int-validation-popup .modal-content {
    overflow: hidden;
    border: 1px solid #f1aeb5;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(127, 29, 29, 0.28);
}

#atfErrorDialog.int-validation-popup .modal-header {
    min-height: 40px;
    padding: 8px 12px !important;
}

#atfErrorDialog.int-validation-popup [data-atf-error-title] {
    font-size: 14px !important;
    font-weight: 700;
}

#atfErrorDialog.int-validation-popup [data-atf-error-message] {
    margin: 10px 12px;
    padding: 10px 12px;
    border-left: 4px solid #dc3545;
    border-radius: 4px;
    background: #fff5f5;
    color: #c62828;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.45;
}

#atfErrorDialog.int-validation-popup [data-atf-error-message] > div {
    position: relative;
    padding-left: 14px;
}

#atfErrorDialog.int-validation-popup [data-atf-error-message] > div::before {
    position: absolute;
    left: 0;
    content: "•";
    color: #dc3545;
}

.inventory-voucher-form .int-validation-control-error,
.inventory-voucher-form .form-control.is-invalid,
.inventory-voucher-form .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.12rem rgba(220, 53, 69, 0.14) !important;
}

:is(.purchase-voucher-form, .inventory-voucher-form) #FormHeader > .modal-body {
    flex: 0 0 auto;
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
}

:is(.purchase-voucher-form, .inventory-voucher-form) .detail-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

:is(.purchase-voucher-form, .inventory-voucher-form) .detail-table-container .list-table-wrapper {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: auto !important;
    overscroll-behavior: contain;
}

:is(.purchase-voucher-form, .inventory-voucher-form) .detailTable {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

:is(.purchase-voucher-form, .inventory-voucher-form) .detailTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* =========================
   PURCHASE SERVICE FORM
========================= */

.purchase-service-form {
    width: min(100%, 1500px);
    height: calc(100vh - var(--nav-height, 42px) - 12px);
    max-height: calc(100vh - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.purchase-service-form #FormHeader {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.purchase-service-form #FormHeader > .card-header,
.purchase-service-form #FormFooter {
    flex: 0 0 auto;
}

.purchase-service-form #FormHeader > .modal-body {
    flex: 0 1 auto;
    max-height: min(48vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
}

.purchase-service-form .detail-table-container {
    flex: 1 1 180px;
    min-height: 140px;
    overflow: hidden;
}

.purchase-service-form .detail-table-container .list-table-wrapper {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.purchase-service-form .detailTable {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

.purchase-service-form.is-posting-partial {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 6px;
    box-sizing: border-box;
}

.purchase-service-form.is-posting-partial #FormHeader {
    height: 100%;
    display: grid !important;
    grid-template-rows: auto auto minmax(260px, 1fr) auto;
    border-radius: 4px;
    overflow: hidden;
}

.purchase-service-form.is-posting-partial #FormHeader > .card-header {
    min-height: 34px;
}

.purchase-service-form.is-posting-partial #FormHeader > .modal-body {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: visible;
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .35rem;
    align-items: flex-start;
    font-size: var(--atf-control-font-size, 12px);
}

.purchase-service-form.is-posting-partial #FormHeader > .modal-body label,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .form-label,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .col-form-label {
    font-size: var(--atf-control-font-size, 12px) !important;
}

.purchase-service-form.is-posting-partial #FormHeader > .modal-body .form-control,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .form-select,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .select2-container,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .select2-selection--single,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .select2-selection__rendered {
    font-size: var(--atf-control-font-size, 12px) !important;
}

/*
 * BaseComboFactory adds Bootstrap's form-select class to the Select2 outer
 * selection. Bootstrap paints its own SVG arrow there while Select2 already
 * renders .select2-selection__arrow, producing two arrows. Let the inner
 * Select2 arrow be the only dropdown indicator.
 */
.purchase-service-form.is-posting-partial .select2-selection.form-select,
.purchase-service-form.is-posting-partial .select2-selection.form-select-sm {
    background-image: none !important;
}

.purchase-service-form.is-posting-partial .my-card {
    box-shadow: none !important;
    margin-bottom: .2rem;
}

.purchase-service-form.is-posting-partial #FormHeader > .modal-body .card-body,
.purchase-service-form.is-posting-partial #FormHeader > .modal-body .card-footer {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
}

.purchase-service-form.is-posting-partial #FormHeader > .modal-body .form-row-group {
    margin-bottom: .15rem;
    gap: .2rem;
}

.purchase-service-form.is-posting-partial .detail-table-container {
    min-height: 0 !important;
    height: 100%;
    border-top: 1px solid #d6deeb;
    overflow: hidden !important;
    background: #fff;
}

.purchase-service-form.is-posting-partial .detail-table-container .list-table-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #fff;
    overflow: auto !important;
}

.purchase-service-form.is-posting-partial .detailTable {
    min-width: 1420px;
}

.purchase-service-form.is-posting-partial #FormFooter {
    min-height: 38px;
    border-top: 1px solid #d6deeb;
}

/* Editing from IndexPUService: keep the action bar visible inside the modal. */
#puServiceModal .pu-voucher-dialog {
    width: 78vw;
    max-width: 1500px;
    height: calc(100vh - 32px);
    margin-top: 16px;
    margin-bottom: 16px;
}

#puServiceModal .modal-content,
#puServiceModalBody {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

#puServiceModalBody > .purchase-service-form.is-index-partial {
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    padding: 4px;
}

.purchase-service-form.is-index-partial #FormHeader {
    height: auto !important;
    grid-template-rows: auto auto 324px auto;
}

.purchase-service-form.is-index-partial .detail-table-container {
    flex: 0 0 324px !important;
    height: 324px !important;
    min-height: 324px !important;
    max-height: 324px !important;
}

.purchase-service-form.is-index-partial #FormFooter {
    position: relative;
    bottom: auto;
    z-index: 20;
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    gap: .25rem;
}

.purchase-service-form #FormFooter .voucher-footer-left {
    width: auto !important;
    margin-right: auto;
    margin-left: 0 !important;
}

.purchase-service-form #FormFooter .voucher-footer-right {
    width: auto !important;
    margin-left: auto;
}

#puServiceModal:has(.purchase-service-form.is-index-partial) .pu-voucher-dialog,
#puServiceModal:has(.purchase-service-form.is-index-partial) .modal-content,
#puServiceModalBody:has(.purchase-service-form.is-index-partial) {
    height: auto;
}

/* Keep the SA service modal within the viewport so its footer never falls below the screen. */
#saServiceVoucherModal .modal-dialog {
    --sa-voucher-detail-trim: var(--atf-detail-row-height, 24px);
    height: calc(100vh - 16px - var(--sa-voucher-detail-trim));
    margin-top: 8px;
    margin-bottom: 8px;
}

#saServiceVoucherModal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

#saServiceVoucherModalBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/*
 * The SA service form is rendered directly in the modal body.  Make its
 * detail area consume the available vertical space so the action bar remains
 * pinned to the bottom of the modal instead of following the table's content.
 */
#saServiceVoucherModalBody > .sales-service-form {
    width: 100%;
    --sa-voucher-detail-trim: var(--atf-detail-row-height, 24px);
    height: 100%;
    max-height: 100%;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
}

#saServiceVoucherModalBody > .sales-service-form #FormHeader {
    display: grid !important;
    grid-template-rows: auto auto minmax(160px, 1fr) auto;
    height: 100%;
    min-height: 0;
}

#saServiceVoucherModalBody > .sales-service-form .detail-table-container,
#saServiceVoucherModalBody > .sales-service-form .detail-table-container .list-table-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

#saServiceVoucherModalBody > .sales-service-form .detail-table-container .list-table-wrapper {
    overflow: auto !important;
}

#saServiceVoucherModalBody > .sales-service-form #FormFooter {
    display: flex;
    flex: 0 0 auto;
    position: static !important;
    align-items: center;
    justify-content: flex-end;
    height: auto;
    min-height: 46px;
    max-height: none;
    margin: 0;
    padding: .35rem .75rem !important;
    box-sizing: border-box;
}

/* SA service forms keep the action footer visible without making the detail grid too short. */
.sales-service-form.is-posting-partial {
    --sa-voucher-detail-trim: var(--atf-detail-row-height, 24px);
    height: 100% !important;
    max-height: 100% !important;
}

.sales-service-form.is-posting-partial #FormHeader {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.sales-service-form .detail-table-container,
.sales-service-form.is-posting-partial .detail-table-container {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 160px !important;
    max-height: none !important;
}

.sales-service-form .detail-table-container .list-table-wrapper,
.sales-service-form.is-posting-partial .detail-table-container .list-table-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

.purchase-service-form .detailTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-sizing: border-box;
}

.purchase-service-form .detailTable .pu-service-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.purchase-service-form .detailTable .pu-service-col-resizer::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 3px;
    width: 2px;
    background: transparent;
}

.purchase-service-form .detailTable .pu-service-col-resizer:hover::after,
.purchase-service-form .detailTable.pu-service-column-resizing .pu-service-col-resizer::after {
    background: #0d6efd;
}

.purchase-service-form .detailTable.pu-service-column-resizing,
.purchase-service-form .detailTable.pu-service-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.purchase-service-form .detailTable .col-qtty,
.purchase-service-form .detailTable .col-upri {
    width: 83px !important;
    min-width: 51px !important;
    max-width: 83px !important;
}

.purchase-service-form .detailTable .col-refacc {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
}

.purchase-service-form .detailTable .col-rate {
    width: 76px !important;
    min-width: 68px !important;
    max-width: 76px !important;
}

.purchase-service-form .detailTable .col-unit {
    width: 64px !important;
    min-width: 57px !important;
    max-width: 64px !important;
}

.purchase-service-form .detailTable .drag-cell {
    cursor: grab;
    user-select: none;
}

.purchase-service-form .detailTable .drag-cell:active {
    cursor: grabbing;
}

.purchase-service-form .detailTable tr.dragging > td {
    opacity: .55;
    background: #dbeafe;
}

.purchase-service-form .detailTable .col-vat-oc,
.purchase-service-form .detailTable .col-vat-vn {
    width: 78px !important;
    min-width: 48px !important;
    max-width: 78px !important;
}

/* =========================
   GENERAL VOUCHER FORM
========================= */

.general-voucher-form {
    width: 75vw !important;
    max-width: min(1500px, calc(100vw - 16px)) !important;
    height: calc(100vh - var(--nav-height, 42px) - 12px);
    max-height: calc(100vh - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .general-voucher-form {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.general-voucher-form #FormHeader {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px;
}

.general-voucher-form #FormHeader > fieldset {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.general-voucher-form #FormHeader > .card-header,
.general-voucher-form #FormFooter {
    flex: 0 0 auto;
}

.general-voucher-form #FormHeader > fieldset > .modal-body {
    flex: 0 1 auto;
    max-height: min(48vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
}

.general-voucher-form .detail-table-container {
    flex: 1 1 auto;
    min-height: 150px;
    overflow: hidden;
    border-top: 1px solid #d6deeb;
    background: #fff;
}

.general-voucher-form .detail-table-container .list-table-wrapper {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: auto !important;
    overscroll-behavior: contain;
    background: #fff;
}

.general-voucher-form .detailTable {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
    font-size: var(--atf-detail-font-size, 11px);
}

.general-voucher-form .detailTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.general-voucher-form .detailTable th,
.general-voucher-form .detailTable td {
    vertical-align: middle;
    padding: 1px 2px;
    white-space: nowrap;
}

.general-voucher-form .detailTable .col-stt {
    width: 28px !important;
    min-width: 18px !important;
    max-width: none !important;
}

.general-voucher-form .detailTable .cell-refacc,
.general-voucher-form .detailTable .col-acc {
    width: 88px !important;
    min-width: 72px !important;
}

.general-voucher-form .detailTable .col-code {
    width: 128px !important;
    min-width: 100px !important;
}

.general-voucher-form .detailTable .col-desc {
    width: 280px !important;
    min-width: 220px !important;
}

.general-voucher-form .detailTable .col-amvn,
.general-voucher-form .detailTable .col-amoc {
    width: 105px !important;
    min-width: 82px !important;
}

.general-voucher-form .detailTable .col-project {
    width: 120px !important;
    min-width: 100px !important;
}

.general-voucher-form .detailTable .select2-container,
.general-voucher-form .detailTable .form-select,
.general-voucher-form .detailTable .form-control,
.general-voucher-form .detailTable input {
    min-height: 22px !important;
    height: 22px !important;
    font-size: var(--atf-detail-font-size, 11px) !important;
}

.general-voucher-form .detailTable tr.gv-detail-selected > td {
    background: #eaf4ff !important;
    color: #084f87;
}

.general-voucher-form .detailTable tr.dragging > td {
    opacity: .65;
    background: #f3f8ff !important;
}

.general-voucher-form #FormFooter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem;
    border-top: 1px solid #d6deeb;
    min-height: 54px;
    background: #fff;
}

.general-voucher-form #FormFooter > .col-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}

.general-voucher-form #FormFooter > .text-start {
    margin-right: auto;
}

.general-voucher-form #FormFooter > .text-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (min-width: 720px) {
    .general-voucher-form #FormHeader > fieldset > .modal-body {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .general-voucher-form #cardvc {
        flex: 0 0 22% !important;
        width: 22% !important;
        max-width: 22% !important;
    }

    .general-voucher-form #carddt {
        flex: 0 0 52% !important;
        width: 52% !important;
        max-width: 52% !important;
    }

    .general-voucher-form #cardhd {
        flex: 0 0 26% !important;
        width: 26% !important;
        max-width: 26% !important;
    }
}

/* PUService inside posting workspace: keep the voucher header visible and compact. */
@media (min-width: 720px) {
    .purchase-service-form.is-posting-partial #FormHeader > .modal-body {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .purchase-service-form.is-posting-partial #cardvc {
        flex: 0 0 22% !important;
        width: 22% !important;
        max-width: 22% !important;
        order: 1;
    }

    .purchase-service-form.is-posting-partial #carddt {
        flex: 0 0 52% !important;
        width: 52% !important;
        max-width: 52% !important;
        order: 2;
    }

    .purchase-service-form.is-posting-partial #cardhd {
        flex: 0 0 26% !important;
        width: 26% !important;
        max-width: 26% !important;
        order: 3;
    }

    .purchase-service-form.is-posting-partial #cardvc .form-row-group {
        gap: .25rem;
    }

    .purchase-service-form.is-posting-partial #cardvc .form-row-group label {
        flex: 0 0 34%;
        max-width: 34%;
        white-space: nowrap;
    }

    .purchase-service-form.is-posting-partial #cardvc .form-row-group > input,
    .purchase-service-form.is-posting-partial #cardvc .form-row-group > select,
    .purchase-service-form.is-posting-partial #cardvc .form-row-group > .col {
        flex: 1 1 66%;
        max-width: 66%;
        min-width: 0;
    }

    .purchase-service-form.is-posting-partial #cardtt > .d-flex {
        gap: .5rem;
    }

    .purchase-service-form.is-posting-partial #cardtt .card-body {
        flex: 1 1 0;
        max-width: none;
    }
}