/* =========================================================
   ASSETS MONITOR
   ========================================================= */

.assets-panel {
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}


/* MudGrid's row is `display:flex` with the default `align-items: stretch`,
   so the two MudItem columns are always forced to the SAME height - whichever
   column's own stacked content is naturally taller. Left to itself, the
   SHORTER column's MudItem just gets taller with no way for its last card to
   know about the extra space, leaving a dead gap below that card instead of
   its border lining up with the taller column's bottom edge. Growing each
   column's *last* card into that leftover space keeps both columns' bottom
   borders level regardless of which side ends up taller (left: AssetList
   showing every row un-paginated; right: Selected Asset's own KPI grid
   varying with whichever asset is picked). */
.assets-col {
    display: flex;
    flex-direction: column;
}

.assets-col-left > .activity-breakdown-panel,
.assets-col-right > .fuel-index-trend-panel {
    flex: 1 1 auto;
}


/* Content grid: mirrors the 5-column KPI grid above it (same columns + 12px gap), so the left
   column's right edge lines up exactly with the right edge of the 2nd KPI card ("Total Fuel Cost
   (YTD)"). Each column is its own flex stack and is NOT stretched to the other's height, so every
   card keeps its natural content height (Fuel Tank included). */
.assets-content-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch; /* both columns share the left column's height */
    margin-top: 8px;
}

.assets-content-grid > .assets-col-left { grid-column: span 2; }
.assets-content-grid > .assets-col-right { grid-column: span 3; }

.assets-content-grid .assets-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Right column (top to bottom: Selected Asset, Fuel Tank, Fuel Index Trend): Selected Asset is
   sized to its own content (no spare height under the View Asset Detail button), Fuel Tank keeps a
   fixed height (a little taller than its content-sized default), then Fuel Index Trend takes
   whatever is left. */
.assets-content-grid .assets-col-right {
    display: grid;
    grid-template-rows: auto 360px minmax(500px, 1fr);
    gap: 12px;
}

.assets-content-grid .selected-asset-panel {
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* The info/KPI grid takes all the height under the header, so its columns (and the KPI tiles)
   stretch to the card's full height instead of stopping at their own content. */
.assets-content-grid .selected-asset-panel > .mud-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
}

/* Cards stack with the column gap - drop the stacked-layout margins they used to carry. */
.assets-content-grid .fuel-tank-panel,
.assets-content-grid .activity-breakdown-panel,
.assets-content-grid .selected-asset-panel,
.assets-content-grid .fuel-index-trend-panel {
    margin-top: 0;
}

@media (max-width: 1199.98px) {
    .assets-content-grid {
        grid-template-columns: 1fr;
    }

    .assets-content-grid > .assets-col-left,
    .assets-content-grid > .assets-col-right {
        grid-column: auto;
    }

    /* Stack naturally again - the fixed 360px rows only make sense in the side-by-side layout. */
    .assets-content-grid .assets-col-right {
        display: flex;
        flex-direction: column;
        grid-template-rows: none;
    }
}


/* =========================================================
   ASSET LIST
   ========================================================= */

.asset-list-panel {
    min-height: 350px;
}


/* View tabs (By Asset / By Site / By Asset Type) */

.asset-list-tabs {
    display: flex;
    gap: 20px;

    border-bottom: 1px solid #e4e7ec;
}

.asset-list-tab {
    position: relative;

    padding: 0 0 10px;

    color: #98a2b3;

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

    cursor: pointer;

    transition: color 0.15s ease;
}

.asset-list-tab:hover {
    color: #475467;
}

.asset-list-tab--active {
    color: #2563eb;
}

.asset-list-tab--active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;
    border-radius: 2px 2px 0 0;

    background: #2563eb;
}

.asset-table {
    width: 100%;
}

.asset-table .mud-table-head {
    background: #fafbfc;
}

.asset-table .mud-table-head .mud-table-cell {
    color: #475467;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 6px;
    white-space: nowrap;
}

