/* IntegrationBuddy Freigabe – seitenspezifische Ergänzungen zum Design-System 1.0 (ib.all.css) */

.approval { max-width: 1280px; margin-inline: auto; padding: var(--sp-6) var(--sp-7) var(--sp-9); }
.approval__section { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-4); }
.approval__section:first-of-type { margin-top: var(--sp-2); }
.approval__section .eyebrow { margin: 0; }
.approval__section .h3 { margin: 0 auto 0 0; }
.approval__empty { background: var(--color-canvas); border: var(--line) dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.approval__empty .empty-state { padding: var(--sp-7) var(--sp-5); }

/* Dateiname: Grotesk laut Design-System, lange Namen umbrechen */
.file-card__name { overflow-wrap: anywhere; }
.file-card__actions .btn { flex: 1 1 auto; }

/* Prüfung im Modal */
.modal__pane--preview { width: 45%; }
.modal__pane--chunks { width: 55%; }
.modal__body { flex: 1 1 auto; overflow: auto; padding: var(--sp-5); }
.modal__body--preview { display: flex; align-items: flex-start; justify-content: center; background: var(--color-surface); }
.modal__body--preview iframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; border-radius: var(--radius-sm); }
.modal__body--preview img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.modal__body--preview pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.modal__title { font-size: var(--text-sm); color: var(--color-ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__title strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.modal__state { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* Abschnitte (Parent) und Teile (Child) */
.chunk-parent__label .cluster { gap: 6px; }
.chunk__label .cluster { gap: 8px; }
.chunk__label .btn--icon.btn--sm { width: 26px; height: 26px; min-height: 0; padding: 0; }
.chunk-parent__label .btn--icon.btn--sm { width: 26px; height: 26px; min-height: 0; padding: 0; }
.btn--icon svg { width: 16px; height: 16px; }
.chunks__add { margin-top: var(--sp-3); }

/* Ablehnen-Dialog: Grund als Textfeld */
.dialog__box .form-group { margin-bottom: var(--sp-4); }

@media (max-width: 900px) {
  .approval { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .modal { flex-direction: column; height: 96vh; width: 96vw; }
  .modal__pane--preview, .modal__pane--chunks { width: 100%; }
  .modal__pane--preview { max-height: 40%; }
  .modal__pane + .modal__pane { border-left: 0; border-top: var(--line) solid var(--color-border); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* Login: Hinweis vom Formular absetzen */
.login-card .notice { margin-bottom: var(--sp-5); }