#attendanceChart {
  height: 300px !important; /* fixed height */
  max-height: 300px; /* just in case */
}

@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.animate-ping-slow {
  animation: ping-slow 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Add in your CSS file (or <style> block) */
.tooltip-box {
  top: 100%; /* Below the truncated text */
  left: 0;
  margin-top: 0.5rem;
  white-space: normal;
  line-height: 1.4;
  max-height: 200px; /* prevent giant essays from covering screen */
  overflow-y: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-5px);
}

.group:hover .tooltip-box {
  opacity: 1;
  transform: translateY(0);
}