/* team-editor.css — Team-Mitglieder-Editor (Add-Panel, Member-Panel, Rolle). */

.app-scope .app-team-editor {
  /* Lebt im gleichen .field-value-content-Slot wie app-person-field
     (Bearbeiter/Aufgabengeber). Person-Felder haben intern padding: 0 10px,
     Avatar startet bei X=10px relativ zum Slot. Wir spiegeln das mit
     padding-left: 10px + gap: 0 — Avatar-Stack und Add-Button bilden eine
     durchgehende Reihe ohne zusaetzlichen Gap. */
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  padding-left: var(--space-2-5);
}
/* Leerer Stack (noch keine Team-Member) soll keinen Platz einnehmen,
   damit der Hinzufuegen-Button direkt bei X=10 beginnt. */
.app-scope .app-team-editor-stack:empty { display: none; }
.app-scope .app-team-editor-stack { display: inline-flex; align-items: center; gap: 0; }
.app-scope .app-team-editor-member {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  /* Avatare mit einheitlichem Abstand (leicht ueberlappend). Rolle-Badges
     sind gross genug + haben eigenen z-index, um lesbar zu bleiben. */
  margin-right: -4px;
  cursor: pointer;
}
/* Rolle-Member kommen in der Stapelung nach vorn, damit das Badge
   (bottom-right, 18px) nicht vom naechsten Avatar verdeckt wird. */
.app-scope .app-team-editor-member.rolle-2,
.app-scope .app-team-editor-member.rolle-3 {
  z-index: 2;
  margin-right: var(--space-1);
}
/* Der VORgaenger eines Rolle-Members braucht zusaetzlichen Platz,
   weil das Badge an dessen rechter Seite in den Raum ragt. */
.app-scope .app-team-editor-member:has(+ .app-team-editor-member.rolle-2),
.app-scope .app-team-editor-member:has(+ .app-team-editor-member.rolle-3) {
  margin-right: var(--space-1-5);
}
.app-scope .app-team-editor-member:hover { z-index: 3; }

/* Rolle-Badge kompakt (14px), rechts unten am 22er-Avatar. Weisser Ring
   + kraeftige Rollen-Farbe. */
.app-scope .app-team-editor-rolle-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  background: var(--lod-darkblue);
  color: var(--lod-white);
  border: 2px solid var(--lod-white);
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0 0 1px var(--lod-white);     /* kleiner Weiss-Rand, damit Badge auch auf farbigem Avatar-Hintergrund sichtbar abgegrenzt ist */
}
/* Rolle-2 = Reviewer (orange), Rolle-3 = Unterstuetzer (grau). Weisser Rand bleibt
   damit das Badge auf farbigem Avatar klar abgegrenzt ist. */
.app-scope .app-team-editor-member.rolle-2 .app-team-editor-rolle-badge { background: var(--lod-warning); border-color: var(--lod-white); color: var(--lod-white); }
.app-scope .app-team-editor-member.rolle-3 .app-team-editor-rolle-badge { background: var(--lod-gray-500); border-color: var(--lod-white); color: var(--lod-white); }
.app-scope .app-team-editor-member:last-child { margin-right: 0; }
/* Avatar einheitlich 22px (gleiche Groesse wie Bearbeiter/Aufgabengeber),
   weisser Ring. Die !important-Overrides ueberschreiben das Inline-Sizing
   aus Avatar.html(), damit der Team-Editor unabhaengig vom uebergebenen
   Size-Argument seine 22px-Stack-Optik behaelt. */
