/*dành cho:

Voucher
Form nhập liệu
Phiếu thu
Phiếu chi
Mua hàng
Bán hàng*/

/*file site.formModule.css*/

:root {
    --label-font-size: var(--atf-control-font-size, 12px);
    --input-font-size: var(--label-font-size);
    --row-font-size: var(--atf-control-font-size, 12px);
    --detail-font-size: var(--atf-detail-font-size, 11px);
    --label-font-color: #2a0c79;
    /* ========== Cố định chiều cao dòng chi tiết & ép combobox nằm gọn trong ô ========== */
    
    --input-height: var(--atf-control-height, 28px);
    --detail-rows: 5; /* số dòng mong muốn thấy */
    --detail-row-h: var(--atf-detail-row-height, 24px); /* chỉnh 26–30 tuỳ mắt (khớp .no-border / .is-compact) */
    --detail-head-h: var(--atf-detail-head-height, 24px); /* chiều cao header (th) ~ tuỳ giao diện của bạn */
    --detail-foot-h: var(--atf-detail-foot-height, 28px); /* chiều cao footer (th) ~ tuỳ giao diện của bạn */
    --bg-primary: #0666c1;
    --br-header-color: #a3d2fa;
    --row-height: var(--atf-control-height, 28px);
    --border-color: 1px solid #d0d0d0; /* Viền nhạt hơn cho input */
}


/* Đả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 */
    overflow: hidden; /* vùng nội dung con sẽ tự quản lý scroll */
}


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


.form-modal .my-card {
    font-size: var(--label-font-size);
    margin-bottom: 0.25rem;
    border-radius: 4px;
}

    .form-modal .my-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 */
        border: 1px solid #e9ecef; /* Viền dưới */
        font-weight: 600 !important;
        background-color: var(--br-header-color) !important;
    }

.form-modal .card-detail .card-header {
    flex-shrink: 0;  
    font-weight: 600 !important;
    font-size: var(--label-font-size) !important;
    color: var(--label-font-color) !important;
    padding: 3px !important;  
    margin: 3px !important;  
}

    .form-modal .my-card .card-footer {
        flex-shrink: 0; /* Đảm bảo không bị co lại */
        padding: 0px 3px !important; /* Điều chỉnh padding */
        padding-top: 5px !important;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
        border-bottom: 1px solid #e9ecef; /* Viền dưới */
        font-weight: bold !important;
    }

.form-modal .form-row-group {
    display: flex; /*Label và input nằm cùng dòng*/
    align-items: center;
    gap: 5px; /* khoảng cách giữa label và input */
    margin-bottom: 0.25rem;
    flex-wrap: nowrap; /* Không cho phép label và input xuống dòng */
}

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


    .form-modal .form-control,
    .form-modal .form-select {
        padding-left: 4px !important; /* Thụt lề trái */
        padding-right: 4px !important; /* Thụt lề phải */
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .form-modal .form-row-group > input:not([type="checkbox"]):not([type="radio"]),
    .form-modal .form-row-group > select {
        font-size: var(--input-font-size);
        margin-bottom: 0;
        white-space: nowrap; /*Không cho phép chữ xuống dòng;*/
        margin: 0 0 !important; /* Căn giữa input và select */
        border: var(--border-color);
        border-radius: 4px !important;
    }


.form-modal .form-row-group label {
    margin-bottom: 0;
    white-space: nowrap; /*Không cho phép xuống dòng font-weight: bold;*/
    padding: 0 !important; /* Padding cho label */
    /*max-width: 120px;
        min-width: 80px;*/
    font-weight: 600;
    font-size: var(--label-font-size);
    color: var(--label-font-color);
}

.form-row-group > label {
    flex: 0 0 35%; /* Không co, không giãn, cứng 30% */
    max-width: 100px; /* Đảm bảo không bị vỡ nếu nội dung dài */
    margin-bottom: 0; /* Xoá margin mặc định của label */
    padding-right: 10px; /* Tạo khoảng thở với ô input */
}

/* Định nghĩa cho Input (phần còn lại) */
.form-row-group > .form-control {
    flex: 1;  /*Chiếm toàn bộ không gian còn lại (70%)*/ 
    width: 100% !important;  /*Đảm bảo input full chiều rộng cho phép */
    font-size: var(--input-font-size);
    height: var(--input-height);
}

.form-row-group select,
.form-row-group .select2-container {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
}

.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: var(--atf-control-font-size, 12px); /* Giữ nguyên font-size */
}



.myform-group input,
.myform-group select,
.myform-group textarea {
    font-size: var(--input-font-size);
    padding: 3px 4px !important;
}





    .no-border {
        border: none !important;
        box-shadow: none !important;  loại bỏ shadow nếu có focus 
    }

    .no-border:focus {
        border: none !important;
        box-shadow: none !important;
    }



/*Bỏ dấu tăng giảm number*/
/* Chrome, Safari, Edge */
#detailBody input[type=number]::-webkit-outer-spin-button, #detailBody input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#detailBody input[type=number] {
    -moz-appearance: textfield;
}