.asset-table .mud-table-body .mud-table-cell {
    color: #344054;
    font-size: 11px;
    padding: 8px 6px;
    border-bottom: 1px solid #eef0f2;
}

.asset-table .mud-table-row:hover {
    background: #f8fafc;
}

.asset-table .mud-table-row.asset-row--selected {
    background: #eff4ff;
}


/* Group headers (By Site / By Asset Type) */

.asset-table .asset-group-header {
    background: #fafbfc !important;

    color: #475467;

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

    white-space: nowrap;
}

.asset-group-count {
    margin-left: 4px;

    color: #98a2b3;
    font-weight: 500;
}


/* Row arrow */

.asset-row-arrow.mud-icon-button {
    color: #98a2b3;
}

.asset-table .mud-table-row:hover .asset-row-arrow.mud-icon-button {
    color: #475467;
}

.asset-row-arrow--active.mud-icon-button {
    color: #2563eb !important;
}


/* Asset ID */

.asset-table .mud-table-cell:first-child {
    min-width: 125px;
}

.asset-id-cell {
    min-width: 180px;
}

.asset-id-cell .mud-typography {
    display: block;
    line-height: 1.3;
}

.asset-id-cell .asset-model {
    color: #667085;
    margin-top: 2px;
}


/* Status */

.asset-table .mud-chip {
    height: 20px;
    min-height: 20px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
}

.asset-table .mud-chip-filled.mud-chip-color-success {
    background: #ecfdf3;
    color: #039855;
}

.asset-table .mud-chip-filled.mud-chip-color-error {
    background: #fef3f2;
    color: #d92d20;
}


/* Search & filter - the same control shell as the page header's own
   Site/Period filters: 12px radius, #bdbdbd border / #98a2b3 on hover,
   and the height built the *same way* the header builds it - padding
   only, no explicit height.

   The element MudBlazor renders here (.mud-input-slot.mud-input-root,
   the actual text/value box) is one of the few things on this page still
   using box-sizing:content-box (see MudBlazor.min.css) instead of the
   border-box every other element on this page resets to. An explicit
   `height` on a content-box element is the box's *content* height with
   the padding added on top of it, not included in it - setting
   height:40px here stacked on top of this rule's own padding and made
   the box render taller than 40px, not pin it to 40px. Padding alone
   (exactly the header's own mechanism) avoids that trap entirely:
   content-box height ends up as padding + line-height, same as it does
   in the header, so this renders at the same ~40px the header does. */

.assets-panel .mud-input-control {
    margin-top: 0;
}

.assets-panel .mud-input-slot {
    padding-top: 11px !important;
    padding-bottom: 10px !important;
}

.assets-panel .mud-input-outlined-border {
    border-color: #bdbdbd;
    border-radius: 12px !important;
}

.assets-panel .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #98a2b3;
}

.asset-filter-button.mud-button-root {
    height: 40px !important;

    color: #475467 !important;

    border: 1px solid #bdbdbd !important;
    border-radius: 12px !important;

    font-weight: 600;

    text-transform: none;
    white-space: nowrap;
}

.asset-filter-button.mud-button-root:hover {
    color: #2563eb !important;
    border-color: #98a2b3 !important;
}

/* The Export button keeps the filter controls' shell (40px tall, 12px radius, #bdbdbd border,
   #475467 gray text) but sizes itself to its own label instead of matching More Filters' width. */
