/**
 * MX Stock Chart styles — v3.0
 * Pulls all colors from --mx-* design tokens so it stays in sync with the template.
 * Falls back to sane defaults if the tokens aren't loaded.
 */

.mx-chart-container {
    position: relative;
    background: transparent;
}

/* ============ Range switcher ============
   Sits top-right of the chart, doesn't overlap price data.
   Matches the .mxx-section-tag pill style used elsewhere on the page. */
.mx-range-switcher {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--mx-surface-2, #f8fafc);
    border: 1px solid var(--mx-line, #e5e7eb);
    border-radius: 8px;
}

.mx-range-switcher button {
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--mx-ink-3, #5a6470);
    cursor: pointer;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .02em;
    line-height: 1;
    font-family: inherit;
    transition: background-color .15s ease, color .15s ease;
}

.mx-range-switcher button:hover {
    background: var(--mx-surface, #ffffff);
    color: var(--mx-ink, #0a0e0c);
}

.mx-range-switcher button.active {
    background: var(--mx-orange-wash, #fffbeb);
    color: var(--mx-orange-deep, #d97706);
    box-shadow: inset 0 0 0 1px var(--mx-orange-soft, #fef3c7);
}

/* ============ Status overlay ============ */
.mx-chart-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    z-index: 5;
    pointer-events: none;
    background: var(--mx-surface, #ffffff);
    border: 1px solid var(--mx-line, #e5e7eb);
    color: var(--mx-ink-3, #5a6470);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mx-chart-status--error {
    background: var(--mx-down-soft, #fef2f2);
    color: var(--mx-down, #b91c1c);
    border-color: var(--mx-down-border, #fecaca);
}

/* ============ Tooltip ============ */
.mx-chart-tooltip {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    background: var(--mx-surface, #ffffff);
    border: 1px solid var(--mx-line, #e5e7eb);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(10, 14, 12, 0.08);
    min-width: 90px;
    font-variant-numeric: tabular-nums;
}

.mx-chart-tooltip .mx-tt-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--mx-ink, #0a0e0c);
    letter-spacing: -.01em;
}

.mx-chart-tooltip .mx-tt-date {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mx-mute, #8a929c);
}

/* Hide the Lightweight Charts attribution if it appears */
.mx-chart-target a[href*="tradingview"] {
    display: none !important;
}