/* ══════════════════════════════════════════════════
   v2 FREMDBIBLIOTHEKEN

   Widgets, die ihr eigenes Markup und ihre eigenen Klassennamen mitbringen
   (Dropzone, Tom Select). Sie lassen sich nicht aus Token aufbauen, nur
   nachziehen — hier gesammelt, damit man an einer Stelle sieht, wo das System
   fremdem Markup folgt.

   Gegenstueck zu assets/styles/ms-vendor.css der Alt-Oberflaeche. Dessen
   Anpassungen greifen auf v2-Seiten NICHT: ms-vendor.css wird allein von
   app.js eingebunden, v2-Seiten laden app-v2.js. Das Ablagefeld der
   Bestelldetailseite stand deshalb ganz ohne eigene Gestaltung da, nur mit dem
   Aussehen, das Dropzone selbst mitliefert.
   ══════════════════════════════════════════════════ */

/* ── Dropzone: Ablagefeld fuer Dateien ──

   ZWEI KLASSEN IM SELEKTOR, und das ist kein Ziererei. Dropzone bringt seine
   eigene Stilkette mit (`dropzone/dist/dropzone.css`), und die wird vom
   Controller IM JAVASCRIPT importiert — AssetMapper haengt sie deshalb zur
   Laufzeit in den Kopf, also NACH jedem statischen Stylesheet. Bei gleicher
   Spezifitaet gewinnt sie damit immer: `min-height: 150px`, `padding: 20px`
   und `margin: 42px 0` am Text blieben stehen, obwohl hier etwas anderes
   stand. Das Ablagefeld war 166px hoch statt 48.

   `.dropzone--compact` ist die eigene Klasse aus order/show — sie hebt die
   Spezifitaet und sagt zugleich, dass diese Form unsere ist und nicht die
   der Bibliothek. */
.dropzone.dropzone--compact {
  /* Dropzone setzt selbst `min-height: 150px` und einen eigenen Rahmen. */
  min-height: auto;
  /* EINE ZEILE, nicht ein Kasten. Vorher --ms-space-5 rundum plus vier
     Textzeilen darin — das Ablagefeld war das groesste Element des
     Abschnitts und stand damit ueber der Dateiliste, um die es geht. Die
     Grenzwerte stehen jetzt als `.form-help` darunter (order/show). */
  padding: var(--ms-space-3) var(--ms-space-4);
  background: var(--ms-bg-secondary);
  /* Gestrichelt und 2px: die Flaeche ist kein Eingabefeld, sondern ein Ziel.
     Die Farbe ist --ms-border-control und nicht --ms-border-light, weil auch
     das ein Bedienelement mit Umriss ist (WCAG 1.4.11, 3:1) — siehe
     designsystem.md Abschnitt 6. */
  border: 2px dashed var(--ms-border-control);
  border-radius: var(--ms-radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ms-transition-base), background-color var(--ms-transition-base);
}
.dropzone.dropzone--compact:hover,
.dropzone.dropzone--compact.dz-drag-hover {
  border-color: var(--ms-accent);
  background: rgba(var(--ms-accent-rgb), var(--ms-tint));
}
.dropzone.dropzone--compact .dz-message {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ms-space-3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--ms-text-small);
  color: var(--ms-text-secondary);
}
/* Das Symbol so gross wie die Textzeile daneben und nicht als Bildmarke:
   in einer Zeile hat es keine eigene Zeile mehr, in der es gross sein
   koennte. Der frueher hier mitgefuehrte `.bi`-Selektor ist entfallen — es
   gibt keine Vorlage mehr, die nicht auf `icon()` umgestellt ist. */
.dropzone.dropzone--compact .dz-message svg {
  width: var(--ms-icon-size-s); height: var(--ms-icon-size-s);
  font-size: var(--ms-icon-size-s);
  color: var(--ms-text-tertiary);
  flex: 0 0 auto;
}
/* Der Knopf im Ablagefeld ist ein `<span>` (das Feld selbst ist anklickbar)
   und braucht deshalb den Zeiger des Feldes, nicht den eigenen. */
.dropzone.dropzone--compact .dz-message .btn-outline { cursor: inherit; }
.dropzone .dz-preview .dz-image { border-radius: var(--ms-radius-sm); }
.dropzone .dz-preview .dz-error-message {
  background: var(--ms-error);
  border-radius: var(--ms-radius-sm);
}
.dropzone .dz-preview .dz-success-mark svg { fill: var(--ms-success); }
.dropzone .dz-preview .dz-error-mark svg { fill: var(--ms-error); }

/* ── Tom Select: Mehrfachauswahl im Auswertungsfilter ── */
.report-card .ts-wrapper { flex: 1 1 auto; min-width: 0; }
.report-card .ts-control {
  border: 1px solid var(--ms-border-light); border-radius: var(--ms-radius-sm);
  padding: var(--ms-space-2) var(--ms-space-3);
  font-size: var(--ms-text-small); background: var(--ms-bg-primary);
}
.report-card .ts-wrapper.focus .ts-control { border-color: var(--ms-accent); }