/* =================================================================
   RAXE Design System — Tooltips Component v1.0
   CSS-only tooltip system using [data-tooltip] attribute.
   Depends on: tokens.css

   Usage:
     <span data-tooltip="Explanation text here">Hover me</span>
     <span data-tooltip="Above" data-tooltip-pos="top">Default</span>
     <span data-tooltip="Below" data-tooltip-pos="bottom">Below</span>
     <span data-tooltip="Left"  data-tooltip-pos="left">Left</span>
     <span data-tooltip="Right" data-tooltip-pos="right">Right</span>

   Modifiers:
     data-tooltip-size="sm"    — max-width 180px (short labels)
     data-tooltip-size="lg"    — max-width 360px (paragraphs)
     data-tooltip-mono="true"  — JetBrains Mono for data values
   ================================================================= */


/* -----------------------------------------------------------------
   1. BASE — shared pseudo-element setup
   ----------------------------------------------------------------- */

[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Prevent tooltip flicker when moving between trigger and tooltip */
[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-fast) var(--ease-default),
        visibility var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-out);
    z-index: var(--z-toast);  /* 400 — above modals, below scanlines */
}

/* Arrow (triangle) */
[data-tooltip]::before {
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Tooltip body */
[data-tooltip]::after {
    content: attr(data-tooltip);

    /* Visual style */
    background: var(--surface-overlay);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow:
        var(--shadow-md),
        0 0 24px rgba(56, 189, 248, 0.06);

    /* Typography */
    font-family: var(--font-body);
    font-size: var(--fs-caption);          /* 13px */
    font-weight: var(--weight-regular);    /* 400 */
    line-height: var(--leading-normal);    /* 1.5 */
    color: var(--text-body);               /* #cdd8e4 */
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;

    /* Sizing */
    max-width: 260px;
    min-width: 80px;
    width: max-content;
    padding: var(--space-2) var(--space-3); /* 8px 12px */
}


/* -----------------------------------------------------------------
   2. SIZE VARIANTS
   ----------------------------------------------------------------- */

[data-tooltip-size="sm"]::after {
    max-width: 180px;
    font-size: var(--fs-label);  /* 12px */
    padding: var(--space-1) var(--space-2);  /* 4px 8px */
}

[data-tooltip-size="lg"]::after {
    max-width: 360px;
    padding: var(--space-3) var(--space-4);  /* 12px 16px */
}


/* -----------------------------------------------------------------
   3. MONO VARIANT (for technical/data values)
   ----------------------------------------------------------------- */

[data-tooltip-mono="true"]::after {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);   /* 12px */
    letter-spacing: var(--tracking-wide);
}


/* -----------------------------------------------------------------
   4. POSITION: TOP (default)
   ----------------------------------------------------------------- */

/* Arrow: sits below the tooltip, points down */
[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip][data-tooltip-pos="top"]::before {
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-top-color: var(--border-strong);
    border-bottom-width: 0;
}

/* Body: above the trigger */
[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-pos="top"]::after {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

/* Hover/focus — slide into place */
[data-tooltip]:not([data-tooltip-pos]):hover::before,
[data-tooltip]:not([data-tooltip-pos]):focus-visible::before,
[data-tooltip][data-tooltip-pos="top"]:hover::before,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:not([data-tooltip-pos]):hover::after,
[data-tooltip]:not([data-tooltip-pos]):focus-visible::after,
[data-tooltip][data-tooltip-pos="top"]:hover::after,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}


/* -----------------------------------------------------------------
   5. POSITION: BOTTOM
   ----------------------------------------------------------------- */

[data-tooltip][data-tooltip-pos="bottom"]::before {
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border-bottom-color: var(--border-strong);
    border-top-width: 0;
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}


/* -----------------------------------------------------------------
   6. POSITION: LEFT
   ----------------------------------------------------------------- */

[data-tooltip][data-tooltip-pos="left"]::before {
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    border-left-color: var(--border-strong);
    border-right-width: 0;
}

[data-tooltip][data-tooltip-pos="left"]::after {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
    transform: translateY(-50%) translateX(0);
}


/* -----------------------------------------------------------------
   7. POSITION: RIGHT
   ----------------------------------------------------------------- */

[data-tooltip][data-tooltip-pos="right"]::before {
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    border-right-color: var(--border-strong);
    border-left-width: 0;
}

[data-tooltip][data-tooltip-pos="right"]::after {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
    transform: translateY(-50%) translateX(0);
}


