/* Global styles */

.mud-test-page {
    min-height: 100vh;
    background: #f7f8fa;
}

/* Sticky under scroll: .main-wrapper (see theme.css) - not the window - is
   the element that actually scrolls this page, so `sticky` needs to anchor
   against it. .main-content sits between this header and .main-wrapper in
   the DOM and also carries its own `overflow-y: auto` (theme.css) - despite
   never actually scrolling itself (it grows to fit its content instead of
   being height-bound), that's still enough to make IT the sticky positioning
   containing block instead of .main-wrapper, which silently breaks sticky
   entirely. See the "no other scroll container" override on .main-content
   right below this rule. Pulled up/out by the parent MudContainer's own
   pa-4 padding (negative margin on three sides, matching padding put back)
   and re-widened to the container's full content box, so the sticky bar
   spans edge-to-edge and sits flush with no gap instead of stopping short
   at its own indented position. A solid background is required for a
   sticky element - the KPI cards / charts scrolling underneath would
   otherwise show through. */
.dashboard-header {
    min-height: 52px;
    position: sticky;
    top: 0;
    z-index: 20;
    /* -16px on three sides cancels the parent MudContainer's own pa-4
       padding so the sticky bar spans edge-to-edge instead of stopping
       short at its indented position; 24px kept on the bottom to match the
       mb-4 utility this replaced (see the markup comment). */
    margin: -16px -16px 24px;
    padding: 16px 16px 12px;
    background: #f7f8fa;
}

.dashboard-subtitle {
    color: #667085 !important;
}

.dashboard-panel {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #ffffff;
}

.fw-bold {
    font-weight: 600;
}


/* APP HEADER MENU (notification bell + user avatar) - replaces the old
   fixed top navbar, which is gone. Rendered inline in a page's own header
   row where that page has one (e.g. Executive Overview), or floating in
   the top-right corner otherwise - see MainLayout.razor/AppHeaderMenu.razor. */

.app-header-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-header-menu.floating {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 1050;
}

/* Bell and avatar are real MudBlazor components (MudIconButton / MudAvatar)
   rather than plain styled divs - MudMenu's activator wrapper collapses to
   a zero-size, unfocusable box (a `display:contents` quirk) around custom
   markup, which silently ate both mouse and keyboard clicks; real
   interactive MudBlazor components don't have that problem. */

.header-menu-badge-anchor,
.header-menu-avatar-focus-wrap {
    display: inline-flex;
}

.header-menu-bell.mud-icon-button {
    width: 38px;
    height: 38px;
    color: #667085;
    background: #ffffff;
    border: 1px solid #e6e8ec;
}

.header-menu-bell.mud-icon-button:hover {
    background: #f2f5fa;
    color: #2563eb;
}

.header-menu-avatar.mud-avatar {
    width: 38px;
    height: 38px;
    background: #edf1f7;
    border: 1px solid #dfe3ea;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.header-menu-avatar.mud-avatar:hover {
    background: #e2e8f2;
}

.header-divider {
    align-self: stretch;
    width: 0;
    border-left: 1px dashed #d0d5dd;
    margin: 0 4px;
}

.header-notification-list {
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
}

.header-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #f2f4f7;
}

.header-notification-item:hover {
    background: #f9fafb;
}

.header-notification-icon {
    margin-top: 2px;
    flex-shrink: 0;
}

.header-notification-body {
    min-width: 0;
    flex: 1;
}

.header-notification-title {
    font-weight: 600 !important;
    color: #1d2939;
}

.header-notification-desc {
    color: #667085 !important;
    display: block;
}

.header-notification-time {
    flex-shrink: 0;
    color: #98a2b3 !important;
    white-space: nowrap;
}

/* Shared look for both header dropdowns (notifications + user menu) - a
   softer, more rounded card than MudBlazor's default flat popover. */
.header-dropdown-popover {
    border-radius: 16px !important;
    border: 1px solid #e6e8ec;
    box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 4px 10px -4px rgba(16, 24, 40, 0.08) !important;
    overflow: hidden;
    margin-top: 8px !important;
}

