/* =============================================================================
 * chart.modern.css — component chrome overlay
 *
 * Restyles the widget header strip (.menu), timeframe pills, D/M/Y buttons
 * and the big-number block used by LineChartComponent, SolidGaugeChartComponent
 * and the other chart components, using the themes.v2.css tokens.
 *
 * Load ONCE in _Layout.cshtml, after site.modern.css:
 *   <link rel="stylesheet" href="~/styles/chart.modern.css" />
 *
 * Non-destructive overlay on chart.css — remove this file to revert.
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Component frame: the section card (from site.modern.css) is the chrome
 *    now, so the inner frame goes transparent and fills the card
 * ------------------------------------------------------------------------- */
.inner-menu {
    border: none !important;
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Components emit  #<id>{ background-color: <saved config color> }  from
   their stored properties. Those baked-in colors fight the card surface —
   !important here beats those non-important id rules at any specificity. */
[data-tag="component"] {
    background-color: transparent !important;
}

/* Highcharts paints its own background rect; make it show the card surface */
.highcharts-background {
    fill: transparent !important;
}

.highcharts-plot-background, .highcharts-plot-border {
    fill: transparent !important;
}

/* Highcharts paints y-axis tick marks at dark-unica's #707073 via an SVG stroke
   attribute; a CSS stroke overrides that attribute and matches them to the
   gridline token so the ticks don't stand out. */
.highcharts-yaxis .highcharts-tick {
    stroke: var(--chart-grid, rgba(148,163,184,.1));
}

/* chart mount fills whatever the header leaves */
.inner-menu > div[id$="-chart"] {
    flex: 1 1 auto;
    min-height: 100px; /* never collapse below 100px */
    height: auto !important; /* override Highcharts inline height when too small */
}

/* the value+unit dataLabel needs more vertical room when card is short */
.highcharts-data-label-color-0 span > span {
    display: block;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * 2. Header strip: dark filled bar -> quiet transparent toolbar
 *    (overrides the display:table / table-cell layout in chart.css)
 *
 *    Matches the demo's .card-head composition: title (with optional sub) on
 *    the left, segmented pill group on the right.
 * ------------------------------------------------------------------------- */
.menu {
    display: flex !important;
    align-items: center;
    gap: 0;
    background: transparent !important;
    border: none !important;
    padding: 10px 12px 6px !important;
    flex: 0 0 auto;
}

    .menu li {
        display: flex !important;
        align-items: center;
        width: auto !important;
        border: none !important;
        float: none !important;
    }

        /* title cell: takes remaining space, modern weight */
        .menu li:first-child {
            display: flex !important; /* chart.css sets display:contents */
            flex: 1 1 auto;
            min-width: 0;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 13px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .menu li:first-child span {
                overflow: hidden;
                text-overflow: ellipsis;
                color: var(--text-primary);
                font-weight: 600;
                font-size: 13px;
            }

                /* the optional card subtitle (e.g. "MONTH TO DATE" under the title) — small
   mono uppercase like the demo's .card-sub */
                .menu li:first-child span.card-sub {
                    display: block;
                    font-family: var(--font-mono);
                    font-size: 8.5px;
                    font-weight: 500;
                    color: var(--text-faint);
                    letter-spacing: .08em;
                    text-transform: uppercase;
                    margin-top: 2px;
                }

                    /* no subtitle configured -> don't leave an empty gap */
                    .menu li:first-child span.card-sub:empty {
                        display: none;
                    }

        /* the title li needs to stack title + subtitle vertically */
        .menu li:first-child {
            flex-direction: column;
            align-items: flex-start !important;
        }

        .menu li img {
            width: 14px !important;
            height: 14px;
            padding: 0 6px 0 0 !important;
            opacity: .6;
            float: none !important;
            position: static !important;
        }

        /* The D/M/Y button group becomes a segmented control like the demo.
   Container is dark surface, NO border, tight pills inside. */
        .menu li:not(:first-child):has(.tf-btn) {
            background: rgba(0, 0, 0, 0.25) !important;
            border: 1px solid var(--border-default) !important;
            border-radius: 5px !important;
            padding: 0 !important;
            gap: 0 !important;
            max-width: none !important;
            display: inline-flex !important;
            float: none !important;
            align-items: center !important;
        }

        /* line chart timeframe pills (li-filter-group) — one unified capsule like
   the demo: every pill shares the same dark surface, no per-pill borders,
   only the outermost pills round their corners. */
        .menu li.li-filter-group {
            display: inline-flex !important;
            align-items: center;
            background: rgba(0, 0, 0, 0.25) !important;
            border-top: 1px solid var(--border-default) !important;
            border-bottom: 1px solid var(--border-default) !important;
            border-left: none !important;
            border-right: none !important;
            padding: 0 !important;
            margin: 0 !important;
            width: auto !important;
            float: none !important;
        }
        /* outer corners only on first and last of the contiguous group.
   :first-of-type doesn't work — the title li is the first li, so I use
   sibling chain: first = preceded by non-filter-group, last = followed by
   non-filter-group (or nothing). */
        .menu li:not(.li-filter-group) + li.li-filter-group {
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
            border-left: 1px solid var(--border-default) !important;
            padding-left: 3px !important;
        }

        .menu li.li-filter-group:has(+ li:not(.li-filter-group)),
        .menu li.li-filter-group:last-child {
            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
            border-right: 1px solid var(--border-default) !important;
            padding-right: 3px !important;
        }

        .menu li.li-filter-group a {
            display: block;
            background: transparent !important;
            border: none !important;
            color: var(--text-secondary) !important;
            font-family: var(--font-body);
            font-size: 9.5px;
            font-weight: 500;
            line-height: 1.45;
            padding: 3px 8px;
            border-radius: 11px;
            text-decoration: none;
            white-space: nowrap;
            transition: background .12s, color .12s;
            min-width: 20px;
            text-align: center;
        }

        .menu li.li-filter-group:hover a {
            background: var(--state-hover-bg) !important;
            color: var(--state-hover-fg) !important;
        }

        /* active pill: just a flat tinted block inside the capsule, no border */
        .menu li.li-filter-group.active a {
            background: color-mix(in srgb, var(--brand) 18%, transparent) !important;
            color: var(--state-active-fg) !important;
            border: none !important;
            font-weight: 600;
        }

        /* chart-type pills (BAR / LINE) — separate capsule */
        .menu li.li-chartType-group {
            display: inline-flex !important;
            align-items: center;
            background: rgba(0, 0, 0, 0.25) !important;
            border-top: 1px solid var(--border-default) !important;
            border-bottom: 1px solid var(--border-default) !important;
            border-left: none !important;
            border-right: none !important;
            padding: 0 !important;
            margin: 0 !important;
            width: auto !important;
            float: none !important;
        }

        .menu li:not(.li-chartType-group) + li.li-chartType-group {
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
            border-left: 1px solid var(--border-default) !important;
            padding-left: 3px !important;
            margin-left: 8px !important;
        }

        .menu li.li-chartType-group:has(+ li:not(.li-chartType-group)),
        .menu li.li-chartType-group:last-child {
            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
            border-right: 1px solid var(--border-default) !important;
            padding-right: 3px !important;
        }

        .menu li.li-chartType-group a {
            display: block;
            background: transparent !important;
            border: none !important;
            color: var(--text-secondary) !important;
            font-family: var(--font-body);
            font-size: 9.5px;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 5px;
            text-decoration: none;
            white-space: nowrap;
            min-width: 24px;
            text-align: center;
        }

        .menu li.li-chartType-group:hover a {
            background: var(--state-hover-bg) !important;
            color: var(--state-hover-fg) !important;
        }

        .menu li.li-chartType-group.active a {
            background: color-mix(in srgb, var(--brand) 18%, transparent) !important;
            color: var(--state-active-fg) !important;
            border: none !important;
            font-weight: 600;
        }

        /* "Clear" button / date-range trigger sit inside li-filter-group but read
   as actions, not timeframe choices — quieten their default styling */
        .menu li.li-filter-group.claerButton a,
        .menu li.li-filter-group.downArrow a,
        .menu li.li-filter-group.reloadIcon a {
            color: var(--text-faint) !important;
        }

        .menu li.li-filter-group.claerButton:hover a,
        .menu li.li-filter-group.downArrow:hover a,
        .menu li.li-filter-group.reloadIcon:hover a {
            color: var(--state-hover-fg) !important;
        }

        .menu li.li-filter-group.downArrow img {
            width: 9px !important;
            opacity: .6;
            filter: invert(.6);
            vertical-align: middle;
        }

        /* the capsule now has a 1px top/bottom border, which nudged the caret's
   vertical-align centering off. Flex-centre the glyph, but restore the height:
   a flex anchor ignores line-height, so it would collapse to the image height
   and the pill would end up shorter than the D/M/Y text pills. min-height pins
   it to the text pills' line box (line-height 1.45 x font-size 9.5px = 1.45em);
   content-box keeps that exact regardless of any global box-sizing. */
        .menu li.li-filter-group.downArrow a {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: content-box;
            min-height: 1.45em;
        }

        /* reload icon (ProjectionChart): an <img> is a replaced element, so its
   height is its OWN box — line-height on the anchor cannot size it. Pin the height
   explicitly so the pill matches the DAY/MONTH/YEAR text pills; width:auto keeps the
   glyph's aspect. This height is the single knob if the match needs nudging. */
        .menu li.li-filter-group.reloadIcon img {
            height: 15px !important;
            width: auto !important;
            padding: 0 !important;
            opacity: .55;
            filter: invert(.6);
            vertical-align: middle;
        }

        .menu li.li-filter-group.reloadIcon:hover img {
            opacity: 1;
        }

        /* BUT: if all .tf-btn buttons are display:none (no VariableDetails configured),
   suppress the container chrome — the lone trending icon shouldn't sit inside
   an empty pill group. Detected via :not(:has(.tf-btn:not([style*="display:none"]))). */
        .menu li:not(:first-child):has(.tf-btn):not(:has(.tf-btn:not([style*="display:none"]))) {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }

            /* and in that empty-pill case, the trending icon's hairline separator is meaningless */
            .menu li:not(:first-child):has(.tf-btn):not(:has(.tf-btn:not([style*="display:none"]))) > .icon-btn-chart {
                border-left: none !important;
                padding-left: 0 !important;
                margin-left: 0 !important;
            }

        /* the trending icon button sits OUTSIDE the segmented pill group */
        .menu li .icon-btn-chart {
            margin-left: 6px;
        }

        .menu li:has(.tf-btn) > .icon-btn-chart {
            background: transparent !important;
            border-radius: 0;
            margin-left: 2px;
            padding-left: 4px;
            border-left: none;
        }

/* fallback for browsers without :has() */
@supports not selector(:has(*)) {
    .menu li:last-child {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 2px;
        gap: 1px;
    }
}

/* ---------------------------------------------------------------------------
 * 3. Timeframe pills (.li-filter-group / .li-chartType-group)
 * ------------------------------------------------------------------------- */
.menu li a {
    color: var(--text-secondary);
    font-size: 10.5px !important;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .12s, color .12s;
    bottom: auto !important;
}

    /* hover = tenant secondary */
    .menu li a:hover {
        background: var(--state-hover-bg);
        color: var(--state-hover-fg);
    }

/* active = tenant primary — properly SCOPED (replaces the accidental
   styling these pills got from the unscoped `.active` rule in site.css) */
.menu li.active,
.menu li.active a {
    background: transparent;
}

    .menu li.active > a {
        background: var(--state-active-bg);
        color: var(--state-active-fg);
    }

/* line-chart variant: kill the hardcoded gray borders / fixed widths */
.lineChart li {
    border: none !important;
    width: auto !important;
}

/* ---------------------------------------------------------------------------
 * 4. D/M/Y + icon buttons inside the header (SolidGauge, usage/cost tiles).
 *    Match the demo's pill styling — quiet base, brand-tinted active state.
 * ------------------------------------------------------------------------- */
.menu .tf-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s, color .12s;
    min-width: 20px;
}

    .menu .tf-btn:hover {
        background: var(--state-hover-bg);
        color: var(--state-hover-fg);
    }

    /* active = brand-tinted soft fill (not the solid red), like the demo.
   Just a flat tinted block — no border outline. */
    .menu .tf-btn.active {
        background: color-mix(in srgb, var(--brand) 18%, transparent) !important;
        color: var(--state-active-fg) !important;
        border: none !important;
        font-weight: 600;
    }

/* fallback for browsers without color-mix (use brand-soft) */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
    .menu .tf-btn.active {
        background: var(--state-active-bg) !important;
        border: none !important;
    }
}

.menu .icon-btn-chart {
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    opacity: .6;
    margin-left: 2px;
}

    .menu .icon-btn-chart:hover {
        opacity: 1;
        background: var(--state-hover-bg);
    }


    .menu .icon-btn-chart img {
        width: 14px !important;
        padding: 0 !important;
    }

/* COMPONENT ICONS -> masked color (exact theme color, like the rail). These
       are real <img> elements, so we hide the img and paint the glyph on a
       ::before; the button/pill keeps its own hover background. */
.menu .icon-btn-chart {
    display: inline-grid;
    place-items: center;
    opacity: 1; /* color now conveys state, not dimming */
}

    .menu .icon-btn-chart img {
        display: none;
    }

    .menu .icon-btn-chart::before {
        content: "";
        width: 14px;
        height: 14px;
        background-color: var(--text-secondary);
        -webkit-mask: url("/uploads/images/ICON - TRENDING(VertNav_ICONS (20px)).svg") center / contain no-repeat;
        mask: url("/uploads/images/ICON - TRENDING(VertNav_ICONS (20px)).svg") center / contain no-repeat;
        transition: background-color .12s ease;
    }

    .menu .icon-btn-chart:hover::before {
        background-color: var(--state-hover-fg);
    }

/* reload icon (ProjectionChart). NO display override on <a>: keep its
       text-pill line-height so the pill height matches its sibling pills. The
       ::before is an inline-block sized SMALLER than the line box, so the line
       box (line-height) sets the height — identical to the text pills. */
.menu li.li-filter-group.reloadIcon a img {
    display: none;
}

.menu li.li-filter-group.reloadIcon a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px; /* == text pills' line box, so the pill heights match */
    background-color: var(--text-secondary);
    -webkit-mask: url("/uploads/images/chartIcons/reload-wht.png") center / 13px no-repeat;
    mask: url("/uploads/images/chartIcons/reload-wht.png") center / 13px no-repeat;
    transition: background-color .12s ease;
}

