@import '_content/RecyclerIQ.Cloud.UI/RecyclerIQ.Cloud.UI.ggpeh25xt1.bundle.scp.css';

/* /Components/Auth/AuthCard.razor.rz.scp.css */
/* AuthCard scoped styles - tokens only (RIQ-4203). Card spec follows Login.dc.html:40-62; ::deep rules style the page content. */

.riq-auth-viewport[b-28mcwvzh2p] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--riq-bg-app);
    overflow: auto;
}

.riq-auth-card[b-28mcwvzh2p] {
    position: relative;
    width: 100%;
    max-width: 420px; /* mockup card width; no width token exists */
    box-sizing: border-box;
    padding: var(--space-8) var(--space-6);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.riq-auth-card[b-28mcwvzh2p]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--riq-card-accent-height);
    background: var(--riq-card-accent);
}

.riq-auth-heading[b-28mcwvzh2p] {
    margin: 0;
    color: var(--riq-fg-1);
}

.riq-auth-subhead[b-28mcwvzh2p] {
    margin: var(--space-2) 0 0;
    color: var(--riq-fg-3);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-label {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--riq-fg-2);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-field input {
    width: 100%;
    box-sizing: border-box;
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-help {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-hints {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-hint[data-met="true"] {
    color: var(--riq-teal);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-error {
    margin: var(--space-4) 0 0;
    color: var(--riq-danger);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-errors {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-4);
    color: var(--riq-danger);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-message {
    margin: var(--space-6) 0 0;
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-submit {
    display: flex;
    width: 100%;
    margin-top: var(--space-6);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-link {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--riq-teal);
    text-decoration: none;
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-link:hover {
    color: var(--riq-teal-hover);
}

.riq-auth-card[b-28mcwvzh2p]  .riq-auth-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* /Components/Charts/ChartStatus.razor.rz.scp.css */
.riq-chart-status[b-qhbqh1sry8] {
    margin: 0;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}
/* /Components/Charts/DenominationBreakdownChart.razor.rz.scp.css */
/* RIQ-659 — denomination breakdown (donut + ascending legend). Token-driven + dark-ready; no hardcoded hex/px. */

.denomination-breakdown-chart[b-6rsnycqwm1] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    min-width: 0;
}

/* Donut square matches the mockup's 132px ring (Recycler.IQ Portal.dc.html:470): four 32px steps, not a token of its own. */
.denomination-breakdown-chart--donut .denomination-breakdown-chart__plot[b-6rsnycqwm1] {
    position: relative;
    flex: none;
    width: calc(var(--space-8) * 4);
    aspect-ratio: 1;
}

.denomination-breakdown-chart--stacked[b-6rsnycqwm1] {
    flex-direction: column;
    align-items: stretch;
}

.denomination-breakdown-chart--stacked .denomination-breakdown-chart__plot[b-6rsnycqwm1] {
    width: 100%;
    height: var(--space-8);
}

.denomination-breakdown-chart__total[b-6rsnycqwm1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-mono);
}

.denomination-breakdown-chart__total-label[b-6rsnycqwm1] {
    font-size: var(--fs-overline);
    letter-spacing: var(--tracking-overline);
    color: var(--riq-fg-3);
}

.denomination-breakdown-chart__total-value[b-6rsnycqwm1] {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--riq-fg-1);
}

.denomination-breakdown-chart__legend[b-6rsnycqwm1] {
    flex: 1 1 var(--space-16);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.denomination-breakdown-chart__legend-row[b-6rsnycqwm1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
}

.denomination-breakdown-chart__swatch[b-6rsnycqwm1] {
    flex: none;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--r-xs);
}

.denomination-breakdown-chart__label[b-6rsnycqwm1] {
    min-width: var(--space-8);
}

.denomination-breakdown-chart__amount[b-6rsnycqwm1] {
    flex: 1;
    color: var(--riq-fg-3);
}

.denomination-breakdown-chart__share[b-6rsnycqwm1] {
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
}
/* /Components/Charts/KpiSparkline.razor.rz.scp.css */
/* RIQ-659 — KPI sparkline. Token-driven + dark-ready; no hardcoded hex/px. */

.kpi-sparkline[b-zcljtt1kdw] {
    width: 100%;
    height: var(--space-8);
    min-width: 0;
}
/* /Components/Charts/TimeSeriesChart.razor.rz.scp.css */
/* RIQ-659 — time-series chart. Token-driven + dark-ready; no hardcoded hex/px. */

.time-series-chart[b-y2rnvcmya9] {
    min-width: 0;
}

/* 580 / 210 is the Portal mockup's plot viewBox (Recycler.IQ Portal.dc.html:434); a ratio, not a token. */
.time-series-chart__plot[b-y2rnvcmya9] {
    width: 100%;
    aspect-ratio: 580 / 210;
}

/* Apex builds its tooltip outside Blazor's markup, so ::deep is needed for the surface to follow the theme. */
.time-series-chart__plot[b-y2rnvcmya9]  .apexcharts-tooltip,
.time-series-chart__plot[b-y2rnvcmya9]  .apexcharts-tooltip-title {
    background: var(--riq-bg-card);
    border-color: var(--riq-border-1);
    color: var(--riq-fg-2);
    font-family: var(--font-mono);
}

.time-series-chart__legend[b-y2rnvcmya9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--riq-border-1);
}

.time-series-chart__legend-item[b-y2rnvcmya9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    text-transform: uppercase;
    color: var(--riq-fg-3);
}

.time-series-chart__swatch[b-y2rnvcmya9] {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--r-xs);
}
/* /Components/Charts/TrendBandChart.razor.rz.scp.css */
/* RIQ-659 — forecast trend-band chart. Token-driven + dark-ready; no hardcoded hex/px. */

.trend-band-chart[b-lwjfnxys8g] {
    min-width: 0;
}

/* 580 / 210 is the Portal mockup's plot viewBox (Recycler.IQ Portal.dc.html:434), shared with the time-series chart; a ratio, not a token. */
.trend-band-chart__plot[b-lwjfnxys8g] {
    width: 100%;
    aspect-ratio: 580 / 210;
}

/* Apex builds its tooltip outside Blazor's markup, so ::deep is needed for the surface to follow the theme. */
.trend-band-chart__plot[b-lwjfnxys8g]  .apexcharts-tooltip,
.trend-band-chart__plot[b-lwjfnxys8g]  .apexcharts-tooltip-title {
    background: var(--riq-bg-card);
    border-color: var(--riq-border-1);
    color: var(--riq-fg-2);
    font-family: var(--font-mono);
}

/* Markup comes from the custom tooltip in riqChartTheme.js (bandTooltip). */
.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-caption);
}

.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip__title {
    margin-bottom: var(--space-1);
    color: var(--riq-fg-3);
}

.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip__swatch {
    flex: none;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--r-xs);
}

.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip__name {
    flex: 1;
    color: var(--riq-fg-3);
}

.trend-band-chart__plot[b-lwjfnxys8g]  .riq-tooltip__value {
    color: var(--riq-fg-1);
    font-weight: 600;
}

.trend-band-chart__legend[b-lwjfnxys8g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--riq-border-1);
}

.trend-band-chart__legend-item[b-lwjfnxys8g] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    text-transform: uppercase;
    color: var(--riq-fg-3);
}

