/**
 * Password show/hide toggle.
 *
 * Wrap a password <input> and a .lms-password-toggle button — nothing
 * else — in a .lms-password-field div; see password-toggle.js for the
 * click behavior, and resources/views/auth/{login,register,
 * reset-password}.blade.php for the markup this styles. Deliberately not
 * scoped to any one page's own <style> block: any password field on any
 * page can opt in with the same classes/attributes.
 */
.lms-password-field {
    position: relative;
}

/* Bootstrap's own .is-invalid ~ .invalid-feedback CSS rule needs both to
   share a parent to reveal the error text — no longer true once the input
   moves inside .lms-password-field, so this recreates it one level up
   (the error <div> stays exactly where it was: a sibling of the wrapper,
   right after it, same as every other field in these forms). */
.lms-password-field:has(.is-invalid) + .invalid-feedback {
    display: block;
}

/* Room for the icon so typed text never runs under it. A descendant (not
   direct-child) selector on purpose: on the plain auth fields the input is
   a direct child of .lms-password-field, but reset-password.blade.php
   wraps a Bootstrap .form-floating input+label pair instead — floating
   labels need the input to stay a direct child of .form-floating for
   Bootstrap's own CSS to work, so .lms-password-field there wraps
   .form-floating (with the toggle button) one level further out. */
.lms-password-field .form-control {
    padding-right: 2.75rem;
}

.lms-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 0 0.5rem 0.5rem 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lms-password-toggle:hover {
    color: #475569;
    background-color: rgba(100, 116, 139, 0.08);
}

.lms-password-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.lms-password-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* One icon at a time: closed ("show password") by default, swapped for
   the open eye once the field is showing plain text. Toggled purely via
   the button's own .is-visible class — see password-toggle.js. */
.lms-password-toggle .lms-eye-open {
    display: none;
}

.lms-password-toggle.is-visible .lms-eye-open {
    display: block;
}

.lms-password-toggle.is-visible .lms-eye-closed {
    display: none;
}

body.dark .lms-password-toggle {
    color: #94a3b8;
}

body.dark .lms-password-toggle:hover {
    color: #cbd5e1;
    background-color: rgba(148, 163, 184, 0.12);
}