/* ================================================
   MASSGEBUNG Foundation Inputs
   Tawny Furnace Design System
   ================================================ */

/* ===== Input Group Container ===== */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

/* ===== Label ===== */
.input-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  display: block;
}

.input-label--required::after {
  content: '*';
  color: var(--error);
  margin-left: 4px;
}

/* ===== Base Input Field ===== */
.input-field {
  /* Layout */
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--space-md);

  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);

  /* Visual */
  background-color: var(--bg-secondary);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);

  /* Interaction */
  transition: all var(--transition-fast);
  outline: none;

  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

.input-field:hover:not(:disabled):not(:focus) {
  border-color: var(--text-tertiary);
}

.input-field:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  background-color: var(--bg-elevated);
}

/* ===== Email Input (Specific Height) ===== */
.input-email {
  height: 48px;
}

/* ===== Textarea ===== */
.input-textarea {
  height: auto;
  min-height: 120px;
  padding: var(--space-md);
  resize: vertical;
  line-height: 1.6;
}

/* ===== Input States ===== */

/* Error State */
.input-field--error,
.input-group--error .input-field {
  border-color: var(--border-error);
  background-color: var(--error-bg);
}

.input-field--error:focus,
.input-group--error .input-field:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

/* Success State */
.input-field--success,
.input-group--success .input-field {
  border-color: var(--border-success);
  background-color: var(--success-bg);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.input-field--success:focus,
.input-group--success .input-field:focus {
  border-color: var(--border-success);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

/* Disabled State */
.input-field:disabled,
.input-field[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-primary);
}

/* ===== Input Hint Text ===== */
.input-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.input-group--error .input-hint {
  color: var(--error);
}

.input-group--success .input-hint {
  color: var(--success);
}

/* ===== Input with Icon ===== */
.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper--icon-left .input-field {
  padding-left: 44px;
}

.input-wrapper--icon-right .input-field {
  padding-right: 44px;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.input-icon--left {
  left: 0;
}

.input-icon--right {
  right: 0;
}

.input-wrapper:focus-within .input-icon {
  color: var(--orange-primary);
}

/* ===== Input Prefix/Suffix ===== */
.input-affix {
  display: flex;
  align-items: center;
  gap: 0;
}

.input-affix__prefix,
.input-affix__suffix {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-md);
  background-color: var(--bg-elevated);
  border: 1.5px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.input-affix__prefix {
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
}

.input-affix__suffix {
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.input-affix .input-field {
  border-radius: 0;
}

.input-affix__prefix + .input-field {
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.input-field:has(+ .input-affix__suffix) {
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* ===== Search Input ===== */
.input-search {
  padding-left: 44px;
}

/* ===== Number Input (remove spinner) ===== */
.input-field[type="number"]::-webkit-inner-spin-button,
.input-field[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-field[type="number"] {
  -moz-appearance: textfield;
}

/* ===== Input Error/Success Message ===== */
.input-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.input-message--error {
  color: var(--error);
}

.input-message--success {
  color: var(--success);
}

.input-message__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .input-field {
    font-size: var(--font-size-sm);
  }

  .input-email {
    height: 44px;
  }
}