/* APEX COMPONENT: einstellungen
   Klassen: .apex-einst-tabs-bar .apex-einst-tab
            .apex-einst-shell .apex-einst-l3 .apex-einst-l3-link .apex-einst-l3-eyebrow
            .apex-einst-stage .apex-einst-stage-head .apex-einst-stage-crumb .apex-einst-stage-title .apex-einst-stage-lede
            .apex-einst-cards .apex-einst-card .apex-einst-card-s .apex-einst-card-m .apex-einst-card-l
            .apex-einst-field .apex-einst-field-label .apex-einst-field-sub .apex-einst-field-control .apex-einst-input .apex-einst-textarea .apex-einst-select .apex-einst-switch
            .apex-einst-card-meta .apex-einst-card-actions .apex-einst-save .apex-einst-reset
            .apex-einst-loading .apex-einst-error .apex-einst-empty .apex-einst-mount
   Verwendet: tokens.css (alle Brand-/Surface-/Text-/Space-/Type-Variablen)
   Mockup: docs/redesign/mockups/02_cards.html, 04_tables.html, 03_forms.html
   Verboten: kein style="" auf Elementen, die diese Klassen tragen
*/

/* ── L2 Tabbar (Bereich) ────────────────────────────────── */
.apex-einst-tabs-bar {
  display: flex;
  gap: 0;
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.apex-einst-tabs-bar .apex-einst-tab {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font: var(--type-control-strong);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .15s ease, border-bottom-color .15s ease;
}
.apex-einst-tabs-bar .apex-einst-tab:hover {
  color: var(--text-primary);
}
.apex-einst-tabs-bar .apex-einst-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

/* ── Shell: L3-Sidebar + Stage ──────────────────────────── */
.apex-einst-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  background: var(--bg);
  min-height: 100%;
}

/* ── L3 Sidebar ─────────────────────────────────────────── */
.apex-einst-l3 {
  background: var(--surface);
  border-right: 1px solid var(--separator);
  padding: var(--space-5) 0;
  overflow-y: auto;
}
.apex-einst-l3-eyebrow {
  padding: 0 var(--space-5) var(--space-2);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.apex-einst-l3-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  font: var(--type-control);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-left-color .12s ease;
}
.apex-einst-l3-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.apex-einst-l3-link.active {
  color: var(--brand-blue);
  background: var(--semantic-blue-tint);
  border-left-color: var(--brand-blue);
  font: var(--type-control-strong);
  letter-spacing: var(--tracking-normal);
}
.apex-einst-l3-link .apex-einst-l3-count {
  margin-left: auto;
  font: var(--type-mono-small);
  letter-spacing: var(--tracking-normal);
  color: var(--text-tertiary);
}

/* ── Stage (Inhalt rechts) ──────────────────────────────── */
.apex-einst-stage {
  padding: var(--space-6) var(--space-7);
  overflow-y: auto;
}
.apex-einst-stage-head {
  margin-bottom: var(--space-5);
  max-width: 760px;
}
.apex-einst-stage-crumb {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.apex-einst-stage-title {
  font: var(--type-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.apex-einst-stage-lede {
  font: var(--type-body);
  color: var(--text-secondary);
  margin: 0;
}

/* ── Card-Stapel ────────────────────────────────────────── */
.apex-einst-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 760px;
}
.apex-einst-card { /* erbt von .apex-card via Klassen-Kombination */ }
.apex-einst-card-s { max-width: 440px; }
.apex-einst-card-m { max-width: 640px; }
.apex-einst-card-l { max-width: 100%; }

/* Card-Head-Variante mit Eyebrow + Untertitel */
.apex-einst-card .apex-card-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.apex-einst-card .apex-card-head-title {
  font: var(--type-h4);
  letter-spacing: var(--tracking-tight);
}
.apex-einst-card-sub {
  font: var(--type-meta);
  letter-spacing: var(--tracking-normal);
  color: var(--text-tertiary);
}

/* ── Field-Row ──────────────────────────────────────────── */
.apex-einst-field {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--separator);
}
.apex-einst-field:first-child { padding-top: 0; }
.apex-einst-field:last-child  { padding-bottom: 0; border-bottom: 0; }

.apex-einst-field-label {
  font: var(--type-control-strong);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  padding-top: 8px;
}
.apex-einst-field-sub {
  display: block;
  font: var(--type-meta);
  letter-spacing: var(--tracking-normal);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.apex-einst-field-control { min-width: 0; }

/* Felder ohne Label-Spalte (Textarea, breite Inputs) */
.apex-einst-field-stack {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.apex-einst-field-stack .apex-einst-field-label { padding-top: 0; }

/* ── Form-Controls (gemäß Mockup 03_forms) ──────────────── */
.apex-einst-input,
.apex-einst-select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: var(--type-control);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-input);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.apex-einst-input.is-mono { font: var(--type-control-mono); }
.apex-einst-input:focus,
.apex-einst-select:focus,
.apex-einst-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-focus);
}
.apex-einst-input[readonly] {
  background: var(--bg);
  color: var(--text-secondary);
  cursor: default;
}
.apex-einst-input.is-narrow { max-width: 140px; }
.apex-einst-input.is-time  { max-width: 110px; }
.apex-einst-input.is-num   { max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

.apex-einst-textarea {
  width: 100%;
  min-height: 132px;
  padding: 10px 12px;
  font: var(--type-control);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-input);
  resize: vertical;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* iOS-Switch (Toggle) */
.apex-einst-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.apex-einst-switch input { position: absolute; opacity: 0; pointer-events: none; }
.apex-einst-switch-track {
  width: 44px; height: 26px;
  background: var(--separator-strong);
  border-radius: 999px;
  transition: background .15s ease;
  position: relative;
  flex-shrink: 0;
}
.apex-einst-switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.08);
  transition: transform .15s ease;
}
.apex-einst-switch input:checked + .apex-einst-switch-track { background: var(--semantic-green); }
.apex-einst-switch input:checked + .apex-einst-switch-track::after { transform: translateX(18px); }
.apex-einst-switch-label {
  font: var(--type-control);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
}

