/*
 * [JV-FORMS] Đồng bộ chiều cao input / select / nút toàn hệ thống.
 *
 * Nguồn quyết định là cài đặt user_auth.action_bar_mini_size, đổ ra thuộc tính
 * data-ui-size trên <html> (master.blade.php):
 *   - data-ui-size="sm": chế độ tối ưu diện tích -> mọi control cỡ nhỏ (cỡ *-sm).
 *   - data-ui-size="md": chế độ thường          -> mọi control cỡ chuẩn Velzon,
 *     kể cả chỗ blade lỡ hardcode form-control-sm / form-select-sm / btn-sm.
 *
 * Cách hoạt động: một bộ token --jv-ctl-* đặt trên <html>, đổi giá trị theo
 * data-ui-size; các rule bên dưới chỉ tham chiếu token nên cả hai chế độ dùng
 * chung một bộ selector. File này phải nạp SAU bootstrap/app/custom/fixed và
 * TRƯỚC izy-table.css (xem master.blade.php).
 *
 * Ranh giới cố ý:
 *   - Control nằm trong <table> (inline edit, bảng nhập liệu accounting, lọc
 *     hf_* trên header dispatch-cont) KHÔNG bị đụng tới: mật độ trong bảng do
 *     css riêng của bảng quyết định.
 *   - .form-control-lg / .form-select-lg / .btn-lg giữ nguyên (cỡ lớn có chủ đích).
 *   - Thêm class .jv-size-keep vào một control, hoặc .jv-size-native vào cả vùng/form,
 *     để giữ nguyên kích thước native của Velzon và thoát khỏi hệ này.
 *   - Selector chủ ý giữ specificity thấp (bọc :where) để css riêng của trang
 *     dạng ".khu-vuc .form-control" vẫn thắng được khi cần.
 */

:root {
    --jv-ctl-pad-y: .5rem;
    --jv-ctl-pad-x: .9rem;
    --jv-ctl-font: var(--vz-font-base, .8125rem);
    --jv-ctl-radius: var(--vz-border-radius, .25rem);
    /* Chiều cao chuẩn của 1 control: chữ * line-height 1.5 + padding + viền.
       Chỉ đúng khi các token trên cùng khai báo ở <html>. */
    --jv-ctl-height: calc(var(--jv-ctl-font) * 1.5 + var(--jv-ctl-pad-y) * 2 + var(--vz-border-width, 1px) * 2);
}

html[data-ui-size="sm"] {
    --jv-ctl-pad-y: .25rem;
    --jv-ctl-pad-x: .5rem;
    --jv-ctl-font: calc(var(--vz-font-base, .8125rem) * .875);
    --jv-ctl-radius: var(--vz-border-radius-sm, .2rem);
}

/* ============ Input & select thuần Bootstrap ============ */

:where(html[data-ui-size]) .form-control:where(:not(.form-control-lg, .jv-size-keep, table *, .jv-size-native *)),
:where(html[data-ui-size]) .form-select:where(:not(.form-select-lg, .jv-size-keep, table *, .jv-size-native *)),
:where(html[data-ui-size]) .input-group-sm > :where(.form-control, .form-select) {
    min-height: var(--jv-ctl-height);
    padding: var(--jv-ctl-pad-y) var(--jv-ctl-pad-x);
    font-size: var(--jv-ctl-font);
    border-radius: var(--jv-ctl-radius);
}

/* Chừa chỗ cho mũi tên của select (icon nền 16px neo bên phải). */
:where(html[data-ui-size]) .form-select:where(:not(.form-select-lg, .jv-size-keep, table *, .jv-size-native *)),
:where(html[data-ui-size]) .input-group-sm > .form-select {
    padding-right: calc(var(--jv-ctl-pad-x) + 1.8rem);
    background-position: right var(--jv-ctl-pad-x) center;
}

/* Nút chọn file bên trong input[type=file]: bám theo padding mới của ô. */
:where(html[data-ui-size]) .form-control:where(:not(.form-control-lg, .jv-size-keep, table *, .jv-size-native *))::file-selector-button {
    padding: var(--jv-ctl-pad-y) var(--jv-ctl-pad-x);
    margin: calc(var(--jv-ctl-pad-y) * -1) calc(var(--jv-ctl-pad-x) * -1);
    margin-inline-end: var(--jv-ctl-pad-x);
}

:where(html[data-ui-size]) .input-group-text:where(:not(.jv-size-keep, table *, .jv-size-native *)) {
    padding: var(--jv-ctl-pad-y) var(--jv-ctl-pad-x);
    font-size: var(--jv-ctl-font);
    border-radius: var(--jv-ctl-radius);
}

/* ============ Nút bấm ============ *
 * Bootstrap 5 tính cỡ nút qua biến --vz-btn-*, nên chỉ cần trỏ biến về token.
 * .btn-sm hardcode trong blade cũng bị kéo về cỡ chung (rule này đứng sau
 * bootstrap.min.css nên thắng khi cùng specificity). */
