/**
 * imex-drawer.css — generischer Export/Import-Assistent (imex-drawer.js).
 *
 * Self-scoped über `.imex-root` (das JS setzt die Klasse auf die Body-Wurzel) — keine
 * Regel hängt an einer Drawer- oder Section-Hülle, damit der Assistent überall montierbar
 * bleibt (harte Regel „Modul-CSS ist self-scoped", Gate check:css-scope).
 *
 * ★ JEDE `<button>`-REGEL TRÄGT `.imex-root` ALS PRÄFIX. Der globale Reset
 * `.app-scope button { border:none; background:none; padding:0 }` hat Spezifität (0,1,1)
 * und plättet jede Ein-Klassen-Regel (0,1,0) — die Knöpfe wären randlos und ohne Polsterung.
 * Gate: `npm run audit:button-reset`.
 *
 * ★ NATIVES `<select>` BRAUCHT EIGENE OPTIK. Die Zuordnungs-Tabelle nutzt bewusst
 * `data-cs-manual` (kein CustomSelect-Umbau, sonst 30+ Popover) — damit greift auch keine
 * `.cs-trigger`-Regel, und ohne die Regeln unten sähe die Auswahl wie Fließtext aus. Das ist
 * derselbe Fallstrick, der im Datenschutz-Drawer sieben Auswahlfelder randlos gemacht hat.
 */

/* ── Grundraster ─────────────────────────────────────────────────────────── */
.app-scope .imex-root { display: flex; flex-direction: column; width: 100%; }

.app-scope .imex-schritt {
  display: flex;
  flex-direction: column;
  gap: var(--space-16, 16px);
  padding: var(--space-16, 16px);
}

