/* Create User – overrides so User Image, Country, Roles match other form-input fields */

/* Match Country and Role dropdown triggers to form-input height (no min-height) */
.create-form-container .role-dropdown-trigger,
.create-form-container .country-dropdown-trigger-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid var(--neutral-200, #e5e5e5);
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
  color: var(--neutral-800, #262626);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  min-height: unset;
}

/* Inner input padding so trigger height matches other form-inputs */
.create-form-container .country-dropdown-input {
  color: inherit;
  background: transparent;
  padding: 0;
  min-height: 0;
}

.create-form-container .role-dropdown-trigger:hover,
.create-form-container .country-dropdown-trigger-input:hover {
  border-color: var(--neutral-300, #d4d4d4);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.create-form-container .role-dropdown-trigger:focus-within,
.create-form-container .country-dropdown-trigger-input:focus-within {
  outline: none;
  border-color: var(--primary-500, #f21b23);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(242, 27, 35, 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.create-form-container .country-dropdown-input::placeholder {
  color: var(--neutral-400, #a3a3a3);
}

/* User image file input – same height as other form-inputs */
.create-form-container .user-image-input {
  padding: 0.5rem 1.25rem;
  width: 100%;
  height: 3.42rem;
  border: 2px solid var(--neutral-200, #e5e5e5);
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
  color: var(--neutral-800, #262626);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  line-height: 1.25;
}

.create-form-container .user-image-input:hover {
  border-color: var(--neutral-300, #d4d4d4);
  background: rgba(255, 255, 255, 0.95);
}

.create-form-container .user-image-input:focus {
  outline: none;
  border-color: var(--primary-500, #f21b23);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(242, 27, 35, 0.12);
}

/* Style the native "Choose File" button to match theme */
.create-form-container .user-image-input::file-selector-button {
  padding: 0.35rem 0.75rem;
  margin-right: 1rem;
  border: 1px solid var(--neutral-300, #d4d4d4);
  border-radius: 0.5rem;
  background: var(--neutral-100, #e5e5e5);
  color: var(--neutral-700, #404040);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.create-form-container .user-image-input::file-selector-button:hover {
  background: var(--neutral-200, #e5e5e5);
  border-color: var(--neutral-400, #a3a3a3);
}

.user-image-hint {
  margin: 0.5rem 0 0 0;
  font-size: 0.8125rem;
  color: var(--neutral-500, #737373);
  line-height: 1.4;
}

.user-image-preview-wrap {
  margin-top: 0.75rem;
}

.user-image-preview {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-200, #e5e5e5);
}

/* Dark mode – same as CreateForm .form-input so all three fields match */
body.night-mode .create-form-container .role-dropdown-trigger,
body.night-mode .create-form-container .country-dropdown-trigger-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

body.night-mode .create-form-container .role-dropdown-trigger:hover,
body.night-mode .create-form-container .country-dropdown-trigger-input:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

body.night-mode .create-form-container .role-dropdown-trigger:focus-within,
body.night-mode .create-form-container .country-dropdown-trigger-input:focus-within {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

body.night-mode .create-form-container .country-dropdown-input {
  color: rgba(255, 255, 255, 0.95);
}

body.night-mode .create-form-container .country-dropdown-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

body.night-mode .create-form-container .role-dropdown-text {
  color: rgba(255, 255, 255, 0.95);
}

body.night-mode .create-form-container .role-dropdown-text.empty {
  color: rgba(255, 255, 255, 0.5);
}

body.night-mode .create-form-container .role-dropdown-arrow {
  color: rgba(255, 255, 255, 0.8);
}

/* User image file input – dark theme same as other inputs */
body.night-mode .create-form-container .user-image-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

body.night-mode .create-form-container .user-image-input:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

body.night-mode .create-form-container .user-image-input:focus {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

body.night-mode .create-form-container .user-image-input::file-selector-button {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

body.night-mode .create-form-container .user-image-input::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

body.night-mode .user-image-hint {
  color: rgba(255, 255, 255, 0.6);
}

body.night-mode .user-image-preview {
  border-color: rgba(255, 255, 255, 0.2);
}
