/**
 * ساختمان‌یار — استایل دکمه چشم فیلد رمز
 */

.sy-password-field {
    direction: ltr;
}

.sy-password-field > .form-control {
    direction: ltr;
    text-align: left;
}

.sy-password-toggle,
.btn.sy-password-toggle,
.btn-eye,
.admin-pass-eye.js-toggle,
.btn.js-toggle-pass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding-inline: 0.75rem;
    border-color: var(--bs-border-color, #ced4da);
    background-color: var(--bg-card, #fff);
    color: var(--text-muted, #64748b);
    box-shadow: none;
}

.sy-password-toggle:hover,
.btn.sy-password-toggle:hover,
.btn-eye:hover,
.admin-pass-eye.js-toggle:hover,
.btn.js-toggle-pass:hover {
    background-color: var(--primary-soft, #eff6ff);
    border-color: var(--bs-border-color, #ced4da);
    color: var(--text-main, #0f172a);
}

.sy-password-toggle:focus-visible,
.btn.sy-password-toggle:focus-visible,
.btn-eye:focus-visible,
.admin-pass-eye.js-toggle:focus-visible,
.btn.js-toggle-pass:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
    z-index: 3;
}

.sy-password-toggle[aria-pressed="true"],
.btn.sy-password-toggle[aria-pressed="true"] {
    color: var(--primary, #2563eb);
}

:root[data-theme="night"] .sy-password-toggle,
:root[data-theme="night"] .btn.sy-password-toggle,
:root[data-theme="night"] .btn-eye,
:root[data-theme="night"] .admin-pass-eye.js-toggle,
:root[data-theme="night"] .btn.js-toggle-pass {
    background-color: var(--bg-card, #1e293b);
    border-color: var(--border-soft, #475569);
    color: var(--text-muted, #94a3b8);
}

:root[data-theme="night"] .sy-password-toggle:hover,
:root[data-theme="night"] .btn.sy-password-toggle:hover {
    background-color: rgba(96, 165, 250, 0.12);
    color: #e2e8f0;
}