/* Material UI Style Form */
.material-form {
  --secondary-color: var(--bs-secondary);
  --secondary-color-light: var(--bs-secondary-light);
  --border-color: #e0e0e0;
  --text-color: #424242;
  --label-color: #757575;
  --error-color: #f44336;
}

.material-field {
  position: relative;
  margin-bottom: 0;
}

.material-field input,
.material-field select,
.material-field textarea {
  width: 100%;
  padding: 16px 12px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 16px;
  color: var(--text-color);
  background-color: #fafafa;
  transition: all 0.2s ease;
  outline: none;
}

.material-field input:focus,
.material-field select:focus,
.material-field textarea:focus {
  border-color: var(--secondary-color);
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.material-field label {
  position: absolute;
  left: 12px;
  top: 16px;
  color: var(--label-color);
  font-size: 16px;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: transparent;
  padding: 0 4px;
}

.material-field input:focus + label,
.material-field select:focus + label,
.material-field textarea:focus + label,
.material-field input:not(:placeholder-shown) + label,
.material-field select:not([value=""]) + label,
.material-field textarea:not(:placeholder-shown) + label,
.material-field.filled label {
  top: -8px;
  font-size: 12px;
  color: var(--secondary-color);
  background-color: #fff;
  padding: 0 4px;
}

.material-field input[type="date"]:not(:focus):not([value=""]) + label {
  top: -8px;
  font-size: 12px;
  color: var(--secondary-color);
  background-color: #fff;
}

.material-field select + label {
  top: -8px;
  font-size: 12px;
  color: var(--secondary-color);
  background-color: #fff;
}

.material-field textarea {
  resize: vertical;
  min-height: 80px;
}

.material-btn {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  letter-spacing: 0.5px;
}

.material-btn:hover {
  opacity: 0.8;
}

.material-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .material-field {
    margin-bottom: 1.25rem;
  }
}