.header-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 12px;
}

.header-dropdown-title {
    font-weight: 700 !important;
    color: #1d2939;
}

.header-dropdown-count {
    color: #2563eb !important;
    font-weight: 600 !important;
    background: #edf3ff;
    border-radius: 999px;
    padding: 2px 10px;
}

.header-notifications-popover .header-notification-list {
    max-width: 340px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.header-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-top: none;
    border-radius: 12px;
    margin: 2px 0;
    transition: background-color 0.15s ease;
}

.header-notification-item:hover {
    background: #f6f8fb;
}

.header-notification-icon-chip {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.header-notification-icon-chip--error {
    background: #fef1f1;
}

.header-notification-icon-chip--warning {
    background: #fef6e7;
}

.header-notification-icon-chip--info {
    background: #eaf2fe;
}

.header-notification-icon-chip--default {
    background: #f2f4f7;
}

/* USER MENU */

.header-user-popover {
    min-width: 240px;
}

.header-user-header {
    padding: 16px;
    gap: 12px;
    /* .header-dropdown-header (shared with the notifications popover) is
       space-between, which is right when there's a count badge to push to
       the far edge - but here it's just avatar + text, so space-between
       stretches them to opposite ends of the popover. Pull them back
       together. */
    justify-content: flex-start;
}

.header-user-header-avatar.mud-avatar {
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    flex-shrink: 0;
}

.header-user-header-text {
    min-width: 0;
}

.header-user-header-name {
    font-weight: 700 !important;
    color: #1d2939;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-header-role {
    color: #667085 !important;
    text-transform: capitalize;
}

.header-user-list {
    padding: 6px 8px !important;
}

.header-user-list .mud-list-item {
    border-radius: 10px;
    margin: 2px 0;
}

.header-user-list .mud-list-item:hover {
    background: #f2f5fa;
}

.header-user-logout-item.mud-list-item:hover {
    background: #fef1f1;
    color: #d92d20;
}

.header-user-logout-item.mud-list-item:hover .mud-icon-root {
    color: #d92d20;
}


/* FILTER */

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

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

/* Rounded-pill look for the Monthly/Site dropdowns - matches the bell/avatar
   buttons next to them instead of MudBlazor's default sharp 4px outline.
   MudBlazor's default outline is #bdbdbd; the date pill below is set to the
   exact same value so all three controls share one border colour. */
.period-select .mud-input-outlined-border,
.site-select .mud-input-outlined-border {
    border-radius: 12px !important;
}

.period-select .mud-input:hover .mud-input-outlined-border,
.site-select .mud-input:hover .mud-input-outlined-border {
    border-color: #98a2b3;
}

/* Date pill - shared by the MTD calendar and the YTD picker (see
   ExecutiveOverview.razor) - both built from this one trigger shape plus a
   MudMenu popover rather than one of them using MudDateRangePicker's own
   chrome. Same construction end to end is what makes them match instead of
   merely resembling each other.

   Everything visible here is pinned to what the .period-select / .site-select
   MudSelects on either side actually render: 40px tall, transparent fill (so
   the page's own off-white shows through identically, not an opaque #fff
   patch), #bdbdbd 1px border, 12px radius. So the whole filter row reads as
   one set of controls rather than a pill sitting next to two dropdowns. */
.period-stepper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #bdbdbd;
    border-radius: 12px;
    background: transparent;
    min-width: 190px;
    cursor: pointer;
}

.period-stepper:hover {
    border-color: #98a2b3;
}

.period-stepper-label {
    font-size: 1rem;
    font-weight: 400;
    /* #424242 - the exact colour MudBlazor renders the select text in. */
    color: #424242;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.period-stepper-icon.mud-icon-root {
    width: 18px !important;
    height: 18px !important;
    color: rgba(0, 0, 0, 0.54);
    flex-shrink: 0;
    margin-right: 4px;
}

