/* Tooltip container */
.tooltip {
	position: relative;
	cursor: help;
	border-bottom: 2px dotted #2563eb; /* Tailwind's blue-600 */
}

/* Tooltip text */
.tooltip::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 125%; /* show above the text */
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(17, 24, 39, 0.9); /* Tailwind gray-900 */
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem; /* rounded-md */
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
	font-size: 0.875rem; /* text-sm */
	z-index: 50;
}

/* Small arrow under the tooltip */
.tooltip::before {
	content: "";
	position: absolute;
	bottom: 115%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: rgba(17, 24, 39, 0.9) transparent transparent transparent;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	z-index: 50;
}

/* Hover/focus states */
.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus::after,
.tooltip:focus::before {
	opacity: 1;
}