/* ============================================================
   ui-forms.css

   Formularfelder, Passwortpruefung und die Zeilenliste fuer
   Kisteninhalte (core/item-rows.js, scanner/content-editor.js).
   ============================================================ */

/* ── Formularfeld ─────────────────────────────────────────── */

.field { margin-bottom: .75rem; }

.field__input {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--surface-2, #1d2f45);
  border: 1px solid rgba(0, 160, 221, .22);
  border-radius: 10px;
  color: var(--text-1, #f0f8ff);
  /* 16px verhindert den Auto-Zoom auf iOS beim Fokussieren */
  font-size: 16px;
}
.field__input.is-error {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .2);
}
.field__input.is-ok {
  border-color: rgba(34, 211, 165, .4);
  box-shadow: 0 0 0 3px rgba(34, 211, 165, .15);
}

.field__error {
  color: #f43f5e;
  font-size: .8rem;
  margin-top: .35rem;
}
.field__error[hidden] { display: none; }

/* ── Formular im Modal ────────────────────────────────────── */

.modal-box--form { width: min(92vw, 420px); }

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
}

.form-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3, #4a7a9b);
}

.form-input {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--surface-2, #1d2f45);
  border: 1px solid var(--border-2, rgba(0,160,221,.2));
  border-radius: 10px;
  color: var(--text-1, #f0f8ff);
  /* 16px verhindert Auto-Zoom auf iOS */
  font-size: 16px;
  margin-top: .3rem;
}

/* Nur fuer Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Zeilenliste fuer Kisteninhalte ───────────────────────── */

.content-editor { margin-bottom: 1rem; }

.content-editor__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: .5rem;
}

.content-editor__hint {
  font-size: .75rem;
  color: var(--text-3, #4a7a9b);
  margin-top: .4rem;
}

.content-row {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  gap: .4rem;
  margin-bottom: .4rem;
  align-items: center;
}

.content-row input {
  padding: .65rem .85rem;
  background: var(--surface-2, #1d2f45);
  border: 1px solid rgba(0, 160, 221, .2);
  border-radius: 8px;
  color: var(--text-1, #f0f8ff);
  font-size: .88rem;
  width: 100%;
}
.content-row .content-amount {
  padding: .65rem .5rem;
  text-align: center;
}

.content-remove {
  width: 32px;
  height: 32px;
  background: rgba(244, 63, 94, .15);
  border: 1px solid rgba(244, 63, 94, .3);
  border-radius: 8px;
  color: #f43f5e;
  cursor: pointer;
  font-size: .9rem;
}

.content-add {
  width: 100%;
  padding: .45rem;
  background: rgba(0, 160, 221, .07);
  border: 1px solid rgba(0, 160, 221, .18);
  border-radius: 8px;
  color: var(--brand, #00a0dd);
  font-size: .82rem;
  cursor: pointer;
  margin-top: .25rem;
}

/* ── Passwortregeln ───────────────────────────────────────── */

.req { color: var(--text-3, #4a7a9b); transition: color .15s ease; }
.req.is-ok { color: #22d3a5; }

.pw-feedback { font-size: .85rem; margin-top: .35rem; min-height: 1.2em; }
.pw-feedback.is-ok    { color: #22d3a5; }
.pw-feedback.is-error { color: #f43f5e; }

input.is-ok    { border-color: rgba(34, 211, 165, .5) !important; }
input.is-error { border-color: rgba(244, 63, 94, .5) !important; }

.pw-toggle.is-active { color: var(--brand, #00a0dd); }