/* 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; }

/* ── Laufende Betriebs-Ops (LoD.VisionOps) ───────────────────────────────────
   Eine Op wird beim Control-Plane-Worker nur EINGEREIHT und läuft Minuten. Die
   Karte zeigt das solange als Verlaufs-Pille mit Spinner und ist gesperrt (kein
   Klick, kein Tab-Stop) — sonst wirkt die Oberfläche, als sei nichts passiert,
   und dieselbe Op ließe sich mehrfach auslösen. Fehlgeschlagene Ops bleiben als
   Pille sichtbar; solche Karten bleiben absichtlich anklickbar. */
.vision-root .vision-card.is-busy {
  cursor: progress;
  border-color: var(--status-info-fg);
  background: var(--color-bg-subtle, var(--color-bg-card));
}
.vision-root .vision-card.is-busy:hover { transform: none; box-shadow: none; }
.vision-root .vision-card.has-opfehler { border-color: var(--status-error-fg, #a4262c); }
.vision-root .vision-status--busy {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  text-transform: none; letter-spacing: normal;
  color: var(--status-info-fg); border-color: var(--status-info-fg);
}
.vision-root .vision-status--opfehler {
  text-transform: none; letter-spacing: normal;
  color: var(--status-error-fg, #a4262c); border-color: var(--status-error-fg, #a4262c);
}
/* Spinner: eigene Klasse, nutzt die Basis-Keyframes `lod-spin` (base.css) —
   ein generisches `spin` würde von vendor-CSS überschrieben. Auch im Drawer
   verwendet (Header-Pille + Hinweiszeile), deshalb NICHT unter .vision-card. */
.vision-op-spinner {
  display: inline-block; flex: 0 0 auto;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--status-info-fg);
  animation: lod-spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vision-op-spinner { animation-duration: 2400ms; }
}
.vision-root .vision-tb-busy {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  color: var(--status-info-fg); font-weight: 600;
}
/* Drawer-Hinweiszeile (vd-drawer, außerhalb .vision-root → eigener Scope). */
.vd-op-hinweis {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--status-info-fg);
  border-radius: var(--radius-md, 6px);
  background: var(--color-accent-bg, var(--color-bg-subtle));
  font-size: var(--font-size-sm);
}
.vd-op-hinweis .vision-op-spinner { margin-top: 3px; }

/* ── Archiv-Ansicht (offboardete Tenants) ────────────────────────────────────
   Offboardete gehören nie in die laufende Flotte; der Schalter zeigt genau sie.
   Aktiver Schalter = gedrückter Zustand (aria-pressed), damit man beim Blick auf
   die Toolbar sofort weiß, welche Menge man sieht. Archiv-Karten bleiben lesbar,
   treten aber optisch zurück (Vergangenheit, kein Betriebszustand). */
.vision-root .vision-archiv-btn.is-active {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}
.vision-root .vision-card.is-archiv {
  border-style: dashed;
  background: var(--color-bg-muted, var(--color-bg-card));
}
.vision-root .vision-card.is-archiv .vision-card-title { color: var(--color-text-muted); }

/* ── 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; }
}