/* =============================================================================
   Unified input system — additive, non-breaking
   -----------------------------------------------------------------------------
   Usage:
     <input class="input" type="text" />
     <input class="input input--sm" />
     <input class="input" aria-invalid="true" />
     <div class="input-group">
       <span class="input-group__icon"><i class="fa-solid fa-search"></i></span>
       <input class="input" type="search" />
     </div>
     <label class="input-label" for="email">Email</label>
     <input class="input" id="email" type="email" />
     <p class="input-help">Wir senden dir eine Bestätigung.</p>
     <p class="input-error">Bitte gib eine gültige Adresse ein.</p>
   Scope:
     - Does NOT override Bootstrap .form-control / .form-select / .form-check-*.
     - Existing forms keep their current look.
     - New forms should prefer .input / .input-group / .input-label etc.
   ========================================================================== */

/* ---- Base -------------------------------------------------------------- */
.input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  inline-size: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-normal);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.input:hover:not(:disabled):not([aria-disabled="true"]):not([readonly]) {
  border-color: var(--color-border-strong);
}

.input:focus {
  outline: none;
}

.input:focus-visible,
.input:focus {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.input[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  opacity: 0.85;
}

.input[readonly] {
  background: var(--color-surface-soft);
}

/* ---- Error / success states ------------------------------------------- */
.input[aria-invalid="true"],
.input.input--error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.input[aria-invalid="true"]:focus-visible,
.input.input--error:focus-visible {
  box-shadow: var(--shadow-focus-danger);
}

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

/* ---- Sizes ------------------------------------------------------------- */
.input--sm {
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.input--lg {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Select inherits .input base; add caret affordance. */
select.input {
  padding-inline-end: calc(var(--space-3) + 18px);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 55%,
    calc(100% - 9px) 55%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  color: var(--color-text);
}

[dir="rtl"] select.input {
  padding-inline-end: calc(var(--space-3) + 18px);
  background-position:
    14px 55%,
    9px 55%;
}

textarea.input {
  min-height: calc(var(--tap-target-min) * 2);
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

/* ---- Label / help / error --------------------------------------------- */
.input-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-tight);
}

.input-label--required::after {
  content: "*";
  color: var(--color-danger);
  font-weight: var(--font-weight-700);
}

.input-help {
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.input-error {
  margin-block-start: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-normal);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ---- Input group (icon + input) --------------------------------------- */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.input-group > .input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.input-group__icon {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  pointer-events: none;
  font-size: 1em;
}

.input-group:has(.input-group__icon:first-child) > .input,
.input-group > .input-group__icon + .input {
  padding-inline-start: calc(var(--space-3) + 20px);
}

/* Suffix icon — second <span class="input-group__icon"> at end */
.input-group__icon--trailing {
  inset-inline-start: auto;
  inset-inline-end: var(--space-3);
}

.input-group:has(.input-group__icon--trailing) > .input {
  padding-inline-end: calc(var(--space-3) + 20px);
}

/* ---- Field wrapper (stack label + input + help) ----------------------- */
.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-end: var(--space-3);
}

.input-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}