.password-toggle-btn,
.toggle-password {
    cursor: pointer;
    user-select: none;
}

.password-toggle-btn i,
.toggle-password i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--zapta-muted, #5d6b7f);
}

.password-toggle-btn:hover i,
.toggle-password:hover i {
    /* #334155 hardcoded until 15 Aug 2026 — a dark ink that all but vanished
       against a dark card on hover. The fallback is mandatory, not tidiness:
       layouts/auth.blade.php links THIS file but not zapta-tokens.css, so on
       login / register / reset a bare var() would delete the declaration. */
    color: var(--zapta-body, #334155);
}

.pss-field {
    position: relative;
}

.pss-field .field-icon.password-toggle-btn,
label.position-relative > .field-icon.password-toggle-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: none;
    background: transparent;
    padding: 0;
    z-index: 2;
}

[dir="rtl"] .pss-field .field-icon.password-toggle-btn,
[dir="rtl"] label.position-relative > .field-icon.password-toggle-btn {
    right: auto;
    left: 10px;
}

.custom-login .custom-login-form .field-icon.password-toggle-btn {
    cursor: pointer;
    z-index: 2;
}

.pss-field input.form-control,
label.position-relative input[type="password"],
label.position-relative input[type="text"] {
    padding-right: 2.75rem;
}

[dir="rtl"] .pss-field input.form-control,
[dir="rtl"] label.position-relative input[type="password"],
[dir="rtl"] label.position-relative input[type="text"] {
    padding-right: 0.75rem;
    padding-left: 2.75rem;
}

/* ---------- ONE FIELD, ONE BORDER (15 Aug 2026) ----------
   password-toggle.js used to wrap the input in a Bootstrap `.input-group` and
   append the eye as an `.input-group-text`: the addon carried its own border
   and its own fill, so a password field rendered as TWO boxes, and the focus
   ring — which belongs to the input — was drawn round the left half alone.
   That is what QA reported.

   The button is an overlay now. The input is the whole control: it keeps its
   border, its radius and its ring, and simply reserves a well at its inline
   end for a borderless, unfilled button sitting inside that border. Nothing
   here paints a background, so the eye cannot be a white block on a dark card
   (the previous bug at this spot) and it follows disabled/readonly fields for
   free.

   This file is linked by BOTH layouts and the wrapper is script-built, so the
   rules are deliberately unscoped: login, register, reset, the Change Password
   modals, the employee wizard and Business Settings all get the same control.
   Every var() carries a fallback — the auth layout links no token layer. */
.password-field-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* The `.form-control` half of the selector is not decoration: the field
   stylesheets set `padding` as a SHORTHAND at two classes deep
   (`.zapta-form .form-control`), which would reset this longhand. Two classes
   plus the element outranks them, and this file loads first. */
.password-field-wrap > input,
.password-field-wrap > input.form-control {
    padding-inline-end: 2.75rem;
}

.password-field-wrap > .password-toggle-btn {
    position: absolute;
    /* 1px keeps the button inside the field's own border rather than over it */
    top: 1px;
    bottom: 1px;
    inset-inline-end: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    z-index: 2;
}

.password-field-wrap > .password-toggle-btn:focus-visible {
    outline: 2px solid var(--zapta-brand, #0865ff);
    outline-offset: -2px;
    border-radius: 6px;
}

/* Edge paints its own reveal control inside the field, which would sit under
   ours. The auth layout already suppressed it inline; every other screen was
   showing two eyes. */
.password-field-wrap > input::-ms-reveal,
.password-field-wrap > input::-ms-clear {
    display: none;
}