.trend-band-chart__swatch[b-lwjfnxys8g] {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--r-xs);
}
/* /Components/Cit/CitFrequencySection.razor.rz.scp.css */
/* RIQ-4214 — CIT pickup frequency card. Same Chart Library card chrome as the Cit page's series card
   (Chart Library.dc.html "Card chrome" / "Anatomy"): teal overline + 18px title, segmented control on the right.
   Token-driven + dark-ready; no raw colours or fonts. The 22px card block padding and 18px title are Chart Library
   values with no token. No mockup exists for this report (design follow-up RIQ-4234). */

.cit-freq-card[b-vkj6wehaby] {
    margin-top: var(--space-5);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    padding: 22px var(--space-6);
    box-shadow: var(--shadow-2);
}

.cit-freq-card__header[b-vkj6wehaby] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.cit-freq-card__titles[b-vkj6wehaby] {
    min-width: 0;
}

.cit-freq-card__overline[b-vkj6wehaby] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-teal);
}

.cit-freq-card__title[b-vkj6wehaby] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--riq-fg-1);
}

.cit-freq-card__caption[b-vkj6wehaby] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.cit-freq-card__block[b-vkj6wehaby] {
    margin-top: var(--space-5);
}

.cit-freq-card__subtitle[b-vkj6wehaby] {
    margin: 0 0 var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--riq-fg-2);
}

.cit-freq-state[b-vkj6wehaby] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

.cit-freq-state--error[b-vkj6wehaby] {
    color: var(--riq-danger);
}
/* /Components/Cit/CitFrequencyTable.razor.rz.scp.css */
/* RIQ-4214 — per-site / per-device frequency table. No mockup exists for this report (design follow-up RIQ-4234);
   built from the portal tokens with the Cit card's type scale. Token-driven + dark-ready; no raw colours or fonts.
   Raw: the 640px min-width keeps five numeric columns legible before the wrapper scrolls horizontally. */

.cit-freq-table__scroll[b-dh4gtyrvpu] {
    overflow-x: auto;
}

.cit-freq-table__table[b-dh4gtyrvpu] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-2);
}

.cit-freq-table__table th[b-dh4gtyrvpu],
.cit-freq-table__table td[b-dh4gtyrvpu] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--riq-border-1);
    text-align: left;
    font-weight: 400;
}

.cit-freq-table__table thead th[b-dh4gtyrvpu] {
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-fg-3);
    white-space: nowrap;
}

.cit-freq-table__table .cit-freq-table__num[b-dh4gtyrvpu] {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cit-freq-table__site th[b-dh4gtyrvpu],
.cit-freq-table__site td[b-dh4gtyrvpu] {
    background: var(--riq-bg-sunken);
    font-weight: 600;
    color: var(--riq-fg-1);
}

.cit-freq-table__name--device[b-dh4gtyrvpu] {
    padding-left: var(--space-8);
    color: var(--riq-fg-2);
}

.cit-freq-table__none[b-dh4gtyrvpu] {
    color: var(--riq-fg-3);
}

.cit-freq-table__caption[b-dh4gtyrvpu],
.cit-freq-table__no-bd[b-dh4gtyrvpu] {
    margin: var(--space-3) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.cit-freq-table__empty[b-dh4gtyrvpu] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}
/* /Components/Cit/CitFrequencyTrendChart.razor.rz.scp.css */
/* RIQ-4214 — CIT pickup/delivery count trend, Chart Library column anatomy (Chart Library.dc.html "Anatomy",
   "01 · Column", legend from "05 · Series line"). Same geometry as CitSeriesChart. Token-driven + dark-ready; no raw
   colours or font strings. Raw px below are Chart Library geometry with no token: 52px y-axis, 240px plot, 3px
   column top radius, 10px tick inset. Deliveries = --riq-chart-1, Pickups = --riq-chart-2 (metrics, never
   --riq-denom-*). A partial period (cut by the range edge) is the same token at reduced opacity. */

.cit-freq-chart__frame[b-5rr44c3qbk] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    padding-top: var(--space-2);
}

.cit-freq-chart__yaxis[b-5rr44c3qbk] {
    position: relative;
    height: 240px;
    border-right: 1px solid var(--riq-border-1);
}

.cit-freq-chart__ytick[b-5rr44c3qbk] {
    position: absolute;
    right: 10px;
    transform: translateY(50%);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
    white-space: nowrap;
}

.cit-freq-chart__plot[b-5rr44c3qbk] {
    position: relative;
    height: 240px;
}

.cit-freq-chart__gridline[b-5rr44c3qbk] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--riq-border-1);
}

.cit-freq-chart__columns[b-5rr44c3qbk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
}

.cit-freq-chart__group[b-5rr44c3qbk] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 var(--space-1);
}

.cit-freq-chart__frame--dense .cit-freq-chart__group[b-5rr44c3qbk] {
    gap: 0;
    padding: 0 1px;
}

.cit-freq-chart__group--partial[b-5rr44c3qbk] {
    opacity: 0.55;
}

.cit-freq-chart__bar[b-5rr44c3qbk] {
    flex: 1 1 0;
    max-width: var(--space-5);
    border-radius: 3px 3px 0 0;
    transition: height 400ms var(--ease-decel);
}

.cit-freq-chart__bar--delivery[b-5rr44c3qbk] {
    background: var(--riq-chart-1);
}

.cit-freq-chart__bar--pickup[b-5rr44c3qbk] {
    background: var(--riq-chart-2);
}

.cit-freq-chart__xlabels[b-5rr44c3qbk] {
    grid-column: 2;
    display: flex;
    border-top: 1px solid var(--riq-border-1);
}

.cit-freq-chart__xlabel[b-5rr44c3qbk] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: var(--space-2);
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: 0.06em;
    color: var(--riq-fg-4);
}

.cit-freq-chart__legend[b-5rr44c3qbk] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--riq-border-1);
}

.cit-freq-chart__legend-item[b-5rr44c3qbk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--riq-fg-3);
}

.cit-freq-chart__swatch[b-5rr44c3qbk] {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--r-xs);
}

.cit-freq-chart__swatch--delivery[b-5rr44c3qbk] {
    background: var(--riq-chart-1);
}

.cit-freq-chart__swatch--pickup[b-5rr44c3qbk] {
    background: var(--riq-chart-2);
}

.cit-freq-chart__swatch--partial[b-5rr44c3qbk] {
    background: var(--riq-chart-2);
    opacity: 0.55;
}

.cit-freq-chart__empty[b-5rr44c3qbk] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cit-freq-chart__bar[b-5rr44c3qbk] {
        transition: none;
    }
}
/* /Components/Cit/CitGranularityToggle.razor.rz.scp.css */
/* RIQ-4214 — segmented control per the Chart Library header rule (Chart Library.dc.html, "Anatomy"), same metrics
   as CitWindowToggle. Token-driven + dark-ready. The 2px/6px paddings are the Chart Library's own control metrics
   (no --space token sits at those values). */

.cit-granularity-toggle[b-1zfgujw4xv] {
    display: inline-flex;
    background: var(--riq-bg-sunken);
    border-radius: var(--r-md);
    padding: 2px;
}

.cit-granularity-toggle__option[b-1zfgujw4xv] {
    border: 0;
    padding: 6px var(--space-3);
    border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--riq-fg-3);
    cursor: pointer;
}

.cit-granularity-toggle__option:disabled[b-1zfgujw4xv] {
    color: var(--riq-fg-disabled);
    cursor: default;
}

