/* ===================================================================
 * Balloon Tooltip — global, lightweight, CSS-only
 * Usage:
 *   <button data-tip="Add row">…</button>
 *   <a data-tip="Open in new tab" data-tip-pos="bottom">…</a>
 *   <span data-tip="Long descriptive text that wraps" data-tip-pos="right">…</span>
 *
 * Positions: top (default) | bottom | left | right
 * Auto-sizes to content (max-width 240px). Use \n in data-tip for line breaks via white-space.
 * =================================================================== */

[data-tip] {
    position: relative;
}

[data-tip]::after,
[data-tip]::before {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    will-change: opacity, transform;
}

/* Balloon body */
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 1090;
    background: #1f2937;
    color: #f9fafb;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .015em;
    padding: .42rem .65rem;
    border-radius: 7px;
    box-shadow:
        0 4px 14px rgba(15, 23, 42, .22),
        0 1px 2px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: center;
}

/* Arrow */
[data-tip]::before {
    content: "";
    position: absolute;
    z-index: 1091;
    width: 8px;
    height: 8px;
    background: #1f2937;
    transform: rotate(45deg);
    box-shadow: 1px 1px 2px rgba(15, 23, 42, .08);
}

/* TOP (default) */
[data-tip]:not([data-tip-pos])::after,
[data-tip][data-tip-pos="top"]::after {
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, 4px);
}
[data-tip]:not([data-tip-pos])::before,
[data-tip][data-tip-pos="top"]::before {
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, 4px) rotate(45deg);
}
[data-tip]:not([data-tip-pos]):hover::after,
[data-tip]:not([data-tip-pos]):focus-visible::after,
[data-tip][data-tip-pos="top"]:hover::after,
[data-tip][data-tip-pos="top"]:focus-visible::after {
    transform: translate(-50%, 0);
}
[data-tip]:not([data-tip-pos]):hover::before,
[data-tip]:not([data-tip-pos]):focus-visible::before,
[data-tip][data-tip-pos="top"]:hover::before,
[data-tip][data-tip-pos="top"]:focus-visible::before {
    transform: translate(-50%, 0) rotate(45deg);
}

/* BOTTOM */
[data-tip][data-tip-pos="bottom"]::after {
    top: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%, -4px);
}
[data-tip][data-tip-pos="bottom"]::before {
    top: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, -4px) rotate(45deg);
}
[data-tip][data-tip-pos="bottom"]:hover::after,
[data-tip][data-tip-pos="bottom"]:focus-visible::after { transform: translate(-50%, 0); }
[data-tip][data-tip-pos="bottom"]:hover::before,
[data-tip][data-tip-pos="bottom"]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

/* LEFT */
[data-tip][data-tip-pos="left"]::after {
    right: calc(100% + 9px);
    top: 50%;
    transform: translate(4px, -50%);
}
[data-tip][data-tip-pos="left"]::before {
    right: calc(100% + 5px);
    top: 50%;
    transform: translate(4px, -50%) rotate(45deg);
}
[data-tip][data-tip-pos="left"]:hover::after,
[data-tip][data-tip-pos="left"]:focus-visible::after { transform: translate(0, -50%); }
[data-tip][data-tip-pos="left"]:hover::before,
[data-tip][data-tip-pos="left"]:focus-visible::before { transform: translate(0, -50%) rotate(45deg); }

/* RIGHT */
[data-tip][data-tip-pos="right"]::after {
    left: calc(100% + 9px);
    top: 50%;
    transform: translate(-4px, -50%);
}
[data-tip][data-tip-pos="right"]::before {
    left: calc(100% + 5px);
    top: 50%;
    transform: translate(-4px, -50%) rotate(45deg);
}
[data-tip][data-tip-pos="right"]:hover::after,
[data-tip][data-tip-pos="right"]:focus-visible::after { transform: translate(0, -50%); }
[data-tip][data-tip-pos="right"]:hover::before,
[data-tip][data-tip-pos="right"]:focus-visible::before { transform: translate(0, -50%) rotate(45deg); }

/* Reveal */
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transition-delay: .25s;
}

/* Variants */
[data-tip][data-tip-variant="brand"]::after { background: linear-gradient(135deg, #BC1F27 0%, #9E1A20 100%); color: #fff; }
[data-tip][data-tip-variant="brand"]::before { background: #9E1A20; }
[data-tip][data-tip-variant="light"]::after { background: #fff; color: #1f2937; border: 1px solid #e5e7eb; box-shadow: 0 4px 14px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.06); }
[data-tip][data-tip-variant="light"]::before { background: #fff; box-shadow: 1px 1px 0 #e5e7eb; }

/* Suppress when element is disabled or aria-disabled */
[data-tip][disabled]::after,
[data-tip][disabled]::before,
[data-tip][aria-disabled="true"]::after,
[data-tip][aria-disabled="true"]::before {
    display: none;
}

/* Dark theme */
[data-bs-theme="dark"] [data-tip]::after { background: #f9fafb; color: #1f2937; }
[data-bs-theme="dark"] [data-tip]::before { background: #f9fafb; }
[data-bs-theme="dark"] [data-tip][data-tip-variant="light"]::after { background: #1f2937; color: #f9fafb; border-color: #374151; }
[data-bs-theme="dark"] [data-tip][data-tip-variant="light"]::before { background: #1f2937; }