/* =========================================================
   THEME
========================================================= */

:root {
    --ink: #17231f;
    --muted: #718078;
    --line: #e5ebe7;
    --paper: #ffffff;
    --wash: #f4f7f5;
    --green: #1d6a4d;
    --green-dark: #173d31;
    --green-hover: #16563e;
    --lime: #b8d74b;
    --orange: #e68a33;
    --blue: #4d8ec2;
    --purple: #8573bc;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --shadow-soft:
        0 2px 8px rgba(23, 61, 49, 0.035),
        0 8px 24px rgba(23, 61, 49, 0.035);

    --shadow-hover:
        0 5px 14px rgba(23, 61, 49, 0.07),
        0 14px 32px rgba(23, 61, 49, 0.07);

    --transition:
        0.22s ease;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--wash);
    color: var(--ink);
    font: 14px 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(184, 215, 75, 0.85);
    outline-offset: 3px;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: fixed;
    z-index: 100;
    width: 252px;
    inset: 0 auto 0 0;
    padding: 29px 16px;

    background:
        linear-gradient(
            180deg,
            #173d31 0%,
            #15382e 100%
        );

    color: #edf5ef;
    display: flex;
    flex-direction: column;

    box-shadow:
        5px 0 24px rgba(20, 48, 38, 0.055);
}

.brand {
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: white;
    text-decoration: none;
    font: 700 17px 'Plus Jakarta Sans';

    transition:
        opacity var(--transition),
        transform var(--transition);
}

.brand:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.brand > span:last-child span {
    color: var(--lime);
}

.brand small {
    display: block;
    font-size: 7px;
    letter-spacing: 2.7px;
    margin-top: 1px;
}

.brand-mark {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 29px;
}

.brand-mark i {
    display: block;
    background: var(--lime);
    width: 6px;
    border-radius: 5px;

    transition:
        height var(--transition),
        background var(--transition);
}

.brand-mark i:nth-child(1) {
    height: 14px;
}

.brand-mark i:nth-child(2) {
    height: 22px;
}

.brand-mark i:nth-child(3) {
    height: 29px;
}

.brand:hover .brand-mark i {
    background: #c9e76a;
}

.brand:hover .brand-mark i:nth-child(1) {
    height: 18px;
}

.brand:hover .brand-mark i:nth-child(2) {
    height: 25px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    margin-top: 54px;
    display: grid;
    gap: 6px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    border: 0;
    background: transparent;
    color: #b7c8bf;

    border-radius: 10px;
    padding: 13px 14px;
    text-align: left;

    font: 500 14px 'DM Sans';
    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.nav-item span {
    font-size: 18px;
    width: 29px;
    flex: 0 0 29px;
    display: inline-block;
    vertical-align: -2px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
    transform: translateX(2px);
}

.nav-item:hover span {
    transform: scale(1.08);
}

.nav-item.active {
    background:
        linear-gradient(
            100deg,
            #285443,
            #315f4b
        );

    color: #ffffff;

    box-shadow:
        inset 3px 0 0 var(--lime),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-item.active span {
    color: var(--lime);
}

.nav-item.active:hover {
    background: #32624c;
}

.nav-item:active {
    transform: scale(0.99);
}


/* =========================================================
   SIDEBAR NOTE
========================================================= */

.sidebar-note {
    margin: auto 7px 20px;
    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.045);
    color: #dce8e0;
    font-size: 11px;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.sidebar-note:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(184, 215, 75, 0.16);
}

.sidebar-note small {
    display: block;
    color: #94afa2;
    margin: 6px 0 0 16px;
    line-height: 1.5;
}

.pulse {
    display: inline-block;
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--lime);
    margin-right: 8px;

    box-shadow:
        0 0 0 3px rgba(184, 215, 75, 0.1);

    animation: sidebar-pulse 2.4s ease-in-out infinite;
}

@keyframes sidebar-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(184, 215, 75, 0.1);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(184, 215, 75, 0.035);
    }
}


/* =========================================================
   USER CARD
========================================================= */

.user-card {
    border-top: 1px solid #315d4c;
    padding: 19px 8px 0;

    display: flex;
    align-items: center;
    gap: 9px;
}

.avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    background:
        linear-gradient(
            135deg,
            #c9e76a,
            #a8cc37
        );

    color: #224334;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 0 0 3px rgba(184, 215, 75, 0.09);
}

.user-info {
    min-width: 0;
    flex: 1;
}

.user-card strong,
.user-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card strong {
    font-size: 12px;
    font-weight: 700;
    color: #f3f7f4;
}

.user-card small {
    color: #99b0a4;
    font-size: 11px;
    margin-top: 3px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

main {
    margin-left: 252px;
    width: calc(100% - 252px);
    max-width: 1600px;
    min-width: 0;

    padding: 0 42px 48px;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--line);
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--green);
    font-weight: 800;
    margin: 0 0 5px;
}

.topbar h1 {
    font: 700 19px 'Plus Jakarta Sans';
    letter-spacing: -0.35px;
    margin: 0;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 19px;
    color: var(--muted);
    font-size: 12px;
}

.demo-badge {
    background: #e9f1d8;
    color: #537220;
    padding: 6px 10px;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.icon-button,
.menu-button {
    border: 0;
    background: transparent;
    font-size: 23px;
    position: relative;
    cursor: pointer;
    color: var(--ink);

    transition:
        color var(--transition),
        transform var(--transition);
}

.icon-button:hover,
.menu-button:hover {
    color: var(--green);
    transform: translateY(-1px);
}

.icon-button.has-notification b {
    position: absolute;

    background: var(--orange);
    width: 6px;
    height: 6px;

    border-radius: 50%;
    right: 1px;
    top: 3px;

    box-shadow:
        0 0 0 3px var(--wash);
}

.menu-button {
    display: none;
}


/* =========================================================
   PAGE CONTAINERS
========================================================= */

.page {
    display: none;
    padding-top: 30px;
}

.page.active {
    display: block !important;
}


/* =========================================================
   DASHBOARD INTRO
========================================================= */

.intro-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 18px;
}

.intro-row > div {
    min-width: 0;
}

.intro-row h2 {
    font: 700 24px 'Plus Jakarta Sans';
    letter-spacing: -0.6px;
    line-height: 1.3;
    margin: 0 0 7px;
}

.intro-row h2 span {
    font-size: 20px;
}

.intro-row p,
.panel-head p {
    color: var(--muted);
    margin: 0;
}

.intro-row p {
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    border-radius: 9px;
    padding: 12px 17px;

    font: 600 13px 'DM Sans';
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.primary-button {
    border: 1px solid var(--green);
    background: var(--green);
    color: #ffffff;

    box-shadow:
        0 3px 8px rgba(29, 106, 77, 0.12);
}

.primary-button:hover {
    background: var(--green-hover);
    border-color: var(--green-hover);

    box-shadow:
        0 6px 15px rgba(29, 106, 77, 0.18);

    transform: translateY(-2px);
}

.primary-button:active,
.outline-button:active {
    transform: translateY(0);
}

.primary-button span {
    font-size: 17px;
    margin-left: 8px;

    transition: transform var(--transition);
}

.primary-button:hover span {
    transform: translateX(3px);
}

.outline-button {
    background: #ffffff;
    border: 1px solid #c9d4cd;
    color: var(--green);
}

.outline-button:hover {
    background: #f0f7f2;
    border-color: var(--green);
    box-shadow: 0 4px 12px rgba(29, 106, 77, 0.07);
}


/* =========================================================
   RESPONSIVE INTRO AND TOP BAR
========================================================= */

@media (max-width: 900px) {

    main {
        padding-left: 24px;
        padding-right: 24px;
    }

}

@media (max-width: 700px) {

    .topbar {
        min-height: 78px;
        gap: 12px;
    }

    .topbar h1 {
        font-size: 17px;
    }

    .top-actions {
        gap: 10px;
    }

    .intro-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .intro-row h2 {
        font-size: 20px;
    }

    .intro-row .primary-button {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* =================================================
   PREMIUM DASHBOARD KPI CARDS — TRANSPARENT
================================================= */

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    min-width: 0;
}

.kpi-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;

    padding: 20px;

    /* Transparent: preserve the existing page background */
    background: transparent;

    border: 1px solid rgba(115, 137, 124, 0.28);
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Subtle energy accent */

.kpi-card::after {
    content: "";
    position: absolute;
    z-index: -1;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--lime)
    );

    opacity: 0;

    transition: opacity 0.25s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);

    border-color: rgba(29, 106, 77, 0.55);

    box-shadow: 0 8px 24px rgba(23, 61, 49, 0.08);
}

.kpi-card:hover::after {
    opacity: 1;
}


/* KPI icon */

.kpi-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border-radius: 10px;

    display: grid;
    place-items: center;

    font-size: 18px;

    margin-bottom: 16px;

    transition: transform 0.25s ease;
}

.kpi-card:hover .kpi-icon {
    transform: scale(1.06);
}


/* Icon colours */

.orange {
    background: #fff2e5;
    color: #d97824;
}

.green {
    background: #e5f2ea;
    color: #327b5d;
}

.blue {
    background: #e7f1fa;
    color: #528dc2;
}

.purple {
    background: #eeeafb;
    color: #7465aa;
}


/* KPI label */

