/* /Components/Charts/EChart.razor.rz.scp.css */
div[b-3olgnhogt6] {
    width: 100%;
}
/* /Components/Consumption/ConsumptionCard.razor.rz.scp.css */
/* Consumption Chart */
.consumption-chart-height[b-k0f8xb0l8v] {
    height: 360px;
}

/* View-mode control: icon-row toggle on desktop, dropdown menu on mobile —
   both render; only one is shown, based on viewport width (see the
   max-width:600px override below). */
.consumption-card-root[b-k0f8xb0l8v]  .consumption-viewmode-menu-mobile {
    display: none;
}

.consumption-viewmode-chip[b-k0f8xb0l8v] {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-radius: var(--mud-default-borderradius, 8px);
    cursor: pointer;
}

@media (min-width: 1600px) {
    .consumption-chart-height[b-k0f8xb0l8v] {
        height: 400px;
    }
}

@media (min-width: 1920px) {
    .consumption-chart-height[b-k0f8xb0l8v] {
        height: 440px;
    }
}

/* Drill-down breadcrumb strip */
.drill-breadcrumb-strip[b-k0f8xb0l8v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 12px;
}

.drill-breadcrumb[b-k0f8xb0l8v] {
    gap: 2px;
    flex-wrap: wrap;
}

[b-k0f8xb0l8v] .drill-breadcrumb-btn {
    min-width: auto !important;
    height: auto !important;
    padding: 0 4px !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    opacity: 0.8;
}
    [b-k0f8xb0l8v] .drill-breadcrumb-btn:hover {
        opacity: 1;
        text-decoration: underline;
    }

.drill-sep[b-k0f8xb0l8v] {
    color: rgba(0, 0, 0, 0.35);
    padding: 0 2px;
    line-height: 1.4;
}

[b-k0f8xb0l8v] .drill-current {
    font-weight: 500 !important;
    opacity: 0.8;
}

