/* leadity-Bibliothek · Prüfpaket 5: Chips, Avatare und Bearbeitungsstatus */

.leadity-chip,
:where(.chip, .task-pm-chip, .task-status-chip, .data-column-token) {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3);
  border: 0;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-10);
  color: var(--leadity-neutral-80);
  font: 400 14px/16px var(--leadity-font-body);
  letter-spacing: .1px;
  text-decoration: none;
  white-space: nowrap;
}

leadity-chip { display: inline-flex; }

.leadity-chip-group,
:where(.chip-group) {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--leadity-space-3);
}

button.leadity-chip { position: relative; cursor: pointer; }
button.leadity-chip::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--leadity-radius-sm) + 4px);
}
button.leadity-chip:hover { background: var(--leadity-neutral-20); color: var(--leadity-text-dark); }
button.leadity-chip:disabled { pointer-events: none; cursor: default; opacity: .55; }
button.leadity-chip:focus-visible,
.responsibility-control:focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

.leadity-chip[data-variant="secondary"] { background: var(--leadity-neutral-10); color: var(--leadity-neutral-80); }
.leadity-chip[data-variant="secondary-light"] { background: var(--leadity-white); color: var(--leadity-text-default); }
button.leadity-chip[data-variant="secondary"]:hover { background: var(--leadity-neutral-20); color: var(--leadity-text-dark); }
button.leadity-chip[data-variant="secondary-light"]:hover { background: var(--leadity-neutral-20); color: var(--leadity-text-dark); }
.leadity-chip[data-variant="primary"],
.leadity-chip[aria-pressed="true"] { background: var(--leadity-neutral-80); color: var(--leadity-neutral-10); }
button.leadity-chip[data-variant="primary"]:hover,
button.leadity-chip[aria-pressed="true"]:hover { background: var(--leadity-neutral-100); color: var(--leadity-white); }
.leadity-chip[data-variant="success"] { background: var(--leadity-state-success-background-light); color: var(--leadity-state-success-text); }
button.leadity-chip[data-variant="success"]:hover { background: var(--leadity-state-success-background-light-hover); }
.leadity-chip[data-variant="error"] { background: var(--leadity-state-error-background-light); color: var(--leadity-state-error-text); }
button.leadity-chip[data-variant="error"]:hover { background: var(--leadity-state-error-background-light-hover); }
.leadity-chip[data-variant="warning"] { background: var(--leadity-state-warning-background-light); color: var(--leadity-state-warning-text); }
button.leadity-chip[data-variant="warning"]:hover { background: var(--leadity-state-warning-background-light-hover); }
.leadity-chip[data-variant="info"] { background: var(--leadity-state-check-background-light); color: var(--leadity-state-check-text); }
button.leadity-chip[data-variant="info"]:hover { background: var(--leadity-state-check-background-light-hover); }

.leadity-chip > i { width: 16px; text-align: center; font-size: 14px; }
.leadity-chip-square {
  width: 32px;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.leadity-icon-chip { width: 32px; padding: 0; }
.leadity-icon-chip::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--leadity-radius-sm) + 4px);
}

button.leadity-chip-with-tooltip { cursor: help; }

.leadity-status-chip {
  min-height: 32px;
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-state-open-background-light);
  color: var(--leadity-state-open-text);
  font: 400 14px/16px var(--leadity-font-body);
  letter-spacing: .1px;
}

.leadity-status-chip-label,
.leadity-status-chip-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--leadity-space-3);
}

.leadity-status-chip-count {
  min-width: 32px;
  border-left: var(--leadity-line-sm) solid var(--leadity-white);
  font-variant-numeric: tabular-nums;
}

.leadity-status-chip[data-status="progress"] { background: var(--leadity-status-progress-surface); color: var(--leadity-status-progress-text); }
.leadity-status-chip[data-status="review"] { background: var(--leadity-status-review-surface); color: var(--leadity-status-review-text); }
.leadity-status-chip[data-status="complete"] { background: var(--leadity-status-complete-surface); color: var(--leadity-status-complete-text); }

