/* App-standard styled tooltip. Add class="tooltip" data-tooltip="..." to
 * any element — tooltip.js finds it and shows this bubble on hover/focus.
 * On mouse hover it follows the cursor (same technique as the dashboard's
 * chart tooltips); on keyboard focus it falls back to sitting below the
 * element. Either way it's clamped to the viewport so it never runs
 * off-screen. `.tooltip` itself carries no styling; it's just the marker
 * tooltip.js delegates from. The bubble is a single shared element JS
 * repositions per trigger, not a per-element ::after — that's what makes
 * the edge-clamping possible.
 */

.tooltip-bubble {
    position: fixed;
    z-index: 1200;
    width: max-content;
    max-width: 300px;
    padding: 0.4rem 0.65rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, var(--alpha-shadow-md));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.tooltip-bubble--visible {
    opacity: 1;
}