/* =========================================================================
 *  rbnd-password.css — Nút con mắt hiện/ẩn mật khẩu, và ô "Ghi nhớ đăng nhập"
 *
 *  Nạp ở cả hai layout (index và bare) nên có mặt trên mọi trang có form
 *  mật khẩu: đăng nhập website, khu quản trị, CRM, đăng ký, đặt lại và đổi
 *  mật khẩu.
 * ========================================================================= */

/* =========================================================================
 *  1. Ô MẬT KHẨU CÓ NÚT CON MẮT
 * ========================================================================= */

/* rbnd-password.js bọc mỗi ô mật khẩu trong thẻ này */
.pw-field {
    position: relative;
    display: block;
    width: 100%;
}

/* Chừa chỗ cho nút ở góc phải, nếu không con mắt sẽ nằm đè lên chữ.
   Dùng padding-right thay vì thu hẹp ô: thu hẹp ô làm nó lệch hàng với các
   ô khác trong cùng form. */
.pw-field > input {
    width: 100%;
    padding-right: 44px !important;
}

.pw-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;

    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;

    /* Trên iOS, nút trong suốt bị tô nền xám khi chạm nếu không tắt cái này */
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background .15s ease;
}

.pw-field__toggle:hover  { color: #212529; background: #f1f3f5; }
.pw-field__toggle:active { background: #e9ecef; }

/* Nút không nằm trong thứ tự tab (tabIndex = -1) nhưng trình đọc màn hình
   vẫn tới được. Vẫn giữ viền focus để khi tới nơi người dùng thấy rõ. */
.pw-field__toggle:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* Đang hiện mật khẩu: đổi màu icon để trạng thái nhìn thấy được ngay, không
   phải đoán từ hình cái gạch chéo bé xíu. */
.pw-field.is-revealed .pw-field__toggle { color: #0d6efd; }

/* Chrome và Edge tự chèn con mắt của riêng chúng vào ô mật khẩu.
   Không tắt thì người dùng thấy HAI con mắt cạnh nhau, bấm nhầm liên tục. */
.pw-field > input::-ms-reveal,
.pw-field > input::-ms-clear {
    display: none;
}

/* Safari trên iOS cũng chèn nút "mật khẩu mạnh" vào cùng vị trí góc phải */
.pw-field > input::-webkit-credentials-auto-fill-button {
    margin-right: 34px;
}

/* =========================================================================
 *  2. HÀNG "GHI NHỚ ĐĂNG NHẬP"
 * ========================================================================= */

/* Ô đánh dấu và nhãn nằm cùng một hàng, nhãn KHÔNG chiếm cả dòng.
   rbnd-app.css đặt `.form-row > label { display: block }` cho mọi form, nên
   không ghi đè thì nhãn xuống dòng và ô đánh dấu đứng trơ một mình phía trên. */
.form-row--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.form-row--inline > label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;

    /* Chữ trong nhãn không bị bôi đen khi người dùng bấm nhanh hai lần */
    -webkit-user-select: none;
    user-select: none;
}

/* Vùng bấm 18px là quá nhỏ trên điện thoại; khuyến nghị tối thiểu là 24px.
   Phóng to ô đánh dấu rẻ hơn nhiều so với việc người dùng bấm trượt ba lần. */
.form-row--inline > input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #0d6efd;
    cursor: pointer;
}

.form-row--inline > input[type="checkbox"]:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* Dòng nhắc cảnh báo dưới ô ghi nhớ — vàng chứ không đỏ: đây là lời nhắc
   cân nhắc, không phải báo lỗi. */
.hint--warn {
    margin: 0 0 14px;
    color: #664d03;
    font-size: .85rem;
}
.hint--warn i { margin-right: 4px; }