/* Base tooltip styles for UIkit */
.uk-tooltip {
    z-index: var(--bs-tooltip-zindex, 1080);
    display: none; /* Hidden by default, shown via UIkit JS */
    margin: var(--bs-tooltip-margin, 0.4rem);
    font-size: var(--bs-tooltip-font-size, 0.875rem);
    max-width: var(--bs-tooltip-max-width, 200px);
    padding: var(--bs-tooltip-padding-y, 0.25rem) var(--bs-tooltip-padding-x, 0.5rem);
    color: var(--bs-tooltip-color, #fff);
    background-color: var(--bs-tooltip-bg, rgba(0, 0, 0, 0.75));
    border-radius: var(--bs-tooltip-border-radius, 0.25rem);
    word-wrap: break-word;
    opacity: 0;
    transition: opacity 0.15s ease;
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.25rem;
    --bs-tooltip-margin: 0.4rem;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: rgba(0, 0, 0, 0.75);
    --bs-tooltip-border-radius: 0.25rem;
    --bs-tooltip-opacity: 0.9;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
}

/* Show tooltip (UIkit toggles display and opacity) */
.uk-tooltip.uk-active {
    display: inline-block;
    opacity: var(--bs-tooltip-opacity, 0.9);
}

/* Arrow base styles */
.uk-tooltip::after {
    content: "";
    position: absolute;
    border: solid transparent;
    border-width: calc(var(--bs-tooltip-arrow-height, 0.4rem)) calc(var(--bs-tooltip-arrow-width, 0.8rem) * 0.5);
}

/* Top position */
.uk-tooltip[pos="top"]::after {
    bottom: calc(-1 * var(--bs-tooltip-arrow-height, 0.4rem));
    border-bottom-width: 0;
    border-top-color: var(--bs-tooltip-bg, rgba(0, 0, 0, 0.75));
}

/* Bottom position */
.uk-tooltip[pos="bottom"]::after {
    top: calc(-1 * var(--bs-tooltip-arrow-height, 0.4rem));
    border-top-width: 0;
    border-bottom-color: var(--bs-tooltip-bg, rgba(0, 0, 0, 0.75));
}

/* Right position */
.uk-tooltip[pos="right"]::after {
    left: calc(-1 * var(--bs-tooltip-arrow-height, 0.4rem));
    border-left-width: 0;
    border-right-color: var(--bs-tooltip-bg, rgba(0, 0, 0, 0.75));
    border-width: calc(var(--bs-tooltip-arrow-width, 0.8rem) * 0.5) var(--bs-tooltip-arrow-height, 0.4rem) calc(var(--bs-tooltip-arrow-width, 0.8rem) * 0.5) 0;
}

/* Left position */
.uk-tooltip[pos="left"]::after {
    right: calc(-1 * var(--bs-tooltip-arrow-height, 0.4rem));
    border-right-width: 0;
    border-left-color: var(--bs-tooltip-bg, rgba(0, 0, 0, 0.75));
    border-width: calc(var(--bs-tooltip-arrow-width, 0.8rem) * 0.5) 0 calc(var(--bs-tooltip-arrow-width, 0.8rem) * 0.5) var(--bs-tooltip-arrow-height, 0.4rem);
}

/* Center arrow horizontally for top/bottom */
.uk-tooltip[pos="top"]::after,
.uk-tooltip[pos="bottom"]::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Center arrow vertically for left/right */
.uk-tooltip[pos="left"]::after,
.uk-tooltip[pos="right"]::after {
    top: 50%;
    transform: translateY(-50%);
}