.drill-hint[b-k0f8xb0l8v] {
    opacity: 0.55;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* ── Mobile-first: Standard controls layout (Water / District Heating) ─
   Same title-above-filters stacking as the Electricity layout below, minus
   the tabs/compare-duplicate sections that layout doesn't have. */
.consumption-card-header-standard[b-k0f8xb0l8v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consumption-card-filters-standard[b-k0f8xb0l8v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (min-width: 601px) {
    .consumption-card-header-standard[b-k0f8xb0l8v] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .consumption-card-filters-standard[b-k0f8xb0l8v] {
        flex-wrap: nowrap;
    }
}

/* ── Mobile-first: Electricity controls layout ─────────────────────── */
/* Default (mobile): vertical stack with consistent spacing */
.consumption-card-controls[b-k0f8xb0l8v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.consumption-card-tabs[b-k0f8xb0l8v],
.consumption-card-filters[b-k0f8xb0l8v],
.consumption-card-compare-mobile[b-k0f8xb0l8v] {
    width: 100%;
}

.consumption-card-tabs[b-k0f8xb0l8v] {
    display: flex;
    justify-content: center;
}

.consumption-card-filters[b-k0f8xb0l8v] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

/* Mobile: show standalone compare switch, hide the one inside ResolutionDateSelector */
.consumption-card-compare-mobile[b-k0f8xb0l8v] {
    display: flex;
    justify-content: flex-start;
}

/* Hide desktop compare switch and divider on mobile */
[b-k0f8xb0l8v] .consumption-card-filters .cost-toggle-switch,
[b-k0f8xb0l8v] .consumption-card-filters .mud-divider {
    display: none;
}

/* Desktop: restore horizontal layout with SpaceBetween justification */
@media (min-width: 601px) {
    .consumption-card-controls[b-k0f8xb0l8v] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .consumption-card-tabs[b-k0f8xb0l8v],
    .consumption-card-filters[b-k0f8xb0l8v] {
        width: auto;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .consumption-card-tabs[b-k0f8xb0l8v] {
        justify-content: flex-start;
    }

    .consumption-card-filters[b-k0f8xb0l8v] {
        justify-content: flex-end;
    }

    /* Desktop: hide mobile-only compare switch, show the one in ResolutionDateSelector */
    .consumption-card-compare-mobile[b-k0f8xb0l8v] {
        display: none;
    }

    [b-k0f8xb0l8v] .consumption-card-filters .cost-toggle-switch,
    [b-k0f8xb0l8v] .consumption-card-filters .mud-divider {
        display: flex;
    }
}

/* ── Mobile: bordered 8px-radius card with 16px padding, 16px gap between
   the title/tabs/filters/compare controls, no divider before the bottom
   switches row, and the switches wrap instead of overflowing horizontally ── */
@media (max-width: 600px) {
    /* .consumption-card-root is a plain <div> (carries this file's CSS-isolation scope
       attribute); everything below it is MudBlazor component output, which never gets that
       attribute itself — hence ::deep on every rule that reaches into the card. */
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-card {
        padding: 16px !important;
        margin-top: 0 !important;
        border: 1px solid var(--mud-palette-divider, #e0e0e0) !important;
        border-radius: var(--mud-default-borderradius, 8px) !important;
    }

    .consumption-card-controls[b-k0f8xb0l8v] {
        gap: 16px;
        margin-top: 16px;
    }

    /* On mobile the All/Consumption/Production pill spans the card's full width,
       with each button sharing that width equally — .consumption-card-tabs is
       the raw anchor div wrapping the SegmentedToggle. */
    .consumption-card-tabs[b-k0f8xb0l8v]  .segmented-toggle {
        width: 100%;
    }

    .consumption-card-tabs[b-k0f8xb0l8v]  .segmented-toggle-btn {
        flex: 1 1 0;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-controls-divider {
        display: none;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-switches-row {
        flex-wrap: wrap !important;
        gap: 10px;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-switches-row .cost-toggle-switch {
        margin: 0;
    }

    /* Chart-type icon buttons were overflowing past the viewport edge next to
       the consumption/production numbers — wrap instead of clipping. */
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-metrics-row {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* Swap the icon-row toggle for the dropdown menu on mobile. */
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-viewmode-toggle-desktop {
        display: none;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-viewmode-menu-mobile {
        display: inline-flex;
    }

    /* Prev/Next period navigation is replaced by panning the chart directly (ECharts dataZoom,
       configured in ConsumptionChartOptions.cs — the y-axis/legend never move, only the plotted
       window does), and the drill-down affordance (breadcrumb + hint text + the underlying
       click-to-drill handler, disabled in echartsInterop.js) is removed — both assume desktop
       pointer precision, not touch. Deliberately NOT a CSS overflow-x scroll container: that would
       scroll the whole chart canvas — axis and legend included — off-screen with it. */
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-chart-nav-prev,
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-chart-nav-next {
        display: none;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-drill-hint {
        display: none;
    }

    .drill-breadcrumb-strip[b-k0f8xb0l8v] {
        display: none;
    }
}
/* /Components/Consumption/ConsumptionMetrics.razor.rz.scp.css */
.metrics-root[b-39ku3ku03w]  .metric-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: #6B7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metrics-root[b-39ku3ku03w]  .metric-container {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.metrics-root[b-39ku3ku03w]  .metric-unit {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--bs-neutral-500);
    padding-left: 0.5rem;
}

.metrics-root[b-39ku3ku03w]  .metric-value {
    font-weight: 600;
    font-size: 1.65rem;
    line-height: 1.2;
    margin: 6px 0 2px 0;
}

.metrics-root[b-39ku3ku03w]  .metric-green-dark {
    color: #15803D;
}

.metrics-root[b-39ku3ku03w]  .metric-green {
    color: #059669;
}

.metrics-root[b-39ku3ku03w]  .metric-blue {
    color: #3B82F6;
}

.metrics-root[b-39ku3ku03w]  .metric-orange {
    color: #D97706;
}

.metrics-root[b-39ku3ku03w]  .metric-emerald {
    color: #047857;
}

.metrics-root[b-39ku3ku03w]  .metric-cyan {
    color: #0E7490;
}
/* /Components/Consumption/ResolutionDateSelector.razor.rz.scp.css */
/* Remove bottom margin on MudBlazor inputs */
[b-pu23lwpg14] .mud-input {
    margin-bottom: 0 !important;
}

/* Time Period Select */
[b-pu23lwpg14] .time-period-select {
    width: 120px;
    flex-shrink: 0;
}

/* Date picker field */
[b-pu23lwpg14] .date-picker-field {
    width: 150px;
    flex-shrink: 0;
}

/* Hour select field */
[b-pu23lwpg14] .hour-select-field {
    width: 100px;
    flex-shrink: 0;
}

/* Month select field */
[b-pu23lwpg14] .month-select-field {
    width: 90px;
    flex-shrink: 0;
}

/* Year fields */
[b-pu23lwpg14] .year-field-small {
    width: 95px;
    flex-shrink: 0;
}

/* Ensure picker popups can overflow properly */
[b-pu23lwpg14] .mud-picker-popup {
    z-index: 1400 !important;
}

[b-pu23lwpg14] .mud-picker-content {
    max-width: none !important;
}

/* Component layout */
.resolution-date-selector[b-pu23lwpg14] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

/* Below ~600px this can carry up to 3 fixed-width fields (e.g. time-period +
   date-picker + hour-select = 120+150+100px, or month + year + "vs" + year)
   which no longer fit one row without overflowing the card horizontally.
   flex-wrap stays as a safety net for the fixed-width date-picker/hour-select
   combos (Hour/15-min resolutions, not covered by the reference mobile
   design below) — it only activates if content still doesn't fit; the chip
   fields below are made flexible specifically so it never needs to for them. */
@media (max-width: 600px) {
    .resolution-date-selector[b-pu23lwpg14] {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Mobile filter row — e.g. [Month ▾] [2026 ▾] vs [2025 ▾].
       Fixed desktop pixel widths (120/90/95px) are replaced with equal-share
       flexible widths (a small min-width floor keeps 4-digit years and
       "Monthly"-length labels from clipping) so the whole row — resolution
       picker, year, "vs", compare-year — stays on one line instead of
       wrapping, even at 320px. date-picker-field/hour-select-field (Hour and
       15-min resolutions) are real text inputs, not short label chips, so
       they keep their fixed width and rely on the wrap fallback above. */
    [b-pu23lwpg14] .time-period-select {
        width: auto;
        flex: 1 1 0;
        min-width: 76px;
    }

    [b-pu23lwpg14] .month-select-field,
    [b-pu23lwpg14] .year-field-small {
        width: auto;
        flex: 1 1 0;
        min-width: 64px;
    }

    [b-pu23lwpg14] .filter-chip-select .mud-input-outlined-border {
        border-radius: 13px !important;
    }

    [b-pu23lwpg14] .filter-chip-select .mud-select-input {
        min-height: 20px;
        padding: 6px 10px !important;
        font-size: 1rem;
        justify-content: center;
    }

    .compare-vs-label[b-pu23lwpg14] {
        font-size: 1rem;
        flex-shrink: 0;
        padding: 0 2px;
    }
}

/* Narrowest phones (~320-350px): trim gaps/padding further instead of
   letting the row wrap or overflow — labels stay whole, just tighter. */
@media (max-width: 360px) {
    .resolution-date-selector[b-pu23lwpg14] {
        gap: 4px;
    }

    [b-pu23lwpg14] .time-period-select {
        min-width: 68px;
    }

    [b-pu23lwpg14] .month-select-field,
    [b-pu23lwpg14] .year-field-small {
        min-width: 56px;
    }

    [b-pu23lwpg14] .filter-chip-select .mud-select-input {
        padding: 8px 6px !important;
        font-size: 1rem;
    }
}
/* /Components/Location/LocationTableView.razor.rz.scp.css */
[b-8ule5ikuhy] .location-table thead tr {
    background: #F9FCFA;
    border-radius: 12px 12px 0 0;
}

[b-8ule5ikuhy] .location-table thead tr th:first-child {
    border-radius: 12px 0 0 0;
}

[b-8ule5ikuhy] .location-table thead tr th:last-child {
    border-radius: 0 12px 0 0;
}

[b-8ule5ikuhy] .location-table th {
    color: #6b7280;
    border-bottom: 1px solid var(--color-theme-mud-palette-table-lines, #E0E0E0);
    padding: 8px !important;
    height: 40px;
}

[b-8ule5ikuhy] .location-table tbody tr {
    height: 72px;
}

[b-8ule5ikuhy] .location-table.mud-table-hover tbody tr:hover {
    background-color: #F9FCFA !important;
}

[b-8ule5ikuhy] .location-table tbody tr:hover .service-icon-badge {
    background-color: #f2f4f7;
    opacity: 1;
}

[b-8ule5ikuhy] .location-table tbody tr:hover .service-icon {
    opacity: 1;
}

[b-8ule5ikuhy] .location-table td {
    padding: 8px !important;
}

[b-8ule5ikuhy] .location-table .service-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f2f4f7;
    border-radius: 8px;
}

[b-8ule5ikuhy] .location-table .service-icon {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
}
/* /Components/Location/Shared/LocationDetailView.razor.rz.scp.css */
.detail-back-btn[b-u23xjm8935] {
    color: #374151;
    margin-top: 4px;
}

.detail-view__overlay-backdrop[b-u23xjm8935] {
    position: fixed;
    inset: 0;
    top: 49px;
    background: #00000045;
    z-index: 1200;
}

.detail-view__overlay-panel[b-u23xjm8935] {
    position: fixed;
    top: 64px;           /* overridden by inline style after first render */
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: calc(100vh - 64px); /* overridden by inline style after first render */
    background: var(--mud-palette-surface, #fff);
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.10);
    border-left: 1px solid var(--mud-palette-divider, #e0e0e0);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panel-slide-in-b-u23xjm8935 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes panel-slide-in-b-u23xjm8935 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (max-width: 600px) {
    .detail-view__overlay-panel[b-u23xjm8935] {
        width: 100vw;
    }
}

.detail-stats-bar[b-u23xjm8935] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #ffffff;
/*    border: 1px solid #e0e0e0;*/
    border-radius: 12px;
    padding: 14px 0;
}

.detail-stat-box[b-u23xjm8935] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 0 24px;
    min-width: 0;
}

.detail-stat-divider[b-u23xjm8935] {
    width: 0px;
    align-self: stretch;
    background: #e0e0e0;
    flex: 0 0 auto;
}

.detail-stat-box__value[b-u23xjm8935] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-stat-box__label[b-u23xjm8935] {
    font-size:11px;
    color: #757575;
    font-weight: 400;
}

.detail-stat-box__currency[b-u23xjm8935] {
    font-size: 0.75rem;
    font-weight: 400;
}

/* Mobile: four boxes at `flex: 1` with 24px side padding each leaves too
   little room per box on a 320–767px screen (values already truncate via
   the ellipsis above, but the room left is barely enough for 2-3 digits).
   Wrap into a 2x2 grid instead — the divider elements interleaved between
   boxes in markup order would otherwise break a clean 2-column wrap, so
   they're hidden here rather than reflowed. */
@media (max-width: 767.98px) {
    .detail-stats-bar[b-u23xjm8935] {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .detail-stat-box[b-u23xjm8935] {
        flex: 1 1 calc(50% - 12px);
        padding: 0 8px;
    }

    .detail-stat-divider[b-u23xjm8935] {
        display: none;
    }
}
/* /Components/Location/Shared/LocationFilters.razor.rz.scp.css */
.multi-location-filter[b-ajfx6ln501] {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    flex-shrink: 0;
}

[b-ajfx6ln501] .multi-location-filter .mud-input-slot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    [b-ajfx6ln501] .multi-location-filter .mud-input-slot[style*="display:none"] {
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
/* /Components/Location/UtilityService/AgreementDetailsDialog.razor.rz.scp.css */
.agr-dialog-rows[b-nhp476ggvi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agr-dialog-row[b-nhp476ggvi] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: baseline;
}

.agr-dialog-label[b-nhp476ggvi] {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    line-height: 20px;
}

.agr-dialog-value[b-nhp476ggvi] {
    font-size: 14px;
    font-weight: 500;
    color: #3b3939;
    line-height: 20px;
}
/* /Components/Location/UtilityService/AgreementDetailsPage.razor.rz.scp.css */
.detail-page[b-olkmqvsa1y] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 622px;
}

/* ── Back header ── */
.detail-back-header[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-back-btn[b-olkmqvsa1y] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--clr-text-primary);
}

.detail-back-btn:hover[b-olkmqvsa1y] {
    color: var(--clr-navy-800);
}

.detail-service-badge[b-olkmqvsa1y] {
    width: 48px;
    height: 48px;
    background: #f7f8fb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-header-text[b-olkmqvsa1y] {
    display: flex;
    flex-direction: column;
}

.detail-header-title[b-olkmqvsa1y] {
    font-size: 18px;
    font-weight: 600;
    color: #3b3939;
    margin: 0;
    line-height: 1.36;
    letter-spacing: -0.32px;
}

.detail-header-address[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: #2e2e2e;
    opacity: 0.7;
    letter-spacing: -0.32px;
    line-height: 19px;
}

/* ── Sections ── */
.detail-section[b-olkmqvsa1y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-section-title[b-olkmqvsa1y] {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin: 0;
    letter-spacing: -0.08px;
}

/* ── Service details card ── */
.detail-card[b-olkmqvsa1y] {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 0 3px rgba(0,0,0,0.02);
}

.detail-row[b-olkmqvsa1y] {
    display: grid;
    grid-template-columns: 189px 1fr;
    gap: 16px;
    padding: 4px 1px;
    align-items: baseline;
}

.detail-label[b-olkmqvsa1y] {
    font-size: 14px;
    color: rgba(0,0,0,0.54);
    line-height: 19px;
    word-break: break-word;
}

.detail-value[b-olkmqvsa1y] {
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-text-primary);
    letter-spacing: -0.07px;
}

/* ── Agreement card ── */
.detail-agreement-card[b-olkmqvsa1y] {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}

.detail-type-chip[b-olkmqvsa1y] {
    align-self: flex-start;
    background: var(--app-primary-color);
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border-radius: 0 0 12px 12px;
    letter-spacing: 0.15px;
}

.detail-status-chip[b-olkmqvsa1y] {
    background: #e6f7f3;
    color: #157a5f;
    border: 1px solid #157a5f;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    height: 24px;
    line-height: 22px;
    border-radius: 12px;
    letter-spacing: 0.15px;
    white-space: nowrap;
}

.detail-agreement-top[b-olkmqvsa1y] {
    background: rgba(249, 249, 252, 0.7);
    border-bottom: none;
    padding: 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-agreement-header[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.detail-agreement-name-row[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-agreement-name[b-olkmqvsa1y] {
    font-size: 20px;
    font-weight: 600;
    color: #434343;
    margin: 0;
    line-height: 1.3;
}

.detail-external-link[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    color: #434343;
}

.detail-price-row[b-olkmqvsa1y] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.detail-price[b-olkmqvsa1y] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.detail-price-value[b-olkmqvsa1y] {
    font-size: 28px;
    font-weight: 600;
    color: var(--clr-text-primary);
    line-height: 1.3;
    letter-spacing: -1.5px;
}

.detail-price-unit[b-olkmqvsa1y] {
    font-size: 14px;
    color: rgba(0,0,0,0.54);
    line-height: 21px;
}

.detail-price-note[b-olkmqvsa1y] {
    font-size: 12px;
    color: rgba(0,0,0,0.54);
    margin-top: -12px;
}

.detail-pricing-toggle[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #434343;
    letter-spacing: 0.25px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    margin-left:auto;
}

/*.detail-pricing-toggle:hover {
    text-decoration: underline;
}*/

.detail-pricing-chevron[b-olkmqvsa1y] {
    display: flex;
    transition: transform 0.2s;
}

.detail-pricing-chevron.expanded[b-olkmqvsa1y] {
    transform: rotate(180deg);
}

/* ── Pricing breakdown ── */
.pricing-breakdown[b-olkmqvsa1y] {
    border-top: 1px solid #e5e7eb;
    padding-top: 17px;
    display: flex;
    flex-direction: column;
}

.pricing-line[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}

.pricing-line:first-child[b-olkmqvsa1y] {
    padding-top: 0;
}

.pricing-line-label[b-olkmqvsa1y] {
    font-size: 14px;
    color: #4a5565;
    letter-spacing: -0.15px;
    line-height: 20px;
}

.pricing-line-value[b-olkmqvsa1y] {
    font-size: 14px;
    font-weight: 500;
    color: #101828;
    letter-spacing: -0.15px;
    line-height: 20px;
}

.pricing-separator[b-olkmqvsa1y] {
    border-top: 1px solid #e5e7eb;
    margin-top: 12px;
    padding-top: 1px;
}

.pricing-total[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
}

.pricing-total-label[b-olkmqvsa1y],
.pricing-total-value[b-olkmqvsa1y] {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    letter-spacing: -0.31px;
    line-height: 24px;
}

/* ── Divider ── */
.detail-agreement-divider[b-olkmqvsa1y] {
    height: 1px;
    background: #eee;
    margin: 0;
}

/* ── Bottom section ── */
.detail-agreement-bottom[b-olkmqvsa1y] {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-dates-row[b-olkmqvsa1y] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.detail-date[b-olkmqvsa1y] {
    display: flex;
    flex-direction: column;
}

.detail-date-end[b-olkmqvsa1y] {
    align-items: flex-end;
}

.detail-date-label[b-olkmqvsa1y] {
    font-size: 14px;
    color: rgba(0,0,0,0.54);
    line-height: 19px;
}

.detail-date-value[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-text-primary);
    letter-spacing: -0.07px;
    white-space: nowrap;
}

.detail-timeline[b-olkmqvsa1y] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
    min-width: 80px;
    color:#434343;
}

.detail-timeline svg[b-olkmqvsa1y] {
    width: 100%;
    height: 24px;
}

.detail-binding[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: rgba(0,0,0,0.54);
    line-height: 19px;
}

.detail-binding strong[b-olkmqvsa1y] {
    color: var(--clr-text-primary);
    font-weight: 600;
}

.detail-row-inset[b-olkmqvsa1y] {
    padding: 4px 0;
}

/* ── Mobile: the 189px fixed label column leaves too little room for the
   value on a 320–375px screen, and the 24px side padding on the top/bottom
   agreement sections plus the timeline's 80px floor between two nowrap
   dates were sized for desktop's spare width. ── */
@media (max-width: 767.98px) {
    .detail-row[b-olkmqvsa1y] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .detail-agreement-top[b-olkmqvsa1y] {
        padding: 0 16px 16px;
    }

    .detail-agreement-bottom[b-olkmqvsa1y] {
        padding: 16px;
    }

    .detail-dates-row[b-olkmqvsa1y] {
        gap: 4px;
    }

    .detail-timeline[b-olkmqvsa1y] {
        min-width: 32px;
    }

    .detail-price-value[b-olkmqvsa1y] {
        font-size: 22px;
    }
}
/* /Components/Pages/AccessibilityStatement.razor.rz.scp.css */
.accessibility-page[b-szw7do7tpv] {
    --a11y-bg: #f5f7f8;
    --a11y-card-bg: #ffffff;
    --a11y-primary: #0f766e;
    --a11y-success: #15803d;
    --a11y-heading: #0f172a;
    --a11y-secondary-text: #64748b;
    --a11y-border: #e5e7eb;
    --a11y-warning-bg: #fff8eb;
    --a11y-warning-border: #fbbf24;
    background: var(--a11y-bg);
    min-height: 100vh;
    font-family: Inter, Roboto, sans-serif;
    color: var(--a11y-heading);
    display: flex;
    justify-content: center;
    padding: 27px 134px;
    box-sizing: border-box;
    --mud-palette-primary: var(--a11y-primary);
    --mud-palette-primary-rgb: 15, 118, 110;
    --mud-palette-primary-text: #fff;
    --mud-palette-success: var(--a11y-success);
    --mud-palette-success-rgb: 21, 128, 61;
    --mud-palette-success-text: #fff;
    --mud-palette-warning: #d97706;
    --mud-palette-warning-rgb: 217, 119, 6;
    --mud-palette-warning-text: #fff;
}

[b-szw7do7tpv] .accessibility-card.mud-paper {
    width: 100%;
    max-width: 1440px;
    border-radius: 12px !important;
    border: 1px solid var(--a11y-border) !important;
    background: var(--a11y-card-bg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* HEADER */

.accessibility-header[b-szw7do7tpv] {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 56px;
    background: var(--a11y-card-bg);
    border-bottom: 1px solid var(--a11y-border);
    flex-wrap: wrap;
}

.accessibility-logo-img[b-szw7do7tpv] {
    max-height: 32px;
    width: auto;
}

[b-szw7do7tpv] .accessibility-header-divider.mud-divider {
    height: 24px;
    border-color: var(--a11y-border);
}

[b-szw7do7tpv] .accessibility-backlogin-link.mud-link {
    display: inline-flex;
    align-items: center;
    color: var(--a11y-primary);
    font-weight: 600;
    font-size: 15px;
}

[b-szw7do7tpv] .accessibility-backlogin-link.mud-link:hover {
    text-decoration: underline;
}

/* CONTENT */

.accessibility-content[b-szw7do7tpv] {
    max-width: 100%;
    padding: 64px 56px 96px;
}

/* HERO */

.accessibility-hero[b-szw7do7tpv] {
    position: relative;
    padding-bottom: 16px;
}

    .accessibility-hero[b-szw7do7tpv]::before {
        content: "";
        position: absolute;
        top: 0;
        right: 8px;
        width: 168px;
        height: 132px;
        background-image: radial-gradient(circle, rgba(15, 118, 110, 0.35) 1.5px, transparent 1.5px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }

    .accessibility-hero[b-szw7do7tpv]::after {
        content: "";
        position: absolute;
        top: -80px;
        right: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(15, 118, 110, 0.08), transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

[b-szw7do7tpv] .accessibility-hero-title.mud-typography {
    position: relative;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    padding-top:30px;
    letter-spacing: -2px;
    color: var(--a11y-heading);
}

/* Blazor's FocusOnNavigate (App.razor) programmatically focuses this h1 on every
   navigation to announce the page to screen readers. The global :focus-visible
   outline rule (global.css) then paints a visible ring around it even though no
   keyboard interaction happened. Suppress it here; real keyboard focus on the
   page's interactive elements (links, chips, etc.) is unaffected. */
[b-szw7do7tpv] .accessibility-hero-title.mud-typography:focus-visible {
    outline: none;
}

[b-szw7do7tpv] .accessibility-hero-subtitle.mud-typography {
    position: relative;
    color: var(--a11y-secondary-text);
    font-size: 18px;
    line-height: 1.6;
}

[b-szw7do7tpv] .accessibility-hero-intro.mud-typography {
    position: relative;
    max-width: 900px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

/* SECTIONS */

.accessibility-section[b-szw7do7tpv] {
    margin-top: 56px;
}

[b-szw7do7tpv] .accessibility-section-heading.mud-typography {
    font-size: 26px;
    font-weight: 700;
    color: var(--a11y-heading);
    margin-bottom: 16px;
}

.accessibility-body-text[b-szw7do7tpv] {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

/* WARNING BANNER */

.accessibility-warning-banner[b-szw7do7tpv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--a11y-warning-bg);
    border: 1px solid var(--a11y-warning-border);
    border-radius: 16px;
    padding: 24px;
}

[b-szw7do7tpv] .accessibility-warning-icon.mud-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #fef3c7 !important;
    color: #d97706 !important;
}

[b-szw7do7tpv] .accessibility-warning-title.mud-typography {
    font-weight: 700;
    font-size: 17px;
    color: #78350f;
}

[b-szw7do7tpv] .accessibility-warning-detail.mud-typography {
    color: var(--a11y-secondary-text);
    font-size: 14px;
}

[b-szw7do7tpv] .accessibility-standard-chip.mud-chip {
    min-height: 42px;
    padding-inline: 18px;
    font-weight: 600;
    color: var(--a11y-success) !important;
    border-color: var(--a11y-success) !important;
}

/* NON-ACCESSIBLE CONTENT */

.accessibility-subsection + .accessibility-subsection[b-szw7do7tpv] {
    margin-top: 28px;
}

[b-szw7do7tpv] .accessibility-subheading.mud-typography {
    font-weight: 700;
    font-size: 16px;
    color: var(--a11y-heading);
    margin-bottom: 8px;
}

.accessibility-bullet-list[b-szw7do7tpv] {
    margin: 0;
    padding-left: 22px;
    list-style: none;
}

    .accessibility-bullet-list li[b-szw7do7tpv] {
        position: relative;
        padding-left: 4px;
        margin-bottom: 8px;
    }

        .accessibility-bullet-list li[b-szw7do7tpv]::before {
            content: "\2022";
            position: absolute;
            left: -18px;
            color: var(--a11y-success);
            font-weight: 700;
            font-size: 18px;
        }

        .accessibility-bullet-list li .mud-typography[b-szw7do7tpv] {
            color: #475569;
            font-size: 16px;
            line-height: 1.8;
        }

/* DIVIDER BETWEEN SECTIONS */

[b-szw7do7tpv] .accessibility-section-divider.mud-divider {
    margin-top: 56px;
    margin-bottom: 40px;
    border-color: var(--a11y-border);
}

/* BOTTOM TWO-COLUMN SECTION */

.accessibility-bottom-grid[b-szw7do7tpv] {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 40px;
}

.accessibility-bottom-col[b-szw7do7tpv] {
    flex: 1 1 0;
    min-width: 0;
}

[b-szw7do7tpv] .accessibility-bottom-divider.mud-divider-vertical {
    align-self: stretch;
    border-color: var(--a11y-border);
}

/* CONTACT CARDS */

[b-szw7do7tpv] .accessibility-contact-mini-card.mud-paper {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 14px !important;
    border: 1px solid var(--a11y-border) !important;
    background: var(--a11y-card-bg);
}

[b-szw7do7tpv] .accessibility-contact-mini-icon.mud-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: #ecfdf5 !important;
    color: var(--a11y-success) !important;
}

[b-szw7do7tpv] .accessibility-contact-mini-label.mud-typography {
    color: var(--a11y-secondary-text);
    font-size: 13px;
}

[b-szw7do7tpv] .accessibility-contact-mini-value.mud-link {
    color: var(--a11y-heading);
    font-weight: 600;
    font-size: 15px;
}

/* FOOTER STRIP */

.accessibility-footer-strip[b-szw7do7tpv] {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 56px;
    background: #f8fafc;
    border-top: 1px solid var(--a11y-border);
}

.accessibility-muted-text[b-szw7do7tpv] {
    color: var(--a11y-secondary-text);
}

/* TABLET */

@media (max-width: 1024px) {
    .accessibility-page[b-szw7do7tpv] {
        padding: 24px;
    }

    .accessibility-header[b-szw7do7tpv],
    .accessibility-footer-strip[b-szw7do7tpv] {
        padding-inline: 32px;
    }

    .accessibility-content[b-szw7do7tpv] {
        padding: 48px 32px 64px;
    }

    [b-szw7do7tpv] .accessibility-hero-title.mud-typography {
        font-size: 48px;
    }
}

/* MOBILE */

@media (max-width: 768px) {
    .accessibility-page[b-szw7do7tpv] {
        padding: 0;
    }

    [b-szw7do7tpv] .accessibility-card.mud-paper {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .accessibility-header[b-szw7do7tpv] {
        height: auto;
        padding: 16px 20px;
        gap: 12px;
    }

    .accessibility-header-actions[b-szw7do7tpv] {
        width: 100%;
        justify-content: space-between;
    }

    .accessibility-content[b-szw7do7tpv] {
        padding: 32px 20px 56px;
    }

    [b-szw7do7tpv] .accessibility-hero-title.mud-typography {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .accessibility-hero[b-szw7do7tpv]::before,
    .accessibility-hero[b-szw7do7tpv]::after {
        display: none;
    }

    [b-szw7do7tpv] .accessibility-section-heading.mud-typography {
        font-size: 21px;
    }

    .accessibility-warning-banner[b-szw7do7tpv] {
        padding: 18px;
    }

    [b-szw7do7tpv] .accessibility-standard-chip.mud-chip {
        width: 100%;
        justify-content: center;
    }

    .accessibility-bottom-grid[b-szw7do7tpv] {
        flex-direction: column;
        gap: 32px;
    }

    [b-szw7do7tpv] .accessibility-bottom-divider.mud-divider-vertical {
        width: 100%;
        height: 1px;
        border-top: 1px solid var(--a11y-border);
        border-right: none;
    }

    .accessibility-footer-strip[b-szw7do7tpv] {
        padding-inline: 20px;
        height: auto;
        padding-block: 16px;
    }
}
/* /Components/Pages/Auth/AssociationDialog.razor.rz.scp.css */
/* Association dialog styling — aligned with the login form's typography,
   label-above-field pattern, and action-button shape (see Login.razor.css). */

[b-0w6rvck099] .assoc-title {
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary) !important;
}

[b-0w6rvck099] .assoc-subtitle {
    color: var(--mud-palette-text-secondary) !important;
}

/* Matches .field-label on the customer-number / OTP screens; brand one-off, no Brandsync token */
[b-0w6rvck099] .assoc-field-label {
    color: #272c34 !important;
    font-weight: 500 !important;
    display: block;
    margin-bottom: 8px;
}

/* Brand one-off border color, no Brandsync token */
[b-0w6rvck099] .btn-assoc-outline.mud-button-outlined {
    border-color: #c2d3ca;
    color: var(--mud-palette-text-primary);
}
/* /Components/Pages/Auth/OpenIdCallback.razor.rz.scp.css */
/* Centred card for the OpenID/MitID callback (loading + error states).
   Mirrors the login screen's card + typography (see Login.razor.css). */

.auth-callback-page[b-4as83efcoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 24px;
    box-sizing: border-box;
    background: white;
}

.auth-card[b-4as83efcoo] {
    width: 100%;
    max-width: 448px;
    padding: 32px 24px;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* ── Typography (matches .login-title / .login-subtitle) ──────────── */
/* ::deep required: MudText renders its own <p>, outside this component's
   CSS isolation scope. */

[b-4as83efcoo] .auth-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    color: var(--mud-palette-text-primary) !important;
    margin-bottom: 0;
}

[b-4as83efcoo] .auth-subtitle {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: var(--mud-palette-text-secondary) !important;
}

[b-4as83efcoo] .auth-detail {
    display: block;
    color: #9aa0a6 !important;
    font-size: 12px !important;
    word-break: break-word;
}
/* /Components/Pages/Configuration/PortalConfiguration.razor.rz.scp.css */
.config-tabs[b-o5my64qqjx]  .mud-tabs-header {
    background: white !important;
}

.config-tabs[b-o5my64qqjx]  .mud-tab-slider {
    background-color: var(--app-secondary-color) !important;
}

.config-tabs[b-o5my64qqjx]  .mud-tab.mud-tab-active {
    color: var(--app-secondary-color) !important;
}

.config-tabs[b-o5my64qqjx]  .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--app-secondary-color) !important;
}

.config-tabs[b-o5my64qqjx]  .mud-tab {
    color: #6b7280;
    font-weight: 500;
    text-transform: none;
    font-size: 14px;
    min-width: 0;
    padding: 0 20px;
}

.config-tabs[b-o5my64qqjx]  .mud-tabs-panels {
    background: white;
}

.config-tabs[b-o5my64qqjx]  button:focus-visible {
    /* An outline with a negative offset renders unreliably here (only
       the left/right edges show, top/bottom get dropped) - a known
       Chromium quirk when a negative outline-offset lands inside an
       element that clips its own ripple/overflow. An inset box-shadow
       draws the same ring but always respects the button's own box
       and border-radius, so it doesn't suffer that bug.
       !important is required: global.css flattens all .mud-button-root
       elements with `box-shadow: none !important`, which otherwise wins
       over this rule regardless of selector specificity. */
    outline: none;
    box-shadow: inset 0 0 0 3px #4CAF50 !important;
    border-radius: 4px;
}

.config-tabs[b-o5my64qqjx]  .save-changes-btn {
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.config-tabs[b-o5my64qqjx]  .save-changes-btn:hover:not(.mud-disabled) {
    filter: brightness(1.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}

.config-tabs[b-o5my64qqjx]  .save-content-btn {
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.config-tabs[b-o5my64qqjx]  .save-content-btn:hover:not(.mud-disabled) {
    filter: brightness(1.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}
/* /Components/Pages/Configuration/Tabs/BrandingTab.razor.rz.scp.css */
/* Visible keyboard-focus ring for the logo/favicon upload dropzones.
   The InputFile itself is visually hidden (.sr-only) but stays focusable,
   so Tab+Enter/Space opens the native file picker; :focus-within surfaces
   that focus state on the dropzone the user actually sees. */
.upload-dropzone:focus-within[b-oqcibcd0tq],
.logo-upload-zone:focus-within .upload-dropzone[b-oqcibcd0tq] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Tablet (768–991px): MudBlazor's own "md" breakpoint (960px) misses most
   of this band, leaving fields single-column when there's room for two.
   Only affects 768–991px — native md="6" behavior at ≥960px is untouched. */
@media (min-width: 768px) and (max-width: 991.98px) {
    [b-oqcibcd0tq] .mud-grid-item-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile: the favicon dropzone is pinned to a 160px inline width, which
   crowds the logo dropzone into a sliver next to it once the page itself
   has narrowed down. Stack them into one column instead — !important is
   required since inline style otherwise always wins over an external
   stylesheet rule regardless of specificity. */
@media (max-width: 767.98px) {
    .branding-upload-row[b-oqcibcd0tq] {
        flex-direction: column;
    }

    .branding-favicon-zone[b-oqcibcd0tq] {
        width: 100% !important;
    }
}
/* /Components/Pages/Configuration/Tabs/ContentTab.razor.rz.scp.css */
/* Tablet/mobile: the news content list is pinned to width:50% via inline
   style (Config admin desktop layout), which wastes half the available
   width once the page itself has already narrowed down. !important is
   required here since inline style otherwise always wins over any
   external stylesheet rule regardless of selector specificity. */
@media (max-width: 991.98px) {
    .content-block-list[b-jnmjjt3wkz] {
        width: 100% !important;
    }
}
/* /Components/Pages/Configuration/Tabs/PreviewTab.razor.rz.scp.css */
[b-n9wloe0je2] .preview-container {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    height: 540px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.preview-appbar[b-n9wloe0je2] {
    height: 48px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
}

.preview-appbar-spacer[b-n9wloe0je2] {
    flex: 1;
}

.preview-appbar-actions[b-n9wloe0je2] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.preview-search-icon[b-n9wloe0je2] {
    font-size: 20px;
}

.preview-language-selector[b-n9wloe0je2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #555;
}

.preview-language-icon[b-n9wloe0je2] {
    font-size: 18px;
    color: #555;
}

.preview-dropdown-icon[b-n9wloe0je2] {
    font-size: 18px;
    color: #555;
}

.preview-notification-wrapper[b-n9wloe0je2] {
    position: relative;
    display: inline-flex;
}

.preview-notification-icon[b-n9wloe0je2] {
    font-size: 20px;
}

.preview-notification-badge[b-n9wloe0je2] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.preview-user-avatar[b-n9wloe0je2] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-user-initials[b-n9wloe0je2] {
    color: white;
    font-size: 11px;
    font-weight: 600;
}

.preview-ai-button[b-n9wloe0je2] {
    color: white;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-ai-icon[b-n9wloe0je2] {
    font-size: 14px;
}

.preview-body[b-n9wloe0je2] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.preview-sidebar[b-n9wloe0je2] {
    width: 210px;
    background: white;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

.preview-sidebar-header[b-n9wloe0je2] {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-logo[b-n9wloe0je2] {
    height: 28px;
}

.preview-brand-text[b-n9wloe0je2] {
    font-weight: 700;
    font-size: 13px;
}

.preview-menu-icon[b-n9wloe0je2] {
    color: #9ca3af;
    font-size: 18px;
}

.preview-nav-container[b-n9wloe0je2] {
    flex: 1;
    padding: 8px 0;
}

.preview-nav-item[b-n9wloe0je2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
}

.preview-nav-item-active[b-n9wloe0je2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
}

.preview-nav-icon[b-n9wloe0je2] {
    font-size: 20px;
}

.preview-nav-icon-inactive[b-n9wloe0je2] {
    color: #6b7280;
    font-size: 20px;
}

.preview-nav-text[b-n9wloe0je2] {
    font-size: 13px;
    font-weight: 600;
}

.preview-nav-text-inactive[b-n9wloe0je2] {
    font-size: 13px;
    color: #374151;
}

.preview-nav-footer[b-n9wloe0je2] {
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
}

.preview-content[b-n9wloe0je2] {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}

.preview-title[b-n9wloe0je2] {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.preview-subtitle[b-n9wloe0je2] {
    color: #6b7280;
    margin: 0 0 20px 0;
    font-size: 15px;
}

/* Mirrors the "Help & Support" row above it (same padding/flex) so the two rows line up.
   This is a static mockup, not the real nav — the attribution link must not be clickable. */
.eg-attribution-wrapper[b-n9wloe0je2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    pointer-events: none;
}
/* /Components/Pages/Configuration/Tabs/ThemeTab.razor.rz.scp.css */
.color-swatch-btn:focus-visible[b-71tszcb9oc] {
    outline: 3px solid #4CAF50 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.18) !important;
}
/* /Components/Pages/ConsumptionInsights.razor.rz.scp.css */
/* Location Dropdown */
.location-field[b-y4kxq5x5k9] {
    min-width: 250px;
}

/* Service Tabs Styling */
.service-tabs[b-y4kxq5x5k9] {
    border-radius: 12px;
    overflow: hidden;
}

/* Hide tabs on mobile when mobile filter section is active */
@media (max-width: 768px) {
    .service-tabs[b-y4kxq5x5k9]  .mud-tabs-toolbar {
        display: none !important;
    }
}

.service-tabs[b-y4kxq5x5k9]  .mud-tabs-header {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}

.service-tabs[b-y4kxq5x5k9]  .mud-tab {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    text-transform: none;
    min-width: 0;
    padding: 12px 4px;
    margin-right: 24px;
}

.service-tabs[b-y4kxq5x5k9]  .mud-tab.mud-tab-active {
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

.service-tabs[b-y4kxq5x5k9]  .mud-tab-slider {
    background-color: var(--mud-palette-secondary) !important;
    height: 2px;
}

/* Electricity Container - Clean Design */
.electricity-container[b-y4kxq5x5k9] {
    margin-top: 16px;
}

/* ── Mobile: 32px gap between the header block, utility tabs, and the
   electricity card; no gap between the page title and the location row ── */
@media (max-width: 600px) {
    .analysis-header[b-y4kxq5x5k9] {
        margin-bottom: 32px;
    }

    /* .analysis-header's only direct child is the outer MudStack's rendered div — target it
       positionally, since MudStack's root never carries this file's CSS-isolation scope
       attribute (that's only added to plain HTML elements, like .analysis-header itself). */
    .analysis-header[b-y4kxq5x5k9]  > div {
        gap: 0 !important;
    }

    .service-tabs[b-y4kxq5x5k9]  .mud-tab {
        padding: 12px 16px;
        margin-right: 0;
    }

    .electricity-container[b-y4kxq5x5k9] {
        margin-top: 32px;
    }
}

/* Electricity Content Area */
.electricity-content[b-y4kxq5x5k9] {
    background: transparent;
}

/* Metric Cards */
.metric-card[b-y4kxq5x5k9] {
    padding: 20px;
    border-radius: 12px;
    border-left: none;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.metric-card:hover[b-y4kxq5x5k9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-card[b-y4kxq5x5k9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: height 0.3s ease;
}

.metric-card:hover[b-y4kxq5x5k9]::before {
    height: 100%;
    opacity: 0.05;
}

/* Table accessibility improvements */
[b-y4kxq5x5k9] .mud-table {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

[b-y4kxq5x5k9] .mud-table-head {
    background-color: #f5f5f5;
    font-weight: 600;
}

[b-y4kxq5x5k9] .mud-table-head th {
    border-bottom: 2px solid #4FC08D;
    color: #333;
    padding: 16px;
}

[b-y4kxq5x5k9] .mud-table-body tr {
    transition: background-color 0.2s ease;
}

/* Mobile Filter Section */
.mobile-filter-section[b-y4kxq5x5k9] {
    display: none; /* Hidden by default, shown only on mobile */
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
    padding: 0 22px;
}

/* Mobile Segmented Selector */
.mobile-segmented-selector[b-y4kxq5x5k9] {
    width: 100%;
}

[b-y4kxq5x5k9] .mobile-electricity-toggle {
    width: 100%;
    height: 66px;
    background-color: #F5F5F5;
    border-radius: 34px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
}

[b-y4kxq5x5k9] .mobile-electricity-toggle .segmented-toggle-btn {
    flex: 1;
    font-size: 18px !important;
    font-weight: 500 !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px !important;
    padding: 0 !important;
    min-width: 0 !important;
}

[b-y4kxq5x5k9] .mobile-electricity-toggle .mud-button-filled {
    background-color: white !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

[b-y4kxq5x5k9] .mobile-electricity-toggle .mud-button-text {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500 !important;
}

/* Mobile Filter Row */
.mobile-filter-row[b-y4kxq5x5k9] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

[b-y4kxq5x5k9] .mobile-filter-row .resolution-date-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

[b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select {
    height: 52px;
    border-radius: 12px;
    background: white;
    border: 1px solid #E5E7EB;
}

[b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select .mud-select-input {
    font-size: 18px;
    padding: 14px 16px;
}

[b-y4kxq5x5k9] .mobile-filter-row .time-period-select {
    flex: 1;
    min-width: 100px;
}

[b-y4kxq5x5k9] .mobile-filter-row .year-field-small {
    width: 100px;
}

[b-y4kxq5x5k9] .mobile-filter-row .compare-vs-label {
    font-size: 18px;
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
    padding: 0 4px;
}

/* Mobile Compare Toggle */
.mobile-compare-toggle[b-y4kxq5x5k9] {
    display: flex;
    align-items: center;
}

[b-y4kxq5x5k9] .mobile-compare-switch {
    font-size: 20px !important;
}

[b-y4kxq5x5k9] .mobile-compare-switch .mud-switch-label {
    font-size: 20px !important;
}

[b-y4kxq5x5k9] .mobile-compare-switch .mud-switch-base {
    width: 60px;
    height: 34px;
}

[b-y4kxq5x5k9] .mobile-compare-switch .mud-switch-thumb {
    width: 26px;
    height: 26px;
}

/* Show mobile filter section only on mobile screens */
@media (max-width: 768px) {
    .mobile-filter-section[b-y4kxq5x5k9] {
        display: flex;
    }
}

/* Adjust for very narrow screens */
@media (max-width: 390px) {
    .mobile-filter-section[b-y4kxq5x5k9] {
        padding: 0 18px;
        gap: 28px;
    }

    [b-y4kxq5x5k9] .mobile-electricity-toggle {
        height: 60px;
        padding: 6px;
    }

    [b-y4kxq5x5k9] .mobile-electricity-toggle .segmented-toggle-btn {
        font-size: 16px !important;
        height: 48px !important;
    }

    .mobile-filter-row[b-y4kxq5x5k9] {
        gap: 10px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select {
        height: 50px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select .mud-select-input {
        font-size: 16px;
        padding: 12px 14px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .year-field-small {
        width: 90px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .compare-vs-label {
        font-size: 16px;
        padding: 0 2px;
    }

    [b-y4kxq5x5k9] .mobile-compare-switch {
        font-size: 18px !important;
    }

    [b-y4kxq5x5k9] .mobile-compare-switch .mud-switch-label {
        font-size: 18px !important;
    }
}

@media (max-width: 350px) {
    .mobile-filter-section[b-y4kxq5x5k9] {
        padding: 0 16px;
        gap: 24px;
    }

    [b-y4kxq5x5k9] .mobile-electricity-toggle {
        height: 56px;
    }

    [b-y4kxq5x5k9] .mobile-electricity-toggle .segmented-toggle-btn {
        font-size: 15px !important;
        height: 44px !important;
    }

    .mobile-filter-row[b-y4kxq5x5k9] {
        gap: 8px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select {
        height: 48px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .filter-chip-select .mud-select-input {
        font-size: 15px;
        padding: 10px 12px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .year-field-small {
        width: 85px;
    }

    [b-y4kxq5x5k9] .mobile-filter-row .compare-vs-label {
        font-size: 15px;
    }

    [b-y4kxq5x5k9] .mobile-compare-switch {
        font-size: 17px !important;
    }

    [b-y4kxq5x5k9] .mobile-compare-switch .mud-switch-label {
        font-size: 17px !important;
    }
}

[b-y4kxq5x5k9] .mud-table-body tr:hover {
    background-color: #f9f9f9;
}

    [b-y4kxq5x5k9] .mud-table-body tr:focus-within {
        outline: 2px solid #4FC08D;
        outline-offset: -2px;
    }

[b-y4kxq5x5k9] .mud-table-cell {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* Icon button improvements */
[b-y4kxq5x5k9] .mud-icon-button {
    transition: all 0.2s ease;
    border-radius: 8px;
}

[b-y4kxq5x5k9] .mud-icon-button:hover {
    background-color: rgba(89, 74, 226, 0.08);
}

/* Toggle group improvements */
[b-y4kxq5x5k9] .mud-toggle-group {
    border-radius: 8px;
}

[b-y4kxq5x5k9] .mud-toggle-item {
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

    [b-y4kxq5x5k9] .mud-toggle-item:focus-visible {
        outline: 2px solid #4FC08D;
        outline-offset: -2px;
        z-index: 1;
    }

/* Cost Toggle Switch */
[b-y4kxq5x5k9] .cost-toggle-switch {
    border-radius: 8px;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

[b-y4kxq5x5k9] .cost-toggle-switch .mud-switch {
    margin: 0;
}

[b-y4kxq5x5k9] .cost-toggle-switch label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #6B7280;
}

/* Time Period Selector and Date Picker Styling */
[b-y4kxq5x5k9] .time-period-select,
[b-y4kxq5x5k9] .date-picker-field {
    background-color: white;
    border-radius: 6px;
}

[b-y4kxq5x5k9] .time-period-select .mud-input,
[b-y4kxq5x5k9] .date-picker-field .mud-input {
    font-size: 0.875rem;
    font-weight: 500;
}

[b-y4kxq5x5k9] .time-period-select .mud-select,
[b-y4kxq5x5k9] .date-picker-field .mud-input-control {
    min-height: 36px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .metric-card[b-y4kxq5x5k9] {
        border: 2px solid currentColor;
    }

    [b-y4kxq5x5k9] .mud-table {
        border: 2px solid currentColor;
    }

    [b-y4kxq5x5k9] .mud-table-head th {
        border-bottom: 3px solid currentColor;
    }

}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .metric-card[b-y4kxq5x5k9],
    [b-y4kxq5x5k9] .mud-icon-button,
    [b-y4kxq5x5k9] .mud-toggle-item {
        transition: none !important;
    }

    .metric-card:hover[b-y4kxq5x5k9] {
        transform: none !important;
    }
}

/* Responsive improvements */
@media (max-width: 960px) {
    .metric-card[b-y4kxq5x5k9] {
        padding: 20px 16px;
    }
}

@media (max-width: 600px) {
    [b-y4kxq5x5k9] .mud-stack.mb-3 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
}

/* Print styles */
@media print {
    .electricity-container[b-y4kxq5x5k9] {
        background: white !important;
        box-shadow: none !important;
    }

    .metric-card[b-y4kxq5x5k9] {
        border: 1px solid #000;
        background: white !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    [b-y4kxq5x5k9] .mud-icon-button,
    [b-y4kxq5x5k9] .mud-toggle-group {
        display: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.spot-price-container[b-0v8vjx3bqc] {
    box-sizing: border-box;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 80%;
}

@media (min-width: 1600px) {
    .spot-price-container[b-0v8vjx3bqc] {
        width: 60%;
    }
}

@media (max-width: 991.98px) {
    .spot-price-container[b-0v8vjx3bqc] {
        width: 100%;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────── */
.login-page[b-x0pzg9aimf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* ── Form card ─────────────────────────────────────── */
.login-form-card[b-x0pzg9aimf] {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 32px 40px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow:
        0px 16px 20px rgba(15, 23, 42, 0.1),
        0px 4px 6px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Mobile: 40px side padding leaves only ~208px of content width on a
   320px viewport — 4px short of the 4x44px OTP boxes + 3x12px gaps
   (212px) below, which otherwise clips/overflows the card horizontally. */
@media (max-width: 767.98px) {
    .login-form-card[b-x0pzg9aimf] {
        padding: 24px 16px;
    }
}

/* Groups the back arrow + title/subtitle at 16px gap (CustomerNumber + Otp screens). */
.login-header[b-x0pzg9aimf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.login-header > div[b-x0pzg9aimf] {
    width: 100%;
}

/* Back arrow — a bare 16x16 black icon, no button chrome */
[b-x0pzg9aimf] .login-back-button.mud-icon-button {
    padding: 0;
    color: #000000 !important;
}

[b-x0pzg9aimf] .login-back-button svg {
    width: 16px;
    height: 16px;
}

/* ── MudText typography overrides ────────────────────────────────── */
/* ::deep required: MudText renders its own <p>, which doesn't inherit
   the parent component's CSS isolation scope attribute. */

/* heading — Roboto Bold 32px / lh 40px / #000 (Landing + CustomerNumber screens) */
[b-x0pzg9aimf] .login-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    margin-bottom: 0;
}

/* heading — Roboto Bold 24px / lh 32px / #000 (Otp screen only — smaller h4-scale title) */
[b-x0pzg9aimf] .otp-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    margin-bottom: 0;
}

/* body/sm — Roboto Regular 14px / lh 20px / #5D6472 */
[b-x0pzg9aimf] .login-subtitle {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #5D6472 !important;
    max-width: 400px;
}

/* ── Landing: button stack ───────────────────────────────────────── */
.login-actions[b-x0pzg9aimf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Pill shape + 44px height + reset MudBlazor text-transform */
[b-x0pzg9aimf] .btn-login-pill.mud-button-root {
    height: 44px !important;
    border-radius: 120px !important;
    text-transform: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* MitID brand blue */
[b-x0pzg9aimf] .btn-mitid.mud-button-filled {
    background-color: #0060E6 !important;
    color: #FFFFFF !important;
}

/* Outlined button */
[b-x0pzg9aimf] .btn-login-outline.mud-button-outlined {
    border-color: #272C34 !important;
    color: #000000 !important;
}

/* MitID logo — fixed to its native wide aspect ratio; do not shrink to a square icon size */
.mitid-icon[b-x0pzg9aimf] {
    width: 50px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Landing: "or" divider between MitID and customer-number buttons ────── */
[b-x0pzg9aimf] .login-divider {
    width: 100%;
}

[b-x0pzg9aimf] .login-divider-line.mud-divider {
    flex: 1 1 auto;
    border: none;
    height: 1px;
}

/* Fades in toward the "or" text (transparent at the outer/left edge) */
[b-x0pzg9aimf] .login-divider-line-start.mud-divider {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #E0E0E0 100%);
}

/* Fades out away from the "or" text (transparent at the outer/right edge) */
[b-x0pzg9aimf] .login-divider-line-end.mud-divider {
    background: linear-gradient(90deg, #E0E0E0 0%, rgba(255, 255, 255, 0) 100%);
}

[b-x0pzg9aimf] .login-divider-text {
    color: #000000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap;
}

/* ── Landing: legal footer ───────────────────────────────────────── */
[b-x0pzg9aimf] .legal-text {
    color: rgba(0, 0, 0, 0.54) !important;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

[b-x0pzg9aimf] .legal-link.mud-link {
    color: #424242 !important;
    font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
}

/* ── Customer number screen ──────────────────────────────────────── */
[b-x0pzg9aimf] .send-code-hint {
    color: #5D6472 !important;
}

[b-x0pzg9aimf] .customer-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[b-x0pzg9aimf] .field-label {
    color: #272C34 !important;
    font-weight: 600 !important;
    display: block;
    margin-bottom: 8px;
}

.field-required[b-x0pzg9aimf] {
    color: #982A2A;
    font-weight: 500;
    font-size: 16px;
    margin-left: 4px;
}

/* Outlined input border colour/radius, overriding the MudBlazor default */
[b-x0pzg9aimf] .customer-number-field .mud-input-outlined-border {
    border-color: #C2C7D3;
    border-radius: 8px;
}

[b-x0pzg9aimf] .customer-number-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #C2C7D3;
}

[b-x0pzg9aimf] .customer-number-field input {
    height: 44px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    color: #000000;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

[b-x0pzg9aimf] .customer-number-field input::placeholder {
    color: #5D6472;
    opacity: 1;
}

.field-error-row[b-x0pzg9aimf] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
}

[b-x0pzg9aimf] .field-error-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[b-x0pzg9aimf] .field-error-text {
    color: #982A2A !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

/* Action button (Send code / Continue / Login) — pill shaped, 48px tall */
[b-x0pzg9aimf] .btn-login-action.mud-button-root {
    height: 48px !important;
    border-radius: 120px !important;
    text-transform: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

[b-x0pzg9aimf] .btn-login-action.mud-button-root:disabled {
    background-color: rgba(162, 170, 178, 0.24) !important;
    color: #4D535F !important;
    opacity: 1 !important;
}

/* ── OTP screen ──────────────────────────────────────────────────── */
.otp-email[b-x0pzg9aimf] {
    color: #000000;
    font-weight: 600;
    font-style: normal;
}

/* Groups the otp-input block + action-button block with a consistent 24px gap */
.otp-content[b-x0pzg9aimf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.otp-section[b-x0pzg9aimf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Groups the 4 boxes for screen readers via <legend>, with no visible border. */
.otp-fieldset[b-x0pzg9aimf] {
    border: none;
    margin: 0;
    padding: 0;
}

.otp-inputs[b-x0pzg9aimf] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Raw <input> justified: MudTextField cannot be constrained to a 44x44px single-char box */
.otp-box[b-x0pzg9aimf] {
    width: 44px;
    height: 44px;
    border: 1px solid #C2C7D3;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #424242;
    outline: none;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.otp-box:focus[b-x0pzg9aimf] {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
}

[b-x0pzg9aimf] .retry-text {
    color: #4D535F !important;
}

[b-x0pzg9aimf] .muted-link.mud-link {
    color: #4D535F !important;
    font-weight: 600;
    font-size: 12px;
}

.otp-actions[b-x0pzg9aimf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* "Log in another way? Back to login" — two-tone footer link */
[b-x0pzg9aimf] .login-another-way {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #000000 !important;
    text-align: left;
}

/* MudButton updated to look identical to inline underlined text.
   Color comes from the Color.Secondary prop */
[b-x0pzg9aimf] .login-another-way-link.mud-button-root {
    display: inline !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: var(--mud-typography-body2-size) !important;
    font-weight: 500 !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
}

/* The actual text sits in this inner span, which defaults to width:100% — without
   resetting it too, the button's footprint stays wide even with the root's padding zeroed. */
[b-x0pzg9aimf] .login-another-way-link.mud-button-root .mud-button-label {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

[b-x0pzg9aimf] .login-another-way-link.mud-button-root:hover {
    background: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}
/* /Components/Pages/Maintenance.razor.rz.scp.css */
.maintenance-page[b-3rjfwq8yqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 16px;
    box-sizing: border-box;
}

/* MudPaper renders in its own component scope, so its root element needs ::deep
   to be reachable from this file's isolated stylesheet. */
[b-3rjfwq8yqg] .maintenance-card {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 560px;
    padding: 40px 48px;
    background: #FFFFFF !important;
    border-radius: 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.maintenance-logo[b-3rjfwq8yqg] {
    max-height: 40px;
    width: auto;
    margin-bottom: 4px;
}

[b-3rjfwq8yqg] .maintenance-card:focus-visible,
.maintenance-logo:focus-visible[b-3rjfwq8yqg],
[b-3rjfwq8yqg] .maintenance-heading:focus-visible,
[b-3rjfwq8yqg] .maintenance-message:focus-visible {
    outline: 3px solid #4FC08D;
    outline-offset: 2px;
    border-radius: 4px;
}

[b-3rjfwq8yqg] .maintenance-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    color: #1B2559 !important;
    margin: 0;
}

[b-3rjfwq8yqg] .maintenance-message {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #5D6472 !important;
    max-width: 420px;
}

[b-3rjfwq8yqg] .maintenance-divider {
    width: 60%;
    margin: 8px auto;
}

[b-3rjfwq8yqg] .maintenance-support {
    width: 100%;
    align-items: center;
}

[b-3rjfwq8yqg] .maintenance-support-intro {
    color: #272C34 !important;
    font-weight: 500 !important;
}

[b-3rjfwq8yqg] .maintenance-contact-divider {
    height: 20px;
}

[b-3rjfwq8yqg] .maintenance-contact-link.mud-link {
    display: inline-flex;
    align-items: center;
    color: #1B2559 !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

@media (max-width: 600px) {
    [b-3rjfwq8yqg] .maintenance-card {
        padding: 32px 24px;
        gap: 12px;
    }

    [b-3rjfwq8yqg] .maintenance-heading {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-page[b-k60krchu2h] {
    --privacy-bg: #f5f7f8;
    --privacy-card-bg: #ffffff;
    --privacy-primary: #0f766e;
    --privacy-success: #15803d;
    --privacy-heading: #0f172a;
    --privacy-secondary-text: #64748b;
    --privacy-border: #e5e7eb;
    background: var(--privacy-bg);
    min-height: 100vh;
    font-family: Inter, Roboto, sans-serif;
    color: var(--privacy-heading);
    display: flex;
    justify-content: center;
    padding: 27px 134px;
    box-sizing: border-box;
    --mud-palette-primary: var(--privacy-primary);
    --mud-palette-primary-rgb: 15, 118, 110;
    --mud-palette-primary-text: #fff;
}

[b-k60krchu2h] .privacy-card.mud-paper {
    width: 100%;
    max-width: 1440px;
    border-radius: 12px !important;
    border: 1px solid var(--privacy-border) !important;
    background: var(--privacy-card-bg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* HEADER */

.privacy-header[b-k60krchu2h] {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 56px;
    background: var(--privacy-card-bg);
    border-bottom: 1px solid var(--privacy-border);
    flex-wrap: wrap;
}

.privacy-logo-img[b-k60krchu2h] {
    max-height: 32px;
    width: auto;
}

/* CONTENT */

.privacy-content[b-k60krchu2h] {
    max-width: 100%;
    padding: 64px 56px 96px;
}

/* HERO */

.privacy-hero[b-k60krchu2h] {
    padding-bottom: 16px;
}

[b-k60krchu2h] .privacy-hero-title.mud-typography {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    padding-top:30px;
    letter-spacing: -2px;
    color: var(--privacy-heading);
}

/* Blazor's FocusOnNavigate (App.razor) programmatically focuses this h1 on every
   navigation to announce the page to screen readers. The global :focus-visible
   outline rule (global.css) then paints a visible ring around it even though no
   keyboard interaction happened. Suppress it here; real keyboard focus on the
   page's interactive elements (links, chips, etc.) is unaffected. */
[b-k60krchu2h] .privacy-hero-title.mud-typography:focus-visible {
    outline: none;
}

[b-k60krchu2h] .privacy-hero-intro.mud-typography {
    max-width: 900px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

/* SECTIONS */

.privacy-section[b-k60krchu2h] {
    margin-top: 56px;
}

[b-k60krchu2h] .privacy-section-heading.mud-typography {
    font-size: 26px;
    font-weight: 700;
    color: var(--privacy-heading);
    margin-bottom: 16px;
}

.privacy-body-text[b-k60krchu2h] {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

/* PURPOSES / LEGAL BASIS TABLE */

[b-k60krchu2h] .privacy-table.mud-table-container {
    border-radius: 12px;
    border: 1px solid var(--privacy-border);
    overflow: hidden;
}

[b-k60krchu2h] .privacy-table th {
    background: #f8fafc;
    color: var(--privacy-heading);
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    padding: 14px 20px;
}

[b-k60krchu2h] .privacy-table td {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
    padding: 14px 20px;
    border-top: 1px solid var(--privacy-border);
}

/* CATEGORIES OF PERSONAL DATA */

.privacy-bullet-list[b-k60krchu2h] {
    margin: 0;
    padding-left: 22px;
    list-style: none;
}

    .privacy-bullet-list li[b-k60krchu2h] {
        position: relative;
        padding-left: 4px;
        margin-bottom: 8px;
    }

        .privacy-bullet-list li[b-k60krchu2h]::before {
            content: "\2022";
            position: absolute;
            left: -18px;
            color: var(--privacy-primary);
            font-weight: 700;
            font-size: 18px;
        }

        .privacy-bullet-list li .mud-typography[b-k60krchu2h] {
            color: #475569;
            font-size: 16px;
            line-height: 1.8;
        }

.privacy-bullet-list-columns[b-k60krchu2h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

/* DIVIDER BETWEEN SECTIONS */

[b-k60krchu2h] .privacy-section-divider.mud-divider {
    margin-top: 56px;
    margin-bottom: 40px;
    border-color: var(--privacy-border);
}

/* BOTTOM TWO-COLUMN SECTION */

.privacy-bottom-grid[b-k60krchu2h] {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.privacy-bottom-col[b-k60krchu2h] {
    flex: 1 1 0;
    min-width: 0;
}

    .privacy-bottom-col .privacy-section[b-k60krchu2h] {
        margin-top: 0;
    }

[b-k60krchu2h] .privacy-bottom-divider.mud-divider-vertical {
    align-self: stretch;
    border-color: var(--privacy-border);
}

/* CONTACT CARDS */

[b-k60krchu2h] .privacy-contact-mini-card.mud-paper {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 14px !important;
    border: 1px solid var(--privacy-border) !important;
    background: var(--privacy-card-bg);
}

[b-k60krchu2h] .privacy-contact-mini-icon.mud-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: #ecfdf5 !important;
    color: var(--privacy-success) !important;
}

[b-k60krchu2h] .privacy-contact-mini-label.mud-typography {
    color: var(--privacy-secondary-text);
    font-size: 13px;
}

[b-k60krchu2h] .privacy-contact-mini-value.mud-link {
    color: var(--privacy-heading);
    font-weight: 600;
    font-size: 15px;
}

/* FOOTER STRIP */

.privacy-footer-strip[b-k60krchu2h] {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 56px;
    background: #f8fafc;
    border-top: 1px solid var(--privacy-border);
}

.privacy-muted-text[b-k60krchu2h] {
    color: var(--privacy-secondary-text);
}

/* TABLET */

@media (max-width: 1024px) {
    .privacy-page[b-k60krchu2h] {
        padding: 24px;
    }

    .privacy-header[b-k60krchu2h],
    .privacy-footer-strip[b-k60krchu2h] {
        padding-inline: 32px;
    }

    .privacy-content[b-k60krchu2h] {
        padding: 48px 32px 64px;
    }

    [b-k60krchu2h] .privacy-hero-title.mud-typography {
        font-size: 48px;
    }

    .privacy-bullet-list-columns[b-k60krchu2h] {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */

@media (max-width: 768px) {
    .privacy-page[b-k60krchu2h] {
        padding: 0;
    }

    [b-k60krchu2h] .privacy-card.mud-paper {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .privacy-header[b-k60krchu2h] {
        height: auto;
        padding: 16px 20px;
        gap: 12px;
    }

    .privacy-header-actions[b-k60krchu2h] {
        width: 100%;
        justify-content: space-between;
    }

    .privacy-content[b-k60krchu2h] {
        padding: 32px 20px 56px;
    }

    [b-k60krchu2h] .privacy-hero-title.mud-typography {
        font-size: 32px;
        letter-spacing: -1px;
    }

    [b-k60krchu2h] .privacy-section-heading.mud-typography {
        font-size: 21px;
    }

    [b-k60krchu2h] .privacy-table th,
    [b-k60krchu2h] .privacy-table td {
        padding: 12px;
        font-size: 14px;
    }

    .privacy-bottom-grid[b-k60krchu2h] {
        flex-direction: column;
        gap: 32px;
    }

    [b-k60krchu2h] .privacy-bottom-divider.mud-divider-vertical {
        width: 100%;
        height: 1px;
        border-top: 1px solid var(--privacy-border);
        border-right: none;
    }

    .privacy-footer-strip[b-k60krchu2h] {
        padding-inline: 20px;
        height: auto;
        padding-block: 16px;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ── Width constraint: half the page ─────────────────── */
.profile-content[b-l29zpql9t7] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
    min-width: 320px;
}

/* Tablet/mobile: the 320px floor above overflows any viewport narrower
   than ~352px (320px + page padding) and stays needlessly cramped well
   past that — let the column use the full available width instead. */
@media (max-width: 991.98px) {
    .profile-content[b-l29zpql9t7] {
        width: 100%;
        min-width: 0;
    }
}

/* ── Section group (heading + cards) ─────────────────── */
.profile-group[b-l29zpql9t7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Cards wrapper ─────────────────────────────────────── */
.profile-cards[b-l29zpql9t7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Section heading label ─────────────────────────────── */
.section-label[b-l29zpql9t7] {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #272c34 !important;
    letter-spacing: -0.08px;
}

/* ── Individual field card ─────────────────────────────── */
.profile-field[b-l29zpql9t7] {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    min-height: 60px;
    background-color: #f9f9f9;
    border-radius: 12px;
}

.profile-field-icon[b-l29zpql9t7] {
    color: #6b7280;
    flex-shrink: 0;
    font-size: 20px !important;
}

.profile-field-content[b-l29zpql9t7] {
    flex: 1;
    min-width: 0;
}

.profile-field-label[b-l29zpql9t7] {
    font-size: 12px;
    color: #272c34;
    margin-bottom: 2px;
    font-weight: 400;
}

.profile-field-value[b-l29zpql9t7] {
    font-size: 14px;
    color: #575757;
    font-weight: 500;
}

.profile-edit-field[b-l29zpql9t7] {
    margin-top: -4px;
}

/* ── Focus ring for keyboard navigation ────────────────── */
[b-l29zpql9t7] .profile-field .mud-icon-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

[b-l29zpql9t7] .profile-field .mud-icon-button:focus-visible .mud-icon-button-label {
    border-radius: 4px;
}

/* ── Screen-reader-only utility (WCAG 1.4.1) ──────────── */
.visually-hidden[b-l29zpql9t7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/EgProductAttribution.razor.rz.scp.css */
.eg-product-attribution[b-034a79h9vu] {
    /* EG brand palette for this component — swap a value here to restyle every usage */
    --eg-color-navy: #424D60;
    --eg-color-white: #FFFFFF;
    --eg-color-red: #EF0304;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--eg-color-red);
    text-decoration: none;
    border-radius: 4px;
}

    .eg-product-attribution.eg-product-attribution-white[b-034a79h9vu] {
        color: var(--eg-color-white);
        background-color: rgb(86 72 72 / 6%);
    }

.eg-product-attribution.eg-product-attribution-navy[b-034a79h9vu] {
    color: var(--eg-color-navy);
}

.eg-product-attribution:hover[b-034a79h9vu],
.eg-product-attribution:focus-visible[b-034a79h9vu] {
    text-decoration: underline;
}

.eg-product-attribution:focus-visible[b-034a79h9vu] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.eg-product-attribution-icon[b-034a79h9vu] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.eg-product-attribution-text[b-034a79h9vu] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: inherit;
    white-space: nowrap;
}
/* /Components/Shared/ErrorPageCard.razor.rz.scp.css */
/* EGU-3519 / EGU-3520: the "Go to Home" CTA rendered white text on the
   tenant-configurable brand primary color, which defaults to #198b5e -
   only a 4.28:1 contrast ratio against white, failing WCAG 2.1 AA's 4.5:1
   minimum (SC 1.4.3). This is the only actionable element on an error page,
   so its contrast can't depend on whatever a tenant sets as their brand
   color - fix it here with a fixed, verified-AA-compliant dark green
   (~4.9:1 with white text) instead of the themeable Color.Primary. Scoping
   to ErrorPageCard means every page that reuses it (404, 500, 401, 403)
   gets the fix in one place. */
[b-ejhlvqicnb] .error-page-primary-action.mud-button-filled-primary {
    background-color: #16805a !important;
    color: #ffffff !important;
}

[b-ejhlvqicnb] .error-page-primary-action.mud-button-filled-primary:hover {
    background-color: #106b4a !important;
}
/* /Components/Shared/FilterChipSelect.razor.rz.scp.css */
/* Filter chip — restyles the outlined MudSelect as a compact chip with a thin
   divider border and caret, used on the Consumption card and elsewhere for
   pill-shaped single-value dropdowns.
   Note: the chip's visible border radius is 8px (mud-sm-border-radius), NOT a
   pill — only the inner hover/press "state layer" (invisible at rest) uses a
   120px radius; don't round the visible border to match it. */

[b-t6m72v1jub] .filter-chip-select {
    flex-shrink: 0;
}

[b-t6m72v1jub] .filter-chip-select .mud-input {
    margin-bottom: 0 !important;
}

[b-t6m72v1jub] .filter-chip-select .mud-input-outlined-border {
    border-radius: var(--mud-default-borderradius, 8px) !important;
    border-color: var(--mud-palette-divider) !important;
}

[b-t6m72v1jub] .filter-chip-select .mud-select-input {
    min-height: 32px;
    padding: 6px 8px 6px 12px;
}

[b-t6m72v1jub] .filter-chip-select .mud-select-icon .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/Footer.razor.rz.scp.css */
/* ── Default (post-auth / MainLayout) variant — in normal document flow ──── */
.app-footer[b-np4ikk3zhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    padding: 8px 24px;
    margin-top: 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.app-footer-copyright[b-np4ikk3zhx] {
    white-space: nowrap;
}

[b-np4ikk3zhx] .app-footer-link.mud-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #000000 !important;
}

[b-np4ikk3zhx] .app-footer-newtab-icon {
    font-size: 1rem !important;
    flex-shrink: 0;
}

[b-np4ikk3zhx] .app-footer-accessibility-icon {
    font-size: 1rem !important;
    flex-shrink: 0;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

/* Visible keyboard focus indicator; hidden for mouse/pointer interaction */
[b-np4ikk3zhx] .app-footer-link.mud-link:focus-visible {
    outline: 2px solid #4FC08D;
    outline-offset: 2px;
    border-radius: 2px;
}

[b-np4ikk3zhx] .app-footer-link.mud-link:focus:not(:focus-visible) {
    outline: none;
}

/* ── Login-screen (pre-auth) variant — fixed to the viewport, since
   LoginLayout sets html { overflow: hidden } and disables page scroll ──── */
.app-footer-dark[b-np4ikk3zhx] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin-top: 0;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    color: #FFFFFF;
}

.app-footer-dark[b-np4ikk3zhx]  .app-footer-link.mud-link {
    color: #FFFFFF !important;
}

.app-footer-dark[b-np4ikk3zhx]  .app-footer-link.mud-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .app-footer[b-np4ikk3zhx] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .app-footer-dark[b-np4ikk3zhx] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }
}
/* /Components/Shared/IconMenuSelect.razor.rz.scp.css */
/* Collapsed icon+caret dropdown chip — an icon-only trigger for a menu of
   choices (e.g. the chart-type picker on the Consumption card), styled to
   match the pill-shaped FilterChipSelect it sits alongside.
   Note: the chip's visible border radius is 8px (mud-sm-border-radius), NOT a
   pill — only the inner hover/press "state layer" (invisible at rest) uses a
   120px radius; don't round the visible border to match it. */

[b-ddl752c8oj] .icon-menu-select {
    flex-shrink: 0;
}

[b-ddl752c8oj] .icon-menu-select .mud-button-root {
    border-radius: var(--mud-default-borderradius, 8px) !important;
    border-color: var(--mud-palette-divider) !important;
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
}
/* /Components/Shared/LocationMultiSelect.razor.rz.scp.css */
.location-multiselect-wrapper[b-eb2mr58nhh] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}

.location-trigger-btn[b-eb2mr58nhh] {
    text-transform: none !important;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Spinner inside the trigger button */
[b-eb2mr58nhh] .trigger-spinner {
    width: 16px !important;
    height: 16px !important;
}

/* Loading bar sits flush below the trigger button, matching its width exactly */
.location-loading-bar[b-eb2mr58nhh] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 4px 4px;
}

.location-dropdown-panel[b-eb2mr58nhh] {
    min-width: 360px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.location-list[b-eb2mr58nhh] {
    overflow-y: auto;
    height: 360px;
    min-width: 280px;
}

.utility-icon-box[b-eb2mr58nhh] {
    display: flex;
    padding: 6px;
    align-items: center;
    justify-content: center;

    border-radius: 4px;
    background: #F6F7F7;
}

[b-eb2mr58nhh] .utility-icon {
    font-size: 13px; /* overrides MudIcon default size */
    color: var(--app-primary-color);
    flex-shrink: 0;
}

.search-icon-btn[b-eb2mr58nhh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 4px;
    transition: background-color 0.15s ease;
}

.search-icon-btn:hover[b-eb2mr58nhh] {
    background-color: rgba(0, 0, 0, 0.04);
}

.search-icon-btn:focus-visible[b-eb2mr58nhh] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    background-color: rgba(0, 0, 0, 0.04);
}
/* /Components/Shared/LocationSelectionChips.razor.rz.scp.css */
/* Main container */
.location-chips-bar[b-kz430p6p9a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
}

/* Viewing label */
.viewing-label[b-kz430p6p9a] {
    color: #757575;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Chips section */
.chips-area[b-kz430p6p9a] {
    flex: 1;
    min-width: 0;
}

/* Collapsed chips */
.chips-container[b-kz430p6p9a] {
    display: flex;
    gap: 6px;
    overflow: hidden;
}

/* Expanded chips */
.expanded-chips-bar[b-kz430p6p9a] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Chip style */
[b-kz430p6p9a] .location-chip {
    border-radius: 20px !important;
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    white-space: nowrap;
}

/* Overflow chip */
[b-kz430p6p9a] .overflow-chip {
    border-radius: 20px !important;
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    cursor: pointer;
}

    [b-kz430p6p9a] .overflow-chip:hover {
        background-color: #eeeeee !important;
    }
    [b-kz430p6p9a] .overflow-chip:focus-visible {
        outline: 2px solid #4FC08D;
        outline-offset: 2px;
        background-color: #eeeeee !important;
    }
    /* Clear all */
    .clear-all-link[b-kz430p6p9a] {
        color: #424242 !important;
        white-space: nowrap;
        flex-shrink: 0;
        cursor: pointer;
    }
/* /Components/Shared/SearchField.razor.rz.scp.css */
/* Sizing lives on this plain wrapper div, not on MudTextField's own root.
   MudBlazor's `.mud-input-control` ships `flex: 1 1 auto; max-width: 100%` — fighting
   that from outside via ::deep meant fighting its specificity/inheritance in every
   different parent context (flex row vs. block wrapper) it landed in. A plain div has
   none of that baggage: default flex-item behavior (flex-grow: 0) already stops it from
   growing in a flex-row parent (AppBar, multi-location-toolbar), and MudTextField's own
   width:auto simply fills it as a normal block child — no ::deep, no !important. */
.search-field-wrapper[b-5ovd1lrcaf] {
    width: 100%;
    min-width: 200px;
    max-width: 320px;
}
/* /Components/Shared/SegmentedToggle.razor.rz.scp.css */
.segmented-toggle[b-mvnkoo6a5t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    flex-wrap: wrap;
    border-radius: var(--border-radius-mud-6xl-border-radius, 40px);
    background-color: color-mix(in srgb, var(--mud-palette-action-default) 9.8%, transparent);
}

[b-mvnkoo6a5t] .segmented-toggle-btn {
    font-family: var(--typography-font-family-body, Roboto);
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 14px;
    box-shadow: none !important;
    border: none !important;
    border-radius: var(--border-radius-mud-6xl-border-radius, 40px) !important;
    min-width: 0 !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease !important;
    line-height: var(--line-height-body-sm, 20px); /* 142.857% */
}

/* Icon-mode items are square, not text-padded — override the wide horizontal padding above.
   Fixed width/height (not just symmetric padding) because MudIconButton's own line-height/box
   model isn't guaranteed square from padding alone — pin the box explicitly, as the original
   hand-rolled 30x30 buttons did. */
[b-mvnkoo6a5t] .segmented-toggle-icon-btn {
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MudIconButton only gets its compact "-size-small" button class when Variant is non-Text (i.e. the
   active/Filled item) — the inactive/Text item falls back to the plain .mud-icon-button-size-small rule,
   which uses a larger glyph font-size. Pin the icon glyph so active/inactive always render at the same size. */
[b-mvnkoo6a5t] .segmented-toggle-icon-btn .mud-icon-root {
    font-size: 1.125rem !important;
}

/* Active item: text-primary on an elevated white knob. Inactive items: text-secondary. */
[b-mvnkoo6a5t] .mud-button-text {
    color: var(--mud-palette-text-secondary) !important;
}

[b-mvnkoo6a5t] .mud-button-text:hover {
    background: color-mix(in srgb, var(--mud-palette-white) 40%, transparent) !important;
}

/* Icon buttons never get MudBlazor's own .mud-button-text color class (only added for non-default Color) — style directly. */
[b-mvnkoo6a5t] .segmented-toggle-icon-btn:not(.mud-button-filled) {
    color: var(--mud-palette-text-secondary) !important;
}

[b-mvnkoo6a5t] .segmented-toggle-icon-btn:not(.mud-button-filled):hover {
    background: color-mix(in srgb, var(--mud-palette-white) 40%, transparent) !important;
}

[b-mvnkoo6a5t] .mud-button-filled {
    background-color: var(--mud-palette-white) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[b-mvnkoo6a5t] .segmented-toggle-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--mud-palette-white), 0 0 0 4px var(--mud-palette-primary) !important;
    z-index: 1;
}

.segmented-toggle-count[b-mvnkoo6a5t] {
    font-size: 0.85em;
    opacity: 0.75;
    margin-left: 4px;
}
/* /Components/SpotPrice/SpotPriceCard.razor.rz.scp.css */
/* ── Card container ────────────────────────────────────────────── */
.spot-price-card.mud-paper[b-si95s0jqth],
.spot-price-card.mud-paper-outlined[b-si95s0jqth] {
    --mud-palette-lines-default: #EAECEF;
    --mud-default-borderradius: 16px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: none !important;
}

.spot-price-title[b-si95s0jqth] {
    font-weight: 200 !important;
    font-size: 16px;
    color: #111827;
}

.spot-price-date[b-si95s0jqth] {
    color: #6B7280;
    font-size: 0.8125rem;
}

/* ── Area selector ────────────────────────────────────────────── */
.area-selector[b-si95s0jqth]  .mud-button-root {
    border-radius: 8px !important;
    border: 1px solid #F3F4F6 !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    padding: 8px 18px !important;
    height: 44px !important;
    min-width: 0 !important;
    text-transform: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

    .area-selector[b-si95s0jqth]  .mud-button-root:hover {
        background-color: #F9FAFB !important;
        border-color: #E5E7EB !important;
    }

.area-selector[b-si95s0jqth]  .mud-button-label {
    text-transform: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    letter-spacing: 0 !important;
}

.area-selector[b-si95s0jqth]  .mud-button-icon-end {
    margin-left: 8px !important;
    margin-right: -4px !important;
}

    .area-selector[b-si95s0jqth]  .mud-button-icon-end .mud-icon-root {
        font-size: 1.25rem !important;
        color: #6B7280 !important;
    }

.area-description[b-si95s0jqth] {
    color: #9CA3AF;
    font-size: 0.75rem;
}

/* ── Metrics row ──────────────────────────────────────────────── */
/*.spot-metrics {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.spot-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spot-metric-center {
    text-align: center;
}

.spot-metric-right {
    text-align: right;
}

.spot-metric-label {
    font-size: 0.75rem;
    color: #6B7280 !important;
    font-weight: 400;
}

.spot-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.spot-metric-unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    margin-left: 2px;
}

.spot-metric-highest .spot-metric-value,
.spot-metric-highest .spot-metric-unit {
    color: #111827;
}*/
/* ── Metrics row ──────────────────────────────────────────────── */
.spot-metrics[b-si95s0jqth] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.spot-metric[b-si95s0jqth] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.spot-metric-center[b-si95s0jqth] {
    text-align: left;
}

.spot-metric-right[b-si95s0jqth] {
    text-align: right;
}

.spot-metric-label[b-si95s0jqth] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-size: 0.75rem;
    color: #6B7280 !important;
    font-weight: 400;
}

.spot-metric-value[b-si95s0jqth] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.spot-metric-unit[b-si95s0jqth] {
    font-size: 0.70rem;
    font-weight: 500;
    color: #374151;
    margin-left: 2px;
}

.spot-metric-highest .spot-metric-value[b-si95s0jqth],
.spot-metric-highest .spot-metric-unit[b-si95s0jqth] {
    color: #111827;
}

/* ── Metrics row on mobile ────────────────────────────────────────
   The desktop rule above uses flex-wrap:wrap, which is fine when all
   three values are short (hourly, e.g. "2.2 kr/kWh") — but the 15-min
   view's longer øre values (e.g. "125.62 öre/kWh") made the widest
   metric wrap onto its own line, breaking the 3-across layout into an
   uneven 2+1 stack. Force a single row and let each equal-width column
   wrap its own value/unit onto a second line instead. */
@media (max-width: 767.98px) {
    .spot-metrics[b-si95s0jqth] {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .spot-metric[b-si95s0jqth] {
        flex: 1 1 0;
        min-width: 0;
    }

    .spot-metric-value[b-si95s0jqth] {
        font-size: 1rem;
    }

    .spot-metric-unit[b-si95s0jqth] {
        font-size: 0.65rem;
    }
}

/* ── Selected price badge ─────────────────────────────────────── */
.selected-price-badge[b-si95s0jqth] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.selected-badge-time[b-si95s0jqth] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.selected-badge-circle[b-si95s0jqth] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: #1F2937;
    color: #F9FAFB;
    border-radius: 20px;
    padding: 4px 14px;
    font-weight: 700;
}

.selected-badge-price[b-si95s0jqth] {
    font-size: 1rem;
    font-weight: 700;
}

.selected-badge-unit[b-si95s0jqth] {
    font-size: 0.7rem;
    color: #9CA3AF;
}

/* ── Metrics hidden state (preserves height when no data) ────── */
.spot-metrics-hidden[b-si95s0jqth] {
    visibility: hidden;
}

/* ── Content placeholder ──────────────────────────────────────── */
.spot-content-area[b-si95s0jqth] {
    height: 280px;
    overflow: hidden;
}

/* ── Chart skeleton (loading state) ─────────────────────────────── */
.spot-chart-skeleton[b-si95s0jqth] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100%;
    width: 100%;
}

.spot-chart-skeleton-bar.mud-skeleton[b-si95s0jqth] {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 4px 4px 0 0 !important;
}

/* ── Metric colour swatches (double as the chart's colour legend) ─── */
.spot-legend-swatch[b-si95s0jqth] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    background-repeat: repeat;
}

.spot-legend-swatch-sm[b-si95s0jqth] {
    width: 12px;
    height: 14px;
    border-radius: 3px;
}

/* Mirrors barDecal in SpotPriceChartOptions.cs — diagonal stripe texture on normal bars */
.spot-legend-swatch-stripe[b-si95s0jqth] {
    background-image: repeating-linear-gradient(45deg,
        rgba(0, 0, 0, 0.45) 0,
        rgba(0, 0, 0, 0.45) 1px,
        transparent 1px,
        transparent 4px);
}

/* Mirrors dotDecal in SpotPriceChartOptions.cs — dot texture on the highest bar */
.spot-legend-swatch-dot[b-si95s0jqth] {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.45) 1px, transparent 1.2px);
    background-size: 4px 4px;
}

/* Mirrors checkerDecal in SpotPriceChartOptions.cs — axis-aligned checkerboard texture on the lowest bar */
.spot-legend-swatch-checker[b-si95s0jqth] {
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, 0.75) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.75) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.75) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.75) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

/* ── Focus indicators (WCAG 2.1 AA) ──────────────────────────── */
/* ::deep is required so this reaches into child components (e.g. MudButton's
   internal <button>), which don't carry this file's CSS-isolation scope attribute. */
.spot-price-card[b-si95s0jqth]  *:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Responsive chart height (tablet/mobile) ─────────────────────
   ::deep needed because EChart is a child component; !important beats
   the inline style="height:280px" it renders. .spot-content-area wraps
   it at a matching fixed height so shrinking the chart alone doesn't
   leave a blank gap underneath. */
@media (max-width: 991.98px) {
    [b-si95s0jqth] .spot-price-chart {
        height: 240px !important;
    }

    .spot-content-area[b-si95s0jqth] {
        height: 240px;
    }
}

@media (max-width: 767.98px) {
    [b-si95s0jqth] .spot-price-chart {
        height: 220px !important;
    }

    .spot-content-area[b-si95s0jqth] {
        height: 220px;
    }
}

/* ── 15-min chart paging (mobile only) ────────────────────────────
   Desktop/tablet: the chart fills 100% width exactly as before — no
   arrows, no windowing (echartsInterop.js leaves dataZoom at 0–100%).
   Mobile: echartsInterop.js narrows the chart's own dataZoom window to
   one page of bars, so the y-axis/grid never move — only the bars pan,
   driven by the two arrow buttons (hidden everywhere else) dispatching
   a dataZoom action, not by scrolling any DOM element. */
.spot-chart-scroll-outer[b-si95s0jqth] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

[b-si95s0jqth] .spot-chart-nav {
    display: none !important;
}

@media (max-width: 767.98px) {
    [b-si95s0jqth] .spot-chart-nav {
        display: inline-flex !important;
        flex-shrink: 0;
    }

    [b-si95s0jqth] .spot-price-chart {
        min-width: 0;
    }
}

/* ── Mobile toolbar split: desktop keeps its single-row layout; mobile
   shows the view toggle alongside the day toggle and drops the
   resolution switch below the metrics row (see SpotPriceCard.razor) ── */
.spot-toolbar-mobile[b-si95s0jqth],
.spot-resolution-mobile[b-si95s0jqth] {
    display: none;
}

@media (max-width: 767.98px) {
    .spot-toolbar-desktop[b-si95s0jqth] {
        display: none;
    }

    .spot-toolbar-mobile[b-si95s0jqth],
    .spot-resolution-mobile[b-si95s0jqth] {
        display: block;
    }

    .spot-price-card.pa-6[b-si95s0jqth] {
        padding: 16px !important;
    }
}
/* /Components/SpotPrice/SpotPriceTable.razor.rz.scp.css */
/* Wrapper */
.spot-price-table-wrapper[b-6qtj44pikr] {
    overflow-x: auto;
    height: 280px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
}

.spot-price-table[b-6qtj44pikr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Header */
.spt-th[b-6qtj44pikr] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
    color: #111827;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 12px 16px;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
}

.spt-th.spt-time-col[b-6qtj44pikr] {
    text-align: left;
}

.spt-th.spt-cost-col[b-6qtj44pikr] {
    text-align: left;
}

/* Cells */
.spt-td[b-6qtj44pikr] {
    padding: 10px 16px;
    border-bottom: 1px solid #F3F4F6;
    color: #374151;
    vertical-align: middle;
}

.spt-time-col[b-6qtj44pikr] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spt-cost-col[b-6qtj44pikr] {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* Row states */
.spt-row[b-6qtj44pikr] {
    cursor: pointer;
    transition: background 0.1s;
}

.spt-row:hover[b-6qtj44pikr] {
    background: #F9FAFB;
}

.spt-row:focus-visible[b-6qtj44pikr] {
    outline: 2px solid #4F46E5;
    outline-offset: -2px;
}

.spt-row-selected[b-6qtj44pikr] {
    background: #EFF6FF !important;
}

.spt-row-selected .spt-td[b-6qtj44pikr] {
    color: #1D4ED8;
    font-weight: 600;
}

/* Hour-group divider (15-min resolution) */
.spt-row-group-divider td[b-6qtj44pikr] {
    padding: 0;
    height: 12px;
    border-bottom: none;
    background: transparent;
}

/* Cost cell: icon + value */
.spt-cost-wrap[b-6qtj44pikr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spt-cost-icon[b-6qtj44pikr] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.spt-cost-down[b-6qtj44pikr] {
    color: #16A34A;
}

.spt-cost-up[b-6qtj44pikr] {
    color: #DC2626;
}

/* Cost cell value */
.spt-cost-value[b-6qtj44pikr] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: #111827;
}
/* /Layout/AppBar.razor.rz.scp.css */
/* This file is intentionally near-empty. AppBar.razor's own top-level element is
   <MudAppBar>, a component rather than raw HTML, so ::deep rules here have no
   scoped ancestor to anchor to and silently match nothing (same reasoning as the
   .right-pane/.app-header-bar comment in app.css). Every rule that needs to reach
   into AppBar's child components (search field styling, hamburger/logo/search-wrap
   responsive rules, trailing-actions rules) lives in wwwroot/css/app.css instead. */
/* /Layout/LoginLayout.razor.rz.scp.css */
:root[b-ly8pm0sy1j] {
    background: #000;
}

.login-backdrop[b-ly8pm0sy1j] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url('/images/login/login-background.jpg') center / cover no-repeat;
}

/* Subtle veil so the form card pops without killing the landscape */
.login-backdrop[b-ly8pm0sy1j]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.eg-product-badge[b-ly8pm0sy1j] {
    position: fixed;
    left: 64px;
    bottom: 64px;
    z-index: 2;
}

/* Below 600px the dark footer's links (Accessibility Statement / Privacy
   Policy) can wrap onto a second line — the exact height varies by locale
   and viewport width. The badge and footer used to be two independently
   `position: fixed` elements each guessing a vertical offset, so once the
   footer grew taller than expected the badge's "An EG Product" text landed
   on top of the footer's link text. Stack them for real instead: anchor
   .login-bottom-bar itself to the viewport bottom and let flow order
   (badge above, footer below) put the footer wherever it needs to be. */
@media (max-width: 600px) {
    .login-bottom-bar[b-ly8pm0sy1j] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        /* Default (stretch) so the footer child spans the full viewport
           width — align-items: flex-start here would shrink every flex
           child, footer included, to its own content width instead. The
           badge doesn't need stretch to stay left-aligned; its own
           margin-left below handles that regardless of the div's width. */
    }

    .login-bottom-bar .eg-product-badge[b-ly8pm0sy1j] {
        position: static;
        margin: 0 0 8px 16px;
    }

    /* Footer.razor's own root element (`.app-footer-dark`), reached via
       ::deep since Footer is a child component of this layout. Its fixed
       positioning is redundant once the shared bottom bar is fixed. */
    .login-bottom-bar[b-ly8pm0sy1j]  .app-footer-dark {
        position: static !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-y9s6abyand] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-y9s6abyand] {
    flex: 1;
}

.top-row[b-y9s6abyand] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-y9s6abyand]  a, .top-row[b-y9s6abyand]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-y9s6abyand]  a:hover, .top-row[b-y9s6abyand]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-y9s6abyand]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-y9s6abyand] {
        justify-content: space-between;
    }

    .top-row[b-y9s6abyand]  a, .top-row[b-y9s6abyand]  .btn-link {
        margin-left: 0;
    }
}

/* Sticky footer layout for .right-pane lives in wwwroot/css/app.css (global,
   unscoped) — Blazor CSS isolation can't target it here: everything between
   this component's markup and <MudMainContent> is child components, not raw
   HTML, so there's no ancestor element to carry this file's scope attribute. */

@media (min-width: 641px) {
    .page[b-y9s6abyand] {
        flex-direction: row;
    }

    .sidebar[b-y9s6abyand] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-y9s6abyand] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-y9s6abyand]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-y9s6abyand], article[b-y9s6abyand] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/MaintenanceLayout.razor.rz.scp.css */
:root[b-hcd41lfzyq] {
    background: #000;
}

.maintenance-backdrop[b-hcd41lfzyq] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url('/images/login/login-background.jpg') center / cover no-repeat;
}

/* Subtle veil so the card pops without killing the landscape */
.maintenance-backdrop[b-hcd41lfzyq]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.maintenance-language-selector[b-hcd41lfzyq] {
    position: fixed;
    top: 24px;
    right: 64px;
    z-index: 2;
}

/* CultureSelector's MudButton defaults to Color.Primary (green) — override to
   black to match the maintenance page design. */
.maintenance-language-selector[b-hcd41lfzyq]  .mud-button-root {
    color: #000000 !important;
}

.maintenance-language-selector[b-hcd41lfzyq]  .mud-button-root:focus-visible {
    outline: 3px solid #4FC08D;
    outline-offset: 2px;
    border-radius: 4px;
}

.eg-product-badge[b-hcd41lfzyq] {
    position: fixed;
    left: 64px;
    bottom: 64px;
    z-index: 2;
}

@media (max-width: 600px) {
    .maintenance-language-selector[b-hcd41lfzyq] {
        top: 12px;
        right: 16px;
    }

    .eg-product-badge[b-hcd41lfzyq] {
        left: 16px;
        bottom: 16px;
    }
}
/* /Layout/NavigationDrawer.razor.rz.scp.css */
/* Design tokens scoped to the drawer so its palette/sizing can diverge from the
   global MudBlazor theme without touching other components */
.navigation-drawer-wrapper[b-on6a2rqagy] {
    --ssp-sidebar-width: 240px;
    --ssp-active-bg: #c5f5e3;
    --ssp-active-bg-hover: #b4efd5;
    --ssp-border-color: #e9e8eb;
    --ssp-text-color: #0a0a0a;
    --ssp-icon-color: #0a0a0a;
    --ssp-font-family: 'Inter', sans-serif;
    --ssp-item-height: 41px;
    --ssp-item-px: 12px;
    --ssp-item-py: 8px;
    --ssp-item-gap: 8px;
    --ssp-item-radius: 8px;
    --ssp-active-radius: 12px;
    --ssp-menu-gap: 4px;
    --ssp-nav-pad: 8px;

    display: contents;
}

/* Drawer shell */
[b-on6a2rqagy] .drawer-expanded {
    width: var(--ssp-sidebar-width) !important;
    transition: width 200ms ease;
    background: #ffffff;
    border-right: 1px solid var(--ssp-border-color);
}

[b-on6a2rqagy] .drawer-mini {
    width: 72px !important;
    transition: width 200ms ease;
    background: #ffffff;
    border-right: 1px solid var(--ssp-border-color);
}

/* Center icons when collapsed */
[b-on6a2rqagy] .drawer-mini .mud-nav-link {
    justify-content: center;
}

/* Smooth text transitions - expanded state */
[b-on6a2rqagy] .drawer-expanded .nav-text {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease-in 50ms, visibility 0s 0s;
    max-width: 200px;
}

/* Smooth text transitions - mini state */
[b-on6a2rqagy] .drawer-mini .nav-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease-out, visibility 0s 100ms;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* MudBlazor's built-in nav link text */
[b-on6a2rqagy] .drawer-expanded .mud-nav-link-text {
    opacity: 1;
    transition: opacity 150ms ease-in 50ms;
    font-family: var(--ssp-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ssp-text-color);
}

[b-on6a2rqagy] .drawer-mini .mud-nav-link-text {
    display: none;
}

/* Nav menu layout */
[b-on6a2rqagy] .nav-menu-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-on6a2rqagy] .nav-top,
[b-on6a2rqagy] .nav-bottom {
    display: flex;
    flex-direction: column;
    padding: var(--ssp-nav-pad) var(--ssp-item-px);
    gap: var(--ssp-menu-gap);
}

.nav-menu-scroll[b-on6a2rqagy] {
    overflow-y: auto;
    flex-grow: 1;
}

/* Nav item base */
[b-on6a2rqagy] .nav-item.mud-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ssp-item-gap);
    height: var(--ssp-item-height);
    min-height: var(--ssp-item-height);
    padding: var(--ssp-item-py) var(--ssp-item-px);
    border-radius: var(--ssp-item-radius);
    font-family: var(--ssp-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--ssp-text-color);
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}

/* Remove MudBlazor's default active left-bar indicator */
[b-on6a2rqagy] .nav-item.mud-nav-link::before {
    display: none !important;
}

/* Icon */
[b-on6a2rqagy] .nav-item .mud-nav-link-icon,
[b-on6a2rqagy] .nav-item .mud-icon-root {
    color: var(--ssp-icon-color);
    width: 20px;
    height: 20px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Hover */
[b-on6a2rqagy] .nav-item.mud-nav-link:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: var(--ssp-item-radius);
    text-decoration: none;
    color: #434343;
}

[b-on6a2rqagy] .nav-item.mud-nav-link:hover .mud-nav-link-icon,
[b-on6a2rqagy] .nav-item.mud-nav-link:hover .mud-icon-root,
[b-on6a2rqagy] .nav-item.mud-nav-link:hover .mud-icon-root svg {
    color: var(--mud-palette-primary) !important;
}

[b-on6a2rqagy] .nav-item.mud-nav-link:hover .mud-nav-link-text {
    color: #434343;
}

/* Active state — mirrors PreviewTab: primary tint bg + right border accent */
[b-on6a2rqagy] .nav-item.mud-nav-link.active {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    border-radius: var(--ssp-active-radius);
    border-right: 3px solid var(--mud-palette-primary);
    color: #434343;
    font-weight: 600;
}

[b-on6a2rqagy] .nav-item.mud-nav-link.active:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
}

[b-on6a2rqagy] .nav-item.mud-nav-link.active .mud-nav-link-icon,
[b-on6a2rqagy] .nav-item.mud-nav-link.active .mud-icon-root,
[b-on6a2rqagy] .nav-item.mud-nav-link.active .mud-icon-root svg {
    color: var(--mud-palette-primary) !important;
}

[b-on6a2rqagy] .nav-item.mud-nav-link.active .mud-nav-link-text {
    color: #434343;
    font-weight: 600;
}

/* EG product attribution row, pinned below the Help & Support nav item */
[b-on6a2rqagy] .eg-attribution-wrapper {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 9px;
    padding: 8.5px 16px;
    border-top: 1px solid #EEE;
}

[b-on6a2rqagy] .drawer-mini .eg-attribution-wrapper {
    justify-content: center;
}

/* ── Tablet (768–991px): force icon-only rail regardless of manual toggle ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    [b-on6a2rqagy] .drawer-expanded,
    [b-on6a2rqagy] .drawer-mini {
        width: 72px !important;
    }

    [b-on6a2rqagy] .drawer-expanded .mud-nav-link,
    [b-on6a2rqagy] .drawer-mini .mud-nav-link {
        justify-content: center;
    }

    [b-on6a2rqagy] .drawer-expanded .nav-text,
    [b-on6a2rqagy] .drawer-mini .nav-text,
    [b-on6a2rqagy] .drawer-expanded .mud-nav-link-text,
    [b-on6a2rqagy] .drawer-mini .mud-nav-link-text {
        display: none !important;
    }

    [b-on6a2rqagy] .drawer-expanded .mud-drawer-header img,
    [b-on6a2rqagy] .drawer-expanded .mud-drawer-header .mud-image,
    [b-on6a2rqagy] .drawer-toggle-btn {
        display: none !important;
    }
}

/* ── Mobile (<768px): off-canvas slide-out, opened via hamburger ── */
@media (max-width: 767.98px) {
    [b-on6a2rqagy] .drawer-expanded,
    [b-on6a2rqagy] .drawer-mini {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform 200ms ease;
    }

    [b-on6a2rqagy] .drawer-expanded.drawer-mobile-open,
    [b-on6a2rqagy] .drawer-mini.drawer-mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    }

    [b-on6a2rqagy] .drawer-toggle-btn {
        display: none !important;
    }
}

[b-on6a2rqagy] .drawer-mobile-overlay {
    z-index: 1200;
}