/* ─────────────────────────────────────────────────────────────────────────
   biodanza-cockpit — css/mod-backup.css

   Geschichtserzaehlung: Stile des Bau-Pakets "backup" — Sicherung & Sync, Beispieldaten. Praefix .backup-.
   Gehoert NUR diesem Paket (Parallel-Bau-Schutz, DECISION in modules.css).

   Regeln fuer alle Modul-Stile:
     - Farben nur als var(--color-...), Abstaende als var(--space-...) —
       sonst bleibt der Screen im Dunkel- und Ruhig-Modus hell
     - Klassen mit Modul-Praefix, damit nichts in fremde Screens wirkt
     - Ruhiger Modus: :root[data-quiet="true"] .mein-element { ... }
     - Touch-Ziele mindestens 44 px; 360 px Breite ohne horizontales Scrollen

   Aufbau des Screens: Karten-Abschnitte untereinander (Kern .section--card).
   Innerhalb einer Karte trennt der Kern jedes Kind mit einer Linie — hier
   bekommen die Kinder Innenabstand; Warnungen, Knoepfe und Statuszeilen
   stehen ohne Trennlinie direkt unter dem, wozu sie gehoeren.
   ───────────────────────────────────────────────────────────────────────── */

/* Kern: .section + .section hat margin-top UND .stack hat gap → sonst doppelte Luecke (Falle 4) */
.backup-screen > .section + .section { margin-top: 0; }

.backup-screen .section__content > * {
  margin-block: 0;
  padding-block: var(--space-3);
}

/* Ausgeblendeter erster Hinweis (iOS-Sperre) → keine leere Trennlinie davor */
.backup-screen .section__content > [hidden] + * { border-top: none; }

.backup-screen .section__content > .btn,
.backup-screen .section__content > .backup-notice,
.backup-screen .section__content > .backup-status,
.backup-screen .section__content > .backup-actions {
  border-top: none;
  margin-block: var(--space-2);
}

.backup-screen .section__content > .backup-notice,
.backup-screen .section__content > .backup-status { padding: var(--space-3) var(--space-4); }

/* ── Erklaerung oben ── */
.backup-intro__heading {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-semibold);
}

.backup-intro .section__content > p { margin: 0; }
.backup-intro .section__content > * + p { border-top: none; padding-top: 0; }

.backup-last {
  font-weight: var(--font-weight-semibold);
}

/* ── Hinweise und Statuszeilen ── */
.backup-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.backup-notice--warn { background: var(--color-warning-soft); }
.backup-notice--error {
  background: var(--color-warning-soft);
  color: var(--color-danger-text);
  font-weight: var(--font-weight-medium);
}
.backup-notice--success {
  background: var(--color-primary-soft);
  color: var(--color-success-text);
  font-weight: var(--font-weight-semibold);
}

.backup-notice p { margin: 0; }
.backup-notice a {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
}

.backup-status {
  margin: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.backup-status[data-tone="success"] { color: var(--color-success-text); font-weight: var(--font-weight-semibold); }
.backup-status[data-tone="warn"],
.backup-status[data-tone="error"] { color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }

.backup-hint {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* ── Erstellen ── */
.backup-password { gap: var(--space-3); }

.backup-estimate {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.backup-estimate__parts {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.backup-files { display: flex; flex-direction: column; gap: var(--space-2); }
.backup-files__title {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.backup-files__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.backup-file[data-state="saved"] { border-color: var(--color-success); }

.backup-file__text {
  display: flex;
  flex: 1 1 14em;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.backup-file__title { font-weight: var(--font-weight-semibold); }
.backup-file__name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}
.backup-file__name:empty { display: none; }
.backup-file__meta { color: var(--color-text-secondary); font-size: var(--font-size-small); }
.backup-file__action { flex: 0 0 auto; }

/* ── Einspielen ── */
.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.backup-actions--stack { flex-direction: column; }
.backup-actions--stack .btn { width: 100%; }

.backup-restore__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.backup-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.backup-preview p { margin: 0; }
.backup-preview__title {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-semibold);
}
.backup-preview__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.backup-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;   /* Basis-CSS nimmt <ul> die Punkte (Falle 5) */
}

/* ── Fehlende Dateien ── */
.backup-missing {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-missing__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.backup-missing__item:last-child { border-bottom: none; }
.backup-missing__title { min-width: 0; overflow-wrap: anywhere; }
.backup-missing__kind {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
.backup-missing__more { padding-top: var(--space-2); color: var(--color-text-secondary); }

/* ── Ruhiger Modus: groessere Knoepfe kommen vom Kern; Hinweise ruhiger ── */
:root[data-quiet="true"] .backup-notice--warn,
:root[data-quiet="true"] .backup-notice--error { background: var(--color-surface-muted); }

/* ── Tablet: Dateiliste zweispaltig ── */
@media (min-width: 720px) {
  .backup-files__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .backup-actions--stack { flex-direction: row; flex-wrap: wrap; }
  .backup-actions--stack .btn { width: auto; }
}