.cit-granularity-toggle__option--active[b-1zfgujw4xv] {
    background: var(--riq-bg-card);
    color: var(--riq-fg-1);
    box-shadow: var(--shadow-1);
}
/* /Components/Cit/CitReportFilters.razor.rz.scp.css */
/* RIQ-4214 — report filter row. No mockup exists for this report (design follow-up RIQ-4234); built from the portal
   tokens. Token-driven + dark-ready; no raw colours or fonts. The sites field takes the remaining width and wraps
   below the dates on a narrow card. */

.cit-report-filters[b-ove6q97vf4] {
    margin-bottom: var(--space-4);
}

.cit-report-filters__row[b-ove6q97vf4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.cit-report-filters__field[b-ove6q97vf4] {
    flex: 0 0 auto;
}

.cit-report-filters__field--sites[b-ove6q97vf4] {
    flex: 1 1 var(--space-20);
    min-width: calc(var(--space-20) * 3);
}

.cit-report-filters__field--sites[b-ove6q97vf4]  .rz-dropdown {
    width: 100%;
}

.cit-report-filters__actions[b-ove6q97vf4] {
    flex: 0 0 auto;
}

.cit-report-filters__error[b-ove6q97vf4] {
    margin: var(--space-2) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-danger);
}
/* /Components/Cit/CitSeriesChart.razor.rz.scp.css */
/* RIQ-549 — CIT deliveries vs pickups chart, Chart Library column anatomy (Chart Library.dc.html "Anatomy",
   "01 · Column", legend from "05 · Series line"). Token-driven + dark-ready; no raw colours or font strings.
   Raw px below are Chart Library geometry with no token: 52px y-axis, 240px plot, 3px column top radius,
   10px tick inset. Deliveries = --riq-chart-1, Pickups = --riq-chart-2 (metrics, never --riq-denom-*). */

.cit-chart__frame[b-57x8ba0e8d] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    padding-top: var(--space-2);
}

.cit-chart__yaxis[b-57x8ba0e8d] {
    position: relative;
    height: 240px;
    border-right: 1px solid var(--riq-border-1);
}

.cit-chart__ytick[b-57x8ba0e8d] {
    position: absolute;
    right: 10px;
    transform: translateY(50%);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
    white-space: nowrap;
}

.cit-chart__plot[b-57x8ba0e8d] {
    position: relative;
    height: 240px;
}

.cit-chart__gridline[b-57x8ba0e8d] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--riq-border-1);
}

.cit-chart__columns[b-57x8ba0e8d] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
}

.cit-chart__group[b-57x8ba0e8d] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 var(--space-1);
}

.cit-chart__frame--dense .cit-chart__group[b-57x8ba0e8d] {
    gap: 0;
    padding: 0 1px;
}

.cit-chart__bar[b-57x8ba0e8d] {
    flex: 1 1 0;
    max-width: var(--space-5);
    border-radius: 3px 3px 0 0;
    transition: height 400ms var(--ease-decel);
}

.cit-chart__bar--delivery[b-57x8ba0e8d] {
    background: var(--riq-chart-1);
}

.cit-chart__bar--pickup[b-57x8ba0e8d] {
    background: var(--riq-chart-2);
}

.cit-chart__xlabels[b-57x8ba0e8d] {
    grid-column: 2;
    display: flex;
    border-top: 1px solid var(--riq-border-1);
}

.cit-chart__xlabel[b-57x8ba0e8d] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: var(--space-2);
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: 0.06em;
    color: var(--riq-fg-4);
}

.cit-chart__legend[b-57x8ba0e8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--riq-border-1);
}

.cit-chart__legend-item[b-57x8ba0e8d] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--riq-fg-3);
}

.cit-chart__swatch[b-57x8ba0e8d] {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--r-xs);
}

.cit-chart__swatch--delivery[b-57x8ba0e8d] {
    background: var(--riq-chart-1);
}

.cit-chart__swatch--pickup[b-57x8ba0e8d] {
    background: var(--riq-chart-2);
}

.cit-chart__empty[b-57x8ba0e8d] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

.cit-chart__note[b-57x8ba0e8d] {
    margin: var(--space-3) 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    color: var(--riq-fg-3);
}

@media (prefers-reduced-motion: reduce) {
    .cit-chart__bar[b-57x8ba0e8d] {
        transition: none;
    }
}
/* /Components/Cit/CitWindowToggle.razor.rz.scp.css */
/* RIQ-549 — segmented control per the Chart Library header rule (Chart Library.dc.html, "Anatomy").
   Token-driven + dark-ready. The 2px/6px paddings are the Chart Library's own control metrics (no
   --space token sits at those values). */

.cit-window-toggle[b-0mdqyyu6ui] {
    display: inline-flex;
    background: var(--riq-bg-sunken);
    border-radius: var(--r-md);
    padding: 2px;
}

.cit-window-toggle__option[b-0mdqyyu6ui] {
    border: 0;
    padding: 6px var(--space-3);
    border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--riq-fg-3);
    cursor: pointer;
}

.cit-window-toggle__option--active[b-0mdqyyu6ui] {
    background: var(--riq-bg-card);
    color: var(--riq-fg-1);
    box-shadow: var(--shadow-1);
}
/* /Components/Dashboard/DashboardWidgetCard.razor.rz.scp.css */
/* RCLOUD-365 — shared Dashboard widget chrome. Token-driven + dark-ready; no hardcoded hex/px.
   Grid-column sizing (.dashboard-widget--s/m/l) lives here rather than in Dashboard.razor.css: this
   card's own root div is always the element every *Widget.razor ultimately places as the Dashboard
   grid's direct child (see the .razor file header comment), so styling it here is self-contained. */

.dashboard-widget-card[b-owuzv4qhm5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: var(--space-4) var(--space-5);
    height: 100%;
    box-sizing: border-box;
}

.dashboard-widget--s[b-owuzv4qhm5] {
    grid-column: span 1;
}

.dashboard-widget--m[b-owuzv4qhm5] {
    grid-column: span 2;
}

.dashboard-widget--l[b-owuzv4qhm5] {
    grid-column: span 3;
}

.dashboard-widget-card__header[b-owuzv4qhm5] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

/* A header carrying a control (HeaderActions) centres instead of baseline-aligning — a toggle on a
   text baseline sits visibly high. Matches the mockup's align-items:center header row. */
.dashboard-widget-card__header--with-actions[b-owuzv4qhm5] {
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-widget-card__title[b-owuzv4qhm5] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--riq-fg-1);
}

