/* CSS-only tooltips using data-tooltip attribute */

/* Base wrapper for elements with tooltips */
.tooltip-wrapper {
  position: relative;
  display: block;
}

/* Tooltip text (::after) */
.tooltip-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  pointer-events: none;
}

/* Tooltip arrow (::before) */
.tooltip-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  pointer-events: none;
}

/* Show tooltip on hover */
.tooltip-wrapper:hover::after,
.tooltip-wrapper:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ===== TOP TOOLTIP (default) ===== */
.tooltip-wrapper::after {
  bottom: calc(100% + 8px);
}

.tooltip-wrapper::before {
  bottom: 100%;
}

/* ===== BOTTOM TOOLTIP ===== */
.tooltip-wrapper-bottom::after {
  bottom: auto;
  top: calc(100% + 8px);
}

.tooltip-wrapper-bottom::before {
  bottom: auto;
  top: 100%;
}

/* ===== DARK MODE ===== */
html[data-mantine-color-scheme="dark"] .tooltip-wrapper::after {
  background-color: var(--mantine-color-dark-4);
  color: var(--mantine-color-white);
}

html[data-mantine-color-scheme="dark"] .tooltip-wrapper::before {
  border-top-color: var(--mantine-color-dark-4);
}

html[data-mantine-color-scheme="dark"] .tooltip-wrapper-bottom::before {
  border-top-color: transparent;
  border-bottom-color: var(--mantine-color-dark-4);
}

/* ===== LIGHT MODE ===== */
html[data-mantine-color-scheme="light"] .tooltip-wrapper::after {
  background-color: var(--mantine-color-gray-8);
  color: var(--mantine-color-white);
}

html[data-mantine-color-scheme="light"] .tooltip-wrapper::before {
  border-top-color: var(--mantine-color-gray-8);
}

html[data-mantine-color-scheme="light"] .tooltip-wrapper-bottom::before {
  border-top-color: transparent;
  border-bottom-color: var(--mantine-color-gray-8);
}