:root {
    /* Primary Brand Colors */
    --brand-primary: #002D36; /* Darker teal shade */
    --brand-secondary: #00525E; /* Dark teal brand color */
    --brand-tertiary: #14E1A0; /* Bright teal/green accent */
    /* Accent Colors */
    --accent-dark: #002126; /* Very dark background accent */
    --accent-light-blue: #E2FBFF; /* Light blue background accent */
    --accent-gray: #667085; /* Neutral gray text/icon accent */
    --accent-purple: #9E77ED; /* Primary purple accent */
    --accent-cyan: #007B8D; /* Cyan accent */
    --accent-deep-blue: #002C33; /* Deep blue/teal accent */
    --accent-light-purple: #D6BBFB; /* Light purple background */
    --accent-lavender: #E9D7FE; /* Light lavender */
    --accent-lavender-bg: #F4EBFF; /* Pale lavender background */
    --accent-violet: #7F56D9; /* Medium violet accent */
    --accent-red: #F04438; /* Bright red (error) */
    --accent-dark-red: #B42318; /* Darker red */
    --accent-green-bg: #CCFFEF; /* Minty green background */
    --accent-light-cyan: #D5FAFF; /* Light cyan background */
    --accent-mint: #93FFDD; /* Soft mint green */
    --accent-bright-mint: #7DFFD6; /* Bright mint */
    --accent-pale-mint: #BBFEE9; /* Pale mint */
    --accent-deep-purple: #53389E; /* Deep purple */
    --accent-success-green: #12B76A; /* Success green */
    --accent-indigo: #6172F3; /* Indigo accent */
    --accent-pink: #EE46BC; /* Pink accent */
    --accent-neon-green: #29FF50; /* Neon green */
    --accent-lilac: #B692F6; /* Lilac accent */
    --accent-deep-black: #001418; /* Deep black background */
    --accent-bright-green: #17B26A; /* Bright success green */
    --accent-dark-green: #067647; /* Dark green */
    /* Neutral / Grayscale Palette */
    --neutral-dark-gray: #444444;
    --neutral-white: #FFFFFF;
    --neutral-light-gray: #E9EAEB;
    --neutral-gray-400: #C4C4C4;
    --neutral-gray-500: #9AA4B2;
    --neutral-off-white: #FAFAFA;
    --neutral-gray-800: #364152;
    --neutral-purple-bg: #F9F5FF;
    --neutral-black: #101828;
    --neutral-gray-300: #EAECF0;
    --neutral-gray-600: #697586;
    --neutral-gray-border: #E3E8EF;
    --neutral-gray-divider: #D0D5DD;
    --neutral-gray-200: #CDD5DF;
    --neutral-navy: #121926;
    --neutral-bg-100: #F2F4F7;
    --neutral-bg-200: #F8FAFC;
    --neutral-bg-300: #EEF2F6;
    --neutral-navy-dark: #202939;
    --neutral-gray-700: #4B5565;
    --neutral-bg-warm: #FFFBFA;
    --neutral-bg-green-tint: #E7F8F5;
    --neutral-bg-pure: #FCFCFD;
    --neutral-bg-soft: #F9FAFB;
    --neutral-bg-mint-tint: #F6FEF9;
    --neutral-bg-light-green: #ECFDF3;
    --space-24: 24px;
    --space-16: 16px;
    /* Typography */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-30: 30px;
    --fs-36: 36px;
    --fs-60: 60px;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --font-sidebar: 'Inter',system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-main: 'Figtree',system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /* Border Radius */
    --radius-0: 0px;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-5: 5px;
    --radius-6: 6px;
    --radius-7: 7px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-13: 13px;
    --radius-100: 100px;
    --radius-pill: 9999px;
    /* Layout */
    --sidebar-width: 312px;
    --sidebar-y-padding: 32px;
    --sidebar-x-padding: 16px;
    --bs-primary: var(--brand-primary) !important;
    font-family: var(--font-sidebar);
}


a {
    text-decoration: none !important;
}


