/* =========================================================
   SITE PERFORMANCE
   ========================================================= */

:root {
    --sp-primary: #2563eb;
    --sp-success: #16a34a;
    --sp-warning: #f59e0b;

    --sp-text-primary: #172033;
    --sp-text-secondary: #667085;
    --sp-text-muted: #98a2b3;

    --sp-border: #e5e7eb;
    --sp-border-light: #edf0f3;

    --sp-bg: #ffffff;
    --sp-bg-soft: #f8fafc;

    --sp-panel-radius: 12px;
    --sp-card-radius: 8px;

    --sp-panel-padding: 20px;
    --sp-gap: 16px;

    --sp-control-height: 38px;
}


/* =========================================================
   COMMON PANELS
   ========================================================= */

.site-driver-tree-panel,
.tank-overview-panel,
.site-summary-panel,
.fuel-consumption-trend-panel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    padding: var(--sp-panel-padding) !important;

    background: var(--sp-bg);

    border: 1px solid var(--sp-border);
    border-radius: var(--sp-panel-radius);

    box-shadow: none;
}


/* =========================================================
   COMMON TYPOGRAPHY
   ========================================================= */

.sp-panel-title {
    margin: 0;

    color: var(--sp-text-primary);

    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1.3;
}

.sp-panel-subtitle {
    color: var(--sp-text-secondary);
}

.sp-muted {
    color: var(--sp-text-muted);
}


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

.sp-panel-header {
    display: flex;
    /* flex-start, not center - .sp-panel-actions varies in height panel to
       panel (a lone "View All" link vs. a row of select/button controls),
       and centering against that let the title drift down by however much
       taller this panel's own actions happened to be, so two panels side
       by side (e.g. driver tree vs. Tank Overview) had titles that didn't
       line up. Anchoring both to the top keeps every panel's title at the
       same y regardless of what its actions row needs. */
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
    margin-bottom: 16px;
}

.sp-panel-heading {
    min-width: 0;
}

.sp-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   COMMON ACTION BUTTON
   ========================================================= */

.sp-action-button {
    min-width: auto;

    padding: 4px 0 !important;

    color: var(--sp-primary) !important;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.3;
    text-transform: none;
}

.sp-action-button:hover {
    color: #1d4ed8 !important;
}


/* =========================================================
   COMMON SELECT
   ========================================================= */

.sp-select {
    width: 110px;
}

.sp-select .mud-input-root {
    height: var(--sp-control-height);
    min-height: var(--sp-control-height);

    border-radius: 10px;
}

.sp-select .mud-input-slot {
    color: #475569;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   DRIVER TREE
   ========================================================= */

/* This panel sits next to Tank Overview in the same MudGrid row, which is
   taller (its own carousel + indicator dots take more vertical space) - a
   plain MudPaper doesn't stretch its children to fill that extra height on
   its own, so without this flex column the summary row/footnote just sat
   wherever their content ended, leaving a slab of empty white space below
   them instead of the panel's content actually filling the card. */
.site-driver-tree-panel {
    min-height: 100%;

    display: flex;
    flex-direction: column;
}

/* Single column, full width, while the activity breakdown is collapsed -
   there's no second column's worth of content to reserve space for yet.
   .driver-tree-layout--expanded (added once "Expand All" is pressed) is
   what switches this to the two-column layout with the activity list. */
.driver-tree-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: var(--sp-gap);

    align-items: start;

    flex: 1 1 auto;
}

