/* 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 (EINE Flex-Zeile: Info links, CTA rechts) ───────────────────────
   .app-page-toolbar ist selbst kein Flex-Container → eigene .vision-tb-Zeile. */
.vision-root .vision-tb { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; flex-wrap: nowrap; }
/* Fill + Fixed: Info wächst in den Restplatz (flex-basis 0 → reserviert NICHTS,
   sonst schiebt die Content-Breite die Aktionen aus dem Viewport), Aktionen
   behalten ihre Eigenbreite. Kein margin-auto (kollidiert mit flex-grow). */
.vision-root .vision-tb-info { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
.vision-root .vision-tb-h { font-size: var(--font-size-md); font-weight: 600; 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); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vision-root .vision-warn { color: var(--status-warning-fg); font-weight: 600; }
/* Aktions-Gruppe rechts: primärer „Neuer Tenant" + sekundäres „Testversion zuweisen". */
.vision-root .vision-tb-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* ── 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);
  cursor: pointer;
  transition: border-color var(--motion-fast, 140ms) var(--motion-ease, ease),
              box-shadow var(--motion-fast, 140ms) var(--motion-ease, ease),
              transform var(--motion-fast, 140ms) var(--motion-ease, ease);
}
/* Premium-Affordance: die Karte IST ein Button (role=button) — Hover-Lift +
   Fokus-Ring bringen sie auf das Niveau der Drawer (Kyle-Feedback 24.07.). */
.vision-root .vision-card:hover {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-8, 0 4px 12px rgba(0, 0, 0, 0.10));
  transform: translateY(-1px);
}
.vision-root .vision-card:focus-visible {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 2px var(--brand-default);
}
@media (prefers-reduced-motion: reduce) {
  .vision-root .vision-card { transition: none; }
  .vision-root .vision-card:hover { transform: none; }
}
.vision-root .vision-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.vision-root .vision-card-headmain { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.vision-root .vision-card-title { margin: 0; font-size: var(--font-size-md); color: var(--color-text); }
.vision-root .vision-card-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Health-Warndot vor dem Titel — nur bei nicht-gesunden Stamps (Problem poppt). */
.vision-root .vision-health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-warning-fg, #b8860b); margin-right: var(--space-1-5); vertical-align: middle; }
.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);
}
/* Lebenszyklus-Status (lod_visiontenant): warm/trial/live/suspended/offboarded. */
.vision-root .vision-status--live { color: var(--status-success-fg); border-color: var(--status-success-fg); }
.vision-root .vision-status--trial { color: var(--status-info-fg); border-color: var(--status-info-fg); }
.vision-root .vision-status--suspended { color: var(--status-warn-fg); border-color: var(--status-warn-fg); }
/* warm/offboarded/unbekannt bleiben im muted-Grundton der Basisklasse. */

/* ── 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;
}
/* „individuell": Stamp hat Erweiterungen/abweichende Einstellungen (Akzent). */
.vision-root .vision-chip--indiv { background: var(--color-accent-bg); color: var(--color-accent); font-weight: 600; }

/* ── 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); }
  /* Toolbar darf auf Mobile umbrechen; Aktions-Buttons rücken volle Breite. */
  .vision-root .vision-tb { flex-wrap: wrap; }
  .vision-root .vision-tb-actions { margin-left: 0; width: 100%; }
  .vision-root .vision-tb-actions .app-cta-btn { flex: 1 1 0; justify-content: center; }
}