/* team-events.css — Mein-Bereich Team-Events (Geburtstage / Jahrestage)

   Konsumenten: web/js/sections/mein-bereich.js — rendert die Team-Events-
   Card mit Liste von Geburtstagen + Jahrestagen, sortiert nach Datum.

   Tage-Pill-Varianten: --today (heute), --soon (naechste Woche),
   --later (spaeter, transparent).
   ========================================================================== */

.te-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.te-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.te-card-title { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; flex: 1; }
.te-card-count {
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  background: var(--color-bg-selected);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--fw-medium);
}
.te-empty { padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.te-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.te-row {
  display: grid;
  grid-template-columns: 28px 32px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.te-row:last-child { border-bottom: none; }
.te-row-icon { display: flex; align-items: center; justify-content: center; }
.te-row--birthday .te-row-icon img { filter: hue-rotate(280deg); /* leicht Pink-Touch fuer Gift */ }
.te-row-avatar { display: flex; align-items: center; justify-content: center; }
.te-row-text { min-width: 0; }
.te-row-name { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-row-sub  { font-size: var(--fs-badge); color: var(--color-text-muted); margin-top: var(--space-px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-row-when { flex-shrink: 0; }

/* Tage-Pill */
.te-pill {
  display: inline-block;
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  background: var(--color-bg-selected);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.te-pill--today { background: var(--status-success-bg); color: var(--status-success-fg); }
.te-pill--soon  { background: var(--status-info-bg);    color: var(--status-info-fg); }
.te-pill--later { background: transparent; color: var(--color-text-muted); }

/* ──────────────────────────────────────────────────────────────────────
 Responsive (extrahiert aus mein-bereich.css "Übersicht Responsive"-Block,
 ).
 ────────────────────────────────────────────────────────────────────── */

/* Tablet (≤999px): Team-Events kein flex-fill, feste Hoehe — Card waechst
   nicht ueber den verfuegbaren Vertikalplatz. */
@media (max-width: 999px) {
  .ich-ub-right #ich-team-events { flex: 0 0 auto; }
  .ich-ub-right #ich-team-events .te-card { max-height: 360px; }
  .ich-ub-right #ich-team-events .te-list { max-height: 300px; }
}