/* ══════════════════════════════════════════════════════════════════════════ EVRA-S — GLOBAL CHART STYLE (hard rule) The single approved visual language for every trend, graph and chart in the platform, taken from the operator's reference dashboard. Nothing here is per-page: a chart that does not read like this is a defect. Read off the reference: · card body near-black, 1px hairline border, ~10px radius · a slightly lighter header strip carrying title + one-line subtitle · plot area sits on the card, crossed by a faint GRID in both axes (the "checked lines") — visible but well below the data · exactly two series colours: accent for the primary/positive measure, neutral grey for the secondary. No third hue, no gradients, no glow · flat fills, square bar ends, no drop shadows · legend above the plot: small dot + label, centred, muted · axis ticks and category labels small and grey; values tabular ═════════════════════════════════════════════════════════════════════════ */ :root{ /* Surfaces */ --chart-card: var(--evra-surface-1, #181818); /* superseded 2026-07-27: chart cards use the SAME locked card grey */ /* card body */ --chart-head: #17181A; /* header strip, one step lighter */ --chart-plot: #0E0F10; /* plot area, one step darker than the card */ --chart-border: #26282B; /* hairline */ /* chart_radius_token_v1 2026-09-03 - was a literal 10px. Both consumers of this variable are CARD surfaces (.chart-card, and .tg-card/.tg-kpi-card/.lcm-panel/.avm-widget), and this stylesheet loads AFTER evra-vuexy-theme.css with !important at equal specificity - so it won the cascade and every one of those cards rendered 10px against the operator's locked 14px. Reading the token keeps the chart family on the lock and cannot drift from it again. */ --chart-radius: var(--evra-r-card, 14px); /* The grid — the "checked lines". Both axes, same weight, deliberately faint: it must locate a value without competing with the bar. */ --chart-grid: rgba(255,255,255,0.055); --chart-grid-strong: rgba(255,255,255,0.085); /* zero line / axis */ /* Series. TWO only. Series 1 is the accent (primary/positive measure), series 2 is neutral grey (secondary measure). A chart needing a third colour is a chart that should be two charts. */ --chart-s1: var(--evra-primary, #0C7447); --chart-s2: #8A8A8A; --chart-s2-dim: #6E6E6E; --chart-neg: #B4544F; /* only for genuinely negative values */ /* Type */ --chart-title: #EDEFEE; --chart-sub: #8A8C8B; --chart-axis: #8A8C8B; --chart-cat: #C4C6C5; } /* ── Card ──────────────────────────────────────────────────────────────── */ .chart-card{ background:var(--chart-card); border:1px solid var(--chart-border); border-radius:var(--chart-radius); overflow:hidden; display:flex; flex-direction:column; height:100%; /* rows of charts stay flush -- audit rule */ box-sizing:border-box; } .chart-card__head{ background:var(--chart-head); border-bottom:1px solid var(--chart-border); padding:12px 16px; } .chart-card__title{ color:var(--chart-title); font-size:13px; font-weight:600; letter-spacing:.01em; margin:0; } .chart-card__sub{ color:var(--chart-sub); font-size:11px; margin:3px 0 0; } .chart-card__body{ padding:14px 16px 12px; flex:1 1 auto; min-height:0; } /* ── Legend: small dot + label, centred above the plot ─────────────────── */ .chart-legend{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; font-size:11px; color:var(--chart-sub); } .chart-legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; } .chart-legend .s1{ background:var(--chart-s1); } .chart-legend .s2{ background:var(--chart-s2); } /* ── Plot area + the grid ──────────────────────────────────────────────── */ .chart-plot{ background:var(--chart-plot); border:1px solid var(--chart-border); border-radius:6px; position:relative; } /* Inline-SVG charts: grid lines drawn as . */ .chart-gridline{ stroke:var(--chart-grid); stroke-width:1; shape-rendering:crispEdges; } .chart-axisline{ stroke:var(--chart-grid-strong); stroke-width:1; shape-rendering:crispEdges; } /* Bars: flat, square, two colours only. */ .chart-bar-s1{ fill:var(--chart-s1); } .chart-bar-s2{ fill:var(--chart-s2); } .chart-bar-neg{ fill:var(--chart-neg); } /* Lines: thin, flat, no area gradient. */ .chart-line-s1{ fill:none; stroke:var(--chart-s1); stroke-width:1.75; } .chart-line-s2{ fill:none; stroke:var(--chart-s2); stroke-width:1.75; } /* Axis + category text */ .chart-axis-lbl, .chart-tick{ fill:var(--chart-axis); font-size:10.5px; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .chart-cat-lbl{ fill:var(--chart-cat); font-size:11px; } /* Donut: thick flat ring, neutral unless a segment is the primary measure. */ .chart-donut-track{ fill:none; stroke:var(--chart-s2); } .chart-donut-s1{ fill:none; stroke:var(--chart-s1); } /* ── Retrofit: existing charts adopt the language without being rebuilt ── These pages draw their own inline SVG with page-local classes. Mapping them here means every existing chart follows the rule immediately, rather than waiting for each one to be rewritten. */ .tg-chart, .lcm-chart, .avm-chart-plot, #tg-dist-chart, #tg-dials-chart{ background:var(--chart-plot); border:1px solid var(--chart-border); border-radius:6px; } .tg-card, .tg-kpi-card, .lcm-panel, .avm-widget{ background:var(--chart-card) !important; border:1px solid var(--chart-border) !important; border-radius:var(--chart-radius) !important; } .tg-card-hdr, .lcm-hdr{ background:var(--chart-head); border-bottom:1px solid var(--chart-border); } /* No gradients or glows anywhere in a chart -- the reference is entirely flat. */ .chart-card [fill^="url("], .tg-card [fill^="url("], .lcm-panel [fill^="url("]{ fill:var(--chart-s1) !important; } /* ══════════════════════════════════════════════════════════════════════════ KPI TREND CARD — HARD-LOCKED PLATFORM STYLE (operator 2026-07-28) Source of truth: the agent Analytics KPI cards (.kpi-hero2, page-10). EVERY trend graph / KPI-with-sparkline on EVERY page uses THIS card: dark card, colored dot + mono uppercase label, LIVE badge, big mono number, area sparkline with soft gradient fill + dashed reference lines. Per-metric hue ramp (LOCKED, in order of use): 1 emerald var(--evra-primary) 4 purple rgb(200,132,255) 2 orange rgb(255,165,64) 5 gold rgb(255,209,102) 3 blue rgb(64,180,255) This SUPERSEDES the earlier two-colour series rule FOR TREND/KPI CARDS. Comparative bar/donut charts keep the accent+grey rule. ════════════════════════════════════════════════════════════════════════ */ .evra-kpi-trend{background:var(--evra-surface-1,#181818);border:1px solid var(--evra-border-hair,rgba(255,255,255,0.07));border-radius:8px;padding:14px 14px 10px;display:flex;flex-direction:column;gap:3px;min-height:220px;overflow:hidden;} .evra-kpi-trend .ekt-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;} .evra-kpi-trend .ekt-lbl{display:flex;align-items:center;gap:6px;font-family:var(--font-mono,'Geist Mono',monospace);font-size:10px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#fff;} .evra-kpi-trend .ekt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;} .evra-kpi-trend .ekt-badge{font-family:var(--font-mono,'Geist Mono',monospace);font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.30);} .evra-kpi-trend .ekt-badge.is-live{color:var(--evra-primary);} .evra-kpi-trend .ekt-num{font-size:46px;font-weight:700;color:#fff;letter-spacing:-0.03em;line-height:1.05;font-family:var(--font-mono,'Geist Mono',monospace);font-variant-numeric:tabular-nums;} .evra-kpi-trend .ekt-unit{font-size:20px;font-weight:400;color:rgba(255,255,255,0.50);margin-left:1px;} .evra-kpi-trend .ekt-spark{display:block;height:130px;width:100%;margin-top:8px;}