/* Week/Month range popover - lists whole weeks/months as the only clickable
   unit (see OnPeriodUnitClicked), so unlike the Daily calendar there's no
   day-level control inside it at all. */
.period-unit-popover {
    width: auto !important;
    min-width: 260px !important;
    border-radius: 12px !important;
    padding: 4px 0 !important;
}

.period-unit-hint {
    padding: 8px 14px;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #eef0f3;
}

.period-unit-list {
    max-height: 280px;
    overflow-y: auto;
}

.period-unit-row {
    padding: 8px 14px;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    white-space: nowrap;
}

.period-unit-row:hover {
    background: #f3f4f6;
}

.period-unit-row--pending {
    background: #2563eb;
    color: #fff;
    font-weight: 500;
}

.period-unit-row--in-range {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 500;
}

/* YTD picker popover (YTD mode) - a year-chip row + a 3x4 month grid, built
   from the same shell as the MTD calendar above so both pickers match by
   construction. Pick a year, then a month; only the month click applies. */
.ytd-popover {
    width: auto !important;
    min-width: 264px !important;
}

.ytd-year-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ytd-year-chip {
    padding: 4px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    user-select: none;
}

.ytd-year-chip:hover {
    background: #f3f4f6;
}

.ytd-year-chip--active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 500;
}

.ytd-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.ytd-month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    user-select: none;
}

.ytd-month-cell:hover {
    background: #f3f4f6;
}

.ytd-month-cell--active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.ytd-month-cell--disabled {
    color: rgba(0, 0, 0, 0.26);
    cursor: not-allowed;
    pointer-events: none;
}

.ytd-range-note {
    padding: 8px 14px 10px;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    border-top: 1px solid #eef0f3;
}

/* DATE PICKER POPOVER (calendar dropdown - MudDatePicker/MudDateRangePicker
   still appear elsewhere in the app even though Executive Overview no
   longer uses them; these rules apply to every one of those popovers,
   wherever they're used.) */

/* MudBlazor's calendar content has an intrinsic 310px width, but the
   popover paper around it sizes itself to the anchor field instead of the
   content - once we narrowed the filter pill below 310px, the paper's
   `overflow: hidden` started clipping the calendar and its "01 Sep - 04
   Sep" title on the right. Let the paper size to its content instead of the
   (now narrower) anchor. */
.mud-picker-popover,
.mud-picker-inline-paper,
.mud-picker-popover-paper,
.mud-picker-container {
    width: auto !important;
    min-width: 310px;
}

/* MudBlazor's default palette Primary is an indigo/purple that doesn't
   match this app's blue accent (the same blue used for focused filter
   borders, links, etc.) - repoint just the picker popover's palette
   variables rather than the global theme, so this doesn't recolor every
   other Primary-colored control in the app. */
.mud-picker-popover {
    --mud-palette-primary: #2563eb;
    --mud-palette-primary-darken: #1d4ed8;
    --mud-palette-primary-lighten: #4b82f0;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-hover: rgba(37, 99, 235, 0.1);
}

.mud-picker-datepicker-toolbar .mud-button-date {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
}

/* KPI CARDS */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.kpi-card {
    min-height: 190px;
    height: 100%;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #ffffff;
}

.kpi-card .mud-card-content {
    /* header / body / footer (whichever exists) were just stacked in normal
       flow, sized to their own content and leaving whatever was left over
       as dead space at the card's bottom. Spreading them across the card's
       full height instead - top, middle, bottom - uses that space instead
       of leaving it empty. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 16px;
}

/* HEADER: icon + title + legend */

.kpi-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* No margin-bottom here anymore - .mud-card-content's
       justify-content:space-between (above) now spaces the header, body
       and footer apart instead of a fixed margin. */
}

.kpi-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px !important;
}

.kpi-icon .mud-icon-root {
    font-size: 18px;
    color: #ffffff;
}

.kpi-title {
    flex: 1;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    color: #1d2939;
}

