/* ──────────────────────────────────────────────────────────────────
 *  Validation overlay — chip badges + list-row glyphs.
 *  Paired with public/calendar-validation-overlay.js. Independent of
 *  the React bundle's index.css so a future bundle rebuild doesn't
 *  drop the keyframes.
 * ────────────────────────────────────────────────────────────────── */

/* Pulse for the "missing required" state — bright, gets attention. */
@keyframes oss-pulse {
  0%, 100% { box-shadow: 0 0 4px  #ef4444; }
  50%      { box-shadow: 0 0 10px #ef4444; }
}

/* ── Chip badge (top-right corner of calendar grid chips) ────────── */
.oss-validation-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: auto;          /* let the tooltip surface on hover */
  cursor: help;
  user-select: none;
  z-index: 11;
}
.oss-validation-badge--missing {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  animation: oss-pulse 2s ease-in-out infinite;
}
.oss-validation-badge--warn {
  background: #d97706;
  box-shadow: 0 0 4px rgba(217, 119, 6, 0.6);
}

/* ── List-row glyph (inline next to event title on list views) ───── */
.oss-validation-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: -2px;
  cursor: help;
  user-select: none;
}
.oss-validation-glyph--missing {
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}
.oss-validation-glyph--warn {
  background: #d97706;
}
.oss-validation-glyph--ok {
  background: #16a34a;
}