/* chart-engine.css — styles for the fullscreen chart-expand overlay.
   Extracted alongside chart-engine.js so the chart module owns its own
   presentation, not just its logic. Everything else the chart renders
   (the inline SVG, controls, condition-builder panel) is styled via CSS
   variables already defined in index.html's :root, so no additional rules
   are needed here. */

/* Chart expand/zoom overlay — same visual language as .course-overlay above
   (dimmed backdrop, blurred, centered panel) so this new capability looks
   like it belongs, without touching any existing chart CSS. The chart SVG
   itself is untouched (same viewBox, same colors, same layout) — it's
   simply rendered at a much larger physical size here, which is what lets
   fine detail actually resolve instead of being anti-aliased away at the
   small inline size. */
.chart-expand-overlay{ position:fixed; inset:0; background:rgba(5,8,14,.72); backdrop-filter:blur(6px); z-index:900; display:none; align-items:center; justify-content:center; padding:24px; }
.chart-expand-overlay.open{ display:flex; }
@media(max-width:600px){ .chart-expand-overlay{ padding:10px; } }
.chart-expand-modal{ width:100%; max-width:1400px; max-height:92vh; background:var(--panel); border:1px solid var(--border-soft); border-radius:16px; box-shadow:0 40px 120px -30px rgba(0,0,0,.6); padding:20px; overflow:auto; }
.chart-expand-modal svg{ width:100%; height:auto; display:block; }
.chart-expand-close{ position:sticky; top:0; float:right; margin:-4px -4px 8px 8px; }

/* Left-hand drawing-tool rail (see leftToolbarHtml in chart-engine.js) —
   TradingView's own layout: tools run down the left edge of the chart,
   not across the top. Sits in normal HTML flow beside the chart's SVG,
   entirely outside the SVG's own coordinate system, so it can't interfere
   with zoom/pan/crosshair math. */
.chart-left-toolbar{ display:flex; flex-direction:column; gap:2px; padding:4px; background:var(--surface-sunken); border:1px solid var(--border-soft); border-radius:8px; flex:0 0 auto; }
.chart-tool-btn{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:6px; color:var(--text-dim); font-size:14px; cursor:pointer; transition:background .12s, color .12s; }
.chart-tool-btn:hover:not(:disabled){ background:var(--panel); color:var(--text); }
.chart-tool-btn.active{ background:var(--blue); color:#fff; }
.chart-tool-btn:disabled{ color:var(--text-faint); opacity:.4; cursor:not-allowed; }
.chart-tool-sep{ height:1px; background:var(--border-soft); margin:4px 2px; }
@media(max-width:700px){ .chart-left-toolbar{ flex-direction:row; flex-wrap:wrap; } }

/* Wraps [left toolbar, chart SVG] side by side (see chart-engine.js's
   chartControlsHtml/renderChart, where this class replaces what used to
   be an inline style). On a narrow screen this is the other half of the
   small-device fix, alongside getResponsiveChartWidth in chart-engine.js:
   below 700px the toolbar switches to a row above the chart instead of
   squeezed beside it — giving the SVG the full container width to work
   with, which is what getResponsiveChartWidth's viewBox sizing actually
   needs to produce legible text. Fixing the SVG's own scaling without
   also giving it the full width back here would still leave less room
   than intended on a phone. */
.chart-body-row{ display:flex; gap:8px; align-items:flex-start; }
@media(max-width:700px){ .chart-body-row{ flex-direction:column; } }