/* ==========================================================================
 phase-track.css — PhaseTrack (linearer Phasen-Workflow)

 Konsument: web/js/components/drawers/_shared/phase-track.js

 Linearer Phasen-Workflow mit klickbarer naechster Phase. Selektoren
 .phase-track / .pt-phase / .pt-dot / .pt-label etc. — gemeinsam genutzt
 in Wissen-Drawer und potenziell weiteren Workflow-Drawern.

 Aus web/styles/phase-track.css verschoben in
 die Mirror-Topologie zu web/js/components/drawers/_shared/.
 ========================================================================== */

.phase-track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-2) 0;
  font-family: inherit;
}

/* Phase-Item: Dot + Label uebereinander */
.pt-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  flex: 0 0 auto;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
.pt-phase.is-clickable {
  cursor: pointer;
  transition: transform var(--duration-quick) var(--ease-soft);
}
.pt-phase.is-clickable:hover { transform: translateY(-1px); }
.pt-phase.is-clickable:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Dot — kreis mit unterschiedlichen Status-Visuals */
.pt-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  transition: border-color var(--duration-snappy) var(--ease-soft), background var(--duration-snappy) var(--ease-soft), box-shadow var(--duration-snappy) var(--ease-soft);
}
.pt-dot img {
  width: 14px;
  height: 14px;
  display: block;
}

/* Label — Schrift unter dem Dot */
.pt-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: var(--fw-medium, 500);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connector-Linie zwischen den Phasen */
.pt-connector {
  flex: 1 1 auto;
  height: 2px;
  min-width: 24px;
  background: var(--color-border);
  margin: 0 8px;
  position: relative;
  top: -10px;  /* mittig zum Dot, label haengt drunter */
  transition: background var(--duration-snappy) var(--ease-soft);
}

/* ── States ───────────────────────────────────────────────────────────────── */

/* DONE — abgeschlossen, gefuellt grün, Check-Icon */
.pt-phase--done .pt-dot {
  background: var(--status-success-fg);
  border-color: var(--status-success-fg);
}
.pt-phase--done .pt-dot img { filter: brightness(0) invert(1); }
.pt-phase--done .pt-label { color: var(--color-text-secondary); }
.pt-connector--done { background: var(--status-success-fg); }
/* Done direkt vor active: Connector noch gruen */
.pt-connector--active { background: var(--status-success-fg); }

/* ACTIVE — aktuelle Phase, blau gefuellt mit Pulse */
.pt-phase--active .pt-dot {
  background: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.pt-phase--active .pt-label {
  color: var(--color-brand);
  font-weight: var(--fw-semibold, 600);
}
.pt-phase-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lod-white);
  animation: pt-pulse var(--duration-pulse) var(--ease-inout-soft) infinite;
}
@keyframes pt-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.6); opacity: 0.6; }
}

/* NEXT — als naechstes erreichbar, Outline + Hover-Glow */
.pt-phase--next .pt-dot {
  border-color: var(--color-brand);
  border-style: dashed;
  background: var(--color-surface);
}
.pt-phase--next .pt-label {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium, 500);
}
.pt-phase--next.is-clickable:hover .pt-dot {
  border-style: solid;
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-default) 10%, transparent);
}

/* PENDING — spaeter, grauer Outline, nicht klickbar */
.pt-phase--pending .pt-dot {
  border-color: var(--color-border);
  background: var(--color-surface);
}
.pt-phase--pending .pt-label { color: var(--color-text-muted); }

/* REJECTED — abgelehnt, rotes Kreuz */
.pt-phase--rejected .pt-dot {
  background: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}
.pt-phase--rejected .pt-dot img { filter: brightness(0) invert(1); }
.pt-phase--rejected .pt-label {
  color: var(--status-danger-fg);
  font-weight: var(--fw-semibold, 600);
}
.pt-connector--rejected { background: var(--status-danger-fg); }

/* SKIPPED — uebersprungen, ausgegraut */
.pt-phase--skipped .pt-dot {
  border-color: var(--color-border);
  background: var(--color-bg-muted);
  opacity: 0.5;
}
.pt-phase--skipped .pt-label {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Busy-State waehrend onAdvance laeuft — sichtbarer Spinner statt nur opacity */
.phase-track.pt-busy {
  pointer-events: none;
  position: relative;
}
.phase-track.pt-busy::after {
  content: '';
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: pt-spin var(--duration-spinner) var(--ease-linear) infinite;
}
.phase-track.pt-busy .pt-phase { opacity: 0.55; }
@keyframes pt-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Drawer-weite Busy-Klasse fuer Wissens-Drawer (zusaetzlich zur PhaseTrack) */
.shared-drawer.wd-busy .wd-phase-track-wrap {
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .phase-track { gap: 0; padding: var(--space-1-5) 0; }
  .pt-dot { width: 22px; height: 22px; }
  .pt-dot img { width: 12px; height: 12px; }
  .pt-label { font-size: 10px; max-width: 80px; }
  .pt-connector { margin: 0 var(--space-1); min-width: 12px; }
}