/*Đây là file site.formModule.css*/
:root {
    --row-font-size: 12px;
    /* ========== Cố định chiều cao dòng chi tiết & ép combobox nằm gọn trong ô ========== */
    --dtl-row-h: 24px; /* chỉnh 26–30 tuỳ mắt */
    --input-height: 28px;
    --acc-rows: 10; /* số dòng mong muốn thấy */
    --acc-row-h: var(--dtl-row-h); /* chiều cao 1 dòng detail (khớp .no-border / .is-compact) */
    --dtl-head-h: 24px; /* chiều cao header (th) ~ tuỳ giao diện của bạn */
    --dtl-foot-h: 28px; /* chiều cao header (th) ~ tuỳ giao diện của bạn */
    --bg-primary: #0666c1;
}

/* Đảm bảo HTML và BODY chiếm toàn bộ chiều cao và không có padding/margin mặc định */
html, body {
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    /*display: flex;*/ /* Bật flexbox cho body để quản lý layout tổng thể */
    /*flex-direction: column;*/ /* Xếp các phần tử chính theo cột */
    /*overflow: hidden;*/ /*Quan trọng: Ngăn thanh cuộn chính của trang */
    height: auto;
    overflow: auto; /* đảm bảo trang có thể cuộn dọc */
}

.fullscreen-form {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    padding: 1rem;
    z-index: 1055; /* cao hơn modal Bootstrap */
    background: white;
    overflow: auto;
}



/* Container chính của view (bao quanh toàn bộ nội dung của trang Index) */
.main-container-card { /* Đây là .card.shadow ở cấp cao nhất */
    height: calc(100vh - 60px); /* Trừ chiều cao header/footer nếu cần */
    /*flex: 1;*/ /* Cho phép nó chiếm hết chiều cao còn lại của body */
    display: flex; /* Bật flexbox để header và body của card xếp cột */
    flex-direction: column;
    /*overflow: hidden;*/ /* Quan trọng: Ngăn nội dung con tràn ra ngoài card */
    /*margin: 0;*/ /* Đảm bảo không có margin nào đẩy nó vào */
    /*border: none;*/ /* Bỏ border của card nếu bạn muốn nó tràn sát mép */
    /*border-radius: 0;*/ /* Bỏ bo góc nếu bạn muốn nó tràn sát mép */
    /*box-shadow: none;*/ /* Bỏ shadow nếu bạn muốn nó tràn sát mép */
    /*overflow-y: auto;*/ /* THANH CUỘN DỌC CHỈ Ở ĐÂY */
    /*overflow-x: auto;*/ /* THANH CUỘN NGANG CHỈ Ở ĐÂY */
}
.card-header, .form-header {
    flex: 0 0 auto;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0 !important;
}

.card-body.main-content-flex-container {
    flex: 1 1 auto;
    display: flex;
    overflow: visible !important; /* trước đó là hidden */
}

    .main-container-card .card-header {
        flex-shrink: 0; /* Đảm bảo header không bị co lại */
        padding: 5px 5px; /* Điều chỉnh padding cho header */
        background-color: #f8f9fa; /* Màu nền cho header */
        border-bottom: 1px solid #e9ecef; /* Viền dưới */
    }

/* Bố cục 10% (lọc) và 90% (nội dung chính) */
.main-content-flex-container { /* Đây là .card-body của bạn */
    display: flex;
    flex: 1; /* Cho phép nó chiếm không gian còn lại trong .main-container-card */
    overflow: hidden; /* Quan trọng: Ngăn các con của nó tràn ra ngoài */
    padding: 0; /* Bỏ padding ở đây để các phần tử con tự quản lý padding */
    /*overflow-y: auto;*/ /* THANH CUỘN DỌC CHỈ Ở ĐÂY */
    /*overflow-x: auto;*/ /* THANH CUỘN NGANG CHỈ Ở ĐÂY */
}

.filter-sidebar { /* 10% - Content lọc */
    width: 10%;
    min-width: 180px;
    max-width: 250px;
    padding: 15px;
    border-right: 1px solid #ccc;
    /*box-sizing: border-box;*/ /* QUAN TRỌNG: padding và border không làm tăng width */
    overflow-y: auto; /* Cho phép cuộn nếu form lọc dài */
    flex-shrink: 0;
    background-color: #f0f2f5;
}

.main-table-content { /* 90% - Content chính */
    flex: 1; /* Cho phép nó chiếm không gian còn lại */
    display: flex; /* Kích hoạt flexbox để quản lý div.card bên trong */
    flex-direction: column; /* Xếp div.card theo cột */
    
}


/* 4) Đảm bảo wrapper ngang của Bootstrap không cướp cuộn dọc */
.list-table-wrapper > .table-responsive {
    overflow-y: visible !important; /* chỉ cuộn ngang nếu cần */
}