/* Alias für bestehende Inhaltszeilen; Label und Anzahl behalten dieselbe Tonfläche. */
.status-pair { background: var(--leadity-state-open-background-light); color: var(--leadity-state-open-text); }
.status-pair .status-label,
.status-pair .status-count { background: inherit; color: inherit; font: 400 14px/16px var(--leadity-font-body); }
.status-pair[data-status="progress"] { background: var(--leadity-status-progress-surface); color: var(--leadity-status-progress-text); }
.status-pair[data-status="review"] { background: var(--leadity-status-review-surface); color: var(--leadity-status-review-text); }
.status-pair[data-status="complete"] { background: var(--leadity-status-complete-surface); color: var(--leadity-status-complete-text); }

.responsibility-control,
.responsibility-avatar-stack,
.avatar-list {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.responsibility-control {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--leadity-radius-full);
  background: transparent;
  cursor: pointer;
}

.responsibility-avatar-stack,
.avatar-list { position: relative; width: max-content; }

:where(.responsibility-avatar, .avatar, .avatar-slot) {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  border: var(--leadity-line-xs) solid var(--leadity-white);
  border-radius: var(--leadity-radius-full);
  background: var(--leadity-neutral-20);
  color: var(--leadity-text-default);
  font: 400 14px/1 var(--leadity-font-body);
  letter-spacing: .1px;
  user-select: none;
}

.responsibility-avatar-stack > .responsibility-avatar,
.responsibility-group > .responsibility-avatar {
  width: 40px;
  height: 40px;
  border: var(--leadity-line-xs) solid var(--leadity-white);
  background: var(--leadity-neutral-20);
  color: var(--leadity-text-default);
  font: 400 14px/1 var(--leadity-font-body);
}
.responsibility-avatar-stack > .responsibility-avatar + .responsibility-avatar { margin-left: -10px; }
.responsibility-control:hover .responsibility-avatar { background: var(--leadity-neutral-40); }
.responsibility-control[aria-expanded="true"] .responsibility-avatar { background: var(--leadity-neutral-20); }

.responsibility-popover {
  width: min(480px, calc(100vw - 32px));
  position: absolute;
  z-index: 150;
  top: calc(100% + var(--leadity-space-5));
  left: 0;
  display: grid;
  gap: var(--leadity-space-6);
  padding: var(--leadity-space-5);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-floating);
}

.responsibility-popover[popover] {
  position: fixed;
  inset: 0;
  display: none;
  margin: auto;
  border: 0;
}
.responsibility-popover[popover]:popover-open,
.responsibility-popover.is-open { display: grid; }
.responsibility-popover[popover][data-positioned="true"] {
  inset: auto;
  top: var(--responsibility-popover-top);
  left: var(--responsibility-popover-left);
  margin: 0;
}
.responsibility-popover::backdrop { background: transparent; }
.responsibility-popover[hidden] { display: none; }
.responsibility-popover::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: -8px;
  left: 16px;
  transform: rotate(45deg);
  background: var(--leadity-white);
}

.responsibility-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--leadity-space-5);
  padding: var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-5);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-state-warning-background-light);
  color: var(--leadity-text-default);
}

.responsibility-warning i { width: 24px; margin-top: 1px; font-size: 24px; color: var(--leadity-state-warning-text); }
.responsibility-fields { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--leadity-space-6); }
.responsibility-field { display: grid; gap: var(--leadity-space-2); }
.responsibility-field label { color: var(--leadity-text-light); font: 400 14px/21px var(--leadity-font-body); }
.responsibility-field select {
  width: 100%;
  height: var(--leadity-control-floating-label);
  padding-inline: var(--leadity-space-4);
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 400 16px/20px var(--leadity-font-body);
}
.responsibility-actions { display: flex; justify-content: flex-end; gap: var(--leadity-space-4); }

.responsibility-popover-single {
  height: min(462px, calc(100vh - 32px));
  gap: 0;
}
.responsibility-person-picker,
.responsibility-person-list { min-height: 0; }
.responsibility-person-picker {
  height: 100%;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  padding: var(--leadity-space-3);
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
}
.responsibility-search-field {
  width: 100%;
}
.responsibility-person-list {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 0;
}
.responsibility-person-group { display: grid; }
.responsibility-person-group-title,
.responsibility-person-option {
  min-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3) var(--leadity-space-5);
}
.responsibility-person-group-title {
  grid-template-columns: 24px auto 1fr;
  color: var(--leadity-text-default);
  font: 600 16px/24px var(--leadity-font-body);
}
.responsibility-person-group-title::before { content: ""; }
.responsibility-person-option {
  width: 100%;
  border: 0;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 400 16px/24px var(--leadity-font-body);
  text-align: left;
  cursor: pointer;
}
.responsibility-person-option:hover { background: var(--leadity-neutral-10); }
.responsibility-person-option:focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: calc(var(--leadity-focus-offset) * -1);
}
.responsibility-person-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  visibility: hidden;
}
.responsibility-person-check i { font-size: 16px; }
.responsibility-person-option[aria-pressed="true"] .responsibility-person-check { visibility: visible; }
.responsibility-person-empty {
  padding: var(--leadity-space-5);
  color: var(--leadity-text-light);
  font: 400 16px/24px var(--leadity-font-body);
}

