/* ============================================================
   SynchIntro Tooltip Component — css/tooltip.css
   PathSynch design tokens  |  light + dark mode
   ============================================================ */

/* ─── Portal root ────────────────────────────────────────────
   Fixed-position zero-size container so tooltips escape
   stacking contexts of their trigger ancestors.              */
#si-tooltip-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 9000;
}

/* ─── Base tooltip ───────────────────────────────────────────
   Position is set by @floating-ui (left/top via JS).        */
.si-tooltip {
  position: fixed;
  top: 0;
  left: 0;

  /* PathSynch design tokens */
  --si-tt-bg:           #111827;
  --si-tt-text:         #FCFBF8;
  --si-tt-arrow:        #111827;
  --si-tt-border:       transparent;
  --si-tt-radius:       8px;
  --si-tt-shadow:       0 4px 6px -1px rgba(0, 0, 0, 0.18),
                        0 2px 4px -2px rgba(0, 0, 0, 0.12);
  --si-tt-font:         'DM Sans', sans-serif;
  --si-tt-size:         13px;
  --si-tt-line:         1.5;
  --si-tt-pad-v:        8px;
  --si-tt-pad-h:        12px;
  --si-tt-duration:     150ms;
  --si-tt-arrow-size:   8px;

  background:    var(--si-tt-bg);
  color:         var(--si-tt-text);
  border-radius: var(--si-tt-radius);
  border:        1px solid var(--si-tt-border);
  box-shadow:    var(--si-tt-shadow);
  font-family:   var(--si-tt-font);
  font-size:     var(--si-tt-size);
  line-height:   var(--si-tt-line);
  word-wrap:     break-word;
  pointer-events: none;
  user-select:   none;

  /* Fade + slide toward trigger (default: coming from below → slide up) */
  opacity:   0;
  transform: translateY(4px);
  transition:
    opacity   var(--si-tt-duration) ease-out,
    transform var(--si-tt-duration) ease-out;

  will-change: opacity, transform;
}

/* Pinnable tooltips need to receive pointer events for interaction */
.si-tooltip--pinnable {
  pointer-events: auto;
}

/* ─── Visible state ──────────────────────────────────────────*/
.si-tooltip--visible {
  opacity:   1;
  transform: translateY(0) !important;
}

/* ─── Placement-aware entrance directions ────────────────────
   Floating UI sets data-placement after computing final
   placement (may differ from requested due to flip).        */
.si-tooltip[data-placement^="top"] {
  transform: translateY(4px);
}
.si-tooltip[data-placement^="bottom"] {
  transform: translateY(-4px);
}
.si-tooltip[data-placement^="left"] {
  transform: translateX(4px);
}
.si-tooltip[data-placement^="right"] {
  transform: translateX(-4px);
}

/* ─── Prefers-reduced-motion ────────────────────────────────*/
.si-tooltip--no-motion,
.si-tooltip--no-motion.si-tooltip--visible {
  transition: opacity 0ms !important;
  transform:  none !important;
}

/* ─── Content ────────────────────────────────────────────────*/
.si-tooltip-content {
  padding: var(--si-tt-pad-v) var(--si-tt-pad-h);
  max-width: 100%;
}

.si-tooltip-content p {
  margin: 0 0 6px;
}
.si-tooltip-content p:last-child {
  margin-bottom: 0;
}

.si-tooltip-content strong {
  font-weight: 600;
}

/* ─── Rich tooltip: title + divider ─────────────────────────*/
.si-tooltip-title {
  display: block;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2DD4BF;          /* teal-400 — visible on dark bg */
  margin-bottom: 5px;
}

.si-tooltip-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 6px calc(-1 * var(--si-tt-pad-h));
}

/* ─── Arrow / caret ──────────────────────────────────────────
   Position is set by Floating UI's arrow middleware.        */
.si-tooltip-arrow {
  position: absolute;
  width:  var(--si-tt-arrow-size);
  height: var(--si-tt-arrow-size);
  background: var(--si-tt-arrow);
  transform: rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
  z-index: -1;
}

/* Correct arrow overlap with border on light theme */
.si-tooltip[data-theme="light"] .si-tooltip-arrow {
  border: 1px solid rgba(17, 24, 39, 0.1);
  /* The visible triangle side will overlap the border — handled
     by placing z-index below tooltip body */
}

/* ─── Light theme ────────────────────────────────────────────*/
.si-tooltip[data-theme="light"] {
  --si-tt-bg:     #111827;
  --si-tt-text:   #FCFBF8;
  --si-tt-arrow:  #111827;
  --si-tt-border: transparent;
}

/* ─── Dark theme (explicit prop override) ────────────────────*/
.si-tooltip[data-theme="dark"] {
  --si-tt-bg:     #1F2937;
  --si-tt-text:   #F9FAFB;
  --si-tt-arrow:  #1F2937;
}

/* ─── App dark mode — auto-theme tooltips update ─────────────
   When the page is in dark mode and theme="auto" (default),
   the tooltip re-resolves on mount, so the data-theme attr
   will already be "dark". This rule is a belt-and-suspenders
   fallback for any tooltip that slips through.              */
[data-theme="dark"] .si-tooltip {
  --si-tt-bg:     #1F2937;
  --si-tt-text:   #F9FAFB;
  --si-tt-arrow:  #1F2937;
}

[data-theme="dark"] .si-tooltip-title {
  color: #2DD4BF;
}

[data-theme="dark"] .si-tooltip-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── Trigger helpers ────────────────────────────────────────
   Utility classes for common trigger patterns in SynchIntro. */

/* Info icon trigger (ⓘ beside labels) */
.si-tt-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: #9CA3AF;
  background: none;
  border: none;
  padding: 0 2px;
  line-height: 1;
  vertical-align: middle;
  transition: color 0.15s;
  border-radius: 3px;
}
.si-tt-trigger:hover,
.si-tt-trigger:focus {
  color: #0D9488;
  outline: none;
}
.si-tt-trigger:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 2px;
}

[data-theme="dark"] .si-tt-trigger {
  color: #6B7280;
}
[data-theme="dark"] .si-tt-trigger:hover,
[data-theme="dark"] .si-tt-trigger:focus {
  color: #2DD4BF;
}

/* SVG info icon inside trigger */
.si-tt-icon {
  width:  14px;
  height: 14px;
  flex-shrink: 0;
}

/* Credit cost badge (amber pill beside action buttons) */
.si-tt-credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 20px;
  cursor: help;
  border: 1px solid rgba(245, 158, 11, 0.25);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
}
.si-tt-credit-badge:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
}
.si-tt-credit-badge:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}

[data-theme="dark"] .si-tt-credit-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .si-tt-credit-badge:hover {
  background: rgba(245, 158, 11, 0.25);
}

/* Enrichment source badge (data provenance on contact cards) */
.si-tt-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(13, 148, 136, 0.08);
  color: #0D9488;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: help;
  border: 1px solid rgba(13, 148, 136, 0.2);
  white-space: nowrap;
  transition: background 0.15s;
}
.si-tt-source-badge:hover {
  background: rgba(13, 148, 136, 0.15);
}
.si-tt-source-badge:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 2px;
}

[data-theme="dark"] .si-tt-source-badge {
  background: rgba(45, 212, 191, 0.1);
  color: #2DD4BF;
  border-color: rgba(45, 212, 191, 0.2);
}
[data-theme="dark"] .si-tt-source-badge:hover {
  background: rgba(45, 212, 191, 0.18);
}