/**
 * System-wide UI tooltips
 * -------------------------
 * Use either:
 * 1) Bootstrap:  data-bs-toggle="tooltip" title="..."
 * 2) Attribute:  data-tooltip="Help text"  (optional data-tooltip-pos="top|bottom|left|right")
 * 3) Helper:     class="ui-tooltip" + title="..."  (auto-upgraded by ui-tooltip.js)
 */

:root {
    --ui-tooltip-bg: #111111;
    --ui-tooltip-color: #ffffff;
    --ui-tooltip-muted: rgba(255, 255, 255, 0.72);
    --ui-tooltip-radius: 0.55rem;
    --ui-tooltip-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    --ui-tooltip-font-size: 0.78rem;
    --ui-tooltip-line-height: 1.35;
    --ui-tooltip-max-width: 16.5rem;
    --ui-tooltip-z: 1080;
    --ui-tooltip-pad-y: 0.4rem;
    --ui-tooltip-pad-x: 0.65rem;
}

/* ----------------------------------------
   Bootstrap 5 tooltip skin (global)
   ---------------------------------------- */

.tooltip {
    --bs-tooltip-bg: var(--ui-tooltip-bg);
    --bs-tooltip-color: var(--ui-tooltip-color);
    --bs-tooltip-border-radius: var(--ui-tooltip-radius);
    --bs-tooltip-padding-x: var(--ui-tooltip-pad-x);
    --bs-tooltip-padding-y: var(--ui-tooltip-pad-y);
    --bs-tooltip-font-size: var(--ui-tooltip-font-size);
    --bs-tooltip-max-width: var(--ui-tooltip-max-width);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-zindex: var(--ui-tooltip-z);
    font-family: inherit;
}

.tooltip .tooltip-inner {
    padding: var(--ui-tooltip-pad-y) var(--ui-tooltip-pad-x);
    border-radius: var(--ui-tooltip-radius);
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-color);
    font-size: var(--ui-tooltip-font-size);
    font-weight: 550;
    line-height: var(--ui-tooltip-line-height);
    letter-spacing: 0.01em;
    text-align: left;
    box-shadow: var(--ui-tooltip-shadow);
    max-width: var(--ui-tooltip-max-width);
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--ui-tooltip-bg) !important;
    border-bottom-color: var(--ui-tooltip-bg) !important;
    border-left-color: var(--ui-tooltip-bg) !important;
    border-right-color: var(--ui-tooltip-bg) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--ui-tooltip-bg) !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--ui-tooltip-bg) !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--ui-tooltip-bg) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--ui-tooltip-bg) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

/* Soft / light variant */
.tooltip.ui-tooltip--light {
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-color: #111111;
}

.tooltip.ui-tooltip--light .tooltip-inner {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------
   Pure CSS attribute tooltips
   [data-tooltip="..."] data-tooltip-pos="top|bottom|left|right"
   ---------------------------------------- */

[data-tooltip] {
    position: relative;
    --_tip-pos: top;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease;
    z-index: var(--ui-tooltip-z);
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    width: max-content;
    max-width: var(--ui-tooltip-max-width);
    padding: var(--ui-tooltip-pad-y) var(--ui-tooltip-pad-x);
    border-radius: var(--ui-tooltip-radius);
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-color);
    font-size: var(--ui-tooltip-font-size);
    font-weight: 550;
    line-height: var(--ui-tooltip-line-height);
    letter-spacing: 0.01em;
    text-align: left;
    white-space: normal;
    box-shadow: var(--ui-tooltip-shadow);
}

[data-tooltip]::before {
    content: "";
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Default / top */
[data-tooltip]:not([data-tooltip-pos]),
[data-tooltip][data-tooltip-pos="top"] {
    --_tip-x: 50%;
    --_tip-y: 0;
    --_tip-tx: -50%;
    --_tip-ty: calc(-100% - 10px);
    --_arrow-tx: -50%;
    --_arrow-ty: calc(-100% - 4px);
    --_arrow-border: 6px solid transparent;
}

[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-pos="top"]::after {
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-100% - 10px)) translateY(4px);
}

[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip][data-tooltip-pos="top"]::before {
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-100% - 4px)) translateY(4px);
    border-top-color: var(--ui-tooltip-bg);
}

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

[data-tooltip][data-tooltip-pos="bottom"]::before {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 4px) translateY(-4px);
    border-bottom-color: var(--ui-tooltip-bg);
}

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

[data-tooltip][data-tooltip-pos="left"]::before {
    left: 0;
    top: 50%;
    transform: translate(calc(-100% - 4px), -50%) translateX(4px);
    border-left-color: var(--ui-tooltip-bg);
}

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

[data-tooltip][data-tooltip-pos="right"]::before {
    left: 100%;
    top: 50%;
    transform: translate(4px, -50%) translateX(-4px);
    border-right-color: var(--ui-tooltip-bg);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after,
[data-tooltip].is-tooltip-open::before,
[data-tooltip].is-tooltip-open::after {
    opacity: 1;
    visibility: visible;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip].is-tooltip-open::after {
    transform: translate(-50%, calc(-100% - 10px));
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before,
[data-tooltip].is-tooltip-open::before {
    transform: translate(-50%, calc(-100% - 4px));
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="bottom"].is-tooltip-open::after {
    transform: translate(-50%, 10px);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="bottom"].is-tooltip-open::before {
    transform: translate(-50%, 4px);
}

[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="left"].is-tooltip-open::after {
    transform: translate(calc(-100% - 10px), -50%);
}

[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="left"].is-tooltip-open::before {
    transform: translate(calc(-100% - 4px), -50%);
}

[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="right"].is-tooltip-open::after {
    transform: translate(10px, -50%);
}

[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="right"].is-tooltip-open::before {
    transform: translate(4px, -50%);
}

/* When Bootstrap owns the tooltip, hide CSS pseudo tip */
[data-tooltip][data-bs-toggle="tooltip"]::before,
[data-tooltip][data-bs-toggle="tooltip"]::after,
.ui-tooltip[data-bs-toggle="tooltip"]::before,
.ui-tooltip[data-bs-toggle="tooltip"]::after {
    content: none !important;
    display: none !important;
}

/* Truncation helper often paired with tooltips */
.ui-tooltip-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (hover: none) {
    /* On touch devices, rely on focus/tap via .is-tooltip-open from JS */
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::before,
    [data-tooltip]::after,
    .tooltip {
        transition: none !important;
    }
}