/* Chart container fills viewport between header and footer using CSS variables */
#chart-container {
    position: relative;
    width: calc(100vw - var(--right-col-width));
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow: hidden;
    cursor: url('data:image/x-icon;base64,AAACAAEAICACABAAEAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAA//gAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////////////////////////////////j////4////+P////j////4////+P///gAD//4AA//+AAP///j////4////+P////j////4////+P/////////////////////////////////////////////////8='), auto;
}

#chart-container > div { position: relative; border-bottom: 1px solid var(--border-primary); min-height: 50px; width: 100%; box-sizing: border-box; }

.chart-legend { position: absolute; top: 3px; left: 4px; color: var(--text-chart); font-family: 'Bai Jamjuree', Sans-Serif; font-size: 12.5px; font-weight: 500; z-index: 10; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; }
.chart-legend:hover { border: 1px solid var(--border-primary); background: var(--bg-secondary); }

@media (min-width: 768px) { #chart-container > div { padding-right: 120px; } }
@media (max-width: 767px) { #chart-container > div { padding-right: 80px; } }