/* =========================================================
   Executive Overview 
   ========================================================= */

/* SITE PERFORMANCE */

.site-performance-panel {
    /* Positioning context for the prev/next buttons below, moved here from
       .site-performance-carousel - top:50% needs to read against the whole
       card's height (header included), not just the carousel's, or the
       buttons land noticeably below true center (the header sits above the
       carousel with nothing to balance it below, so centering within the
       carousel alone puts them lower than centered-on-card looks). */
    position: relative;
    overflow: hidden;
}

.site-performance-header {
    margin: 14px;
}

/* This card's date pill is a read-only MTD label, not a picker trigger like
   ExecutiveOverview's - same .period-stepper shell, just without the
   clickable affordance. */
.period-stepper--static {
    cursor: default;
}

.period-stepper--static:hover {
    border-color: #bdbdbd;
}

.site-performance-carousel {
    overflow: hidden;
    width: 100%;
}

.site-performance-track {
    display: flex;
    width: 100%;
    transition: transform 0.35s ease;
}

/* Applied when there are fewer sites than VisibleCards (2-4) - --site-card-width (set inline by
   SitePerformanceCard, see its own comment) already grows each card to its fair 1/N share there, so
   this only needs to balance the resulting row instead of leaving it flush left. */
.site-performance-track--centered {
    justify-content: center;
}

.site-performance-card-wrapper {
    /* --site-card-width is set inline on .site-performance-track (CardWidthPercent) - 1/N of the
       row below VisibleCards sites, the usual 20% once there are enough to scroll. The 20% literal
       here is only a fallback for markup that doesn't set the variable. */
    flex: 0 0 var(--site-card-width, 20%);
    min-width: 0;
    padding: 0 5px;
    box-sizing: border-box;
}

.site-performance-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 20px 4px;
    border-right: 1px solid #edf0f3;
    margin-bottom: 12px;
}

.site-performance-item:last-of-type {
    border-right: none;
}

.site-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1d2939;
}

.site-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.site-status .mud-typography {
    font-size: 12px !important;
    color: #667085;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #16a34a;
}

.status-dot.status-excellent {
    background: #16a34a;
}

.status-dot.status-good {
    background: #f59e0b;
}

.status-dot.status-warning {
    background: #f97316;
}

.status-dot.status-critical {
    background: #ef4444;
}

/* No data for the site this period (null Status from site-performance) - grey, not a fabricated
   category. See SitePerformanceCard's GetStatusClass/GetIndexClass. */
.status-dot.status-na {
    background: #98a2b3;
}

.site-status .status-excellent {
    color: #16a34a !important;
}

.site-status .status-good {
    color: #f59e0b !important;
}

.site-status .status-warning {
    color: #f97316 !important;
}

.site-status .status-critical {
    color: #ef4444 !important;
}

.site-status .status-na {
    color: #98a2b3 !important;
}

/* Ring is a real SVG circle (see .fuel-index-ring below) instead of a
   conic-gradient masked into a donut - a vector stroke stays perfectly
   round and smoothly anti-aliased at any size, where the old mask's edge
   could look a little soft/uneven, and stroke-linecap:round (below) rounds
   off the arc's two ends instead of leaving them cut flat.
   --ring-color is set per status and read by the SVG stroke. */

.fuel-index-circle {
    position: relative;
    width: 92px;
    height: 92px;
    margin-top: 10px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    --ring-color: #16a34a;
}

.fuel-index-circle.index-excellent {
    --ring-color: #16a34a;
}

.fuel-index-circle.index-good {
    --ring-color: #f59e0b;
}

.fuel-index-circle.index-warning {
    --ring-color: #f97316;
}

.fuel-index-circle.index-critical {
    --ring-color: #ef4444;
}

.fuel-index-circle.index-na {
    --ring-color: #98a2b3;
}

/* N/A (no data for the site this period) must not look like a filled gauge with a real reading -
   the colored value arc is hidden entirely, leaving only .fuel-index-ring-track's own thin grey
   outline visible (same track every card already has underneath its value arc), rather than a full
   grey arc that reads as "a value happens to be grey". Layout/size stay identical to every other
   card - only this one stroke is suppressed. */
.fuel-index-circle.index-na .fuel-index-ring-value {
    stroke: transparent;
}