.driver-tree-layout--expanded {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.driver-tree-main {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
}

/* Same outer shell as .driver-download-button next to it (thin grey
   border, same radius/height) - MudBlazor's own Variant.Outlined draws a
   much heavier, near-black border by default, which read as a completely
   different, heavier-weight button sitting right next to the download
   icon's light one. !important overrides MudBlazor's own inline-specificity
   border color. */
.driver-expand-button {
    height: var(--sp-control-height);

    color: var(--sp-text-secondary) !important;

    border: 1px solid var(--sp-border) !important;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;

    text-transform: none;
}

.driver-expand-button:hover {
    color: var(--sp-primary) !important;
    border-color: #c7d2e0 !important;
}

.driver-download-button {
    width: var(--sp-control-height);
    height: var(--sp-control-height);

    color: var(--sp-text-secondary);

    border: 1px solid var(--sp-border);
    border-radius: 10px;
}

.driver-download-button:hover {
    color: var(--sp-primary);
    border-color: #c7d2e0;
}


/* Flexbox, not CSS grid - the trailing chevron after the last card only
   renders once expanded (see FuelConsumptionDriverTree's isLast check), so
   the column count isn't fixed. A grid-template sized for a fixed card+
   chevron pair count left a stray empty track whenever that last chevron
   was absent; flex items simply take up only the space elements that
   actually exist need, with each card given equal room via flex-basis. */
.driver-tree-grid {
    display: flex;
    align-items: center;

    flex-wrap: wrap;
}



.driver-card {
    position: relative;

    display: flex;
    flex-direction: column;

    /* Equal-width flex items, not a fixed grid column - see the comment on
       .driver-tree-grid for why. */
    flex: 1 1 0;
    min-width: 0;

    box-sizing: border-box;

    padding: 12px;

    background: var(--sp-bg);

    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
}

/* Chevron connector between each driver card and the next, and (for the
   last card, once expanded) on into the activity column - reads as one
   flowing chain rather than unrelated tiles. */
.driver-chevron {
    flex: 0 0 auto;

    color: var(--sp-text-muted);
}


.driver-card-icon {
    width: 28px;
    height: 28px;

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

    color: var(--sp-primary);

    background: #eef2ff;
    border-radius: 8px;
}


.driver-title {
    display: block;

    min-height: 32px;
    margin-top: 8px;

    color: var(--sp-text-primary);
    font-weight: 600;
}


.driver-card-figures {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 2px;
}

.driver-percentage {
    color: var(--sp-text-secondary);

    font-size: 12px;
    font-weight: 600;
}


.driver-sparkline {
    display: block;

    width: 100%;
    height: 20px;

    margin-top: auto;
    padding-top: 6px;
}


.driver-tree-footnote {
    display: block;

    margin-top: 10px;

    color: var(--sp-text-muted);
}


/* margin-top: auto - not just spacing off the cards above it, but what
   actually pushes this + the footnote below it down to the bottom of the
   panel. See the comment on .site-driver-tree-panel for why the panel has
   extra height to fill in the first place. */
.driver-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: auto;
    padding: 14px 10px 0;

    border-top: 1px solid var(--sp-border-light);
}

.driver-summary-item {
    padding: 0 10px;

    border-left: 1px solid var(--sp-border-light);
}

.driver-summary-item:first-child {
    padding-left: 0;
    border-left: none;
}

.trend-warning {
    color: var(--sp-warning);
}


.activity-breakdown {
    display: flex;
    flex-direction: column;
}

/* Expanded: the equipment-group list must NOT make the panel taller. The column is as tall as the driver
   cards + summary beside it (grid row stretch), and the list is taken out of the flow (absolute), so it adds
   no height of its own and scrolls inside that box instead. */
.driver-tree-layout--expanded {
    align-items: stretch;
}

.driver-tree-layout--expanded > .activity-breakdown {
    position: relative;

    min-height: 0;
}

.activity-breakdown-scroll {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    padding-right: 4px;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
}


/* Flat list, not cards - a thin bottom rule between rows instead of each
   one boxed. */
