/* /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 var(--mud-palette-divider, 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: var(--mud-palette-text-secondary);
    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.
   Starts at 841px (not 601px) — below that, the All/Consumption/Production pill
   is squeezed beside the Monthly/Year/Compare filters on the same row and its
   own internal flex-wrap kicks in, breaking it across two lines. Keeping the
   ≤840px range on the mobile-first stacked layout (tabs full-width and centered
   on their own row, filters below) gives the pill enough room to stay on one line. */
@media (min-width: 841px) {
    .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;
    }
}

/* ── Tablet (601px–840px): the chart-type icon row (Line/Bar/[Stacked/Total]/Table)
   sits next to the consumption/production metric numbers with no wrap, unlike the
   ≤600px mobile layout below — on these widths the two collide/overflow instead of
   wrapping cleanly, so swap to the same compact dropdown menu mobile uses, and let
   the metrics row wrap as a fallback. ── */
@media (max-width: 840px) {
    .consumption-card-root[b-k0f8xb0l8v]  .consumption-metrics-row {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-viewmode-toggle-desktop {
        display: none;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .consumption-viewmode-menu-mobile {
        display: inline-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;
    }

    /* 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;
    }
}

/* ── Table view: horizontally scrollable on narrow screens instead of squeezing
   columns unreadable or overflowing the card. MudTable's own .mud-table-container
   already ships with overflow-x:auto (and is what FixedHeader's sticky header
   scrolls within) — reuse that single scroll container rather than adding a
   second nested one, which traps touch-drag on the inner (non-overflowing) box
   before it reaches the outer one. Columns keep a sane min-width so the table
   scrolls instead of wrapping/truncating unreadably. ── */
@media (max-width: 600px) {
    .consumption-card-root[b-k0f8xb0l8v]  .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .mud-table-container .mud-table-root {
        min-width: 640px;
    }

    .consumption-card-root[b-k0f8xb0l8v]  .mud-table-cell,
    .consumption-card-root[b-k0f8xb0l8v]  th.mud-table-cell {
        white-space: nowrap;
    }
}
/* /Components/Consumption/ConsumptionMetrics.razor.rz.scp.css */
.metrics-root[b-39ku3ku03w]  .metric-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    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(--mud-palette-text-secondary);
    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: #065F46;
}

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

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

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

.metrics-root[b-39ku3ku03w]  .metric-cyan {
    color: #0E7490;
}

/* Dark-mode variants (EGU-3626) - the tones above are "700/800"-tier Tailwind shades chosen for a
   light card; they read as muddy/low-contrast against a dark surface. Lighter "400"-tier shades
   of the same hue keep each category recognizable while staying readable in dark mode. Applied via
   an extra class from ConsumptionMetrics.razor (DarkMode.IsDarkMode) rather than a CSS variable,
   since these are category colors with no matching mud-palette semantic token. */
.metrics-root[b-39ku3ku03w]  .metric-green-dark.metric-value-dm {
    color: #4ADE80;
}

.metrics-root[b-39ku3ku03w]  .metric-green.metric-value-dm {
    color: #34D399;
}

.metrics-root[b-39ku3ku03w]  .metric-blue.metric-value-dm {
    color: #60A5FA;
}

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

.metrics-root[b-39ku3ku03w]  .metric-emerald.metric-value-dm {
    color: #34D399;
}

.metrics-root[b-39ku3ku03w]  .metric-cyan.metric-value-dm {
    color: #22D3EE;
}
/* /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;
}

/* "vs" label between year comparison selects */
[b-pu23lwpg14] .compare-vs-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    align-self: center;
    white-space: nowrap;
}

/* 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: rgba(var(--mud-palette-primary-rgb), 0.06);
    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: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-table-lines, #E0E0E0);
    padding: 8px !important;
    height: 40px;
}

/* Now that the header has a primary-tinted background, MudBlazor's default sort-label
   focus ring needs an explicit, higher-contrast treatment to stay visible for keyboard
   users tabbing through the sortable column headers. */
[b-8ule5ikuhy] .location-table th .mud-table-sort-label:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

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

[b-8ule5ikuhy] .location-table.mud-table-hover tbody tr:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

[b-8ule5ikuhy] .location-table tbody tr:hover .service-icon-badge {
    background-color: var(--mud-palette-background-gray, #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: var(--mud-palette-background-gray, #f2f4f7);
    border-radius: 8px;
}

[b-8ule5ikuhy] .location-table .service-icon {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
}

/* ── Mobile location list (collapsible address groups) ──
   Desktop/tablet keeps the MudTable; below 768px it swaps for a collapsible
   accordion list, same split as InvoiceList's .inv-table-desktop/.inv-mobile-list
   and the same header+panel accordion shape as its .inv-month-* groups —
   just without a month/year grouping, since a location has no time
   dimension to group by; each group is a single location, headed by its
   address instead of a month. */
.location-mobile-list[b-8ule5ikuhy] {
    display: none;
}

@media (max-width: 767.98px) {
    .location-table-desktop[b-8ule5ikuhy] {
        display: none;
    }

    .location-mobile-list[b-8ule5ikuhy] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

.location-mobile-group[b-8ule5ikuhy] {
    border: 1px solid var(--mud-palette-lines-default, #E8ECEF);
    border-radius: 12px;
    overflow: hidden;
}

.location-mobile-header.mud-button-root[b-8ule5ikuhy] {
    text-transform: none;
    border-radius: 0;
    padding: 12px !important;
}

.location-mobile-header .mud-button-label[b-8ule5ikuhy] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.location-mobile-chevron.mud-icon-root[b-8ule5ikuhy] {
    color: var(--mud-palette-text-secondary);
    font-size: 18px;
    flex-shrink: 0;
}

.location-mobile-header-text[b-8ule5ikuhy] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.location-mobile-address[b-8ule5ikuhy] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.location-mobile-city[b-8ule5ikuhy] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.location-mobile-total[b-8ule5ikuhy] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

.location-mobile-panel[b-8ule5ikuhy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px 12px;
    cursor: pointer;
    border-top: 1px solid var(--mud-palette-lines-default, #F1F3F5);
    padding-top: 10px;
}

.location-mobile-panel:focus-visible[b-8ule5ikuhy] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.location-mobile-services[b-8ule5ikuhy] {
    display: flex;
    gap: 4px;
}

.location-mobile-panel-bottom[b-8ule5ikuhy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.location-mobile-agreements[b-8ule5ikuhy] {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.location-mobile-arrow.mud-icon-root[b-8ule5ikuhy] {
    color: var(--mud-palette-text-secondary);
    font-size: 18px;
}
/* /Components/Location/Shared/LocationDetailView.razor.rz.scp.css */
.detail-back-btn[b-u23xjm8935] {
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Back button + address block, sitting above the Services/Property Details tabs.
   Explicit rule (not a MudBlazor utility class) so the gap below it is easy to
   verify/tune directly here. */
.detail-header-row[b-u23xjm8935] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
}

/* Gap between the tab strip and its panel content (stats bar / property
   details). Explicit class instead of MudBlazor's "pt-4" utility so this is
   as easy to tune as the header-row gap above.
   ::deep is required because this class is rendered inside MudTabs' own
   markup (via the PanelClass parameter), not LocationDetailView's — without
   it, Blazor's CSS scoping means the rule never matches anything. */
[b-u23xjm8935] .detail-tab-panel {
    padding-top: 32px;
}

.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 */
    height: calc(100dvh - 64px);
    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;
    }
}

/* Padding (not margin) lives here, not on .detail-stats-bar, so the vertical space is
   reserved even when the bar itself doesn't render (SEF Energi) - see LocationDetailView.razor.
   Margin would collapse away on the empty wrapper in that case; padding never collapses. */
.detail-stats-bar-wrapper[b-u23xjm8935] {
    padding-top: 18px;
    padding-bottom: 38px;
}

.detail-stats-bar[b-u23xjm8935] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 24px 0;
}

/* Extra breathing room between wrapped rows of service cards, on top of
   MudGrid's own Spacing-driven gutter — a flex row-gap so it only affects
   vertical spacing between rows, not the horizontal gap within a row. */
.service-cards-grid[b-u23xjm8935] {
    row-gap: 32px;
}

.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: var(--mud-palette-divider, #e0e0e0);
    flex: 0 0 auto;
}

/* EGU-3594: the stat boxes are now keyboard-focusable (tabindex="0") so their
   values/labels are reachable by Tab, not just by a screen reader's virtual
   cursor. Focus ring mirrors the existing .utility-card / .location-multi-card
   focus-visible pattern (app.css) — visible for keyboard users, suppressed on
   mouse-click focus. */
.detail-stat-box:focus-visible[b-u23xjm8935] {
    outline: 2px solid var(--mud-palette-primary, #198b5e);
    outline-offset: 2px;
    border-radius: 4px;
}

.detail-stat-box:focus:not(:focus-visible)[b-u23xjm8935] {
    outline: none;
}

.detail-stat-box__value[b-u23xjm8935] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-stat-box__label[b-u23xjm8935] {
    font-size:11px;
    color: var(--mud-palette-text-secondary);
    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: var(--mud-palette-text-secondary);
    line-height: 20px;
}

.agr-dialog-value[b-nhp476ggvi] {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 20px;
}
/* /Components/Location/UtilityService/AgreementDetailsPage.razor.rz.scp.css */
.detail-page[b-olkmqvsa1y] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1120px;
}

/* ── 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(--mud-palette-text-primary);
}

.detail-back-btn:hover[b-olkmqvsa1y] {
    color: var(--mud-palette-primary);
}

.detail-service-badge[b-olkmqvsa1y] {
    width: 48px;
    height: 48px;
    background: var(--mud-palette-background-gray, #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: var(--mud-palette-text-primary);
    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: var(--mud-palette-text-secondary);
    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(--mud-palette-text-primary);
    margin: 0;
    letter-spacing: -0.08px;
}

/* ── Service details card ── */
.detail-card[b-olkmqvsa1y] {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #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: minmax(0, 180px) minmax(0, 1fr);
    gap: 16px;
    padding: 4px 1px;
    align-items: baseline;
}

.detail-label[b-olkmqvsa1y] {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 19px;
    word-break: break-word;
}

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

/* ── Agreement grid ──
   Container-width-driven, not a viewport breakpoint: columns collapse to 1
   whenever the grid itself doesn't have room for two >=360px tracks, whether
   that's a narrow phone or a narrow sidebar-shrunk desktop container. */
.agreement-grid[b-olkmqvsa1y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 24px;
    width: 100%;
    /* Grid items default to align-items: stretch, so a collapsed card gets
       stretched to match its expanded row-mate's height, leaving dead space
       at the bottom. Size each card to its own content instead. */
    align-items: start;
}

/* ── Agreement card ── */
.detail-agreement-card[b-olkmqvsa1y] {
    border: 1px solid var(--mud-palette-lines-default, #eee);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    /* .agreement-grid's auto-fit track claims the full row width when there's
       only one card, which would otherwise stretch a lone card across both
       columns' worth of space. Capping matches the width a card gets when
       there IS a second one — on mobile the grid track is already narrower
       than this cap, so it has no effect there and the card still fills the
       available width as required. */
    max-width: 550px;
    /* Lets the card's own rendered width drive the @container rules below,
       instead of the viewport — the card can be narrow on a wide screen too
       (e.g. the right-hand column of the two-up grid on a shrunk container). */
    container-type: inline-size;
}

.detail-type-chip[b-olkmqvsa1y] {
    align-self: flex-start;
    /* var(--mud-palette-primary) alone only hits ~4.3:1 against the white text below - AA needs
       4.5:1 for text this size. Darkening slightly via color-mix keeps it reactive to tenant/dark
       theming instead of hardcoding a fixed green. */
    background: color-mix(in srgb, var(--mud-palette-primary) 88%, black);
    color: var(--mud-palette-primary-text, #fff);
    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: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid var(--mud-palette-success);
    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-status-chip--inactive[b-olkmqvsa1y] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-text-secondary);
}

.detail-agreement-top[b-olkmqvsa1y] {
    background: var(--mud-palette-background-gray, 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;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

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

.detail-agreement-name[b-olkmqvsa1y] {
    font-size: 20px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.detail-external-link[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-primary);
}

.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(--mud-palette-text-primary);
    line-height: 1.3;
    letter-spacing: -1.5px;
}

.detail-price-unit[b-olkmqvsa1y] {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 21px;
}

.detail-price-note[b-olkmqvsa1y] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: -12px;
}

/* .detail-pricing-toggle is now a MudButton — its root/label elements are rendered
   by MudBlazor, not this component, so reaching them requires ::deep (see
   UI_STANDARDS.md Section 3's documented pattern for this exact scenario). */
[b-olkmqvsa1y] .detail-pricing-toggle {
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.25px;
    margin-left: auto;
}

[b-olkmqvsa1y] .detail-pricing-toggle .mud-button-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

/*.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 var(--mud-palette-lines-default, #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: var(--mud-palette-text-secondary);
    letter-spacing: -0.15px;
    line-height: 20px;
}

.pricing-line-value[b-olkmqvsa1y] {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.15px;
    line-height: 20px;
}

.pricing-separator[b-olkmqvsa1y] {
    border-top: 1px solid var(--mud-palette-lines-default, #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: var(--mud-palette-text-primary);
    letter-spacing: -0.31px;
    line-height: 24px;
}

/* ── Divider ── */
.detail-agreement-divider[b-olkmqvsa1y] {
    height: 1px;
    background: var(--mud-palette-lines-default, #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: var(--mud-palette-text-secondary);
    line-height: 19px;
}

.detail-date-value[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-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: var(--mud-palette-text-primary);
}

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

.detail-binding[b-olkmqvsa1y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 19px;
}

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

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

/* ── Narrow card: keyed to the card's own rendered width via @container, not
   the viewport. A card can be narrow either because the screen is small or
   because it's sharing a row in the two-up grid on a shrunk container — both
   need the same compact treatment. Requires `container-type: inline-size`
   on .detail-agreement-card above. ── */
@container (max-width: 420px) {
    .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;
    }

    /* The connecting timeline is decorative (aria-hidden) — dropping it and
       stacking the dates avoids squeezing two nowrap dates + a line into a
       narrow card, which is what would otherwise force horizontal scroll. */
    .detail-dates-row[b-olkmqvsa1y] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

    .detail-date-value[b-olkmqvsa1y] {
        white-space: normal;
    }

    .detail-timeline[b-olkmqvsa1y] {
        display: none;
    }
}
/* /Components/Pages/AccessibilityStatement.razor.rz.scp.css */
.accessibility-page[b-szw7do7tpv] {
    background: var(--mud-palette-background);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: Inter, Roboto, sans-serif;
    color: var(--mud-palette-text-primary);
    display: flex;
    justify-content: center;
    padding: 27px 134px;
    box-sizing: border-box;
}

[b-szw7do7tpv] .accessibility-card.mud-paper {
    width: 100%;
    max-width: 1440px;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
    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(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

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

/* EGU-3626: same light-chip safety net as CompanyLogo.razor's .company-logo-chip (duplicated,
   not shared, since Blazor CSS isolation only scopes to CompanyLogo's own rendered elements) -
   fixed white, not var(--mud-palette-*), to mimic the light background the tenant logo was
   actually designed against. */
.accessibility-logo-chip[b-szw7do7tpv] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    line-height: 0;
}

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

[b-szw7do7tpv] .accessibility-backlogin-link.mud-link {
    display: inline-flex;
    align-items: center;
    color: var(--mud-palette-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(var(--mud-palette-primary-rgb), 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(var(--mud-palette-primary-rgb), 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(--mud-palette-text-primary);
}

/* 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(--mud-palette-text-secondary);
    font-size: 18px;
    line-height: 1.6;
}

[b-szw7do7tpv] .accessibility-hero-intro.mud-typography {
    position: relative;
    max-width: 900px;
    color: var(--mud-palette-text-secondary);
    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(--mud-palette-text-primary);
    margin-bottom: 16px;
}

.accessibility-body-text[b-szw7do7tpv] {
    color: var(--mud-palette-text-secondary);
    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: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-warning);
    border-radius: 16px;
    padding: 24px;
}

[b-szw7do7tpv] .accessibility-warning-icon.mud-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent) !important;
    color: var(--mud-palette-warning-darken, #b45309) !important;
}

[b-szw7do7tpv] .accessibility-warning-title.mud-typography {
    font-weight: 700;
    font-size: 17px;
    color: var(--mud-palette-warning-darken, #b45309);
}

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

[b-szw7do7tpv] .accessibility-standard-chip.mud-chip {
    min-height: 42px;
    padding-inline: 18px;
    font-weight: 600;
    color: var(--mud-palette-success) !important;
    border-color: var(--mud-palette-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(--mud-palette-text-primary);
    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(--mud-palette-success);
            font-weight: 700;
            font-size: 18px;
        }

        .accessibility-bullet-list li .mud-typography[b-szw7do7tpv] {
            color: var(--mud-palette-text-secondary);
            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(--mud-palette-lines-default);
}

/* 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(--mud-palette-lines-default);
}

/* 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(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
}

[b-szw7do7tpv] .accessibility-contact-mini-icon.mud-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent) !important;
    color: var(--mud-palette-success) !important;
}

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

[b-szw7do7tpv] .accessibility-contact-mini-value.mud-link {
    color: var(--mud-palette-text-primary) !important;
    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: var(--mud-palette-background-gray, #f8fafc);
    border-top: 1px solid var(--mud-palette-lines-default);
}

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

/* 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(--mud-palette-lines-default);
        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;
}

.auth-card[b-4as83efcoo] {
    width: 100%;
    max-width: 448px;
    padding: 32px 24px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* EGU-3626: same chip treatment as CompanyLogo.razor.css's .company-logo-chip (duplicated, not
   shared, since Blazor CSS isolation scopes that rule to CompanyLogo's own rendered elements) -
   fixed white on purpose, mimicking the light background this logo/wordmark was actually
   designed against, not themed. */
.splash-logo-chip[b-4as83efcoo] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    margin-bottom: 12px;
    line-height: 0;
}

/* ── 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: var(--mud-palette-text-secondary) !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: var(--mud-palette-surface) !important;
}

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

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

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

.config-tabs[b-o5my64qqjx]  .mud-tab {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    text-transform: none;
    font-size: 14px;
    min-width: 0;
    padding: 0 20px;
}

.config-tabs[b-o5my64qqjx]  .mud-tabs-panels {
    background: var(--mud-palette-surface);
}

.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 var(--mud-palette-primary) !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;
}

/* Mobile (<768px):  */
@media (max-width: 767.98px) {
    .config-tabs[b-o5my64qqjx]  .mud-tabs-scroll-button {
        display: none !important;
    }

    .config-tabs[b-o5my64qqjx]  .mud-tabs-tabbar-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .config-tabs[b-o5my64qqjx]  .mud-tabs-tabbar-content::-webkit-scrollbar {
        display: none;
    }

    .config-tabs[b-o5my64qqjx]  .mud-tabs-tabbar-wrapper {
        transform: none !important;
    }

    .config-tabs[b-o5my64qqjx]  .mud-tabs-header.mud-tabs-header-after {
        flex-shrink: 0;
    }

    .config-tabs[b-o5my64qqjx]  .mud-tab {
        padding: 0 12px;
    }
}
/* /Components/Pages/Configuration/Tabs/BrandingTab.razor.rz.scp.css */
.logo-upload-zone img[b-oqcibcd0tq] {
    max-width: 280px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 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;
    }
}

.logo-light-zone[b-oqcibcd0tq] {
    --mud-palette-background-gray: #f5f5f5;
    --mud-palette-lines-inputs: rgba(0, 0, 0, 0.42);
    --mud-palette-text-primary: rgba(0, 0, 0, 0.87);
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.60);
}

.logo-dark-zone[b-oqcibcd0tq] {
    --mud-palette-background-gray: #27272f;
    --mud-palette-lines-inputs: rgba(255, 255, 255, 0.42);
    --mud-palette-text-primary: rgba(255, 255, 255, 0.87);
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.60);
}
/* /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;
}

/* Same light-chip safety net as CompanyLogo.razor's .company-logo-chip (duplicated, not shared,
   since Blazor CSS isolation only scopes to CompanyLogo's own rendered elements) - fixed white,
   not var(--mud-palette-*), to mimic the light background the tenant logo was designed against. */
.preview-logo-chip[b-n9wloe0je2] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    line-height: 0;
}

/* 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;
}

/* Mobile (<768px): . */
.preview-frame-mobile[b-n9wloe0je2] {
    display: none;
}

@media (max-width: 767.98px) {
    /* !important is required here  */
    .preview-frame-desktop[b-n9wloe0je2] {
        display: none !important;
    }

    .preview-frame-mobile[b-n9wloe0je2] {
        display: flex;
    }
}
/* /Components/Pages/Configuration/Tabs/TermsSection.razor.rz.scp.css */
/* =========================================================
   Legal / Terms & Conditions
   ========================================================= */

.legal-section[b-3ucb16hfgc] {
    border-radius: 12px;
}


/* =========================================================
   Header
   ========================================================= */

.legal-section-header[b-3ucb16hfgc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.legal-section-heading[b-3ucb16hfgc] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.legal-section-icon[b-3ucb16hfgc] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix( in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface) );
}

    .legal-section-icon[b-3ucb16hfgc]  .mud-icon-root {
        color: var(--mud-palette-secondary);
        font-size: 23px;
    }

.legal-section-title[b-3ucb16hfgc] {
    font-weight: 500;
}

.legal-section-description[b-3ucb16hfgc] {
    margin-top: 3px;
}


/* =========================================================
   Accepted format
   ========================================================= */

.legal-format-info[b-3ucb16hfgc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 13px;
    border-radius: 10px;
    background: color-mix( in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface) );
}

    .legal-format-info[b-3ucb16hfgc]  .mud-icon-root {
        margin-top: 1px;
        color: var(--mud-palette-text-primary);
        font-size: 18px;
    }

.legal-format-content[b-3ucb16hfgc] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.legal-format-title[b-3ucb16hfgc] {
    font-weight: 600;
}

.legal-format-description[b-3ucb16hfgc] {
    color: var(--mud-palette-text-secondary);
}


/* =========================================================
   Two-column document area
   ========================================================= */

.legal-document-layout[b-3ucb16hfgc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}


/* =========================================================
   Labels
   ========================================================= */

[b-3ucb16hfgc] .legal-field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
}


/* =========================================================
   Upload
   ========================================================= */

.legal-file-upload[b-3ucb16hfgc] {
    display: block;
    width: 100%;
}

/* MudFileUpload child content requires ::deep
   when using CSS isolation. */

[b-3ucb16hfgc] .legal-upload-zone {
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    [b-3ucb16hfgc] .legal-upload-zone:hover {
        border-color: var(--mud-palette-secondary);
        background: color-mix( in srgb, var(--mud-palette-secondary) 5%, var(--mud-palette-background-gray) );
    }

    [b-3ucb16hfgc] .legal-upload-zone:focus-visible {
        outline: 2px solid var(--mud-palette-secondary);
        outline-offset: 2px;
    }

[b-3ucb16hfgc] .legal-upload-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 9px;
    background: color-mix( in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface) );
}

    [b-3ucb16hfgc] .legal-upload-icon .mud-icon-root {
        color: var(--mud-palette-secondary);
        font-size: 26px;
    }

