/* sections/vision/vision.css — LifeOn Vision Flotten-Cockpit (Tab „LifeOn Vision")
 *
 * Read-only Cockpit (P1): Toolbar (Flotten-Zähler + Quickstart-Warnung) + Karten-
 * Raster je Tenant (SKU/Ring/Version/Domain/Modul-Chips). Self-scoped unter
 * `.vision-root` — die Section (vision.js) setzt die Klasse auf #tab-content-vision;
 * kein Styling über Shell-/Section-Vorfahren (check:css-scope).
 * Breakpoints (repo-Standard): Desktop ≥1400 · Notebook 1000–1399 · Tablet 600–999 · Mobile <600.
 */

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.vision-root .vision-tb-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.vision-root .vision-tb-h { font-size: var(--font-size-md); color: var(--color-text); }
.vision-root .vision-count {
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
  background: var(--color-accent-bg); border-radius: var(--radius-sm, 4px);
  padding: var(--space-px) var(--space-2);
}
.vision-root .vision-tb-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.vision-root .vision-warn { color: var(--status-warning-fg); font-weight: 600; }

/* ── Karten-Raster ───────────────────────────────────────────────────────── */
.vision-root .vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ── Tenant-Karte ────────────────────────────────────────────────────────── */
.vision-root .vision-card {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 10px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vision-root .vision-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.vision-root .vision-card-title { margin: 0; font-size: var(--font-size-md); color: var(--color-text); }
.vision-root .vision-status {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.vision-root .vision-status--aktiv { color: var(--status-success-fg); border-color: var(--status-success-fg); }

/* ── Meta-Liste (SKU · Ring · Version) ───────────────────────────────────── */
.vision-root .vision-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.vision-root .vision-meta > div { display: flex; flex-direction: column; gap: var(--space-xxs); }
.vision-root .vision-meta dt { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.vision-root .vision-meta dd { margin: 0; font-size: var(--font-size-sm); color: var(--color-text); font-variant-numeric: tabular-nums; }

.vision-root .vision-domain { font-size: var(--font-size-sm); color: var(--color-accent); text-decoration: none; word-break: break-all; }
.vision-root .vision-domain:hover { text-decoration: underline; }

/* ── Modul-Chips ─────────────────────────────────────────────────────────── */
.vision-root .vision-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.vision-root .vision-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);
}
.vision-root .vision-chip--off {
  background: var(--color-bg-muted, #f3f2f1);
  color: var(--color-text-muted);
  opacity: 0.7;
  text-decoration: line-through;
}

/* ── Responsive (vier Breakpoints) ───────────────────────────────────────── */
@media (min-width: 1400px) { .vision-root .vision-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 1399px) { .vision-root .vision-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (max-width: 999px)  { .vision-root .vision-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); } }
@media (max-width: 599px)  { .vision-root .vision-grid { grid-template-columns: 1fr; } .vision-root .vision-meta { gap: var(--space-3); } }