.edit-user { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px; &__status-toggle { flex-basis: 100%; width: 100%; margin-bottom: 8px; padding: 12px; background: #f7f7f8; border-radius: 6px; border: 1px solid #e0e0e0; } input, &__select { flex: 1 1 20%; min-width: 150px; box-sizing: border-box; padding: 8px; font-size: 1rem; border-radius: 4px; border: 1px solid #ccc; outline: none; transition: border-color 0.3s ease; &:focus { border-color: #0070f3; } } &__button-container { flex-basis: 100%; width: 100%; button { flex-basis: 100%; margin-top: 16px; padding: 10px 0; font-size: 1rem; border-radius: 4px; width: 100px; cursor: pointer; } button:first-child { color: var(--button-primary); border-color: var(--button-primary); } button:last-child { color: var(--button-secondary); border-color: var(--button-secondary); margin-left: 8px; } } } .array-field-container { flex: 1 1 100%; min-width: 200px; display: flex; flex-direction: column; gap: 8px; label { font-weight: 500; color: #333; font-size: 0.9rem; } .selected-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .selected-item { display: inline-flex; align-items: center; gap: 4px; background: #e3f2fd; color: #1976d2; padding: 4px 8px; border-radius: 16px; font-size: 0.875rem; border: 1px solid #bbdefb; .remove-item { background: none; border: none; color: #1976d2; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; margin-left: 4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease; &:hover { background-color: rgba(25, 118, 210, 0.1); } } } }