.field {
  display: grid;
  gap: 0.4rem;
  color: rgb(24 24 27);
  font-size: 14px;
  font-weight: 500;
}

.field span {
  color: rgb(24 24 27);
  font-size: 14px;
  line-height: 1.25rem;
}

label.field input:not([type="checkbox"]):not([type="file"]),
label.field select,
label.field textarea,
.field input:not([type="checkbox"]):not([type="file"]),
.field select,
.field textarea {
  appearance: auto;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgb(212 212 216) !important;
  border-radius: 6px !important;
  background: white !important;
  padding: 9px 11px !important;
  color: rgb(24 24 27) !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.25rem;
  outline: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

label.field select,
.field select {
  cursor: pointer;
}

.field textarea,
label.field textarea {
  min-height: 6rem !important;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgb(113 113 122);
  opacity: 0.75;
}

label.field input:not([type="checkbox"]):not([type="file"]):focus,
label.field select:focus,
label.field textarea:focus,
.field input:not([type="checkbox"]):not([type="file"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: rgb(24 24 27) !important;
  box-shadow: 0 0 0 3px rgb(24 24 27 / 0.08) !important;
}

label.field input[type="file"],
.field input[type="file"] {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  border: 1px solid rgb(212 212 216) !important;
  border-radius: 6px !important;
  background: white !important;
  color: rgb(24 24 27) !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.25rem;
  padding: 8px !important;
}

.field input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid rgb(212 212 216);
  border-radius: 5px;
  background: rgb(250 250 250);
  color: rgb(24 24 27);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
}

.field input[type="file"]::file-selector-button:hover {
  background: rgb(244 244 245);
}

label.field input[type="file"]:focus,
.field input[type="file"]:focus {
  border-color: rgb(24 24 27) !important;
  box-shadow: 0 0 0 3px rgb(24 24 27 / 0.08) !important;
  outline: none !important;
}

label.field input[type="checkbox"],
.field input[type="checkbox"] {
  appearance: auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 1px solid rgb(161 161 170) !important;
  border-radius: 4px !important;
  background: white !important;
  accent-color: rgb(24 24 27);
  cursor: pointer;
  padding: 0 !important;
}

.field input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(24 24 27 / 0.12);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-available {
  background: rgb(220 252 231);
  color: rgb(22 101 52);
}

.status-assigned {
  background: rgb(254 249 195);
  color: rgb(133 77 14);
}

.status-retired {
  background: rgb(228 228 231);
  color: rgb(82 82 91);
}