/* define ChartTooltip */

.ChartTooltip {
    position: relative;
    background: var(--surface-inverse);
    color: var(--text-white);
    border-radius: var(--border-radius-default, 4px);
    padding: var(--padding-xs, 8px) var(--padding-sm, 12px);
    font-size: var(--font-size-small);
    line-height: 1.4;
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
}

.ChartExternalTooltip-arrow,
.ChartExternalTooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
}

.ChartExternalTooltip-arrow::before {
    content: "";
    background: var(--surface-inverse);
    transform: rotate(45deg);
}

.ChartExternalTooltip[data-popper-placement^="top"] .ChartExternalTooltip-arrow {
    bottom: -4px;
}

.ChartExternalTooltip[data-popper-placement^="bottom"] .ChartExternalTooltip-arrow {
    top: -4px;
}

/* Colour the caret to match the warning banner it sits against. */
.ChartExternalTooltip[data-popper-placement^="top"]:has(.ChartTooltip-warning) .ChartExternalTooltip-arrow::before {
    background: var(--surface-danger);
}

.ChartTooltip-header {
    font-weight: var(--font-weight-semibold, 600);
}

.ChartTooltip-header:not(:last-child) {
    margin-bottom: var(--padding-xxs, 4px);
}

.ChartTooltip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ChartTooltip-row {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-xxs, 4px);
}

.ChartTooltip-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex: 0 0 auto;
    display: inline-block;
    margin-top: 2px;
}

.ChartTooltip-label {
    white-space: normal;
}

.ChartTooltip-value {
    white-space: nowrap;
}

.ChartTooltip-bodyText {
    margin-top: var(--padding-xxs, 2px);
    color: var(--text-white);
    white-space: normal;
}

/*
 * Deliberately more saturated than Bootstrap's default danger tone so the
 * warning sub-section reads as visually distinct.
 */
.ChartTooltip-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-xxs, 4px);
    margin: var(--padding-xs, 8px) calc(-1 * var(--padding-sm, 12px)) calc(-1 * var(--padding-xs, 8px));
    padding: var(--padding-xs, 8px) var(--padding-sm, 12px);
    background: var(--surface-danger);
    color: var(--text-white);
}

.ChartTooltip-warningIcon {
    color: var(--text-white);
    margin-top: 2px; /* no token this small; aligns icon with first line of text */
}

.ChartTooltip-warningText {
    font-weight: var(--font-weight-semibold, 600);
    white-space: normal;
}

/*
 * Bootstrap's native .tooltip-inner already supplies its own background,
 * padding, border-radius and arrow. When ChartTooltip markup is rendered
 * inside a Bootstrap tooltip (data-toggle="tooltip"), strip its own box so
 * only Bootstrap's single box is visible.
 */
.tooltip-inner .ChartTooltip {
    background: none;
    padding: 0;
    border-radius: 0;
    width: auto;
    max-width: none;
    text-align: left;
}

.tooltip:has(.ChartTooltip) .tooltip-inner {
    max-width: 280px;
    padding: var(--padding-xs, 8px) var(--padding-sm, 12px);
}

.tooltip-inner .ChartTooltip::after {
    content: none;
}

.tooltip-inner .ChartTooltip-warning {
    margin: var(--padding-xs, 8px) calc(-1 * var(--padding-sm, 12px)) calc(-1 * var(--padding-xs, 8px));
    border-radius: var(--border-radius-0, 0) var(--border-radius-0, 0) var(--border-radius-default, 4px) var(--border-radius-default, 4px);
}

.tooltip:has(.ChartTooltip) {
    /* Override Bootstrap's .tooltip.show { opacity: 0.9 } — designs are opaque. */
    opacity: 1;
}

/* Default caret matches the dark tooltip surface. */
.tooltip:has(.ChartTooltip) .arrow::before {
    border-top-color: var(--surface-inverse);
    border-bottom-color: var(--surface-inverse);
}

/* Colour the caret to match the warning banner it sits against. When
   Bootstrap flips placement, the caret moves to the top against the dark
   header, so the default above still applies. */
.bs-tooltip-top:has(.ChartTooltip-warning) .arrow::before,
.bs-tooltip-auto[x-placement^="top"]:has(.ChartTooltip-warning) .arrow::before {
    border-top-color: var(--surface-danger);
}