.activity-row {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 4px;

    box-sizing: border-box;

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

.activity-row:last-child {
    border-bottom: none;
}

.activity-row-icon {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

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

    color: var(--sp-primary);

    background: #eef2ff;
    border-radius: 8px;
}

.activity-row-body {
    /* A real floor, not 0 - without one, flexbox happily squeezes this
       down toward nothing before it touches the sparkline/percentage/
       chevron's own flex-shrink:0, and the row's name+figures end up
       rendering in a sliver a few pixels wide. */
    min-width: 64px;
    flex: 1 1 auto;
}

.activity-row-body .mud-typography {
    display: block;
    line-height: 1.3;
}

/* ML and IDR each get their own line (not "ML - IDR" run together) - kept
   from wrapping mid-word if the column gets tight, same as before. */
.activity-row-figures {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-sparkline {
    width: 56px;
    height: 20px;

    flex-shrink: 0;

    /* Clip to its own box - .mini-sparkline defaults to overflow:visible so
       the stroke's rounded caps don't get clipped mid-line, but on this
       tightly-packed a sparkline a sharp final segment (see "Others") can
       read as a stray tail poking below the row instead. */
    overflow: hidden;
}

.activity-percentage {
    flex-shrink: 0;

    color: var(--sp-text-primary);

    font-size: 13px;
    font-weight: 700;
}

.activity-row-chevron {
    flex-shrink: 0;

    color: var(--sp-text-muted);
}


/* =========================================================
   MINI SPARKLINE (shared - driver cards + activity rows)
   ========================================================= */

.mini-sparkline {
    overflow: visible;
}

.mini-sparkline-line--positive,
.mini-sparkline-line--negative {
    fill: none;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-sparkline-line--positive {
    stroke: var(--sp-success);
}

.mini-sparkline-line--negative {
    stroke: #f43f5e;
}


/* =========================================================
   TANK OVERVIEW
   ========================================================= */

.tank-overview-panel {
    position: relative;

    overflow: hidden;
}


/* =========================================================
   TANK CAROUSEL
   ========================================================= */

.tank-carousel {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.tank-track {
    display: flex;

    width: 100%;

    transition: transform 0.35s ease;
}


.tank-card-wrapper {
    flex: 0 0 33.3333%;

    min-width: 0;

    padding: 0 5px;

    box-sizing: border-box;
}

/* A single filtered-down tank spans the full row as a wide detail card -
   visual on the left, details filling the rest as a 2-column grid - instead
   of sitting pinned to the carousel's usual 33% slot width with two-thirds
   of the panel left empty. Same idea as Site Performance Summary's own
   single-site stat grid. */
.tank-carousel--single .tank-card-wrapper {
    flex-basis: 100%;

    padding: 0;
}

.tank-carousel--single .tank-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 32px;
}

.tank-carousel--single .tank-name {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.tank-carousel--single .tank-visual {
    height: 170px;
}

.tank-carousel--single .tank-body {
    width: 96px;
    height: 145px;
}

.tank-carousel--single .tank-capacity {
    display: none;
}

.tank-carousel--single .tank-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 0;
}

.tank-carousel--single .tank-detail-item.last-updated {
    grid-column: 1 / -1;
}


.tank-card {
    height: 100%;

    padding: 10px 8px;

    box-sizing: border-box;

    background: var(--sp-bg);

    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
}


/* =========================================================
   TANK NAME
   ========================================================= */

.tank-name {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-bottom: 8px;

    color: var(--sp-text-primary);

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   TANK VISUAL
   ========================================================= */

.tank-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 125px;
}


.tank-body {
    position: relative;

    width: 70px;
    height: 105px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    box-sizing: border-box;

    background: var(--sp-bg-soft);

    border: 2px solid #cbd5e1;
    border-radius: var(--sp-card-radius);
}


.tank-body::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 58px;
    height: 10px;

    transform: translateX(-50%);

    background: var(--sp-bg-soft);

    border: 2px solid #cbd5e1;
    border-radius: 50%;
}


.tank-level {
    position: relative;

    width: 100%;

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

    color: #ffffff;

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

    background: var(--sp-primary);

    transition: height 0.3s ease;
}

/* Once the fill is too short to hold the label at its own vertical center
   without clipping, the label floats up and sits just above the liquid's
   surface instead - still inside .tank-body's own bounds (its overflow:
   hidden clips anything further out), just no longer centered in the sliver
   of fill height available. Dark text here instead of white: this now
   lands on the tank body's own light background, not the blue fill. */
.tank-level-label--outside {
    position: absolute;
    bottom: 100%;

    margin-bottom: 2px;

    color: var(--sp-text-primary);
}


.tank-capacity {
    display: block;

    margin-top: 2px;

    text-align: center;

    color: var(--sp-text-secondary);
}


/* =========================================================
   TANK DETAILS
   ========================================================= */

.tank-details {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 8px;
}


.tank-detail-item {
    min-height: 39px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 5px 8px;

    box-sizing: border-box;

    background: var(--sp-bg);

    border: 1px solid var(--sp-border);
    border-radius: var(--sp-card-radius);
}

/* Fuel Level flags itself on sight once it's running low - orange in the
   20-39% band, red below 20% (see GetFuelLevelItemClass) - rather than
   requiring the reader to parse the percentage text to notice a tank is
   close to empty. */
.tank-detail-item--warning {
    background: #fff7ed;
    border-color: #fdba74;
}

.tank-detail-item--warning .tank-detail-icon {
    color: var(--sp-warning);
}

.tank-detail-item--warning .mud-typography-body2 {
    color: #c2410c;
}

.tank-detail-item--low {
    background: #fef2f2;
    border-color: #fca5a5;
}

.tank-detail-item--low .tank-detail-icon {
    color: #dc2626;
}

.tank-detail-item--low .mud-typography-body2 {
    color: #b91c1c;
}

/* The icon sits directly against the label text; whatever trailing value
   (percentage, the online dot) a row has gets pushed to the far right
   instead, via margin-left:auto on that trailing element - see the
   .tank-detail-item > .mud-typography:last-child / .online-dot rules
   below. */
.tank-detail-icon {
    flex-shrink: 0;

    color: var(--sp-text-muted);
}

.tank-detail-item > .mud-typography:last-child,
.tank-detail-item > .online-dot,
.tank-detail-item > .tank-relative-time {
    margin-left: auto;
}


.tank-detail-item .mud-typography {
    line-height: 1.15;
}


.tank-detail-item .mud-typography-caption {
    color: var(--sp-text-secondary);
}


.last-updated {
    position: relative;
}


.online-dot {
    width: 6px;
    height: 6px;

    display: inline-block;

    border-radius: 50%;

    background: var(--sp-success);
}

/* Grey once the tank hasn't reported in over an hour - see
   TankOverview.razor's IsRecentlyUpdated - so a quiet feed reads as
   "stale", not as still live. */
.online-dot.stale {
    background: var(--sp-text-muted);
}

/* Compact relative-time label ("12m", "3h") in Last Updated's trailing
   slot - only shown once stale (see TankOverview.razor's IsRecentlyUpdated
   branch); a recently-updated tank shows the plain online-dot there
   instead, same as the tank-name status dot. */
.tank-relative-time {
    flex-shrink: 0;

    color: var(--sp-text-muted);

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   TANK NAVIGATION BUTTON
   ========================================================= */

.tank-prev-button,
.tank-next-button {
    position: absolute;

    top: 20%;

    width: 32px;
    height: 32px;

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

    transform: translateY(-50%);

    background: var(--sp-bg);

    border: 1px solid var(--sp-border);
    border-radius: 50%;

    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);

    cursor: pointer;

    z-index: 5;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.tank-prev-button:hover,
.tank-next-button:hover {
    background: var(--sp-bg-soft);
    border-color: #d0d5dd;
}


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


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


/* =========================================================
   TANK CAROUSEL INDICATOR
   ========================================================= */

.tank-carousel-indicator {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 14px;
}


.tank-indicator {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d8dee8;

    transition: all 0.2s ease;
}


.tank-indicator.active {
    width: 20px;

    border-radius: 5px;

    background: var(--sp-primary);
}


/* =========================================================
   SITE SUMMARY TABLE - TRENDS & STATUS
   ========================================================= */

.trend-positive {
    color: var(--sp-success) !important;
}

.trend-negative {
    color: #dc2626 !important;
}

.site-summary-table .mud-chip.mud-chip-filled.mud-chip-color-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

.site-summary-table .mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

/* =========================================================
   SITE SUMMARY TOTAL
   ========================================================= */

.site-summary-total {
    display: grid;
    grid-template-columns: 44% 20% 15% 13% 8%;

    width: 100%;

    margin-top: 0;

    padding-top: 12px;
    padding-bottom: 8px;

    border-top: 1px solid #94a3b8;

    box-sizing: border-box;
}

.site-summary-total-label {
    padding-left: 16px;

    color: var(--sp-text-primary);

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

    display: flex;
    align-items: flex-start;
}

.site-summary-total-value {
    display: flex;
    flex-direction: column;

    gap: 2px;

    color: var(--sp-text-primary);

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

    line-height: 1.3;
}

.site-summary-total-value .mud-typography {
    margin: 0;
}

/* Filtered down to a single site: the multi-site table (header row + one
   data row + a lot of blank space) is replaced by a stat-grid detail view,
   same numbers sized up to actually fill the panel - same idea as Tank
   Overview's own single-tank card. */
.site-summary-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: 8px 4px 4px;
}

.site-summary-detail-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-summary-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.site-summary-detail-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-summary-detail-metric .metric-label {
    color: var(--sp-text-secondary);

    font-size: 12px;
}

.site-summary-detail-metric .metric-value {
    font-size: 20px;
}

/* =========================================================
   FUEL CONSUMPTION TREND
   ========================================================= */

.fuel-consumption-trend-panel {
    min-height: 520px;
}


.fuel-view-detail {
    color: var(--sp-primary);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;
}


.fuel-view-detail:hover {
    color: #1d4ed8;
}


.fuel-view-detail span {
    margin-left: 3px;

    font-size: 16px;
}


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

.fuel-consumption-legend {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-top: 6px;
    margin-bottom: 4px;

    color: var(--sp-text-secondary);

    font-size: 14px;
}


.fuel-legend-item {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* ACTUAL */

.fuel-legend-dot {
    width: 10px;
    height: 10px;

    display: inline-block;

    border-radius: 50%;
}


.fuel-legend-dot.actual {
    background: var(--sp-primary);
}


/* BUDGET / LAST YEAR */

.fuel-legend-line {
    width: 16px;
    height: 3px;

    display: inline-block;
}


.fuel-legend-line.budget {
    border-top: 3px dashed #94a3b8;
}


.fuel-legend-line.last-year {
    background: #7db7ff;

    border-radius: 2px;
}


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

.fuel-consumption-chart {
    width: 100%;

    margin-top: 0;
}


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

@media (max-width: 1200px) {

    .driver-tree-layout--expanded {
        grid-template-columns: 1fr;
    }

    /* One column: the list sits under the cards, so it needs a height of its own again. */
    .driver-tree-layout--expanded > .activity-breakdown {
        position: static;
    }

    .activity-breakdown-scroll {
        position: static;

        max-height: 320px;
    }

    /* Cards wrap to 2-per-row below this width, so a horizontal chevron
       between them (meant for a single straight line of 4) stops making
       sense - hidden here rather than repositioned per-breakpoint. */
    .driver-tree-grid {
        flex-wrap: wrap;
    }

    .driver-card {
        flex-basis: calc(50% - 8px);
    }

    .driver-chevron {
        display: none;
    }

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

}


@media (max-width: 768px) {

    .site-driver-tree-panel,
    .tank-overview-panel,
    .site-summary-panel,
    .fuel-consumption-trend-panel {
        padding: 16px !important;
    }

    .sp-panel-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .sp-panel-actions {
        width: 100%;
        justify-content: space-between;
    }

    .driver-card {
        flex-basis: 100%;
    }

    .driver-summary-grid {
        grid-template-columns: 1fr;
    }

}