:where(html[data-ui-size]) .btn:where(:not(.btn-lg, .btn-close, .jv-size-keep, table *, .jv-size-native *)) {
    --vz-btn-padding-y: var(--jv-ctl-pad-y);
    --vz-btn-padding-x: var(--jv-ctl-pad-x);
    --vz-btn-font-size: var(--jv-ctl-font);
    --vz-btn-border-radius: var(--jv-ctl-radius);
}

/* Nút vuông chỉ-icon: ép đúng bằng chiều cao control để đứng cạnh input không lệch. */
:where(html[data-ui-size]) .btn-icon:where(:not(.btn-lg, .jv-size-keep, table *, .jv-size-native *)) {
    height: var(--jv-ctl-height);
    width: var(--jv-ctl-height);
    padding: 0;
}

/* ============ Select2 ============ *
 * select2.min.css mặc định cao 28px, lệch hẳn với form-control 37.5px của
 * Velzon — thủ phạm chính của nạn "ô cao ô thấp". Kéo về token + màu viền/nền
 * theo biến --vz-* cho khớp input thường (và đúng dark mode). */
:where(html[data-ui-size]) .select2-container:where(:not(table *, .jv-size-native *)) {
    font-size: var(--jv-ctl-font);
}

:where(html[data-ui-size]) .select2-container .select2-selection--single:where(:not(table *, .jv-size-native *)) {
    height: var(--jv-ctl-height);
}

:where(html[data-ui-size]) .select2-container--default .select2-selection--single:where(:not(table *, .jv-size-native *)),
:where(html[data-ui-size]) .select2-container--default .select2-selection--multiple:where(:not(table *, .jv-size-native *)) {
    background-color: var(--vz-input-bg-custom, #fff);
    border: var(--vz-border-width, 1px) solid var(--vz-input-border-custom, #aaa);
    border-radius: var(--jv-ctl-radius);
}

:where(html[data-ui-size]) .select2-container--default .select2-selection--single .select2-selection__rendered:where(:not(table *, .jv-size-native *)) {
    line-height: calc(var(--jv-ctl-height) - var(--vz-border-width, 1px) * 2);
    padding-left: var(--jv-ctl-pad-x);
    color: var(--vz-body-color, #212529);
}

:where(html[data-ui-size]) .select2-container--default .select2-selection--single .select2-selection__arrow:where(:not(table *, .jv-size-native *)) {
    height: calc(var(--jv-ctl-height) - var(--vz-border-width, 1px) * 2);
}

:where(html[data-ui-size]) .select2-container .select2-selection--multiple:where(:not(table *, .jv-size-native *)) {
    min-height: var(--jv-ctl-height);
}

/* Multi: căn hàng chip vào giữa đúng chiều cao token (1 hàng chip = cao bằng input
   thường; nhiều hàng thì hộp tự giãn). Skin Velzon (app.min.css) cho chip
   padding:3px không viền -> chip cao = chữ*1.5 + 6px, margin-top = pad-y - 3px
   là ra giữa. Ul mặc định inline-block nên hở ~5px khoảng baseline dưới chân —
   flow-root vừa khử khoảng hở vừa vẫn ôm được chip float. */
:where(html[data-ui-size]) .select2-container--default .select2-selection--multiple .select2-selection__rendered:where(:not(table *, .jv-size-native *)) {
    display: flow-root;
    padding-top: 0;
    padding-bottom: 0;
}

:where(html[data-ui-size]) .select2-container--default .select2-selection--multiple .select2-selection__choice:where(:not(table *, .jv-size-native *)) {
    margin-top: calc(var(--jv-ctl-pad-y) - 3px);
    line-height: 1.5;
    font-size: var(--jv-ctl-font);
}

:where(html[data-ui-size]) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field:where(:not(table *, .jv-size-native *)) {
    margin-top: var(--jv-ctl-pad-y);
    height: calc(var(--jv-ctl-font) * 1.5);
    font-size: var(--jv-ctl-font);
}

/* ============ Tom Select (skin bootstrap5) ============ *
 * Skin sm của tom-select có specificity (0,2,0) nên rule ở đây phải nặng hơn
 * :where — dùng thẳng html[data-ui-size] để cả .form-select-sm cũng về token. */
html[data-ui-size] .ts-wrapper .ts-control:where(:not(table *, .jv-size-native *)) {
    min-height: calc(var(--jv-ctl-height) - var(--vz-border-width, 1px) * 2);
    padding: var(--jv-ctl-pad-y) var(--jv-ctl-pad-x);
    font-size: var(--jv-ctl-font);
    border-radius: var(--jv-ctl-radius);
}

html[data-ui-size] .ts-wrapper:where(.form-select-sm, .form-control-sm):where(:not(table *, .jv-size-native *)) {
    min-height: var(--jv-ctl-height);
}

/* Wrapper .form-select bị skin ép padding:0 nên mũi tên nền không còn chỗ —
   chừa chỗ ở ô control bên trong (giống padding-right của .form-select thường). */
html[data-ui-size] .ts-wrapper.form-select .ts-control:where(:not(table *, .jv-size-native *)) {
    padding-right: calc(var(--jv-ctl-pad-x) + 1.8rem);
}