/* ══════════════════════════════════════════════════════════════════════════ 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, #232323); /* 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: 10px; /* 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, #2E9E6A); --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:16px; 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,#202020);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;}