.dashboard-widget-card__subtitle[b-owuzv4qhm5] {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.dashboard-widget-card__header-spacer[b-owuzv4qhm5] {
    flex: 1;
}

.dashboard-widget-card__body[b-owuzv4qhm5] {
    flex: 1;
    min-width: 0;
}

.dashboard-widget-card__state[b-owuzv4qhm5] {
    margin: 0;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

.dashboard-widget-card__state--error[b-owuzv4qhm5] {
    color: var(--riq-danger);
}
/* /Components/Dashboard/DeviceHealthMapWidget.razor.rz.scp.css */
/* RCLOUD-370 — device health map surface, markers, legend, footnote and device totals, rebuilt to the
   handoff (`Recycler.IQ Portal.dc.html:479-501`; marker style string `:1375`), replacing the RCLOUD-365
   proportion-bar stand-in.

   Token-driven + dark-ready. The only literal values are geometry quoted verbatim from the handoff —
   the surface aspect ratio / min height, the 9px legend dot, the 15px & 18px marker diameters, the
   2.5px marker ring, the hover scale, and the marker glow-ring rgba values (which are deliberate
   translucent halos of --riq-warning / --riq-danger, not substitute colors). Every color, font and
   spacing value is a token. */

.device-health-map-widget[b-nux46ztvse] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---- Header: scope caption + inline legend ------------------------------------------------ */

.device-health-map-widget__header[b-nux46ztvse] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.device-health-map-widget__spacer[b-nux46ztvse] {
    flex: 1;
}

.device-health-map-widget__scope[b-nux46ztvse],
.device-health-map-widget__legend-item[b-nux46ztvse] {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.device-health-map-widget__legend-item[b-nux46ztvse] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.device-health-map-widget__dot[b-nux46ztvse] {
    width: 9px;   /* handoff :484 */
    height: 9px;
    border-radius: 50%;
}

.device-health-map-widget__dot--online[b-nux46ztvse] {
    background: var(--riq-green);
}

.device-health-map-widget__dot--attention[b-nux46ztvse] {
    background: var(--riq-warning);
}

.device-health-map-widget__dot--offline[b-nux46ztvse] {
    background: var(--riq-danger);
}

/* ---- Map surface -------------------------------------------------------------------------- */

/* The two radial washes are quoted from the handoff (:488) — a stylised backdrop, not a real map.
   `--riq-map-region-image` is the seam for a real region image: the widget sets it only when a
   RegionImageUrl is supplied, so nothing renders a broken image while none exists. */
.device-health-map-widget__surface[b-nux46ztvse] {
    position: relative;
    width: 100%;
    aspect-ratio: 2.4 / 1;
    min-height: 200px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--riq-border-1);
    background:
        radial-gradient(120% 90% at 30% 15%, rgba(31, 168, 156, .15), transparent 55%),
        radial-gradient(90% 90% at 82% 92%, rgba(45, 178, 74, .10), transparent 60%),
        var(--riq-bg-sunken);
}

.device-health-map-widget__region[b-nux46ztvse] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--riq-map-region-image);
    background-size: cover;
    background-position: center;
}

.device-health-map-widget__overlay[b-nux46ztvse] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-5);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
}

.device-health-map-widget__overlay-detail[b-nux46ztvse] {
    font-size: var(--fs-caption);
}

/* ---- Markers ------------------------------------------------------------------------------ */

/* One button per SITE. `left`/`top` come from SiteMapProjector as an inline style; everything else is
   class-driven. Hover growth is quoted from the handoff (:492) — the design system otherwise prefers
   color over motion for state, but this marker has no label to shift color on. */
.device-health-map-widget__marker[b-nux46ztvse] {
    position: absolute;
    z-index: 2;
    padding: 0;
    border-radius: 50%;
    border: 2.5px solid var(--riq-bg-card);
    transform: translate(-50%, -50%);
    transition: transform .12s;
    cursor: pointer;
}

.device-health-map-widget__marker:hover[b-nux46ztvse],
.device-health-map-widget__marker:focus-visible[b-nux46ztvse] {
    transform: translate(-50%, -50%) scale(1.35);
    z-index: 5;
}

.device-health-map-widget__marker--online[b-nux46ztvse] {
    width: 15px;   /* handoff :1370 — online markers sit smaller than the ones needing a look */
    height: 15px;
    background: var(--riq-green);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.device-health-map-widget__marker--attention[b-nux46ztvse] {
    width: 18px;
    height: 18px;
    background: var(--riq-warning);
    box-shadow: 0 0 0 5px rgba(194, 138, 14, .28), 0 1px 4px rgba(0, 0, 0, .4);
}

.device-health-map-widget__marker--offline[b-nux46ztvse] {
    width: 18px;
    height: 18px;
    background: var(--riq-danger);
    box-shadow: 0 0 0 5px rgba(192, 58, 58, .26), 0 1px 4px rgba(0, 0, 0, .4);
}

/* ---- In-surface notes --------------------------------------------------------------------- */

/* Sites the map cannot plot are stated on the surface itself, next to the markers that ARE plotted —
   a silently shorter marker list would read as a complete map. */
.device-health-map-widget__ungeocoded[b-nux46ztvse] {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-2);
    z-index: 2;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.device-health-map-widget__footnote[b-nux46ztvse] {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-2);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-fg-4);
}

/* ---- Device totals footer ------------------------------------------------------------------ */

.device-health-map-widget__totals[b-nux46ztvse] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-2);
}

.device-health-map-widget__total-value[b-nux46ztvse] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.device-health-map-widget__total-value--online[b-nux46ztvse] {
    color: var(--riq-green);
}

.device-health-map-widget__total-value--attention[b-nux46ztvse] {
    color: var(--riq-warning);
}

.device-health-map-widget__total-value--offline[b-nux46ztvse] {
    color: var(--riq-danger);
}
/* /Components/Dashboard/KpiSummaryWidget.razor.rz.scp.css */
/* RCLOUD-365 — KPI strip. Token-driven + dark-ready; no hardcoded hex/px. */

.kpi-summary-widget__grid[b-gkwtmv8gvk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
}

.kpi-summary-widget__card[b-gkwtmv8gvk] {
    position: relative;
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-xl);
    padding: var(--space-4) var(--space-4) var(--space-3);
    overflow: hidden;
}

.kpi-summary-widget__accent[b-gkwtmv8gvk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--riq-card-accent-height);
    background: var(--riq-card-accent);
}

.kpi-summary-widget__label[b-gkwtmv8gvk] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-fg-3);
}

.kpi-summary-widget__value-row[b-gkwtmv8gvk] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-3);
    white-space: nowrap;
}

.kpi-summary-widget__value[b-gkwtmv8gvk] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h4);
    color: var(--riq-fg-1);
    letter-spacing: var(--tracking-tight);
}

.kpi-summary-widget__trend[b-gkwtmv8gvk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
}

.kpi-summary-widget__trend--up[b-gkwtmv8gvk] {
    color: var(--riq-green);
}

.kpi-summary-widget__trend--down[b-gkwtmv8gvk] {
    color: var(--riq-danger);
}
/* /Components/Dashboard/RecentTransactionsWidget.razor.rz.scp.css */
/* RCLOUD-365 — recent transactions list. Token-driven + dark-ready; no hardcoded hex/px. */

.recent-transactions-widget[b-z8r8fd0cae] {
    display: flex;
    flex-direction: column;
}

.recent-transactions-widget__header[b-z8r8fd0cae] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

.recent-transactions-widget__view-all[b-z8r8fd0cae] {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--riq-teal);
    cursor: pointer;
    text-decoration: none;
}

.recent-transactions-widget__view-all:hover[b-z8r8fd0cae] {
    text-decoration: underline;
}

.recent-transactions-widget__rows[b-z8r8fd0cae] {
    display: flex;
    flex-direction: column;
}

.recent-transactions-widget__row[b-z8r8fd0cae] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--riq-border-1);
}

.recent-transactions-widget__row:first-child[b-z8r8fd0cae] {
    border-top: none;
}

