/* --- Klares Event-Layout --- */
.mp-table--events th, .mp-table--events td { vertical-align: top; }
.mp-col-when { width: 280px; }
.mp-col-info { min-width: 320px; }
.mp-col-need { width: 180px; white-space: nowrap; }
.mp-col-act  { width: 140px; text-align: right; }

.mp-ev-name { font-weight: 600; margin: 2px 0 4px; }
.mp-when { font-size: 14px; line-height: 1.35; }
.mp-date { font-weight: 700; }
.mp-timechip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:#eef2ff; padding:2px 8px; border-radius:999px; }
.mp-sep { opacity:.6; padding:0 6px; }

.mp-loc { font-size: 13px; opacity:.9; }
.mp-need { font-size: 14px; }
.mp-need-ass { font-weight: 700; }
.mp-need-total { opacity:.8; }
.mp-need-vol { opacity:.7; }

/* farbliche Markierung je eigenem Status */
.mp-row--green { border-left: 6px solid #16a34a; }
.mp-row--yellow{ border-left: 6px solid #ca8a04; }
.mp-table tr.mp-row--green td,
.mp-table tr.mp-row--yellow td { background: #fafafa; }

/* „Meine Einsätze“ kompakt */
.mp-list-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:10px; }
.mp-list-item .mp-ev-name { margin-top: 4px; }

/* Mobile Anpassung */
@media (max-width: 800px){
  .mp-col-when, .mp-col-need, .mp-col-act { width:auto; }
  .mp-table--events thead { display:none; }
  .mp-table--events tr { display:block; margin-bottom:12px; border:1px solid #e5e7eb; border-radius:8px; padding:8px; }
  .mp-table--events td { display:block; border:none !important; padding:6px 8px !important; }
  .mp-col-act { text-align:left; }
}
/* ===== Tabs im VIA-Look (ruhig, klar) ===== */
.mp-tabs { display:flex; gap:8px; margin:8px 0 14px; }
.mp-tab { padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; text-decoration:none; }
.mp-tab--active { background:#111827; color:#fff; border-color:#111827; }

/* ===== Tages-Gruppen ===== */
.mp-day { margin:14px 0 6px; }
.mp-day-date { font-weight:700; font-size:16px; }

/* ===== Eventliste (kartenlos, klare Reihen) ===== */
.mp-ev-list { display:flex; flex-direction:column; gap:8px; }
.mp-ev-row {
  display:grid;
  grid-template-columns: 220px 1fr auto;
  gap:12px; align-items:center;
  padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
/* Statusrand */
.mp-ev-row.mp-row--green  { border-left:6px solid #16a34a; }
.mp-ev-row.mp-row--yellow { border-left:6px solid #ca8a04; }

/* linke Spalte: Zeit */
.mp-ev-time-main { font-weight:700; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.mp-ev-time-date { font-size:13px; opacity:.8; }

/* Mitte: Titel + Ort (lange Texte sanft kürzen) */
.mp-ev-title {
  font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mp-ev-loc { font-size:13px; opacity:.9; text-decoration:none; }

/* rechts: Bedarf + Aktion */
.mp-ev-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:200px; }
.mp-ev-need  { font-size:13px; opacity:.9; white-space:nowrap; }
.mp-ev-action {}

/* Buttons/Badges dezent */
.mp-btn { display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; text-decoration:none; }
.mp-btn--ghost { background:#f9fafb; }
.mp-badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#e5e7eb; font-size:12px; }
.mp-badge--green { background:#dcfce7; }
.mp-badge--yellow { background:#fef9c3; }

/* Dispo */
.mp-dispo-card { margin-bottom:10px; }
.mp-dispo-staff { padding:8px 0 4px; }
.mp-staff-cols { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.mp-staff-col h4 { margin:6px 0; }

/* Leerzustände */
.mp-empty { padding:16px; border:1px dashed #e5e7eb; border-radius:10px; opacity:.8; }

/* Mobile */
@media (max-width: 860px){
  .mp-ev-row { grid-template-columns: 1fr; align-items:flex-start; }
  .mp-ev-right { align-items:flex-start; min-width:0; }
}
/* ===== Modal für Teilnehmerliste ===== */
.mp-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.mp-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.mp-modal__card { position:relative; width:min(100%, 980px); max-height:86vh; overflow:hidden; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); display:flex; flex-direction:column; }
.mp-modal__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.mp-modal__body { padding:12px 16px; overflow:auto; }

.mp-ev-when { font-size:12px; opacity:.8; }
.mp-par-count { margin:8px 0; font-size:14px; }
.mp-par-list { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }

.mp-par-table { width:100%; border-collapse:separate; border-spacing:0; }
.mp-par-table th, .mp-par-table td { padding:8px 10px; border-bottom:1px solid #eef2f7; }
.mp-par-table thead th { background:#f8fafc; text-align:left; font-weight:600; }
.mp-tag { display:inline-block; font-size:11px; padding:2px 6px; border-radius:999px; background:#e5e7eb; }
.mp-tag--warn { background:#fde68a; }

/* Inputs */
#mp-par-search { flex:1; min-width:220px; }

/* Kleinere Buttons im Modal */
.mp-modal .mp-btn { padding:6px 10px; }
/* ===== Dispo-Modal: Layout für Gemeldet/Eingesetzt & Suche ===== */
.mp-staff-cols { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
.mp-staff-col h4 { margin:6px 0; }
#mp-staff-vol, #mp-staff-asg { display:flex; flex-direction:column; gap:6px; }

.mp-staff-item {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
}

.mp-staff-add { margin-top:8px; }
.mp-staff-add .mp-row { gap:8px; margin:6px 0; flex-wrap:wrap; }
#mp-staff-results { display:flex; flex-direction:column; gap:6px; }

/* Buttons kompakter im Modal */
.mp-modal .mp-btn { padding:6px 10px; }

/* ===== Teilnehmerliste: Zebra-Streifen & Präsenz-Färbung (robust) ===== */
/* Nur direkte Kindelemente und nur DIVs zählen -> keine Textknoten/Spacing-Probleme */
.mp-par-list { display:flex; flex-direction:column; gap:8px; }
.mp-par-list > div.mp-par-item { background:#ffffff; }             /* Grundfarbe */
.mp-par-list > div.mp-par-item:nth-of-type(even){ background:#f6f7fb; } /* hellgrau */

/* Präsenz klar markiert: überschreibt Zebra immer */
.mp-par-list > div.mp-par-item.is-present{
  background:#ecfdf5 !important;        /* leicht grün */
  border-left:6px solid #16a34a;        /* grüner Marker links */
}

/* Rest wie gehabt */
.mp-par-item { display:grid; grid-template-columns: 1fr auto; gap:12px;
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }
.mp-par-left { min-width:0; }
.mp-par-name { font-weight:600; }
.mp-par-meta { font-size:13px; opacity:.9; display:flex; gap:6px; flex-wrap:wrap; }
.mp-dot { opacity:.5; }
.mp-par-right { display:flex; align-items:center; gap:8px; }
.mp-link { text-decoration:none; color:#111827; border-bottom:1px dashed #cbd5e1; }
.mp-par-extra { margin-top:6px; padding:8px 10px; border-radius:8px; background:#fff7ed; border:1px solid #fdba74; font-size:13px; line-height:1.4; }
.mp-btn--present { background:#dcfce7; border-color:#16a34a; }

/* ===== Teilnehmerliste: Zebra & Präsenz ===== */
.mp-par-list { display:flex; flex-direction:column; gap:8px; }

/* Grundfarbe + Zebra nur für echte Zeilen-DIVs */
.mp-par-list > div.mp-par-item { background:#ffffff; }
.mp-par-list > div.mp-par-item:nth-of-type(even){ background:#f6f7fb; } /* leicht grau */

/* Anwesend: zart grün und linker Marker; überschreibt Zebra */
.mp-par-list > div.mp-par-item.is-present{
  background:#ecfdf5 !important;      /* leicht grün */
  border-left:6px solid #16a34a;      /* grüner Marker links */
}

/* ===== Deutlich roter „Hinweise anzeigen“-Button ===== */
.mp-alert-toggle{
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  font-weight:600;
  text-decoration:none;
  border-radius:8px;
  background:#fee2e2;                 /* rot (hell) */
  border:1px solid #ef4444;           /* rot */
  color:#7f1d1d;                      /* dunkles Rot */
}
.mp-alert-toggle:hover{ background:#fecaca; border-color:#dc2626; color:#7f1d1d; }