.fuel-index-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* SVG strokes start at 3 o'clock and sweep clockwise by default;
       rotating -90deg moves that start point to 12 o'clock, matching the
       old conic-gradient's 0deg reference so the arc still opens the same
       gap at top-right. */
    transform: rotate(-90deg);
}

.fuel-index-ring-track {
    fill: none;
    stroke: #e6e8ec;
    stroke-width: 12;
}

.fuel-index-ring-value {
    fill: none;
    stroke: var(--ring-color);
    stroke-width: 12;
    stroke-linecap: round;
    /* r=44 circle: circumference = 2*pi*44 = 276.46. The ring fills 295 of
       360 degrees (295/360 = 226.55 of that length), leaving 49.91 as the
       gap that shows the gray track underneath. */
    stroke-dasharray: 226.55 49.91;
}

.fuel-index-value {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #1d2939;
}

.fuel-index-unit {
    position: relative;
    z-index: 1;
    margin-top: 3px;
    font-size: 10px;
    color: #98a2b3;
}

.site-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.site-metric {
    display: flex;
    flex-direction: column;
}

.site-metric:last-child {
    text-align: right;
}

.metric-label {
    font-size: 12px;
    color: #98a2b3;
}

.metric-value {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
}

.saving-positive {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}

.saving-negative {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
}

/* SINGLE-SITE DETAIL - shown instead of the carousel above when the page's
   Site filter narrows Sites down to exactly one (see SitePerformanceCard's
   @if). Three columns: identity (name/status) | the same ring markup as the
   carousel card, just scaled up via the size overrides below | a metrics
   column that grows to fill the remaining width instead of the carousel's
   fixed 2-up grid, so one result still reads as a deliberate, full-width
   summary rather than a small card adrift in empty space. */
.site-performance-empty {
    padding: 32px 24px;
    text-align: center;
    color: #98a2b3;
    font-size: 13px;
}

.site-performance-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 8px 24px 24px;
}

.site-detail-identity {
    flex: 0 0 auto;
    min-width: 140px;
}

