/* ========================================================================
   KarPayi — Tooltip Component (lazy-loaded)
   System-wide smart tooltip with glassmorphism, 4-direction arrows,
   title/body/action slots. Position set by JS, appearance by CSS.

   Tokens used: design-tokens.css semantic variables only.
   Dark mode: automatic via token inheritance + [data-theme="dark"] overrides.
   ======================================================================== */

/* =====================================================================
   1. BASE CONTAINER
   ===================================================================== */

.kp-tooltip {
  position: fixed;
  z-index: 1060;
  max-width: 320px;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-1);
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms var(--ease-out),
              visibility 150ms var(--ease-out);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =====================================================================
   2. VISIBLE STATE
   ===================================================================== */

.kp-tooltip--visible {
  opacity: 1;
  visibility: visible;
}

/* =====================================================================
   2b. CLICKABLE STATE (whole-card navigation, e.g. glossary tooltip)
   ===================================================================== */

.kp-tooltip--clickable {
  cursor: pointer;
}

.kp-tooltip--clickable:hover {
  border-color: var(--primary);
}

/* =====================================================================
   3. ARROW BASE
   ===================================================================== */

.kp-tooltip__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

/* Arrow shape: rotated square with border on two sides */
.kp-tooltip__arrow::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

/* =====================================================================
   4. DIRECTIONAL ARROWS
   ===================================================================== */

/* --- Top tooltip: arrow points DOWN (bottom of tooltip) --- */
.kp-tooltip[data-tooltip-pos="top"] .kp-tooltip__arrow {
  bottom: -7px;
  left: var(--kp-tooltip-arrow-x, 50%);
  transform: translateX(-50%);
}

.kp-tooltip[data-tooltip-pos="top"] .kp-tooltip__arrow::before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}

/* --- Bottom tooltip: arrow points UP (top of tooltip) --- */
.kp-tooltip[data-tooltip-pos="bottom"] .kp-tooltip__arrow {
  top: -7px;
  left: var(--kp-tooltip-arrow-x, 50%);
  transform: translateX(-50%);
}

.kp-tooltip[data-tooltip-pos="bottom"] .kp-tooltip__arrow::before {
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: var(--border);
  border-left-color: var(--border);
}

/* --- Left tooltip: arrow points RIGHT (right side of tooltip) --- */
.kp-tooltip[data-tooltip-pos="left"] .kp-tooltip__arrow {
  right: -7px;
  top: var(--kp-tooltip-arrow-y, 50%);
  transform: translateY(-50%);
}

.kp-tooltip[data-tooltip-pos="left"] .kp-tooltip__arrow::before {
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: var(--border);
  border-right-color: var(--border);
}

/* --- Right tooltip: arrow points LEFT (left side of tooltip) --- */
.kp-tooltip[data-tooltip-pos="right"] .kp-tooltip__arrow {
  left: -7px;
  top: var(--kp-tooltip-arrow-y, 50%);
  transform: translateY(-50%);
}

.kp-tooltip[data-tooltip-pos="right"] .kp-tooltip__arrow::before {
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: var(--border);
  border-left-color: var(--border);
}

/* =====================================================================
   5. CONTENT SLOTS
   ===================================================================== */

.kp-tooltip__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}

.kp-tooltip__body {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 0;
}

/* When both title and body exist, add spacing before actions */
.kp-tooltip__body + .kp-tooltip__actions {
  margin-top: var(--space-2);
}

/* Title-only (no body) followed by actions */
.kp-tooltip__title + .kp-tooltip__actions {
  margin-top: var(--space-2);
}

.kp-tooltip__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.kp-tooltip__actions a {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.kp-tooltip__actions a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* =====================================================================
   6. DARK MODE REFINEMENTS
   ===================================================================== */

[data-theme="dark"] .kp-tooltip {
  background-color: var(--surface-1);
  border-color: var(--border);
  box-shadow: var(--shadow-3);
}

[data-theme="dark"] .kp-tooltip__arrow::before {
  background-color: var(--surface-1);
  border-color: var(--border);
}

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */

@media (max-width: 575.98px) {
  .kp-tooltip {
    max-width: 280px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
  }

  .kp-tooltip__title {
    font-size: 0.8125rem;
  }

  .kp-tooltip__body {
    font-size: 0.75rem;
  }
}

/* =====================================================================
   8. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kp-tooltip {
    transition: none;
  }
}