/* Plex.Web.Charts - chart design tokens and the enlarge window.
   Every chart reads these CSS variables (resolved in the browser by plexcharts.js), so an app only sets its own values:
   on :root (Sizing, follows its Light/Dark) or on its root element (PlexFlow, dark).
   Colours: --acc accent, --ok, --warn, --crit, --text, --mut (muted text), --bg
   Chart: --ch-head, --ch-power, --ch-eff (pump curve), --ch-ref, --ch-track, --ch-axis, --ch-grid, --ch-tip-bg, --ch-tip-border, --ch-legend, --ch-pointer
   Fonts: --font-sans, --font-mono (axis labels), --ch-fs (axis font size in px). Defaults below are the light theme. */
:root {
    --acc: #f5a300; --ok: #128012; --warn: #c98200; --crit: #c0392b; --text: #2f383b; --mut: #495457; --bg: #ffffff;
    --ch-ref: #5a6a73; --ch-head: #1a1aff; --ch-power: #e60000; --ch-eff: #128012; --ch-track: #eef1f2;
    --ch-axis: #7a8588; --ch-grid: #d5dadc; --ch-tip-bg: #ffffff; --ch-tip-border: #d5dadc; --ch-legend: #2f383b; --ch-pointer: #7a8588;
    --ch-fs: 12;
}
.echart-box { position: relative; }

/* enlarged chart window */
.pop-back { position: fixed; inset: 0; background: rgba(20, 28, 30, .55); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.pop { background: var(--bg); color: var(--text); border-radius: 8px; width: min(1300px, 96vw); max-height: 96vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--ch-grid); font-weight: 600; }
.pop-x { border: 1px solid var(--ch-grid); background: var(--bg); color: var(--text); border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.pop-x:hover { background: var(--ch-track); }
.pop-body { padding: 12px 16px 16px; overflow: auto; }
@media print { .pop-back { display: none !important; } }