/* =================================================================
   VTCore.dialog — cặp với js/vt-core/vt-dialog.js. Không phụ thuộc CSS DevExtreme.

   Màu/hình lấy từ biến (mặc định ở :root bên dưới). Theme đè bằng sổ theme vtui-theme.css
   (--vtui-dialog-*) hoặc đè thẳng --vt-dialog-*. Cặp màu NÚT (--vtd-bg-*, --vtd-fg-*,
   --vtd-inverse-*, --vtd-text-*) do VTUI.updateContrastColors tính để đạt WCAG 4,5 — CSS này chỉ ĐỌC.

   SỐ ĐO lấy từ DevExtreme 25.2 (theme Fluent, đo trên app thật 14/10/2026) để giao diện không đổi:
   chữ 12px/16px · tiêu đề cao 37px (padding 0 16, đường kẻ dưới) · thân padding 12×16 · nút cao 24px
   căn GIỮA · hộp co theo nội dung · bóng 0 0 8px/0 32px 64px · màn che 32%.
   Khác DevExtreme có chủ ý: hộp tối đa 720px (DevExtreme kéo tới sát hai mép màn hình) và nút cao 44px
   toàn bề ngang trên điện thoại (nút 24px quá nhỏ để chạm).
   ================================================================= */
:root {
    /* Mặc định = Fluent xanh sáng. Từng theme ĐÈ bằng khối html[data-vt-theme="…"] trong vt-tokens.css (sinh từ số đo thật). */
    --vt-dialog-bg: #fff;
    --vt-dialog-fg: #242424;
    --vt-dialog-radius: 8px;
    --vt-dialog-shadow: 0 0 8px rgba(0, 0, 0, .2), 0 32px 64px rgba(0, 0, 0, .24);
    --vt-dialog-shade: rgba(0, 0, 0, .32);
    --vt-dialog-border: 0 none;
    --vt-dialog-title-bg: transparent;
    --vt-dialog-title-fg: inherit;
    --vt-dialog-title-weight: 500;
    --vt-dialog-title-border: 1px solid #e0e0e0;
}

.vt-dialog-host {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: var(--vt-dialog-shade);
    opacity: 0;
    transition: opacity .16s ease;
}
.vt-dialog-host--in      { opacity: 1; }
.vt-dialog-host--leaving { opacity: 0; }

.vt-dialog {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: fit-content;
    min-width: min(220px, 100%);
    max-width: min(100%, 720px);
    max-height: 90vh;
    background: var(--vt-dialog-bg);
    color: var(--vt-dialog-fg);
    border: var(--vt-dialog-border);
    border-radius: var(--vt-dialog-radius);
    box-shadow: var(--vt-dialog-shadow);
    font-size: 12px;
    line-height: 16px;
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
    outline: none;
}
.vt-dialog-host--in .vt-dialog { transform: none; }

.vt-dialog__title {
    display: flex;
    align-items: center;
    box-sizing: content-box;       /* cao = 36 + độ dày đường kẻ (DevExtreme: 37 Fluent, 39 Neo) */
    min-height: 36px;
    padding: 0 16px;
    background: var(--vt-dialog-title-bg);
    border-bottom: var(--vt-dialog-title-border);
    font-size: 16px;               /* nhãn tiêu đề của DevExtreme 16px (thân chữ 12px) */
    font-weight: var(--vt-dialog-title-weight);
    line-height: 20px;
    color: var(--vtui-dialog-title-color, var(--vt-dialog-title-fg));
}
.vt-dialog__body {
    padding: 12px 16px;
    color: var(--vt-dialog-body-fg, inherit);
    overflow: auto;
    white-space: pre-wrap;         /* text thuần: giữ xuống dòng; html:true có thẻ riêng nên không bị ảnh hưởng nhiều */
    word-break: break-word;
}
.vt-dialog__body > * { white-space: normal; }
.vt-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--vt-dbtn-gap, 8px);
    min-height: var(--vt-dialog-actions-minh, 36px);   /* DevExtreme: thanh nút cao 36 (nút 24 căn giữa) + 12 đệm dưới = 48 */
    padding: var(--vt-dialog-actions-pad, 0 16px 12px);
    border-top: var(--vt-dialog-actions-border, 0 none);
    box-sizing: content-box;
}