/* Bảng và phần chi tiết (div.card bên trong main-table-content) */
.table-detail-card-flex {  /*Đây là div.card bao quanh .table-responsive và .listDetail */
    display: flex;
    flex-direction: column;  /*Bảng trên, chi tiết dưới */
    flex: 1;  /*Quan trọng: Cho phép card này mở rộng để lấp đầy main-table-content */
    overflow: hidden;  /*Đảm bảo nội dung con có thể cuộn mà không tràn ra ngoài card */
    border: none; /* Bỏ border của card nếu bạn muốn nó là một phần của bố cục */
    box-shadow: none; /* Bỏ shadow */
    background-color: transparent; /* Bỏ màu nền của card nếu không cần */
    padding: 0; /* Bỏ padding ở đây, table-responsive và listDetail sẽ có padding riêng */
}


.form-row-group > select,
.form-row-group > .form-select {
    flex: 1 1 auto !important;
    width: 100% !important;
}



/* 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: 13px;
    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 tổng cố định ở cuối */
.total-row-fixed {
    display: flex; /* Kích hoạt Flexbox */
    justify-content: space-between; /* Đẩy các phần tử con ra hai rìa đối diện */
    align-items: center; /* Căn giữa theo chiều dọc */
    /* Các style cố định ở cuối như đã có */
    flex-shrink: 0;
    background-color: #f0f2f5;
    border-top: 2px solid #ccc;
    padding: 8px 0px; /* Padding tổng thể */
    padding-right: 15px; /* Padding tổng thể */
    font-size: 14px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.detail-title-left-align {
    /* Mặc định flex item sẽ căn trái, nhưng có thể thêm text-align nếu nội dung nhỏ hơn div */
    text-align: left;
    flex-grow: 0; /* Ngăn nó giãn ra */
    flex-shrink: 0; /* Ngăn nó co lại */
    /* Có thể điều chỉnh width nếu cần giới hạn không gian */
}

.total-amounts-right-align {
    display: flex; /* Bật Flexbox cho khối này để các tổng được căn chỉnh */
    align-items: center; /* Căn giữa theo chiều dọc các mục con */
    flex-grow: 0; /* Ngăn nó giãn ra */
    flex-shrink: 0; /* Ngăn nó co lại */
    /* Có thể thêm gap giữa các cột nếu muốn */
    /* gap: 10px; */
}

    /* Điều chỉnh vị trí các cột trong dòng tổng để khớp với bảng */
    .total-row-fixed .col-8 {
        width: 120px;
    }




/* Định nghĩa chiều rộng, min-width và max-width cụ thể cho từng cột */
.col-stt {
    width: 10px !important;
    text-align: center !important;
}

.col-item-code,
.col-code {
    width: 120px !important;
    min-width: 60px;
}

.col-item-name,
.col-name {
    width: 250px; /* Ví dụ: Tên hàng */
    min-width:150px;
    padding-left: 3px !important;
}

.col-unit {
    width: 60px; /* ĐVT */
    text-align: center !important;
}

.col-acc ,col-unitcombo {
    width: 80px;
    min-width:40px;
    text-align: center !important;
}
.col-invNo {
    width: 80px;
    min-width: 60px;
    text-align: center !important;
}
.col-desc {
    width: 250px; /* Diễn giải */
    min-width:150px;
    margin-left: 3px !important;
    text-align: left !important;
}

.col-unitp, .col-upri, .col-quantity, .col-qtty,
.col-amoc, .col-amount, .col-amvn {
    min-width: 80px;
    max-width: 130px;
    text-align: right !important;
    margin-right: 6px !important;
}


.col-tax-rate,
.col-rate {
    min-width: 40px;
    text-align: center !important;
}


/*Nút*/
.btn-xs {
    padding: 0.25rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
}


.form-control,
.form-select ,
.form-select-sm {
    max-width: 100%; /* input không vượt khung */
    font-size: var(--row-font-size) !important;
    border-radius: 4px;
    height: var(--input-height);
    
}

/* Làm input gọn hơn mà KHÔNG đổi font-size */
    .form-control .is-compact {
        /*line-height: 1;*/ /* lh-1  */
        margin-top: 0; /* my-0  */
        margin-bottom: 0;
        max-width: 100%; /* input không vượt khung */        
    }

.is-titlelabel {
    padding: .15rem .4rem; /* mặc định .375rem .75rem -> gọn hơn */
    line-height: 1.2; /* bớt cao nhưng chữ giữ nguyên */
    height: auto; /* override height calc của Bootstrap */
    font-size: 12px; /* Giữ nguyên font-size */
}

/* Tối ưu riêng cho type=date (chừa chỗ icon lịch) */
/*.form-control .is-compact[type="date"] {*/
    /*padding-right: .35rem;*/
/*}*/

/*.col-xl-2-5 {
    flex: 0 0 20.8333%;*/ /* tương đương 2.5 cột (2.5/12 * 100) */
    /*max-width: 20.8333%;
}

.col-xl-2-2 {
    flex: 0 0 18.3333%;*/ /* tương đương 2.2 cột (    ) */
    /*max-width: 18.3333%;
}*/