/* Container for TradingView Lightweight Charts */
#live-chart {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    pointer-events: auto; /* Absolutely required for hover, pan & zoom! */
}

/* Risk/profit zones: translucent band over the chart between SL/TP and the
   entry farthest away from it (see tradeColors.js) */
.trade-zone {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.trade-zone-risk {
    background: rgba(244, 67, 54, 0.10);
}

.trade-zone-profit {
    background: rgba(76, 175, 80, 0.10);
}

/* Shown centered over the chart when the selected exchange has no chart
   data source connected yet (see chartDataSource.js) - deliberately faint,
   this isn't an error, just "nothing to show here yet". */
/* Auto mode on for the chart's contract (chart/tools/autoMode.js) - top
   center, clear of the chart controls on the left. */
.auto-mode-badge {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.25em 0.7em;
    border: 1px solid rgba(58, 160, 255, 0.6);
    border-radius: 999px;
    background: rgba(20, 24, 32, 0.85);
    color: #e6edf3;
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.auto-mode-badge[hidden] {
    display: none;
}

.chart-wip-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: clamp(20px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    text-align: center;
}

/* A browser feed's message in place of the chart (Tradovate without CME
   data - see chartDataSource.js's setChartNotice): readable, not faint. */
.chart-wip-label.chart-notice {
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 0 16px;
    line-height: 1.5;
}