.app-scope .app-team-editor-member .avatar-slot {
  width: 22px;
  height: 22px;
}
.app-scope .app-team-editor-member .avatar-slot > .avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: var(--font-size-xs) !important;
  border-radius: 50%;
  border: 2px solid var(--lod-white);
}
.app-scope .app-team-editor-member:hover .avatar { transform: scale(1.08); transition: transform var(--duration-quick); }
.app-scope .app-team-editor-overflow {
  margin-left: var(--space-xxs);
  font-size: 11.5px;
  color: var(--lod-gray-500);
  font-weight: var(--fw-semibold);
}
.app-scope .app-team-editor-add {
  /* Hoehe 22px = exakt Avatar-Groesse. Wenn Team-Member vorhanden, kommt
     ein eigener margin-left (siehe Regel unten). Ohne Member startet der
     Button direkt bei padding-left der team-editor-Flexbox (X=10). */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  height: 22px;
  background: transparent;
  border: 1px dashed var(--lod-gray-300);
  border-radius: var(--radius-counter);
  color: var(--lod-gray-700);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  line-height: 1;
}
.app-scope .app-team-editor-add img { width: 11px; height: 11px; }
/* Abstand zum Avatar-Stack NUR wenn der Stack tatsaechlich Member hat. */
.app-scope .app-team-editor-stack:not(:empty) + .app-team-editor-add { margin-left: var(--space-2); }
.app-scope .app-team-editor-add:hover { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); border-style: solid; }
/* (Alignment-Regel entfallen - wird ueber sibling-Selector oben geloest.) */

.app-team-editor-member-panel { padding: var(--space-2-5) var(--space-3); min-width: 200px; font-family: var(--lod-font-sans); }
.app-team-editor-member-head { margin-bottom: var(--space-2); font-size: 13px; color: var(--lod-darkblue); }
.app-team-editor-rolle-row { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.app-team-editor-rolle-btn {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xl);
  font-size: 11.5px;
  background: var(--lod-gray-50);
  border: 1px solid transparent;
  color: var(--lod-gray-700);
  cursor: pointer;
}
.app-team-editor-rolle-btn:hover { background: var(--lod-gray-100); }
.app-team-editor-rolle-btn.is-active { background: var(--lod-darkblue); color: var(--lod-white); }
.app-team-editor-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  color: var(--lod-danger);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.app-team-editor-remove:hover { background: var(--status-danger-soft); }

.app-team-editor-add-panel { padding: var(--space-2); font-family: var(--lod-font-sans); }
.app-team-editor-add-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1-5);
}
.app-team-editor-add-search input { flex: 1; border: none; background: transparent; font-size: 13px; }
.app-team-editor-add-search input:focus { outline: none; }
.app-team-editor-add-list { max-height: 280px; overflow-y: auto; }
.app-team-editor-add-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.app-team-editor-add-item:hover { background: var(--lod-gray-50); }
.app-team-editor-add-item .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); color: var(--lod-white); font-weight: var(--fw-semibold); }
.app-team-editor-empty { padding: var(--space-2-5); color: var(--lod-gray-500); font-style: italic; text-align: center; font-size: var(--font-size-sm); }

/* Person-Field nutzt Basis-Style. */
.app-scope .app-person-field-name {
  font-size: 13px;
  color: var(--lod-darkblue);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-scope .app-person-field-name.muted { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-person-field-chevron { opacity: 0.6; flex-shrink: 0; }

/* Panel folgt dem Popover-Wrapper; Popover-Call uebergibt bereits
   triggerbasierte Breite (kein eigener min-width noetig). */
.app-person-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-person-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1-5);
}
.app-person-picker-search input { flex: 1; border: none; background: transparent; font-size: 13px; }
.app-person-picker-search input:focus { outline: none; }
.app-person-picker-list { max-height: 300px; overflow-y: auto; }
.app-person-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  padding: 7px var(--space-2-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.app-person-picker-item:hover { background: var(--lod-gray-50); }
.app-person-picker-item .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); color: var(--lod-white); font-weight: var(--fw-semibold); }
/* Name-Span einzeilig mit Ellipsis. Popover-Breite ist an Feld gebunden, damit
   lange Mitarbeiter-Namen nicht umbrechen. */
.app-person-picker-item > span:not(.avatar):not(.avatar-slot) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bereits zugewiesen: sichtbar, aber gesperrt — nicht klickbar, gedaempft. */
.app-person-picker-item.is-assigned { cursor: default; opacity: 0.55; }
.app-person-picker-item.is-assigned:hover { background: transparent; }
/* "bereits dabei"-Hinweis am Zeilenende: kompakt, waechst nicht mit (Specificity
   muss die geteilte Name-Span-Regel oben ueberbieten, daher die volle Kette). */
.app-person-picker-item > span.app-person-picker-hint:not(.avatar):not(.avatar-slot) {
  flex: 0 0 auto;
  color: var(--lod-gray-500);
  font-size: var(--font-size-xs);
  font-style: italic;
}

/* Checklist-Assignee */