/* ===========================
   Tooltip Styling
=========================== */

/* Override Bootstrap's default tooltip styling */
.tooltip .tooltip-inner {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px var(--shadow-light) !important;
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
    text-align: left !important;
    max-width: 300px !important;
}

/* Custom tooltip arrow color to match background */
.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--border-primary) !important;
}

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

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

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

/* Ensure tooltip opacity is full */
.tooltip {
    opacity: 1 !important;
}

/* ===========================
   Tour Mode Tooltip Z-Index
=========================== */

/* Ensure Bootstrap tooltips appear above tour overlay when tour is active */
/* Tour overlay has z-index 19990, so tooltips need to be higher */
#tour-spotlight-active ~ .tooltip,
body:has(#tour-spotlight-active) .tooltip {
    z-index: 19998 !important;  /* Above tour overlay (19990) and highlight (19995), below tour tooltip (20000) */
}