.asset-export-button.mud-button-root {
    min-width: auto;
    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* Pagination: each page/arrow is a small boxed square (same 8px radius family as the rest of the
   card's controls) using the dashboard blue instead of MudBlazor's default purple (--mud-palette-
   primary #594AE2). The selected page is a filled blue box with white text. */

/* Footer row: the Fuel Index formula note on the left, pagination on the right - nowrap so the
   arrows never wrap onto a second line, with the note taking the leftover space. */
.asset-list-footer {
    gap: 12px;
}

.asset-list-note {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
}

.assets-panel .mud-pagination {
    margin-top: 2px;
    gap: 2px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.assets-panel .mud-pagination-item {
    margin: 0;
    flex: 0 0 auto;
}

.assets-panel .mud-pagination-item .mud-button-root {
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;

    border-radius: 8px !important;
    border: 1px solid #d0d5dd !important;
    background: #ffffff !important;

    color: #475467 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.assets-panel .mud-pagination-item .mud-button-root:hover {
    border-color: #2563eb !important;
    background: #f5f8ff !important;
    color: #2563eb !important;
}

.assets-panel .mud-pagination-item-selected .mud-button-root,
.assets-panel .mud-pagination-item .mud-button-outlined-primary {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

/* The "…" spacer has no button - keep it muted and aligned with the boxes. */
.assets-panel .mud-pagination-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #98a2b3;
    font-size: 12px;
}


/* =========================================================
   ACTIVITY BREAKDOWN
   ========================================================= */

.activity-breakdown-panel {
    min-height: 250px;
    margin-top: 12px;

    display: flex;
    flex-direction: column;
}

/* The card is stretched to the right column's height, so the donut + table take all the room under
   the title and sit centred in it instead of hugging the top with a blank band underneath. */
.activity-breakdown-panel > .mud-grid {
    flex: 1 1 auto;
    align-content: center;
}

/* Left column centers the donut both horizontally and vertically inside its
   half of the card, so it lines up with the breakdown table next to it. */
.activity-chart-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.activity-chart-container {
    position: relative;

    width: 150px;
    height: 150px;

    flex: 0 0 150px;
}

.activity-chart-container .apexcharts-canvas {
    height: 150px !important;
}

.activity-chart-center {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;
    pointer-events: none;
}


/* Activity list */

.activity-breakdown-list {
    width: 100%;
}

.activity-header,
.activity-item,
.activity-total {
    display: grid;
    grid-template-columns:
        minmax(90px, 1.3fr)
        minmax(80px, 1fr)
        minmax(55px, 0.7fr)
        minmax(55px, 0.7fr);

    align-items: center;
    column-gap: 10px;
}

.activity-header {
    padding-bottom: 7px;

    border-bottom: 1px solid #e4e7ec;

    color: #667085;
}

.activity-header .mud-typography {
    font-size: 12px;
    font-weight: 600;
}

.activity-item {
    min-height: 32px;

    border-bottom: 1px solid #f0f2f4;
}

.activity-item .mud-typography,
.activity-total .mud-typography {
    font-size: 12px;
}

.activity-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.activity-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;
}

.activity-total {
    padding-top: 8px;
}

.activity-total .mud-typography {
    color: #344054;
    font-weight: 700 !important;
}


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

@media (max-width: 960px) {

    .activity-chart-container {
        margin-bottom: 10px;
    }

}

@media (max-width: 600px) {

    .assets-panel {
        border-radius: 8px;
    }

    .activity-header {
        display: none;
    }

    .activity-item,
    .activity-total {
        grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr;
    }

}

/* =========================================================
   SELECTED ASSET
   ========================================================= */

.selected-asset-panel {
    width: 100%;
    min-height: 240px;
    margin-top: 12px;
}


/* Empty state - shown instead of the asset info/KPI grid until an asset is
   selected in Asset List (see SelectedAsset.razor's Asset parameter). The
   card stays mounted at all times instead of appearing/disappearing, so the
   column layout doesn't jump when an asset is selected/deselected - same
   pattern as Fuel Index Trend's own empty state. */

.selected-asset-empty {
    width: 100%;
    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: #98a2b3;
}

.selected-asset-empty .mud-icon-root {
    font-size: 28px;
    color: #cbd5e1;
}


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

.selected-asset-panel > .mud-stack {
    min-height: 28px;
}

/* Same outlined-control shell as .asset-filter-button and the page
   header's own Site/Period filters - 40px tall, 12px radius, #bdbdbd
   border / #98a2b3 on hover - so "Refresh" and "View Asset Detail" read
   as the same kind of control as the rest of the page instead of
   MudBlazor's unstyled outlined-button default. */

.selected-asset-panel .mud-button-root {
    min-width: auto;
    height: 40px !important;

    color: #475467 !important;

    border: 1px solid #bdbdbd !important;
    border-radius: 12px !important;

    font-weight: 600;

    text-transform: none;
}

.selected-asset-panel .mud-button-root:hover {
    color: #2563eb !important;
    border-color: #98a2b3 !important;
}


/* =========================================================
   ASSET INFORMATION

   A plain flex column (top row: image + identity/details, then the button
   full-width below) - not the CSS grid with a row-spanning image this used
   to be. That grid only stayed correct as long as the image's fixed
   width/height were hand-kept in sync with the grid's own column/row
   tracks; they drifted out of sync (image sized up to 160px while the
   grid column stayed at 138px) and the image started overflowing into -
   visually covering - the text next to it. A flex row can't develop that
   bug: the image is a fixed-size item, the text column simply takes
   whatever width is left, full stop.
   ========================================================= */

.selected-asset-info {
    display: flex;
    flex-direction: column;
    gap: 14px;

    width: 100%;
    height: 100%;
}

.selected-asset-top {
    display: flex;
    gap: 14px;
    align-items: flex-start; /* placeholder top lines up with the asset ID line */
}

.asset-image-wrapper {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    /* Placeholder, not a photo: neutral fill, dashed outline, generic image glyph */
    background-color: #f2f4f7;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;

    color: #98a2b3;
}

.asset-image-wrapper .mud-icon-root {
    font-size: 40px;
    color: #cbd5e1;
}

.asset-image-placeholder-text {
    font-size: 11px;
    line-height: 1;
}

.asset-info-column {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.asset-main-info .mud-stack {
    gap: 4px !important;
}

.asset-main-info .mud-chip {
    height: 20px;
    min-height: 20px;
    padding: 0 7px;
    font-size: 11px;
}


/* Asset details - a real two-column grid (label | value), not a flex row
   per line, so every value starts at the same x regardless of how long
   its own label ("HM" vs "Serial No.") happens to be. */

.asset-details {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    row-gap: 8px;
    column-gap: 8px;

    min-width: 0;
}

.asset-details > div {
    /* Unwraps from the grid so its two MudText children become the actual
       grid items (label in column 1, value in column 2) instead of the
       wrapper div occupying a single cell. */
    display: contents;
}

.asset-details .mud-typography {
    font-size: 14px;
    line-height: 1.3;

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

.asset-details .mud-typography:first-child {
    color: #667085;
}

.asset-details .mud-typography:last-child {
    color: #344054;
}


/* View detail button - spacing above it comes from .selected-asset-info's
   own flex gap, not a margin here. Height/radius/color come from the
   shared .selected-asset-panel .mud-button-root rule above; only the
   full-bleed width is specific to this one. */

.selected-asset-info > .mud-button-root {
    width: 100%;
}


/* =========================================================
   KPI GRID

   Typography here deliberately reuses the *same* tokens as the global
   KpiCard (.kpi-value/.kpi-unit/.kpi-compare/.kpi-change - see
   global.css's "KPI CARDS" section) rather than inventing a parallel set,
   so a unit label or a "down is good" green reads identically whether
   it's in the dashboard's top KPI row or in one of these four small
   tiles - just resized to fit a 160px-tall card instead of a ~190px one.
   ========================================================= */

.selected-asset-kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    /* One row, as tall as the asset info block next to it (the .selected-asset-top row, from the
       asset ID down to the Operator line) and starting at the same top edge, so the tiles run
       alongside that block instead of down past the View Asset Detail button. */
    grid-template-rows:
        187px;
    align-content: start;

    gap: 10px;

    width: 100%;
    height: 100%;
}

.asset-kpi-card {
    min-width: 0;
    min-height: 0;

    padding: 14px 14px 12px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.asset-kpi-card .mud-typography {
    line-height: 1.25;
}


/* KPI title - a muted caption label, same weight/color as .kpi-compare
   below it rather than the big KPI row's bold dark title; at this size,
   with four of these side by side, a bold dark label competed with the
   value for attention instead of introducing it. */

.asset-kpi-title {
    min-height: 16px;

    color: #667085;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* KPI value - same weight/color as the global .kpi-value, just a smaller
   size to fit four per row. */

.asset-kpi-value {
    margin-top: 4px;

    color: #101828;

    font-size: 24px !important;
    font-weight: 700 !important;
}

.asset-kpi-card .kpi-unit {
    margin-left: 4px;
    font-size: 12px;
}


/* "vs Budget ..." - the shared .kpi-compare token, just tightened up for
   the smaller card (that class's own 8px margin-top is tuned for the
   190px-tall global card). */

.asset-kpi-card .kpi-compare {
    margin-top: 3px !important;
    font-size: 12px !important;
}


/* Change line (arrow + percent) - the shared .kpi-change token. */

.asset-kpi-card .kpi-change {
    margin-top: 8px !important;
    font-size: 12px !important;
}

.asset-kpi-card .kpi-change-percent {
    font-weight: 700;
}


/* =========================================================
   MINI TREND

   The "rising" KPIs (Fuel Index, Fuel Cost, Avg Fuel Rate) use the same
   MiniSparkline component as Site Performance's driver cards/activity
   rows (see MiniSparkline.razor + .mini-sparkline-line--positive in
   sitePerformance.css) instead of a one-off CSS clip-path shape, so the
   line itself - stroke width, rounded joins, the green - is identical
   wherever a sparkline appears on this app. Fuel Consumption uses the
   same real ApexChart dual-series (Actual vs Budget) sparkline-bar as the
   global KpiCard's own "Bars" TrendType (see SelectedAsset.razor's
   _consumptionBarOptions, mirroring KpiCard.razor's _miniBarOptions)
   instead of a CSS-only single-series bar standing in for it.
   ========================================================= */

.asset-kpi-sparkline {
    margin-top: auto;

    width: 100%;
    height: 40px;

    overflow: hidden;
}

.asset-kpi-barchart {
    margin-top: auto;

    width: 100%;
    height: 40px;

    overflow: hidden;
}

.asset-kpi-barchart .apexcharts-canvas,
.asset-kpi-barchart svg {
    width: 100% !important;
}


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

.selected-asset-panel .mud-grid {
    align-items: stretch;
}

.selected-asset-panel .mud-grid > .mud-grid-item {
    min-width: 0;
}


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

@media (max-width: 1100px) {

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

}

@media (max-width: 700px) {

    .selected-asset-panel > .mud-stack {
        flex-wrap: wrap;
    }

    .selected-asset-info {
        margin-bottom: 10px;
    }

    .selected-asset-kpi-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

}



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

   One card, like every other panel on this page - header row with both
   titles (tank | trend), then a 3-column content grid: tank visual |
   tank details | trend chart.
   ========================================================= */

.fuel-tank-panel {
    width: 100%;
    min-height: 230px;
    margin-top: 12px;
}


/* =========================================================
   CONTENT LAYOUT

   The details column is deliberately narrow (just enough for a value like
   "16,681 KL" without wrapping) so the tank and the chart - the two
   things actually worth looking at here - get the width instead.
   ========================================================= */

.fuel-tank-content,
.fuel-tank-header {
    display: grid;

    grid-template-columns:
        150px
        minmax(190px, 1fr)
        minmax(360px, 1.8fr);

    gap: 14px;

    align-items: stretch;

    width: 100%;
}

/* Header shares .fuel-tank-content's columns so the chart title lands exactly
   above the chart card: the tank title spans the tank + details columns. */
.fuel-tank-header {
    align-items: center;
}

.fuel-tank-title {
    grid-column: 1 / 3;
}

.fuel-tank-chart-title {
    grid-column: 3;
    min-width: 0;
    text-align: left;
}


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

   Same plain body + top-cap shape as Site Performance's own Tank
   Overview (.tank-body/.tank-level in sitePerformance.css) - a rounded
   box with a small cap ellipse and a solid-color fill, not a more
   elaborate illustration (ribbing/antenna/legs). Sized up from that
   card's compact carousel-tile scale to fill this wider column instead.
   ========================================================= */

.fuel-tank-visual {
    display: flex;
    flex-direction: column;

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

    min-width: 0;
}

.tank-body {
    position: relative;

    width: 86px;
    height: 128px;

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

    overflow: hidden;

    box-sizing: border-box;

    background: #f8fafc;

    border: 2px solid #cbd5e1;
    border-radius: 8px;
}

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

    position: absolute;

    top: -5px;
    left: 50%;

    width: 70px;
    height: 10px;

    transform: translateX(-50%);

    background: #f8fafc;

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

.tank-level {
    width: 100%;

    display: flex;
    flex-direction: column;

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

    color: #ffffff;
    font-weight: 700;

    background: #2563eb;

    transition: height 0.3s ease;
}

.tank-level span {
    font-size: 16px;
    line-height: 1.2;
}

.tank-level small {
    font-size: 10px;
    font-weight: 400;

    margin-top: 2px;
}

.tank-capacity {
    display: block;

    margin-top: 6px;

    font-size: 11px;

    text-align: center;
    white-space: nowrap;

    color: #667085;
}


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

.fuel-tank-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* The grid row is as tall as the chart card, so let the five cards share that
   height equally and line their top/bottom edges up with the chart card. */
.fuel-tank-details > .tank-detail-row,
.fuel-tank-details > .tank-updated {
    flex: 1 1 0;
}


/* Individual row */

.tank-detail-row {
    min-height: 40px;

    display: grid;

    grid-template-columns:
        18px
        minmax(70px, 1fr)
        auto
        auto;

    align-items: center;

    column-gap: 6px;

    padding: 5px 8px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}


/* Icons */

.tank-detail-row .mud-icon-root {
    font-size: 14px;
}

/* Fuel Level's icon reads as the row's own hero metric, not a status
   color like the other three - dark/neutral instead of blue, so it
   doesn't compete with Water Level's blue droplet right below it. */
.tank-detail-icon--dark.mud-icon-root {
    color: #1d2939;
}

.tank-detail-row .mud-typography {
    font-size: 13px;
    line-height: 1.2;
}

.tank-detail-row .mud-typography:nth-child(2) {
    color: #667085;
}

.tank-detail-row .mud-typography:nth-child(3) {
    color: #344054;
}

.tank-detail-row .dashboard-subtitle {
    font-size: 13px;
    white-space: nowrap;
}


/* =========================================================
   LAST UPDATED
   ========================================================= */

.tank-updated {
    min-height: 28px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 5px 8px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.tank-updated .mud-typography {
    font-size: 13px;
    line-height: 1.2;
}

.tank-updated .text-success {
    white-space: nowrap;
}


/* =========================================================
   FUEL LEVEL TREND CHART
   ========================================================= */

.fuel-tank-chart {
    min-width: 0;
    width: 100%;
    /* Card look shared with .tank-detail-row / .tank-updated. The padding plus
       the ApexChart Height (272) in FuelTankOverview.razor must fit inside, or
       overflow:hidden clips the x-axis labels. */
    height: 290px;
    padding: 8px 8px 0;
    box-sizing: border-box;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;

    overflow: hidden;
}

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


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

@media (max-width: 1100px) {

    .fuel-tank-content {
        grid-template-columns:
            120px
            1fr;
    }

    .fuel-tank-chart {
        grid-column: 1 / -1;
    }

    .fuel-tank-header {
        grid-template-columns: 1fr;
    }

    .fuel-tank-title,
    .fuel-tank-chart-title {
        grid-column: 1;
    }

}


@media (max-width: 700px) {

    .fuel-tank-content {
        grid-template-columns: 1fr;
    }

    .fuel-tank-visual {
        padding-bottom: 5px;
    }

    .fuel-tank-chart {
        grid-column: auto;
    }

}

/* =========================================================
   FUEL INDEX TREND
   ========================================================= */

.fuel-index-trend-panel {
    width: 100%;
    min-height: 250px;
    margin-top: 12px;

    display: flex;
    flex-direction: column;
}


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

.fuel-index-trend-panel > .mud-stack {
    min-height: 34px;
}

/* Monthly / Weekly / Daily select: MudSelect's root (.mud-select) is flex-grow:1, which stretched it
   across the whole header with the pill itself stuck on the left - fix it to its own width and push
   it to the header's right edge. */
.fuel-index-trend-panel .fuel-index-period {
    flex: 0 0 auto;
    margin-left: auto;
}


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

   Grows into whatever leftover space the panel picks up from
   .fuel-index-trend-panel's own flex:1 (see the comment at the top of this
   file), so a taller left column turns into a taller chart instead of a
   dead gap between the chart and the summary row below it.
   ========================================================= */

.fuel-index-chart {
    position: relative;

    width: 100%;
    flex: 1 1 150px;
    min-height: 150px;
    margin-top: 4px;
    overflow: hidden;
}

.fuel-index-chart .chart-axis-title {
    position: absolute;
    top: -2px;
    left: 4px;
    z-index: 1;
}

/* Empty state - shown instead of the chart until an asset is selected in
   Asset List (see FuelIndexTrend.razor's Asset parameter). */

.fuel-index-chart-empty {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: #98a2b3;
}

.fuel-index-chart-empty .mud-icon-root {
    font-size: 28px;
    color: #cbd5e1;
}


/* Chart canvas / svg - ApexCharts' own wrapper div only grows to fit the SVG
   it draws (auto height), it doesn't inherit the flex-resolved height of
   .fuel-index-chart on its own. Forcing every layer down to the SVG to
   100% height is what actually lets the chart fill the taller card instead
   of staying pinned to its last JS-computed pixel size with blank space
   around it. */

.fuel-index-chart .apexcharts-canvas {
    height: 100% !important;
}

/* Scoped to .apexcharts-canvas so the empty-state MudIcon (also an <svg>)
   keeps its own size instead of being stretched to the full container. */
.fuel-index-chart .apexcharts-canvas canvas,
.fuel-index-chart .apexcharts-canvas svg {
    max-width: 100%;
    height: 100% !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.fuel-index-summary {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    width: 100%;
    flex: 0 0 auto;
    margin-top: 10px;

    min-height: 84px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    overflow: hidden;

    background: #f5f6f8; /* light grey so the strip reads as its own band under the chart */
}


/* Individual summary */

.trend-summary-item {
    display: flex;

    flex-direction: column;

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

    gap: 6px;

    padding: 12px 10px;

    border-right: 1px solid #e4e7ec;

    text-align: center;
}

.trend-summary-item:last-child {
    border-right: none;
}


/* Summary labels */

.trend-summary-item .mud-typography:first-child {
    font-size: 12px;

    line-height: 1.2;

    color: #667085;
}


/* Summary values */

.trend-summary-item .mud-typography:last-child {
    font-size: 17px;

    line-height: 1.2;

    color: #344054;
}


/* Unit */

.summary-unit {
    font-size: 11px;
    font-weight: 400;
}


/* Green values */

.trend-summary-item .text-success {
    color: #16a34a !important;
}


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

@media (max-width: 900px) {

    .fuel-index-summary {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .trend-summary-item:nth-child(3) {
        border-right: none;
    }

}


@media (max-width: 600px) {

    .fuel-index-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .trend-summary-item {
        border-bottom: 1px solid #e4e7ec;
    }

    .fuel-index-chart {
        height: 170px;
    }

}