.menu li.li-filter-group.reloadIcon:hover a::before {
    background-color: var(--state-hover-fg);
}

/* date-range dropdown caret (downArrow) */
.menu li.li-filter-group.downArrow a img {
    display: none;
}

.menu li.li-filter-group.downArrow a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px; /* == text pills' line box, so the pill heights match */
    background-color: var(--text-secondary);
    -webkit-mask: url("/uploads/images/chartIcons/drop-down.png") center / 9px no-repeat;
    mask: url("/uploads/images/chartIcons/drop-down.png") center / 9px no-repeat;
    transition: background-color .12s ease;
}

.menu li.li-filter-group.downArrow:hover a::before {
    background-color: var(--state-hover-fg);
}

/* suppress focus rings on mouse click; keep them visible for keyboard nav */
.menu .tf-btn:focus,
.menu .icon-btn-chart:focus {
    outline: none;
    box-shadow: none;
}

.menu .tf-btn:focus-visible {
    outline: 1px solid var(--state-active-fg);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * 5. Big-number block (gauge "text" mode, usage/cost tiles)
 * ------------------------------------------------------------------------- */
.usageBlock {
    background-color: transparent;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center; /* center value vertically in the tile body */
    align-items: flex-start; /* left-aligned like the demo's .kpi card */
    flex: 1 1 auto;
    padding: 2px 12px 12px; /* left 12px == .menu's 12px, so value aligns under the title */
}

    /* value + units share one baseline, left-aligned — mirrors the demo's
   .kpi .value (big display number) followed by a small muted unit */
    .usageBlock .usage-value {
        display: flex;
        align-items: baseline;
        gap: 5px;
        min-width: 0;
        max-width: 100%;
    }

/* SolidGaugeChart renders BOTH the Highcharts chart and a fallback .usageBlock
   in the same wrapper. Hide the number block when a gauge chart is present —
   the JS chooses which mode to populate, but the markup emits both. */
[data-name="SolidGaugeChartComponent"]:has([data-highcharts-chart]) > .usageBlock {
    display: none;
}

.usageBlock [id$="-singleVariable"] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(15px, 1.4vw, 20px);
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

.usageBlock [id$="-preUnit"],
.usageBlock [id$="-postUnit"] {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
}

/* the value row is inline-styled (centered + big bottom margin); override to a
   tight, left-aligned baseline row like the demo's .kpi .value */
.usageBlock > div {
    justify-content: flex-start !important;
    align-items: baseline !important;
    margin-bottom: 0 !important;
    font-size: inherit !important;
    flex-wrap: nowrap;
}

    .usageBlock > div > span {
        margin: 0 !important; /* kill inline margin:auto that centered each span */
    }

/* usage tiles have no currency prefix: hide the empty preUnit so value is flush-left */
.usageBlock [id$="-preUnit"]:empty {
    display: none;
}

/* metric label as a clean muted eyebrow (text tiles only; gauges keep theirs) */
[data-name="SolidGaugeChartComponent"]:not(:has([data-highcharts-chart])) [id$="-title"] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: .01em;
}