.recent-transactions-widget__time[b-z8r8fd0cae] {
    flex: none;
    width: var(--space-8);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.recent-transactions-widget__identity[b-z8r8fd0cae] {
    flex: 1;
    min-width: 0;
}

.recent-transactions-widget__site[b-z8r8fd0cae] {
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--riq-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-transactions-widget__device[b-z8r8fd0cae] {
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
}

.recent-transactions-widget__badge[b-z8r8fd0cae] {
    flex: none;
    font-size: var(--fs-overline);
    font-weight: 600;
    padding: 2px var(--space-3);
    border-radius: var(--r-pill);
    color: var(--riq-fg-3);
    background: var(--riq-bg-sunken);
    white-space: nowrap;
}

.recent-transactions-widget__badge--deposit[b-z8r8fd0cae] {
    color: var(--riq-green);
    background: var(--riq-green-50);
}

.recent-transactions-widget__amount[b-z8r8fd0cae] {
    flex: none;
    min-width: var(--space-12);
    text-align: right;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--riq-fg-2);
}

.recent-transactions-widget__amount--positive[b-z8r8fd0cae] {
    color: var(--riq-green);
}
/* /Components/Dashboard/RecyclerFleetOverviewWidget.razor.rz.scp.css */
/* RCLOUD-236/RIQ-3625 — the toolbar row is gone (the Balance⇄Inventory toggle now rides in
   DashboardWidgetCard's HeaderActions, on the same row as the title). The flat-row card classes from
   the RCLOUD-365 spike are gone too — the grid and card come from RecyclerSiteCardGrid.razor.css /
   RecyclerSiteCard.razor.css. This file is intentionally empty. */
/* /Components/Dashboard/TopSitesWidget.razor.rz.scp.css */
/* RCLOUD-365 — top-sites leaderboard bar rows. Token-driven + dark-ready; no hardcoded hex/px. */

.top-sites-widget__rows[b-vzvd3p04sl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.top-sites-widget__row-header[b-vzvd3p04sl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
}

.top-sites-widget__name[b-vzvd3p04sl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--riq-fg-1);
}

.top-sites-widget__rank[b-vzvd3p04sl] {
    width: var(--space-4);
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
}

.top-sites-widget__amount[b-vzvd3p04sl] {
    font-size: var(--fs-caption);
    color: var(--riq-fg-2);
}

.top-sites-widget__track[b-vzvd3p04sl] {
    height: 7px;
    background: var(--riq-bg-sunken);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.top-sites-widget__fill[b-vzvd3p04sl] {
    height: 100%;
    border-radius: var(--r-sm);
    background: var(--riq-teal);
}
/* /Components/Layout/ActingSessionBanner.razor.rz.scp.css */
/* RIQ-3918 — acting-session banners; mockup "Admin Portal.dc.html":520-532. Tokens only. */

.acting-banners[b-qrraf71ujz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.acting-banner[b-qrraf71ujz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--riq-warn-surface-border);
    border-radius: var(--r-lg);
    background: var(--riq-warn-surface);
    color: var(--riq-warning-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
}

.acting-banner__dot[b-qrraf71ujz] {
    flex: 0 0 auto;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--r-pill);
    background: var(--riq-warning);
}

.acting-banner__text[b-qrraf71ujz] {
    flex: 1;
    min-width: 0;
}
/* /Components/Layout/ActingSessionEndedModal.razor.rz.scp.css */
/* RIQ-3918 — session-ended modal; mockup "Admin Portal.dc.html":567-571. Tokens only. */

.acting-ended__overlay[b-fsig8it6gd] {
    position: fixed;
    inset: 0;
    z-index: 1100; /* above RadzenLayout chrome; no z-index token exists */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: color-mix(in srgb, var(--riq-deep-navy) 55%, transparent);
}

.acting-ended__card[b-fsig8it6gd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 420px; /* mockup card width; no width token exists */
    padding: var(--space-6);
    border: 1px solid var(--riq-border-2);
    border-radius: var(--r-xl);
    background: var(--riq-bg-card);
    box-shadow: var(--shadow-4);
}

.acting-ended__title[b-fsig8it6gd] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h5);
    color: var(--riq-fg-1);
}

.acting-ended__body[b-fsig8it6gd] {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--riq-fg-2);
}

.acting-ended__body b[b-fsig8it6gd] {
    font-weight: 600;
}

.acting-ended__actions[b-fsig8it6gd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.acting-ended__actions[b-fsig8it6gd]  .acting-ended__back.rz-button {
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--r-md);
    background: var(--riq-teal);
    color: var(--riq-on-accent);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    white-space: nowrap;
}

.acting-ended__actions[b-fsig8it6gd]  .acting-ended__back.rz-button:hover {
    background: var(--riq-teal-hover);
}
/* /Components/Layout/ActingSessionPill.razor.rz.scp.css */
/* RIQ-3918 — acting-session pill; mockup "Admin Portal.dc.html":509-517. Tokens only. */

.acting-pill[b-466qap7du2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border: 1px solid var(--riq-warn-surface-border);
    border-radius: var(--r-pill);
    background: var(--riq-warn-surface);
    color: var(--riq-warning-ink);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
}

.acting-pill--warning[b-466qap7du2] {
    border-color: var(--riq-warning);
}

.acting-pill__dot[b-466qap7du2] {
    flex: 0 0 auto;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--r-pill);
    background: var(--riq-warning);
}

.acting-pill__label[b-466qap7du2] {
    white-space: nowrap;
}

.acting-pill__label b[b-466qap7du2] {
    font-weight: 600;
}

.acting-pill__chip[b-466qap7du2] {
    padding: 0 var(--space-2);
    border-radius: var(--r-pill);
    background: var(--riq-bg-card);
    color: var(--riq-fg-2);
    font-size: var(--fs-overline);
    font-weight: 600;
}

.acting-pill__clock[b-466qap7du2] {
    font-family: var(--font-mono);
    white-space: nowrap;
}

.acting-pill[b-466qap7du2]  .acting-pill__back.rz-button {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--r-pill);
    background: var(--riq-bg-card);
    color: var(--riq-fg-1);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

.acting-pill[b-466qap7du2]  .acting-pill__back.rz-button:hover {
    background: var(--riq-bg-hover);
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* AuthLayout scoped styles — full-screen splash window (RCLOUD-58). */
.riq-auth-splash[b-k9ab2fhrsu] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--riq-bg-app);
}

/* RCLOUD-218 (Q4) — "Soon" badge on the disabled Transactions/Map placeholder nav links. */
.riq-nav-soon[b-k9ab2fhrsu] {
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--riq-fg-4);
    background: var(--riq-bg-hover);
    border-radius: var(--r-pill);
}
/* /Components/Layout/ScopeBar.razor.rz.scp.css */
/* RCLOUD-216 — SCOPE bar. Token-driven + dark-ready (all colours read --riq-* vars, which carry
   dark values under [data-theme="dark"]). Matches handoff "Recycler.IQ Portal.dc.html":127-152.

   RCLOUD-365 — the Site/Recycler RadzenProfileMenu pickers reuse .scope-chip / .scope-chip--selectable
   / .scope-chip--locked as-is (same visual language as the Tenant chip). No new classes, no new tokens. */

.scope-bar[b-2oqu9iuw80] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-2) var(--space-3);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}

.scope-bar__label[b-2oqu9iuw80] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-right: var(--space-1);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--riq-fg-4);
}

.scope-bar__sep[b-2oqu9iuw80] {
    color: var(--riq-fg-4);
    font-size: 15px;
    line-height: 1;
}

.scope-chip[b-2oqu9iuw80] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--r-md);
    border: 1px solid var(--riq-border-1);
    background: var(--riq-bg-elevated);
}