/* Inline-Test-Button (z. B. SMTP testen) */
.apex-einst-inline-action {
  margin-top: var(--space-2);
}

/* ── Card-Foot (Save + Meta) ────────────────────────────── */
.apex-einst-card .apex-card-foot {
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}
.apex-einst-card-meta {
  flex: 1;
  font: var(--type-meta);
  letter-spacing: var(--tracking-normal);
  color: var(--text-tertiary);
  font-style: italic;
}
.apex-einst-card-actions {
  display: flex;
  gap: var(--space-2);
}
.apex-einst-save,
.apex-einst-reset {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-button);
  font: var(--type-button);
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.apex-einst-save {
  background: var(--brand-blue);
  color: #FFFFFF; /* COLOR-OK: weiß-auf-Akzent Button-Text */
}
.apex-einst-save:hover:not(:disabled) { background: var(--brand-blue-hover); }
.apex-einst-save:disabled { opacity: .45; cursor: not-allowed; }
.apex-einst-reset {
  background: transparent;
  color: var(--text-secondary);
}
.apex-einst-reset:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.apex-einst-reset:disabled { opacity: .35; cursor: not-allowed; }

/* ── Status-Container ───────────────────────────────────── */
.apex-einst-loading,
.apex-einst-error,
.apex-einst-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  font: var(--type-control);
  letter-spacing: var(--tracking-normal);
  color: var(--text-tertiary);
}
.apex-einst-error { color: var(--semantic-red); }

/* ── Mount für eingebettete Renderer (Funktionsrollen, Steuer-Subjekte) ── */
.apex-einst-mount {
  display: block;
}
.apex-einst-mount > .apex-empty {
  padding: var(--space-5);
  font: var(--type-control);
  color: var(--text-tertiary);
}

/* ── Inline-Form-Validierungsfehler (Funktionsrollen §8-Override) ────────── */
.apex-form-error {
  color: var(--semantic-red);
  display: block;
  margin-top: 4px;
}
.apex-form-error:empty { display: none; }

/* ── Schmale Viewports (< 900 px): L3 wird zu horizontalem Chip-Row ── */
@media (max-width: 900px) {
  .apex-einst-shell {
    grid-template-columns: 1fr;
  }
  .apex-einst-l3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--separator);
  }
  .apex-einst-l3-eyebrow { display: none; }
  .apex-einst-l3-link {
    width: auto;
    padding: 6px 12px;
    border: 1px solid var(--separator-strong);
    border-left-width: 1px;
    border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .apex-einst-l3-link.active {
    border-color: var(--brand-blue);
    background: var(--semantic-blue-tint);
  }
  .apex-einst-stage { padding: var(--space-5) var(--space-4); }
  .apex-einst-field { grid-template-columns: 1fr; }
  .apex-einst-field-label { padding-top: 0; }
}