/* bulk-edit-drawer.css — „Massenbearbeitung"-Drawer (be-*) für Firmen & Kontakte.
   Nur Tokens, keine festen Farben/Breiten. Zweispaltige Feldzeilen (Label |
   Control) stapeln unter der Drawer-Content-Breite (@container drawer). */

.be-body { padding: var(--space-4, 16px); display: flex; flex-direction: column; gap: var(--space-4, 16px); }

.be-lead { margin: 0; color: var(--color-text-secondary, #444); font-size: var(--font-size-sm, 13px); line-height: 1.5; }
.be-lead-muted { color: var(--color-text-muted, #666); }

.be-fields { display: flex; flex-direction: column; }

.be-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--color-border-subtle, #f0f0f0);
}
.be-row:last-child { border-bottom: 0; }

.be-label {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 13px); font-weight: var(--fw-semibold, 600);
  color: var(--color-text-primary, #242424);
}
.be-label-ico { width: 18px; height: 18px; opacity: 0.7; flex: 0 0 auto; }

.be-control { min-width: 0; }
.be-control .app-drawer-select,
.be-control .app-person-field { width: 100%; }

/* Responsive: an der DRAWER-Content-Breite messen (Drawer = @container-Kontext,
   shared-drawer.css: container-name: drawer). Muss am Datei-ENDE stehen
   (Kaskaden-Order, siehe drawer-container-queries-fix). */
@container drawer (max-width: 520px) {
  .be-body { padding: var(--space-3, 12px); }
  .be-row { grid-template-columns: 1fr; align-items: stretch; gap: var(--space-2, 8px); }
}