/**
 * Custom Bootstrap Tooltip Styles
 * These styles override Bootstrap's default tooltip appearance
 * to match the custom Tooltip component design
 */

/* Override conflicting .tooltip styles */
.tooltip.custom-light-tooltip,
.tooltip.custom-light-tooltip.show,
.tooltip.custom-light-tooltip.fade {
  opacity: 1 !important;
  --bs-tooltip-bg: #fff !important;
  --bs-tooltip-color: #333333 !important;
  color: #333333 !important;
  background-color: transparent !important;
  padding: 0 !important;
  white-space: normal !important;
}

/* Position tooltip higher to avoid overlap with trigger element */
.tooltip.custom-light-tooltip.bs-tooltip-top {
  margin-bottom: 0.5rem !important;
}

/* Tooltip inner content styling - matching custom Tooltip component */
.tooltip.custom-light-tooltip .tooltip-inner {
  background-color: #fff !important;
  color: #333333 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #E5E7EB !important;
  max-width: 300px !important;
  white-space: normal !important;
  text-align: left !important;
  word-wrap: break-word !important;
}

/* Hide default Bootstrap tooltip arrows */
.tooltip.custom-light-tooltip .tooltip-arrow,
.tooltip.custom-light-tooltip .tooltip-arrow::before,
.tooltip.custom-light-tooltip .tooltip-arrow::after {
  border-color: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}

/* Custom arrow border (gray outline) */
.tooltip.custom-light-tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.custom-light-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #E5E7EB !important;
}

/* Custom arrow fill (white) - creates inner arrow */
.tooltip.custom-light-tooltip.bs-tooltip-top .tooltip-inner::after,
.tooltip.custom-light-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-inner::after {
  content: "" !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 7px solid #fff !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
}