/* the value hugged the card edge because .usageBlock's own padding wasn't
   landing; force the 12px left inset (== .menu's 12px) at high specificity, and
   collapse the literal &nbsp; text nodes so the number starts flush at that
   inset and lines up directly under the title. */
[data-tag="component"][data-name="SolidGaugeChartComponent"] > .usageBlock {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

[data-name="SolidGaugeChartComponent"] > .usageBlock > div {
    font-size: 0 !important; /* zero-out the &nbsp; spacers; spans keep their own size */
}

[data-name="SolidGaugeChartComponent"] > .usageBlock [id$="-preUnit"] {
    margin-right: 4px !important;
}

[data-name="SolidGaugeChartComponent"] > .usageBlock [id$="-postUnit"] {
    margin-left: 4px !important;
}

/* usage tiles have no currency prefix — hide the empty preUnit so the value
   starts flush-left instead of leaving a gap (cost tiles set it to "Rp"). */
.usageBlock .usage-pre:empty {
    display: none;
}

.vertical {
    border-left: 1px solid var(--border-default);
}

/* trend arrows keep semantic status colors (already tokenized) */
.arrow-up {
    border-bottom-color: var(--status-alarm);
}

.arrow-down {
    border-top-color: var(--status-ok);
}

/* ---------------------------------------------------------------------------
 * 6. Misc chart.css cleanups
 * ------------------------------------------------------------------------- */
.YearlyConsumptionChartComponent,
.ComparisionChartComponent {
    background-color: transparent;
}

.contractedDemand {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Kendo date-range trigger inside the line chart header */
[id$="-daterangepicker"] {
    color: var(--text-secondary) !important;
}
/* Highcharts context (hamburger) button — match the dark theme, all charts */
.highcharts-contextbutton .highcharts-button-box {
    fill: var(--surface-card) !important;
    stroke: var(--border-default) !important;
}

.highcharts-contextbutton .highcharts-button-symbol {
    stroke: var(--text-secondary) !important;
}

.highcharts-contextbutton:hover .highcharts-button-box {
    fill: var(--state-hover-bg) !important;
}