/*
 * Design tokens - matches the elysia-nextgen frontend's palette/type/radii.
 * Override any of these in the parent theme's own CSS (e.g. redeclare on
 * :root, body, or a more specific selector) to restyle the widget; the JS
 * also reads these at render time so the Chart.js canvas follows overrides.
 */
:root {
    --elysia-primary: #008b58;
    --elysia-secondary: #0ea5e9;
    --elysia-bg: #ffffff;
    --elysia-fg: #0a0a0a;
    --elysia-muted-bg: #f5f5f5;
    --elysia-muted-fg: #737373;
    --elysia-border: #e5e5e5;
    --elysia-error: #e7000b;
    --elysia-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --elysia-radius-card: 12px;
    --elysia-radius-control: 8px;
    --elysia-radius-group: 10px;
    --elysia-chart-height: 320px;
}

/* Chart.js's responsive mode sizes the canvas from its parent's box, so the
   container needs an explicit height and a positioning context - without
   this the canvas collapses to zero height and nothing renders. */
.elysia-history-chart {
    position: relative;
    height: var(--elysia-chart-height, 320px);
    max-width: 100%;
    font-family: var(--elysia-font-family, ui-sans-serif, system-ui, sans-serif);
}

.elysia-chart-canvas {
    width: 100%;
    height: 100%;
}

.elysia-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 36px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    padding: 3px;
    margin-bottom: 0.75rem;
    background: var(--elysia-muted-bg, #f5f5f5);
    border-radius: var(--elysia-radius-group, 10px);
}

.elysia-history-toggle-button {
    appearance: none;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--elysia-radius-control, 8px);
    color: var(--elysia-muted-fg, #737373);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.elysia-history-toggle-button:hover {
    color: var(--elysia-fg, #0a0a0a);
}

.elysia-history-toggle-button.is-active {
    background: var(--elysia-bg, #ffffff);
    color: var(--elysia-fg, #0a0a0a);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.elysia-today-co2,
.elysia-today-generation {
    color: var(--elysia-primary, #008b58);
}

.elysia-error {
    color: var(--elysia-error, #e7000b);
}