/* Setup-Assistent (SPEC-0036) — 1:1-Port der Style-Blöcke aus
 * setup/SetupAssistantOverlay.vue (Shell) und
 * setup/SetupAssistantActivityTypesStage.vue (Stage), entscoped.
 * Var-Fallbacks des Bestands unverändert (resiliente Dark-Overlay-Basis). */

.setup-assistant-layer {
  --setup-assistant-app-bg: var(--app-bg, #07111f);
  --setup-assistant-accent: var(--primary, #56d6ee);
  --setup-assistant-surface: color-mix(in srgb, var(--surface, #101b2e) 88%, #050b14 12%);
  --setup-assistant-raised: color-mix(in srgb, var(--surface-elevated, #172640) 88%, var(--setup-assistant-accent) 12%);
  --setup-assistant-control: color-mix(in srgb, var(--surface-elevated, #132238) 90%, var(--setup-assistant-accent) 10%);
  --setup-assistant-text: var(--text, #edf5ff);
  --setup-assistant-muted: var(--text-muted, color-mix(in srgb, var(--setup-assistant-text) 62%, transparent));
  --setup-assistant-border: var(--border, color-mix(in srgb, var(--setup-assistant-text) 18%, transparent));
  --setup-assistant-strong-border: color-mix(in srgb, var(--setup-assistant-accent) 42%, var(--setup-assistant-border) 58%);
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  pointer-events: none;
}

.setup-assistant-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--setup-assistant-app-bg) 20%, transparent);
  backdrop-filter: saturate(0.94);
  pointer-events: auto;
}

.setup-assistant-dialog {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--setup-assistant-text);
  background: var(--setup-assistant-surface);
  border: 1px solid var(--setup-assistant-strong-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--setup-assistant-accent) 24%, transparent),
    0 0 0 6px color-mix(in srgb, var(--setup-assistant-accent) 10%, transparent),
    0 20px 66px color-mix(in srgb, black 30%, transparent);
  pointer-events: auto;
}

.setup-assistant-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: var(--space-3, 12px);
  align-items: start;
  padding: var(--space-4, 18px) var(--space-4, 18px) var(--space-3, 12px);
  background: color-mix(in srgb, var(--setup-assistant-surface) 84%, var(--setup-assistant-accent) 16%);
  border-bottom: 1px solid color-mix(in srgb, var(--setup-assistant-strong-border) 70%, transparent);
}

.setup-assistant-eyebrow {
  margin: 0 0 var(--space-1, 6px);
  color: var(--setup-assistant-accent);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.setup-assistant-header h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.34rem);
  line-height: 1.18;
}

.setup-assistant-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--setup-assistant-border);
  border-radius: var(--radius-md, 8px);
  color: var(--setup-assistant-text);
  background: var(--setup-assistant-control);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.setup-assistant-progress {
  height: 3px;
  background: color-mix(in srgb, var(--setup-assistant-text) 10%, transparent);
}

.setup-assistant-progress span {
  display: block;
  height: 100%;
  background: var(--setup-assistant-accent);
  transition: width 180ms ease;
}

.setup-assistant-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-4, 18px);
}

.setup-assistant-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-3, 14px) var(--space-4, 18px) var(--space-4, 18px);
  border-top: 1px solid var(--setup-assistant-border);
  background: color-mix(in srgb, var(--setup-assistant-surface) 90%, var(--setup-assistant-raised) 10%);
}

.setup-assistant-step-count {
  color: var(--setup-assistant-muted);
  font-size: 0.84rem;
}

.setup-assistant-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}

@media (max-width: 720px) {
  .setup-assistant-dialog {
    width: calc(100vw - 20px);
    max-height: 90vh;
  }

  .setup-assistant-footer {
    grid-template-columns: 1fr;
  }

  .setup-assistant-actions {
    justify-content: stretch;
  }

  .setup-assistant-actions > * {
    flex: 1 1 100%;
  }
}

/* --- ActivityTypes-Stage (SetupAssistantActivityTypesStage.vue) ---------- */

.activity-types-stage { display: flex; flex-direction: column; gap: 16px; }
.activity-types-lead { margin: 0; color: var(--core-color-text-muted); }
.activity-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.activity-types-card { cursor: pointer; padding: 12px; }
.activity-types-card--selected { outline: 2px solid var(--core-color-accent-blue); }
.activity-types-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.activity-types-muted { margin: 6px 0; font-size: 0.85rem; color: var(--core-color-text-muted); }
.activity-types-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.activity-types-own { display: flex; flex-direction: column; gap: 8px; }
.activity-types-own-row { display: flex; gap: 8px; align-items: center; }
.activity-types-own-row input, .activity-types-own-row select { flex: 1; min-width: 0; }
.activity-types-actions { display: flex; justify-content: flex-end; }
.activity-types-result { display: flex; flex-direction: column; gap: 10px; padding: 16px; }