﻿/* Market Overview page */
.market-page {
    max-width: 100%;
}

.market-head {
    margin-bottom: 16px;
}

    .market-head h1 {
        font-size: 24px;
        font-weight: 800;
        color: var(--text);
        margin: 0 0 6px;
    }

.market-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

#showsectors, #showrussell {
    margin-top: 24px;
}

/* Earnings-by-sector bar chart */
.mkt-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 8px 0 12px;
}

#showsectors svg {
    width: 100%;
    display: block;
}

.mkt-empty {
    color: var(--text-muted);
    padding: 16px;
    text-align: center;
}

/* sectors header + toolbar */
.mkt-sectors-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 8px;
}

    .mkt-sectors-head .mkt-section-title {
        margin: 0;
    }

.mkt-sectors-tools {
    display: flex;
    gap: 6px;
}

/* confirmed-dates disclaimer */
.mkt-disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 8px 0 4px;
}

/* clickable bar segments */
.mkt-seg-link {
    cursor: pointer;
}

    .mkt-seg-link rect {
        transition: opacity 120ms ease;
    }

    .mkt-seg-link:hover rect {
        opacity: 0.82;
    }

/* total-above-bar label: dark text in light mode, light text in dark mode */
.mkt-bar-total {
    fill: #1a1a1a;
}

[data-theme="dark"] .mkt-bar-total {
    fill: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mkt-bar-total {
        fill: #f0f0f0;
    }
}

/* near-black (light) / near-white (dark) line token for Top-down, A/D, VWAP */
:root {
    --mkt-line: #050505;
}

[data-theme="dark"] {
    --mkt-line: #f7f7f7;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mkt-line: #f7f7f7;
    }
}

/* S&P 500 SPDR (SPY) label at the top-right of the chart */
.ew-chart-wrap {
    position: relative;
}

.mkt-chart-name {
    position: absolute;
    top: 8px;
    right: 64px; /* clear of the price axis */
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: color-mix(in srgb, var(--chart-bg) 78%, transparent);
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 3;
}