.site-detail-identity .site-name {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.site-detail-identity .site-status {
    margin-top: 6px;
}

.site-detail-identity .site-status .mud-typography {
    font-size: 14px !important;
}

/* Same .fuel-index-circle/.fuel-index-ring/etc rules from the carousel card
   apply here unchanged - only the overall size and label scale up, so the
   ring's radius/stroke-dasharray geometry (tuned for a 100x100 viewBox)
   still lines up correctly at the larger rendered size. */
.site-performance-detail .fuel-index-circle {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
}

.site-performance-detail .fuel-index-value {
    font-size: 26px;
}

.site-performance-detail .fuel-index-unit {
    font-size: 13px;
}

.site-detail-metrics {
    /* Fixed basis, not 1 1 auto - this used to grow to fill whatever space
       was left in the flex row, which dragged the whole identity/ring/
       metrics group over to the left instead of letting
       .site-performance-detail's justify-content: center actually center
       it as one block. */
    flex: 0 0 280px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.site-detail-metric {
    display: flex;
    flex-direction: column;
}

.site-detail-metric .metric-label {
    font-size: 13px;
}

.site-detail-metric-value {
    font-size: 20px !important;
    margin-top: 4px !important;
}

.site-prev-button,
.site-next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid #e6e8ec;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    z-index: 5;
}

.site-prev-button {
    left: 0;
}

.site-next-button {
    right: 0;
}

/* Fuel cost Trend */

.fuel-cost-trend-panel {
    min-height: 300px;
    padding: 16px !important;
}

.fuel-trend-chart {
    position: relative;
    width: 100%;
    height: 300px;
    min-width: 0;
    overflow: hidden;
}

/* "IDR Billion" as a plain HTML overlay instead of ApexCharts' own Yaxis
   title: ApexCharts reserves a full column of width for that title even
   once it's been offset out of the way visually (Rotate=0 + OffsetY doesn't
   shrink the reserved layout space), which was the real cause of the wide
   empty gutter to the plot's left - not the grid padding. Positioning it as
   a free-floating label lets the axis reclaim that width, widening the
   chart, with no layout cost of its own. */
.chart-axis-title {
    position: absolute;
    top: 0;
    left: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #98a2b3;
    pointer-events: none;
    z-index: 1;
}

.fuel-trend-chart .apexcharts-canvas,
.fuel-trend-chart svg {
    width: 100% !important;
}

.fuel-trend-chart .apexcharts-svg {
    overflow: visible;
}

/* The "Actual Trend" line is the 3rd series - it has no legend entry of its
   own, it just follows the Actual bar's visibility (see OnLegendClicked in
   FuelCostTrend.razor). */
.fuel-trend-chart .apexcharts-legend-series:nth-child(3) {
    display: none !important;
}

.fuel-trend-loading {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fuel-trend-period-select .mud-input-slot {
    text-align: center;
    padding-top: 11px !important;
    padding-bottom: 10px !important;
    font-size: 0.875rem;
}

.fuel-trend-period-select .mud-input-outlined-border {
    border-radius: 15px !important;
}

/* Header is a 3-column grid (title | select | spacer) so the Monthly/Weekly
   select sits truly centered in the panel regardless of the title's width. */

.fuel-trend-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.fuel-trend-header-spacer {
    justify-self: end;
}

/* Fuel Cost Waterfall */

.fuel-waterfall-panel {
    /* height:100% (on top of min-height) so this panel matches whatever
       height its row-mate Fuel Performance Map panel ends up needing,
       instead of each panel sizing to its own content and landing at a
       slightly different height side by side. */
    height: 100%;
    min-height: 500px;
    padding: 12px !important;
    overflow: hidden;
}

.waterfall-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.waterfall-header .mud-typography {
    line-height: 1.2;
}

.waterfall-chart {
    position: relative;
    width: 100%;
    height: 300px;
    min-width: 0;
    overflow: hidden;
    margin-top: 0;
}

.waterfall-chart .apexcharts-canvas,
.waterfall-chart svg {
    width: 100% !important;
}

.waterfall-chart .apexcharts-svg {
    overflow: visible;
}


/* SUMMARY */

.waterfall-summary {
    margin-top: 2px !important;
}

.waterfall-summary .mud-grid-item {
    padding: 4px !important;
}

.summary-box {
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: center;
}

.summary-box .mud-typography {
    line-height: 1.5;
}

.summary-box .mud-typography:first-child {
    font-size: 10px !important;
    color: #667085;
}

.summary-box .mud-typography:nth-child(2) {
    font-size: 12px !important;
}

.summary-box .mud-typography:nth-child(3) {
    font-size: 12px !important;
}


/* TOTAL VARIANCE */

.summary-box.success {
    background: #eaf8f0 !important;
}

.summary-box.success .mud-typography:nth-child(2),
.summary-box.success .mud-typography:nth-child(3) {
    color: #16a34a !important;
}


/* BIGGEST INCREASE */

.summary-box.error {
    background: #fdecec !important;
}

.summary-box.error .mud-typography:nth-child(2),
.summary-box.error .mud-typography:nth-child(3) {
    color: #ef4444 !important;
}

/* =========================================================
   Fuel Performance Map
   ========================================================= */

.fuel-performance-map-panel {
    /* height:100%, same reasoning as its row-mate Fuel Cost Waterfall panel
       above - keeps both filling their shared grid row height instead of
       drifting apart if either one's content grows past 500px. */
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    padding: 14px !important;
}

.map-header {
    margin-bottom: 2px;
}


.map-view-link {
    display: block;
    margin-top: 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Legend */

.map-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #667085;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

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

.legend-dot.excellent {
    background: #16a34a;
}

.legend-dot.good {
    background: #f59e0b;
}

.legend-dot.warning {
    background: #f97316;
}

.legend-dot.critical {
    background: #ef4444;
}

/* Map */

.fuel-map-container {
    position: relative;
    width: 100%;
    height: auto !important;
    overflow: hidden;
    border-radius: 8px;
    background: #eaf0f6;
}

.fuel-map {
    position: relative;
    width: 100%;
    height: 400px !important;
    min-height: 400px;
}

.fuel-map .maplibregl-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fuel-map .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Custom controls */

.map-controls {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.map-controls button {
    width: 25px;
    height: 25px;
    padding: 0;

    border: 1px solid #e1e5ea;
    border-radius: 5px;

    background: #fff;
    color: #475467;

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

    cursor: pointer;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.map-controls button:hover {
    background: #f8fafc;
}

/* =========================================
   SITE MARKER
   ========================================= */

/* MapLibre positions each marker with its own CSS transform (translate to
   its lng/lat's screen position), meant to apply on top of the element
   sitting at (0,0) via position:absolute - that's normally guaranteed by
   maplibre-gl's own stylesheet, which this project never loads. Left as
   position:relative, the wrapper stayed in normal document flow, so each
   marker stacked ~18px below the previous one (its own height) and THEN got
   the transform applied on top of that - a fixed, zoom-independent pixel
   error stacked on the correct map-relative one, which is what made the
   dots appear to drift out of place as the map zoomed. absolute + top/left
   0 removes it from flow so only the transform (the true site position)
   determines where it sits - fixed to the map, resizing only via the dot's
   own hover scale below.  */
.fuel-site-marker-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.fuel-site-marker-dot {
    width: 16px;
    height: 16px;

    border-radius: 50%;

    border: 3px solid #ffffff;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3);

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

.fuel-site-marker-wrapper:hover
.fuel-site-marker-dot {
    transform: scale(1.25);

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.35);
}


/* =========================================
   SITE LABEL
   ========================================= */

.fuel-site-label {
    position: absolute;

    left: 22px;
    top: -12px;

    min-width: 105px;

    padding: 7px 9px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15);

    font-size: 10px;

    line-height: 1.4;

    white-space: nowrap;

    z-index: 10;
}

.fuel-site-name {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2px;
}

.fuel-site-index {
    color: #64748b;
}

.fuel-site-cost {
    color: #64748b;
}

.fuel-site-produksi {
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .dashboard-header > .mud-stack {
        flex-wrap: wrap;
    }

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

@media (max-width: 500px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}
/* EXECUTIVE OVERVIEW - loading skeleton */

.eo-skeleton-block {
    border-radius: 14px !important;
    transform: none !important;
}

.eo-skeleton-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 768px) {
    .eo-skeleton-row {
        grid-template-columns: 1fr;
    }
}

/* .eo-stage is the positioning context for the skeleton overlay below. The real content stays in
   normal flow the whole time (it defines the stage's height, so the page never jumps when the data
   lands); the skeleton is an absolutely-positioned overlay on top of it. */
.eo-stage {
    position: relative;
}

/* Mounted and doing real work (charts rendering, the map fetching its GeoJSON) the whole time, just
   not visible or interactive yet. Kept in normal flow on purpose (no position:absolute) so it keeps
   its real height - which the skeleton overlay then matches exactly instead of guessing panel heights
   and leaving a strip of empty page under a too-short skeleton. visibility:hidden rather than
   display:none specifically - MapLibre and ApexCharts both measure their container's size on init, and
   a display:none container measures as 0x0. */
.eo-real-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Visible and faded/slid in on the frame it replaces the skeleton, rather than snapping in instantly. */
.eo-real-visible {
    visibility: visible;
    animation: eo-fade-in 260ms ease both;
}

/* Fills the stage exactly (inset:0 = the real content's own height), so no white strip is ever left
   uncovered. Column of blocks with the panel rows given the leftover height (flex:1) so the skeleton
   always ends where the content does. */
.eo-skeleton-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eo-skeleton-overlay .kpi-grid {
    flex: 0 0 auto;
}

.eo-skeleton-overlay .eo-skeleton-row {
    flex: 1 1 0;
    min-height: 0;
}

@keyframes eo-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* SITE PERFORMANCE - loading skeleton. Same stage / real / overlay pattern as
   Executive Overview above (the real content defines the height, the skeleton
   fills it exactly, and both stay mounted so the ApexCharts are not
   re-initialised on every filter change); it reuses .eo-skeleton-block's own
   look and .eo-fade-in so both pages' loading reads identically. */

.sp-skeleton-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 768px) {
    .sp-skeleton-row {
        grid-template-columns: 1fr;
    }
}

.sp-stage {
    position: relative;
}

.sp-real-hidden {
    visibility: hidden;
    pointer-events: none;
}

.sp-real-visible {
    visibility: visible;
    animation: eo-fade-in 260ms ease both;
}

.sp-skeleton-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-skeleton-overlay .kpi-grid {
    flex: 0 0 auto;
}

.sp-skeleton-overlay .sp-skeleton-row {
    flex: 1 1 0;
    min-height: 0;
}

/* Date range picker - period-aware quick presets in the footer */

.date-preset-row {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: 0 4px;
}

.date-preset-btn.mud-button-root {
    text-transform: none;
    font-size: 0.8125rem;
    color: #475569;
    padding: 4px 10px;
    min-width: 0;
}

.date-preset-btn.mud-button-root:hover {
    background: #f2f5fa;
    color: #2563eb;
}