/* components/drawers/vd-drawer.css — LifeOn-Vision-Tenant-Detail (read-only Panel).
 *
 * Self-scoped unter `.vd-body` (das Drawer-JS setzt die Klasse auf den Body-Host).
 * NICHT über `.vision-root` scopen — der Drawer mountet in LoD.drawerContainer(),
 * außerhalb der Section (check:css-scope). Karten/Pills kommen aus den globalen
 * SSOTs (.kat-card / .pill); hier nur die Detail-Zeilen + Modul-Chips.
 * Breakpoints (repo-Standard): Desktop ≥1400 · Notebook 1000–1399 · Tablet 600–999 · Mobile <600.
 */
.vd-body { display: flex; flex-direction: column; gap: var(--space-4); }
.vd-body .vd-hero { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vd-body .vd-hero-title { font-size: var(--font-size-lg, 18px); font-weight: 600; color: var(--color-text); }
.vd-body .vd-head-hint { font-size: var(--font-size-xs); }

.vd-body .vd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.vd-body .vd-row { display: flex; flex-direction: column; gap: var(--space-xxs); }
.vd-body .vd-row dt { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.vd-body .vd-row dd { margin: 0; font-size: var(--font-size-sm); color: var(--color-text); font-variant-numeric: tabular-nums; word-break: break-word; }

.vd-body .vd-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.vd-body .vd-chip {
  font-size: var(--font-size-xs);
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-accent-bg);
  color: var(--color-text-secondary);
}
.vd-body .vd-chip--off {
  background: var(--color-bg-muted, #f3f2f1);
  color: var(--color-text-muted);
  opacity: 0.7;
  text-decoration: line-through;
}

/* Responsive — die 2-spaltige Meta-Liste bricht auf schmalen Slots auf 1 Spalte. */
@media (max-width: 1399px) { .vd-body .vd-meta { gap: var(--space-2-5); } }
@media (max-width: 999px)  { .vd-body .vd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .vd-body .vd-meta { grid-template-columns: 1fr; } }