/* ============================================================
Dash Slider & RangeSlider — All Tooltip Styles
Covers: Sentiment, Quarters, Earnings, Date Range sliders
============================================================ */

/* ── Tooltip wrapper ──────────────────────────────────────── */
.dash-slider-tooltip,
.rc-slider-tooltip,
.rc-slider-tooltip-inner {
background-color: #1A2744 !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 4px !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
padding: 4px 10px !important;
white-space: nowrap !important;
z-index: 9999 !important;
}

/* ── Inner text — new Dash tooltip structure ──────────────── */
.dash-slider-tooltip > div {
color: #ffffff !important;
font-size: 10px !important;
font-weight: 200 !important;
background-color: transparent !important;
padding: 0 !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}

/* ── Inner text — old rc-slider tooltip structure ─────────── */
.rc-slider-tooltip-inner {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}

/* ── Tooltip arrows — match background color ──────────────── */
.rc-slider-tooltip-placement-bottom .rc-slider-tooltip-arrow {
border-bottom-color: #1A2744 !important;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
border-top-color: #1A2744 !important;
}
.dash-slider-tooltip-placement-bottom .rc-slider-tooltip-arrow {
border-bottom-color: #1A2744 !important;
}
.dash-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
border-top-color: #1A2744 !important;
}

/* ============================================================
Info icon tooltip for parameter labels
============================================================ */

.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.35);
color: #ffffff;
font-size: 10px;
font-weight: 700;
cursor: default;
position: relative;
line-height: 1;
opacity: 0.85;
}

.info-icon:hover {
opacity: 1;
}

/* Tooltip bubble */
.info-icon::after {
content: attr(data-tooltip);
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
background-color: #1A2744;
color: #ffffff;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
white-space: normal;
width: 220px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 9999;
pointer-events: none;
}

/* Show tooltip on hover */
.info-icon:hover::after {
visibility: visible;
opacity: 1;
}

/* ============================================================
Badge tooltip wrapper
============================================================ */

.badge-wrap {
position: relative;
display: inline-block;
}

.badge-wrap::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
background-color: #1A2744;
color: #ffffff;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
white-space: normal;
width: 200px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 9999;
pointer-events: none;
}

.badge-wrap:hover::after {
visibility: visible;
opacity: 1;
}

/* ============================================================
Has-tooltip — custom tooltip for plain Div elements
e.g. Target Sales Price large number label
============================================================ */

.has-tooltip {
position: relative;
}

.has-tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
background-color: #1A2744;
color: #ffffff;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
white-space: normal;
width: 240px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 9999;
pointer-events: none;
}

.has-tooltip:hover::after {
visibility: visible;
opacity: 1;
}