/* ============================================================================
   tpl_saigonchess — cr-ui cho nhóm trang tài khoản (com_users)
   Đăng nhập · Đăng xuất · Quên mật khẩu · Quên tên đăng nhập · Đăng ký

   Nạp SAU cr-ui.css. Mọi quy tắc đều nằm trong .cr-ui nên không trang nào khác
   bị ảnh hưởng. Chỉ bổ sung những thứ cr-ui chưa có (biểu mẫu một cột, thẻ hẹp
   canh giữa), KHÔNG đổi 7 con số nền tảng của cr-ui.
   ============================================================================ */

/* ----------------------------------------------------------- KHUNG TRANG -- */

.cr-ui.cr-auth {
    max-width: 460px;
    margin: 28px auto 40px;
}

/* Đăng ký có nhiều trường hơn nên cho rộng gấp rưỡi */
.cr-ui.cr-auth-wide { max-width: 720px; }

.cr-ui.cr-auth .cr-card-body { padding: 18px; }

/* ------------------------------------------------------- TRƯỜNG NHẬP LIỆU -- */

.cr-ui.cr-auth fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cr-ui.cr-auth legend {
    width: 100%;
    float: none;
    margin: 0 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--cr-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--cr-ink-2);
}

/* ⚠ template.css có `form:not(.form-no-margin) .control-group .control-label{float:left}`
   và `.controls{margin-left:220px}` — biểu mẫu 2 cột kiểu Bootstrap 2. Độ đặc hiệu của nó
   là (0,3,1) nên selector (0,3,0) KHÔNG thắng; phải thêm `form .control-group` để lên (0,4,1). */
.cr-ui.cr-auth form .control-group { margin-bottom: 12px; }
.cr-ui.cr-auth form .control-group:last-child { margin-bottom: 0; }

.cr-ui.cr-auth form .control-group .control-label {
    margin: 0 0 4px;
    padding: 0;
    width: auto;
    float: none;
    text-align: left;
}

.cr-ui.cr-auth form .control-group .control-label label {
    display: inline-block;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cr-ink-2);
}

.cr-ui.cr-auth form .control-group .control-label label .star { color: var(--cr-del); }

.cr-ui.cr-auth form .control-group .controls {
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}

.cr-ui.cr-auth form .control-group .controls .form-control,
.cr-ui.cr-auth form .control-group .controls .form-select,
.cr-ui.cr-auth form .control-group .controls input[type="text"],
.cr-ui.cr-auth form .control-group .controls input[type="email"],
.cr-ui.cr-auth form .control-group .controls input[type="password"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Lời giải thích dưới ô nhập */
.cr-ui.cr-auth .form-text,
.cr-ui.cr-auth .field-desc {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cr-ink-3);
}

/* -------------------------------------------------------- Ô MẬT KHẨU ------ */

/* Nút con mắt do lõi Joomla sinh ra (.btn.btn-secondary), template tô đen kịt.
   Kéo về đúng 30px và tông xám của cr-ui. */
/* template.css đặt .input-group{flex-wrap:wrap} -> nút con mắt rơi xuống dòng riêng */
.cr-ui.cr-auth .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.cr-ui.cr-auth .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cr-ui.cr-auth .input-group .btn,
.cr-ui.cr-auth .input-group .btn.btn-secondary,
.cr-ui.cr-auth .input-group .input-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--cr-h);
    height: var(--cr-h);
    min-height: var(--cr-h);
    padding: 0;
    margin-left: -1px;
    border-radius: 0 var(--cr-r) var(--cr-r) 0;
    font-size: 13px;
    box-shadow: none;
    /* ⚠ tệp CSS sinh theo kiểu giao diện (media/templates/site/saigonchess/css/<styleid>.css)
       đặt `.btn.btn-secondary{background-color:…!important}` với --color-secondary #323232,
       nên nút con mắt ra đen kịt. !important ở đây là bắt buộc, không phải lười. */
    background-color: var(--cr-surface-2) !important;
    border: 1px solid var(--cr-line-strong) !important;
    color: var(--cr-ink-2) !important;
}