.kpi-card p {
    margin: 0 0 7px;

    color: var(--muted, #718078);

    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: 0.2px;
}


/* KPI number */

.kpi-card h3 {
    margin: 0 0 8px;

    color: var(--ink, #17231f);

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(21px, 1.8vw, 25px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -1.1px;

    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}


/* Unit inside KPI */

.kpi-card h3 span {
    color: var(--muted, #718078);

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}


/* Supporting text */

.kpi-card small {
    display: block;

    color: var(--muted, #8a958f);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}


/* KPI trend */

.up {
    color: #31815c;
}

.kpi-card em {
    font-style: normal;
    color: var(--muted, #9aa59f);
    font-weight: 400;
}


/* =================================================
   DASHBOARD LAYOUT — EQUAL COLUMN STRETCH
================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 20px;
    align-items: stretch;
    min-width: 0;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dashboard-column > .panel {
    width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
}

/* .dashboard-grid.lower {
    margin-top: 18px;
    grid-template-columns: 1fr 1fr;
} */


/* =================================================
   DASHBOARD PANELS
================================================= */

.panel {
    box-sizing: border-box;
    min-width: 0;
    min-height: 150px;
    padding: 20px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.panel-head h3 {
    margin: 0 0 5px;

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;

    color: var(--ink, #17231f);
}

.panel-head p {
    margin: 0;

    color: var(--muted, #718078);
    font-size: 12px;
    line-height: 1.5;
}

.panel-head select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    border: 1px solid var(--line);
    background: transparent;
    border-radius: 8px;

    padding: 7px 10px;

    color: var(--ink, #56645d);
    font: 12px 'DM Sans', sans-serif;

    outline-offset: 2px;
}

.panel-head select:focus-visible {
    outline: 2px solid var(--green);
}


/* Panel action links */

.more,
.text-button {
    border: 0;
    background: transparent;

    color: var(--green);

    font: 600 12px 'DM Sans', sans-serif;

    cursor: pointer;
    text-decoration: none;

    transition: color 180ms ease;
}

.more:hover,
.text-button:hover {
    color: var(--green-hover, #15563d);
}

.more:focus-visible,
.text-button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 4px;
}


/* =================================================
   RESPONSIVE
================================================= */

@media (max-width: 1100px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-column {
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kpi-card {
        padding: 15px;
        border-radius: 12px;
    }

    .kpi-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-bottom: 12px;
        border-radius: 9px;
        font-size: 16px;
    }

    .kpi-card h3 {
        font-size: 21px;
        letter-spacing: -0.7px;
    }

    .kpi-card h3 span {
        font-size: 11px;
    }

    .kpi-card small {
        font-size: 10px;
    }

    .dashboard-grid {
        gap: 16px;
    }

    .dashboard-column {
        gap: 16px;
    }

    .panel {
        padding: 16px;
    }

    .panel-head {
        gap: 10px;
    }

    .panel-head h3 {
        font-size: 14px;
    }

    .panel-head p {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .kpi-card {
        padding: 16px;
    }
}


/* =================================================
   ACCESSIBILITY
================================================= */

@media (prefers-reduced-motion: reduce) {
    .kpi-card,
    .kpi-card::after,
    .kpi-icon,
    .more,
    .text-button {
        transition: none;
    }

    .kpi-card:hover {
        transform: none;
    }
}

/* =========================================================
   PREMIUM ENERGY CHART — TRANSPARENT
========================================================= */

.line-chart {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 285px;
    min-width: 0;

    margin-top: 20px;
    padding-left: 48px;
    padding-right: 8px;

    box-sizing: border-box;
    background: transparent;
}

.chart-panel {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
    min-width: 0;

    background: transparent;
}

.chart-panel .line-chart {
    flex: 1 1 auto;
    min-height: 0;
}

.chart-panel .line-chart svg {
    flex: 1 1 auto;
    height: auto;
    min-height: 210px;
}


/* =========================================================
   SVG
========================================================= */

.line-chart svg {
    display: block;

    width: 100%;
    height: 210px;
    min-width: 0;

    overflow: visible;
    background: transparent;
}


/* =========================================================
   GRIDLINES
========================================================= */

.gridlines {
    fill: none;
    stroke: rgba(115, 137, 124, 0.18);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;
    pointer-events: none;
}


/* =========================================================
   AREA FILLS
========================================================= */

.chart-area {
    stroke: none;
    pointer-events: none;
}

.solar-area {
    fill: url(#solar-area-gradient);
}

.consumption-area {
    fill: url(#consumption-area-gradient);
}


/* =========================================================
   MAIN LINES
========================================================= */

.chart-line {
    fill: none;

    stroke-width: 2.6;
    stroke-linejoin: round;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.solar-line {
    stroke: var(--orange);
}

.consumption-line {
    stroke: var(--purple);
}


/* =========================================================
   DATA POINTS
========================================================= */

.chart-point {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.solar-point {
    fill: var(--paper, transparent);
    stroke: var(--orange);
}

.consumption-point {
    fill: var(--paper, transparent);
    stroke: var(--purple);
}


/* =========================================================
   HOVER POINTS
========================================================= */

.chart-hover-point {
    stroke: var(--paper, #ffffff);
    stroke-width: 2.5;

    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.solar-hover-point {
    fill: var(--orange);
}

.consumption-hover-point {
    fill: var(--purple);
}


/* =========================================================
   HOVER AREA
========================================================= */

.chart-hover-area {
    fill: transparent;
    cursor: crosshair;
    pointer-events: all;
}


/* =========================================================
   HOVER GUIDE
========================================================= */

.chart-hover-line {
    stroke: #9aa9a1;
    stroke-width: 1;
    stroke-dasharray: 4 4;

    opacity: 0.75;

    vector-effect: non-scaling-stroke;
    pointer-events: none;
}


/* =========================================================
   Y AXIS
========================================================= */

.chart-y {
    position: absolute;

    left: 0;
    top: 0;

    width: 43px;
    height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding-right: 7px;
    box-sizing: border-box;

    color: var(--muted, #718078);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    text-align: right;

    pointer-events: none;
}

.chart-y span {
    line-height: 1;
    white-space: nowrap;
}


/* =========================================================
   X AXIS
========================================================= */

.chart-x {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 25px;
    flex: 0 0 25px;

    padding: 3px 2px 0;
    box-sizing: border-box;

    color: var(--muted, #718078);
    font-size: 10px;
    font-weight: 500;
}

.chart-x span {
    line-height: 1;
    white-space: nowrap;
}


/* =========================================================
   LEGEND
========================================================= */

.chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 10px;

    color: var(--muted, #59655f);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.chart-legend i {
    display: inline-block;

    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
}

.legend-solar {
    background: var(--orange);
}

.legend-consumption {
    background: var(--purple);
}


/* =========================================================
   TOOLTIP
========================================================= */

.chart-tooltip,
.energy-chart-tooltip {
    position: absolute;

    display: none;

    min-width: 205px;
    max-width: min(260px, calc(100% - 12px));

    padding: 12px 14px;
    box-sizing: border-box;

    background: #173d31;
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    font-size: 11px;
    line-height: 1.5;

    pointer-events: none;
    z-index: 100;

    box-shadow: 0 10px 26px rgba(23, 61, 49, 0.18);

    overflow-wrap: anywhere;
}


/* =========================================================
   TOOLTIP TITLE
========================================================= */

.chart-tooltip-title {
    margin-bottom: 9px;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}


/* =========================================================
   TOOLTIP ROW
========================================================= */

.chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    min-height: 22px;
}

.chart-tooltip-row + .chart-tooltip-row {
    margin-top: 3px;
}

.chart-tooltip-row span {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #d5e4dc;
}

.chart-tooltip-row strong {
    flex: 0 0 auto;

    margin: 0;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   TOOLTIP DOTS
========================================================= */

.tooltip-dot {
    display: inline-block;

    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;
}

.solar-dot {
    background: var(--orange);
}

.consumption-dot {
    background: var(--purple);
}


/* =========================================================
   LEGACY HOVER TARGET
========================================================= */

.chart-hover-target {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;

    cursor: crosshair;
    pointer-events: all;
}


/* =========================================================
   RESPONSIVE — TABLETS
========================================================= */

@media (max-width: 700px) {
    .line-chart {
        padding-left: 42px;
        padding-right: 4px;
    }

    .chart-y {
        width: 38px;
        padding-right: 6px;
        font-size: 9px;
    }

    .chart-x {
        font-size: 9px;
    }

    .chart-legend {
        gap: 14px;
    }

    .chart-tooltip,
    .energy-chart-tooltip {
        min-width: 185px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 500px) {
    .line-chart {
        height: 260px;
        padding-left: 34px;
        padding-right: 4px;

        overflow: hidden;
    }

    .line-chart svg {
        width: 100%;
        height: 190px;
        min-width: 0;
    }

    .chart-y {
        width: 30px;
        height: 190px;

        padding-right: 5px;

        font-size: 8px;
    }

    .chart-x {
        height: 23px;
        flex-basis: 23px;

        font-size: 8px;
    }

    .chart-legend {
        gap: 10px;
        margin-top: 8px;

        font-size: 10px;
    }

    .chart-tooltip,
    .energy-chart-tooltip {
        min-width: 165px;
        padding: 9px 10px;

        font-size: 10px;
    }

    .chart-tooltip-title {
        font-size: 11px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .chart-line,
    .chart-point,
    .chart-hover-point {
        transition: none;
    }
}

/* =========================================================
   FORCE ENERGY CHART BACKGROUND TRANSPARENT
========================================================= */

.chart-panel,
.chart-panel .line-chart,
.chart-panel .line-chart svg,
.line-chart,
.line-chart svg {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove any background applied to the chart's SVG elements */
.line-chart svg g,
.line-chart svg rect {
    background: transparent !important;
}

/* Keep the chart panel transparent without changing its layout */
.chart-panel {
    background-color: transparent !important;
}

/* Make data points transparent inside the chart */
.solar-point,
.consumption-point {
    fill: transparent !important;
    background: transparent !important;
}
/* =========================================================
   DONUT
   ========================================================= */

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 27px;
}

.donut {
    height: 144px;
    width: 144px;
    border-radius: 50%;
    background: conic-gradient(
        var(--orange) 0 35.7%,
        var(--blue) 35.7% 57.1%,
        var(--purple) 57.1% 71.4%,
        var(--lime) 71.4% 89.3%,
        #78b49d 89.3%
    );
    position: relative;
}

.donut:after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
    inset: 19px;
}

.donut div {
    z-index: 1;
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.donut strong {
    font: 700 26px 'Plus Jakarta Sans';
}

.donut small {
    font-size: 10px;
    color: var(--muted);
}

.legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.legend li {
    font-size: 11px;
    margin: 10px 0;
    color: #57645d;
}

.legend b {
    float: right;
    color: #26342d;
}

.dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
}

.solar {
    background: var(--orange);
}

.battery {
    background: var(--blue);
}

.micro {
    background: var(--purple);
}

.carport {
    background: var(--lime);
}

.consult {
    background: #78b49d;
}


/* =========================================================
   ENERGY OPERATIONS / PREMIUM CONTROL CENTRE
========================================================= */

.energy-operations-panel {
    min-height: 440px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.energy-operations-head {
    align-items: center;
    gap: 16px;
}

.operations-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(29, 106, 77, 0.16);
    border-radius: 999px;
    background: rgba(29, 106, 77, 0.055);
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease;
}

.operations-status:hover {
    background: rgba(29, 106, 77, 0.10);
    border-color: rgba(29, 106, 77, 0.28);
}

.operations-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #39996c;
    box-shadow: 0 0 0 3px rgba(57, 153, 108, 0.12);
    animation: operations-pulse 2.4s ease-in-out infinite;
}

@keyframes operations-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(57, 153, 108, 0.10); }
    50% { box-shadow: 0 0 0 5px rgba(57, 153, 108, 0.035); }
}

/* ---------------------------------------------------------
   MAIN CONTENT
--------------------------------------------------------- */

.energy-operations-content {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.6fr);
    gap: 16px;
    padding: 18px 20px 16px;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

/* ---------------------------------------------------------
   PORTFOLIO SUMMARY
--------------------------------------------------------- */

.operations-summary {
    min-width: 0;
    padding: 21px 20px;
    border: 1px solid rgba(29, 106, 77, 0.13);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(184, 215, 75, 0.13), transparent 48%),
        linear-gradient(145deg, rgba(29, 106, 77, 0.045), rgba(29, 106, 77, 0.015));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.operations-summary::after {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--green), var(--lime), transparent);
    opacity: 0.8;
}

.operations-summary:hover {
    border-color: rgba(29, 106, 77, 0.25);
    box-shadow: 0 8px 24px rgba(25, 58, 43, 0.055);
    transform: translateY(-2px);
}

.operations-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.operations-summary-main strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: clamp(38px, 3.2vw, 48px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
}

.operations-summary-main p {
    margin: 11px 0 0;
    max-width: 200px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   PORTFOLIO SIGNALS
--------------------------------------------------------- */

.operations-signals {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.operations-signal {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid rgba(115, 137, 124, 0.14);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.42);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.operations-signal:hover {
    transform: translateX(3px);
    border-color: rgba(29, 106, 77, 0.22);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 3px 10px rgba(25, 58, 43, 0.035);
}

.signal-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 180ms ease;
}

.operations-signal:hover .signal-icon {
    transform: scale(1.06);
}

.signal-icon.solar {
    background: rgba(230, 138, 51, 0.12);
    color: var(--orange);
}

.signal-icon.grid {
    background: rgba(133, 115, 188, 0.12);
    color: var(--purple);
}

.signal-icon.data {
    background: rgba(115, 137, 124, 0.12);
    color: var(--muted);
}

.operations-signal div {
    min-width: 0;
}

.operations-signal strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
}

.operations-signal small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   SELECTED SITE
--------------------------------------------------------- */

.operations-site {
    min-width: 0;
    padding: 21px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: transparent;
    transition: border-color 200ms ease;
}

.operations-site:hover {
    border-color: rgba(29, 106, 77, 0.23);
}

.operations-site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.operations-site-header h4 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.operations-site-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.operations-site-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
    transition: filter 180ms ease, transform 180ms ease;
}

.operations-site-status:hover {
    filter: saturate(1.12);
    transform: translateY(-1px);
}

.operations-site-status.healthy {
    background: rgba(29, 106, 77, 0.085);
    border-color: rgba(29, 106, 77, 0.13);
    color: var(--green);
}

.operations-site-status.warning {
    background: rgba(230, 138, 51, 0.10);
    border-color: rgba(230, 138, 51, 0.17);
    color: #a96015;
}

.operations-site-status.poor {
    background: rgba(185, 92, 92, 0.09);
    border-color: rgba(185, 92, 92, 0.16);
    color: #a44747;
}

.operations-site-status.no-data {
    background: rgba(115, 137, 124, 0.09);
    border-color: rgba(115, 137, 124, 0.15);
    color: var(--muted);
}

/* ---------------------------------------------------------
   PERFORMANCE METRICS
--------------------------------------------------------- */

.operations-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px;
    margin-top: 27px;
}

.operations-metric {
    min-width: 0;
    padding: 13px 14px 12px;
    border: 1px solid rgba(115, 137, 124, 0.15);
    border-radius: 12px;
    background: rgba(115, 137, 124, 0.025);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.operations-metric:hover {
    border-color: rgba(29, 106, 77, 0.22);
    background: rgba(29, 106, 77, 0.035);
    transform: translateY(-2px);
}

.operations-metric-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.operations-metric-top span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.operations-metric-top strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.operations-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(115, 137, 124, 0.13);
}

.operations-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 750ms cubic-bezier(.2, .7, .2, 1);
}

.solar-fill {
    background: linear-gradient(90deg, #d97928, #efa653);
}

.grid-fill {
    background: linear-gradient(90deg, #7662b3, #a99add);
}

.operations-metric small {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   ACTUAL ENERGY VALUES
--------------------------------------------------------- */

.operations-energy-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: transparent;
}

.operations-energy-item {
    min-width: 0;
    padding: 14px 12px;
    background: transparent;
    transition: background 180ms ease;
}

.operations-energy-item + .operations-energy-item {
    border-left: 1px solid var(--line);
}

.operations-energy-item:hover {
    background: rgba(29, 106, 77, 0.045);
}

.operations-energy-item span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.4;
}

.operations-energy-item strong {
    display: inline-block;
    color: var(--ink);
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 750;
    letter-spacing: -0.025em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.operations-energy-item small {
    margin-left: 3px;
    color: var(--muted);
    font-size: 9px;
}

/* ---------------------------------------------------------
   SITE SELECTOR
--------------------------------------------------------- */

.operations-site-selector {
    padding: 0 20px 19px;
}

.operations-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

#operations-site-position {
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.operations-site-list {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(115, 137, 124, 0.35) transparent;
    scroll-snap-type: x proximity;
}

.operations-site-list::-webkit-scrollbar {
    height: 5px;
}

.operations-site-list::-webkit-scrollbar-track {
    background: transparent;
}

.operations-site-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(115, 137, 124, 0.3);
}

.operations-site-item {
    flex: 0 0 190px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    scroll-snap-align: start;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.operations-site-item:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 106, 77, 0.35);
    background: rgba(29, 106, 77, 0.035);
}

.operations-site-item:focus-visible {
    outline: 3px solid rgba(29, 106, 77, 0.25);
    outline-offset: 2px;
}

.operations-site-item.active {
    border-color: rgba(29, 106, 77, 0.6);
    background: rgba(29, 106, 77, 0.06);
    box-shadow: inset 0 0 0 1px rgba(29, 106, 77, 0.07);
}

.operations-site-item-indicator {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39996c;
    box-shadow: 0 0 0 3px rgba(57, 153, 108, 0.10);
}

.operations-site-item.warning .operations-site-item-indicator {
    background: #d38a32;
    box-shadow: 0 0 0 3px rgba(211, 138, 50, 0.10);
}

.operations-site-item.poor .operations-site-item-indicator {
    background: #b95c5c;
    box-shadow: 0 0 0 3px rgba(185, 92, 92, 0.10);
}

.operations-site-item.no-data .operations-site-item-indicator {
    background: #9aa59f;
    box-shadow: 0 0 0 3px rgba(154, 165, 159, 0.10);
}

.operations-site-item-content {
    min-width: 0;
    flex: 1;
}

.operations-site-item-content strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-site-item-content small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.4;
}

.operations-site-item-arrow {
    color: #a1aaa5;
    font-size: 15px;
    transition: color 180ms ease, transform 180ms ease;
}

.operations-site-item.active .operations-site-item-arrow {
    color: var(--green);
    transform: translateX(3px);
}

.operations-empty {
    padding: 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1100px) {
    .energy-operations-content {
        grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
        gap: 14px;
        padding: 16px;
    }

    .operations-summary,
    .operations-site {
        padding: 18px;
    }

    .operations-metrics {
        gap: 16px;
    }

    .operations-energy-item {
        padding: 12px 9px;
    }
}

@media (max-width: 900px) {
    .energy-operations-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-summary {
        min-height: 190px;
    }

    .operations-summary-main p {
        max-width: 340px;
    }

    .operations-signals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .operations-signal {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .energy-operations-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .operations-signals {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 20px;
    }

    .operations-metric {
        padding: 12px;
    }

    .operations-metric-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .operations-energy-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-energy-item:nth-child(3) {
        border-left: 0;
    }

    .operations-energy-item:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }

    .operations-site-header {
        flex-direction: column;
        gap: 10px;
    }

    .operations-site-status {
        align-self: flex-start;
    }

    .operations-site-selector {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 450px) {
    .energy-operations-content {
        padding: 12px;
    }

    .operations-site {
        padding: 15px;
    }

    .operations-site-selector {
        padding: 0 12px 14px;
    }

    .operations-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-metric-top {
        flex-direction: row;
        align-items: baseline;
    }

    .operations-energy-item {
        padding: 12px 10px;
    }

    .operations-summary-main strong {
        font-size: 40px;
    }

    .operations-site-item {
        flex-basis: 175px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .operations-status-dot {
        animation: none;
    }

    .operations-summary,
    .operations-signal,
    .signal-icon,
    .operations-metric,
    .operations-progress-fill,
    .operations-energy-item,
    .operations-site-item,
    .operations-site-item-arrow,
    .operations-site-status {
        transition: none !important;
    }
}

/* =========================================================
   ENERGY OPERATIONS — TRANSPARENT BACKGROUNDS
========================================================= */

.energy-operations-panel,
.energy-operations-content,
.operations-summary,
.operations-site,
.operations-signal,
.operations-metric,
.operations-energy-row,
.operations-energy-item,
.operations-site-item {
    background: transparent !important;
    background-color: transparent !important;
}

/* Preserve the premium hover and active states */
.operations-signal:hover,
.operations-metric:hover,
.operations-energy-item:hover,
.operations-site-item:hover {
    background: rgba(29, 106, 77, 0.045) !important;
}

.operations-site-item.active {
    background: rgba(29, 106, 77, 0.06) !important;
}

@media (prefers-reduced-motion: reduce) {
    .operations-status-dot {
        animation: none;
    }
}

.activity-panel {
    overflow: hidden;
}

.activity-site-count {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--wash);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   SITE DATA PULSE GRID
   ========================================================= */

.activity-site-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}


/* =========================================================
   SITE CARD
   ========================================================= */

.activity-pulse-card {
    position: relative;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.activity-pulse-card:hover {
    transform: translateY(-2px);
    border-color: #d9e0dc;
    box-shadow: 0 8px 24px rgba(23, 35, 31, 0.06);
}


/* =========================================================
   STATUS
   ========================================================= */

.activity-pulse-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.activity-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(29, 106, 77, 0.08);
}

.activity-pulse-status {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================================================
   SITE NAME
   ========================================================= */

.activity-pulse-site {
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.activity-pulse-date {
    color: var(--muted);
    font-size: 12px;
}


/* =========================================================
   STATISTICS
   ========================================================= */

.activity-pulse-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.activity-pulse-stat {
    min-width: 0;
}

.activity-pulse-stat span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

.activity-pulse-stat strong {
    display: inline-block;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.activity-pulse-stat small {
    margin-left: 3px;
    color: var(--muted);
    font-size: 10px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.activity-empty {
    grid-column: 1 / -1;
    padding: 30px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--wash);
    text-align: center;
}

.activity-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .activity-site-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .activity-site-content {
        grid-template-columns: 1fr;
    }

    .activity-pulse-card {
        padding: 18px;
    }

}

/* =========================================================
   PROJECTS
   ========================================================= */

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 17px;
}

.search {
    height: 40px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    width: 340px;
    color: #758178;
}

.search input {
    border: 0;
    outline: 0;
    padding-left: 8px;
    width: 100%;
    font: 13px 'DM Sans';
}

.filter-bar select,
.filter-button {
    height: 40px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 0 12px;
    color: #536159;
    font: 12px 'DM Sans';
}

.filter-button {
    margin-left: auto;
}

.table-panel {
    overflow: hidden;
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

th {
    color: #86928b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 600;
    background: #fbfcfb;
    padding: 13px 17px;
    border-bottom: 1px solid var(--line);
}

td {
    padding: 15px 17px;
    border-bottom: 1px solid #eff1ef;
    color: #59655f;
    font-size: 12px;
}

tbody tr {
    cursor: pointer;
}

tbody tr:hover {
    background: #fafcf9;
}

td.project-name strong,
td.client-name strong {
    display: block;
    color: var(--ink);
    font-size: 12px;
}

.subtle {
    font-size: 10px;
    color: #8b9690;
    display: block;
    margin-top: 3px;
}

.service-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 5px;
    background: #f2f4f2;
    color: #57645d;
}

.status {
    font-size: 10px;
    font-weight: 600;
    border-radius: 12px;
    padding: 5px 8px;
}

.status.active {
    background: #e6f2e9;
    color: #367857;
}

.status.completed {
    background: #eef1ef;
    color: #637069;
}

.status.planning {
    background: #fff3e5;
    color: #b96b25;
}

.status.on-hold {
    background: #f6ebeb;
    color: #a85757;
}

/* Site Intelligence performance statuses */

.status.good {
    background: #e6f2e9;
    color: #367857;
}

.status.warning {
    background: #fff3e5;
    color: #b96b25;
}

.status.poor {
    background: #f6ebeb;
    color: #a85757;
}

.progress {
    height: 5px;
    width: 68px;
    background: #edf0ed;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.progress i {
    display: block;
    height: 100%;
    background: #66a780;
    border-radius: 5px;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 17px;
    color: #7f8b84;
    font-size: 11px;
}

.table-footer button {
    border: 0;
    background: transparent;
    padding: 4px 7px;
    color: #718078;
}

.table-footer .current {
    background: #e7f0e9;
    color: var(--green);
    border-radius: 4px;
}

/* =========================================================
   CLIENTS
   ========================================================= */

.client-summary {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 20px;
}

.client-summary div {
    padding: 17px 32px;
    flex: 1;
    border-right: 1px solid var(--line);
}

.client-summary div:last-child {
    border: 0;
}

.client-summary strong,
.client-summary span {
    display: block;
}

.client-summary strong {
    font: 700 22px 'Plus Jakarta Sans';
}

.client-summary span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.client-card {
    padding: 19px;
    cursor: pointer;
}

.client-card:hover {
    border-color: #b7d2c3;
    box-shadow: 0 6px 18px #dfe9e240;
}

.client-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.client-logo {
    height: 36px;
    width: 36px;
    background: #e5f0e9;
    border-radius: 9px;
    color: var(--green);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.client-head strong {
    display: block;
    font: 700 13px 'Plus Jakarta Sans';
}

.client-head small {
    color: var(--muted);
    font-size: 10px;
}

.client-numbers {
    display: flex;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    gap: 26px;
}

.client-numbers span,
.client-numbers strong {
    display: block;
}

.client-numbers span {
    color: var(--muted);
    font-size: 10px;
}

.client-numbers strong {
    font-size: 13px;
    margin-top: 3px;
}


/* =====================================================
   ANALYTICS HEADER — PREMIUM TRANSPARENT STYLE
====================================================== */

.analytics-drivers-panel {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    min-width: 0;
    background: transparent;
}

.analytics-drivers-panel .analytics-driver-grid {
    margin-top: 0;
}

.analytics-header {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin: 0 0 24px;
    padding: 18px 0 22px;

    background: transparent;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
}

.analytics-header-copy {
    min-width: 0;
}

.analytics-eyebrow {
    display: block;
    margin-bottom: 8px;

    color: var(--green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.analytics-header-copy h2 {
    margin: 0;

    color: var(--ink);
    font-size: clamp(22px, 2.2vw, 27px);
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -0.04em;
}

.analytics-header-copy p {
    max-width: 540px;
    margin: 8px 0 0;

    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.analytics-selection-label {
    display: inline-block;
    margin-left: 8px;

    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* =====================================================
   ANALYTICS CONTROLS
====================================================== */

.analytics-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;

    padding: 7px;

    border: 1px solid rgba(115, 137, 124, 0.25);
    border-radius: 13px;

    background: transparent;
    box-shadow: none;

    transition: border-color 180ms ease;
}

.analytics-controls:hover {
    border-color: rgba(29, 106, 77, 0.35);
}

.analytics-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.analytics-control label {
    padding-left: 3px;

    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.analytics-control select {
    min-width: 140px;
    max-width: 100%;
    height: 37px;
    padding: 0 30px 0 11px;

    border: 1px solid rgba(115, 137, 124, 0.18);
    border-radius: 9px;

    background: transparent;
    color: var(--ink);

    font-family: inherit;
    font-size: 11px;
    font-weight: 650;

    cursor: pointer;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.analytics-control select:hover {
    border-color: rgba(29, 106, 77, 0.35);
    background: rgba(29, 106, 77, 0.035);
}

.analytics-control select:focus-visible {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.10);
}

.analytics-control select option {
    background: var(--paper, #ffffff);
    color: var(--ink);
}

/* =====================================================
   RESET BUTTON
====================================================== */

.analytics-reset-button {
    height: 37px;
    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: transparent;
    color: var(--muted);

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.analytics-reset-button:hover {
    background: rgba(29, 106, 77, 0.065);
    border-color: rgba(29, 106, 77, 0.18);
    color: var(--green);
}

.analytics-reset-button:active {
    transform: translateY(1px);
}

.analytics-reset-button:focus-visible {
    outline: 3px solid rgba(29, 106, 77, 0.22);
    outline-offset: 2px;
}

/* =====================================================
   ANALYTICS KPI STRIP
====================================================== */

.analytics-driver-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin: 20px 0 30px;
    padding: 22px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    background: transparent;
}

.analytics-driver-card {
    position: relative;
    min-width: 0;

    padding: 5px 22px;

    background: transparent;
    border: 0;
    border-radius: 0;

    transition: transform 200ms ease;
}

.analytics-driver-card:first-child {
    padding-left: 4px;
}

.analytics-driver-card:last-child {
    padding-right: 4px;
}

/* =====================================================
   KPI SEPARATORS
====================================================== */

.analytics-driver-card + .analytics-driver-card {
    border-left: 1px solid var(--line);
}

/* =====================================================
   KPI LABEL AND ICON
====================================================== */

.analytics-driver-top {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
}

.analytics-driver-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(29, 106, 77, 0.12);
    border-radius: 10px;

    background: transparent;
    color: var(--green);

    font-size: 14px;
    line-height: 1;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}

.analytics-driver-top .analytics-driver-label {
    margin: 0;

    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.075em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =====================================================
   KPI VALUE
====================================================== */

.analytics-driver-card strong {
    display: block;
    margin-bottom: 8px;

    color: var(--ink);
    font-size: clamp(25px, 2.4vw, 33px);
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -0.05em;

    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;

    transition: color 180ms ease;
}

/* =====================================================
   KPI PERIOD
====================================================== */

.analytics-kpi-period {
    display: block;
    margin-bottom: 8px;

    color: var(--green);
    font-size: 9px;
    line-height: 1.45;
    font-weight: 700;
}

/* =====================================================
   KPI DESCRIPTION
====================================================== */

.analytics-driver-card small {
    display: block;
    max-width: 210px;

    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

/* =====================================================
   SUBTLE INTERACTION
====================================================== */

.analytics-driver-card:hover {
    transform: translateY(-2px);
}

.analytics-driver-card:hover .analytics-driver-icon {
    transform: scale(1.06);
    border-color: rgba(29, 106, 77, 0.30);
    background: rgba(29, 106, 77, 0.045);
}

.analytics-driver-card:hover strong {
    color: var(--green);
}

/* =====================================================
   RESPONSIVE — TABLET
====================================================== */

@media (max-width: 1100px) {
    .analytics-header {
        gap: 18px;
    }

    .analytics-driver-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 22px;
    }

    .analytics-driver-card {
        padding: 6px 20px;
    }

    .analytics-driver-card:first-child {
        padding-left: 4px;
    }

    .analytics-driver-card:nth-child(odd) {
        border-left: 0;
    }

    .analytics-driver-card:nth-child(even) {
        border-left: 1px solid var(--line);
    }

    .analytics-driver-card:nth-child(n+3) {
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }
}

/* =====================================================
   RESPONSIVE — MOBILE
====================================================== */

@media (max-width: 900px) {
    .analytics-header {
        position: relative;
        top: auto;

        align-items: stretch;
        flex-direction: column;
        gap: 16px;

        padding: 16px 0 20px;
    }

    .analytics-controls {
        width: 100%;
        box-sizing: border-box;
    }

    .analytics-control {
        flex: 1;
    }

    .analytics-control select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 550px) {
    .analytics-header {
        margin-bottom: 18px;
    }

    .analytics-header-copy h2 {
        font-size: 23px;
    }

    .analytics-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 8px;
    }

    .analytics-control select {
        font-size: 10px;
    }

    .analytics-reset-button {
        width: 100%;
        grid-column: 1 / -1;
    }

    .analytics-driver-grid {
        grid-template-columns: minmax(0, 1fr);
        margin: 16px 0 24px;
        padding: 8px 0;
        row-gap: 0;
    }

    .analytics-driver-card,
    .analytics-driver-card:first-child {
        padding: 16px 4px;
    }

    .analytics-driver-card + .analytics-driver-card,
    .analytics-driver-card:nth-child(even),
    .analytics-driver-card:nth-child(n+3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .analytics-driver-card strong {
        font-size: 29px;
    }

    .analytics-driver-card small {
        max-width: 100%;
    }
}

/* =====================================================
   ACCESSIBILITY
====================================================== */

@media (prefers-reduced-motion: reduce) {
    .analytics-driver-card,
    .analytics-driver-icon,
    .analytics-driver-card strong,
    .analytics-control select,
    .analytics-reset-button {
        transition: none !important;
    }
}

/* updated code till above line */


/* =====================================================
   ANALYTICS — SITE SOLAR COVERAGE
   PREMIUM TRANSPARENT STYLE
====================================================== */

.solar-coverage-intelligence {
    position: relative;
    min-width: 0;
    padding: 22px 22px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 200ms ease;
}

.solar-coverage-intelligence:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

.solar-coverage-intelligence *,
.solar-coverage-intelligence *::before,
.solar-coverage-intelligence *::after {
    box-sizing: border-box;
}

/* =====================================================
   HEADER
====================================================== */

.solar-coverage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line);
}

.solar-coverage-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.solar-coverage-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.solar-coverage-header p {
    max-width: 550px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

.solar-coverage-period-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(29, 106, 77, 0.20);
    border-radius: 999px;
    background: transparent;
    color: var(--green);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.025em;
    white-space: nowrap;
    transition: border-color 180ms ease, background 180ms ease;
}

.solar-coverage-period-badge:hover {
    border-color: rgba(29, 106, 77, 0.38);
    background: rgba(29, 106, 77, 0.045);
}

/* =====================================================
   SITE CARDS
====================================================== */

.solar-coverage-site-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.solar-coverage-site-card {
    position: relative;
    min-width: 0;
    padding: 19px 18px 17px;
    border: 1px solid rgba(115, 137, 124, 0.25);
    border-radius: 14px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}

.solar-coverage-site-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--green), var(--lime));
    opacity: 0.75;
    transition: opacity 220ms ease, left 220ms ease, right 220ms ease;
}

.solar-coverage-site-card:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 106, 77, 0.42);
    background: rgba(29, 106, 77, 0.025);
    box-shadow: 0 8px 22px rgba(23, 61, 49, 0.055);
}

.solar-coverage-site-card:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
}

.solar-coverage-site-card:focus-visible {
    outline: 3px solid rgba(29, 106, 77, 0.25);
    outline-offset: 3px;
}

.solar-coverage-site-card:active {
    transform: translateY(-1px);
}

/* =====================================================
   VIEW DETAILS
====================================================== */

.solar-coverage-site-card::after {
    content: "View details →";
    position: absolute;
    right: 16px;
    bottom: 11px;
    color: var(--green);
    font-size: 9px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.solar-coverage-site-card:hover::after,
.solar-coverage-site-card:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   SITE CARD HEADER
====================================================== */

.solar-coverage-site-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.solar-coverage-site-name {
    min-width: 0;
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.solar-coverage-site-period {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 9px;
}

/* =====================================================
   COVERAGE VALUE
====================================================== */

.solar-coverage-site-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 13px;
}

.solar-coverage-site-value strong {
    color: var(--ink);
    font-size: clamp(27px, 2.5vw, 32px);
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    transition: color 180ms ease;
}

.solar-coverage-site-card:hover .solar-coverage-site-value strong {
    color: var(--green);
}

.solar-coverage-site-value span {
    color: var(--muted);
    font-size: 10px;
}

/* =====================================================
   COVERAGE BAR
====================================================== */

.solar-coverage-site-bar {
    width: 100%;
    height: 6px;
    margin-top: 3px;
    border-radius: 999px;
    background: rgba(115, 137, 124, 0.16);
    overflow: hidden;
}

.solar-coverage-site-bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #5c9a79, var(--lime));
    transform-origin: left center;
    transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   SITE CARD FOOTER
====================================================== */

.solar-coverage-site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
    padding-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

/* =====================================================
   COVERAGE STATUS
====================================================== */

.solar-coverage-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.3;
    white-space: nowrap;
    transition: filter 180ms ease;
}

.solar-coverage-status:hover {
    filter: saturate(1.15);
}

.solar-coverage-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

.solar-coverage-site-card .solar-coverage-status.strong {
    color: var(--green) !important;
    background: rgba(29, 106, 77, 0.09) !important;
    border-color: rgba(29, 106, 77, 0.13);
}

.solar-coverage-site-card .solar-coverage-status.moderate {
    color: #a66a00 !important;
    background: rgba(230, 175, 54, 0.12) !important;
    border-color: rgba(166, 106, 0, 0.14);
}

.solar-coverage-site-card .solar-coverage-status.low {
    color: #b54747 !important;
    background: rgba(181, 71, 71, 0.09) !important;
    border-color: rgba(181, 71, 71, 0.14);
}

/* =====================================================
   NO SITE DATA
====================================================== */

.solar-coverage-empty {
    grid-column: 1 / -1;
    padding: 24px 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

/* =====================================================
   SELECTED SITE SUMMARY
====================================================== */

.solar-coverage-selected-summary {
    display: none;
    margin-bottom: 18px;
    padding: 19px 20px;
    border: 1px solid rgba(29, 106, 77, 0.22);
    border-radius: 14px;
    background: transparent;
    transition: border-color 200ms ease;
}

.solar-coverage-selected-summary.visible {
    display: block;
}

.solar-coverage-selected-summary:hover {
    border-color: rgba(29, 106, 77, 0.38);
}

.solar-coverage-selected-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.solar-coverage-selected-summary-name {
    min-width: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.solar-coverage-selected-summary-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.solar-coverage-selected-summary-value strong {
    color: var(--ink);
    font-size: 29px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.solar-coverage-selected-summary-value span {
    color: var(--muted);
    font-size: 10px;
}

.solar-coverage-selected-summary-status {
    flex-shrink: 0;
    padding: 6px 9px;
    border: 1px solid rgba(29, 106, 77, 0.13);
    border-radius: 999px;
    background: rgba(29, 106, 77, 0.07);
    color: var(--green);
    font-size: 9px;
    font-weight: 750;
}

/* =====================================================
   SELECTED SITE CHANGE
====================================================== */

.solar-coverage-site-change {
    margin-top: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.solar-coverage-site-change.positive {
    color: var(--green);
}

.solar-coverage-site-change.negative {
    color: #b54747;
}

.solar-coverage-site-change.neutral {
    color: var(--muted);
}

/* =====================================================
   TREND SECTION
====================================================== */

.solar-coverage-trend-section {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: transparent;
    transition: border-color 200ms ease;
}

.solar-coverage-trend-section:hover {
    border-color: rgba(29, 106, 77, 0.23);
}

.solar-coverage-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 6px;
}

.solar-coverage-trend-label {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.solar-coverage-trend-header strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.solar-coverage-trend-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 10px;
}

.solar-coverage-trend-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.solar-coverage-trend-stats strong {
    color: var(--green);
    font-size: 11px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* =====================================================
   CHART
====================================================== */

.solar-coverage-chart-wrap {
    width: 100%;
    min-width: 0;
    min-height: 360px;
    margin-top: 4px;
    background: transparent;
}

.solar-coverage-chart-wrap > div {
    width: 100%;
    min-width: 0;
    background: transparent;
}

/* =====================================================
   CHART FOOTER
====================================================== */

.solar-coverage-footer {
    margin-top: 3px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

/* =====================================================
   PORTFOLIO MODE
====================================================== */

.solar-coverage-intelligence.portfolio-mode .solar-coverage-summary {
    display: none;
}

/* =====================================================
   LEGACY COVERAGE LIST
====================================================== */

.analytics-coverage-list {
    padding: 8px 18px 20px;
    background: transparent;
}

.coverage-row {
    margin-bottom: 18px;
}

.coverage-row:last-child {
    margin-bottom: 0;
}

.coverage-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.coverage-info span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
}

.coverage-info strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.coverage-track {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(115, 137, 124, 0.15);
    overflow: hidden;
}

.coverage-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #5c9a79);
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   LEGACY ANALYTICS CHART
====================================================== */

.analytics-empty {
    padding: 12px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.analytics-chart-container {
    position: relative;
    min-width: 0;
    background: transparent;
}

.analytics-chart-note {
    margin-top: 8px;
    padding: 0 18px 14px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

/* =====================================================
   RESPONSIVE
====================================================== */

@media (max-width: 900px) {
    .solar-coverage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solar-coverage-header {
        gap: 16px;
    }

    .solar-coverage-site-cards {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .solar-coverage-site-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .solar-coverage-site-card {
        padding: 17px 14px;
    }

    .solar-coverage-site-value strong {
        font-size: 27px;
    }
}

@media (max-width: 600px) {
    .solar-coverage-intelligence {
        padding: 17px 15px 14px;
        border-radius: 14px;
    }

    .solar-coverage-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .solar-coverage-period-badge {
        align-self: flex-start;
    }

    .solar-coverage-trend-section {
        padding: 15px;
    }

    .solar-coverage-trend-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .solar-coverage-trend-stats {
        gap: 10px;
    }

    .solar-coverage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solar-coverage-metric strong {
        font-size: 19px;
    }

    .solar-coverage-chart-wrap {
        min-height: 320px;
    }

    .solar-coverage-selected-summary {
        padding: 16px;
    }
}

@media (max-width: 420px) {
    .solar-coverage-site-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .solar-coverage-site-card {
        padding: 18px 16px;
    }

    .solar-coverage-site-value strong {
        font-size: 29px;
    }

    .solar-coverage-selected-summary-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .solar-coverage-selected-summary-status {
        align-self: flex-start;
    }

    .solar-coverage-chart-wrap {
        min-height: 290px;
    }
}

/* =====================================================
   ACCESSIBILITY
====================================================== */

@media (prefers-reduced-motion: reduce) {
    .solar-coverage-site-card,
    .solar-coverage-site-card::before,
    .solar-coverage-site-card::after,
    .solar-coverage-site-value strong,
    .solar-coverage-site-bar-fill,
    .solar-coverage-status,
    .solar-coverage-selected-summary,
    .solar-coverage-trend-section,
    .coverage-fill {
        transition: none !important;
    }
}


/* =========================================================
   ANALYTICS — SOLAR SELF-CONSUMPTION
   ========================================================= */

/* INSIGHT VALUE */
.analytics-insight-value {
    padding: 28px 22px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    background: transparent;
    transition: border-color 0.2s ease;
}

.analytics-insight-value strong {
    font-size: clamp(30px, 2.5vw, 38px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1.2px;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.analytics-insight-value span {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

/* TWO-COLUMN ANALYTICS LAYOUT */
.analytics-chart-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    min-width: 0;
    background: transparent;
}

.analytics-chart-row > .panel {
    height: 580px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 16px;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.analytics-chart-row > .panel:hover {
    border-color: rgba(29, 106, 77, 0.24);
    box-shadow: 0 5px 18px rgba(23, 61, 49, 0.035);
}

/* SOLAR COVERAGE INTELLIGENCE */
.solar-coverage-intelligence {
    height: 100%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;

    /* Hide scrollbar until needed */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.solar-coverage-intelligence::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.solar-coverage-intelligence:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 106, 77, 0.3) transparent;
}

.solar-coverage-intelligence:hover::-webkit-scrollbar {
    width: 6px;
}

.solar-coverage-intelligence:hover::-webkit-scrollbar-track {
    background: transparent;
}

.solar-coverage-intelligence:hover::-webkit-scrollbar-thumb {
    background: rgba(29, 106, 77, 0.3);
    border-radius: 10px;
}

.solar-coverage-intelligence:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(29, 106, 77, 0.5);
}

/* SOLAR UTILISATION INTELLIGENCE */
.solar-utilisation-intelligence {
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: transparent;
}

/* KEEP NESTED CHART SURFACES TRANSPARENT */
.solar-coverage-intelligence .panel,
.solar-utilisation-intelligence .panel,
.solar-coverage-intelligence .analytics-chart-container,
.solar-utilisation-intelligence .analytics-chart-container {
    background: transparent;
    background-color: transparent;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 900px) {
    .analytics-chart-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .analytics-chart-row > .panel {
        height: 520px;
    }

    .analytics-insight-value {
        padding: 24px 20px;
    }
}

@media (max-width: 600px) {
    .analytics-chart-row {
        gap: 12px;
    }

    .analytics-chart-row > .panel {
        height: 460px;
        border-radius: 12px;
    }

    .analytics-insight-value {
        padding: 22px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .analytics-insight-value strong {
        font-size: 32px;
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .analytics-insight-value,
    .analytics-chart-row > .panel {
        transition: none;
    }
}


/* =========================================================
   ANALYTICS PAGE — SOLAR UTILISATION
   ========================================================= */

.solar-utilisation-intelligence {
    position: relative;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: transparent;
    background-color: transparent;
    overflow: hidden;
    transition: border-color 0.22s ease;
}

.solar-utilisation-intelligence:hover {
    border-color: rgba(29, 106, 77, 0.24);
}

/* =========================================================
   HEADER
   ========================================================= */

.solar-utilisation-header {
    margin-bottom: 22px;
}

.solar-utilisation-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--green);
}

.solar-utilisation-header h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.solar-utilisation-header p {
    max-width: 540px;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
}

/* =========================================================
   ENERGY FLOW AREA
   ========================================================= */

.solar-energy-flow {
    position: relative;
    padding: 10px 0 4px;
    background: transparent;
}

/* =========================================================
   SOLAR SOURCE
   ========================================================= */

.solar-energy-source {
    position: relative;
    z-index: 3;
    width: min(260px, 100%);
    margin: 0 auto;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 18px;

    border: 1px solid rgba(29, 106, 77, 0.22);
    border-radius: 14px;

    background: transparent;
    background-color: transparent;

    box-shadow: 0 4px 14px rgba(23, 61, 49, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.solar-energy-source:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 106, 77, 0.42);

    box-shadow:
        0 10px 24px rgba(23, 61, 49, 0.07),
        0 0 0 3px rgba(29, 106, 77, 0.035);
}

/* SOURCE ICON */

.solar-energy-source-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: transparent;
    box-shadow: 0 0 0 4px rgba(29, 106, 77, 0.045);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.solar-energy-source-icon img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.solar-energy-source:hover .solar-energy-source-icon {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(29, 106, 77, 0.075);
}

/* SOURCE TEXT */

.solar-energy-source-value {
    min-width: 0;
}

.solar-energy-source-value span {
    display: block;
    margin-bottom: 2px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--muted);
}

.solar-energy-source-value strong {
    display: block;

    font-size: 24px;
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;

    color: var(--ink);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.solar-energy-source:hover .solar-energy-source-value strong {
    color: var(--green);
    transform: translateX(2px);
}

.solar-energy-source-value small {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.4;
    color: var(--muted);
}

/* =========================================================
   CENTRAL ENERGY CONNECTOR
   ========================================================= */

.solar-energy-connector {
    position: relative;
    width: 100%;
    height: 52px;

    display: flex;
    justify-content: center;
}

/* Vertical line */

.solar-energy-connector::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;

    background: linear-gradient(
        to bottom,
        rgba(29, 106, 77, 0.12),
        rgba(29, 106, 77, 0.58)
    );

    background-size: 100% 200%;
    animation: solarFlowDown 1.8s linear infinite;
}

/* Central node */

.solar-energy-connector span {
    position: absolute;
    bottom: -5px;

    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: var(--green);

    box-shadow: 0 0 0 5px rgba(29, 106, 77, 0.09);

    z-index: 3;
    animation: solarFlowPulse 1.8s ease-in-out infinite;
}

/* =========================================================
   DESTINATION AREA
   ========================================================= */

.solar-energy-destinations {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    padding-top: 18px;
    background: transparent;
}

/* Horizontal branch */

.solar-energy-destinations::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(29, 106, 77, 0.48),
        rgba(184, 215, 75, 0.65)
    );
}

/* =========================================================
   DESTINATION CARDS
   ========================================================= */

.solar-energy-destination {
    position: relative;
    min-width: 0;
    padding: 16px;

    border-radius: 13px;
    border: 1px solid var(--line);

    background: transparent;
    background-color: transparent;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

/* Branch to each card */

.solar-energy-destination::before {
    content: "";
    position: absolute;
    top: -19px;
    left: 50%;

    width: 2px;
    height: 19px;

    transform: translateX(-50%);
    background: rgba(29, 106, 77, 0.35);
}

/* Hover */

.solar-energy-destination:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(23, 61, 49, 0.055);
}

/* =========================================================
   ON-SITE DESTINATION
   ========================================================= */

.solar-energy-destination.used {
    border-color: rgba(29, 106, 77, 0.24);
}

.solar-energy-destination.used:hover {
    border-color: rgba(29, 106, 77, 0.48);
}

/* =========================================================
   GRID DESTINATION
   ========================================================= */

.solar-energy-destination.exported {
    border-color: rgba(184, 135, 45, 0.28);
}

.solar-energy-destination.exported:hover {
    border-color: rgba(184, 135, 45, 0.5);
}

/* =========================================================
   DESTINATION HEADER
   ========================================================= */

.solar-energy-destination-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* =========================================================
   DESTINATION ICON
   ========================================================= */

.solar-energy-destination-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: transparent;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.solar-energy-destination:hover .solar-energy-destination-icon {
    transform: translateY(-1px);
}

/* Inline SVG icon sizing */

.solar-energy-destination-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

/* On-site icon */

.solar-energy-destination.used .solar-energy-destination-icon {
    color: var(--green);
    box-shadow: inset 0 0 0 1px rgba(29, 106, 77, 0.15);
}

/* Grid export icon */

.solar-energy-destination.exported .solar-energy-destination-icon {
    color: #B87918;
    box-shadow: inset 0 0 0 1px rgba(184, 135, 45, 0.18);
}

/* =========================================================
   DESTINATION LABELS
   ========================================================= */

.solar-energy-destination-header span {
    display: block;
    font-size: 11px;
    font-weight: 750;
    color: var(--ink);
}

.solar-energy-destination-header small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.4;
    color: var(--muted);
}

/* =========================================================
   DESTINATION VALUES
   ========================================================= */

.solar-energy-destination-value {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    background: transparent;
}

.solar-energy-destination-value strong {
    display: block;

    font-size: 17px;
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;

    color: var(--ink);
}

/* =========================================================
   PERCENTAGE BADGES
   ========================================================= */

.solar-energy-percentage {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;

    border-radius: 6px;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.solar-energy-percentage.used {
    background: rgba(29, 106, 77, 0.09);
    color: var(--green);
}

.solar-energy-percentage.exported {
    background: rgba(184, 135, 45, 0.11);
    color: #A76E16;
}

/* =========================================================
   ENERGY FLOW PERCENTAGE LABELS
   ========================================================= */

.solar-energy-flow-percentage {
    position: absolute;
    top: -10px;
    z-index: 5;

    padding: 3px 7px;
    border-radius: 5px;

    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.04em;

    background: transparent;
    border: 1px solid var(--line);
}

.solar-energy-flow-percentage.used {
    left: 12px;
    color: var(--green);
}

.solar-energy-flow-percentage.exported {
    right: 12px;
    color: #A76E16;
}

/* =========================================================
   INSIGHT
   ========================================================= */

.solar-utilisation-insight {
    position: relative;
    margin-top: 20px;
    padding: 12px 14px;

    border: 1px solid rgba(29, 106, 77, 0.16);
    border-radius: 10px;

    background: transparent;
    background-color: transparent;

    color: var(--ink);
    font-size: 10px;
    line-height: 1.6;
    font-weight: 600;
}

/* Small insight marker */

.solar-utilisation-insight::before {
    content: "●";
    margin-right: 7px;
    color: var(--green);
    font-size: 8px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.solar-utilisation-footer {
    margin-top: 14px;
    padding-top: 11px;

    border-top: 1px solid var(--line);

    background: transparent;
    font-size: 9px;
    line-height: 1.45;
    color: var(--muted);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .solar-utilisation-intelligence {
        padding: 18px 16px;
    }

    .solar-utilisation-header {
        margin-bottom: 18px;
    }

    .solar-energy-source {
        width: 100%;
    }

    .solar-energy-destinations {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .solar-energy-destinations::before,
    .solar-energy-destination::before {
        display: none;
    }

    .solar-energy-connector {
        height: 36px;
    }

    .solar-energy-source-value strong {
        font-size: 22px;
    }

    .solar-energy-destination {
        padding: 14px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@keyframes solarFlowDown {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

@keyframes solarFlowPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solar-energy-connector::before,
    .solar-energy-connector span {
        animation: none;
    }

    .solar-energy-source,
    .solar-energy-source-icon,
    .solar-energy-source-value strong,
    .solar-energy-destination,
    .solar-energy-destination-icon {
        transition: none;
    }
}

/* updated code till above line */

/* =========================================================
   ANALYTICS — PEAK DEMAND SECTION
   ========================================================= */
.peak-demand-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(280px, 1.1fr);
    gap: 30px;
    align-items: center;
}

.peak-demand-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 230px;
    padding: 28px 34px;

    border-left: 4px solid #2F6F73;
    border-right: 1px solid var(--line);
}

.peak-demand-eyebrow {
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.07em;

    color: var(--muted);

    margin-bottom: 14px;
}

.peak-demand-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.peak-demand-number strong {
    font-size: 58px;
    line-height: 1;

    font-weight: 700;

    color: #2F6F73;

    letter-spacing: -0.03em;
}

.peak-demand-number span {
    font-size: 17px;
    font-weight: 700;

    color: var(--muted);

    margin-bottom: 3px;
}
.peak-demand-description {
    max-width: 260px;

    margin-top: 14px;

    font-size: 12px;
    line-height: 1.5;

    color: var(--muted);
}


/* =====================================================
   TOP PEAK-DEMAND SITES
====================================================== */

.peak-demand-sites {
    border-left: 1px solid var(--line);
    padding-left: 28px;

    min-width: 0;
}

.peak-demand-sites-title {
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--muted);

    margin-bottom: 16px;
}

.peak-demand-site-row {
    padding: 15px 0;

    border-bottom: 1px solid var(--line);
}

.peak-demand-site-row:last-child {
    border-bottom: 0;
}

.peak-demand-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.peak-demand-site-info {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.peak-demand-rank {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #E8F1F1;
    color: #2F6F73;

    font-size: 11px;
    font-weight: 700;
}

.peak-demand-site-info strong {
    display: block;

    font-size: 13px;
    font-weight: 600;

    color: var(--ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peak-demand-site-value {
    font-size: 13px;
    font-weight: 700;

    color: #2F6F73;

    white-space: nowrap;
}

.peak-demand-bar {
    width: 100%;
    height: 7px;

    margin-top: 10px;

    border-radius: 999px;

    background: #E8F1F1;

    overflow: hidden;
}

.peak-demand-bar-fill {
    height: 100%;

    border-radius: 999px;

    background: #2F6F73;

    transition: width 0.4s ease;
}

.peak-demand-site-time {
    display: block;

    margin-top: 7px;

    font-size: 10px;

    color: var(--muted);
}

.peak-demand-event {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 18px;
    padding: 7px 10px;

    border-radius: 999px;

    background: #E8F1F1;

    font-size: 10px;
    font-weight: 600;

    color: #2F6F73;
}

.peak-demand-event-dot {
    width: 6px;
    height: 6px;

    margin-right: 7px;

    border-radius: 50%;

    background: #2F6F73;
}

/* =====================================================
   RESPONSIVE
====================================================== */

@media (max-width: 900px) {

    .peak-demand-summary {
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid var(--line);

        padding: 24px 20px;
    }

    .peak-demand-sites {
        border-left: 0;
        border-top: 0;

        padding-left: 0;
        padding-top: 20px;
    }

}
/* =====================================================
   ANALYTICS — PREMIUM SURFACE POLISH
====================================================== */

.analytics-page {
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(47, 111, 115, 0.045),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #F8FAFA 0%,
            #F4F7F7 100%
        );
}


/* Main panels */

.analytics-page .panel {
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(20, 55, 58, 0.08);

    border-radius: 18px;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 8px 24px rgba(16, 24, 40, 0.045);

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Subtle panel interaction */

.analytics-page .panel:hover {
    border-color:
        rgba(47, 111, 115, 0.14);

    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.04),
        0 12px 30px rgba(16, 24, 40, 0.06);
}


/* Section spacing */

.analytics-page section {
    margin-bottom: 24px;
}

/* =========================================================
   INSIGHTS
   ========================================================= */

.insight-hero {
    background: linear-gradient(115deg, #1a503d, #2e7860);
    border-radius: 13px;
    color: white;
    min-height: 226px;
    padding: 31px 37px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.insight-hero:after {
    content: '✦';
    position: absolute;
    right: 200px;
    bottom: -83px;
    color: #70a88e;
    font-size: 260px;
    opacity: 0.12;
}

.sparkle {
    color: #c4df59;
    font-size: 19px;
}

.insight-hero p {
    color: #c2d8cf;
    font-size: 12px;
    margin: 10px 0;
}

.insight-hero h2 {
    font: 700 27px 'Plus Jakarta Sans';
    line-height: 1.35;
    letter-spacing: -1px;
    margin: 0;
}

.insight-hero h2 em {
    font-style: normal;
    color: #c4df59;
}

.insight-hero small {
    font-size: 10px;
    color: #b0c9bd;
    display: block;
    margin-top: 14px;
}

.hero-stat {
    align-self: center;
    z-index: 1;
    width: 175px;
    background: #ffffff18;
    border: 1px solid #ffffff2e;
    padding: 19px;
    border-radius: 9px;
}

.hero-stat strong,
.hero-stat span,
.hero-stat small {
    display: block;
}

.hero-stat strong {
    font: 700 28px 'Plus Jakarta Sans';
}

.hero-stat span {
    font-size: 11px;
    margin: 4px 0;
}

.hero-stat small {
    color: #bfe76e;
    margin: 0;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin: 19px 0;
}

.insight-card {
    padding: 19px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.insight-card i {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 8px;
    background: #e9f3ec;
    color: #37815f;
    font-style: normal;
    font-size: 17px;
}

.insight-card h3 {
    font: 700 14px 'Plus Jakarta Sans';
    margin: 15px 0 7px;
}

.insight-card p {
    color: #69766e;
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.recommendations {
    padding: 23px;
}

.recommendations ol {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.recommendations li {
    display: flex;
    gap: 15px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.recommendations li > span {
    font: 700 11px 'Plus Jakarta Sans';
    color: #82a293;
}

.recommendations strong {
    font-size: 12px;
}

.recommendations p {
    font-size: 11px;
    color: var(--muted);
    margin: 5px 0 0;
}

/* =========================================================
   DRAWER
   ========================================================= */

.drawer {
    position: fixed;
    inset: 0;
    background: #10241b66;
    z-index: 500;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.drawer-inner {
    background: #fff;
    width: min(530px, 100%);
    padding: 32px;
    transform: translateX(100%);
    transition: 0.25s;
    overflow: auto;
}

.drawer.open .drawer-inner {
    transform: translateX(0);
}

.close-drawer {
    float: right;
    border: 0;
    background: #eff3f0;
    border-radius: 50%;
    font-size: 24px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.detail-label {
    color: var(--green);
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: bold;
}

.detail-title {
    font: 700 25px 'Plus Jakarta Sans';
    margin: 8px 0;
}

.detail-sub {
    color: var(--muted);
}

.detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 26px 0;
}

.detail-stats div {
    background: #f6f8f6;
    padding: 12px;
    border-radius: 7px;
}

.detail-stats span,
.detail-stats b {
    display: block;
}

.detail-stats span {
    color: var(--muted);
    font-size: 10px;
}

.detail-stats b {
    font-size: 13px;
    margin-top: 5px;
}

.timeline {
    margin-top: 22px;
    border-left: 2px solid #e1ece5;
    padding-left: 19px;
}

.timeline div {
    position: relative;
    padding: 0 0 19px;
}

.timeline div:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #4e9770;
    background: #fff;
    border-radius: 50%;
    left: -25px;
    top: 3px;
}

.timeline strong,
.timeline small {
    display: block;
}

.timeline strong {
    font-size: 12px;
}

.timeline small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}

/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #183e31;
    color: #fff;
    border-radius: 8px;
    padding: 13px 18px;
    font-size: 12px;
    transform: translateY(80px);
    transition: 0.25s;
    z-index: 1000;
}

.toast.show {
    transform: none;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification-wrap {
    position: relative;
    flex-shrink: 0;
}

.notification-popover {
    position: absolute;
    z-index: 1000;
    right: 0;
    top: 43px;

    width: 240px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #ffffff;
    background-color: #ffffff;

    border: 1px solid var(--line);
    border-radius: 12px;

    box-shadow: 0 10px 26px rgba(23, 61, 49, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        visibility 0.18s ease;
}

.notification-popover.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.notification-check {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;
    flex: 0 0 27px;

    border-radius: 50%;
    background: rgba(29, 106, 77, 0.10);
    color: var(--green);

    font-size: 13px;
    font-weight: 700;
}

.notification-popover strong,
.notification-popover small {
    display: block;
}

.notification-popover strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ink);
}

.notification-popover small {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1080px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .topbar > * {
        min-width: 0;
    }

    .top-actions {
        flex-wrap: wrap;
    }

    .client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   MOBILE MENU DEFAULTS
   ========================================================= */

.mobile-menu-button,
.mobile-menu-trigger,
.mobile-menu-backdrop {
    display: none;
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 900px) {

    /* MOBILE SIDEBAR */

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;

        width: 260px;
        height: 100%;
        box-sizing: border-box;
        padding: 24px 18px;

        transform: translateX(-100%);
        transition: transform 0.25s ease;

        z-index: 1000;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar.mobile-open {
        z-index: 1001;
    }

    .mobile-menu-backdrop.active {
        z-index: 999;
    }

    /* body:has(.sidebar.mobile-open) .mobile-menu-trigger {
        display: none;
    } */

    /* TOPBAR */

    .topbar {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .mobile-menu-trigger {
        display: flex;

        width: 40px;
        height: 40px;
        flex-shrink: 0;

        align-items: center;
        justify-content: center;

        border: 1px solid var(--line);
        border-radius: 10px;

        background: transparent;
        color: var(--ink);

        font-size: 19px;
        cursor: pointer;

        transition:
            background-color 0.2s ease,
            border-color 0.2s ease;
    }

    .mobile-menu-trigger:hover {
        background: rgba(29, 106, 77, 0.05);
        border-color: rgba(29, 106, 77, 0.25);
    }

    .topbar > div:first-of-type {
        min-width: 0;
    }

    /* .topbar-title {
        flex: 1;
        min-width: 0;
    } */

    .top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 0;
        min-width: 0;
    }

    /* MOBILE MENU BUTTON */

    .mobile-menu-button {
        display: flex;
        position: absolute;
        top: 18px;
        right: 18px;

        width: 40px;
        height: 40px;
        box-sizing: border-box;

        align-items: center;
        justify-content: center;

        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;

        background: rgba(255, 255, 255, 0.08);
        color: #edf5ef;

        font-size: 19px;
        cursor: pointer;
        z-index: 2;

        transition: background-color 0.2s ease;
    }

    .mobile-menu-button:hover {
        background: rgba(255, 255, 255, 0.14);
    }

    /* SIDEBAR CONTENT */

    .brand > span:last-child,
    .nav-item {
        font-size: inherit;
    }

    .nav-item {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        padding: 12px 14px;

        text-align: left;

        display: flex;
        align-items: center;
        gap: 12px;
    }

    .nav-item span {
        width: auto;
    }

    .sidebar-note {
        display: none;
    }

    .user-card > div:not(.avatar) {
        display: block;
    }

    .user-card {
        margin-top: auto;
        padding: 14px 8px;
    }

    .brand {
        padding: 4px 8px 22px;
        justify-content: flex-start;
    }

    .brand-mark {
        display: inline-flex;
    }

    /* MAIN CONTENT */

    main {
        margin-left: 0;
        width: 100%;
        padding: 0 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .date {
        display: none;
    }

    .page {
        padding-top: 24px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dashboard-grid,
    .dashboard-column,
    .panel {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-column {
        gap: 14px;
    }

    /* INTRO */

    .intro-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .intro-row > div {
        min-width: 0;
    }

    .intro-row h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .intro-row p {
        font-size: 13px;
        line-height: 1.5;
    }

    .intro-row .primary-button {
        width: 100%;
        justify-content: center;
    }

    /* PANEL HEADERS */

    .panel-head {
        flex-wrap: wrap;
        gap: 12px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .panel-head > div {
        min-width: 0;
    }

    .panel-head select {
        max-width: 100%;
    }

    /* CLIENT / FILTER AREA */

    .client-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-bar {
        flex-wrap: wrap;
    }

    .search {
        width: 100%;
    }

    /* TABLE */

    .table-panel {
        overflow: auto;
    }

    .table-panel table {
        min-width: 680px;
    }

    /* INSIGHTS */

    .insight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-stat {
        display: none;
    }

    /* TOP ACTIONS */

    .top-actions {
        gap: 6px;
    }

    /* DONUT / SERVICES */

    .donut-wrap {
        justify-content: center;
    }

    .service-panel {
        overflow: visible;
        min-width: 0;
    }

    .client-summary {
        overflow: auto;
    }

    .client-summary div {
        min-width: 0;
    }

    /* TOPBAR TYPOGRAPHY */

    .topbar h1 {
        font-size: 17px;
        line-height: 1.25;
    }

    .topbar .eyebrow {
        font-size: 9px;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .demo-badge {
        display: none;
    }

    /* CHART */

    .line-chart {
        padding-left: 40px;
    }

    .chart-legend {
        gap: 12px;
        font-size: 10px;
    }

    /* PAGE WIDTH / OVERFLOW */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* MOBILE MENU BACKDROP */

    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, 0.35);
        z-index: 999;
    }

    .mobile-menu-backdrop.active {
        display: block;
    }
}

/* =========================================================
   NOTIFICATIONS — SMALL SCREENS
   ========================================================= */

@media (max-width: 480px) {
    .notification-popover {
        right: -4px;
        top: 42px;
        width: 230px;
        padding: 13px;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.notification-popover:focus-visible,
.mobile-menu-trigger:focus-visible,
.mobile-menu-button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .notification-popover,
    .mobile-menu-trigger,
    .mobile-menu-button,
    .sidebar {
        transition: none;
    }
}

/*  */

.chart-hover-area {
    cursor: crosshair;
    pointer-events: all;
    outline: none;
}

/* DATA FRESHNESS */
.data-freshness {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: -8px;
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted, #7b8794);
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.freshness-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #48a868;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(72, 168, 104, 0.10);
}

.data-freshness strong {
    color: var(--ink, #26352e);
    font-weight: 600;
}

.freshness-separator {
    color: #b4bcc5;
    margin: 0 2px;
}

/* BAR CHART */
#bar-chart {
    display: flex !important;
    align-items: flex-end !important;
    gap: 20px !important;
    height: 280px !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    border: none;
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 106, 77, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
}

#bar-chart::-webkit-scrollbar {
    height: 5px;
}

#bar-chart::-webkit-scrollbar-track {
    background: transparent;
}

#bar-chart::-webkit-scrollbar-thumb {
    background: rgba(29, 106, 77, 0.25);
    border-radius: 10px;
}

#bar-chart .bar {
    flex: 0 0 80px !important;
    height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0;
    position: relative;
}

#bar-chart .bar i {
    display: block !important;
    width: 45px !important;
    max-width: 100%;
    background: linear-gradient(
        180deg,
        var(--lime, #b8d74b) 0%,
        var(--green, #1d6a4d) 100%
    ) !important;
    min-height: 5px !important;
    flex-shrink: 0 !important;
    border-radius: 5px 5px 2px 2px;
    transition:
        filter 180ms ease,
        opacity 180ms ease,
        box-shadow 180ms ease;
    transform-origin: bottom;
}

#bar-chart .bar b {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink, #26352e);
    margin-bottom: 5px !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#bar-chart .bar span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.4;
    color: var(--muted, #7b8794);
    text-align: center !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-top: 8px;
}

@media (hover: hover) and (pointer: fine) {
    #bar-chart .bar:hover i {
        filter: saturate(1.12);
        box-shadow: 0 3px 10px rgba(29, 106, 77, 0.18);
    }
}

@media (max-width: 600px) {
    .data-freshness {
        margin-top: 0;
        margin-bottom: 18px;
        gap: 6px;
        font-size: 11px;
    }

    #bar-chart {
        gap: 12px !important;
        padding: 16px 10px !important;
        height: 260px !important;
    }

    #bar-chart .bar {
        flex-basis: 68px !important;
        height: 220px !important;
    }

    #bar-chart .bar i {
        width: 36px !important;
    }

    #bar-chart .bar span {
        max-width: 68px !important;
        font-size: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bar-chart .bar i {
        transition: none;
    }
}


/* =========================================================
   SITE PERFORMANCE SNAPSHOT
========================================================= */

.site-performance-panel {
    height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    min-width: 0;
    transition: border-color 0.2s ease;
}

.site-performance-panel .panel-head {
    flex-shrink: 0;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.site-performance-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 20px 18px;
    background: transparent;
}


/* =========================================================
   PRIMARY PERFORMANCE METRICS
========================================================= */

.performance-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* Individual metric */

.performance-metric {
    position: relative;
    min-width: 0;
    padding: 16px 17px 14px;
    background: transparent;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 12px;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.performance-metric::before {
    content: "";
    position: absolute;
    top: 0;
    left: 17px;
    right: 17px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(
        90deg,
        var(--green, #1d6a4d),
        var(--lime, #b8d74b)
    );
    opacity: 0.75;
}

.performance-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 106, 77, 0.24);
    box-shadow: 0 7px 18px rgba(23, 61, 49, 0.055);
}


/* Metric header */

.performance-metric-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.performance-metric-top span {
    font-size: 11px;
    font-weight: 650;
    color: var(--muted, #6f7b75);
}


/* Metric icon */

.performance-metric-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border: 1px solid rgba(29, 106, 77, 0.10);
    border-radius: 9px;
    font-size: 16px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.performance-solar .performance-metric-icon {
    background: rgba(230, 138, 51, 0.09);
    color: var(--orange, #e68a33);
    border-color: rgba(230, 138, 51, 0.16);
}

.performance-consumption .performance-metric-icon {
    background: rgba(133, 115, 188, 0.09);
    color: var(--purple, #8573bc);
    border-color: rgba(133, 115, 188, 0.16);
}

.performance-metric:hover .performance-metric-icon {
    transform: translateY(-1px);
}


/* Metric number */

.performance-metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 11px;
}

.performance-metric-value strong {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.9px;
    color: var(--ink, #26352e);
    font-variant-numeric: tabular-nums;
}

.performance-metric-value span {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted, #8a958f);
}


/* =========================================================
   PERFORMANCE BARS
========================================================= */

.performance-progress {
    width: 100%;
    height: 5px;
    margin-bottom: 7px;
    background: rgba(29, 106, 77, 0.09);
    border-radius: 999px;
    overflow: hidden;
}

.performance-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.solar-fill {
    background: linear-gradient(
        90deg,
        var(--orange, #e68a33),
        #efb66e
    );
}

.consumption-fill {
    background: linear-gradient(
        90deg,
        var(--purple, #8573bc),
        #b2a5d8
    );
}

.performance-metric small {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 550;
    color: var(--muted, #8a958f);
}


/* =========================================================
   GRID ENERGY FLOW
========================================================= */

.performance-grid-section {
    margin-top: 16px;
    min-width: 0;
}

.performance-section-label {
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted, #89948e);
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


/* =========================================================
   GRID FLOW MINI BARS
========================================================= */

.performance-mini-progress {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    background: rgba(29, 106, 77, 0.09);
    border-radius: 999px;
    overflow: hidden;
}

.performance-mini-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.export-fill {
    background: var(--green, #1d6a4d);
}

.import-fill {
    background: var(--orange, #e68a33);
}


/* =========================================================
   GRID FLOW CARDS
========================================================= */

.performance-flow-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 13px;
    background: transparent;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 10px;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.performance-flow-card:hover {
    background: rgba(29, 106, 77, 0.035);
    border-color: rgba(29, 106, 77, 0.20);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 61, 49, 0.035);
}


/* Flow icon */

.performance-flow-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 17px;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.export-icon {
    background: rgba(50, 129, 95, 0.10);
    color: #32815f;
    border-color: rgba(50, 129, 95, 0.12);
}

.import-icon {
    background: rgba(217, 120, 36, 0.09);
    color: var(--orange, #d97824);
    border-color: rgba(217, 120, 36, 0.13);
}

.performance-flow-card:hover .performance-flow-icon {
    transform: scale(1.04);
}


/* Flow text */

.performance-flow-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.performance-flow-info span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--muted, #7b867f);
}

.performance-flow-info strong {
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink, #26352e);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.performance-flow-info small {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.4;
    color: var(--muted, #9aa49f);
}


/* =========================================================
   SELECTED SITE SUMMARY
========================================================= */

.performance-site-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 13px;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--muted, #89948e);
}

.performance-site-summary strong {
    font-weight: 650;
    color: var(--ink, #59655f);
}

.performance-summary-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--green, #1d6a4d);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.08);
}


/* =========================================================
   SELECTOR
========================================================= */

.site-performance-panel .panel-head select {
    min-width: 145px;
    max-width: 100%;
    background-color: transparent;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.site-performance-panel .panel-head select:hover {
    border-color: rgba(29, 106, 77, 0.35);
}

.site-performance-panel .panel-head select:focus-visible {
    outline: 2px solid rgba(29, 106, 77, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {
    .site-performance-panel {
        height: auto;
    }

    .site-performance-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .performance-metric {
        padding: 14px;
    }

    .performance-metric-value strong {
        font-size: 22px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {
    .site-performance-panel {
        height: auto;
        min-height: 0;
    }

    .site-performance-content {
        padding: 12px 16px 18px;
    }

    .performance-primary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .performance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .performance-site-summary {
        margin-top: 16px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {
    .site-performance-panel {
        min-height: 550px;
    }

    .site-performance-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .performance-metric-value strong {
        font-size: 21px;
    }

    .performance-flow-card {
        padding: 11px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .performance-metric,
    .performance-flow-card,
    .performance-metric-icon,
    .performance-flow-icon,
    .performance-progress-fill,
    .performance-mini-progress-fill {
        transition: none;
    }
}


/* SITE PERFORMANCE SNAPSHOT — FORCE TRANSPARENT SURFACES */

.site-performance-panel,
.site-performance-content,
.site-performance-panel .panel-head,
.performance-primary-grid,
.performance-metric,
.performance-grid-section,
.performance-grid,
.performance-flow-card,
.performance-site-summary {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
}

/* Remove any decorative solid strip */
.performance-metric::before {
    background: linear-gradient(
        90deg,
        var(--green, #1d6a4d),
        var(--lime, #b8d74b)
    );
    opacity: 0.65;
}

/* Make the metric cards visibly defined without filling them */
.performance-metric,
.performance-flow-card {
    border: 1px solid var(--line, #e7ece9);
    border-radius: 12px;
}

/* Subtle interaction only */
.performance-metric:hover,
.performance-flow-card:hover {
    background: rgba(29, 106, 77, 0.04) !important;
    border-color: rgba(29, 106, 77, 0.28);
    box-shadow: 0 5px 14px rgba(23, 61, 49, 0.05);
}

/* Keep the coloured icons */
.performance-solar .performance-metric-icon {
    background: rgba(230, 138, 51, 0.09) !important;
}

.performance-consumption .performance-metric-icon {
    background: rgba(133, 115, 188, 0.09) !important;
}

.export-icon {
    background: rgba(50, 129, 95, 0.10) !important;
}

.import-icon {
    background: rgba(217, 120, 36, 0.09) !important;
}



/* =========================================================
   SITE INTELLIGENCE KPI CARDS
========================================================= */

.site-intelligence-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
    background: transparent;
}

.site-intelligence-summary .summary-card {
    position: relative;
    min-width: 0;
    min-height: 125px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.site-intelligence-summary .summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(
        90deg,
        var(--green, #1d6a4d),
        var(--lime, #b8d74b)
    );
    opacity: 0.7;
}

.site-intelligence-summary .summary-card span {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--muted, #64748b);
}

.site-intelligence-summary .summary-card strong {
    margin-bottom: 7px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--ink, #26352e);
    font-variant-numeric: tabular-nums;
}

.site-intelligence-summary .summary-card small {
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted, #94a3b8);
}

@media (hover: hover) and (pointer: fine) {
    .site-intelligence-summary .summary-card:hover {
        transform: translateY(-3px);
        border-color: rgba(29, 106, 77, 0.3);
        box-shadow: 0 7px 18px rgba(23, 61, 49, 0.055);
    }
}


/* =========================================================
   RESPONSIVE KPI CARDS
========================================================= */

@media (max-width: 1000px) {
    .site-intelligence-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .site-intelligence-summary {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 18px 0;
    }

    .site-intelligence-summary .summary-card {
        min-height: 110px;
        padding: 18px;
    }

    .site-intelligence-summary .summary-card::before {
        left: 18px;
        right: 18px;
    }

    .site-intelligence-summary .summary-card strong {
        font-size: 25px;
    }
}


/* =========================================================
   SITE INTELLIGENCE — TABLE HEADER
========================================================= */

#projects .table-panel > .panel-head {
    padding: 16px 20px 12px;
    background: transparent;
}

#projects .table-panel > .panel-head h3 {
    margin: 0 0 5px;
}

#projects .table-panel > .panel-head p {
    margin: 0;
    line-height: 1.5;
    color: var(--muted, #7a867f);
}

#projects .summary-card-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    margin-bottom: 10px;
    border: 1px solid rgba(29, 106, 77, 0.12);
    border-radius: 9px;
    background: rgba(29, 106, 77, 0.08);
    color: var(--green, #367857);
    font-size: 17px;
    font-weight: 600;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

#projects .summary-card-icon.solar-icon {
    color: var(--orange, #d8893d);
    background: rgba(230, 138, 51, 0.09);
    border-color: rgba(230, 138, 51, 0.15);
}

#projects .summary-card:hover .summary-card-icon {
    transform: translateY(-1px);
}


/* =========================================================
   SITE INTELLIGENCE — SITE DETAIL
========================================================= */

.site-intelligence-detail {
    margin-top: 20px;
    padding: 24px;
    background: transparent !important;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color 0.2s ease;
}

.site-intelligence-detail,
.site-detail-header,
.site-detail-metrics {
    min-width: 0;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

.site-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    background: transparent;
}

.site-detail-header small {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--green, #1d6a4d);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-detail-header h3 {
    margin: 0;
    font: 700 19px 'Plus Jakarta Sans', sans-serif;
    line-height: 1.4;
    color: var(--ink, #26352e);
}

.site-detail-header p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted, #7a867f);
}


/* =========================================================
   STATUS BADGE
========================================================= */

.site-detail-header .status {
    flex-shrink: 0;
}


/* =========================================================
   DETAIL METRICS
========================================================= */

.site-detail-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
}

.site-detail-metrics > div {
    min-width: 0;
    padding: 16px;
    background: transparent !important;
    border: 1px solid var(--line, #edf1ee);
    border-radius: 10px;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.site-detail-metrics span {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--muted, #7a867f);
}

.site-detail-metrics strong {
    display: block;
    font: 700 16px 'Plus Jakarta Sans', sans-serif;
    line-height: 1.4;
    color: var(--ink, #26352e);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
    .site-detail-metrics > div:hover {
        transform: translateY(-2px);
        border-color: rgba(29, 106, 77, 0.24);
        box-shadow: 0 5px 13px rgba(23, 61, 49, 0.045);
    }
}


/* =========================================================
   MOBILE / SMALL SCREENS
========================================================= */

@media (max-width: 900px) {
    .site-detail-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .site-intelligence-detail {
        padding: 18px;
    }

    .site-detail-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .site-detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .site-detail-metrics > div {
        padding: 13px;
    }
}

@media (max-width: 420px) {
    .site-detail-metrics {
        grid-template-columns: 1fr;
    }

    .site-intelligence-summary .summary-card strong {
        font-size: 23px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .site-intelligence-summary .summary-card,
    #projects .summary-card-icon,
    .site-intelligence-detail,
    .site-detail-metrics > div {
        transition: none;
    }
}

/* FORCE SITE INTELLIGENCE KPI CARDS TO BE TRANSPARENT */
.site-intelligence-summary .summary-card,
#projects .site-intelligence-summary .summary-card,
.site-intelligence-summary .summary-card.panel,
#projects .site-intelligence-summary .summary-card.panel {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Keep the card contents transparent too */
.site-intelligence-summary .summary-card > *,
#projects .site-intelligence-summary .summary-card > * {
    background-color: transparent !important;
}

/* Preserve the subtle card outline and hover effect */
.site-intelligence-summary .summary-card,
#projects .site-intelligence-summary .summary-card {
    border: 1px solid var(--line, #e7ece9) !important;
    transition: border-color 180ms ease, transform 180ms ease;
}

.site-intelligence-summary .summary-card:hover,
#projects .site-intelligence-summary .summary-card:hover {
    background: rgba(29, 106, 77, 0.04) !important;
    background-color: rgba(29, 106, 77, 0.04) !important;
    border-color: rgba(29, 106, 77, 0.3) !important;
    transform: translateY(-2px);
}


/* =========================================================
   SITE DETAIL KPI ICONS
   ========================================================= */

.site-detail-metric {
    position: relative;
    min-width: 0;
}

.site-detail-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(29, 106, 77, 0.10);
    transition: transform 180ms ease, border-color 180ms ease;
}

.site-detail-metric:hover .site-detail-icon {
    transform: translateY(-2px);
    border-color: rgba(29, 106, 77, 0.24);
}

.site-detail-icon.solar-icon {
    background: rgba(230, 138, 51, 0.10);
    color: #d9822b;
}

.site-detail-icon.consumption-icon {
    background: rgba(77, 114, 95, 0.10);
    color: #4d725f;
}

.site-detail-icon.import-icon {
    background: rgba(99, 112, 105, 0.09);
    color: #637069;
}

.site-detail-icon.export-icon {
    background: rgba(54, 120, 87, 0.10);
    color: #367857;
}

.site-detail-icon.coverage-icon {
    background: rgba(89, 104, 96, 0.09);
    color: #596860;
}

/* =========================================================
   SITE INTELLIGENCE ENERGY CHART
   ========================================================= */

.site-detail-chart-panel {
    margin-top: 32px;
    padding: 20px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color 180ms ease;
}

.site-detail-chart-panel:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

/* =========================================================
   SITE ENERGY CHART HEADER
   ========================================================= */

.site-detail-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 18px;
}

.site-detail-chart-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.site-detail-chart-header h4 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #26322c);
    letter-spacing: -0.2px;
}

.site-detail-chart-header p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted, #6b7771);
}

/* =========================================================
   MONTH FILTER
   ========================================================= */

.site-chart-filter {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.site-chart-filter label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #637069);
}

.site-chart-filter select {
    min-width: 150px;
    border: 1px solid var(--line, #e7ece9);
    background: #ffffff;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 8px 30px 8px 10px;
    color: #56645d;
    font: 12px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-chart-filter select:hover {
    border-color: rgba(29, 106, 77, 0.4);
}

.site-chart-filter select:focus {
    outline: none;
    border-color: var(--green, #1d6a4d);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.10);
}

/* =========================================================
   CHART
   ========================================================= */

.site-detail-chart {
    position: relative;
    width: 100%;
    height: 280px;
    background: transparent !important;
    background-color: transparent !important;
}

.site-detail-chart canvas {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* =========================================================
   PERIOD LABEL
   ========================================================= */

.site-chart-period {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted, #7a857f);
    font-weight: 500;
}

/* =========================================================
   SITE INTELLIGENCE DETAIL
   Hidden until a site is selected
   ========================================================= */

#site-intelligence-detail {
    display: none;
}

/* =========================================================
   RESPONSIVE — SITE ENERGY CHART
   ========================================================= */

@media (max-width: 700px) {
    .site-detail-chart-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .site-chart-filter {
        align-items: flex-start;
    }

    .site-chart-filter select {
        width: 100%;
        min-width: 0;
    }

    .site-detail-chart-panel {
        padding: 16px;
    }

    .site-detail-chart {
        height: 250px;
    }
}

/* Hide sidebar tabs temporarily */
.hidden-for-now {
    display: none !important;
}

/* =========================================================
   BATTERY PERFORMANCE — SITE INTELLIGENCE
   ========================================================= */

.site-detail-battery-panel {
    margin-top: 32px;
    background: transparent !important;
    background-color: transparent !important;
}

/* Battery KPI icons */

.battery-charge-icon {
    background: rgba(46, 125, 50, 0.10);
    color: #2e7d32;
}

.battery-discharge-icon {
    background: rgba(239, 108, 0, 0.10);
    color: #ef6c00;
}

.battery-throughput-icon {
    background: rgba(21, 101, 192, 0.10);
    color: #1565c0;
}

.battery-charge-icon svg,
.battery-discharge-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.battery-charge-icon .battery-level,
.battery-discharge-icon .battery-level {
    fill: currentColor;
    stroke: none;
}

/* =========================================================
   BATTERY ICON ANIMATION
   ========================================================= */

.battery-charge-icon svg {
    animation: batteryChargePulse 2s ease-in-out infinite;
}

.battery-discharge-icon svg {
    animation: batteryDischargePulse 2s ease-in-out infinite;
}

@keyframes batteryChargePulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes batteryDischargePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.94);
    }
}

/* =========================================================
   BATTERY PERFORMANCE CHART
   ========================================================= */

.battery-chart {
    margin-top: 28px;
    background: transparent !important;
    background-color: transparent !important;
}

.battery-chart-header {
    margin-bottom: 16px;
}

.battery-chart-header h5 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #26322c);
}

.battery-chart-header p {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #777);
}

.battery-chart-container {
    position: relative;
    width: 100%;
    height: 320px;
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================================
   GLOBAL SITE MONTH FILTER
   ========================================================= */

.site-global-month-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
}

.site-global-month-filter label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.site-global-month-filter select {
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    background: #ffffff;
    background-color: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-global-month-filter select:hover {
    border-color: rgba(29, 106, 77, 0.4);
}

.site-global-month-filter select:focus {
    border-color: var(--green, #1d6a4d);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.10);
}

/* =========================================================
   SITE DETAIL HEADER
   ========================================================= */

.site-detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: transparent !important;
    background-color: transparent !important;
}

.site-detail-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.site-detail-header .status {
    flex-shrink: 0;
}

/* =========================================================
   SITE PERFORMANCE INSIGHTS
   ========================================================= */

.site-performance-insights {
    margin-top: 28px;
    padding: 24px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color 180ms ease;
}

.site-performance-insights:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

/* Insight cards */

.site-insight-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
    background: transparent !important;
    background-color: transparent !important;
}

.site-insight-card {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 18px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 11px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.site-insight-card:hover {
    background: rgba(29, 106, 77, 0.035) !important;
    background-color: rgba(29, 106, 77, 0.035) !important;
    border-color: rgba(29, 106, 77, 0.28);
    transform: translateY(-2px);
}

.site-insight-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #64748b);
}

.site-insight-card strong {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--green, #1d6a4d);
    font-variant-numeric: tabular-nums;
}

.site-insight-card small {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted, #94a3b8);
}

/* Performance summary */

.site-performance-summary {
    margin-top: 18px;
    padding: 18px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 11px;
}

.site-performance-summary h5 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #334155);
}

.site-performance-summary-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted, #64748b);
}

/* =========================================================
   SOLAR & WEATHER CONDITIONS
   ========================================================= */

.site-conditions-panel {
    margin-top: 24px;
    padding: 22px 24px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color 180ms ease;
}

.site-conditions-panel:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .site-insight-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .site-detail-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .site-performance-insights,
    .site-conditions-panel {
        padding: 18px;
    }

    .site-detail-battery-panel,
    .site-detail-chart-panel {
        margin-top: 24px;
    }

    .site-insight-card {
        min-height: 100px;
    }
}

@media (max-width: 420px) {
    .site-performance-insights,
    .site-conditions-panel,
    .site-detail-chart-panel {
        padding: 14px;
    }

    .site-insight-card {
        padding: 14px;
    }

    .site-insight-card strong {
        font-size: 23px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .battery-charge-icon svg,
    .battery-discharge-icon svg {
        animation: none !important;
    }

    .site-detail-icon,
    .site-detail-chart-panel,
    .site-insight-card,
    .site-performance-insights,
    .site-conditions-panel {
        transition: none !important;
    }
}



/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.site-conditions-header {
    margin-bottom: 20px;
    background: transparent;
}

.site-conditions-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #26322c);
    letter-spacing: -0.2px;
}

.site-conditions-header p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted, #64748b);
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.site-conditions-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    background: transparent !important;
    background-color: transparent !important;
}

.site-conditions-content > .weather-profile,
.site-conditions-content > .solar-peak-profile {
    align-self: start;
    height: fit-content;
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------
   SUB-SECTIONS
--------------------------------------------------------- */

.weather-profile,
.solar-peak-profile {
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
}

.weather-profile h5,
.solar-peak-profile h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #334155);
}

.site-conditions-description {
    margin: 4px 0 16px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted, #94a3b8);
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.conditions-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted, #94a3b8);
    background: transparent !important;
    background-color: transparent !important;
    border: 1px dashed var(--line, #e7ece9);
    border-radius: 10px;
}

/* =========================================================
   WEATHER DISTRIBUTION
========================================================= */

.weather-distribution {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------
   WEATHER ROW
--------------------------------------------------------- */

.weather-row {
    padding: 12px 14px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 10px;
    transition: border-color 180ms ease, transform 180ms ease,
        box-shadow 180ms ease, background-color 180ms ease;
}

.weather-row:hover {
    background: rgba(29, 106, 77, 0.035) !important;
    background-color: rgba(29, 106, 77, 0.035) !important;
    border-color: rgba(29, 106, 77, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 61, 49, 0.045);
}

/* ---------------------------------------------------------
   WEATHER HEADER
--------------------------------------------------------- */

.weather-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--ink, #334155);
}

.weather-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.weather-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 16px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
}

.weather-name span {
    font-weight: 600;
}

.weather-stat {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.weather-stat strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink, #475569);
    font-variant-numeric: tabular-nums;
}

.weather-percentage {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted, #94a3b8);
}

/* ---------------------------------------------------------
   WEATHER BAR
--------------------------------------------------------- */

.weather-bar {
    width: 100%;
    height: 8px;
    background: rgba(100, 116, 139, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.weather-bar-fill {
    height: 100%;
    border-radius: 999px;
    position: relative;
    transition: width 600ms ease;
}

/* Sunny */

.weather-bar-fill.weather-sunny {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #facc15);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.20);
}

/* Cloudy */

.weather-bar-fill.weather-cloudy {
    background: linear-gradient(90deg, #64748b, #94a3b8, #cbd5e1);
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.15);
}

/* Heavy rain */

.weather-bar-fill.weather-heavy-rain {
    background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.20);
}

/* Rain */

.weather-bar-fill.weather-rain {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18);
}

/* Partly cloudy */

.weather-bar-fill.weather-partly-cloudy {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1, #fbbf24);
    box-shadow: 0 2px 6px rgba(148, 163, 184, 0.15);
}

/* =========================================================
   SOLAR PEAK HOURS
========================================================= */

.solar-peak-summary {
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------
   PEAK HOUR CARDS
--------------------------------------------------------- */

.solar-peak-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
}

.solar-peak-item {
    position: relative;
    min-width: 0;
    min-height: 105px;
    padding: 18px 16px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease,
        box-shadow 180ms ease;
}

.solar-peak-item:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 106, 77, 0.28);
    box-shadow: 0 6px 16px rgba(23, 61, 49, 0.05);
}

/* Top accents */

.solar-peak-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0.85;
}

.solar-peak-item:nth-child(1)::before {
    background: linear-gradient(90deg, #d9822b, #fbbf24);
}

.solar-peak-item:nth-child(2)::before {
    background: linear-gradient(90deg, var(--green, #1d6a4d), var(--lime, #b8d74b));
}

.solar-peak-item:nth-child(3)::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

/* Label */

.solar-peak-item span {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Value */

.solar-peak-item strong {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink, #26322c);
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   DAILY PEAK-HOUR RANGE
========================================================= */

.solar-peak-range {
    margin-top: 18px;
    padding: 16px 18px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(217, 119, 6, 0.28);
    border-radius: 10px;
}

/* Range header */

.solar-peak-range-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.solar-peak-range-header span {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.solar-peak-range-header strong {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    white-space: nowrap;
}

/* Range track */

.solar-peak-track {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 999px;
    overflow: visible;
}

.solar-peak-track::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
}

/* Average marker */

.solar-peak-average-marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 3px solid #d97706;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.22);
    z-index: 2;
    animation: solarPeakPulse 1.8s ease-in-out infinite;
}

/* Range labels */

.solar-peak-range-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 10px;
    font-size: 10px;
    color: var(--muted, #94a3b8);
}

.solar-peak-range-labels span:nth-child(2) {
    text-align: center;
    color: #b45309;
    font-weight: 600;
}

.solar-peak-range-labels span:last-child {
    text-align: right;
}

/* Marker animation */

@keyframes solarPeakPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: 0.75;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .site-conditions-content {
        gap: 22px;
    }

    .solar-peak-values {
        gap: 8px;
    }

    .solar-peak-item {
        padding: 16px 12px;
    }
}

@media (max-width: 700px) {
    .site-conditions-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .solar-peak-values {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .solar-peak-values {
        grid-template-columns: minmax(0, 1fr);
    }

    .solar-peak-item {
        min-height: 88px;
    }

    .solar-peak-range {
        padding: 14px;
    }

    .weather-row {
        padding: 11px;
    }

    .weather-row-header {
        gap: 8px;
    }

    .weather-stat {
        gap: 5px;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .solar-peak-average-marker {
        animation: none !important;
    }

    .weather-row,
    .weather-bar-fill,
    .solar-peak-item,
    .site-detail-icon {
        transition: none !important;
    }
}


/* =================================================
   5-MINUTE INTRADAY ENERGY BEHAVIOUR
================================================= */

.site-intraday-panel {
    margin-top: 24px;
    padding: 24px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 16px;
    box-shadow: none;
    transition: border-color 180ms ease;
}

.site-intraday-panel:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

.intraday-date-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.intraday-date-filter label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.intraday-date-filter select {
    padding: 9px 12px;
    border: 1px solid var(--line, #dfe3ea);
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.intraday-date-filter select:hover {
    border-color: rgba(29, 106, 77, 0.4);
}

.intraday-date-filter select:focus {
    outline: none;
    border-color: var(--green, #1d6a4d);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.10);
}

.intraday-chart-container {
    margin-top: 20px;
    padding: 20px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 14px;
}

.intraday-chart-header {
    margin-bottom: 16px;
}

.intraday-chart-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink, #26322c);
}

.intraday-chart-header p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted, #7a8494);
}

.intraday-chart {
    position: relative;
    width: 100%;
    height: 340px;
    background: transparent !important;
    background-color: transparent !important;
}

.intraday-chart canvas {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.intraday-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    background: transparent !important;
    background-color: transparent !important;
}

.intraday-summary-card {
    min-width: 0;
    padding: 18px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 12px;
    transition: border-color 180ms ease, transform 180ms ease,
        box-shadow 180ms ease;
}

.intraday-summary-card:hover {
    background: rgba(29, 106, 77, 0.035) !important;
    background-color: rgba(29, 106, 77, 0.035) !important;
    border-color: rgba(29, 106, 77, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(23, 61, 49, 0.045);
}

.intraday-summary-card span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.intraday-summary-card strong {
    display: block;
    margin-top: 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--green, #1d6a4d);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.intraday-summary-card small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted, #8a93a1);
}

/* =================================================
   INTRADAY WEATHER & ENERGY CONDITIONS
================================================= */

.intraday-weather-panel {
    margin-top: 24px;
    padding: 24px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7ece9);
    border-radius: 16px;
    box-shadow: none;
    transition: border-color 180ms ease;
}

.intraday-weather-panel:hover {
    border-color: rgba(29, 106, 77, 0.25);
}

.intraday-weather-scene {
    position: relative;
    min-height: 190px;
    margin-top: 20px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #87ceeb 0%,
        #dff4ff 65%,
        #f7fbfd 100%
    );
    transition: background 500ms ease;
}

.weather-scene-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 32px;
}

.weather-current-icon {
    font-size: 58px;
    line-height: 1;
}

.weather-current-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #526170;
}

.weather-scene-content strong {
    display: block;
    margin-top: 5px;
    font-size: 28px;
    font-weight: 700;
    color: #17212b;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------
   WEATHER SCENE CLOUDS
------------------------------------------------- */

.intraday-weather-scene::before,
.intraday-weather-scene::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 55px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.55);
    filter: blur(1px);
    animation: weatherCloudMove 18s linear infinite;
    pointer-events: none;
}

.intraday-weather-scene::before {
    top: 25px;
    left: -190px;
}

.intraday-weather-scene::after {
    top: 90px;
    left: -320px;
    width: 130px;
    height: 42px;
    opacity: 0.65;
    animation-delay: -8s;
}

@keyframes weatherCloudMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw + 400px));
    }
}

/* -------------------------------------------------
   WEATHER STATES
------------------------------------------------- */

.intraday-weather-scene.weather-sunny {
    background: linear-gradient(
        180deg,
        #79c9f2 0%,
        #dff5ff 65%,
        #f8fcff 100%
    );
}

.intraday-weather-scene.weather-cloudy {
    background: linear-gradient(
        180deg,
        #9daab5 0%,
        #d6dde2 65%,
        #edf1f3 100%
    );
}

.intraday-weather-scene.weather-rain {
    background: linear-gradient(
        180deg,
        #53616d 0%,
        #7e8b95 55%,
        #b7c0c6 100%
    );
}

/* Rain effect */

.intraday-weather-scene.weather-rain::before,
.intraday-weather-scene.weather-rain::after {
    background: none;
    width: 2px;
    height: 45px;
    border-radius: 0;
    box-shadow:
        30px 15px rgba(255,255,255,.35),
        70px 55px rgba(255,255,255,.3),
        115px 20px rgba(255,255,255,.35),
        160px 70px rgba(255,255,255,.25),
        210px 30px rgba(255,255,255,.35),
        260px 80px rgba(255,255,255,.3),
        310px 20px rgba(255,255,255,.35),
        360px 65px rgba(255,255,255,.3);
    animation: rainFall 1.2s linear infinite;
}

@keyframes rainFall {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(120px);
    }
}

/* =================================================
   DYNAMIC WEATHER SCENE
================================================= */

.weather-sun {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    top: 28px;
    right: 70px;
    background: rgba(255, 235, 120, 0.9);
    box-shadow: 0 0 35px rgba(255, 225, 90, 0.55);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 500ms ease, transform 500ms ease;
    pointer-events: none;
}

.weather-sunny .weather-sun {
    opacity: 1;
    transform: scale(1);
}

/* Clouds */

.weather-cloud {
    position: absolute;
    width: 120px;
    height: 38px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    transition: opacity 500ms ease;
    animation: cloudFloat 12s ease-in-out infinite;
    pointer-events: none;
}

.weather-cloud::before,
.weather-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.weather-cloud::before {
    width: 55px;
    height: 55px;
    left: 22px;
    bottom: 10px;
}

.weather-cloud::after {
    width: 42px;
    height: 42px;
    left: 62px;
    bottom: 8px;
}

.cloud-one {
    top: 42px;
    left: 15%;
}

.weather-cloud.cloud-two {
    top: 92px;
    left: 55%;
    transform: scale(0.75);
    animation-delay: -5s;
}

.weather-cloudy .weather-cloud,
.weather-rain .weather-cloud {
    opacity: 1;
}

@keyframes cloudFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 25px 0;
    }
}

/* Rain drops */

.weather-rain-drops {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
}

.weather-rain .weather-rain-drops {
    opacity: 1;
}

.weather-rain-drops span {
    position: absolute;
    width: 2px;
    height: 28px;
    background: rgba(255, 255, 255, 0.45);
    transform: rotate(18deg);
    animation: rainDrop 1.1s linear infinite;
}

.weather-rain-drops span:nth-child(1)  { left: 8%;  top: 5%; }
.weather-rain-drops span:nth-child(2)  { left: 16%; top: 35%; }
.weather-rain-drops span:nth-child(3)  { left: 24%; top: 12%; }
.weather-rain-drops span:nth-child(4)  { left: 33%; top: 45%; }
.weather-rain-drops span:nth-child(5)  { left: 42%; top: 20%; }
.weather-rain-drops span:nth-child(6)  { left: 51%; top: 55%; }
.weather-rain-drops span:nth-child(7)  { left: 60%; top: 10%; }
.weather-rain-drops span:nth-child(8)  { left: 68%; top: 40%; }
.weather-rain-drops span:nth-child(9)  { left: 76%; top: 18%; }
.weather-rain-drops span:nth-child(10) { left: 84%; top: 50%; }
.weather-rain-drops span:nth-child(11) { left: 91%; top: 25%; }
.weather-rain-drops span:nth-child(12) { left: 46%; top: 70%; }

@keyframes rainDrop {
    from {
        transform: translateY(-35px) rotate(18deg);
    }

    to {
        transform: translateY(170px) rotate(18deg);
    }
}

/* =================================================
   WEATHER TIMELINE
================================================= */

.weather-timeline {
    margin-top: 20px;
    background: transparent !important;
    background-color: transparent !important;
}

.weather-timeline-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted, #6b7280);
}

.weather-timeline-track {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    padding: 4px 2px 10px;
    background: transparent !important;
    background-color: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 106, 77, 0.25) transparent;
}

.weather-period {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 145px;
    padding: 10px 14px;
    border: 1px solid var(--line, #e5e9ef);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease,
        transform 180ms ease;
}

.weather-period:hover {
    border-color: rgba(29, 106, 77, 0.35);
    background: rgba(29, 106, 77, 0.04);
    transform: translateY(-1px);
}

.weather-period.active {
    border-color: var(--green, #1d6a4d);
    background: rgba(29, 106, 77, 0.07);
}

.weather-period:focus-visible {
    outline: 2px solid var(--green, #1d6a4d);
    outline-offset: 2px;
}

.weather-period-icon {
    font-size: 25px;
    line-height: 1;
}

.weather-period-info strong {
    display: block;
    font-size: 12px;
    font-weight: 650;
    color: var(--ink, #27313d);
}

.weather-period-info small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted, #7b8491);
}

.weather-timeline-empty {
    padding: 14px;
    font-size: 12px;
    color: var(--muted, #7b8491);
    background: transparent !important;
    background-color: transparent !important;
    border: 1px dashed var(--line, #e7ece9);
    border-radius: 8px;
}

/* =================================================
   INTRADAY WEATHER DETAILS
================================================= */

.intraday-weather-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
    background: transparent !important;
    background-color: transparent !important;
}

.weather-detail-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 16px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--line, #e7eaf0);
    border-radius: 12px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.weather-detail-card:hover {
    border-color: rgba(29, 106, 77, 0.28);
    transform: translateY(-1px);
}

.weather-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: rgba(29, 106, 77, 0.07);
    font-size: 19px;
}

.weather-detail-content {
    min-width: 0;
}

.weather-detail-content span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #7b8491);
}

.weather-detail-content strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #26313d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* =================================================
   RESPONSIVE
================================================= */

@media (max-width: 900px) {
    .intraday-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-conditions-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .solar-peak-values {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .intraday-weather-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .site-intraday-panel,
    .intraday-weather-panel {
        padding: 18px;
    }

    .intraday-summary-grid,
    .intraday-weather-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .intraday-chart-container {
        padding: 14px;
    }

    .intraday-chart {
        height: 280px;
    }

    .weather-scene-content {
        gap: 14px;
        padding: 24px;
    }

    .weather-current-icon {
        font-size: 46px;
    }

    .weather-scene-content strong {
        font-size: 24px;
    }

    .weather-period {
        min-width: 130px;
    }

    .solar-peak-range-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .solar-peak-range-labels {
        font-size: 9px;
    }
}

/* =================================================
   REDUCED MOTION
================================================= */

@media (prefers-reduced-motion: reduce) {
    .intraday-weather-scene::before,
    .intraday-weather-scene::after,
    .weather-cloud,
    .weather-rain-drops span {
        animation: none !important;
    }

    .site-intraday-panel,
    .intraday-weather-panel,
    .weather-period,
    .weather-detail-card,
    .intraday-summary-card {
        transition: none !important;
    }
}



/* =========================================================
   SITE ENERGY FLOW
   ========================================================= */

.energy-flow-panel {
    overflow: visible;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
    border-color: var(--line);
}

/* SITE SELECTOR */
#energy-flow-site-filter {
    min-width: 190px;
    max-width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

#energy-flow-site-filter:focus-visible {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.10);
}

/* CONTENT */
.energy-flow-content {
    margin-top: 24px;
    background: transparent !important;
    background-color: transparent !important;
}

.solar-panel-icon {
    color: #246f9f;
    background: transparent !important;
}

.solar-panel-icon svg {
    display: block;
}

.energy-site-home-icon {
    display: block;
    margin-bottom: 3px;
}

.grid-pole-icon {
    background: transparent !important;
    color: var(--blue, #4d8ec2);
}

.grid-pole-icon svg {
    display: block;
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.energy-flow-site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    background: transparent !important;
}

.energy-flow-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.energy-flow-site-header h4 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.energy-flow-site-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* LIVE STATUS */

.energy-flow-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent !important;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.energy-flow-live span {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(29, 106, 77, 0.08);
    animation: energy-live-pulse 2s ease-in-out infinite;
}

@keyframes energy-live-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   ENERGY FLOW VISUAL
   ========================================================= */

.energy-flow-visual {
    display: grid;
    grid-template-columns:
        minmax(110px, 1fr)
        70px
        150px
        90px
        minmax(110px, 1fr);
    align-items: center;
    gap: 0;
    min-height: 230px;
    padding: 30px 10px;
    background: transparent !important;
}

/* =========================================================
   ENERGY NODES
   ========================================================= */

.energy-flow-node {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    background: transparent !important;
}

.energy-flow-node:last-child {
    justify-content: flex-end;
}

.energy-flow-node-info {
    min-width: 0;
    background: transparent !important;
}

.energy-flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: transparent !important;
    font-size: 21px;
    transition:
        border-color 180ms ease,
        transform 180ms ease;
}

.energy-flow-node:hover .energy-flow-icon {
    transform: translateY(-2px);
    border-color: rgba(29, 106, 77, 0.32);
}

.solar-node .energy-flow-icon {
    color: var(--orange, #e68a33);
    border-color: rgba(230, 138, 51, 0.28);
}

.grid-node .energy-flow-icon {
    color: var(--blue, #4d8ec2);
    border-color: rgba(77, 142, 194, 0.28);
}

.energy-flow-node span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
}

.energy-flow-node strong {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.energy-flow-node small {
    margin-left: 4px;
    color: var(--muted);
    font-size: 11px;
}

/* =========================================================
   CENTRE SITE
   ========================================================= */

.energy-flow-centre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent !important;
}

.energy-flow-centre-ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    border: 1px solid rgba(29, 106, 77, 0.24);
    border-radius: 50%;
    background: transparent !important;
    box-shadow: 0 0 0 8px rgba(29, 106, 77, 0.035);
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.energy-flow-centre-ring:hover {
    border-color: rgba(29, 106, 77, 0.48);
    box-shadow: 0 0 0 10px rgba(29, 106, 77, 0.055);
}

.energy-flow-centre-ring span {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.energy-flow-centre-ring strong {
    position: relative;
    z-index: 2;
    margin-top: 3px;
    color: var(--green, #1d6a4d);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.energy-flow-centre > small {
    margin-top: 13px;
    color: var(--muted);
    font-size: 11px;
}

/* =========================================================
   CENTRE PULSE
   ========================================================= */

.energy-flow-centre-pulse {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(29, 106, 77, 0.18);
    border-radius: 50%;
    animation: energy-centre-pulse 3s ease-out infinite;
    pointer-events: none;
}

@keyframes energy-centre-pulse {
    0% {
        opacity: 0.65;
        transform: scale(0.88);
    }

    70% {
        opacity: 0;
        transform: scale(1.08);
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* =========================================================
   CONNECTORS
   ========================================================= */

.energy-flow-connector {
    position: relative;
    display: flex;
    align-items: center;
    height: 54px;
    background: transparent !important;
}

.energy-flow-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--line);
}

/* =========================================================
   ENERGY PARTICLES
   ========================================================= */

.energy-flow-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.energy-flow-particles span {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    opacity: 0;
}

/* SOLAR → SITE */

.solar-connector .energy-flow-particles span {
    left: -8px;
    background: var(--orange, #e68a33);
    box-shadow: 0 0 7px rgba(230, 138, 51, 0.25);
    animation: solar-energy-flow 2.8s linear infinite;
}

.solar-connector .energy-flow-particles span:nth-child(2) {
    animation-delay: 0.55s;
}

.solar-connector .energy-flow-particles span:nth-child(3) {
    animation-delay: 1.1s;
}

.solar-connector .energy-flow-particles span:nth-child(4) {
    animation-delay: 1.65s;
}

.solar-connector .energy-flow-particles span:nth-child(5) {
    animation-delay: 2.2s;
}

@keyframes solar-energy-flow {
    0% {
        left: -8px;
        opacity: 0;
    }

    10% {
        opacity: 0.85;
    }

    85% {
        opacity: 0.85;
    }

    100% {
        left: calc(100% + 8px);
        opacity: 0;
    }
}

/* =========================================================
   GRID FLOW
   ========================================================= */

.grid-connector {
    position: relative;
}

/* GRID IMPORT: Grid → Site */

.grid-connector .energy-flow-particles.import-flow span {
    right: -8px;
    background: var(--blue, #4d8ec2);
    box-shadow: 0 0 7px rgba(77, 142, 194, 0.25);
    animation: grid-import-flow 2.8s linear infinite;
}

.grid-connector .energy-flow-particles.import-flow span:nth-child(2) {
    animation-delay: 0.55s;
}

.grid-connector .energy-flow-particles.import-flow span:nth-child(3) {
    animation-delay: 1.1s;
}

.grid-connector .energy-flow-particles.import-flow span:nth-child(4) {
    animation-delay: 1.65s;
}

.grid-connector .energy-flow-particles.import-flow span:nth-child(5) {
    animation-delay: 2.2s;
}

@keyframes grid-import-flow {
    0% {
        right: -8px;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        right: calc(100% + 8px);
        opacity: 0;
    }
}

/* GRID EXPORT: Site → Grid */

.grid-connector .energy-flow-particles.export-flow span {
    left: -8px;
    background: var(--green, #1d6a4d);
    box-shadow: 0 0 7px rgba(29, 106, 77, 0.22);
    animation: grid-export-flow 2.8s linear infinite;
}

.grid-connector .energy-flow-particles.export-flow span:nth-child(2) {
    animation-delay: 0.55s;
}

.grid-connector .energy-flow-particles.export-flow span:nth-child(3) {
    animation-delay: 1.1s;
}

.grid-connector .energy-flow-particles.export-flow span:nth-child(4) {
    animation-delay: 1.65s;
}

.grid-connector .energy-flow-particles.export-flow span:nth-child(5) {
    animation-delay: 2.2s;
}

@keyframes grid-export-flow {
    0% {
        left: -8px;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        left: calc(100% + 8px);
        opacity: 0;
    }
}

/* =========================================================
   FLOW DIRECTION
   ========================================================= */

.energy-flow-direction {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper, #f5f7f5);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-50%);
}

.solar-connector .energy-flow-direction {
    right: -11px;
    color: var(--orange, #e68a33);
}

.grid-connector .energy-flow-direction {
    right: -11px;
    color: var(--blue, #4d8ec2);
}

/* =========================================================
   GRID FLOW LABELS
   ========================================================= */

.grid-flow-labels {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.grid-flow-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper, #f5f7f5);
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.grid-flow-label.import {
    color: var(--blue, #4d8ec2);
    border-color: rgba(77, 142, 194, 0.25);
}

.grid-flow-label.export {
    color: var(--green, #1d6a4d);
    border-color: rgba(29, 106, 77, 0.25);
}

/* =========================================================
   SECONDARY METRICS
   ========================================================= */

.energy-flow-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    background: transparent !important;
}

.energy-flow-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 18px 16px;
    background: transparent !important;
    transition: background-color 180ms ease;
}

.energy-flow-metric:hover {
    background: rgba(29, 106, 77, 0.035) !important;
}

.energy-flow-metric + .energy-flow-metric {
    border-left: 1px solid var(--line);
}

.energy-flow-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(29, 106, 77, 0.16);
    border-radius: 10px;
    background: transparent !important;
    color: var(--green, #1d6a4d);
    font-size: 15px;
}

.energy-flow-metric-icon.export {
    color: var(--green, #1d6a4d);
}

.energy-flow-metric-icon.peak {
    color: var(--orange, #e68a33);
    border-color: rgba(230, 138, 51, 0.22);
}

.energy-flow-metric small {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
}

.energy-flow-metric strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.energy-flow-metric em {
    margin-left: 3px;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.energy-flow-empty {
    padding: 35px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: transparent !important;
    text-align: center;
}

.energy-flow-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .energy-flow-visual {
        grid-template-columns:
            minmax(120px, 1fr)
            65px
            150px
            85px
            minmax(130px, 1fr);
    }

    .energy-flow-centre-ring {
        width: 105px;
        height: 105px;
    }

    .energy-flow-node strong {
        font-size: 19px;
    }

    .energy-flow-metric {
        padding: 16px 12px;
        gap: 9px;
    }
}

@media (max-width: 900px) {
    .energy-flow-visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        min-height: 0;
        padding: 24px 16px;
    }

    .energy-flow-node {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .energy-flow-node-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .energy-flow-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin: 0 auto;
    }

    /* Vertical connectors */
    .energy-flow-connector {
        position: relative;
        width: 4px;
        height: 52px;
        margin: 0 auto;
    }

    .energy-flow-track {
        left: 50%;
        right: auto;
        top: 0;
        width: 2px;
        height: 100%;
        margin: 0;
        transform: translateX(-50%);
    }

    /* Downward arrow */
    .energy-flow-direction {
        right: auto !important;
        left: 50% !important;
        top: auto !important;
        bottom: -13px;
        transform: translateX(-50%) !important;
    }

    .solar-connector .energy-flow-direction,
    .grid-connector .energy-flow-direction {
        right: auto !important;
        left: 50% !important;
    }

    /* Energy site */
    .energy-flow-centre {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 0;
        text-align: center;
    }

    .energy-flow-centre-ring {
        width: 96px;
        height: 96px;
    }

    /* Grid labels */
    .grid-flow-labels {
        flex-direction: row;
    }

    /* Mobile energy particles */
    .solar-connector .energy-flow-particles span,
    .grid-connector .energy-flow-particles span {
        left: 50%;
        right: auto;
        top: -8px;
        margin-left: -3px;
        margin-top: 0;
    }

    .solar-connector .energy-flow-particles span {
        animation: solar-energy-flow-mobile 2.8s linear infinite;
    }

    .grid-connector .energy-flow-particles.import-flow span {
        animation: grid-energy-flow-mobile 2.8s linear infinite;
    }

    .grid-connector .energy-flow-particles.export-flow span {
        animation: grid-energy-flow-mobile 2.8s linear infinite;
    }

    .solar-connector .energy-flow-particles span:nth-child(2),
    .grid-connector .energy-flow-particles span:nth-child(2) {
        animation-delay: 0.55s;
    }

    .solar-connector .energy-flow-particles span:nth-child(3),
    .grid-connector .energy-flow-particles span:nth-child(3) {
        animation-delay: 1.1s;
    }

    .solar-connector .energy-flow-particles span:nth-child(4),
    .grid-connector .energy-flow-particles span:nth-child(4) {
        animation-delay: 1.65s;
    }

    .solar-connector .energy-flow-particles span:nth-child(5),
    .grid-connector .energy-flow-particles span:nth-child(5) {
        animation-delay: 2.2s;
    }

    @keyframes solar-energy-flow-mobile {
        0% {
            top: -8px;
            opacity: 0;
        }

        10%,
        85% {
            opacity: 0.85;
        }

        100% {
            top: calc(100% + 8px);
            opacity: 0;
        }
    }

    @keyframes grid-energy-flow-mobile {
        0% {
            top: -8px;
            opacity: 0;
        }

        10%,
        85% {
            opacity: 0.85;
        }

        100% {
            top: calc(100% + 8px);
            opacity: 0;
        }
    }

    /* Two-column secondary metrics */
    .energy-flow-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .energy-flow-metric:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .energy-flow-metric:nth-child(4) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 600px) {
    .energy-flow-site-header {
        flex-direction: column;
        gap: 14px;
    }

    #energy-flow-site-filter {
        width: 100%;
        min-width: 0;
    }

    #performance-site-filter,
    #site-filter {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .energy-flow-visual {
        padding-left: 0;
        padding-right: 0;
    }

    .energy-flow-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .energy-flow-metric,
    .energy-flow-metric + .energy-flow-metric {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .energy-flow-metric:first-child,
    .energy-flow-metric:nth-child(2) {
        border-top: 0;
    }

    .energy-flow-metric {
        padding: 14px 10px;
        gap: 8px;
    }

    .energy-flow-metric-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .energy-flow-metric strong {
        font-size: 14px;
    }

    .grid-flow-labels {
        gap: 3px;
    }

    .grid-flow-label {
        padding: 3px 6px;
        font-size: 7px;
    }

    .energy-flow-empty {
        padding: 24px 16px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .energy-flow-live span,
    .energy-flow-centre-pulse,
    .energy-flow-particles span {
        animation: none !important;
    }

    .energy-flow-icon,
    .energy-flow-centre-ring,
    .energy-flow-metric {
        transition: none !important;
    }
}

/* =========================================================
   OVERVIEW PANEL SEPARATION
   ========================================================= */

.dashboard-column > .panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    overflow: hidden;
}

/* ============================================================
   WELCOME PAGE
   ============================================================ */

.welcome-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(47, 111, 115, 0.14),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #F7FAFA 0%,
            #EEF5F4 48%,
            #E4EFEE 100%
        );
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    position: relative;
    overflow-x: hidden;
}


/* ============================================================
   WELCOME — MAIN LAYOUT
   ============================================================ */

.welcome-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 70px 0;
    position: relative;
    z-index: 2;
}

.welcome-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 3;
}


/* ============================================================
   WELCOME — INTRODUCTION
   ============================================================ */

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2F6F73;
}

.welcome-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 99px;
    background: #2F6F73;
}

.welcome-title {
    max-width: 650px;
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.055em;
    font-weight: 750;
    color: #173B3D;
}

.welcome-description {
    max-width: 570px;
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: #5C6B6D;
}


/* ============================================================
   WELCOME — ACTIONS
   ============================================================ */

.welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.welcome-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.welcome-button:hover {
    transform: translateY(-2px);
}

.welcome-button-primary {
    color: #FFFFFF;
    background: #2F6F73;
    box-shadow:
        0 10px 24px rgba(47, 111, 115, 0.22);
}

.welcome-button-primary:hover {
    background: #285F63;
    box-shadow:
        0 14px 30px rgba(47, 111, 115, 0.27);
}

.welcome-button-secondary {
    color: #2F6F73;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(47, 111, 115, 0.22);
}

.welcome-button-secondary:hover {
    background: #FFFFFF;
}


/* ============================================================
   WELCOME — PLATFORM PREVIEW
   ============================================================ */

.welcome-preview {
    position: relative;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(47, 111, 115, 0.14);
    box-shadow:
        0 24px 60px rgba(22, 52, 54, 0.10),
        0 4px 14px rgba(22, 52, 54, 0.05);
    backdrop-filter: blur(14px);
}

.welcome-preview-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: #E7F3F3;
    color: #2F6F73;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.welcome-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.welcome-preview-header h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #173B3D;
}

.welcome-preview-header span {
    font-size: 9px;
    color: #7A898B;
}


/* ============================================================
   WELCOME — KPI CARDS
   ============================================================ */

.welcome-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.welcome-kpi {
    position: relative;
    padding: 15px;
    border-radius: 12px;
    background: #F7FAFA;
    border: 1px solid #E4EBEB;
    cursor: pointer;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.welcome-kpi:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.35);
    background: #FFFFFF;
    box-shadow:
        0 10px 24px rgba(22, 52, 54, 0.09);
}

.welcome-kpi.is-selected {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.55);
    background: #FFFFFF;
    box-shadow:
        0 12px 28px rgba(47, 111, 115, 0.14),
        0 0 0 3px rgba(47, 111, 115, 0.07);
}

.welcome-kpi span {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 700;
    color: #7A898B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.welcome-kpi strong {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
    letter-spacing: -0.04em;
    color: #173B3D;
}

.welcome-kpi.is-selected strong {
    color: #2F6F73;
}

.welcome-kpi::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;
    height: 2px;
    border-radius: 99px;
    background: #2F6F73;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.welcome-kpi:hover::after,
.welcome-kpi.is-selected::after {
    transform: scaleX(1);
}


/* ============================================================
   WELCOME — SAMPLE CHART
   ============================================================ */

.welcome-chart {
    position: relative;
    margin-top: 12px;
    padding: 17px;
    border-radius: 12px;
    background: #F7FAFA;
    border: 1px solid #E4EBEB;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.welcome-chart:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 111, 115, 0.28);
    box-shadow:
        0 12px 28px rgba(22, 52, 54, 0.08);
}

.welcome-chart-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.welcome-chart-title span:first-child {
    font-size: 10px;
    font-weight: 750;
    color: #394A4C;
}

.welcome-chart-title span:last-child {
    font-size: 9px;
    color: #7A898B;
}

.welcome-chart-bars {
    height: 100px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.welcome-chart-bar {
    position: relative;
    flex: 1;
    min-width: 8px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(
        180deg,
        #4E8D90,
        #2F6F73
    );
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        filter 0.2s ease;
}

.welcome-chart-bar:hover {
    transform: scaleY(1.06);
    transform-origin: bottom;
    filter: brightness(1.08);
}

.welcome-chart-bar.is-selected {
    filter:
        brightness(1.12)
        drop-shadow(
            0 0 5px rgba(47, 111, 115, 0.35)
        );
    transform: scaleY(1.06);
}

.welcome-chart-bar.is-dimmed {
    opacity: 0.42;
}

.welcome-chart-bar:nth-child(1) { height: 42%; }
.welcome-chart-bar:nth-child(2) { height: 58%; }
.welcome-chart-bar:nth-child(3) { height: 49%; }
.welcome-chart-bar:nth-child(4) { height: 72%; }
.welcome-chart-bar:nth-child(5) { height: 63%; }
.welcome-chart-bar:nth-child(6) { height: 84%; }
.welcome-chart-bar:nth-child(7) { height: 76%; }
.welcome-chart-bar:nth-child(8) { height: 94%; }


/* ============================================================
   WELCOME — ANALYTICS NETWORK BACKGROUND
   ============================================================ */

.analytics-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.welcome-page::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(47, 111, 115, 0.10),
            rgba(47, 111, 115, 0) 70%
        );
    pointer-events: none;
    z-index: 1;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .welcome-shell {
        width: calc(100% - 40px);
        padding: 55px 0;
        align-items: flex-start;
    }

    .welcome-content {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .welcome-title {
        max-width: 720px;
    }

    .welcome-description {
        max-width: 680px;
    }

    .welcome-preview {
        width: 100%;
        max-width: 680px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .welcome-page {
        min-height: 100%;
        overflow-x: hidden;
    }

    .welcome-shell {
        width: calc(100% - 28px);
        min-height: 100vh;
        padding: 34px 0 40px;
        align-items: flex-start;
    }

    .welcome-content {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }


    /* ---------- INTRO ---------- */

    .welcome-eyebrow {
        gap: 7px;
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .welcome-eyebrow::before {
        width: 18px;
        height: 2px;
    }

    .welcome-title {
        max-width: 100%;
        font-size: clamp(34px, 10vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.045em;
    }

    .welcome-description {
        max-width: 100%;
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.6;
    }


    /* ---------- BUTTONS ---------- */

    .welcome-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-top: 25px;
    }

    .welcome-button {
        width: 100%;
        min-height: 48px;
        padding: 0 18px;
        border-radius: 10px;
    }


    /* ---------- PLATFORM PREVIEW ---------- */

    .welcome-preview {
        width: 100%;
        max-width: none;
        padding: 15px;
        border-radius: 17px;
    }

    .welcome-preview-label {
        padding: 5px 8px;
        margin-bottom: 14px;
        border-radius: 6px;
        font-size: 8px;
    }

    .welcome-preview-header {
        gap: 10px;
        margin-bottom: 15px;
    }

    .welcome-preview-header h2 {
        font-size: 15px;
        line-height: 1.25;
    }

    .welcome-preview-header span {
        font-size: 8px;
        white-space: nowrap;
    }


    /* ---------- KPI CARDS ---------- */

    .welcome-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .welcome-kpi {
        min-width: 0;
        padding: 12px;
        border-radius: 10px;
    }

    .welcome-kpi span {
        margin-bottom: 6px;
        font-size: 8px;
        line-height: 1.3;
    }

    .welcome-kpi strong {
        font-size: 18px;
    }

    .welcome-kpi::after {
        left: 12px;
        right: 12px;
        bottom: 6px;
    }


    /* ---------- SAMPLE CHART ---------- */

    .welcome-chart {
        margin-top: 10px;
        padding: 13px;
        border-radius: 10px;
    }

    .welcome-chart-title {
        gap: 8px;
        margin-bottom: 11px;
    }

    .welcome-chart-title span:first-child {
        font-size: 9px;
    }

    .welcome-chart-title span:last-child {
        font-size: 8px;
        white-space: nowrap;
    }

    .welcome-chart-bars {
        height: 82px;
        gap: 5px;
    }

    .welcome-chart-bar {
        min-width: 6px;
        border-radius: 4px 4px 2px 2px;
    }


    /* ---------- NETWORK ---------- */

    .analytics-network {
        opacity: 0.8;
    }

    .welcome-page::after {
        top: -220px;
        right: -220px;
        width: 440px;
        height: 440px;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .welcome-shell {
        width: calc(100% - 22px);
        padding-top: 28px;
    }

    .welcome-content {
        gap: 27px;
    }

    .welcome-title {
        font-size: 33px;
    }

    .welcome-description {
        font-size: 13.5px;
    }

    .welcome-preview {
        padding: 12px;
    }

    .welcome-preview-header h2 {
        font-size: 14px;
    }

    .welcome-kpi {
        padding: 10px;
    }

    .welcome-kpi span {
        font-size: 7px;
    }

    .welcome-kpi strong {
        font-size: 16px;
    }

    .welcome-chart-bars {
        height: 72px;
        gap: 4px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .welcome-button,
    .welcome-kpi,
    .welcome-chart,
    .welcome-chart-bar {
        transition: none;
    }

    .welcome-button:hover,
    .welcome-kpi:hover,
    .welcome-kpi.is-selected,
    .welcome-chart:hover,
    .welcome-chart-bar:hover,
    .welcome-chart-bar.is-selected {
        transform: none;
    }
}

/* ============================================================
   DASHBOARD — ANALYTICS BACKGROUND
============================================================ */

.dashboard-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(47, 111, 115, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 78%,
            rgba(47, 111, 115, 0.045),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #F7FAFA 0%,
            #F2F7F6 48%,
            #EDF4F3 100%
        );
}


/* subtle analytics grid */

.dashboard-background::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(47, 111, 115, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(47, 111, 115, 0.025) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.7),
            transparent 80%
        );
}


/* particle network */

.dashboard-network {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.7;
}


/* ============================================================
   FLOATING MOTION
============================================================ */

@keyframes dashboardFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(
                0,
                -10px,
                0
            );
    }
}


/* ============================================================
   KEEP REAL DASHBOARD ABOVE BACKGROUND
============================================================ */

.app-shell {
    position: relative;
    z-index: 2;
}

.sidebar {
    z-index: 10;
}

.topbar {
    position: relative;
    z-index: 5;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 900px) {

    .floating-chart {
        opacity: 0.35;
        transform: scale(0.85);
    }

    .floating-chart-one {
        right: 2%;
        top: 18%;
    }

    .floating-chart-two {
        left: 8%;
        top: 62%;
    }

    .floating-chart-three {
        right: 3%;
        bottom: 12%;
    }

    .floating-chart-four {
        display: none;
    }

}


@media (max-width: 600px) {

    .floating-chart {
        display: none;
    }

    .dashboard-network {
        opacity: 0.45;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .floating-chart {
        animation: none;
    }

}

/* ============================================================
   TEMPORARILY HIDE PEAK DEMAND
============================================================ */

.peak-demand-section {
    display: none !important;
}