/* Dùng chung khu CTV + admin (nạp ở shared/html): báo lỗi từng ô của form, hộp thoại xác nhận / nhập lý do. */

/* ─── Báo lỗi dưới ô nhập (shared/js/forms.js) ─── */
.field-err{display:flex;gap:7px;align-items:flex-start;margin-top:6px;font-size:12.5px;line-height:1.45;color:#BE123C;font-weight:500;animation:uiErrIn .18s ease}
.field-err::before{content:"!";flex:none;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#E11D48;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.field-err[hidden]{display:none}
@keyframes uiErrIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#F43F5E !important;box-shadow:0 0 0 3px rgba(244,63,94,.12) !important;background-color:#FFFBFC}
input[type=checkbox].is-invalid,input[type=radio].is-invalid{outline:2px solid #F43F5E;outline-offset:2px;box-shadow:none !important}
.ctrl:has(.is-invalid) > svg{color:#E11D48 !important}

/* ─── Hộp thoại (shared/js/dialog.js) ─── */
.ui-dialog-lock,.ui-dialog-lock body{overflow:hidden}
.ui-dialog{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,27,45,.48);backdrop-filter:blur(2px)}
.ui-dialog.open{display:flex;animation:uiFade .15s ease}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
.ui-dialog-box{width:100%;max-width:400px;background:#fff;border-radius:16px;padding:24px 22px 18px;box-shadow:0 24px 60px rgba(15,27,45,.25);text-align:center;font-family:inherit;animation:uiPop .18s ease}
@keyframes uiPop{from{transform:translateY(8px) scale(.98)}to{transform:none}}
.ui-dialog-icon{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;background:#E1F5FE;position:relative}
.ui-dialog-icon::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;color:#0E8FC8}
.ui-dialog[data-kind^=prompt] .ui-dialog-icon::after{content:"✎";font-size:20px}
.ui-dialog[data-kind=alert] .ui-dialog-icon::after{content:"i";font-family:Georgia,serif}
.ui-dialog.danger .ui-dialog-icon{background:#FFE4E6}
.ui-dialog.danger .ui-dialog-icon::after{content:"!";color:#E11D48}
.ui-dialog-t{font-size:15px;font-weight:600;color:#0F1B2D;line-height:1.5;white-space:pre-line}
.ui-dialog-in:empty{display:none}
.ui-dialog-in{margin-top:14px}
.ui-dialog-input{width:100%;padding:11px 13px;border:1.5px solid #E6EAF0;border-radius:10px;font:inherit;font-size:14px;color:#0F1B2D;outline:0;resize:vertical;text-align:left}
.ui-dialog-input:focus{border-color:#28B8F8;box-shadow:0 0 0 4px rgba(40,184,248,.12)}
.ui-dialog-err{margin-top:8px;font-size:12.5px;color:#BE123C;text-align:left}
.ui-dialog-actions{display:flex;gap:10px;margin-top:20px}
.ui-btn{flex:1;padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .12s}
.ui-btn.ghost{background:#fff;border-color:#E6EAF0;color:#1F2D44}
.ui-btn.ghost:hover{background:#F1F4F8}
.ui-btn.primary{background:#0E8FC8;color:#fff}
.ui-btn.primary:hover{background:#0B7AAB}
.ui-dialog.danger .ui-btn.primary{background:#E11D48}
.ui-dialog.danger .ui-btn.primary:hover{background:#BE123C}
.ui-btn[hidden]{display:none}

/* ─── Dùng chung: ô nhập ≥16px trên mobile (iOS Safari không tự zoom khi focus) ─── */
@media (max-width:600px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important}}
/* ─── Nút đang gửi (shared/js/forms.js khoá sau khi submit) ─── */
button.is-loading,input.is-loading{position:relative;opacity:.7;cursor:progress !important;pointer-events:none}
button.is-loading::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:uiSpin .7s linear infinite;vertical-align:-2px;flex:none}
@keyframes uiSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.is-loading::after{animation-duration:1.6s}}
/* ─── Anchor (#lich-su, #mat-khau...) không bị topbar dính che ─── */
[id]{scroll-margin-top:84px}
/* ─── Toast dùng chung (CTV + admin): có nút đóng, bấm được ─── */
.toast{display:flex;align-items:flex-start;gap:10px;max-width:min(420px,calc(100vw - 32px));pointer-events:auto;line-height:1.45}
.toast .toast-msg{flex:1}
.toast .toast-x{flex:none;width:28px;height:28px;margin:-5px -8px -5px 0;border:0;border-radius:7px;background:transparent;color:inherit;opacity:.75;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:inherit}
.toast .toast-x:hover{opacity:1;background:rgba(255,255,255,.12)}
.toast.error{background:#BE123C}
.toast:not(.show){pointer-events:none}

/* Anchor (#lich-su, #mat-khau…) không bị topbar sticky che */
[id]{scroll-margin-top:84px}