.kpi-legend {
    display: flex;
    gap: 12px;
    padding-top: 2px;
    font-size: 11px;
    color: #98a2b3;
    white-space: nowrap;
}

/* BODY: big value + chart */

.kpi-card-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 70px;
}

.kpi-main {
    min-width: 0;
}

.kpi-value {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1;
    color: #101828;
}

.kpi-unit {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #667085;
}

.kpi-compare {
    margin-top: 8px;
    font-size: 12px !important;
    color: #667085 !important;
}

/* KPI MINI BARS (Actual vs Budget) - a real ApexChart grouped bar chart
   (see KpiCard.razor's _miniBarOptions), not CSS-only bars. */

.kpi-chart {
    flex: 0 0 auto;
    width: 48%;
    max-width: 190px;
}

.kpi-chart.kpi-progress {
    align-self: center;
}

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

/* Category labels aren't part of the chart itself (sparkline mode drops
   them along with the rest of ApexCharts' axis chrome - see the Bars
   TrendType markup in KpiCard.razor) - this is a plain row underneath it.
   ApexCharts spreads N bars evenly across the full width, so each label is
   an equal-width (flex: 1) centred cell sitting directly under its bar,
   rather than space-between (which bunches the first/last labels against
   the chart edges and drifts out of line with the bars as the month count
   changes between YTD end-months). */
.mini-bars-labels {
    display: flex;
    margin-top: 4px;
    width: 100%;
}

/* Optional caption under the mini bar chart (KpiCard's ChartNote), e.g.
   "Trend chart (mock)" - same muted tone as .kpi-compare, just smaller and
   right-aligned so it reads as a chart footnote, not a KPI value. */
.kpi-chart-note {
    margin-top: 4px;
    font-size: 10px;
    color: #b0b7c3;
    text-align: right;
}

.mini-bars-labels span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    line-height: 1.2;
    color: #b0b7c3;
    overflow: hidden;
    /* YTD labels are single-letter month initials (see MiniBarLabelText in
       KpiCard.razor) and always sit on one line. MTD week ranges
       ("29 Jun-05 Jul") stay whole and are allowed to wrap so nothing is
       clipped. */
    font-size: 9px;
    word-break: break-word;
}

/* KPI ARROW TREND (Potential Saving) */

.kpi-arrow {
    flex: 0 0 auto;
    width: 90px;
    height: 46px;
    align-self: center;
}

.kpi-arrow-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--kpi-accent, #f97316);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* KPI CHANGE LINE */

.kpi-change {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px !important;
    font-weight: 500;
    color: #475467;
}

.kpi-change-arrow {
    font-size: 9px;
}

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

.kpi-change-delta {
    color: #667085;
    font-weight: 500;
}

.kpi-change.text-success .kpi-change-arrow,
.kpi-change.text-success .kpi-change-percent {
    color: #16a34a;
}

.kpi-change.saving-text {
    margin-top: 12px;
    font-weight: 700;
}

.kpi-change.saving-text .kpi-change-percent {
    color: #f97316;
}

/* KPI STATS (Active Assets) */

.kpi-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.kpi-stats-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.kpi-stat-good {
    color: #16a34a;
}

.kpi-stat-bad {
    color: #ef4444;
}

.kpi-stat-sep {
    color: #d0d5dd;
}

.kpi-link {
    margin-top: 10px;
    font-size: 13px !important;
    font-weight: 700;
    color: #2563eb !important;
    cursor: pointer;
}

.fuel-icon {
    background: #2563eb !important;
}

.cost-icon {
    background: #16a34a !important;
}

.index-icon {
    background: #7c3aed !important;
}

.saving-icon {
    background: #f97316 !important;
}

.asset-icon {
    background: #2563eb !important;
}

.saving-text {
    color: #f97316 !important;
}

.offline-text {
    color: #ef4444;
}

.saving-sparkline {
    height: 28px;
    color: #f97316;
}

.saving-sparkline svg {
    width: 100%;
    height: 100%;
}