/* ═══════════════════════════════════════════════════════════════════════════
   App-Formulare und Karten – gemeinsame Bausteine für alle Seiten der App.
   Lag früher nur als <style>-Block in page-stammdaten.php; dadurch waren die
   Felder auf /profile und überall sonst unformatiert. Wird in functions.php
   nach dist/output.css geladen, damit es die Tailwind-Basis überschreiben kann.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Felder ─────────────────────────────────────────────────────────────── */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: #f5f5f4;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #1c1917;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  background: #e7e5e4;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #a8a29e;
  font-weight: 400;
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Auswahlfelder ──────────────────────────────────────────────────────────
   Ein einziger Pfeil (der eigene), nie zusätzlich der des Systems. Rechts muss
   genug Platz bleiben, sonst überlagert der Pfeil lange Optionstexte. Die
   Regeln stehen bewusst hoch genug in der Spezifität, damit Tailwind-Utilities
   wie px-4 den Innenabstand rechts nicht wieder zusammendrücken.
   ───────────────────────────────────────────────────────────────────────── */
select.form-select,
select.input-contrast,
select.input-filled {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.25rem;
  text-overflow: ellipsis;
}

select.form-select::-ms-expand,
select.input-contrast::-ms-expand,
select.input-filled::-ms-expand {
  display: none;
}

/* Höhe: dist/output.css setzt für Selects padding-top/bottom auf 0 und line-height auf 1.
   Ohne Gegenregel fallen die Felder flach zusammen. Hier die Maße der Textfelder zurückholen. */
select.form-select,
select.input-contrast,
select.input-filled {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  line-height: 1.4;
}

/* Felder mit fester Tailwind-Höhe zentrieren über die Höhe, nicht über das Padding */
select.input-contrast.h-7,
select.input-contrast.h-8,
select.input-contrast.h-9,
select.input-contrast.h-10,
select.input-contrast.h-12,
select.form-select.h-9,
select.form-select.h-10 {
  padding-top: 0;
  padding-bottom: 0;
}

/* Kompakte Selects (h-7/h-8) brauchen weniger Pfeilfläche */
select.input-contrast.h-7,
select.input-contrast.h-8 {
  background-position: right 0.375rem center;
  background-size: 1em 1em;
  padding-right: 1.5rem;
}

/* Aufgeklappte Liste: Die Optionen erben sonst die gestauchte Zeilenhöhe des
   geschlossenen Feldes (line-height 1), wodurch Umlaute und Unterlängen
   abgeschnitten werden. Farbe und Größe bewusst gleich wie im Feld. */
select.form-select option,
select.input-contrast option,
select.input-filled option {
  color: #1c1917;
  background: #ffffff;
  font-size: inherit;
  line-height: 1.6;
  padding: 4px 8px;
}

/* ── Karten und Überschriften ───────────────────────────────────────────── */
.settings-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

@media (max-width: 640px) {
  .settings-card {
    padding: 24px;
  }
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 500;
  color: #1c1917;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.section-desc {
  font-size: 13px;
  color: #57534e;
  margin-bottom: 32px;
  max-width: 600px;
  line-height: 1.6;
}

.input-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 8px;
  margin-left: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Upload-Fläche (Profilbild, Dokumente) ──────────────────────────────── */
.upload-zone {
  border: 1px dashed #d6d3d1;
  border-radius: 12px;
  background: #fafaf9;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.upload-zone:hover {
  border-color: #1c1917;
  background: #f5f5f4;
}

/* ── Schalter ───────────────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.toggle-bg {
  width: 36px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 99px;
  transition: background-color 0.2s;
  position: relative;
}

.toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-bg {
  background-color: #1c1917;
}

.toggle-switch input:checked + .toggle-bg .toggle-dot {
  transform: translateX(16px);
}

.toggle-switch input:disabled + .toggle-bg {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Ankernavigation (Stammdaten, Profil) ───────────────────────────────── */
.anchor-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: #57534e;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.anchor-nav-item:hover {
  color: #1c1917;
  background: rgba(0, 0, 0, 0.04);
}

.anchor-nav-item.active {
  color: #ffffff;
  background: #1c1917;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.anchor-nav-item.active i {
  color: #ffffff;
}