.home-account-stats button.stat{appearance:none;font:inherit;text-align:start;min-width:0;overflow-wrap:anywhere}
.home-account-stats button.stat:not(.teamilo-event-unanswered){color:inherit}
.home-account-stats button.stat.teamilo-event-unanswered{margin:0!important}
.home-account-stats button.stat.teamilo-event-unanswered :is(.num,small){color:inherit}
.home-account-stats button.stat .num,.home-account-stats button.stat small{display:block}
.home-account-stats button.stat:not(.teamilo-event-unanswered):not(:disabled):hover,.tm-home-row:is(button):hover{border-color:var(--hig-accent,currentColor)}
.home-account-stats button.stat:focus-visible,.tm-home-dialog button:focus-visible{outline:2px solid var(--hig-accent,currentColor);outline-offset:2px}
.tm-home-dialog{width:min(34rem,calc(100vw - 2rem));max-height:82dvh;padding:0;overflow:hidden;border:1px solid var(--hig-line,#777);border-radius:16px;background:var(--hig-surface,Canvas);color:var(--hig-text,CanvasText);box-sizing:border-box}
.tm-home-dialog[open]{display:flex;flex-direction:column}.tm-home-dialog::backdrop{background:rgb(0 0 0/.58)}
.tm-home-dialog header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;border-bottom:1px solid var(--hig-line,#777)}
.tm-home-dialog h2{font-size:1.1rem;line-height:1.35}
.tm-home-dialog [data-card-body]{padding:1rem;overflow:auto;overscroll-behavior:contain;min-height:0;display:grid;gap:.55rem}
.tm-home-row{display:grid;width:100%;gap:.35rem;align-content:start;padding:.8rem 1rem;border:1px solid var(--hig-line,#777);border-radius:.7rem;text-align:start;font:inherit;background:var(--hig-soft,transparent);color:inherit;overflow-wrap:anywhere}
.tm-home-replies{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
#app .home-account-stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Keep team and attendance count together, with the pending badge on its own row. */
#app .home-global-event[data-home-team] > .home-global-event-tags {
  display: grid;
  grid-template-columns: fit-content(68%) minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
#app .home-global-event[data-home-team] > .home-global-event-tags > :is(.tm-event-rsvp-label, .teamilo-unanswered-label) {
  grid-column: 1 / -1;
  grid-row: 2;
}
#app .home-global-event.teamilo-has-logo[data-home-team] {
  --home-event-logo-size: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--home-event-logo-size);
  grid-template-areas: "tags logo" "details logo";
  align-items: center;
  gap: 8px 12px;
  padding-inline-end: 16px;
}
#app .home-global-event.teamilo-has-logo[data-home-team] > .home-global-event-tags {
  grid-area: tags;
}
#app .home-global-event.teamilo-has-logo[data-home-team] > .home-global-event-body {
  grid-area: details;
  min-width: 0;
  margin-top: 0;
  overflow-wrap: anywhere;
}
#app .home-global-event[data-home-team] > .teamilo-event-logo {
  grid-area: logo;
  position: static;
  transform: none;
  justify-self: end;
}
#app :is(.home-global-event, .cardheader) > .teamilo-event-logo {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: stretch;
  align-self: center;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  max-width: 100%;
  flex: 0 0 76px;
  padding: 3px;
  border: 1px solid var(--ap-line, var(--hig-line, #888));
  border-radius: 16px;
  background: var(--ap-soft, var(--hig-soft, #ddd));
  overflow: hidden;
}
#app .teamilo-event-logo > .tm-event-logo-inner {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  border-radius: 12px;
  background: var(--ap-surface, var(--hig-card, Canvas));
  overflow: hidden;
}
#app .teamilo-event-logo > .tm-event-logo-inner > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  clip-path: inset(0 round 12px);
}
#app .teamilo-event-logo > .tm-event-logo-inner > .tm-event-logo-portrait {
  width: auto;
  height: 100%;
}
/* TEAMilo: Start-Hinweiskarten nur fuer tatsaechlich offene Termine und Vorgaenge. */
/* The open start cards already have the original `card` and `stat` classes.
   Their outer background, border, radius and shadow intentionally come ONLY
   from TEAMilo's normal card rules and the user's chosen appearance template.
   No custom outer-card background or border is defined in this file. */
html body #app .home-account-stats button.stat[hidden] {
  display: none !important;
}
/* Keep the card's counter in the normal card text colour, not alert red. */
html body #app .home-account-stats button.stat.card.teamilo-event-unanswered .num {
  color: inherit !important;
  background: transparent !important;
}
/* The status message alone remains red with white type as agreed. */
html body #app .home-account-stats button.stat.card.teamilo-event-unanswered small,
html body #app .home-account-stats button.stat.card.teamilo-event-unanswered small.teamilo-unanswered-label {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: .3rem .6rem;
  border: 1px solid #b91c1c !important;
  border-radius: .55rem;
  background: #b91c1c !important;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The selected entry in the work popup remains visibly focused. */
#app .tm-home-row.tm-home-target,
#app #teamilo-org-root .tm-home-target {
  outline: 2px solid var(--ap-primary, var(--hig-accent, #b91c1c));
  outline-offset: 2px;
}
@media (forced-colors: active) {
  html body #app .home-account-stats button.stat.card.teamilo-event-unanswered small,
  html body #app .home-account-stats button.stat.card.teamilo-event-unanswered small.teamilo-unanswered-label {
    background: Highlight !important;
    color: HighlightText !important;
    border: 1px solid Highlight !important;
  }
}