.cr-ui.cr-auth .input-group .btn:hover,
.cr-ui.cr-auth .input-group .btn.btn-secondary:hover,
.cr-ui.cr-auth .input-group .input-password-toggle:hover {
    background-color: var(--cr-line) !important;
    border-color: var(--cr-line-strong) !important;
    color: var(--cr-ink) !important;
}

.cr-ui.cr-auth .password-group { width: 100%; }

/* --------------------------------------------------------- GHI NHỚ / TÍCH -- */

.cr-ui.cr-auth .cr-auth-remember {
    display: flex;
    align-items: center;
    margin: 12px 0 0;
}

.cr-ui.cr-auth .cr-auth-remember label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cr-ink-2);
    cursor: pointer;
}

/* Template đặt .inputbox/.form-check-input{position:absolute} -> ô tích đè lên chữ */
.cr-ui.cr-auth .cr-auth-remember input[type="checkbox"] {
    position: static;
    float: none;
    width: 15px;
    height: 15px;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ HÀNG NÚT ---- */

.cr-ui.cr-auth .cr-auth-actions {
    display: flex;
    align-items: center;
    gap: var(--cr-gap);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cr-line);
}

/* Nút lùi (Huỷ, Quay lại) bị đẩy sang phải, nút chính nằm trái */
.cr-ui.cr-auth .cr-auth-actions > :last-child:not(:first-child) { margin-left: auto; }

/* Không có gì phía trên thì bỏ vạch ngăn, kẻo thẻ trông như thiếu nội dung */
.cr-ui.cr-auth .cr-card-body > .cr-auth-actions:first-child,
.cr-ui.cr-auth form > .cr-auth-actions:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Nút đăng nhập ngoài (Google, Facebook…) do plugin sinh ra — xếp dọc, rộng hết thẻ */
.cr-ui.cr-auth .cr-auth-extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.cr-ui.cr-auth .cr-auth-extra .crb { width: 100%; }

/* ------------------------------------------------------ LIÊN KẾT PHỤ ------ */

.cr-ui.cr-auth .cr-auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--cr-ink-3);
}

.cr-ui.cr-auth .cr-auth-links a {
    color: var(--cr-view);
    font-weight: 600;
    text-decoration: none;
}

.cr-ui.cr-auth .cr-auth-links a:hover { text-decoration: underline; }

.cr-ui.cr-auth .cr-auth-links .cr-auth-sep { color: var(--cr-line-strong); }

/* ------------------------------------------------------------- LỜI DẪN ---- */

.cr-ui.cr-auth .cr-auth-note {
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1px solid var(--cr-line);
    border-left: 3px solid var(--cr-view);
    border-radius: 8px;
    background: var(--cr-accent-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cr-ink-2);
}

.cr-ui.cr-auth .cr-auth-note p:last-child { margin-bottom: 0; }

/* Ảnh minh hoạ do tham số menu cấu hình */
.cr-ui.cr-auth .cr-auth-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 8px;
}

/* ---------------------------------------------------------- ĐĂNG XUẤT ----- */

.cr-ui.cr-auth .cr-auth-msg {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cr-ink-2);
}

/* --------------------------------------------------- TRANG HỒ SƠ (xem) ---- */

.cr-ui.cr-auth .cr-prof-block + .cr-prof-block { margin-top: 18px; }

.cr-ui.cr-auth .cr-prof-legend {
    margin: 0 0 8px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--cr-line);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cr-ink-2);
}

.cr-ui.cr-auth .cr-prof {
    margin: 0;
    border: 1px solid var(--cr-line);
    border-radius: 8px;
    overflow: hidden;
}

/* <dl> bọc mỗi cặp trong <div> — hợp lệ từ HTML 5.2, và nhờ vậy mới vằn + đổi màu
   được CẢ DÒNG; nếu tô trực tiếp lên dt/dd thì rê chuột chỉ sáng một nửa. */
.cr-ui.cr-auth .cr-prof-row {
    display: flex;
    align-items: stretch;
    min-height: var(--cr-row);
    font-size: var(--cr-fs);
    border-top: 1px solid var(--cr-line);
}

