/* Material UI-style floating label inputs
   Usage: <div class="floating-input">
            <input placeholder=" " id="x" ... />
            <label for="x">Label</label>
          </div> */

.floating-input {
  position: relative;
}

.floating-input input,
.floating-input textarea,
.floating-input select {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #D4C8B8; /* neutral-300 */
  background-color: transparent;
  padding: 1.25rem 1rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1C1917; /* neutral-900 */
  outline: none;
  transition: border-color 0.2s;
  min-height: 3.25rem; /* match text input height */
}

.floating-input input:focus,
.floating-input textarea:focus,
.floating-input select:focus {
  border-color: #1B4332; /* primary-500 */
  box-shadow: 0 0 0 1px #1B4332;
}

.floating-input label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #8C7F6F; /* neutral-500 */
  pointer-events: none;
  transition: all 0.2s ease;
  margin-bottom: 0;
  padding: 0 0.25rem;
}

.floating-input textarea ~ label {
  top: 0.75rem;
  transform: none;
}

/* Float up when focused or has value */
.floating-input input:focus ~ label,
.floating-input input:not(:placeholder-shown) ~ label,
.floating-input textarea:focus ~ label,
.floating-input textarea:not(:placeholder-shown) ~ label {
  top: -0.5rem;
  transform: none;
  font-size: 0.75rem;
  color: #1B4332; /* primary-500 */
  background-color: white;
}

.floating-input input:not(:focus):not(:placeholder-shown) ~ label,
.floating-input textarea:not(:focus):not(:placeholder-shown) ~ label {
  color: #8C7F6F; /* neutral-500 */
}

/* Select gets explicit height to match text inputs */
.floating-input select {
  height: 3.25rem;
  padding-top: 1.5rem;
  padding-bottom: 0.25rem;
}

/* Date/datetime inputs always float since they always show a value */
.floating-input input[type="date"] ~ label,
.floating-input input[type="datetime-local"] ~ label {
  top: -0.5rem;
  transform: none;
  font-size: 0.75rem;
  color: #8C7F6F;
  background-color: white;
  padding: 0 0.25rem;
}

.floating-input input[type="date"]:focus ~ label,
.floating-input input[type="datetime-local"]:focus ~ label {
  color: #1B4332;
}

/* Select always floats since it always has a value */
.floating-input select ~ label {
  top: -0.5rem;
  transform: none;
  font-size: 0.75rem;
  color: #8C7F6F;
  background-color: white;
  padding: 0 0.25rem;
}

.floating-input select:focus ~ label {
  color: #1B4332;
}

/* Required field indicator — red asterisk after label text */
.floating-input input:required ~ label::after,
.floating-input textarea:required ~ label::after,
.floating-input select:required ~ label::after {
  content: " *";
  color: #DC2626; /* red-600 */
}

/* Validation error state — red border + label */
.floating-input.field-error input,
.floating-input.field-error textarea,
.floating-input.field-error select {
  border-color: #DC2626; /* red-600 */
  box-shadow: 0 0 0 1px #DC2626;
}

.floating-input.field-error label {
  color: #DC2626 !important;
}