/**
 * Tooltips Component - PPL Questions v2
 *
 * Simple CSS tooltips using data-tooltip attribute
 *
 * Usage:
 *   <button data-tooltip="Edit item">...</button>
 *   <button data-tooltip="Delete" data-tooltip-position="left">...</button>
 *
 * Positions: top (default), bottom, left, right
 */

/* Base tooltip styles */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
    z-index: 100000;
}

/* Tooltip text bubble */
[data-tooltip]::after {
    content: attr(data-tooltip);
    background: rgba(33, 37, 41, 0.95);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tooltip arrow */
[data-tooltip]::before {
    content: '';
    border: 5px solid transparent;
}

/* Show on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* =========================================================================
   POSITION: TOP (default)
   ========================================================================= */

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

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

[data-tooltip]:not([data-tooltip-position])::before,
[data-tooltip][data-tooltip-position="top"]::before {
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   POSITION: BOTTOM
   ========================================================================= */

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

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

[data-tooltip][data-tooltip-position="bottom"]::before {
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   POSITION: LEFT
   ========================================================================= */

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

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

[data-tooltip][data-tooltip-position="left"]::before {
    right: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-left-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   POSITION: RIGHT
   ========================================================================= */

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

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

[data-tooltip][data-tooltip-position="right"]::before {
    left: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-right-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   POSITION: BOTTOM-RIGHT (for elements near left edge of screen)
   ========================================================================= */

[data-tooltip][data-tooltip-position="bottom-right"]::after {
    top: calc(100% + 8px);
    left: 0;
    transform: translateY(-4px);
}

[data-tooltip][data-tooltip-position="bottom-right"]:hover::after {
    transform: translateY(0);
}

[data-tooltip][data-tooltip-position="bottom-right"]::before {
    top: calc(100% + 3px);
    left: 12px;
    border-bottom-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   POSITION: BOTTOM-LEFT (for elements near right edge of screen)
   ========================================================================= */

[data-tooltip][data-tooltip-position="bottom-left"]::after {
    top: calc(100% + 8px);
    right: 0;
    transform: translateY(-4px);
}

[data-tooltip][data-tooltip-position="bottom-left"]:hover::after {
    transform: translateY(0);
}

[data-tooltip][data-tooltip-position="bottom-left"]::before {
    top: calc(100% + 3px);
    right: 12px;
    border-bottom-color: rgba(33, 37, 41, 0.95);
}

/* =========================================================================
   MOBILE: Hide tooltips on touch devices
   ========================================================================= */

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