.task-indicator {
  display: inline-block;
}

/* The indicator dot */
.indicator-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red-color); /* Alert red */
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
}

/* Hide the dot if it's empty (no tasks) */
.indicator-dot:empty {
  display: none;
}