/*
 * MockupBulk Tooltip System
 * Pure-CSS tooltips for contextual help across the platform.
 *
 * Usage:
 *   <span class="tt">Label <span class="tt-icon" data-tip="Help text here">?</span></span>
 *
 * Or attach directly to any element:
 *   <button class="tt-inline" data-tip="Clicking this will do X">Do X</button>
 *
 * Position variants:
 *   data-tip-pos="top"    (default — tooltip above)
 *   data-tip-pos="bottom" (tooltip below)
 *   data-tip-pos="right"  (tooltip to the right — useful for fixed-left panels)
 *   data-tip-pos="left"   (tooltip to the left)
 */

/* The help-icon: small "?" circle that sits next to labels */
.tt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: help;
  user-select: none;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  transition: background 120ms, color 120ms;
}
.tt-icon:hover {
  background: #6366f1;
  color: #ffffff;
}

/* Tooltip bubble — shared between .tt-icon and .tt-inline */
.tt-icon[data-tip],
.tt-inline[data-tip] {
  position: relative;
}

.tt-icon[data-tip]::after,
.tt-inline[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #111827;
  color: #ffffff;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 120ms ease, visibility 120ms ease;
}

.tt-icon[data-tip]::before,
.tt-inline[data-tip]::before {
  content: "";
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 5px solid transparent;
  z-index: 9999;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.tt-icon[data-tip]:hover::after,
.tt-icon[data-tip]:hover::before,
.tt-icon[data-tip]:focus::after,
.tt-icon[data-tip]:focus::before,
.tt-inline[data-tip]:hover::after,
.tt-inline[data-tip]:hover::before,
.tt-inline[data-tip]:focus::after,
.tt-inline[data-tip]:focus::before {
  opacity: 1;
  visibility: visible;
}

/* === Positions === */
/* Default: top */
.tt-icon[data-tip]::after,
.tt-inline[data-tip]::after,
.tt-icon[data-tip][data-tip-pos="top"]::after,
.tt-inline[data-tip][data-tip-pos="top"]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tt-icon[data-tip]::before,
.tt-inline[data-tip]::before,
.tt-icon[data-tip][data-tip-pos="top"]::before,
.tt-inline[data-tip][data-tip-pos="top"]::before {
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #111827;
}

/* Bottom */
.tt-icon[data-tip][data-tip-pos="bottom"]::after,
.tt-inline[data-tip][data-tip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tt-icon[data-tip][data-tip-pos="bottom"]::before,
.tt-inline[data-tip][data-tip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: transparent;
  border-bottom-color: #111827;
}

/* Right */
.tt-icon[data-tip][data-tip-pos="right"]::after,
.tt-inline[data-tip][data-tip-pos="right"]::after {
  bottom: auto;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}
.tt-icon[data-tip][data-tip-pos="right"]::before,
.tt-inline[data-tip][data-tip-pos="right"]::before {
  bottom: auto;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: #111827;
}

/* Left */
.tt-icon[data-tip][data-tip-pos="left"]::after,
.tt-inline[data-tip][data-tip-pos="left"]::after {
  bottom: auto;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}
.tt-icon[data-tip][data-tip-pos="left"]::before,
.tt-inline[data-tip][data-tip-pos="left"]::before {
  bottom: auto;
  right: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: #111827;
}

/* The wrapper for "Label + ? icon" combo */
.tt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* When the tooltip target is on a fixed-position panel, the tooltip may escape
   the panel's overflow:hidden. Add this class to the ancestor to allow overflow. */
.tt-allow-overflow { overflow: visible !important; }

/* Mobile: tooltips show on tap, not hover. Use :active to simulate tap-hold. */
@media (hover: none) {
  .tt-icon[data-tip]:active::after,
  .tt-icon[data-tip]:active::before,
  .tt-inline[data-tip]:active::after,
  .tt-inline[data-tip]:active::before {
    opacity: 1;
    visibility: visible;
  }
}