/*
 * Design tokens. Each defaults to a common block-theme preset color slug
 * (--wp--preset--color--*) so themes with a matching theme.json palette are
 * picked up automatically; themes without one (or without a matching slug)
 * fall through to the plain hardcoded default. 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 widgets regardless of what the theme provides;
 * the JS also reads these at render time so the Chart.js canvas follows
 * overrides.
 */
:root {
    --solshow-primary: var(--wp--preset--color--primary, goldenrod);
    --solshow-bg: var(--wp--preset--color--base, #ffffff);
    --solshow-fg: var(--wp--preset--color--main, #0a0a0a);
    --solshow-muted-bg: var(--wp--preset--color--tertiary, #f5f5f5);
    --solshow-muted-fg: var(--wp--preset--color--ti-fg, var(--wp--preset--color--secondary, #737373));
    --solshow-border: var(--wp--preset--color--border-light, #e5e5e5);
    --solshow-error: #e7000b;
    --solshow-chart-height: 320px;
}

@keyframes pulsing {
    0% {
        box-shadow: 0 0 0 0 rgba(218,165,32, 0.7);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(218,165,32, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(218,165,32, 0);
    }
  }


.pulsing-dot {
    animation: pulsing 2s infinite;
    border-radius: 50%;
    display: inline-block;
    color: #FBC846;
}

.fa-sun-o, .fa-moon-o{
    font-size: 1rem !important;
    font-weight: 800 !important;
}

a:has(.solshow-counter-value){
    font-size:1rem;
}

.solshow-today {
    color:goldenrod;
}

/* Live generating/consuming/exporting values - toggled between is-flowing
   (power currently moving) and is-idle by solshow.js on every poll. */
.solshow-generating,
.solshow-consuming,
.solshow-exporting {
    font-weight: 600;
}

.solshow-generating.is-flowing,
.solshow-consuming.is-flowing,
.solshow-exporting.is-flowing {
    color: var(--solshow-primary, goldenrod);
}

.solshow-generating.is-idle,
.solshow-consuming.is-idle,
.solshow-exporting.is-idle {
    color: var(--solshow-muted-fg, #737373);
}

/* Onsite usage/exporting icons, mirroring solshow-daynight's sun - hidden
   until that flow is actually moving, then shown and pulsing (is-flowing/
   is-idle toggled by solshow.js alongside the value itself). */
.solshow-consuming-icon,
.solshow-exporting-icon {
    display: inline-block;
    font-size: 1rem;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.solshow-consuming-icon.is-flowing,
.solshow-exporting-icon.is-flowing {
    opacity: 1;
    color: var(--solshow-primary, goldenrod);
    animation: pulsing 2s infinite;
    border-radius: 50%;
}

.solshow-consuming-icon.is-idle,
.solshow-exporting-icon.is-idle {
    opacity: 0;
}

.solshow-peak-power,
.solshow-total-generation {
    color: var(--solshow-primary, goldenrod);
    font-weight: 600;
}

/* Highlighted value styling, matching the live generating/consuming/exporting
   numbers in the Live Flow pattern (24px, bold, accent-coloured). Applied
   alongside a data class (e.g. class="solshow-value solshow-peak-power") by
   the stats and impact patterns - kept separate from the data classes
   themselves since some of those (solshow-counter-value) are also used
   unstyled in compact contexts like the solshow-counter header widget. */
.solshow-value {
    color: var(--solshow-primary, goldenrod);
    font-size: 24px;
    font-weight: 700;
}

/* 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. */
.solshow-history-chart {
    position: relative;
    height: var(--solshow-chart-height, 320px);
    max-width: 100%;
    font-family: var(--solshow-font-family, inherit);
}

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

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