.users-badge {
    color: var(--primary-text);
    border-color: var(--primary-border);
    background: var(--primary-faint);
    white-space: nowrap;
    flex-shrink: 0
}

.user-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.user-field {
    min-width: 0
}

.user-field-wide {
    grid-column: 1/-1
}

.user-field select.profile-name-input {
    background: var(--field-bg)
}

.user-field .profile-name-input:disabled {
    background: var(--surface-2);
    color: var(--text-faint)
}

.user-active {
    margin-top: 12px
}

.users-page .permission-heading>svg {
    color: var(--text-faint);
    flex-shrink: 0
}

.user-status {
    font-style: normal;
    display: inline-block;
    margin-right: 7px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 8px
}

.user-status.is-active {
    background: var(--success-soft);
    color: var(--success-text)
}

.profile-row span.user-warehouse {
    display: flex;
    align-items: center;
    gap: 4px
}

.warehouse-avatar-code {
    font: 700 10px 'Manrope', sans-serif;
    color: var(--text-2);
    background: var(--surface-3);
    letter-spacing: .3px
}

@media(max-width:450px) {
    .user-fields {
        grid-template-columns: 1fr
    }
}

.users-warehouse-filter {
    margin-bottom: 14px
}

.users-layout {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 1.7fr)
}

@media(max-width:1000px) {
    .users-layout {
        grid-template-columns: 1fr
    }
}

/* "Bloqueado" chip and the unlock note of the form (5 wrong passwords, wms-auth). */
.compact-chip.is-blocked {
    background: var(--danger-soft);
    color: var(--danger-text)
}

.user-locked-note {
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center
}

.user-locked-note>span {
    flex: 1;
    min-width: 180px
}

.user-unlock {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.user-unlock {
    color: var(--blue)
}