.scope-chip--selectable[b-2oqu9iuw80] {
    cursor: pointer;
    border-color: var(--riq-teal-100);
    background: var(--riq-teal-50);
}

.scope-chip--selectable:hover[b-2oqu9iuw80] {
    border-color: var(--riq-teal);
}

.scope-chip--locked[b-2oqu9iuw80] {
    cursor: default;
    background: var(--riq-bg-card);
}

.scope-chip__label[b-2oqu9iuw80] {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--riq-fg-4);
}

.scope-chip__value[b-2oqu9iuw80] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--riq-fg-1);
}

.scope-chip--selectable .scope-chip__value[b-2oqu9iuw80] {
    color: var(--riq-teal);
}

.scope-chip--locked .scope-chip__value[b-2oqu9iuw80] {
    color: var(--riq-fg-4);
}

.scope-chip[b-2oqu9iuw80]  .mud-icon-root {
    font-size: 0.95rem;
}

/* Screen-reader-only text — visually hidden but announced by assistive tech (canonical a11y idiom).
   Used to convey the locked/not-yet-available state of the non-interactive scope chips. */
.sr-only[b-2oqu9iuw80] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/BalanceInventoryToggle.razor.rz.scp.css */
/* RCLOUD-236 — Balance⇄Inventory segmented toggle. Token-driven + dark-ready; no hardcoded hex/px. */

.balance-inventory-toggle[b-on125de2zh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--riq-bg-sunken);
    border-radius: var(--r-pill);
    padding: var(--space-1);
}

.balance-inventory-toggle__segment[b-on125de2zh] {
    border: none;
    background: transparent;
    color: var(--riq-fg-3);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--r-pill);
    cursor: pointer;
}

.balance-inventory-toggle__segment--active[b-on125de2zh] {
    background: var(--riq-teal);
    color: var(--riq-bg-elevated);
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* RCLOUD-216 — page header with a mono count line. Token-driven + dark-ready; no hardcoded hex. */

.page-header[b-7ai4iboris] {
    margin-bottom: var(--space-5);
}

.page-header__title[b-7ai4iboris] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--riq-fg-1);
}

.page-header__counts[b-7ai4iboris] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--riq-fg-3);
}

.page-header__counts[b-7ai4iboris]  .riq-mono,
.page-header__counts .riq-mono[b-7ai4iboris] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--riq-fg-1);
    font-size: inherit;
}

.page-header__sep[b-7ai4iboris] {
    color: var(--riq-fg-4);
}
/* /Components/Shared/ReadOnlyGate.razor.rz.scp.css */
/* RIQ-3918 — "View only" label shown in place of write controls; mockup "Admin Portal.dc.html":552-553. */

.read-only-gate__label[b-p5wu99et2e] {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-4);
}
/* /Components/Shared/RecyclerSiteCard.razor.rz.scp.css */
/* RCLOUD-236 — RecyclerSiteCard (handoff `RecyclerSiteCard.dc.html`). Token-driven + dark-ready; no
   hardcoded hex/px except 1px hairline border widths, matching the existing 1px-border precedent used
   throughout this repo's scoped CSS (e.g. ScopeBar.razor.css, DashboardWidgetCard.razor.css). */

/* Surface is --riq-bg-elevated, NOT the mockup's --riq-bg-card, and that is deliberate (RIQ-3625).
   The mockup draws these cards straight onto the page background, where --riq-bg-card reads as a card.
   Tommy ruled the fleet section KEEPS DashboardWidgetCard's chrome (the mockup omits it; that was
   judged a mockup error) — and the chrome is also --riq-bg-card, so a card-on-card at the same token
   is invisible: measured rgb(20,42,61) on rgb(20,42,61), "you can hardly tell that's an info card".
   Stepping the card up one surface restores the mockup's INTENT (page → container → card) under the
   kept box. --riq-border-2 over --riq-border-1 for the same reason.
   ⛔ Do not "restore" this to --riq-bg-card to match the mockup literally unless the outer chrome
   goes away too. */
.recycler-site-card[b-xc8o489ohq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--riq-bg-elevated);
    border: 1px solid var(--riq-border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.recycler-site-card__body[b-xc8o489ohq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.recycler-site-card__header[b-xc8o489ohq] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.recycler-site-card__header-text[b-xc8o489ohq] {
    flex: 1;
    min-width: 0;
}

.recycler-site-card__name[b-xc8o489ohq] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--riq-fg-1);
    line-height: var(--lh-tight);
}

.recycler-site-card__location[b-xc8o489ohq] {
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
    margin-top: var(--space-1);
}

.recycler-site-card__status-row[b-xc8o489ohq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.recycler-site-card__units[b-xc8o489ohq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* RIQ-3625 — unit-row header rework (handoff `RecyclerSiteCard.dc.html:33-36`): status dot + recycler
   name (display weight, no longer an overline label) + an info icon. The $ balance moved OFF this row
   into a hover tooltip over the capacity bar (see .recycler-site-card__balance-tip below). */
.recycler-site-card__unit-header[b-xc8o489ohq] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.recycler-site-card__unit-dot[b-xc8o489ohq] {
    /* Nearest token to the handoff's 7px dot (RecyclerSiteCard.dc.html:34) — no --space-* value below
       --space-2 (8px) exists besides --space-1 (4px), and 7px sits closer to 8px. */
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--r-pill);
    flex: none;
}

.recycler-site-card__unit-label[b-xc8o489ohq] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h5);
    color: var(--riq-fg-1);
}

.recycler-site-card__unit-info[b-xc8o489ohq] {
    /* --fs-caption is exactly the handoff's 12px icon size, reused rather than a new literal. */
    width: var(--fs-caption);
    height: var(--fs-caption);
    flex: none;
    color: var(--riq-fg-4);
    cursor: help;
}

.recycler-site-card__bar-wrap[b-xc8o489ohq] {
    position: relative;
}

/* Balance tooltip — component-STATE driven (@_hoveredUnitIndex in the code-behind), not CSS :hover,
   matching the handoff's onEnter/onLeave/showTip contract (RecyclerSiteCard.dc.html:41,84-86). */
.recycler-site-card__balance-tip[b-xc8o489ohq] {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: var(--space-1);
    background: var(--riq-fg-1);
    color: var(--riq-bg-card);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-caption);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-md);
    white-space: nowrap;
    z-index: 2;
}

.recycler-site-card__capacity-track[b-xc8o489ohq] {
    height: var(--space-2);
    background: var(--riq-bg-sunken);
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: default;
}

.recycler-site-card__capacity-fill[b-xc8o489ohq] {
    height: 100%;
    border-radius: var(--r-sm);
}

.recycler-site-card__capacity-caption[b-xc8o489ohq] {
    display: flex;
    justify-content: space-between;
    /* Nearest token to the handoff's 5px gap (RecyclerSiteCard.dc.html:46) — --space-1 (4px) is closer
       than --space-2 (8px). */
    margin-top: var(--space-1);
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
}

.recycler-site-card__denom-grid[b-xc8o489ohq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-3);
}

.recycler-site-card__denom-header[b-xc8o489ohq] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    color: var(--riq-fg-3);
    margin-bottom: var(--space-1);
}

.recycler-site-card__denom-amount[b-xc8o489ohq] {
    color: var(--riq-fg-4);
}