.cr-ui.cr-auth .cr-prof-row:first-child { border-top: 0; }
.cr-ui.cr-auth .cr-prof-row:nth-child(odd) { background: var(--cr-surface-3); }
.cr-ui.cr-auth .cr-prof-row:hover { background: var(--cr-accent-soft); }

.cr-ui.cr-auth .cr-prof-row dt,
.cr-ui.cr-auth .cr-prof-row dd {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 10px;
    line-height: 1.4;
}

.cr-ui.cr-auth .cr-prof-row dt {
    flex: 0 0 34%;
    max-width: 34%;
    font-weight: 600;
    color: var(--cr-ink-2);
    border-right: 1px solid var(--cr-line);
}

/* Thà xuống 2 dòng còn hơn mất chữ — không cắt bằng ellipsis */
.cr-ui.cr-auth .cr-prof-row dd {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.cr-ui.cr-auth .cr-prof-avatar {
    max-height: 48px;
    width: auto;
    border: 1px solid var(--cr-line);
    border-radius: 6px;
}

.cr-ui.cr-auth .cr-prof-social { display: inline-flex; gap: 10px; align-items: center; }
.cr-ui.cr-auth .cr-prof-social a { color: var(--cr-view); text-decoration: none; }
.cr-ui.cr-auth .cr-prof-social a:hover { filter: brightness(1.15); }

/* ------------------------------------- Ô CHỌN "FANCY" (Choices.js) -------- */

/* `joomla-field-fancy-select` của lõi cao 52px và lòi ra nút "Remove item" chưa có
   biểu tượng (choices.css bị template ghi đè). Kéo về đúng 30px như mọi ô khác. */
.cr-ui.cr-auth .choices { margin-bottom: 0; }

.cr-ui.cr-auth .choices__inner {
    display: flex;
    align-items: center;
    min-height: var(--cr-h);
    height: var(--cr-h);
    padding: 0 10px;
    font-size: var(--cr-fs);
    border: 1px solid var(--cr-line-strong);
    border-radius: var(--cr-r);
    background: var(--cr-surface);
}

.cr-ui.cr-auth .choices__list--single { padding: 0; }
.cr-ui.cr-auth .choices__list--single .choices__item { line-height: 1.2; }

/* Chọn một giá trị thì không có gì để gỡ — ẩn hẳn nút, đừng để chữ "Remove item" đè lên.
   ⚠ Joomla dùng class RIÊNG `choices__button_joomla`, không phải `choices__button`
   của Choices.js gốc — bỏ sót là chữ vẫn lòi ra. */
.cr-ui.cr-auth .choices[data-type="select-one"] .choices__button,
.cr-ui.cr-auth .choices[data-type="select-one"] .choices__button_joomla { display: none; }

.cr-ui.cr-auth .choices__list--dropdown {
    font-size: var(--cr-fs);
    border: 1px solid var(--cr-line-strong);
    border-radius: 0 0 var(--cr-r) var(--cr-r);
}

.cr-ui.cr-auth .choices__list--dropdown .choices__input {
    height: var(--cr-h);
    min-height: var(--cr-h);
    padding: 0 10px;
    font-size: var(--cr-fs);
}

/* ------------------------------------- XÁC THỰC NHIỀU LỚP (lõi Joomla) ---- */

/* Markup do lõi dựng, không override được -> chỉnh tại chỗ cho khớp cỡ nút cr-ui */
.cr-ui.cr-auth .com-users-profile__multifactor .btn {
    height: var(--cr-h);
    min-height: var(--cr-h);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: var(--cr-fs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--cr-r);
}

/* ----------------------------------------------------------- MÀN HÌNH NHỎ - */

@media (max-width: 575.98px) {
    .cr-ui.cr-auth { margin: 16px 12px 28px; }
    .cr-ui.cr-auth .cr-auth-actions { flex-wrap: wrap; }
    .cr-ui.cr-auth .cr-auth-actions .crb { flex: 1 1 auto; }

    /* Nhãn 34% thành quá hẹp trên điện thoại -> xếp dọc */
    .cr-ui.cr-auth .cr-prof-row { flex-direction: column; }
    .cr-ui.cr-auth .cr-prof-row dt {
        flex: 0 0 auto;
        max-width: 100%;
        padding-bottom: 0;
        border-right: 0;
    }
}