/* =============================================================
   SETTINGS (unter Profil)
   ============================================================= */
.settings-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface);
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%;
  padding: 14px 16px; text-align: left;
  border: none; background: none; color: var(--text);
  font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
/* Wenn zwischen zwei Rows ein Nicht-Row-Element steht (z.B. der
   aufklappbare .settings-row-nested-Block fuer Konnektoren), bricht
   der + -Adjacency-Selector. Daher zusaetzlich: jede direkte
   Child-Row der .settings-list ausser der ersten kriegt eine Border. */
.settings-list > .settings-row:not(:first-child) { border-top: 1px solid var(--border); }
.settings-row:hover { background: var(--surface2); }
.settings-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row-title { font-family: var(--font-display); font-size: var(--fs-body); }
.settings-row-sub   { font-size: var(--fs-small); color: var(--muted); }
.settings-row-arrow { color: var(--muted-deep); font-size: 18px; line-height: 1; }
.settings-row-danger .settings-row-title { color: var(--danger); }
/* Admin-Row: dezenter Primary-Akzent, signalisiert privilegierten Bereich. */
.settings-row-admin .settings-row-title { color: var(--primary); }
/* iOS-style Toggle fuer Notifications-Row. Visualisiert den
   Subscription-Status (an/aus/nicht verfuegbar). Click-Handling sitzt
   auf der ganzen Row, damit der Tap-Target gross bleibt. */
.notify-toggle {
  flex-shrink: 0;
  width: 44px; height: 26px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  position: relative;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.notify-knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--text);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease);
}
.notify-toggle.on { background: var(--primary); border-color: transparent; }
.notify-toggle.on .notify-knob { transform: translateX(18px); background: #fff; }
.notify-toggle.busy .notify-knob { animation: notify-pulse 700ms ease-in-out infinite; }
@keyframes notify-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.notify-toggle.disabled { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .notify-knob { transition: transform 0s, background 0s; }
  .notify-toggle.busy .notify-knob { animation: none; }
}

/* Konnektoren: jetzt verschachtelt unter "Konto" — zwei Ebenen Aufklappen.
   Ebene 0: Konto-Section selbst (Standard-Settings-Row Padding 16px)
   Ebene 1: Konnektoren-Toggle-Row (16px) → klappt #connectors-content auf
   Ebene 2: Strava-Row INNERHALB connectors-content (28px Indent)
   Ebene 3: Sync/Disconnect-Rows innerhalb connector-actions (44px Indent) */

/* Nested wrapper unter dem Konnektoren-Toggle. Border-top trennt visuell
   vom Toggle, gleiche Hintergrundfarbe wie der Container. */
.settings-row-nested {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.settings-row-nested > .settings-row {
  padding-left: 28px;       /* Strava-Row ist Ebene 2 */
  border-top: none;          /* eigener border-top oben drueber */
}

/* Sub-Action-Liste innerhalb der Strava-Card (Ebene 3). */
.connector-actions {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg, var(--surface));
}
.connector-actions .settings-row {
  padding-left: 44px;        /* Ebene 3, doppelt eingerueckt */
}
.connector-actions .settings-row:first-child { border-top: none; }

/* Spinner auf dem Sync-Pfeil ↻. Nur waehrend der Sync laeuft. */
.settings-row-arrow.spinning {
  display: inline-block;
  animation: connector-spin 900ms linear infinite;
}
@keyframes connector-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.settings-row-busy { opacity: 0.6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .settings-row-arrow.spinning { animation: none; }
}

/* Konnektoren: Status-Pill rechts in der Row.
   pill-action  = noch nicht verbunden, ruft Connect-Flow auf
   pill-ok      = verbunden, dezent
   pill-warn    = Reauth noetig, faellt auf */
.connector-pill {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface2);
  white-space: nowrap;
}
.connector-pill.pill-action {
  color: #fff;
  background: var(--primary);
  border-color: transparent;
}
/* "Verbunden" — gruen, themenuebergreifend gleich, damit das
   "Alles-OK"-Signal eindeutig ist (statt sich mit Theme-Akzentfarbe
   zu mischen). */
.connector-pill.pill-ok {
  color: #fff;
  background: #16a34a;
  border-color: transparent;
}
.connector-pill.pill-warn {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

/* Chevron rechts neben der Pille. Dreht beim Aufklappen 90° nach unten.
   .connector-head-expanded wird beim Aufklappen einer aufklappbaren
   Settings-Row gesetzt — funktioniert fuer den Konnektoren-Toggle UND
   die Strava-Row. */
.connector-chevron {
  flex-shrink: 0;
  color: var(--muted-deep);
  font-size: 22px;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease);
}
.connector-head-expanded .connector-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .connector-chevron { transition: none; }
}

/* Sync-Status-Banner ueber den Sync-Rows — bleibt persistent, ueberlebt
   Tab-Wechsel + Re-Renders, signalisiert klar Erfolg/Warnung/Fehler. */
.connector-sync-status {
  padding: 10px 16px 10px 28px;
  font-size: var(--fs-small);
  line-height: 1.35;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  word-break: break-word;
}
.connector-sync-status-success { color: #16a34a; }
.connector-sync-status-warn    { color: #d97706; }
.connector-sync-status-error   { color: var(--danger); }
.connector-sync-status-info    { color: var(--muted); }