.recycler-site-card__denom-track[b-xc8o489ohq] {
    height: var(--space-1);
    background: var(--riq-bg-sunken);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.recycler-site-card__denom-fill[b-xc8o489ohq] {
    height: 100%;
    border-radius: var(--r-sm);
}

.recycler-site-card__inline-unavailable[b-xc8o489ohq] {
    color: var(--riq-fg-4);
    font-size: var(--fs-caption);
}

.recycler-site-card__unavailable[b-xc8o489ohq] {
    border: 1px dashed var(--riq-border-2);
    background: var(--riq-bg-sunken);
    border-radius: var(--r-lg);
    padding: var(--space-3);
    color: var(--riq-fg-4);
    font-size: var(--fs-caption);
}

.recycler-site-card__inspect[b-xc8o489ohq] {
    flex: none;
    border: none;
    border-top: 1px solid var(--riq-border-1);
    background: var(--riq-bg-sunken);
    color: var(--riq-teal);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    padding: var(--space-3);
    cursor: pointer;
    text-align: center;
}

.recycler-site-card__inspect:hover[b-xc8o489ohq] {
    background: var(--riq-teal-50);
}
/* /Components/Shared/RecyclerSiteCardGrid.razor.rz.scp.css */
/* RCLOUD-236/RIQ-3625 — auto-fill grid wrapper for RecyclerSiteCard.
   Both bounds are load-bearing, and the pair is what makes the grid read correctly at ONE card as
   well as at six (RIQ-3625 AC2):
     - 270px min  — the mockup's own track minimum (`Recycler.IQ Portal.dc.html:533`).
     - 330px max  — NOT `1fr`. A card must stay card-sized. With `1fr` a lone card stretches across
       the whole span-3 widget (a ~3000px-wide card with a hairline capacity bar), because the
       mockup's `1fr` is only ever exercised with six cards and never with one.
   `auto-fill` + `justify-content: start` then packs as many 270-330px cards per row as fit and
   left-aligns them, which is what the mockup's six-card grid actually looks like. */

.recycler-site-card-grid[b-qq8b1yu7m8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 330px));
    justify-content: start;
    gap: var(--space-4);
}
/* /Localization/CultureSwitcher.razor.rz.scp.css */
.riq-culture-switcher[b-76gxlly9ay] {
    min-width: 140px;
}
/* /Pages/Admin/Settings.razor.rz.scp.css */
/* RIQ-552 - CIT cost Settings page. Header copies Cit.razor.css; the cards use the card chrome of the
   `RIQ-511 Sync Interval.dc.html` boards (accent bar, bg-card, border-1). Token-driven; no raw colours, sizes or fonts. */

.cs-header[b-vxaun0awo8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.cs-header__titles[b-vxaun0awo8] {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-header__overline[b-vxaun0awo8] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-teal);
}

.cs-header__title[b-vxaun0awo8] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: var(--tracking-tight);
    color: var(--riq-fg-1);
}

.cs-header__caption[b-vxaun0awo8] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.cs-card[b-vxaun0awo8] {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
}

.cs-card__accent[b-vxaun0awo8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--riq-card-accent-height);
    background: var(--riq-card-accent);
}

.cs-card__body[b-vxaun0awo8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.cs-card__overline[b-vxaun0awo8] {
    font-size: var(--fs-overline);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--riq-fg-2);
}

.cs-card__title[b-vxaun0awo8] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h5);
    color: var(--riq-fg-1);
}

.cs-card__caption[b-vxaun0awo8] {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
    color: var(--riq-fg-3);
}

.cs-chain[b-vxaun0awo8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--fs-caption);
    color: var(--riq-fg-2);
}

.cs-chain__label[b-vxaun0awo8] {
    font-weight: 600;
    color: var(--riq-fg-3);
}

.cs-chain__arrow[b-vxaun0awo8] {
    color: var(--riq-fg-4);
}

.cs-state[b-vxaun0awo8] {
    margin: 0;
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-3);
}

.cs-failure[b-vxaun0awo8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    background: var(--riq-danger-surface);
    border: 1px solid var(--riq-danger-surface-border);
    font-size: var(--fs-body-sm);
    color: var(--riq-danger);
}
/* /Pages/Cit.razor.rz.scp.css */
/* RIQ-549 — CIT page. Page header copies Forecast.razor.css; the card is the Chart Library card chrome
   (Chart Library.dc.html "Card chrome" / "Anatomy"). Token-driven + dark-ready; no raw colours or fonts.
   The 22px card block padding and 18px title are Chart Library values with no token. */

.cit-header[b-zg9l6y1hnj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.cit-header__titles[b-zg9l6y1hnj] {
    flex: 1 1 auto;
    min-width: 0;
}

.cit-header__overline[b-zg9l6y1hnj] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-teal);
}

.cit-header__title[b-zg9l6y1hnj] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    color: var(--riq-fg-1);
}

.cit-header__caption[b-zg9l6y1hnj] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.cit-card[b-zg9l6y1hnj] {
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    padding: 22px var(--space-6);
    box-shadow: var(--shadow-2);
}

.cit-card__header[b-zg9l6y1hnj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.cit-card__titles[b-zg9l6y1hnj] {
    min-width: 0;
}

.cit-card__overline[b-zg9l6y1hnj] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-teal);
}

.cit-card__title[b-zg9l6y1hnj] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--riq-fg-1);
}

.cit-state[b-zg9l6y1hnj] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

.cit-state--error[b-zg9l6y1hnj] {
    color: var(--riq-danger);
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* RCLOUD-365 — Dashboard page shell. Only the grid + header live here; the
   dashboard-widget--{s|m|l} grid-column classes are owned by DashboardWidgetCard.razor.css (every
   *Widget.razor's own root element), NOT redefined here. Token-driven + dark-ready; no hardcoded hex/px. */

.dashboard-header[b-vtiqhqsdfx] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.dashboard-header__titles[b-vtiqhqsdfx] {
    display: flex;
    flex-direction: column;
}

.dashboard-header__title[b-vtiqhqsdfx] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.01em;
    color: var(--riq-fg-1);
}

.dashboard-header__caption[b-vtiqhqsdfx] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--riq-fg-3);
}

.dashboard-window-toggle[b-vtiqhqsdfx] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-md);
    padding: 3px;
}

.dashboard-window-toggle__option[b-vtiqhqsdfx] {
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--riq-fg-3);
    cursor: pointer;
}

.dashboard-window-toggle__option--active[b-vtiqhqsdfx] {
    font-weight: 600;
    color: var(--riq-teal);
    background: var(--riq-teal-50);
}

.dashboard-grid[b-vtiqhqsdfx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: start;
}
/* /Pages/Forecast.razor.rz.scp.css */
/* RIQ-3786 — Cash Forecast page frame (mockup CashForecast.dc.html:66-72). Token-driven + dark-ready;
   no hardcoded hex/px/font strings. The three content bands (RIQ-3787/3788/3789) render into
   .forecast-bands. */

.forecast-header[b-pzi7y512n5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.forecast-header__titles[b-pzi7y512n5] {
    flex: 1 1 auto;
    min-width: 0;
}

.forecast-header__overline[b-pzi7y512n5] {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--riq-teal);
}

.forecast-header__title[b-pzi7y512n5] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    color: var(--riq-fg-1);
}

.forecast-state[b-pzi7y512n5] {
    margin: 0;
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-4);
    text-align: center;
}

.forecast-state--error[b-pzi7y512n5] {
    color: var(--riq-danger);
}

