/* =============================================================================
   DESIGN-CONFIG — zentrale Definition der Formular-Steuerelemente
   -----------------------------------------------------------------------------
   Single Source of Truth für das Aussehen ALLER Eingabefelder, Dropdowns,
   Textareas, Checkboxen usw. im ganzen Tool. Hier ändern → gilt überall.
   (Wird NACH app.css geladen und ist damit für Formularfelder maßgeblich.)
   ============================================================================= */
:root{
  /* --- Felder (input/select/textarea) --- */
  --field-min-h: 40px;
  --field-pad-y: 9px;
  --field-pad-x: 12px;
  --field-radius: 9px;
  --field-font-size: 13px;
  --field-bg: var(--surface);
  --field-bg-disabled: var(--surface-2);
  --field-text: var(--ink);
  --field-placeholder: var(--faint);
  --field-border: var(--line);
  --field-border-hover: #c3ccd2;
  --field-border-focus: var(--accent);
  --field-ring: 0 0 0 3px var(--accent-soft);
  /* --- Checkbox/Radio --- */
  --check-size: 17px;
  --check-radius: 5px;
  --check-on-bg: var(--accent);
}
.app[data-theme="nacht"]{ --field-border-hover:#33505c; }

/* Textfelder / Zahlen / Datum / Suche / Passwort / E-Mail + Select + Textarea */
.app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.app select,
.app textarea{
  font: inherit;
  font-size: var(--field-font-size);
  color: var(--field-text);
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  padding: var(--field-pad-y) var(--field-pad-x);
  min-height: var(--field-min-h);
  line-height: 1.4;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
  -webkit-appearance: none;
  appearance: none;
}
.app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):hover,
.app select:hover,
.app textarea:hover{ border-color: var(--field-border-hover); }

.app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus,
.app select:focus,
.app textarea:focus{
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-ring);
}
.app input::placeholder,
.app textarea::placeholder{ color: var(--field-placeholder); opacity: 1; }

.app input:disabled, .app select:disabled, .app textarea:disabled{
  background-color: var(--field-bg-disabled);
  color: var(--muted);
  cursor: not-allowed;
}

/* Select: eigener Pfeil (einheitlich, theme-fähig via currentColor) */
.app select{
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D707C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

/* Textarea: höher, vertikal skalierbar */
.app textarea{ min-height: 84px; line-height: 1.55; resize: vertical; }

/* Datum: konsistenter Kalender-Indikator */
.app input[type=date]{ cursor: pointer; }

/* Datei-Upload */
.app input[type=file]{ font-size: var(--field-font-size); color: var(--muted); }

/* Checkbox/Radio — einheitlicher Look (ersetzt Browser-Default) */
.app input[type=checkbox], .app input[type=radio]{
  -webkit-appearance: none; appearance: none;
  width: var(--check-size); height: var(--check-size);
  border: 1.6px solid var(--field-border); background: var(--field-bg);
  border-radius: var(--check-radius); cursor: pointer; display: inline-grid; place-content: center;
  transition: border-color .12s, background-color .12s;
  flex: 0 0 var(--check-size);
}
.app input[type=radio]{ border-radius: 50%; }
.app input[type=checkbox]:hover, .app input[type=radio]:hover{ border-color: var(--field-border-hover); }
.app input[type=checkbox]:checked, .app input[type=radio]:checked{ background: var(--check-on-bg); border-color: var(--check-on-bg); }
.app input[type=checkbox]:checked::after{ content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.app input[type=radio]:checked::after{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.app input[type=checkbox]:focus-visible, .app input[type=radio]:focus-visible{ outline: none; box-shadow: var(--field-ring); }