/* Support ticket status circle indicators */

/* Base pos - ensures circle stays on btn */
#btn-support-tickets {
  position: relative;
}

/* Status indicator circle - always on btn, not floating */
#btn-support-tickets.status-new::after,
#btn-support-tickets.status-developing::after,
#btn-support-tickets.status-done::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

/* Red circle for new tickets */
#btn-support-tickets.status-new::after {
  background-color: #dc2626;
  box-shadow: 0 0 3px rgba(220, 38, 38, 0.5);
}

/* Yellow circle for developing tickets */
#btn-support-tickets.status-developing::after {
  background-color: #eab308;
  box-shadow: 0 0 3px rgba(234, 179, 8, 0.5);
}

/* Green circle for done tickets */
#btn-support-tickets.status-done::after {
  background-color: #16a34a;
  box-shadow: 0 0 3px rgba(22, 163, 74, 0.5);
}

/* No circle for no tickets */
#btn-support-tickets.status-none::after {
  display: none;
}

/* Ensure circle stays pos rel to btn in all states */
#btn-support-tickets:hover::after,
#btn-support-tickets:focus::after,
#btn-support-tickets:active::after {
  position: absolute;
  top: 2px;
  right: 2px;
}