/**
 * @file
 * Generic tooltip component styles.
 *
 * Usage:
 *
 * Basic tooltip:
 * <div class="tooltip-wrapper">
 *   <span class="tooltip-trigger">Hover me</span>
 *   <div class="tooltip-content">Tooltip text here</div>
 * </div>
 *
 * With icon:
 * <div class="tooltip-wrapper">
 *   <span class="tooltip-trigger tooltip-icon">
 *     <svg>...</svg>
 *   </span>
 *   <div class="tooltip-content">Tooltip text here</div>
 * </div>
 *
 * Position modifiers:
 * - .tooltip-top (default)
 * - .tooltip-bottom
 * - .tooltip-left
 * - .tooltip-right
 *
 * Size modifiers:
 * - .tooltip-sm (small)
 * - .tooltip-md (medium, default)
 * - .tooltip-lg (large)
 */

/* Base tooltip wrapper */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Tooltip trigger element */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.tooltip-trigger:hover {
  opacity: 0.8;
}

/* Icon style for triggers */
.tooltip-icon {
  color: #0074bd;
}

.tooltip-icon:hover {
  color: #004f80;
}

.tooltip-icon svg {
  display: block;
}

/* Base tooltip content - hidden by default */
.tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1000;
  padding: 12px 16px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
}

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

/* Tooltip arrow base */
.tooltip-content::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
}

/* Position: Top (default) */
.tooltip-wrapper .tooltip-content,
.tooltip-top .tooltip-content {
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-width: 400px;
}

.tooltip-wrapper .tooltip-content::after,
.tooltip-top .tooltip-content::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: #333 transparent transparent transparent;
}

/* Position: Bottom */
.tooltip-bottom .tooltip-content {
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-width: 400px;
}

.tooltip-bottom .tooltip-content::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent #333 transparent;
}

/* Position: Left */
.tooltip-left .tooltip-content {
  right: 125%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 200px;
  max-width: 300px;
}

.tooltip-left .tooltip-content::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent #333;
}

/* Position: Right */
.tooltip-right .tooltip-content {
  left: 125%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 200px;
  max-width: 300px;
}

.tooltip-right .tooltip-content::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent #333 transparent transparent;
}

/* Size: Small */
.tooltip-sm .tooltip-content {
  min-width: 150px;
  max-width: 250px;
  padding: 8px 12px;
  font-size: 12px;
}

/* Size: Large */
.tooltip-lg .tooltip-content {
  min-width: 300px;
  max-width: 500px;
  padding: 16px 20px;
  font-size: 15px;
}

/* Ensure links in tooltip are visible */
.tooltip-content a {
  color: #66b3ff;
  text-decoration: underline;
}

.tooltip-content a:hover {
  color: #99ccff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tooltip-content {
    min-width: 200px !important;
    max-width: 280px !important;
    font-size: 13px;
    padding: 10px 12px;
  }

  .tooltip-sm .tooltip-content {
    min-width: 150px !important;
    max-width: 220px !important;
  }

  .tooltip-lg .tooltip-content {
    min-width: 220px !important;
    max-width: 300px !important;
  }
}

/* Table cell specific adjustments */
td .tooltip-wrapper {
  margin: 0;
}

/* Prevent tooltip overflow on right edge in tables */
.views-table td:last-child .tooltip-content {
  left: auto;
  right: 0;
  transform: none;
}

.views-table td:last-child .tooltip-content::after {
  left: auto;
  right: 20px;
  transform: none;
}

/* Legacy class names for backward compatibility */
.transaction-annotation {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.annotation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0074bd;
  transition: color 0.2s ease;
}

.annotation-icon:hover {
  color: #004f80;
}

.annotation-icon svg {
  display: block;
}

.annotation-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-width: 400px;
  padding: 12px 16px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
}

.annotation-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.transaction-annotation:hover .annotation-tooltip {
  visibility: visible;
  opacity: 1;
}

.annotation-tooltip a {
  color: #66b3ff;
  text-decoration: underline;
}

.annotation-tooltip a:hover {
  color: #99ccff;
}

.views-table td:last-child .annotation-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.views-table td:last-child .annotation-tooltip::after {
  left: auto;
  right: 20px;
  transform: none;
}