/* -----------------------------------------------------------------
   8. SHOW STATE — hover + focus-visible + touch
   Intentional delay: 300ms before showing prevents flicker on
   fast mouse passes. Dismiss is instant (150ms fade).
   ----------------------------------------------------------------- */

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after,
[data-tooltip].tooltip-visible::before,
[data-tooltip].tooltip-visible::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 300ms;   /* show delay */
}

/* Dismiss: no delay, fast fade */
[data-tooltip]::before,
[data-tooltip]::after {
    transition-delay: 0ms;     /* hide immediately */
}


/* -----------------------------------------------------------------
   9. ACCESSIBILITY
   - focus-visible triggers tooltip for keyboard users
   - prefers-reduced-motion disables the slide animation
   - aria-describedby pattern supported via .tooltip-visible class
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        transition-duration: 0ms;
    }

    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::before,
    [data-tooltip]:focus-visible::after,
    [data-tooltip].tooltip-visible::before,
    [data-tooltip].tooltip-visible::after {
        transition-delay: 0ms;
    }
}

/* Screen readers: provide tooltip text as accessible description */
[data-tooltip][aria-describedby] {
    cursor: help;
}


/* -----------------------------------------------------------------
   10. TOUCH DEVICE HANDLING
   On touch devices, hover is unreliable. The .tooltip-visible class
   is toggled by a lightweight JS handler (tap to show, tap elsewhere
   or scroll to dismiss). CSS below ensures the class works.
   ----------------------------------------------------------------- */

/* On coarse pointers (touch), suppress hover-based show to avoid
   sticky tooltips. Only .tooltip-visible (set by JS) will show. */
@media (pointer: coarse) {
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 0;
        visibility: hidden;
        transition-delay: 0ms;
    }

    /* Only JS-toggled class shows on touch */
    [data-tooltip].tooltip-visible::before,
    [data-tooltip].tooltip-visible::after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0ms;
    }
}


/* -----------------------------------------------------------------
   11. INTERACTIVE ELEMENTS — cursor override
   Buttons and links with tooltips should keep their native cursor.
   ----------------------------------------------------------------- */

button[data-tooltip],
a[data-tooltip],
[role="button"][data-tooltip] {
    cursor: pointer;
}


/* -----------------------------------------------------------------
   12. SEVERITY-TINTED TOOLTIPS
   Optional: add data-tooltip-sev="critical|high|medium|low|info"
   to tint the tooltip border with the severity color.
   ----------------------------------------------------------------- */

[data-tooltip-sev="critical"]::after {
    border-color: var(--sev-critical-border);
    box-shadow: var(--shadow-md), 0 0 16px rgba(248, 113, 113, 0.08);
}
[data-tooltip-sev="critical"]::before {
    border-top-color: var(--sev-critical-border);
}
[data-tooltip-sev="critical"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--sev-critical-border);
}

[data-tooltip-sev="high"]::after {
    border-color: var(--sev-high-border);
    box-shadow: var(--shadow-md), 0 0 16px rgba(251, 146, 60, 0.08);
}
[data-tooltip-sev="high"]::before {
    border-top-color: var(--sev-high-border);
}
[data-tooltip-sev="high"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--sev-high-border);
}

[data-tooltip-sev="medium"]::after {
    border-color: var(--sev-medium-border);
    box-shadow: var(--shadow-md), 0 0 16px rgba(251, 191, 36, 0.08);
}
[data-tooltip-sev="medium"]::before {
    border-top-color: var(--sev-medium-border);
}
[data-tooltip-sev="medium"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--sev-medium-border);
}

[data-tooltip-sev="low"]::after {
    border-color: var(--sev-low-border);
    box-shadow: var(--shadow-md), 0 0 16px rgba(52, 211, 153, 0.08);
}
[data-tooltip-sev="low"]::before {
    border-top-color: var(--sev-low-border);
}
[data-tooltip-sev="low"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--sev-low-border);
}

[data-tooltip-sev="info"]::after {
    border-color: var(--sev-info-border);
    box-shadow: var(--shadow-md), 0 0 16px rgba(56, 189, 248, 0.08);
}
[data-tooltip-sev="info"]::before {
    border-top-color: var(--sev-info-border);
}
[data-tooltip-sev="info"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--sev-info-border);
}


/* -----------------------------------------------------------------
   13. EMPTY TOOLTIP GUARD
   If data-tooltip is empty or whitespace-only, hide everything.
   ----------------------------------------------------------------- */

[data-tooltip=""]::before,
[data-tooltip=""]::after {
    display: none;
}


/* -----------------------------------------------------------------
   14. PRINT — hide all tooltips
   ----------------------------------------------------------------- */

@media print {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none;
    }
}