/* ========================================
   PASSWORD TOGGLE - SHARED STYLES
   Matches React AccountManagement exactly
   ======================================== */

/* ========================================
   DISABLE BROWSER-NATIVE PASSWORD ICONS
   ======================================== */

/* Microsoft Edge & Internet Explorer - Hide native password reveal button */
input[type="password"]::-ms-reveal {
    display: none !important;
}

/* Microsoft Edge & Internet Explorer - Hide native clear button */
input[type="password"]::-ms-clear {
    display: none !important;
}

/* Webkit browsers (Chrome, Safari, Edge Chromium) - Hide credentials autofill button */
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Webkit browsers - Hide password reveal button (if exists) */
input[type="password"]::-webkit-password-reveal-button {
    display: none !important;
}

/* ========================================
   CUSTOM PASSWORD TOGGLE STYLES
   ======================================== */

/* Password field wrapper - creates positioning context */
.password-field-wrapper {
    position: relative;
}

/* Password toggle button - positioned inside input */
.password-toggle-btn {
    position: absolute;
    inset-inline-end: 0.75rem; /* 12px - auto-flips for RTL */
    bottom: 10px;   /* Matches React: bottom-[10px] */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280; /* gray-500 */
    transition: color 0.2s ease-in-out; /* transition-colors */
    z-index: 10;
}

.password-toggle-btn:hover {
    color: #374151; /* gray-700 - matches hover:text-gray-700 */
}

.password-toggle-btn:focus {
    outline: none;
}

.password-toggle-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Password input with toggle - add padding for icon space */
/* Uses padding-inline-end to auto-flip for RTL languages */
.password-field-with-toggle {
    padding-inline-end: 2.75rem !important; /* Make room for the icon - auto-flips for RTL */
}

/* Icon visibility states */
.password-toggle-icon {
    width: 20px;   /* size={20} in React */
    height: 20px;
    display: block;
}

.password-toggle-icon.hidden {
    display: none;
}

/* Ensure proper stacking */
.password-field-wrapper input {
    position: relative;
    z-index: 1;
}