/* Tooltip System - Pretty tooltips for better UX
 *
 * CURSORRULES:
 * When adding new features to the website or admin panel, they MUST be very accessible:
 * - Add helpful tooltips using data-tooltip attributes with clear explanations
 * - Include useful placeholder text with examples in input fields
 * - Use tooltip-wrapper class on labels to provide context
 * - Tooltips should explain what the field is for, how to use it, and provide examples
 * - Placeholders should show the expected format or example values
 */

/* Tooltip container */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Elements with no icon should use default cursor */
.tooltip-wrapper[data-tooltip-no-icon] {
  cursor: default !important;
}

/* Override cursor for buttons and tabs with tooltips - always pointer */
button.tooltip-wrapper,
button.tooltip-wrapper[data-tooltip-no-icon],
.tab.tooltip-wrapper,
.tab.tooltip-wrapper[data-tooltip-no-icon] {
  cursor: pointer !important;
}

/* Ensure empty tooltip-wrapper spans are visible */
.tooltip-wrapper:empty {
  display: inline-block;
  min-width: 18px;
  min-height: 18px;
}

.tooltip-wrapper .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  color: var(--muted-text);
  font-size: 12px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--muted-text) 10%, transparent);
  transition: all 0.2s ease;
  vertical-align: middle;
  line-height: 1;
}

.tooltip-wrapper:hover .tooltip-icon,
.tooltip-wrapper:focus .tooltip-icon {
  color: var(--text-color);
  background-color: color-mix(in srgb, var(--muted-text) 20%, transparent);
}

/* Tooltip bubble */
.tooltip-bubble {
  position: fixed;
  z-index: 100000;
  padding: 12px 16px;
  background-color: var(--dropdown-bg);
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--border-color);
  max-width: 320px;
  min-width: 150px;
  width: auto;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  display: none;
  transform: translateY(-8px) scale(0.95);
  transition:
    opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Measuring state: laid out and sized exactly as when shown, but never painted.
   Positioning needs the bubble's real dimensions, and it used to get them by
   adding .show, measuring, then removing it again - which paints the bubble at
   full opacity and full scale for a frame before the entry animation runs. That
   pre-flash is what makes a tooltip look like it loads several times. */
.tooltip-bubble.tooltip-measuring {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: none;
  pointer-events: none;
}

/* Show state with smooth animation */
.tooltip-bubble.show {
  opacity: 1;
  visibility: visible;
  display: block;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Tooltip arrow */
.tooltip-bubble::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

/* Inline arrow tokens for tooltip content */
.tooltip-bubble .tooltip-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-inline-end: 6px;
  font-size: 13px;
  line-height: 1;
}

.tooltip-bubble .tooltip-arrow i {
  font-size: 12px;
  line-height: 1;
}

.tooltip-bubble .tooltip-arrow.up {
  color: #22c55e;
}

.tooltip-bubble .tooltip-arrow.down {
  color: #ef4444;
}

/* Tooltip positioning - default (top) */
/* Note: Positioning is now handled by JavaScript for fixed positioning */
.tooltip-bubble.tooltip-top {
  transform: translateY(-8px) scale(0.95);
}

.tooltip-bubble.tooltip-top.show {
  transform: translateY(0) scale(1);
}

.tooltip-bubble.tooltip-top::before {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: var(--dropdown-bg) transparent transparent transparent;
}

/* Tooltip positioning - bottom */
.tooltip-bubble.tooltip-bottom {
  transform: translateY(8px) scale(0.95);
}

.tooltip-bubble.tooltip-bottom.show {
  transform: translateY(0) scale(1);
}

.tooltip-bubble.tooltip-bottom::before {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--dropdown-bg) transparent;
}

/* Tooltip positioning - left */
.tooltip-bubble.tooltip-left {
  transform: translateX(-8px) scale(0.95);
}

.tooltip-bubble.tooltip-left.show {
  transform: translateX(0) scale(1);
}

.tooltip-bubble.tooltip-left::before {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent var(--dropdown-bg);
}

/* Tooltip positioning - right */
.tooltip-bubble.tooltip-right {
  transform: translateX(8px) scale(0.95);
}

.tooltip-bubble.tooltip-right.show {
  transform: translateX(0) scale(1);
}

.tooltip-bubble.tooltip-right::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--dropdown-bg) transparent transparent;
}

/* Tooltip title */
.tooltip-bubble .tooltip-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--text-color);
  display: block;
  width: 100%;
}

/* Tooltip content */
.tooltip-bubble .tooltip-content {
  color: var(--text-color);
  display: block;
  width: 100%;
}

/* Tooltip with example */
.tooltip-bubble .tooltip-example {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  font-style: italic;
  color: var(--muted-text);
  display: block;
  width: 100%;
}

/* Tooltip on labels */
label .tooltip-wrapper {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Ensure tooltip-wrapper spans inside labels are visible */
label .tooltip-wrapper:empty {
  display: inline-flex;
  min-width: 18px;
  min-height: 18px;
  align-items: center;
}

/* Tooltip on badges */
.issue-badge,
.menu-badge,
.nav-warning-badge {
  position: relative;
}

/* Badges should not have pointer cursor even with tooltips */
.menu-badge.tooltip-wrapper,
.issue-badge.tooltip-wrapper,
.nav-warning-badge.tooltip-wrapper {
  cursor: default !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tooltip-bubble {
    max-width: 280px;
    min-width: 120px;
    width: auto;
    font-size: 14px;
  }

  /* On mobile, tooltip positioning is handled by JavaScript */
  .tooltip-bubble.tooltip-left,
  .tooltip-bubble.tooltip-right {
    transform: translateY(5px);
  }

  .tooltip-bubble.tooltip-left.show,
  .tooltip-bubble.tooltip-right.show {
    transform: translateY(0);
  }
}