[b-3ucb16hfgc] .legal-upload-title {
    margin-top: 2px;
    font-weight: 500;
}

[b-3ucb16hfgc] .legal-upload-hint {
    margin-top: 6px !important;
    color: var(--mud-palette-text-secondary) !important;
}

[b-3ucb16hfgc] .legal-upload-format {
    margin-top: 4px !important;
    color: var(--mud-palette-text-secondary) !important;
}


/* =========================================================
   Current document
   ========================================================= */

.legal-current-document[b-3ucb16hfgc] {
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.legal-document-main[b-3ucb16hfgc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-document-icon[b-3ucb16hfgc] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix( in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface) );
}

    .legal-document-icon[b-3ucb16hfgc]  .mud-icon-root {
        color: var(--mud-palette-secondary);
        font-size: 23px;
    }

.legal-document-details[b-3ucb16hfgc] {
    min-width: 0;
}

[b-3ucb16hfgc] .legal-document-name {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[b-3ucb16hfgc] .legal-document-meta {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

[b-3ucb16hfgc] .legal-view-link {
    display: inline-block;
    margin-top: 12px;
    margin-left: 52px;
}


/* =========================================================
   Empty state inside current-document card
   ========================================================= */

.legal-document-empty[b-3ucb16hfgc] {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .legal-document-empty[b-3ucb16hfgc]  .mud-icon-root {
        color: var(--mud-palette-text-secondary);
        font-size: 23px;
    }

.legal-no-document[b-3ucb16hfgc] {
    margin: 0;
}


/* =========================================================
   Upload progress
   ========================================================= */

.legal-upload-progress[b-3ucb16hfgc] {
    margin-top: 12px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {

    .legal-section-header[b-3ucb16hfgc] {
        flex-direction: column;
        gap: 16px;
    }

    .legal-document-layout[b-3ucb16hfgc] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .legal-format-info[b-3ucb16hfgc] {
        align-self: flex-start;
    }
}


@media (max-width: 480px) {

    .legal-view-link[b-3ucb16hfgc] {
        display: inline-block;
        margin-top: 10px;
        margin-left: 52px;
    }

    .legal-document-name[b-3ucb16hfgc] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /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/Configuration/UI/ContentBlockDisplay.razor.rz.scp.css */
/* Tablet/mobile: this news grid is pinned to width:60% via inline style
  . */
@media (max-width: 991.98px) {
    .content-block-grid[b-k8nl3wifor] {
        width: 100% !important;
    }
}
/* /Components/Pages/ConsumptionInsights.razor.rz.scp.css */
/* Back arrow + header block, shown when Analysis was reached via a Location's
   utility-card link (see ConsumptionInsights.razor.cs GoBackToLocation). */
.analysis-header-row[b-y4kxq5x5k9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.analysis-back-btn[b-y4kxq5x5k9] {
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* 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 var(--mud-palette-lines-default, #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 var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    /* MudTable's own Hover="true" feature reads this var with a selector far more specific than
       .mud-table-body tr:hover below, so it always wins - override the var itself (inherits down)
       to match SpotPriceTable's hover tint instead of fighting specificity. */
    --mud-palette-table-hover: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

[b-y4kxq5x5k9] .mud-table-head {
    background-color: var(--mud-palette-background-gray, #f5f5f5);
    font-weight: 600;
}

[b-y4kxq5x5k9] .mud-table-head th {
    border-bottom: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    padding: 12px 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: var(--mud-palette-background-gray, #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: var(--mud-palette-surface) !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: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, #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: var(--mud-palette-text-secondary);
    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:focus-within {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

[b-y4kxq5x5k9] .mud-table-cell {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #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(var(--mud-palette-primary-rgb), 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 var(--mud-palette-primary);
        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;
}

/* No color set here (deliberately) - MudBlazor doesn't set one on .mud-switch-label either, so
   this inherits the normal (already theme-aware) text color. A disabled switch then falls
   through cleanly to MudBlazor's own .mud-switch.mud-disabled color (!important) instead of
   being blocked by a same-element override, which is what silently broke both states before. */
[b-y4kxq5x5k9] .cost-toggle-switch label {
    font-weight: 500;
    font-size: 0.875rem;
}

/* Time Period Selector and Date Picker Styling */
[b-y4kxq5x5k9] .time-period-select,
[b-y4kxq5x5k9] .date-picker-field {
    background-color: var(--mud-palette-surface);
    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/CookiePolicy.razor.rz.scp.css */
.cookie-page[b-lb4l219z26] {
    background: var(--mud-palette-background);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: Inter, Roboto, sans-serif;
    color: var(--mud-palette-text-primary);
    display: flex;
    justify-content: center;
    padding: 27px 134px;
    box-sizing: border-box;
}

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

/* HEADER */

.cookie-header[b-lb4l219z26] {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 56px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

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

/* EGU-3626: same light-chip safety net as CompanyLogo.razor's .company-logo-chip (duplicated,
   not shared, since Blazor CSS isolation only scopes to CompanyLogo's own rendered elements) -
   fixed white, not var(--mud-palette-*), to mimic the light background the tenant logo was
   actually designed against. */
.cookie-logo-chip[b-lb4l219z26] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    line-height: 0;
}

/* CONTENT */

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

/* HERO */

.cookie-hero[b-lb4l219z26] {
    padding-bottom: 16px;
}

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

/* 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-lb4l219z26] .cookie-hero-title.mud-typography:focus-visible {
    outline: none;
}

[b-lb4l219z26] .cookie-hero-intro.mud-typography {
    max-width: 900px;
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

/* SECTIONS */

.cookie-section[b-lb4l219z26] {
    margin-top: 56px;
}

[b-lb4l219z26] .cookie-section-heading.mud-typography {
    font-size: 26px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 16px;
}

.cookie-body-text[b-lb4l219z26] {
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

/* COOKIE TABLE */

[b-lb4l219z26] .cookie-table.mud-table-container {
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

[b-lb4l219z26] .cookie-table th {
    background: var(--mud-palette-background-gray, #f8fafc);
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    padding: 14px 20px;
}

[b-lb4l219z26] .cookie-table td {
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    line-height: 1.6;
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* FOOTER STRIP */

.cookie-footer-strip[b-lb4l219z26] {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 56px;
    background: var(--mud-palette-background-gray, #f8fafc);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.cookie-muted-text[b-lb4l219z26] {
    color: var(--mud-palette-text-secondary);
}

/* TABLET */

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

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

    .cookie-content[b-lb4l219z26] {
        padding: 48px 32px 64px;
    }

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

/* MOBILE */

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

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

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

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

    .cookie-content[b-lb4l219z26] {
        padding: 32px 20px 56px;
    }

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

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

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

    .cookie-footer-strip[b-lb4l219z26] {
        padding-inline: 20px;
        height: auto;
        padding-block: 16px;
    }
}
/* /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;
    min-height: 100dvh;
    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;
    /* Without this, iOS Safari renders its own text-field chrome (rounded
       corners/inset shadow) on top of the custom border-radius above. */
    -webkit-appearance: none;
    appearance: none;
}

.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;
    min-height: 100dvh;
    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] {
    background: var(--mud-palette-background);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: Inter, Roboto, sans-serif;
    color: var(--mud-palette-text-primary);
    display: flex;
    justify-content: center;
    padding: 27px 134px;
    box-sizing: border-box;
}

[b-k60krchu2h] .privacy-card.mud-paper {
    width: 100%;
    max-width: 1440px;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
    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(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

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

/* EGU-3626: same light-chip safety net as CompanyLogo.razor's .company-logo-chip (duplicated,
   not shared, since Blazor CSS isolation only scopes to CompanyLogo's own rendered elements) -
   fixed white, not var(--mud-palette-*), to mimic the light background the tenant logo was
   actually designed against. */
.privacy-logo-chip[b-k60krchu2h] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    line-height: 0;
}

/* 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(--mud-palette-text-primary);
}

/* 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: var(--mud-palette-text-secondary);
    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(--mud-palette-text-primary);
    margin-bottom: 16px;
}

.privacy-body-text[b-k60krchu2h] {
    color: var(--mud-palette-text-secondary);
    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(--mud-palette-lines-default);
    overflow: hidden;
}

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

[b-k60krchu2h] .privacy-table td {
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    line-height: 1.6;
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* 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(--mud-palette-primary);
            font-weight: 700;
            font-size: 18px;
        }

        .privacy-bullet-list li .mud-typography[b-k60krchu2h] {
            color: var(--mud-palette-text-secondary);
            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(--mud-palette-lines-default);
}

/* 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(--mud-palette-lines-default);
}

/* 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(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
}

[b-k60krchu2h] .privacy-contact-mini-icon.mud-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent) !important;
    color: var(--mud-palette-success) !important;
}

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

[b-k60krchu2h] .privacy-contact-mini-value.mud-link {
    color: var(--mud-palette-text-primary) !important;
    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: var(--mud-palette-background-gray, #f8fafc);
    border-top: 1px solid var(--mud-palette-lines-default);
}

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

/* 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(--mud-palette-lines-default);
        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: var(--mud-palette-text-primary) !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: var(--mud-palette-background-gray, #f9f9f9);
    border-radius: 12px;
}

.profile-field-icon[b-l29zpql9t7] {
    color: var(--mud-palette-text-secondary);
    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: var(--mud-palette-text-primary);
    margin-bottom: 2px;
    font-weight: 400;
}

.profile-field-value[b-l29zpql9t7] {
    font-size: 14px;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

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

/* ── Focus ring for keyboard navigation ────────────────── */
.profile-field:focus-visible[b-l29zpql9t7] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 12px;
}

[b-l29zpql9t7] .profile-field .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

[b-l29zpql9t7] .profile-field .mud-icon-button:focus-visible .mud-icon-button-label {
    border-radius: 4px;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Card shell - a plain <div>, not MudPaper (see the comment in Settings.razor
   for why). Shared by both the real nav card and its loading skeleton, so
   swapping between them causes no layout shift. */
.settings-nav-card[b-4emcnza5mq] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    max-width: 640px;
    background: var(--mud-palette-surface);
}

.settings-nav-card-loading[b-4emcnza5mq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}

/* Wraps the icon/chevron (real or skeleton) so it doesn't get squeezed by the
   text next to it. A raw <span>, not a Class on the MudBlazor component
   itself - see the comment in Settings.razor for why. */
.settings-nav-fixed[b-4emcnza5mq] {
    flex-shrink: 0;
}

.settings-nav-link[b-4emcnza5mq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-radius: 12px;
}

.settings-nav-link:hover[b-4emcnza5mq],
.settings-nav-link:focus-visible[b-4emcnza5mq] {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.settings-nav-icon[b-4emcnza5mq] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-nav-text[b-4emcnza5mq] {
    flex: 1;
    min-width: 0;
}

.settings-nav-title[b-4emcnza5mq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.settings-nav-desc[b-4emcnza5mq] {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}
/* /Components/Shared/CompanyLogo.razor.rz.scp.css */
/* EGU-3626: zero-effort dark-mode safety net for tenants who haven't uploaded a dedicated dark
   logo yet - keeps their existing (light-designed) logo legible instead of it going unreadable
   against a dark page. Fixed white, not var(--mud-palette-*) - the point is to mimic the light
   background the logo was actually designed against, not to theme the chip itself.
   Styled as a small floating badge (tight padding, soft shadow, no hard border) rather than a
   flat sticker-like slab - same shadow already used for cards elsewhere (SpotPriceCard). */
.company-logo-chip[b-cexwzcia3n] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    line-height: 0;
}

/* EGU-3626: a broken/404 tenant logo has no intrinsic size, so width:auto lets the alt-text
   fallback overflow the slot - cap it regardless of load success. Only the tenant <img> branches
   render here (not the built-in eg-logo-icon.svg MudImage fallback, a static asset that can't 404). */
img[b-cexwzcia3n] {
    max-width: 180px;
    object-fit: contain;
    overflow: hidden;
}
/* /Components/Shared/CookieConsentBanner.razor.rz.scp.css */

.cookie-consent-root[b-1799m64suc]  .cookie-consent-banner.mud-paper {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 900px);
    bottom: 18px;
    z-index: 999999;
    border-radius: var(--bs-border-radius-150, 12px) !important;
    border: 1px solid var(--mud-palette-lines-default, #e5e7eb);
    box-shadow: var(--bs-shadow-lg, 0 4px 16px rgba(33,38,46,0.12), 0 8px 32px rgba(33,38,46,0.20)) !important;
    padding: 8px 25px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

@media (max-width: 600px) {
    .cookie-consent-root[b-1799m64suc]  .cookie-consent-banner.mud-paper {
        padding: 16px;
    }
}

.cookie-consent-root[b-1799m64suc]  .cookie-consent-learn-more.mud-link {
    color: var(--mud-palette-secondary) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
}

.cookie-consent-root[b-1799m64suc]  .cookie-consent-learn-more-arrow {
    font-size: 14px !important;
    flex-shrink: 0;
}

.cookie-consent-root[b-1799m64suc]  .cookie-consent-reject-btn.mud-button-root {
    border: 1px solid var(--mud-palette-lines-default, #e5e7eb) !important;
    color: var(--mud-palette-text-primary) !important;
}

.cookie-consent-root[b-1799m64suc]  .cookie-consent-reject-btn.mud-button-root:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.cookie-consent-content[b-1799m64suc] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.cookie-consent-info[b-1799m64suc] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 260px;
    min-width: 0;
}

.cookie-consent-icon-badge[b-1799m64suc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mud-palette-secondary-hover, rgba(13, 78, 54, 0.1));
}

.cookie-consent-text-group[b-1799m64suc] {
    min-width: 0;
}

.cookie-consent-title[b-1799m64suc] {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.cookie-consent-text[b-1799m64suc] {
    display: block;
    max-width: 640px;
}

.cookie-consent-actions[b-1799m64suc] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .cookie-consent-info[b-1799m64suc] {
        flex: 1 1 100%;
    }

    .cookie-consent-actions[b-1799m64suc] {
        width: 100%;
    }

    .cookie-consent-actions .mud-button-root[b-1799m64suc] {
        flex: 1 1 0;
    }
}

@media (max-width: 360px) {
    .cookie-consent-actions[b-1799m64suc] {
        flex-direction: column-reverse;
    }
}
/* /Components/Shared/EgProductAttribution.razor.rz.scp.css */
.eg-product-attribution[b-034a79h9vu] {
    /* EG brand palette */
    --eg-color-navy: #424D60;
    --eg-color-white: #FFFFFF;
    --eg-color-red: #EF0304;
    /* Default:
       Red icon + navy text */
    --eg-attribution-icon-color: var(--eg-color-red);
    --eg-attribution-text-color: var(--eg-color-navy);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--eg-attribution-text-color);
    text-decoration: none;
    border-radius: 4px;
}

    /* Dark mode:
   Red icon + white text */
    .eg-product-attribution.eg-product-attribution-dark[b-034a79h9vu] {
        --eg-attribution-icon-color: var(--eg-color-red);
        --eg-attribution-text-color: var(--eg-color-white);
    }

    /* Login:
   White icon + white text + existing background */
    .eg-product-attribution.eg-product-attribution-white-with-bg[b-034a79h9vu] {
        --eg-attribution-icon-color: var(--eg-color-white);
        --eg-attribution-text-color: var(--eg-color-white);
        background-color: rgb(86 72 72 / 6%);
    }

    /* White:
   White icon + white text */
    .eg-product-attribution.eg-product-attribution-white[b-034a79h9vu] {
        --eg-attribution-icon-color: var(--eg-color-white);
        --eg-attribution-text-color: var(--eg-color-white);
    }

    .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;
    color: var(--eg-attribution-icon-color);
}

.eg-product-attribution-text[b-034a79h9vu] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--eg-attribution-text-color);
    white-space: nowrap;
    transform: translateY(1px);
}
/* /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: var(--mud-palette-text-primary) !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-width: 100vw;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

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

/* Below the panel's own 360px min-width, drop to fill whatever width the
   popover wrapper is clamped to (see the <style> block in the .razor file
   that pins .location-multiselect-popover to left:12px/right:12px on mobile)
   instead of forcing the panel wider than its own container. */
@media (max-width: 600px) {
    .location-dropdown-panel[b-eb2mr58nhh] {
        min-width: 0;
        width: 100%;
    }

    .location-list[b-eb2mr58nhh] {
        min-width: 0;
    }
}

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

    border-radius: 4px;
    background: var(--mud-palette-background-gray, #F6F7F7);
}

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

/* Keep each row single-line so it stays within the Virtualize ItemSize (44px).
   Without this, long addresses wrap to 2-3 lines on narrow/mobile widths and
   overflow the fixed row height, overlapping the next virtualized row. */
[b-eb2mr58nhh] .location-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 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);
}

/* "Select all" / "Clear selection" links.
   Color.Primary (#198b5e) on white fails WCAG 1.4.3 (4.28:1, needs 4.5:1) — same root
   cause as the "Clear all" fix in LocationSelectionChips.razor.css. Override with a
   darker neutral that keeps the link's visual weight while passing AA contrast. */
[b-eb2mr58nhh] .multiselect-action-link {
    color: var(--mud-palette-text-primary) !important;
}
/* /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: var(--mud-palette-text-secondary);
    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: var(--mud-palette-background-gray, #f5f5f5) !important;
    border-color: var(--mud-palette-lines-default, #e0e0e0) !important;
    white-space: nowrap;
}

/* Overflow chip */
[b-kz430p6p9a] .overflow-chip {
    border-radius: 20px !important;
    background-color: var(--mud-palette-background-gray, #f5f5f5) !important;
    border-color: var(--mud-palette-lines-default, #e0e0e0) !important;
    cursor: pointer;
}

    [b-kz430p6p9a] .overflow-chip:hover {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-background-gray, #f5f5f5)) !important;
    }
    [b-kz430p6p9a] .overflow-chip:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-background-gray, #f5f5f5)) !important;
    }
    /* Clear all */
[b-kz430p6p9a] .clear-all-link {
    color: var(--mud-palette-text-primary) !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 surface-colored knob. Inactive items: text-secondary. */
[b-mvnkoo6a5t] .mud-button-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* EGU-3626/3722: --mud-palette-white never flips per theme, so this used to flash bright white
   on hover in dark mode. --mud-palette-surface matches the active knob and adapts per theme. */
[b-mvnkoo6a5t] .mud-button-text:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 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-surface) 40%, transparent) !important;
}

[b-mvnkoo6a5t] .mud-button-filled {
    background-color: var(--mud-palette-surface) !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 ────────────────────────────────────────────── */
[b-si95s0jqth] .spot-price-card{
    --mud-default-borderradius: 16px !important;
    border-radius: 16px !important;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.spot-price-title[b-si95s0jqth] {
    font-weight: 200 !important;
    font-size: 16px;
    color: var(--mud-palette-text-primary);
}

.spot-price-date[b-si95s0jqth] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* ── Area selector ────────────────────────────────────────────── */
.area-selector[b-si95s0jqth]  .mud-button-root {
    border-radius: 8px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !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: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04)) !important;
        border-color: var(--mud-palette-lines-default) !important;
    }

.area-selector[b-si95s0jqth]  .mud-button-label {
    text-transform: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-primary) !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: var(--mud-palette-text-secondary) !important;
    }

.area-description[b-si95s0jqth] {
    color: var(--mud-palette-text-secondary);
    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: var(--mud-palette-text-secondary) !important;
    font-weight: 400;
}

.spot-metric-value[b-si95s0jqth] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.spot-metric-unit[b-si95s0jqth] {
    font-size: 0.70rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}

.spot-metric-highest .spot-metric-value[b-si95s0jqth],
.spot-metric-highest .spot-metric-unit[b-si95s0jqth] {
    color: var(--mud-palette-text-primary);
}

/* ── 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: var(--mud-palette-text-secondary);
}

.selected-badge-circle[b-si95s0jqth] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    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: var(--mud-palette-text-secondary);
}

/* ── 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 var(--mud-palette-primary);
    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
   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 directly by touch/mouse drag on the chart (moveOnMouseMove in
   SpotPriceChartOptions.cs), not by scrolling any DOM element or arrow
   buttons. */
.spot-chart-scroll-outer[b-si95s0jqth] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

@media (max-width: 767.98px) {
    [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 var(--mud-palette-lines-default);
}

.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: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    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 var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    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: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.spt-row:focus-visible[b-6qtj44pikr] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.spt-row-selected[b-6qtj44pikr] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.spt-row-selected .spt-td[b-6qtj44pikr] {
    color: var(--mud-palette-primary);
    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: var(--mud-palette-success);
}

.spt-cost-up[b-6qtj44pikr] {
    color: var(--mud-palette-error);
}

/* Cost cell value */
.spt-cost-value[b-6qtj44pikr] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}
/* /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;
    min-height: 100dvh;
    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: 30px;
    bottom: 55px;
    z-index: 2;
}

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

/* CultureSelector's MudButton defaults to Color.Secondary — override to
   black to match the login page's white-card-on-photo design, same as
   MaintenanceLayout. */
.login-language-selector[b-ly8pm0sy1j]  .mud-button-root {
    color: #000000 !important;
}

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

/* 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-language-selector[b-ly8pm0sy1j] {
        top: 12px;
        right: 16px;
    }

    .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;
        height: 100dvh;
        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;
    min-height: 100dvh;
    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: 25px;
    bottom: 50px;
    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-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: var(--mud-palette-drawer-background, #ffffff);
    border-right: 1px solid var(--mud-palette-lines-default, #e9e8eb);
}

[b-on6a2rqagy] .drawer-mini {
    width: 72px !important;
    transition: width 200ms ease;
    background: var(--mud-palette-drawer-background, #ffffff);
    border-right: 1px solid var(--mud-palette-lines-default, #e9e8eb);
}

/* 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(--mud-palette-drawer-text, #0a0a0a);
}

[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(--mud-palette-drawer-text, #0a0a0a);
    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(--mud-palette-drawer-icon, #0a0a0a);
    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: var(--mud-palette-drawer-text, #0a0a0a);
}

[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: var(--mud-palette-drawer-text, #0a0a0a);
}

/* 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: var(--mud-palette-drawer-text, #0a0a0a);
    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: var(--mud-palette-drawer-text, #0a0a0a);
    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 var(--mud-palette-lines-default, #e9e8eb);
}

[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;
    }

    /* Icon-only rail has no room for the "An EG Product" label — hide it and
       center the icon, same treatment as the other nav items above. */
    [b-on6a2rqagy] .eg-attribution-wrapper .eg-product-attribution-text {
        display: none !important;
    }

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

/* ── 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;
        height: 100dvh !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;
    }

    /* The drawer header logo overlaps the fixed app bar in this off-canvas
       layout, so only a clipped sliver of it peeks through. Hide it outright,
       same as the tablet rail breakpoint above. */
    [b-on6a2rqagy] .mud-drawer-header img,
    [b-on6a2rqagy] .mud-drawer-header .mud-image {
        display: none !important;
    }
}

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