.vt-dialog__btn {
    font: inherit;
    font-size: 12px;
    font-weight: var(--vt-dbtn-weight, 500);
    line-height: 16px;
    box-sizing: border-box;
    height: var(--vt-dbtn-height, 24px);
    min-width: var(--vt-dbtn-minw, 24px);
    padding: 0 var(--vt-dbtn-padx, 8px);   /* nút viền: + viền 1px; nút đặc: không viền — đúng bề ngang DevExtreme */
    border-radius: var(--vt-dbtn-radius, 4px);
    cursor: pointer;
    outline: none;                 /* DevExtreme không vẽ outline: trạng thái focus thể hiện bằng đổi nền/vòng của theme */
    transition: background-color .12s ease, border-color .12s ease;
    /* Kiểu VIỀN (nút phụ) như dxButton outlined: chữ + viền theo màu chính, đã ép đạt tương phản 4,5. */
    color: var(--vt-dbtn-o-fg, var(--vtd-text-primary, var(--dx-color-primary, #0f6cbd)));
    background: var(--vt-dbtn-o-bg, transparent);
    border: var(--vt-dbtn-o-border, 1px solid var(--vtd-text-primary, var(--dx-color-primary, #0f6cbd)));
    box-shadow: var(--vt-dbtn-o-shadow, none);
}
.vt-dialog__btn:hover,
.vt-dialog__btn:focus {
    background-color: var(--vt-dbtn-o-state-bg, color-mix(in srgb, var(--vtd-text-primary, var(--dx-color-primary, #0f6cbd)) 10%, transparent));
    color: var(--vt-dbtn-o-state-fg, var(--vt-dbtn-o-fg, var(--vtd-text-primary, var(--dx-color-primary, #0f6cbd))));
}
.vt-dialog__btn:focus { outline: var(--vt-dbtn-focus-outline, none); box-shadow: var(--vt-dbtn-focus-shadow, var(--vt-dbtn-o-shadow, none)); }

.vt-dialog__btn--primary {
    background: var(--vt-dbtn-p-bg, var(--vtd-bg-primary, var(--dx-color-primary, #0f6cbd)));
    border: var(--vt-dbtn-p-border, 0 none);
    box-shadow: var(--vt-dbtn-p-shadow, none);
    color: var(--vt-dbtn-p-fg, var(--vtd-fg-primary, #fff));
}
.vt-dialog__btn--primary:hover,
.vt-dialog__btn--primary:focus {
    background-color: var(--vt-dbtn-p-state-bg, color-mix(in srgb, var(--vtd-bg-primary, var(--dx-color-primary, #0f6cbd)) 88%, var(--vtd-inverse-primary, #000)));
    color: var(--vt-dbtn-p-fg, var(--vtd-fg-primary, #fff));
}
.vt-dialog__btn--primary:focus { box-shadow: var(--vt-dbtn-focus-shadow, var(--vt-dbtn-p-shadow, none)); }
.vt-dialog__btn--danger {
    background: var(--vt-dbtn-d-bg, var(--vtd-bg-danger, var(--dx-color-danger, #c50f1f)));
    border: var(--vt-dbtn-d-border, 0 none);
    box-shadow: var(--vt-dbtn-d-shadow, none);
    color: var(--vt-dbtn-d-fg, var(--vtd-fg-danger, #fff));
}
.vt-dialog__btn--danger:hover,
.vt-dialog__btn--danger:focus {
    background-color: var(--vt-dbtn-d-state-bg, color-mix(in srgb, var(--vtd-bg-danger, var(--dx-color-danger, #c50f1f)) 88%, var(--vtd-inverse-danger, #000)));
    color: var(--vt-dbtn-d-fg, var(--vtd-fg-danger, #fff));
}
.vt-dialog__btn--danger:focus { box-shadow: var(--vt-dbtn-focus-shadow, var(--vt-dbtn-d-shadow, none)); }

/* Điện thoại: nút chiếm trọn bề ngang, cao 44px (đủ cho ngón tay), nút ĐẦU (nút chính) nằm TRÊN. */
@media (max-width: 480px) {
    .vt-dialog { width: 100%; font-size: 14px; line-height: 20px; }
    .vt-dialog__title { font-size: 16px; }
    .vt-dialog__actions { flex-direction: column; }
    .vt-dialog__btn { width: 100%; height: 44px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .vt-dialog-host, .vt-dialog { transition: none; transform: none; }
}