.app-scope .imex-hinweis-titel {
  font-weight: 600;
  margin-bottom: var(--space-4, 4px);
}
.app-scope .imex-hinweis-pflicht {
  margin-top: var(--space-8, 8px);
  color: var(--text-secondary, #424242);
  font-size: var(--font-size-200, 12px);
}

.app-scope .imex-vorlage { display: flex; justify-content: flex-start; }
.app-scope .imex-zone { min-height: 140px; }

/* ── Bilanz (Kacheln) ────────────────────────────────────────────────────── */
.app-scope .imex-bilanz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8, 8px);
}
.app-scope .imex-bilanz-zelle {
  border: 1px solid var(--border-neutral, #e0e0e0);
  border-radius: var(--radius-medium, 6px);
  padding: var(--space-12, 12px);
  text-align: center;
  background: var(--surface-card, #fff);
}
.app-scope .imex-bilanz-zahl { font-size: var(--font-size-600, 24px); font-weight: 600; line-height: 1.1; }
.app-scope .imex-bilanz-label { font-size: var(--font-size-200, 12px); color: var(--text-secondary, #424242); }
.app-scope .imex-ton-gruen  .imex-bilanz-zahl { color: var(--status-success-fg, #0e700e); }
.app-scope .imex-ton-blau   .imex-bilanz-zahl { color: var(--status-info-fg, #1a4b76); }
.app-scope .imex-ton-rot    .imex-bilanz-zahl { color: var(--status-danger-fg, #c42b1c); }
.app-scope .imex-ton-grau   .imex-bilanz-zahl { color: var(--text-secondary, #424242); }

.app-scope .imex-warnung { font-size: var(--font-size-200, 12px); }

/* ── Zuordnung ───────────────────────────────────────────────────────────── */
.app-scope .imex-abschnitt-titel {
  font-weight: 600;
  font-size: var(--font-size-300, 14px);
  margin-top: var(--space-8, 8px);
}

.app-scope .imex-zuordnung {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-neutral, #e0e0e0);
  border-radius: var(--radius-medium, 6px);
  overflow: hidden;
}
.app-scope .imex-zuordnung-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8, 8px);
  align-items: center;
  padding: var(--space-8, 8px) var(--space-12, 12px);
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}
.app-scope .imex-zuordnung-zeile:last-child { border-bottom: none; }
.app-scope .imex-zuordnung-zeile.is-geaendert { background: var(--status-info-bg, #eff6fc); }

/* Die Datei-Spalte ist Freitext aus einer fremden Datei — sie darf ellipsieren,
   aber nicht umbrechen und die Zeilenhöhe sprengen. */
.app-scope .imex-zuordnung-datei {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-200, 12px);
}
.app-scope .imex-zuordnung-ziel { min-width: 0; }

/* ★ Eigene Optik für das native Select — siehe Kopf. */
.app-scope .imex-root .imex-select {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-8, 8px);
  border: 1px solid var(--border-neutral, #e0e0e0);
  border-radius: var(--radius-medium, 6px);
  background: var(--surface-input, #fff);
  color: var(--text-primary, #242424);
  font-size: var(--font-size-300, 14px);
  font-family: inherit;
}
.app-scope .imex-root .imex-select:focus-visible {
  outline: 2px solid var(--focus-ring, #1a4b76);
  outline-offset: 1px;
}

/* ── Befunde ─────────────────────────────────────────────────────────────── */
.app-scope .imex-befunde {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 4px);
  max-height: 320px;
  overflow-y: auto;
}
.app-scope .imex-befund {
  border-left: 3px solid var(--border-neutral, #e0e0e0);
  padding: var(--space-4, 4px) var(--space-8, 8px);
  background: var(--surface-subtle, #fafbfc);
  border-radius: 0 var(--radius-small, 4px) var(--radius-small, 4px) 0;
}
.app-scope .imex-befund.imex-aktion-uebergehen { border-left-color: var(--status-danger-fg, #c42b1c); }
.app-scope .imex-befund.imex-aktion-anlegen { border-left-color: var(--status-success-fg, #0e700e); }
.app-scope .imex-befund.imex-aktion-aktualisieren { border-left-color: var(--status-info-fg, #1a4b76); }
.app-scope .imex-befund-kopf {
  display: flex;
  gap: var(--space-8, 8px);
  font-size: var(--font-size-200, 12px);
  color: var(--text-secondary, #424242);
}
.app-scope .imex-befund-zeile { font-weight: 600; }
.app-scope .imex-befund-text { font-size: var(--font-size-200, 12px); }
.app-scope .imex-befund-feld { font-family: var(--font-mono, ui-monospace, monospace); }
.app-scope .imex-art-fehler { color: var(--status-danger-fg, #c42b1c); }
.app-scope .imex-art-warnung { color: var(--status-warning-fg, #9d5d00); }
.app-scope .imex-befund-mehr {
  font-size: var(--font-size-200, 12px);
  color: var(--text-secondary, #424242);
  padding: var(--space-4, 4px) var(--space-8, 8px);
}

/* ── Aktionen ────────────────────────────────────────────────────────────── */
.app-scope .imex-aktionen {
  display: flex;
  gap: var(--space-8, 8px);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Notebook 1000–1399px ────────────────────────────────────────────────── */
@media (min-width: 1000px) and (max-width: 1399px) {
  .app-scope .imex-befunde { max-height: 280px; }
}

/* ── Tablet 600–999px ───────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 999px) {
  .app-scope .imex-befunde { max-height: 240px; }
  .app-scope .imex-bilanz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile <600px ──────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .app-scope .imex-schritt { padding: var(--space-12, 12px); gap: var(--space-12, 12px); }
  /* Zuordnung untereinander: zwei Spalten à 50 % sind auf einem Telefon für einen
     Dateinamen UND eine Auswahl zu schmal — beide würden ellipsieren. */
  .app-scope .imex-zuordnung-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 4px); }
  .app-scope .imex-bilanz { grid-template-columns: minmax(0, 1fr); }
  .app-scope .imex-befunde { max-height: none; }
  .app-scope .imex-aktionen > button { flex: 1 1 100%; }
}