.forecast-bands[b-pzi7y512n5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}
/* /Pages/Handoff.razor.rz.scp.css */
/* Handoff.razor scoped styles — all values from --riq-* / design tokens (RIQ-3918). */

.riq-handoff-viewport[b-hq7muc33l2] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--riq-bg-app);
    overflow: auto;
}

.riq-handoff-card[b-hq7muc33l2] {
    position: relative;
    width: 100%;
    max-width: 420px; /* mockup card width; no width token exists */
    box-sizing: border-box;
    padding: var(--space-8) var(--space-6);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    text-align: center;
}

.riq-handoff-card[b-hq7muc33l2]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--riq-card-accent-height);
    background: var(--riq-card-accent);
}

.riq-handoff-heading[b-hq7muc33l2] {
    margin: 0;
    color: var(--riq-fg-1);
}

.riq-handoff-message[b-hq7muc33l2] {
    margin: var(--space-3) 0 0;
    color: var(--riq-fg-3);
}

.riq-handoff-loading[b-hq7muc33l2] {
    display: flex;
    justify-content: center;
}

.riq-handoff-back[b-hq7muc33l2] {
    display: inline-block;
    margin-top: var(--space-6);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-md);
    background: var(--riq-teal);
    color: var(--riq-on-accent);
    font-family: var(--font-body);
    text-decoration: none;
}

.riq-handoff-back:hover[b-hq7muc33l2] {
    background: var(--riq-teal-hover);
}
/* /Pages/Login.razor.rz.scp.css */
/* Login.razor scoped styles — layout from docs/design_recycleriq_portal/Login.dc.html, values from --riq-* tokens.
   Radzen renders its own elements without this component's scope attribute, so rules on them need ::deep. */

.riq-login-viewport[b-136mks8ajc] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--riq-bg-app);
    font-family: var(--font-body);
    overflow: auto;
}

/* Corner-only brand wash; the mockup keeps gradients off the working surface. The layer clips the
   off-screen circles so they never add scrollbars. */
.riq-login-washes[b-136mks8ajc] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.riq-login-wash[b-136mks8ajc] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.riq-login-wash--top[b-136mks8ajc] {
    top: -160px;
    right: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--riq-green) 10%, transparent),
        color-mix(in srgb, var(--riq-blue) 6%, transparent) 55%,
        transparent 72%);
}

.riq-login-wash--bottom[b-136mks8ajc] {
    bottom: -180px;
    left: -140px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--riq-teal) 10%, transparent),
        transparent 70%);
}

.riq-login-card[b-136mks8ajc] {
    position: relative;
    width: 100%;
    max-width: 412px;
    box-sizing: border-box;
    padding: var(--space-8);
    background: var(--riq-bg-card);
    border: 1px solid var(--riq-border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}

/* 3px brand-gradient top strip (no left-border stripes per design non-negotiable #4). */
.riq-login-card[b-136mks8ajc]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--riq-card-accent);
}

.riq-login-brand[b-136mks8ajc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.riq-login-brand-symbol[b-136mks8ajc] {
    display: block;
    height: 34px;
    width: auto;
}

.riq-login-brand-word[b-136mks8ajc] {
    font-size: var(--fs-h4);
}

.riq-login-heading[b-136mks8ajc] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.01em;
    color: var(--riq-fg-1);
}

.riq-login-subhead[b-136mks8ajc] {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-body-sm);
    color: var(--riq-fg-3);
}

.riq-login-fields[b-136mks8ajc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.riq-login-field[b-136mks8ajc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.riq-login-label[b-136mks8ajc] {
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--riq-fg-2);
}

[b-136mks8ajc] .riq-login-input.rz-textbox {
    width: 100%;
}

/* Password input and reveal button share one bordered box, as in the mockup. */
.riq-login-password[b-136mks8ajc] {
    display: flex;
    align-items: center;
    padding-right: var(--space-1);
    background: var(--riq-bg-elevated);
    border: 1px solid var(--riq-border-2);
    border-radius: var(--r-md);
}

.riq-login-password:focus-within[b-136mks8ajc] {
    border-color: var(--riq-teal);
    box-shadow: var(--focus-ring);
}

[b-136mks8ajc] .riq-login-password-input.rz-textbox {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

[b-136mks8ajc] .riq-login-reveal.rz-button {
    color: var(--riq-fg-4);
}

[b-136mks8ajc] .riq-login-reveal.rz-button:hover {
    color: var(--riq-fg-2);
}

.riq-login-error[b-136mks8ajc] {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-body-sm);
    color: var(--riq-danger);
}

/* Radzen has no FullWidth button param (was MudButton FullWidth) — set width explicitly. */
[b-136mks8ajc] .riq-login-submit {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--space-6);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

/* RIQ-4203 - "Forgot password?" link under the sign-in button. */
.riq-login-forgot[b-136mks8ajc] {
    display: block;
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--riq-teal);
    text-decoration: none;
}

.riq-login-forgot:hover[b-136mks8ajc] {
    color: var(--riq-teal-hover);
}

.riq-login-forgot:focus-visible[b-136mks8ajc] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Inline submit spinner — constrain the IQWaveLoader to button height. */
.riq-login-spinner[b-136mks8ajc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
}

/* Remembered organization (step 2): caption + value + "Change" link, wraps on narrow cards. */
.riq-login-org[b-136mks8ajc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-size: var(--fs-body-sm);
}

.riq-login-org-label[b-136mks8ajc] {
    color: var(--riq-fg-2);
}

.riq-login-org-value[b-136mks8ajc] {
    color: var(--riq-fg-1);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Same link treatment as the mockup's "Forgot password?" — Radzen colours and uppercases the inner text span. */
[b-136mks8ajc] .riq-login-org-change.rz-button,
[b-136mks8ajc] .riq-login-org-change .rz-button-text {
    margin-left: auto;
    padding: 0;
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--riq-teal);
}

[b-136mks8ajc] .riq-login-org-change.rz-button:hover,
[b-136mks8ajc] .riq-login-org-change.rz-button:hover .rz-button-text {
    color: var(--riq-teal-hover);
}

[b-136mks8ajc] .riq-login-org-change.rz-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.riq-login-footer[b-136mks8ajc] {
    position: absolute;
    bottom: var(--space-5);
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: var(--fs-overline);
    color: var(--riq-fg-4);
}
/* /Pages/Transactions.razor.rz.scp.css */
/* RCLOUD-371 — transaction ledger type badge / amount treatment. Mirrors the token usage in
   RecentTransactionsWidget.razor.css (deposit = green/positive, everything else = neutral); a
   standalone stylesheet rather than a shared one because the widget itself is not touched by this
   ticket (see TransactionTypeFormat.cs). Token-driven + dark-ready; no hardcoded hex/px. */

.transactions-page__badge[b-5gd2yi6r5r] {
    display: inline-block;
    font-size: var(--fs-overline);
    font-weight: 600;
    padding: 2px var(--space-3);
    border-radius: var(--r-pill);
    color: var(--riq-fg-3);
    background: var(--riq-bg-sunken);
    white-space: nowrap;
}

.transactions-page__badge--deposit[b-5gd2yi6r5r] {
    color: var(--riq-green);
    background: var(--riq-green-50);
}

.transactions-page__amount[b-5gd2yi6r5r] {
    font-weight: 600;
    color: var(--riq-fg-2);
}

.transactions-page__amount--positive[b-5gd2yi6r5r] {
    color: var(--riq-green);
}