.event-card {
  position: relative;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.event-card:hover,
.event-card:focus {
  outline: none;
  background: #e9efec;
  transform: translateY(-1px);
}

.event-card.completed {
  border-color: #7d8984;
  background: #eef0ef;
  opacity: .72;
}

.event-card.completed strong { text-decoration: line-through; }

.event-status {
  justify-self: start;
  margin-bottom: 2px;
  padding: 3px 6px;
  border-radius: 8px;
  background: #f4e7ca;
  color: #7a5714;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-card.completed .event-status {
  background: #dcefe7;
  color: #176149;
}

.icon-button.has-overdue {
  background: #cf0a2c;
  color: #fff;
  box-shadow: 0 0 0 4px #cf0a2c1f;
}

.agenda-overdue {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #f0b8c2;
  border-radius: 14px;
  background: #fff4f6;
}

.agenda-overdue > header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.agenda-overdue > header span:last-child {
  display: grid;
  gap: 3px;
}

.agenda-overdue > header strong { color: #94152c; font: 800 13px Arial; }
.agenda-overdue > header small { color: #7d5860; font: 11px Arial; }
.agenda-alert-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #cf0a2c; color: #fff; font: 900 15px Arial; }
.overdue-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 8px; margin-top: 13px; }
.overdue-list button { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #edd0d6; border-radius: 10px; background: #fff; color: #353535; text-align: left; cursor: pointer; }
.overdue-list button:hover,.overdue-list button:focus { border-color: #cf0a2c; outline: none; }
.overdue-list span,.overdue-list small { color: #8b6b72; font: 9px Arial; }
.overdue-list strong { font: 700 11px Arial; }

.agenda-actions { display: flex; align-items: center; gap: 10px; }
.agenda-status-tabs { display: flex; padding: 3px; border: 1px solid #e2e5e4; border-radius: 10px; background: #f5f6f5; }
.agenda-status-tabs button { height: 32px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #777; font: 700 10px Arial; cursor: pointer; }
.agenda-status-tabs button.selected { background: #fff; color: #cf0a2c; box-shadow: 0 2px 8px #00000012; }

.event-card.overdue { border-color: #cf0a2c; background: #fff0f3; }
.event-card.overdue .event-status { background: #cf0a2c; color: #fff; }

@media (max-width: 760px) {
  .agenda-head,.agenda-actions { align-items: stretch; flex-direction: column; }
  .agenda-actions .primary-button { justify-content: center; }
  .agenda-status-tabs button { flex: 1; }
}