/* ══════════════════════════════════════════════════════════════════════
 * assets/a11y.css — lớp tiếp cận TỐI GIẢN cho các trang TỰ DỰNG HTML.
 *
 * 18 view (auth/*, public/sign_contract*, public/design_service) không đi qua
 * layouts/{admin,tenant,ctv}.php nên không nhận design-tokens.css — tức không
 * có vòng focus, không có prefers-reduced-motion, không có .sr-only.
 *
 * KHÔNG nạp design-tokens.css vào các trang đó: tệp ấy chứa 64 khối style
 * thành phần (.btn-sm, .md-segmented, .md-snackbar…) và sẽ đổi giao diện
 * những trang vốn được thiết kế mà không có nó. Tệp này CHỈ chứa quy tắc
 * tiếp cận, trung tính về thị giác.
 * ══════════════════════════════════════════════════════════════════════ */

.sr-only,
.visually-hidden{
    position:absolute !important;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
    position:absolute; left:-9999px; top:0; z-index:9999;
    background:#0f172a; color:#fff; padding:12px 20px;
    border-radius:0 0 8px 0; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0 }

/* Vòng focus. Mọi trang tự dựng đều nền SÁNG (#f0f4ff … #e2e8f0) nên
   #0b5ed7 đạt 5.3–5.8:1. Trang nào có vùng tối tự đặt lại --md-focus-ring. */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:2px solid var(--md-focus-ring, #0b5ed7);
    outline-offset:2px;
    border-radius:4px;
}
:where(a,button,input,select,textarea,summary):focus:not(:focus-visible){ outline:none }

/* Bootstrap 5.3 cũng đặt outline:0 cho điều khiển biểu mẫu và thay bằng box-shadow
   tô alpha .25 — trên nền trắng chỉ khoảng 1.3:1, quá nhạt để làm dấu hiệu focus.
   Khai báo HAI LỚP: dòng đầu màu literal an toàn, dòng sau nâng cấp theo biến; nếu
   biến không phân giải được thì dòng đầu vẫn giữ, không rơi về currentColor. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
input.form-control:focus-visible,
textarea.form-control:focus-visible,
select.form-select:focus-visible{
    outline:3px solid #0b5ed7 !important;
    outline-color:var(--md-focus-ring, #0b5ed7) !important;
    outline-offset:2px;
}


@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto }
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

@media (prefers-contrast: more){
    :where(a){ text-decoration:underline }
    :where(input,select,textarea){ border-width:2px }
}