/*
 * I4S Core UI kit — password reveal control.
 *
 * Reproduces the two legacy skins byte-for-byte via a modifier class, so the
 * first build is a ZERO visual change: --staff mirrors
 * .i4s-staff-panel-password-control/-toggle, --client mirrors
 * .i4s-client-panel-password-control/-toggle. The custom properties
 * (--i4s-staff-navy / --i4s-client-blue / --i4s-client-line) resolve from the
 * surrounding panel scope where the control is rendered.
 *
 * The Copy button is intentionally left to inherit the panel's generic button
 * styling, exactly as the legacy .i4s-staff-panel-password-copy did (it had no
 * dedicated rule).
 */

.i4s-core-password-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.i4s-core-password-control input {
    min-width: 0;
}

/* Staff theme (navy) — mirrors .i4s-staff-panel-password-toggle */
.i4s-core-password-control--staff .i4s-core-password-toggle {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #bdc9d2;
    border-radius: 6px;
    background: #fff;
    color: var(--i4s-staff-navy);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Client theme (blue, uppercase, hover-invert) — mirrors .i4s-client-panel-password-toggle */
.i4s-core-password-control--client .i4s-core-password-toggle {
    width: auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--i4s-client-line);
    border-radius: 6px;
    background: #fff;
    color: var(--i4s-client-blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.i4s-core-password-control--client .i4s-core-password-toggle:hover {
    background: var(--i4s-client-blue);
    color: #fff;
}