.k-pager-numbers .k-link.k-selected {
    border-color: var(--brand-secondary);
    background-color: var(--brand-secondary);
}

.k-muted-row {
    color: #999 !important;
    opacity: 0.6 !important;
}
.grid-title {
    font-family: Inter;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #101828;
    margin-bottom: 24px;
}
strong {
    font-weight: 700 !important;
}

* {
    box-sizing: border-box;
    font-family: var(--font-sidebar);
}

.supplier-page-main {
    display: block;
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width));
    grid-template-areas: "sidebar content";
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-sidebar);
}

body {
    background-color: var(--neutral-white);
}

article.container-main {
    grid-area: content;
}

.grid-container {
    overflow: scroll;
}

    .grid-container::-webkit-scrollbar {
        background: transparent; /* Chrome/Safari/Webkit */
        width: 0px;
    }

.grid-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

nav {
    grid-area: navbar;
}

.chart {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .chart .no-data {
        flex-grow: 1;
        inset: 0;
        display: none; /* toggled to flex via JS */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #fafafa;
        border: 1px dashed #d0d5dd;
        border-radius: 10px;
        color: var(--neutral-gray-800, #444);
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 500;
        text-align: center;
        padding: 24px;
    }

        .chart .no-data i {
            font-size: 28px;
            color: var(--brand-primary, #3b82f6);
            opacity: 0.9;
        }

aside {
    grid-area: sidebar;
    padding: var(--sidebar-y-padding) var(--sidebar-x-padding);
    background-color: var(--accent-dark);
    width: var(--sidebar-width);
    min-height: fit-content;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Orange (Pending) */
.chip--warning {
    background: #fff7ed !important; /* light orange */
    border-color: #fed7aa !important; /* orange-200 */
    color: #92400e !important; /* dark orange text */
}

/* Red (Unauthenticated / Inactive) */
.chip--danger {
    background: #fef2f2 !important; /* light red */
    border-color: #fecaca !important; /* red-200 */
    color: #991b1b !important; /* dark red text */
}



.chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 16px;
    border: 1px solid var(--neutral-gray-200,#e5e7eb);
    background: var(--neutral-bg-200);
    color: var(--neutral-gray-600);
    font-weight: var(--fw-semi-bold) !important;
}

.chip--success {
    background: var(--success-50,#ecfdf5);
    border-color: var(--success-200,#a7f3d0);
    color: var(--accent-dark-green);
}

.chip--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block
}

.brand {
    margin-inline: 8px;
    padding-inline: 8px;
    width: 250px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--neutral-white);
}

    .brand span {
        font-weight: 400;
        font-size: 24px;
        display: block;
        margin-bottom: 5px;
    }

.logo {
    width: 141px;
}

    .logo img {
        width: 100%;
    }

.vr {
    height: 10px;
    align-self: unset;
    color: var(--neutral-gray-200) !important;
    background-color: var(--neutral-gray-200) !important;
    height: 13.6px;
    border: 1.36px;
}

.betabadge {
    height: 50px;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    width: unset;
}

.release-info {
    width: fit-content;
    opacity: .4;
    margin-block: 12px;
    color: var(--neutral-gray-500);
}

.navigation-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-block: 8px;
    padding-inline: 12px;
}

    .navigation-item + .navigation-item {
        margin-top: 8px;
    }

    .navigation-item:hover {
        background-color: rgba(0,82,94,0.1);
    }

    .navigation-item.active {
        background-color: var(--brand-secondary) !important;
        border-radius: 8px;
    }

.navigation {
    margin-top: var(--sidebar-y-padding);
    flex-grow: 1;
}

.navigation-item a {
    width: 100%;
    text-decoration: none;
    color: var(--neutral-gray-500);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    font-family: var(--font-sidebar);
}

.navigation-item.active a {
    color: var(--neutral-white);
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navigation-item svg *, .dropdown-item svg * {
    stroke: var(--neutral-gray-500);
}

.navigation-item.active svg *, .dropdown-item.active svg * {
    stroke: var(--neutral-white) !important;
}

.user-info {
    padding-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: var(--brand-primary) 1px solid;
}

.username {
    font-weight: 400;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-14);
    color: var(--neutral-gray-border);
    font-family: var(--font-sidebar);
    max-width: 187px;
}

.user-left a {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-toast {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 400px;
    background: var(--neutral-white);
    z-index: 5;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 12px;
    border: 1px solid var(--neutral-gray-divider);
    height: 110px;
    gap: 8px;
}

.filterchip {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    width: fit-content;
    height: 28px;
    background: #E2FBFF; /* Primary/Light */
    border: 1px solid #007B8D; /* Stroke/3 */
    border-radius: 100px;
}

/* Text */
.filterchip__text {
    max-width: 131px; /* from Figma */
    height: 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    font-weight: 500; /* Text sm/Medium */
    font-size: 14px;
    line-height: 20px; /* 143% */
    letter-spacing: -0.04em;
    color: #007B8D; /* Stroke/3 */
    flex: none;
    order: 1;
    flex-grow: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterchip__icon {
    width: 14px;
    height: 14px;
    flex: none;
    order: 0;
    display: inline-flex;
}

    .filterchip__icon svg {
        width: 14px;
        height: 14px;
        stroke: #00525E; /* Primary/base */
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

.chipgap {
    gap: 3px;
}


.filterchip__close {
    width: 16px;
    height: 16px;
    flex: none;
    order: 2;
    flex-grow: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

    .filterchip__close svg {
        width: 16px;
        height: 16px;
        stroke: #007B8D; /* Stroke/3 */
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

.toast-content {
    display: flex;
    flex-direction: row; /* Align icon and title horizontally */
    align-items: center; /* Center vertically */
    gap: 8px;
    width: 100%;
}

.featured-icon-outline {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E1FCE5;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.toast-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.toast-title {
    font-family: var(--font-sidebar), sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-black);
    margin-left: 0px;
    padding-left: 5px;
    width: auto; /* Adjust width to fit content */
    height: 20px;
}

.toast-message {
    font-family: var(--font-sidebar), sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #475467; /* closest match not in palette */
    width: 300px;
    height: 20px;
    padding-left: 38px;
}

.button-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
}

    .button-close-x img {
        width: 16px;
        height: 16px;
    }

.toast-actions {
    margin-top: 2px;
    padding-left: 0;
}

.chart-border-styles {
    border: 1px solid var(--neutral-gray-border);
    border-radius: 8px;
}

.dismiss-button {
    background: none;
    border: none;
    color: #475467; /* closest match not in palette */
    font-family: var(--font-sidebar), sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}



.menuButton .k-font-icon {
    color: var(--brand-secondary);
}

@media only screen and (min-width:992px) {
    .system-insights-cards,
    .systems-summary-cards {
        display: flex;
    }

    

    .side-by-side-charts {
        display: flex;
    }

    .ed-grid, .ep-grid {
        display: grid;
    }

    .energy-produced {
        height: 525px;
    }

    .energy-distributed {
        height: 479px;
    }

    .annual-summary__top {
        width: 310px;
    }

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

@media only screen and (min-width:1312px) {
    .supplier-page-selector {
        padding-inline: 44px;
    }
}
@media only screen and (max-width:1311px) {
    .supplier-page-selector span {
        display: none;
    }

    .supplier-pages {
        justify-content: space-between !important;
    }
}
@media only screen and (max-width:991px) {

    main {
        grid-template-columns: 1fr;
        grid-template-areas: "navbar"
            "content";
    }
    .overview-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .annual-summary__top {
        margin-top: 16px;
    }

    .insight-card-wrapper + .insight-card-wrapper, .systems-summary-card-wrapper + .systems-summary-card-wrapper {
        margin-top: 16px;
    }

    

    .energy-trend__container {
        margin-top: 16px;
    }
}
.disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
}

.disable-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.text-ellipsis {
    max-width: 580px; /* slightly less than column width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}