/* Shared field helpers for user_management/_field.html
   (auth pages and profile edit forms). */

.field { margin-bottom: var(--s-4); min-width: 0; }

.form-optional {
    margin-left: 4px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--subtle);
}

.input-with-icon.has-toggle .form-control { padding-right: 48px; }
.input-with-icon.has-toggle .form-control.is-invalid { background-position: right 44px center; }

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--muted);
}

.password-toggle:hover { color: var(--green-700); }

.current-image {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.current-image figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 240px; }
.current-image figcaption {
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.current-image .image-preview { max-width: none; width: 100%; }
.current-image .image-preview.is-avatar { aspect-ratio: 1; border-radius: 50%; }

/* components.css only pads .form-control inside .input-with-icon */
.input-with-icon .form-select { padding-left: 42px; }