.progress-bars,
.status-list {
  width: min(300px, 100%);
  display: grid;
  gap: var(--leadity-space-2);
}

.progress-bars[data-labels="true"] { width: min(504px, 100%); }
.progress-bar-line,
.status-row,
.processing-total {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
}

.progress-bar-label { width: 180px; flex: 0 0 180px; font: 400 16px/24px var(--leadity-font-body); }
.progress-bar-content { min-width: 0; flex: 1; display: flex; align-items: center; gap: var(--leadity-space-3); }
.progress-bar-track {
  min-width: 0;
  height: 8px;
  flex: 1;
  overflow: hidden;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-20);
}

.progress-bar-fill,
.status-bar {
  width: var(--bar-width, 0%);
  min-width: 0;
  max-width: none;
  height: 8px;
  flex: 0 1 var(--bar-width, 0%);
  border-radius: var(--leadity-radius-sm);
  background: var(--status-color, var(--leadity-state-open-background));
}

.progress-bar-chip,
.status-value,
.total-chip {
  min-width: 32px;
  width: max-content;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  background: var(--status-surface, var(--leadity-state-open-background-light));
  color: var(--status-text, var(--leadity-state-open-text));
  font: 400 14px/16px var(--leadity-font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

.progress-bar-line[data-status="total"],
.processing-total { --status-color: var(--leadity-neutral-80); --status-surface: var(--leadity-neutral-80); --status-text: var(--leadity-white); }
.progress-bar-line[data-status="open"],
.status-row[data-status="open"] { --status-color: var(--leadity-state-open-background); --status-surface: var(--leadity-state-open-background-light); --status-text: var(--leadity-state-open-text); }
.progress-bar-line[data-status="progress"],
.status-row[data-status="progress"] { --status-color: var(--leadity-status-progress); --status-surface: var(--leadity-status-progress-surface); --status-text: var(--leadity-status-progress-text); }
.progress-bar-line[data-status="review"],
.status-row[data-status="review"] { --status-color: var(--leadity-status-review); --status-surface: var(--leadity-status-review-surface); --status-text: var(--leadity-status-review-text); }
.progress-bar-line[data-status="complete"],
.status-row[data-status="complete"] { --status-color: var(--leadity-status-complete); --status-surface: var(--leadity-status-complete-surface); --status-text: var(--leadity-status-complete-text); }

.progress-bar-line[data-status="total"] .progress-bar-chip,
.total-chip {
  min-width: max-content;
  width: max-content;
  flex: 0 0 auto;
  font-weight: 500;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.progress-bar-sigma,
.status-sigma {
  width: 9px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 9px;
  line-height: 1;
}

/* Total: Balken links, Summen-Chip rechts. Einzelstatus: Chip links auf derselben Achse. */
.progress-bar-line:not([data-status="total"]) .progress-bar-chip,
.status-row .status-value { order: 0; }
.progress-bar-line:not([data-status="total"]) :where(.progress-bar-fill, .status-bar),
.status-row .status-bar { order: 1; }
.progress-bar-line[data-status="total"] .progress-bar-fill {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}
.processing-total::before {
  content: "";
  min-width: 0;
  height: 8px;
  flex: 1 1 auto;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-80);
}

@media (max-width: 639px) {
  .responsibility-popover { position: fixed; top: 72px; left: 16px; }
  .responsibility-popover[popover][data-positioned="true"] { top: 72px; left: 16px; }
  .responsibility-popover::before { display: none; }
  .responsibility-fields { grid-template-columns: 1fr; }
  .progress-bars[data-labels="true"] .progress-bar-line { align-items: flex-start; flex-direction: column; }
  .progress-bar-label { width: auto; flex-basis: auto; }
  .progress-bar-content { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .leadity-chip, .responsibility-avatar { transition: none; }
}