/* RCLIENT-385 — tokens.css (the V2 design tokens, renamed from colors_and_type.css)
   is now linked DIRECTLY by each host in the kit's prescribed order
   (MudBlazor.min.css → tokens.css → mudblazor-overrides.css → riq-app.css), so this
   file no longer @imports it. CSS custom properties resolve at computed-value time, so
   riq-app's --riq-* references work regardless of which sheet declares them first. */

:root {
    --riq-warn-text: #fdebd0;
    --riq-error-text: #f9c2bc;

    /* Alias — local CSS still references --riq-font-primary in places.
       Points at the v3 body font (Inter) so unmigrated rules keep resolving. */
    --riq-font-primary: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* RCLIENT-429 — disable mobile-WebView font-boosting (text auto-inflation). On the Galaxy Tab
   the WebView was inflating nav labels so "Daily Summary" wrapped and "Transactions" clipped.
   No-op on desktop. Host-level so it covers every host that loads this sheet (TaxAuthority,
   WebClient, RetailClient), per the Recycler.IQ design kit Operator Console prototype. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/MaterialIconsOutlined-Regular.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* RCLIENT-279 — semantic-role aliases on top of the v2 token spine.
   Other rules still reference --riq-primary / --riq-nav-bg / --riq-cta / etc;
   keep them resolving by mapping to the v2 canonical tokens. */
:root {
    --riq-white: #FFFFFF;

    /* RCLIENT-178 — monospace stack for diagnostic / file-path display. v2's
       --font-mono uses IBM Plex Mono; this alias preserves prior code that
       reads --riq-font-mono directly. */
    --riq-font-mono: var(--font-mono, 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', 'Monaco', monospace);

    --riq-primary: var(--riq-teal);
    --riq-primary-hover: var(--riq-teal-hover);
    --riq-nav-bg: var(--riq-deep-navy);
    --riq-cta: var(--riq-teal);
    --riq-cta-hover: var(--riq-teal-hover);
    --riq-border: var(--riq-border-1);
    --riq-table-header: var(--riq-deep-navy);
}

body {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-body, 15px);
    line-height: var(--lh-normal, 1.45);
    color: var(--riq-fg-2, #2A3B4A);
    background-color: var(--riq-bg-app, #F4F7F9);
}

/* RCLIENT-178 — utility class for monospace diagnostic text (file paths, IDs). */
.riq-text-mono {
    font-family: var(--riq-font-mono);
}

/* RCLIENT-525 — masking-only marker for cash/money render sites. No visual rule: this class exists
   solely so posthog-js session replay can target it via session_recording.maskTextSelector and
   render "***" instead of the real figure. Never add color/spacing/font rules here. */
.riq-money {
}

/* RCLIENT-413 — app-bar brand block, per the Recycler.IQ design kit (.tb-brand). Symbol + stacked
   "Recycler.IQ" wordmark (IQ in the brand gradient) + per-client mode tag + hairline separator.
   Foregrounds inherit the MudAppBar's light-on-navy text. */
.riq-tb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.riq-logo {
    /* App-bar symbol mark — 36px per the kit's .tb-brand-logo. */
    height: 36px;
    display: block;
    flex-shrink: 0;
}

.riq-tb-wordmark {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.riq-tb-name {
    font-family: var(--font-display, 'Poppins', system-ui, sans-serif);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: inherit;
}

/* Brand type-mark gradient (green → teal → blue). Allowed on the wordmark per the design rules
   (type-mark accent), never on operator surfaces. */
.riq-tb-iq {
    background: linear-gradient(90deg, #4FCB6B 0%, #3FD0BF 50%, #2A6FDB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.riq-tb-tag {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.55;
}

.riq-tb-sep {
    width: 1px;
    height: 20px;
    background: currentColor;
    opacity: 0.22;
    margin: 0 2px;
}

/* RCLIENT-413 — drawer section headers (overline) per the design kit's .nd-section. */
.riq-nav-section {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--riq-fg-4);
    padding: 14px 16px 6px;
}

.riq-nav-section:first-child {
    padding-top: 6px;
}

/* Disabled "Soon" stub nav items — pages not built yet, shown so the menu matches the design kit. */
.riq-nav-soon {
    opacity: 0.5;
}

.riq-nav-soon-tag {
    margin-left: auto;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--riq-fg-4);
    border: 1px solid var(--riq-border-1);
    border-radius: 999px;
    padding: 1px 6px;
}

/* RCLIENT-429 — responsive touch nav (riq-prefixed surfaces). On touch tablets/phones
   (coarse pointer) or narrow viewports (≤1024px) the app-bar hamburger gets a 48px hit
   target and the drawer section headers grow for touch, per the design kit Operator Console
   prototype (.touch-nav block). Desktop (fine pointer, wide) is unchanged. The matching
   MudDrawer / MudNavLink touch sizing + dimmed scrim live in mudblazor-overrides.css under
   the same query. The coarse-pointer trigger keeps the touch menu active on the tablet in
   landscape (~1280px), where a width-only rule would fall back to the desktop drawer. */
@media (max-width: 1024px), (pointer: coarse) {
    .riq-hamburger {
        width: 48px;
        height: 48px;
    }

    .riq-hamburger .mud-icon-root {
        font-size: 26px;
    }

    .riq-nav-section {
        font-size: 11px;
        letter-spacing: 0.16em;
        padding: 16px 22px 6px;
    }
}

/* RCLIENT-385 — login brand lockup, theme-matched (navy wordmark on the light card,
   white wordmark on the dark card). Mirrors the data-theme show/hide used elsewhere;
   defaults to the light asset before the theme attribute is set. */
.riq-login-brand { text-align: center; }
.riq-login-logo { display: inline-block; width: 100%; max-width: 240px; height: auto; }
.riq-login-logo--dark { display: none; }
html[data-theme="dark"] .riq-login-logo--light { display: none; }
html[data-theme="dark"] .riq-login-logo--dark { display: inline-block; }

/* RCLIENT-279 — Two-tone app-bar title. Accent word picks up the product Teal
   in Poppins (display font) so it reads as the brand mark; the rest stays
   in the appbar's default Soft White on Inter (body). The slight
   font-family switch between the two spans is what makes the title feel like
   a wordmark rather than a flat label. */
.riq-app-title {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    letter-spacing: -0.01em;
}

.riq-app-title-accent {
    font-family: var(--font-display, 'Poppins', system-ui, sans-serif);
    font-weight: 700;
    color: var(--riq-teal, #1FA89C);
}

.riq-app-title-rest {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-weight: 500;
    color: inherit;
    opacity: 0.95;
}

.riq-footer {
    background-color: var(--riq-deep-navy);
    color: var(--riq-white);
    padding: 1rem;
    text-align: center;
}

/* RCLIENT-385 — IQWaveLoader sizing helper. The loader host is inline-flex and its
   SVG is width:100% (no intrinsic width), so it needs an explicit width to render at
   a predictable size. Wrap the loader and set the width on the wrapper:
     <div class="riq-wave-sized" style="width:200px"><IQWaveLoader /></div> */
.riq-wave-sized {
    display: flex;
    justify-content: center;
}
.riq-wave-sized > .iq-wave-host {
    width: 100%;
}

@keyframes riq-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.riq-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.riq-spinner-fullscreen {
    position: fixed;
    inset: 0;
    background-color: var(--riq-deep-navy, #0B1F33);
    z-index: 9999;
}

.riq-spinner-logo {
    animation: riq-spin 1.8s linear infinite;
    transform-origin: center;
}

/* RCLIENT-352 — the IQ Loader boot fallback (shown only if the engine fails to load)
   must NOT rotate. Overrides the .riq-spinner-logo spin; declared after it so it wins. */
.riq-boot-fallback {
    animation: none;
}

/* RCLIENT-385 — boot-splash surface follows the theme so the IQ wave (which bakes its
   own light/dark ground into the SVG) isn't framed by a mismatched color. Light = white
   to match the light asset; dark = the dark asset's deep ground. data-theme is set on
   <html> once the theme interop runs; before that it defaults to light, matching
   RiqWaveLoader's light-default first paint. Defined after .riq-spinner-fullscreen so
   it wins the (equal-specificity) background. */
.riq-splash-surface { background-color: #FFFFFF; }
[data-theme="dark"] .riq-splash-surface { background-color: #0F1621; }

/* RCLIENT-385 — pre-Blazor boot splash (kit static IQ wave). The dot/IQ animation
   lives in each SVG's own inline <style> (self-contained); these rules only size the
   mark, pick the theme-matching asset, and style the tagline. Default light when
   <html> has no data-theme yet (pre-interop first paint). The SVGs bake their own
   ground (#FFFFFF light / #0F1621 dark) which matches .riq-splash-surface, so there's
   no visible box. */
.riq-boot__mark { width: min(300px, 70vw); }
.riq-boot__mark svg { width: 100%; height: auto; display: block; }
.riq-boot__mark .anim-dark { display: none; }
html[data-theme="dark"] .riq-boot__mark .anim-light { display: none; }
html[data-theme="dark"] .riq-boot__mark .anim-dark { display: block; }
.riq-boot__tagline {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 16px);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #0B1F33;
    margin: 0;
    text-align: center;
}
.riq-boot__tagline .hw {
    background: linear-gradient(90deg, #2DB24A 0%, #184096 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
html[data-theme="dark"] .riq-boot__tagline { color: rgba(244, 247, 249, 0.85); }
html[data-theme="dark"] .riq-boot__tagline .hw {
    background: linear-gradient(90deg, #4FCB6B 0%, #7A9AE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.riq-spinner-label {
    color: var(--riq-white, #FFFFFF);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* RCLIENT-126 — Status Chip */
.riq-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.riq-status-chip-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* RCLIENT-279 — v2 semantic chip colors. Success unifies with money-green
   (one green, two roles); warning + danger pulled from --riq-* tokens so the
   chip respects the muted Recycler.IQ palette rather than flat-UI defaults. */
.riq-status-chip-success {
    background-color: var(--riq-money-green-50, rgba(47, 143, 79, 0.12));
    color: var(--riq-money-green-hover, #259B40);
    border-color: var(--riq-money-green, #2DB24A);
}

.riq-status-chip-warning {
    background-color: rgba(194, 138, 14, 0.15);
    color: var(--riq-warning, #C28A0E);
    border-color: var(--riq-warning, #C28A0E);
}

.riq-status-chip-error {
    background-color: rgba(192, 58, 58, 0.15);
    color: var(--riq-danger, #C03A3A);
    border-color: var(--riq-danger, #C03A3A);
}

.riq-status-chip-info {
    background-color: rgba(129, 177, 213, 0.15);
    color: var(--riq-teal-200, #92D9D0);
    border-color: var(--riq-teal-200, #92D9D0);
}

.riq-status-chip-primary {
    background-color: rgba(61, 96, 167, 0.15);
    color: var(--riq-teal, #1FA89C);
    border-color: var(--riq-teal, #1FA89C);
}

.riq-status-chip-secondary {
    background-color: rgba(129, 177, 213, 0.15);
    color: var(--riq-teal-200, #92D9D0);
    border-color: var(--riq-teal-200, #92D9D0);
}

.riq-status-chip-tertiary {
    background-color: rgba(160, 210, 231, 0.15);
    color: var(--riq-teal-100, #C8ECE7);
    border-color: var(--riq-teal-100, #C8ECE7);
}

.riq-status-chip-default {
    background-color: rgba(90, 122, 155, 0.15);
    color: var(--riq-fg-3, #5A6B78);
    border-color: var(--riq-fg-3, #5A6B78);
}

/* RCLIENT-126 — Terminal Panel (hardware output, diagnostic logs) */
.riq-terminal {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--riq-teal, #1FA89C);
    background-color: #0a0a0a;
    overflow: hidden;
    min-height: 180px;
}

.riq-terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--riq-deep-navy, #0B1F33);
    color: var(--riq-white, #FFFFFF);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    border-bottom: 1px solid var(--riq-teal, #1FA89C);
}

.riq-terminal-title {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.riq-terminal-body {
    flex: 1;
    padding: 16px;
    font-family: 'Cascadia Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #2ecc71;
    background-color: #0a0a0a;
    overflow-y: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

.riq-terminal-line {
    display: block;
}

.riq-terminal-line::before {
    content: "> ";
    color: var(--riq-fg-3, #5A6B78);
    user-select: none;
}

.riq-terminal-caret {
    display: inline-block;
    color: #2ecc71;
    font-family: inherit;
    margin-left: 2px;
    animation: riq-terminal-blink 1s steps(2, start) infinite;
}

@keyframes riq-terminal-blink {
    to { visibility: hidden; }
}

/* RCLIENT-127 — Persistent bottom status bar (VS Code / Visual Studio inspired).
   Applied as a Class on <MudAppBar Bottom="true" Fixed="true">, which gives us
   position:fixed + bottom:0 + full-width docking for free. */
.riq-status-bar {
    min-height: 26px !important;
    height: 26px !important;
    background-color: var(--riq-statusbar-bg) !important;
    /* RCLIENT-413 — quiet console row per the design kit: muted-gray uniform IBM Plex Mono. */
    color: var(--riq-fg-4) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.62rem;
    line-height: 1;
    user-select: none;
    border-top: 1px solid var(--riq-border-1);
    padding: 0 !important;
}

.riq-status-bar .mud-toolbar {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 !important;
}

/* RCLIENT-124 follow-up — denomination entry laid out as a 3×2 grid so the card
   fits without scrolling on typical viewports. Paired with "Insert" button moved
   above the grid (per Tommy's request). */
.riq-denom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.riq-status-bar-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-right: 1px solid var(--riq-border-1);
    white-space: nowrap;
    /* Console look (design kit .sb-item): uppercase, tracked, semibold, muted. */
    color: var(--riq-fg-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.riq-status-bar-section:last-child {
    border-right: none;
}

.riq-status-bar-spacer {
    flex: 1;
}

.riq-status-bar-spacer + .riq-status-bar-section {
    border-left: 1px solid var(--riq-border-1);
}

.riq-status-bar-icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
    color: inherit !important;
}

.riq-status-bar-clock span {
    /* RCLIENT-385 — clock is a timestamp → IBM Plex Mono (numeric discipline).
       RCLIENT-413 — teal-accented per the design kit (.sb-time), so it reads as the live element. */
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--riq-teal) !important;
}

/* RCLIENT-413 — design handoff: the status bar reads as a quiet, dense console row,
   NOT a strip of chunky colored blocks. State is signaled by tinting the section's
   icon (acts like the prototype's pip dot) + light text, with no background fill on
   the dark navy bar. */
.riq-status-bar-section--admin {
    color: var(--riq-danger);
    font-weight: 600;
}

.riq-status-bar-section--admin .riq-status-bar-icon {
    color: var(--riq-danger) !important;
}

.riq-status-bar-section--ok {
    color: var(--riq-money-green-100, #C8E6D0);
    font-weight: 600;
}

.riq-status-bar-section--ok .riq-status-bar-icon {
    color: var(--riq-green, #4FCB6B) !important;
}

.riq-status-bar-section--warn {
    color: var(--riq-warn-text);
    font-weight: 600;
}

.riq-status-bar-section--warn .riq-status-bar-icon {
    color: var(--riq-warning, #E0A535) !important;
}

.riq-status-bar-section--error {
    color: var(--riq-error-text);
    font-weight: 600;
}

.riq-status-bar-section--error .riq-status-bar-icon {
    color: var(--riq-danger, #D85A5A) !important;
}

.riq-message-console-chip {
    cursor: pointer;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease;
}

.riq-message-console-chip:hover {
    filter: brightness(1.15);
}

.riq-message-console-chip:focus {
    outline: 1px solid var(--riq-white, #FFFFFF);
    outline-offset: -1px;
}

@media (max-width: 600px) {
    .riq-status-bar-section {
        padding: 0 6px;
    }
    .riq-status-bar-section span {
        display: none;
    }
    .riq-status-bar-clock span {
        display: inline;
    }
}

/* ── Notification bell + slide-out panel (RCLIENT-80 / RCLIENT-82) ────────── */
.riq-notification-anchor {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

.riq-notification-bell {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 2px !important;
}

.riq-notification-panel {
    position: fixed;
    bottom: 30px;
    right: 0;
    width: 320px;
    max-height: calc(100vh - 80px);
    background-color: var(--riq-deep-navy, #0B1F33);
    border: 1px solid var(--riq-teal, #1FA89C);
    border-radius: 4px 0 0 4px;
    box-shadow: -4px -4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1200;
}

.riq-notification-panel--open {
    transform: translateX(0);
}

.riq-notification-panel-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.riq-notification-panel-title {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.riq-notification-panel-body {
    overflow-y: auto;
    flex: 1;
}

.riq-notification-empty {
    padding: 20px;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.riq-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.riq-notification-item--unread {
    background-color: rgba(255, 255, 255, 0.06);
}

.riq-notification-item-icon {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    margin-top: 1px;
}

.riq-notification-item--warn .riq-notification-item-icon   { color: var(--riq-warn-text); }
.riq-notification-item--error .riq-notification-item-icon  { color: var(--riq-error-text); }
.riq-notification-item--system                             { border-left: 3px solid var(--riq-teal-200, #92D9D0); }
.riq-notification-item--system .riq-notification-item-icon { color: var(--riq-teal-200, #92D9D0); }
.riq-notification-item--info .riq-notification-item-icon   { color: rgba(255, 255, 255, 0.55); }

.riq-notification-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.riq-notification-item-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
}

.riq-notification-item-message {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    word-break: break-word;
}

.riq-notification-item-time {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.riq-notification-item-dismiss {
    flex-shrink: 0;
    opacity: 0.4;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: unset !important;
}

.riq-notification-item-dismiss:hover {
    opacity: 0.9;
}

.riq-notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

/* ── Profile dropdown (RCLIENT-413) ───────────────────────────────────────────
   Per the Recycler.IQ design (Cash Collection Operator Screen handoff). GLOBAL, not
   scoped: MudMenu portals its popover to the document root (MudPopoverProvider), so a
   component-scoped stylesheet never reaches it. Keyed on the menu's PopoverClass. */
.riq-profile-menu {
    background: var(--riq-bg-elevated) !important;
    border: 1px solid var(--riq-border-2);
    border-radius: 12px !important;
    box-shadow: var(--shadow-4) !important;
    width: 258px;
    overflow: hidden;
    padding: 0 !important;
}

.riq-profile-menu .mud-list,
.riq-profile-menu .mud-list-padding {
    padding: 0 !important;
}

.riq-pm-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px 13px;
    border-bottom: 1px solid var(--riq-border-1);
}

.riq-pm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--riq-teal-50);
    border: 1.5px solid rgba(63, 208, 191, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 13px;
    color: var(--riq-teal);
    flex-shrink: 0;
}

.riq-pm-name {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    color: var(--riq-fg-1);
    line-height: 1.25;
}

.riq-pm-role {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--riq-fg-4);
    margin-top: 3px;
}

.riq-pm-section {
    padding: 5px 8px;
}

.riq-pm-section + .riq-pm-section {
    border-top: 1px solid var(--riq-border-1);
}

.riq-pm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--riq-fg-2);
    min-height: 40px;
}

.riq-pm-row--interactive {
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-standard, ease);
    user-select: none;
}

.riq-pm-row--interactive:hover {
    background: var(--riq-bg-hover);
}

.riq-pm-row-icon {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--riq-fg-4) !important;
    flex-shrink: 0;
}

.riq-pm-row-label {
    flex: 1;
}

.riq-pm-row-value {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    color: var(--riq-fg-4);
}

.riq-pm-row--danger {
    color: var(--riq-danger);
}

.riq-pm-row--danger .riq-pm-row-icon {
    color: var(--riq-danger) !important;
    opacity: 0.8;
}

/* RCLIENT-413 — Language row is an inline culture picker. The chevron shows expand state; picking a
   culture calls ICultureSwitcherService.SwitchToAsync (re-renders under the new culture). */
.riq-pm-row-chevron {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--riq-fg-4) !important;
    flex-shrink: 0;
}

.riq-pm-sublist {
    display: flex;
    flex-direction: column;
    padding: 0 8px 4px 8px;
}

.riq-pm-subrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 36px;   /* indent so labels align under the Language row's text */
    border-radius: 7px;
    font-size: 13px;
    color: var(--riq-fg-2);
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast, 120ms) var(--ease-standard, ease);
}

.riq-pm-subrow:hover {
    background: var(--riq-bg-hover);
}

.riq-pm-subrow-label {
    flex: 1;
}

.riq-pm-subrow--active {
    color: var(--riq-teal);
}

.riq-pm-subrow-check {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--riq-teal) !important;
    flex-shrink: 0;
}

/* RCLIENT-413 — shared banner column. Every alert surface (Link status, routing error, operator
   alert, transient tray) sits in this single column clamped to the work-zone width and centered,
   so alerts line up over the work area rather than spanning the full viewport. Top-justified by
   virtue of rendering at the top of MudMainContent. */
.riq-banner-stack {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* RCLIENT-421 — fit the work area exactly between the fixed top app bar (~56px) and the fixed
   bottom status bar (26px) and scroll INTERNALLY. Body/page never scrolls; short pages (e.g.
   Collector) don't force a page scrollbar, and long pages scroll within this region so their
   last content still clears the status bar. Replaces the pt-16/pb-16 utility padding, whose
   64/64 insets overflowed the viewport on pages that otherwise fit. Verified in-browser
   (Collector at 840h: no scroll; at 520h: internal scroll, 8px clearance above the status bar). */
.mud-main-content.riq-main-scroll {
    height: 100dvh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 56px;      /* top app bar */
    padding-bottom: 34px;   /* status bar (26px) + 8px gap */
}

/* RCLIENT-421 — Settings has a floating save bar (position:fixed; bottom:40px, ~60px tall);
   give the page extra bottom clearance (inside the scroller above) so the last card clears the
   bar. Global because ::deep on a class passed through MudContainer's outermost element never
   receives the Blazor scope attribute and never matches a scoped stylesheet. */
.riq-set-page-content { padding-bottom: 120px; }