/* pandabu V2.0.4 RC16.228 — Personen Layout FINAL
   Ziel: Mockup-orientierte, flache Personenzeile. Dark + Light. Mobile + Desktop. */

.people-list-shell{
  width:min(100%,980px);
  margin:16px 0 0;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.people-row{
  min-width:0;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  align-items:center;
  column-gap:16px;
  padding:15px 17px;
  background:transparent;
  color:var(--text);
}
.people-row + .people-row{border-top:1px solid var(--line)}

/* Avatar entspricht optisch Name + E-Mail-Zeile, nicht einer eigenen Card. */
.people-row-avatar{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  align-self:center;
}
.people-row-avatar img{
  width:74px;
  height:74px;
  display:block;
  object-fit:contain;
}

.people-row-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.people-row-top{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.people-row-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:19px;
  line-height:1.15;
  font-weight:850;
}
.people-role-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  font-weight:850;
}
.people-row-email,
.people-row-removed{
  width:100%;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
}
.people-row-stats{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
}
.people-stat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:55px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text);
  font-size:12px;
  line-height:1;
  font-weight:750;
}
.people-stat-pill strong{font-weight:900}

/* Rechte Aktionsgruppe wie im Nutzer-Mockup: nebeneinander, keine Zusatzkarte. */
.people-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  align-self:center;
}
.people-action-btn{
  appearance:none;
  -webkit-appearance:none;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
.people-action-btn svg{width:20px;height:20px}
.people-action-btn.edit{color:var(--text)}
.people-action-btn.danger{
  color:#ff6975;
  border-color:color-mix(in srgb,#d85160 54%,var(--line));
  background:color-mix(in srgb,#b52f40 12%,var(--surface-2));
}
.people-action-btn.restore{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 46%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-2));
}
.people-action-btn:hover,
.people-action-btn:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 5px 14px rgba(0,0,0,.13);
  outline:none;
}
.people-action-btn:active{transform:scale(.97)}

/* Gelöschte/entfernte Personen behalten identisches Raster. */
.people-removed-section{
  width:min(100%,980px);
  margin-top:24px;
}
.people-list-removed{margin-top:10px}
.people-row.removed{opacity:.64}
.people-row.removed .people-row-name{text-decoration:line-through;text-decoration-thickness:1.4px}
.people-row.removed .people-row-avatar img{filter:grayscale(.5)}

/* Neue Mitglieder: bewusst kompakte Funktionskarten, nicht grosse Illustrationen. */
.people-add-section{
  width:min(100%,980px);
  margin-top:24px;
}
.people-add-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.people-add-card{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:128px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 14px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.people-add-card img{
  width:70px;
  height:70px;
  display:block;
  object-fit:contain;
}
.people-add-card span{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:820;
}
.people-add-card:hover,
.people-add-card:focus-visible{
  transform:translateY(-1px);
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent),var(--shadow);
  outline:none;
}
.people-member-count{
  margin-top:9px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  text-align:right;
}

/* Light/Dark safety: keine fixen weissen Personenkarten. */
html[data-theme="light"] .people-list-shell,
html[data-theme="light"] .people-add-card,
body.light .people-list-shell,
body.light .people-add-card{background:var(--surface)}
html[data-theme="dark"] .people-list-shell,
html[data-theme="dark"] .people-add-card,
body.dark .people-list-shell,
body.dark .people-add-card{background:var(--surface)}

@media(max-width:760px){
  .people-list-shell,
  .people-removed-section,
  .people-add-section{width:100%}
  .people-list-shell{margin-top:13px;border-radius:18px}
  .people-row{
    grid-template-columns:62px minmax(0,1fr) auto;
    column-gap:11px;
    padding:12px 11px;
  }
  .people-row-avatar,
  .people-row-avatar img{width:62px;height:62px}
  .people-row-name{font-size:17px}
  .people-role-pill{min-height:26px;padding:3px 8px;font-size:10px}
  .people-row-email,.people-row-removed{font-size:12px}
  .people-row-stats{gap:6px;margin-top:7px}
  .people-stat-pill{min-width:49px;padding:4px 8px;font-size:11px}
  .people-row-actions{gap:6px}
  .people-action-btn{width:39px;height:39px;border-radius:12px}
  .people-action-btn svg{width:18px;height:18px}
  .people-add-card{min-height:116px;padding:11px 8px 12px}
  .people-add-card img{width:62px;height:62px}
  .people-add-card span{font-size:12px}
  .people-member-count{text-align:center}
}

@media(max-width:420px){
  .people-row{
    grid-template-columns:56px minmax(0,1fr) auto;
    column-gap:9px;
    padding:11px 9px;
  }
  .people-row-avatar,
  .people-row-avatar img{width:56px;height:56px}
  .people-row-top{gap:5px}
  .people-row-name{font-size:16px}
  .people-role-pill{font-size:9px;padding:3px 7px;min-height:24px}
  .people-row-email{font-size:11px}
  .people-row-stats{gap:5px;flex-wrap:wrap}
  .people-stat-pill{min-width:45px;padding:4px 7px;font-size:10px}
  .people-row-actions{gap:5px}
  .people-action-btn{width:36px;height:36px;border-radius:11px}
  .people-action-btn svg{width:17px;height:17px}
  .people-add-grid{gap:9px}
  .people-add-card{min-height:108px;padding:10px 6px}
  .people-add-card img{width:56px;height:56px}
  .people-add-card span{font-size:11px}
}