/* /Components/ApiExplorer/RequestBuilder.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   REQUEST BUILDER — the console face
   Address bar, segmented controls and an instrument readout for the response.
   Every field is a bare input on a hairline; MudBlazor chrome is deliberately
   absent so the whole surface reads as one piece of equipment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mirrors the token block on .apix-root. Custom properties inherit down the
   DOM, so this is only a fallback that keeps the component self-sufficient if
   it is ever mounted outside the Explorer page — the values are identical. */
.rqb[b-m1coevef1y] {
    --x-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --x-chrome: var(--md-sys-color-surface-container-high);
    --x-nav: var(--md-sys-color-surface-container);
    --x-face: var(--md-sys-color-surface-container-lowest);
    --x-panel: var(--md-sys-color-surface-container-high);
    --x-panel-2: var(--md-sys-color-surface-container-highest);
    --x-ink: var(--md-sys-color-on-surface);
    --x-ink-2: var(--md-sys-color-on-surface-variant);
    --x-line: color-mix(in srgb, var(--md-sys-color-outline) 40%, transparent);
    --x-line-soft: color-mix(in srgb, var(--md-sys-color-outline) 20%, transparent);
    --x-accent: var(--md-sys-color-primary);
    --x-get: #0F766E;
    --x-post: #B45309;
    --x-put: #1D4ED8;
    --x-patch: #7C3AED;
    --x-delete: #BE123C;
    --x-other: #5B6472;
    --x-rail: 2px;
    --x-ease: var(--md-sys-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
    --x-fast: 140ms;
    --x-med: 240ms;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--x-face);
    color: var(--x-ink);
}

[dark-mode="true"] .rqb[b-m1coevef1y] {
    --x-get: #5EEAD4;
    --x-post: #FCD34D;
    --x-put: #93C5FD;
    --x-patch: #C4B5FD;
    --x-delete: #FDA4AF;
    --x-other: #9AA3B2;
}

.m-get[b-m1coevef1y] {
    --m: var(--x-get);
}

.m-post[b-m1coevef1y] {
    --m: var(--x-post);
}

.m-put[b-m1coevef1y] {
    --m: var(--x-put);
}

.m-patch[b-m1coevef1y] {
    --m: var(--x-patch);
}

.m-delete[b-m1coevef1y] {
    --m: var(--x-delete);
}

.rqb-mono[b-m1coevef1y] {
    font-family: var(--x-mono);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.rqb-label[b-m1coevef1y] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--x-ink-2);
    line-height: 1;
}

.rqb-scroll[b-m1coevef1y] {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--x-line) transparent;
}

    .rqb-scroll[b-m1coevef1y]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .rqb-scroll[b-m1coevef1y]::-webkit-scrollbar-thumb {
        background: var(--x-line);
        border: 3px solid transparent;
        background-clip: content-box;
        border-radius: 99px;
    }

/* ── Address bar ──────────────────────────────────────────────────────────── */

.rqb-address[b-m1coevef1y] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 11px 14px;
    background: var(--x-nav);
    border-block-end: 1px solid var(--x-line);
}

.rqb-verb[b-m1coevef1y] {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 3px;
    font-family: var(--x-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    color: var(--m, var(--x-other));
    background: transparent;
    background: color-mix(in srgb, var(--m, var(--x-other)) 17%, transparent);
    box-shadow: inset var(--x-rail) 0 0 var(--m, var(--x-other));
}

.rqb-url[b-m1coevef1y] {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-face);
    color: var(--x-ink);
    font-family: var(--x-mono);
    font-size: 12px;
    direction: ltr;
    text-align: start;
    transition: border-color var(--x-fast) var(--x-ease), box-shadow var(--x-fast) var(--x-ease);
}

    .rqb-url:focus[b-m1coevef1y] {
        outline: none;
        border-color: var(--x-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-accent) 18%, transparent);
    }

.rqb-send[b-m1coevef1y] {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-accent);
    color: var(--md-sys-color-on-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter var(--x-fast) var(--x-ease), opacity var(--x-fast) var(--x-ease);
}

    .rqb-send:hover:not(:disabled)[b-m1coevef1y] {
        filter: brightness(1.08);
    }

    .rqb-send:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: 2px;
    }

    .rqb-send:disabled[b-m1coevef1y] {
        opacity: .55;
        cursor: default;
    }

/* Signal in flight: a pulse travelling the width of the bar. */
.rqb-scan[b-m1coevef1y] {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 1px;
    overflow: hidden;
}

    .rqb-scan[b-m1coevef1y]::after {
        content: '';
        position: absolute;
        inset-block: 0;
        width: 34%;
        background: linear-gradient(90deg, transparent, var(--x-accent), transparent);
        animation: rqb-scan-b-m1coevef1y 1.05s var(--x-ease) infinite;
    }

@keyframes rqb-scan-b-m1coevef1y {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(390%);
    }
}

[dir="rtl"] .rqb-scan[b-m1coevef1y]::after {
    animation-name: rqb-scan-rtl-b-m1coevef1y;
}

@keyframes rqb-scan-rtl-b-m1coevef1y {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-390%);
    }
}

/* ── Tab strip ────────────────────────────────────────────────────────────── */

.rqb-tabs[b-m1coevef1y] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 0 auto;
    padding: 0 10px;
    background: var(--x-face);
    border-block-end: 1px solid var(--x-line);
}

.rqb-tab[b-m1coevef1y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--x-ink-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--x-fast) var(--x-ease);
}

    .rqb-tab[b-m1coevef1y]::after {
        content: '';
        position: absolute;
        inset-block-end: -1px;
        inset-inline: 8px;
        height: var(--x-rail);
        background: var(--x-accent);
        transform: scaleX(0);
        transition: transform var(--x-med) var(--x-ease);
    }

    .rqb-tab:hover[b-m1coevef1y] {
        color: var(--x-ink);
    }

    .rqb-tab:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: -3px;
    }

.rqb-tab-on[b-m1coevef1y] {
    color: var(--x-ink);
}

    .rqb-tab-on[b-m1coevef1y]::after {
        transform: scaleX(1);
    }

/* Count / configured marker, so the strip states the request shape at a glance. */
.rqb-tab-n[b-m1coevef1y] {
    font-family: var(--x-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 1px 5px;
    border-radius: 99px;
    background: var(--x-panel-2);
    color: var(--x-ink-2);
}

.rqb-tab-on .rqb-tab-n[b-m1coevef1y] {
    background: color-mix(in srgb, var(--x-accent) 16%, transparent);
    color: var(--x-accent);
}

.rqb-tab-dot[b-m1coevef1y] {
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--x-accent);
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.rqb-panel[b-m1coevef1y] {
    /* Once a response lands the readout is what you are reading, so it takes the
       larger share; the editor keeps a floor rather than collapsing. */
    flex: 1 1 40%;
    min-height: 96px;
    padding: 14px;
}

.rqb-stack[b-m1coevef1y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Field rows: label rail on the start edge, bare input filling the rest. */
.rqb-field[b-m1coevef1y] {
    display: grid;
    grid-template-columns: 168px 1fr auto;
    align-items: center;
    gap: 10px;
}

.rqb-field-key[b-m1coevef1y] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rqb-field-name[b-m1coevef1y] {
    font-family: var(--x-mono);
    font-size: 11.5px;
    color: var(--x-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rqb-src[b-m1coevef1y] {
    flex: 0 0 auto;
    font-family: var(--x-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 4px;
    border-radius: 3px;
    background: var(--x-panel-2);
    color: var(--x-ink-2);
}

.rqb-req[b-m1coevef1y] {
    color: var(--x-delete);
    font-size: 11px;
    line-height: 1;
}

.rqb-in[b-m1coevef1y] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-face);
    color: var(--x-ink);
    font-family: var(--x-mono);
    font-size: 11.5px;
    direction: ltr;
    text-align: start;
    transition: border-color var(--x-fast) var(--x-ease), background var(--x-fast) var(--x-ease);
}

    .rqb-in[b-m1coevef1y]::placeholder {
        color: var(--x-ink-2);
        opacity: .7;
    }

    .rqb-in:focus[b-m1coevef1y] {
        outline: none;
        border-color: var(--x-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-accent) 14%, transparent);
    }

.rqb-textarea[b-m1coevef1y] {
    box-sizing: border-box;
    width: 100%;
    min-height: 190px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.65;
    tab-size: 2;
}

/* ── Segmented control ────────────────────────────────────────────────────── */

.rqb-seg[b-m1coevef1y] {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px;
    border: 1px solid var(--x-line);
    border-radius: var(--md-sys-shape-corner-small, 8px);
    background: var(--x-nav);
    gap: 2px;
}

.rqb-seg-b[b-m1coevef1y] {
    padding: 5px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--x-ink-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--x-fast) var(--x-ease), color var(--x-fast) var(--x-ease);
}

    .rqb-seg-b:hover[b-m1coevef1y] {
        color: var(--x-ink);
    }

    .rqb-seg-b:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: 1px;
    }

.rqb-seg-on[b-m1coevef1y] {
    background: var(--x-face);
    color: var(--x-ink);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow, #000) 14%, transparent);
}

/* ── Ghost button ─────────────────────────────────────────────────────────── */

.rqb-btn[b-m1coevef1y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px dashed var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: transparent;
    color: var(--x-ink-2);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    align-self: flex-start;
    transition: color var(--x-fast) var(--x-ease), border-color var(--x-fast) var(--x-ease);
}

    .rqb-btn:hover[b-m1coevef1y] {
        color: var(--x-ink);
        border-color: var(--x-ink-2);
    }

    .rqb-btn:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: 2px;
    }

.rqb-x[b-m1coevef1y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--x-ink-2);
    cursor: pointer;
    transition: color var(--x-fast) var(--x-ease), background var(--x-fast) var(--x-ease);
}

    .rqb-x:hover[b-m1coevef1y] {
        color: var(--x-delete);
        background: color-mix(in srgb, var(--x-delete) 12%, transparent);
    }

    .rqb-x:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: -2px;
    }

/* ── Scope chips ──────────────────────────────────────────────────────────── */

.rqb-chips[b-m1coevef1y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 168px;
    overflow-y: auto;
    padding: 2px;
}

.rqb-chip[b-m1coevef1y] {
    padding: 4px 9px;
    border: 1px solid var(--x-line);
    border-radius: 99px;
    background: transparent;
    color: var(--x-ink-2);
    font-family: var(--x-mono);
    font-size: 10.5px;
    cursor: pointer;
    transition: all var(--x-fast) var(--x-ease);
}

    .rqb-chip:hover[b-m1coevef1y] {
        border-color: var(--x-ink-2);
        color: var(--x-ink);
    }

    .rqb-chip:focus-visible[b-m1coevef1y] {
        outline: 2px solid var(--x-accent);
        outline-offset: 2px;
    }

.rqb-chip-on[b-m1coevef1y] {
    border-color: transparent;
    background: color-mix(in srgb, var(--x-accent) 16%, transparent);
    color: var(--x-accent);
    font-weight: 600;
}

/* ── Inline hints & switches ──────────────────────────────────────────────── */

.rqb-hint[b-m1coevef1y] {
    font-size: 11px;
    line-height: 1.6;
    color: var(--x-ink-2);
}

    .rqb-hint code[b-m1coevef1y] {
        font-family: var(--x-mono);
        font-size: 10.5px;
        padding: 1px 4px;
        border-radius: 3px;
        background: var(--x-panel-2);
    }

.rqb-check[b-m1coevef1y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--x-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

    .rqb-check input[b-m1coevef1y] {
        width: 13px;
        height: 13px;
        accent-color: var(--x-accent);
        cursor: pointer;
    }

.rqb-hint-warn[b-m1coevef1y] {
    color: var(--x-post);
}

    .rqb-hint-warn code[b-m1coevef1y] {
        background: color-mix(in srgb, var(--x-post) 14%, transparent);
        color: var(--x-post);
    }

/* Label on the leading edge, re-issue action on the trailing edge. */
.rqb-tokenrow[b-m1coevef1y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .rqb-tokenrow .rqb-btn[b-m1coevef1y] {
        margin-inline-start: auto;
        align-self: center;
    }

.rqb-void[b-m1coevef1y] {
    padding: 26px 4px;
    font-size: 11.5px;
    color: var(--x-ink-2);
}

/* ── Response readout ─────────────────────────────────────────────────────── */

.rqb-out[b-m1coevef1y] {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    min-height: 0;
    border-block-start: 1px solid var(--x-line);
    background: var(--x-face);
    animation: rqb-rise-b-m1coevef1y var(--x-med) var(--x-ease) both;
}

@keyframes rqb-rise-b-m1coevef1y {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* The gauge strip — the memorable element. Label above value, hairline
   dividers between cells, tabular figures so digits never jitter. */
.rqb-gauges[b-m1coevef1y] {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    background: var(--x-nav);
    border-block-end: 1px solid var(--x-line);
}

.rqb-gauge[b-m1coevef1y] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px 16px;
    border-inline-end: 1px solid var(--x-line-soft);
    min-width: 0;
}

.rqb-gauge-wide[b-m1coevef1y] {
    flex: 1 1 auto;
    border-inline-end: 0;
}

.rqb-gauge-v[b-m1coevef1y] {
    font-family: var(--x-mono);
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--x-ink);
}

.rqb-gauge-u[b-m1coevef1y] {
    font-size: 11px;
    font-weight: 400;
    color: var(--x-ink-2);
    margin-inline-start: 3px;
}

.rqb-gauge-sub[b-m1coevef1y] {
    font-size: 11px;
    color: var(--x-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s-2xx[b-m1coevef1y] {
    color: var(--x-get);
}

.s-3xx[b-m1coevef1y] {
    color: var(--x-put);
}

.s-4xx[b-m1coevef1y] {
    color: var(--x-post);
}

.s-5xx[b-m1coevef1y] {
    color: var(--x-delete);
}

.rqb-body[b-m1coevef1y] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 14px 16px;
    background: var(--x-face);
    color: var(--x-ink);
    font-family: var(--x-mono);
    font-size: 11.5px;
    line-height: 1.7;
    white-space: pre;
    tab-size: 2;
}

.rqb-alert[b-m1coevef1y] {
    margin: 14px;
    padding: 12px 14px;
    border: 1px solid var(--x-line);
    border-inline-start: var(--x-rail) solid var(--x-delete);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-face);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--x-ink-2);
}

.rqb-alert-title[b-m1coevef1y] {
    display: block;
    margin-block-end: 4px;
    font-family: var(--x-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--x-delete);
}

.rqb-alert-info[b-m1coevef1y] {
    border-inline-start-color: var(--x-put);
}

    .rqb-alert-info .rqb-alert-title[b-m1coevef1y] {
        color: var(--x-put);
    }

/* ── MudFileUpload: the one MudBlazor control left in the console ─────────── */

[b-m1coevef1y] .rqb-file .mud-button-root {
    height: 30px;
    min-width: 0;
    padding: 0 12px;
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    border: 1px dashed var(--x-line);
    color: var(--x-ink-2);
    font-family: var(--x-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: none;
}

    [b-m1coevef1y] .rqb-file .mud-button-root:hover {
        border-color: var(--x-ink-2);
        color: var(--x-ink);
        background: var(--x-panel-2);
    }

/* ── Narrow viewports ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .rqb-field[b-m1coevef1y] {
        grid-template-columns: 120px 1fr auto;
    }
}
/* /Components/FrameElements/AuthError.razor.rz.scp.css */
/* ── Tokens (anchored on root element — CSS isolation safe) ── */
.ae-page[b-4nj85xq8hi] {
    --ae-bg:           #f2efe9;
    --ae-card-bg:      #ffffff;
    --ae-text:         #18181b;
    --ae-text-soft:    #71717a;
    --ae-text-muted:   #a1a1aa;
    --ae-accent:       #b91c2c;
    --ae-accent-hover: #9f1239;
    --ae-accent-fg:    #ffffff;
    --ae-border:       rgba(0, 0, 0, 0.07);
    --ae-input-bg:     #f7f5f2;
    --ae-code-bg:      #f4f4f5;
    --ae-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    --ae-ghost-hover:  rgba(0, 0, 0, 0.05);
    --ae-radius:       14px;
    --ae-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --ae-font-mono:    'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
    --ae-transition:   background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[dark-mode="true"] .ae-page[b-4nj85xq8hi] {
    --ae-bg:           #0c0c12;
    --ae-card-bg:      #12121a;
    --ae-text:         #e4e4e7;
    --ae-text-soft:    #a1a1aa;
    --ae-text-muted:   #71717a;
    --ae-accent:       #f43f5e;
    --ae-accent-hover: #e11d48;
    --ae-accent-fg:    #ffffff;
    --ae-border:       rgba(255, 255, 255, 0.07);
    --ae-input-bg:     #1c1c28;
    --ae-code-bg:      #1e1e2a;
    --ae-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.30);
    --ae-ghost-hover:  rgba(255, 255, 255, 0.05);
}

/* ── Page wrapper ───────────────────────────────────────── */
.ae-page[b-4nj85xq8hi] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--ae-bg);
    font-family: var(--ae-font);
    color: var(--ae-text);
    transition: var(--ae-transition);
    overflow: hidden;
}

/* ── Background layers ──────────────────────────────────── */
.ae-bg-layer[b-4nj85xq8hi] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ae-bg-grid[b-4nj85xq8hi] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
}

[dark-mode="true"] .ae-bg-grid[b-4nj85xq8hi] {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.ae-bg-circle[b-4nj85xq8hi] {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(185, 28, 44, 0.06) 0%, transparent 70%);
}

[dark-mode="true"] .ae-bg-circle[b-4nj85xq8hi] {
    background: radial-gradient(circle at center, rgba(244, 63, 94, 0.08) 0%, transparent 70%);
}

/* ── Card ───────────────────────────────────────────────── */
.ae-card[b-4nj85xq8hi] {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 480px;
    border-radius: var(--ae-radius);
    box-shadow: var(--ae-shadow-lg);
    overflow: hidden;
    animation: ae-rise-b-4nj85xq8hi 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ae-rise-b-4nj85xq8hi {
    from { opacity: 0; transform: translateY(24px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);      }
}

/* ── Visual panel ───────────────────────────────────────── */
.ae-panel-visual[b-4nj85xq8hi] {
    position: relative;
    width: 42%;
    flex-shrink: 0;
    background: var(--ae-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    overflow: hidden;
    gap: 20px;
}

.ae-panel-pattern[b-4nj85xq8hi] {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 14px,
        rgba(0, 0, 0, 0.055) 14px,
        rgba(0, 0, 0, 0.055) 15px
    );
    pointer-events: none;
}

.ae-panel-watermark[b-4nj85xq8hi] {
    position: absolute;
    bottom: -24px;
    right: -8px;
    font-size: 240px;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.07);
    pointer-events: none;
    user-select: none;
    letter-spacing: -8px;
}

.ae-error-badge[b-4nj85xq8hi] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--ae-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ae-error-badge-dot[b-4nj85xq8hi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    animation: ae-dot-blink-b-4nj85xq8hi 2.4s ease-in-out infinite;
}

@keyframes ae-dot-blink-b-4nj85xq8hi {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.ae-icon-wrap[b-4nj85xq8hi] {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ae-icon-ring[b-4nj85xq8hi] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    animation: ae-ring-pulse-b-4nj85xq8hi 3s ease-in-out infinite;
}

.ae-icon-ring-outer[b-4nj85xq8hi] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    animation: ae-ring-pulse-b-4nj85xq8hi 3s ease-in-out infinite 0.6s;
}

@keyframes ae-ring-pulse-b-4nj85xq8hi {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(1.04); }
}

.ae-icon-wrap svg[b-4nj85xq8hi] {
    width: 52px;
    height: 52px;
    color: rgba(255, 255, 255, 0.95);
    stroke-width: 1.75;
    position: relative;
    z-index: 1;
}

.ae-panel-title[b-4nj85xq8hi] {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    margin-top: 4px;
}

/* ── Content panel ──────────────────────────────────────── */
.ae-panel-content[b-4nj85xq8hi] {
    flex: 1;
    background: var(--ae-card-bg);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--ae-border);
    transition: var(--ae-transition);
}

.ae-content-inner[b-4nj85xq8hi] {
    padding: 48px 44px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Typography ─────────────────────────────────────────── */
.ae-title[b-4nj85xq8hi] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ae-text);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.ae-message[b-4nj85xq8hi] {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ae-text-soft);
    margin-bottom: 28px;
    transition: color 0.3s ease;
}

/* ── Technical details ──────────────────────────────────── */
.ae-details[b-4nj85xq8hi] {
    border: 1px solid var(--ae-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 28px;
    transition: border-color 0.3s ease;
}

.ae-details-toggle[b-4nj85xq8hi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ae-text-soft);
    background: var(--ae-input-bg);
    cursor: pointer;
    list-style: none;
    user-select: none;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, color 0.2s ease;
}

.ae-details-toggle:hover[b-4nj85xq8hi] { color: var(--ae-text); }

.ae-details-toggle[b-4nj85xq8hi]::-webkit-details-marker { display: none; }

.ae-details-chevron[b-4nj85xq8hi] {
    width: 14px;
    height: 14px;
    color: var(--ae-text-muted);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.ae-details[open] .ae-details-chevron[b-4nj85xq8hi] {
    transform: rotate(90deg);
}

.ae-details-body[b-4nj85xq8hi] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ae-border);
    background: var(--ae-card-bg);
}

.ae-detail-row[b-4nj85xq8hi] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.ae-detail-key[b-4nj85xq8hi] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ae-text-muted);
    min-width: 76px;
    flex-shrink: 0;
}

.ae-detail-val[b-4nj85xq8hi] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ae-text-soft);
    word-break: break-word;
}

code.ae-detail-val[b-4nj85xq8hi] {
    font-family: var(--ae-font-mono);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--ae-code-bg);
    color: var(--ae-accent);
    border: 1px solid var(--ae-border);
}

/* ── Actions ────────────────────────────────────────────── */
.ae-actions[b-4nj85xq8hi] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ae-btn[b-4nj85xq8hi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    font-family: var(--ae-font);
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.15s ease;
    white-space: nowrap;
}

.ae-btn svg[b-4nj85xq8hi] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ae-btn-primary[b-4nj85xq8hi] {
    background: var(--ae-accent);
    color: var(--ae-accent-fg);
    box-shadow: 0 2px 8px rgba(185, 28, 44, 0.28);
}

.ae-btn-primary:hover[b-4nj85xq8hi] {
    background: var(--ae-accent-hover);
    box-shadow: 0 4px 16px rgba(185, 28, 44, 0.38);
    transform: translateY(-1px);
}

.ae-btn-primary:active[b-4nj85xq8hi] { transform: translateY(0); box-shadow: none; }

[dark-mode="true"] .ae-btn-primary[b-4nj85xq8hi] {
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.28);
}

[dark-mode="true"] .ae-btn-primary:hover[b-4nj85xq8hi] {
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.38);
}

.ae-btn-ghost[b-4nj85xq8hi] {
    background: transparent;
    color: var(--ae-text-soft);
    border-color: var(--ae-border);
}

.ae-btn-ghost:hover[b-4nj85xq8hi] {
    background: var(--ae-ghost-hover);
    color: var(--ae-text);
    border-color: rgba(0, 0, 0, 0.13);
    transform: translateY(-1px);
}

[dark-mode="true"] .ae-btn-ghost:hover[b-4nj85xq8hi] {
    border-color: rgba(255, 255, 255, 0.13);
}

.ae-btn-ghost:active[b-4nj85xq8hi] { transform: translateY(0); }

/* ── Help text ──────────────────────────────────────────── */
.ae-help[b-4nj85xq8hi] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ae-text-muted);
    padding-top: 20px;
    border-top: 1px solid var(--ae-border);
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .ae-page[b-4nj85xq8hi] {
        padding: 16px;
        align-items: flex-start;
    }

    .ae-card[b-4nj85xq8hi] {
        flex-direction: column;
        min-height: unset;
        max-width: 100%;
    }

    .ae-panel-visual[b-4nj85xq8hi] {
        width: 100%;
        flex-direction: row;
        padding: 24px 28px;
        gap: 16px;
        min-height: unset;
        justify-content: flex-start;
    }

    .ae-panel-watermark[b-4nj85xq8hi] { display: none; }

    .ae-icon-wrap[b-4nj85xq8hi] {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .ae-icon-wrap svg[b-4nj85xq8hi] { width: 30px; height: 30px; }

    .ae-icon-ring[b-4nj85xq8hi]        { inset: 0; }
    .ae-icon-ring-outer[b-4nj85xq8hi]  { inset: -7px; }

    .ae-panel-title[b-4nj85xq8hi] {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
        text-align: left;
        letter-spacing: -0.01em;
    }

    .ae-error-badge[b-4nj85xq8hi] { display: none; }

    .ae-panel-content[b-4nj85xq8hi] {
        border-left: none;
        border-top: 1px solid var(--ae-border);
    }

    .ae-content-inner[b-4nj85xq8hi] { padding: 32px 28px; }

    .ae-title[b-4nj85xq8hi] { font-size: 20px; }

    .ae-actions[b-4nj85xq8hi] { flex-direction: column; }

    .ae-btn[b-4nj85xq8hi] { justify-content: center; width: 100%; }
}

@media (max-width: 420px) {
    .ae-content-inner[b-4nj85xq8hi] { padding: 24px 20px; }
}
/* /Components/ReconnectModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Reconnect Modal  ·  SoftMax Identity
   Cosmic Signal aesthetic — dark-first, light-mode aware
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Blazor visibility rules (required — do not alter) ──────────── */

.components-reconnect-first-attempt-visible[b-rr6rob1mj2],
.components-reconnect-repeated-attempt-visible[b-rr6rob1mj2],
.components-reconnect-failed-visible[b-rr6rob1mj2],
.components-pause-visible[b-rr6rob1mj2],
.components-resume-failed-visible[b-rr6rob1mj2],
.components-rejoining-animation[b-rr6rob1mj2] { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-failed[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rr6rob1mj2] { display: block; }

/* Override display type for flex elements */
#components-reconnect-modal .rcm-visual[b-rr6rob1mj2],
#components-reconnect-modal .rcm-bars[b-rr6rob1mj2],
#components-reconnect-modal .rcm-status-icon[b-rr6rob1mj2],
#components-reconnect-modal .rcm-quote[b-rr6rob1mj2] { display: none; }

#components-reconnect-modal.components-reconnect-show .rcm-visual[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying .rcm-visual[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-show .rcm-bars[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying .rcm-bars[b-rr6rob1mj2] { display: flex; }

#components-reconnect-modal.components-reconnect-show .rcm-quote[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-retrying .rcm-quote[b-rr6rob1mj2] { display: block; }

#components-reconnect-modal.components-reconnect-failed .rcm-status-icon--error[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-paused .rcm-status-icon--warn[b-rr6rob1mj2] { display: flex; }


/* ── 2. Design tokens — state-driven active color ──────────────────── */

#components-reconnect-modal[b-rr6rob1mj2] {
    --rcm-active:      #2b9fe8;
    --rcm-active-glow: rgba(43, 159, 232, 0.3);
}

#components-reconnect-modal.components-reconnect-retrying[b-rr6rob1mj2] {
    --rcm-active:      #f57c00;
    --rcm-active-glow: rgba(245, 124, 0, 0.3);
}

#components-reconnect-modal.components-reconnect-failed[b-rr6rob1mj2],
#components-reconnect-modal.components-reconnect-resume-failed[b-rr6rob1mj2] {
    --rcm-active:      #e53935;
    --rcm-active-glow: rgba(229, 57, 53, 0.32);
}

#components-reconnect-modal.components-reconnect-paused[b-rr6rob1mj2] {
    --rcm-active:      #f57c00;
    --rcm-active-glow: rgba(245, 124, 0, 0.3);
}

/* Light mode surface tokens */
#components-reconnect-modal[b-rr6rob1mj2] {
    --rcm-bg:     rgba(246, 249, 255, 0.98);
    --rcm-border: rgba(43, 159, 232, 0.2);
    --rcm-text:   #1a2540;
    --rcm-muted:  rgba(55, 80, 125, 0.6);
    --rcm-error:  #e53935;
    --rcm-warn:   #f57c00;
}

/* Dark mode surface tokens
   [dark-mode="true"]  — set immediately from cookie in App.razor (before Blazor loads)
   [dark-mode="true"]  — set by MudBlazor ThemeProvider after circuit connects     */
[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2],
[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2] {
    --rcm-bg:     rgba(10, 13, 28, 0.97);
    --rcm-border: rgba(79, 175, 235, 0.16);
    --rcm-text:   #eef3fc;
    --rcm-muted:  rgba(190, 215, 245, 0.82);
}

/* ── 3. Dialog base ────────────────────────────────────────────────── */

#components-reconnect-modal[b-rr6rob1mj2] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(340px, 92vw);
    height: fit-content;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--rcm-bg);
    color: var(--rcm-text);
    border: 1px solid var(--rcm-border);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 10px 48px rgba(0, 0, 0, 0.11),
        0 0 0 5px rgba(43, 159, 232, 0.05);
    overflow: hidden;
    opacity: 0;
    animation: rcm-fade-out-b-rr6rob1mj2 0.3s both;

    /* Top accent streak */
    &::before {
        content: '';
        position: absolute;
        top: 0; left: 15%; right: 15%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--rcm-active) 50%, transparent);
        opacity: 0.65;
        pointer-events: none;
        transition: background 0.5s ease;
    }

    /* Bottom ambient glow */
    &[b-rr6rob1mj2]::after {
        content: '';
        position: absolute;
        bottom: -55px; left: 50%;
        transform: translateX(-50%);
        width: 200px; height: 100px;
        background: radial-gradient(ellipse, var(--rcm-active-glow) 0%, transparent 70%);
        pointer-events: none;
        transition: background 0.5s ease;
    }

    &[open][b-rr6rob1mj2] {
        animation: rcm-enter-b-rr6rob1mj2 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2],
[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2] {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 12px 60px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(43, 159, 232, 0.05) inset;
}

#components-reconnect-modal[b-rr6rob1mj2]::backdrop {
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: rcm-fade-in-b-rr6rob1mj2 0.35s ease both;
}

[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2]::backdrop,
[dark-mode="true"] #components-reconnect-modal[b-rr6rob1mj2]::backdrop {
    background: radial-gradient(
        ellipse at 40% 35%,
        rgba(18, 12, 45, 0.65) 0%,
        rgba(0, 0, 0, 0.78) 100%
    );
}

/* ── 4. Animations ─────────────────────────────────────────────────── */

@keyframes rcm-enter-b-rr6rob1mj2 {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes rcm-fade-in-b-rr6rob1mj2  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcm-fade-out-b-rr6rob1mj2 { from { opacity: 1; } to { opacity: 0; } }

/* ── 5. Container ──────────────────────────────────────────────────── */

.components-reconnect-container[b-rr6rob1mj2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

/* Horizontal scan-line sweep */
.components-reconnect-container[b-rr6rob1mj2]::after {
    content: '';
    position: absolute;
    left: -1.75rem; right: -1.75rem;
    top: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--rcm-active) 50%, transparent);
    opacity: 0;
    animation: rcm-scan-b-rr6rob1mj2 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rcm-scan-b-rr6rob1mj2 {
    0%   { top: -2rem;             opacity: 0; }
    5%   {                         opacity: 0.22; }
    92%  {                         opacity: 0.22; }
    100% { top: calc(100% + 2rem); opacity: 0; }
}

/* ── 6. Orbital animation ──────────────────────────────────────────── */

.rcm-visual[b-rr6rob1mj2] {
    width: 124px; height: 124px;
    align-items: center;
    justify-content: center;
    perspective: 360px;
}

.rcm-orbit-scene[b-rr6rob1mj2] {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rcm-ring[b-rr6rob1mj2] {
    position: absolute;
    width: 104px; height: 104px;
    border-radius: 50%;
    border: 1.5px solid rgba(43, 159, 232, 0.22);
    transition: border-color 0.5s ease;
}

[dark-mode="true"] .rcm-ring[b-rr6rob1mj2],
[dark-mode="true"] .rcm-ring[b-rr6rob1mj2] { border-color: rgba(79, 195, 247, 0.18); }

#components-reconnect-modal.components-reconnect-retrying .rcm-ring[b-rr6rob1mj2] { border-color: rgba(245, 124, 0, 0.2); }

.rcm-ring-1[b-rr6rob1mj2] { animation: rcm-spin-1-b-rr6rob1mj2 3.2s linear infinite; }
.rcm-ring-2[b-rr6rob1mj2] { animation: rcm-spin-2-b-rr6rob1mj2 4.4s linear infinite; }
.rcm-ring-3[b-rr6rob1mj2] { animation: rcm-spin-3-b-rr6rob1mj2 5.8s linear infinite; }

@keyframes rcm-spin-1-b-rr6rob1mj2 {
    from { transform: rotateX(72deg) rotateZ(0deg);   }
    to   { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes rcm-spin-2-b-rr6rob1mj2 {
    from { transform: rotateX(72deg) rotateZ(60deg);  }
    to   { transform: rotateX(72deg) rotateZ(420deg); }
}
@keyframes rcm-spin-3-b-rr6rob1mj2 {
    from { transform: rotateX(72deg) rotateZ(120deg); }
    to   { transform: rotateX(72deg) rotateZ(480deg); }
}

/* Travelling particle */
.rcm-dot[b-rr6rob1mj2] {
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--rcm-active);
    box-shadow: 0 0 10px 2px var(--rcm-active-glow);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Core node */
.rcm-core[b-rr6rob1mj2] {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--rcm-bg);
    border: 1.5px solid var(--rcm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: border-color 0.5s ease;
}

.rcm-pulse-ring[b-rr6rob1mj2] {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--rcm-active);
    animation: rcm-pulse-b-rr6rob1mj2 2.4s ease-out infinite;
    transition: border-color 0.5s ease;
}

.rcm-pulse-ring--delay[b-rr6rob1mj2] { animation-delay: -1.2s; }

@keyframes rcm-pulse-b-rr6rob1mj2 {
    0%   { transform: scale(0.88); opacity: 0.75; }
    100% { transform: scale(2.1);  opacity: 0; }
}

.rcm-core-icon[b-rr6rob1mj2] {
    color: var(--rcm-active);
    display: flex;
    animation: rcm-breathe-b-rr6rob1mj2 2.4s ease-in-out infinite;
    transition: color 0.5s ease;
}

@keyframes rcm-breathe-b-rr6rob1mj2 {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.9); }
}

/* ── 7. Status icons (failed / paused) ─────────────────────────────── */

.rcm-status-icon[b-rr6rob1mj2] {
    width: 72px; height: 72px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    animation: rcm-icon-pop-b-rr6rob1mj2 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rcm-icon-pop-b-rr6rob1mj2 {
    from { transform: scale(0.55); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.rcm-status-icon--error[b-rr6rob1mj2] {
    background: rgba(229, 57, 53, 0.09);
    border: 1px solid rgba(229, 57, 53, 0.28);
    color: var(--rcm-error);
    box-shadow: 0 0 32px rgba(229, 57, 53, 0.3);
}

.rcm-status-icon--warn[b-rr6rob1mj2] {
    background: rgba(245, 124, 0, 0.09);
    border: 1px solid rgba(245, 124, 0, 0.28);
    color: var(--rcm-warn);
    box-shadow: 0 0 32px rgba(245, 124, 0, 0.28);
}

/* ── 8. Text ───────────────────────────────────────────────────────── */

#components-reconnect-modal p[b-rr6rob1mj2] { margin: 0; text-align: center; }

.rcm-title[b-rr6rob1mj2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rcm-text);
    letter-spacing: 0.01em;
}

.rcm-title--error[b-rr6rob1mj2] { color: var(--rcm-error); }
.rcm-title--warn[b-rr6rob1mj2]  { color: var(--rcm-warn); }

.rcm-sub[b-rr6rob1mj2] {
    font-size: 0.8rem;
    color: var(--rcm-muted);
    line-height: 1.55;
}

.rcm-countdown[b-rr6rob1mj2] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rcm-active);
    transition: color 0.5s ease;
}

/* ── 9. Signal equalizer bars ──────────────────────────────────────── */

.rcm-bars[b-rr6rob1mj2] {
    gap: 3px;
    align-items: flex-end;
    height: 18px;
}

.rcm-bars span[b-rr6rob1mj2] {
    width: 4px;
    border-radius: 2px;
    background: var(--rcm-active);
    animation: rcm-bar-b-rr6rob1mj2 1.15s ease-in-out infinite;
    transform-origin: bottom;
    transition: background 0.5s ease;
}

.rcm-bars span:nth-child(1)[b-rr6rob1mj2] { height: 6px;  animation-delay: 0s; }
.rcm-bars span:nth-child(2)[b-rr6rob1mj2] { height: 11px; animation-delay: 0.11s; }
.rcm-bars span:nth-child(3)[b-rr6rob1mj2] { height: 17px; animation-delay: 0.22s; }
.rcm-bars span:nth-child(4)[b-rr6rob1mj2] { height: 11px; animation-delay: 0.33s; }
.rcm-bars span:nth-child(5)[b-rr6rob1mj2] { height: 6px;  animation-delay: 0.44s; }

@keyframes rcm-bar-b-rr6rob1mj2 {
    0%, 100% { opacity: 0.22; transform: scaleY(0.32); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

/* ── 10. Rotating quote ────────────────────────────────────────────── */

.rcm-quote[b-rr6rob1mj2] {
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--rcm-muted);
    line-height: 1.6;
    max-width: 240px;
    min-height: 2.6em;          /* prevent layout shift between quotes   */
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--rcm-border);
    width: 100%;

    /* Fade transition driven by .rcm-quote--out class */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.38s ease, transform 0.38s ease;
}

.rcm-quote--out[b-rr6rob1mj2] {
    opacity: 0;
    transform: translateY(5px);
}

/* Appear animation on first show */
#components-reconnect-modal[open] .rcm-quote[b-rr6rob1mj2] {
    animation: rcm-quote-appear-b-rr6rob1mj2 0.6s ease 0.7s both;
}

@keyframes rcm-quote-appear-b-rr6rob1mj2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/ReportViewer/ReportViewer.razor.rz.scp.css */
/* ─── SIDEBAR ─────────────────────────────────────────── */

.rv-sidebar[b-rpsyfzu155] {
    border-right: 1px solid var(--mud-palette-divider);
}

.rv-sidebar-content[b-rpsyfzu155] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ─── SIDEBAR HEADER ──────────────────────────────────── */

.rv-sidebar-header[b-rpsyfzu155] {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    padding: 1.120rem 1.25rem 0.900rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.rv-sidebar-header[b-rpsyfzu155]::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -22px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.rv-sidebar-header[b-rpsyfzu155]::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

[b-rpsyfzu155] .rv-header-title {
    color: #fff;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

/* ─── REPORT SELECTOR ─────────────────────────────────── */

.rv-report-selector[b-rpsyfzu155] {
    padding: 0.875rem 1rem 0.5rem;
    flex-shrink: 0;
}

[b-rpsyfzu155] .rv-report-selector .mud-skeleton {
    border-radius: 8px;
}

/* ─── MAIN CONTENT WRAP ───────────────────────────────── */

.rv-main-content-wrap[b-rpsyfzu155] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ─── FILTER HEADER ───────────────────────────────────── */

.rv-filter-header[b-rpsyfzu155] {
    padding: 0.625rem 1rem 0.375rem;
    flex-shrink: 0;
}

[b-rpsyfzu155] .rv-filter-loading-spinner {
    width: 14px;
    height: 14px;
}

[b-rpsyfzu155] .rv-filter-section-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-rpsyfzu155] .rv-toolbar-divider {
    height: 22px;
    align-self: center;
}

/* ─── FILTER SECTION ──────────────────────────────────── */

.rv-filter-section[b-rpsyfzu155] {
    overflow-y: auto;
    flex: 1;
    padding: 0.375rem 1rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider) transparent;
}

.rv-filter-section[b-rpsyfzu155]::-webkit-scrollbar {
    width: 4px;
}

.rv-filter-section[b-rpsyfzu155]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-divider);
    border-radius: 2px;
}

.rv-filter-section[b-rpsyfzu155]::-webkit-scrollbar-track {
    background: transparent;
}

/* ─── FILTER BADGE ────────────────────────────────────── */

.rv-filter-badge[b-rpsyfzu155] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: #fff;
    border-radius: 10px;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ─── ACTION SECTION ──────────────────────────────────── */

.rv-action-section[b-rpsyfzu155] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

/* ─── CLOSE SECTION ───────────────────────────────────── */

.rv-close-section[b-rpsyfzu155] {
    padding: 0.5rem 1rem 0.875rem;
    flex-shrink: 0;
}

.rv-close-section--bordered[b-rpsyfzu155] {
    border-top: 1px solid var(--mud-palette-divider);
}

/* ─── MAIN TOOLBAR ────────────────────────────────────── */

.rv-main-toolbar[b-rpsyfzu155] {
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 1px 0 var(--mud-palette-divider), 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    min-height: 52px;
    background: var(--mud-palette-surface);
    position: relative;
    z-index: 1;
}

[b-rpsyfzu155] .rv-report-name {
    font-weight: 600;
    letter-spacing: -0.01em;
}

[b-rpsyfzu155] .rv-toolbar-progress-bar {
    width: 100px;
}

/* ─── TOOLBAR ACTIONS ─────────────────────────────────── */

.rv-toolbar-actions[b-rpsyfzu155] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}

[b-rpsyfzu155] .rv-toolbar-action-btn {
    border-radius: 8px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

[b-rpsyfzu155] .rv-toolbar-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Same footprint as the icon button it replaces, so the toolbar never shifts. */
.rv-toolbar-busy[b-rpsyfzu155] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* ─── CONTENT AREA ────────────────────────────────────── */

.rv-content-area[b-rpsyfzu155] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0 12px 12px;
}

/* ─── LOADING OVERLAY ─────────────────────────────────── */

.rv-loading-overlay[b-rpsyfzu155] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
    gap: 1rem;
    border-radius: 0 0 8px 8px;
    animation: rv-fade-in-b-rpsyfzu155 0.25s ease;
}

[b-rpsyfzu155] .rv-loading-title {
    font-weight: 600;
}

/* ─── EMPTY STATES ────────────────────────────────────── */

.rv-empty-state[b-rpsyfzu155] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    animation: rv-fade-in-b-rpsyfzu155 0.35s ease;
}

[b-rpsyfzu155] .rv-empty-icon--error {
    font-size: 4.5rem;
}

[b-rpsyfzu155] .rv-empty-icon--idle {
    font-size: 5.5rem;
    opacity: 0.5;
}

[b-rpsyfzu155] .rv-empty-title {
    font-weight: 600;
}

[b-rpsyfzu155] .rv-empty-body {
    max-width: 360px;
    text-align: center;
    line-height: 1.6;
}

/* ─── ANIMATIONS ──────────────────────────────────────── */

@keyframes rv-fade-in-b-rpsyfzu155 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/SoftMaxAvatarPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   SoftMaxAvatarPicker — CSS Isolation
   Design: Clean & Soft MD3 · MudBlazor palette variables
   ═══════════════════════════════════════════════════════════ */

/* ── Root ─────────────────────────────────────────────────── */
.sm-ap-root[b-wqz79pa7q5] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ── Avatar trigger ───────────────────────────────────────── */
.sm-ap-avatar-wrap[b-wqz79pa7q5] {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    transition: box-shadow 0.25s ease;
}

.sm-ap-avatar--clickable[b-wqz79pa7q5] {
    cursor: pointer;
}

    .sm-ap-avatar--clickable:hover[b-wqz79pa7q5] {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent),
                    0 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    }

        .sm-ap-avatar--clickable:hover .sm-ap-overlay[b-wqz79pa7q5] {
            opacity: 1;
        }

[b-wqz79pa7q5] .sm-ap-avatar.mud-avatar {
    width: var(--av-size, 80px);
    height: var(--av-size, 80px);
    font-size: var(--av-fs, 32px);
    font-weight: 600;
    transition: box-shadow 0.25s ease;
}

.sm-ap-avatar-img[b-wqz79pa7q5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

[b-wqz79pa7q5] .sm-ap-avatar-icon.mud-icon-root {
    font-size: calc(var(--av-size, 80px) * 0.42);
    color: var(--mud-palette-primary);
}

/* Overlay shown on hover */
.sm-ap-overlay[b-wqz79pa7q5] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.22s ease;
    color: #fff;
    pointer-events: none;
}

.sm-ap-overlay-txt[b-wqz79pa7q5] {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Label / error ────────────────────────────────────────── */
.sm-ap-label[b-wqz79pa7q5] {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
}

.sm-ap-error-text[b-wqz79pa7q5] {
    font-size: 0.72rem;
    text-align: center;
}

/* ── Action bar (Choose / Remove buttons) ─────────────────── */
.sm-ap-action-bar[b-wqz79pa7q5] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Hidden file input ────────────────────────────────────── */
.sm-ap-file-input[b-wqz79pa7q5] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — shared title elements
   ═══════════════════════════════════════════════════════════ */
.sm-ap-title-icon[b-wqz79pa7q5] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.sm-ap-title-icon--camera[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: var(--mud-palette-secondary);
}

[b-wqz79pa7q5] .sm-ap-title-heading.mud-typography {
    font-weight: 700;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   PICKER DIALOG — layout
   ═══════════════════════════════════════════════════════════ */
.sm-ap-dialog-layout[b-wqz79pa7q5] {
    display: grid;
    grid-template-columns: 172px 1fr;
    gap: 24px;
    min-height: 320px;
    padding: 2px 0 4px;
}

/* ── Preview column ───────────────────────────────────────── */
.sm-ap-preview-col[b-wqz79pa7q5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.sm-ap-preview-frame[b-wqz79pa7q5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background-gray));
}

[b-wqz79pa7q5] .sm-ap-preview-avatar.mud-avatar {
    width: 120px;
    height: 120px;
    font-size: 2.4rem;
    font-weight: 600;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), 0 0 0 2px var(--mud-palette-primary);
}

[b-wqz79pa7q5] .sm-ap-preview-person-icon.mud-icon-root {
    font-size: 3.6rem;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 60%, transparent);
}

.sm-ap-preview-ring[b-wqz79pa7q5] {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
    animation: sm-ap-spin-b-wqz79pa7q5 12s linear infinite;
    pointer-events: none;
}

@keyframes sm-ap-spin-b-wqz79pa7q5 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sm-ap-initials-text[b-wqz79pa7q5] {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.sm-ap-preview-label[b-wqz79pa7q5] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-wqz79pa7q5] .sm-ap-preview-action.mud-button-root {
    min-width: 0;
    padding: 4px 8px;
}

/* ── Sources column ───────────────────────────────────────── */
.sm-ap-sources-col[b-wqz79pa7q5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sm-ap-source-card[b-wqz79pa7q5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1.5px dashed var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-surface));
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-align: start;
    width: 100%;
    font-family: inherit;
    color: inherit;
    justify-content: start
}

    .sm-ap-source-card:hover[b-wqz79pa7q5] {
        border-color: var(--mud-palette-primary);
        border-style: solid;
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
        box-shadow: 0 2px 14px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
        transform: translateY(-1px);
    }

    .sm-ap-source-card:active[b-wqz79pa7q5] {
        transform: translateY(0);
    }

    .sm-ap-source-card.mud-drop-zone-active[b-wqz79pa7q5] {
        border-color: var(--mud-palette-primary);
        border-style: solid;
        background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    }

.sm-ap-source-icon[b-wqz79pa7q5] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.sm-ap-source-card:hover .sm-ap-source-icon[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.sm-ap-source-icon--camera[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 11%, transparent);
    color: var(--mud-palette-secondary);
}

.sm-ap-source-card:hover .sm-ap-source-icon--camera[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

.sm-ap-source-text[b-wqz79pa7q5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sm-ap-source-title[b-wqz79pa7q5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.sm-ap-source-sub[b-wqz79pa7q5] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ── Sections (presets / color palette) ───────────────────── */
.sm-ap-section[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 65%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sm-ap-section-label[b-wqz79pa7q5] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sm-ap-presets-grid[b-wqz79pa7q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sm-ap-preset[b-wqz79pa7q5] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mud-palette-divider);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    background: var(--mud-palette-background-gray);
}

    .sm-ap-preset img[b-wqz79pa7q5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sm-ap-preset:hover[b-wqz79pa7q5] {
        border-color: var(--mud-palette-primary);
        transform: scale(1.1);
        box-shadow: 0 2px 10px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    }

.sm-ap-preset--active[b-wqz79pa7q5] {
    border-color: var(--mud-palette-primary);
    border-width: 3px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.sm-ap-preset-check[b-wqz79pa7q5] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.sm-ap-swatches[b-wqz79pa7q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sm-ap-color-swatch[b-wqz79pa7q5] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}

    .sm-ap-color-swatch:hover[b-wqz79pa7q5] {
        transform: scale(1.12);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    }

.sm-ap-color-swatch--active[b-wqz79pa7q5] {
    border-color: var(--mud-palette-text-primary);
    border-width: 3px;
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

/* ═══════════════════════════════════════════════════════════
   CAMERA DIALOG
   ═══════════════════════════════════════════════════════════ */
.sm-ap-cam-viewport[b-wqz79pa7q5] {
    position: relative;
    background: #080808;
    border-radius: 16px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-ap-cam-video[b-wqz79pa7q5] {
    display: none;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.sm-ap-cam-video--visible[b-wqz79pa7q5] {
    display: block;
}

.sm-ap-cam-canvas[b-wqz79pa7q5] {
    display: none;
}

.sm-ap-cam-loading[b-wqz79pa7q5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sm-ap-cam-loading-txt[b-wqz79pa7q5] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Camera face guide overlay */
.sm-ap-cam-overlay[b-wqz79pa7q5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.sm-ap-cam-circle[b-wqz79pa7q5] {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.30);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
}

.sm-ap-cam-corner[b-wqz79pa7q5] {
    position: absolute;
    width: 22px;
    height: 22px;
}

.sm-ap-cam-corner--tl[b-wqz79pa7q5] {
    top: -2px;
    left: -2px;
    border-top: 2.5px solid var(--mud-palette-primary);
    border-left: 2.5px solid var(--mud-palette-primary);
    border-radius: 3px 0 0 0;
}

.sm-ap-cam-corner--tr[b-wqz79pa7q5] {
    top: -2px;
    right: -2px;
    border-top: 2.5px solid var(--mud-palette-primary);
    border-right: 2.5px solid var(--mud-palette-primary);
    border-radius: 0 3px 0 0;
}

.sm-ap-cam-corner--bl[b-wqz79pa7q5] {
    bottom: -2px;
    left: -2px;
    border-bottom: 2.5px solid var(--mud-palette-primary);
    border-left: 2.5px solid var(--mud-palette-primary);
    border-radius: 0 0 0 3px;
}

.sm-ap-cam-corner--br[b-wqz79pa7q5] {
    bottom: -2px;
    right: -2px;
    border-bottom: 2.5px solid var(--mud-palette-primary);
    border-right: 2.5px solid var(--mud-palette-primary);
    border-radius: 0 0 3px 0;
}

.sm-ap-cam-hint[b-wqz79pa7q5] {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.44);
    padding: 5px 16px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   CROP DIALOG
   ═══════════════════════════════════════════════════════════ */
.sm-ap-crop-layout[b-wqz79pa7q5] {
    display: grid;
    grid-template-columns: 1fr 188px;
    gap: 16px;
    min-height: 340px;
}

.sm-ap-crop-canvas[b-wqz79pa7q5] {
    background: var(--mud-palette-background-gray);
    border-radius: 16px;
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.sm-ap-crop-img[b-wqz79pa7q5] {
    max-height: 360px;
    max-width: 100%;
}

.sm-ap-crop-panel[b-wqz79pa7q5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-ap-crop-group[b-wqz79pa7q5] {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 65%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    padding: 10px 12px;
}

.sm-ap-crop-label[b-wqz79pa7q5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.sm-ap-chip-row[b-wqz79pa7q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sm-ap-crop-chip[b-wqz79pa7q5] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    font-family: inherit;
}

    .sm-ap-crop-chip:hover[b-wqz79pa7q5] {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    }

.sm-ap-crop-chip--active[b-wqz79pa7q5] {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.sm-ap-tools[b-wqz79pa7q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sm-ap-tool-btn[b-wqz79pa7q5] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
    padding: 0;
}

    .sm-ap-tool-btn:hover[b-wqz79pa7q5] {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
        transform: translateY(-1px);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    }

.sm-ap-tool-btn--active[b-wqz79pa7q5] {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Flip-V button is always rotated 90° */
.sm-ap-tool-btn--flip-v[b-wqz79pa7q5] {
    transform: rotate(90deg);
}

    .sm-ap-tool-btn--flip-v:hover[b-wqz79pa7q5] {
        transform: rotate(90deg) translateY(-1px);
    }

.sm-ap-tool-btn--flip-v--active[b-wqz79pa7q5] {
    transform: rotate(90deg) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .sm-ap-dialog-layout[b-wqz79pa7q5] {
        grid-template-columns: 1fr;
    }

    .sm-ap-preview-col[b-wqz79pa7q5] {
        flex-direction: row;
        width: 100%;
        gap: 20px;
        align-items: flex-start;
    }

    .sm-ap-preview-frame[b-wqz79pa7q5] {
        flex-shrink: 0;
    }

    [b-wqz79pa7q5] .sm-ap-preview-avatar.mud-avatar {
        width: 88px;
        height: 88px;
        font-size: 1.8rem;
    }

    .sm-ap-preview-ring[b-wqz79pa7q5] {
        inset: -6px;
    }

    .sm-ap-crop-layout[b-wqz79pa7q5] {
        grid-template-columns: 1fr;
    }

    .sm-ap-crop-panel[b-wqz79pa7q5] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sm-ap-crop-group[b-wqz79pa7q5] {
        flex: 1;
        min-width: 130px;
    }

    .sm-ap-cam-circle[b-wqz79pa7q5] {
        width: 150px;
        height: 150px;
    }
}
/* /Components/SoftMaxTabs.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   SoftMaxTabs — Custom Tab System  ·  MD3 Expressive
   Variants : pills · filled
   Positions : top · bottom · start · end
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Color Roles ──────────────────────────────────────────────────── */

.smtabs--primary[b-e0sy2ln2i7]   { --smt-accent: var(--mud-palette-primary);   --smt-accent-text: var(--mud-palette-primary-text); }
.smtabs--secondary[b-e0sy2ln2i7] { --smt-accent: var(--mud-palette-secondary); --smt-accent-text: var(--mud-palette-secondary-text); }
.smtabs--success[b-e0sy2ln2i7]   { --smt-accent: var(--mud-palette-success);   --smt-accent-text: var(--mud-palette-success-text); }
.smtabs--warning[b-e0sy2ln2i7]   { --smt-accent: var(--mud-palette-warning);   --smt-accent-text: var(--mud-palette-warning-text); }
.smtabs--error[b-e0sy2ln2i7]     { --smt-accent: var(--mud-palette-error);     --smt-accent-text: var(--mud-palette-error-text); }
.smtabs--info[b-e0sy2ln2i7]      { --smt-accent: var(--mud-palette-info);      --smt-accent-text: var(--mud-palette-info-text); }
.smtabs--dark[b-e0sy2ln2i7]      { --smt-accent: var(--mud-palette-dark);      --smt-accent-text: var(--mud-palette-dark-text); }

/* ── 2. Root Layout ──────────────────────────────────────────────────── */

.smtabs[b-e0sy2ln2i7] {
    /* MD3 tonal surface layers */
    --smt-tonal-container: color-mix(in srgb, var(--smt-accent) 14%, var(--mud-palette-surface));
    --smt-tonal-text:      var(--smt-accent);

    /* MD3 Expressive state layers */
    --smt-state-hover:     color-mix(in srgb, var(--smt-accent)  8%, transparent);
    --smt-state-focus:     color-mix(in srgb, var(--smt-accent) 12%, transparent);
    --smt-state-pressed:   color-mix(in srgb, var(--smt-accent) 12%, transparent);
    --smt-state-hover-on:  color-mix(in srgb, var(--smt-accent-text) 8%, transparent);

    /* Glow / elevation tints */
    --smt-glow:            color-mix(in srgb, var(--smt-accent) 36%, transparent);
    --smt-glow-deep:       color-mix(in srgb, var(--smt-accent) 24%, transparent);

    /* Shape */
    --smt-radius:          9999px;
    --smt-tab-px:          20px;
    --smt-tab-py:          9px;
    --smt-font-size:       0.875rem;
    --smt-gap:             3px;

    /* MD3 motion tokens */
    --smt-ease-std:        cubic-bezier(0.2, 0, 0, 1);          /* standard */
    --smt-ease-decel:      cubic-bezier(0.05, 0.7, 0.1, 1);     /* emphasized decelerate */
    --smt-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);   /* expressive spring */
    --smt-dur-short:       180ms;
    --smt-dur-medium:      280ms;

    display: flex;
    flex-direction: column;
    width: 100%;
}

.smtabs--dense[b-e0sy2ln2i7] {
    --smt-tab-px:    14px;
    --smt-tab-py:    5px;
    --smt-font-size: 0.8125rem;
    --smt-gap:       2px;
}

/* ── 3. Position Variants ────────────────────────────────────────────── */

.smtabs--bottom[b-e0sy2ln2i7] { flex-direction: column-reverse; }
.smtabs--start[b-e0sy2ln2i7]  { flex-direction: row;            }
.smtabs--end[b-e0sy2ln2i7]    { flex-direction: row-reverse;    }

/* ── 4. Header / Strip ───────────────────────────────────────────────── */

.smtabs__header[b-e0sy2ln2i7] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--smt-gap);
    flex-shrink: 0;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.smtabs__header[b-e0sy2ln2i7]::-webkit-scrollbar { display: none; }

.smtabs--start .smtabs__header[b-e0sy2ln2i7],
.smtabs--end   .smtabs__header[b-e0sy2ln2i7] {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    overflow-y: auto;
    gap: 2px;
    min-width: 160px;
}

.smtabs--full-width .smtabs__header[b-e0sy2ln2i7] { width: 100%; }

/* ── 5. Base Tab Button ──────────────────────────────────────────────── */

.smtabs__tab[b-e0sy2ln2i7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--smt-tab-py) var(--smt-tab-px);
    border: none;
    border-radius: var(--smt-radius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: var(--smt-font-size);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    /* MD3 standard easing for color/bg; spring for transform */
    transition:
        background-color var(--smt-dur-short)  var(--smt-ease-std),
        color            var(--smt-dur-short)  var(--smt-ease-std),
        box-shadow       var(--smt-dur-medium) var(--smt-ease-std),
        transform        var(--smt-dur-medium) var(--smt-ease-spring);
}

/* MD3 state layer — pseudo-element overlay */
.smtabs__tab[b-e0sy2ln2i7]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    transition: background-color var(--smt-dur-short) var(--smt-ease-std);
    pointer-events: none;
}

.smtabs__tab:not(:disabled):hover[b-e0sy2ln2i7] {
    color: var(--mud-palette-text-primary);
}
.smtabs__tab:not(:disabled):hover[b-e0sy2ln2i7]::before {
    background: var(--smt-state-hover);
}

.smtabs__tab:not(:disabled):active[b-e0sy2ln2i7] {
    transform: scale(0.95);
}
.smtabs__tab:not(:disabled):active[b-e0sy2ln2i7]::before {
    background: var(--smt-state-pressed);
}

.smtabs__tab:focus-visible[b-e0sy2ln2i7] {
    outline: 2px solid color-mix(in srgb, var(--smt-accent) 50%, transparent);
    outline-offset: 3px;
    border-radius: var(--smt-radius);
}

.smtabs__tab:disabled[b-e0sy2ln2i7] {
    opacity: 0.36;
    cursor: not-allowed;
    pointer-events: none;
}

.smtabs--full-width .smtabs__tab[b-e0sy2ln2i7] {
    flex: 1;
    justify-content: center;
}

.smtabs--start .smtabs__tab[b-e0sy2ln2i7],
.smtabs--end   .smtabs__tab[b-e0sy2ln2i7] {
    justify-content: flex-start;
    width: 100%;
}

/* ── 6. Tab Inner Elements ───────────────────────────────────────────── */

.smtabs__tab-icon[b-e0sy2ln2i7] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition:
        opacity   var(--smt-dur-short)  var(--smt-ease-std),
        transform var(--smt-dur-medium) var(--smt-ease-spring);
}

/* MD3 Expressive: icon springs to a larger size on active */
.smtabs__tab--active .smtabs__tab-icon[b-e0sy2ln2i7] {
    opacity: 1;
    transform: scale(1.14) translateY(-1px);
}

.smtabs__tab:not(.smtabs__tab--active):hover .smtabs__tab-icon[b-e0sy2ln2i7] {
    opacity: 0.85;
    transform: scale(1.05);
}

.smtabs__tab-label[b-e0sy2ln2i7] { flex: 1; }

/* ── 7. Badge ────────────────────────────────────────────────────────── */

.smtabs__badge[b-e0sy2ln2i7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 0;
    /* Spring pop on first render */
    animation: smt-badge-pop-b-e0sy2ln2i7 0.36s var(--smt-ease-spring) both;
}

@keyframes smt-badge-pop-b-e0sy2ln2i7 {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.smtabs__badge--error[b-e0sy2ln2i7]     { background: var(--mud-palette-error);     color: var(--mud-palette-error-text); }
.smtabs__badge--success[b-e0sy2ln2i7]   { background: var(--mud-palette-success);   color: var(--mud-palette-success-text); }
.smtabs__badge--warning[b-e0sy2ln2i7]   { background: var(--mud-palette-warning);   color: var(--mud-palette-warning-text); }
.smtabs__badge--info[b-e0sy2ln2i7]      { background: var(--mud-palette-info);      color: var(--mud-palette-info-text); }
.smtabs__badge--primary[b-e0sy2ln2i7]   { background: var(--mud-palette-primary);   color: var(--mud-palette-primary-text); }
.smtabs__badge--secondary[b-e0sy2ln2i7] { background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }
.smtabs__badge--default[b-e0sy2ln2i7]   {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    color: var(--mud-palette-text-primary);
}


/* ════════════════════════════════════════════════════════════════════════
   VARIANT: PILLS  — frosted tonal track · expressive active pill
   ════════════════════════════════════════════════════════════════════════ */

/* Tonal frosted track */
.smtabs--pills .smtabs__header[b-e0sy2ln2i7] {
    background: color-mix(in srgb, var(--smt-accent) 6%, var(--mud-palette-background-gray));
    border: 1px solid color-mix(in srgb, var(--smt-accent) 16%, var(--mud-palette-divider));
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid color-mix(in srgb, var(--smt-accent) 16%, var(--mud-palette-divider));
    padding: 5px 5px 5px;
    gap: 2px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[dark-mode="true"] .smtabs--pills .smtabs__header[b-e0sy2ln2i7] {
    background: color-mix(in srgb, var(--smt-accent) 8%, var(--mud-palette-background-gray));
    border-color: color-mix(in srgb, var(--smt-accent) 20%, transparent);
}

.smtabs--pills .smtabs__tab[b-e0sy2ln2i7] {
    border-radius: 9999px;
}

/* Idle hover — tonal surface state layer */
.smtabs--pills .smtabs__tab:not(:disabled):not(.smtabs__tab--active):hover[b-e0sy2ln2i7] {
    background: var(--smt-state-hover);
    color: var(--mud-palette-text-primary);
}
.smtabs--pills .smtabs__tab:not(:disabled):not(.smtabs__tab--active):hover[b-e0sy2ln2i7]::before {
    background: transparent; /* handled by explicit background above */
}

/* Active pill — MD3 Expressive: full accent fill with tonal depth */
.smtabs--pills .smtabs__tab--active[b-e0sy2ln2i7] {
    background: var(--smt-accent);
    color: var(--smt-accent-text);
    font-weight: 600;
    letter-spacing: 0.018em;
    box-shadow:
        0 1px 0   color-mix(in srgb, white 28%, transparent) inset,
        0 2px 6px  var(--smt-glow-deep),
        0 0  12px  color-mix(in srgb, var(--smt-accent) 18%, transparent);
}

/* Active state layer — white overlay for hover/pressed */
.smtabs--pills .smtabs__tab--active[b-e0sy2ln2i7]::before {
    background: transparent;
}
.smtabs--pills .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7]::before {
    background: var(--smt-state-hover-on);
}
.smtabs--pills .smtabs__tab--active:not(:disabled):active[b-e0sy2ln2i7]::before {
    background: var(--smt-state-pressed);
}

.smtabs--pills .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7] {
    transform: translateY(-1.5px) scale(1.02);
    box-shadow:
        0 1px 0   color-mix(in srgb, white 30%, transparent) inset,
        0 4px 10px var(--smt-glow-deep),
        0 0  16px  color-mix(in srgb, var(--smt-accent) 20%, transparent);
}

/* Side positions */
.smtabs--pills.smtabs--start .smtabs__header[b-e0sy2ln2i7],
.smtabs--pills.smtabs--end   .smtabs__header[b-e0sy2ln2i7] {
    border-radius: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--smt-accent) 16%, var(--mud-palette-divider));
    padding: 5px;
}

.smtabs--pills.smtabs--start .smtabs__tab[b-e0sy2ln2i7],
.smtabs--pills.smtabs--end   .smtabs__tab[b-e0sy2ln2i7] {
    border-radius: 12px;
}

/* Side active pill: no vertical lift */
.smtabs--pills.smtabs--start .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7],
.smtabs--pills.smtabs--end   .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7] {
    transform: translateX(2px) scale(1.01);
}


/* ════════════════════════════════════════════════════════════════════════
   VARIANT: FILLED — tonal container active tab + indicator strip
   ════════════════════════════════════════════════════════════════════════ */

.smtabs--filled[b-e0sy2ln2i7] { --smt-radius: 8px; }

.smtabs--filled .smtabs__header[b-e0sy2ln2i7] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    gap: 2px;
    padding: 4px 4px 0;
    /* Tonal surface tinted by accent */
    background: color-mix(in srgb, var(--smt-accent) 5%, var(--mud-palette-background-gray));
}

.smtabs--filled .smtabs__tab[b-e0sy2ln2i7] {
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    /* MD3 indicator strip (bottom line for active) */
    position: relative;
}

/* Indicator strip pseudo-element */
.smtabs--filled .smtabs__tab[b-e0sy2ln2i7]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--smt-accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
        opacity   var(--smt-dur-short)  var(--smt-ease-std),
        transform var(--smt-dur-medium) var(--smt-ease-decel);
}

.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7]::after {
    opacity: 1;
    transform: scaleX(1);
}

.smtabs--filled .smtabs__tab:not(:disabled):hover[b-e0sy2ln2i7] {
    background: color-mix(in srgb, var(--smt-accent) 8%, var(--mud-palette-surface));
    border-color: var(--mud-palette-divider);
}
.smtabs--filled .smtabs__tab:not(:disabled):hover[b-e0sy2ln2i7]::before {
    background: transparent;
}

/* Active: MD3 tonal container — accent-tinted surface */
.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7] {
    background: color-mix(in srgb, var(--smt-accent) 12%, var(--mud-palette-surface));
    border-color: var(--mud-palette-divider);
    border-bottom-color: color-mix(in srgb, var(--smt-accent) 12%, var(--mud-palette-surface));
    color: var(--smt-accent);
    font-weight: 600;
    letter-spacing: 0.012em;
}

.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7]::before { background: transparent; }

.smtabs--filled .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7] {
    background: color-mix(in srgb, var(--smt-accent) 16%, var(--mud-palette-surface));
    border-bottom-color: color-mix(in srgb, var(--smt-accent) 16%, var(--mud-palette-surface));
}
.smtabs--filled .smtabs__tab--active:not(:disabled):hover[b-e0sy2ln2i7]::before {
    background: transparent;
}

/* Side position: indicator on inline-end edge */
.smtabs--start.smtabs--filled .smtabs__header[b-e0sy2ln2i7],
.smtabs--end.smtabs--filled   .smtabs__header[b-e0sy2ln2i7] {
    border-bottom: none;
    border-inline-end: 1px solid var(--mud-palette-divider);
    border-radius: 12px 0 0 12px;
}

.smtabs--start.smtabs--filled .smtabs__tab[b-e0sy2ln2i7],
.smtabs--end.smtabs--filled   .smtabs__tab[b-e0sy2ln2i7] {
    border-radius: 8px 0 0 8px;
    border-bottom: 1px solid transparent;
    border-inline-end: none;
}

/* Side indicator strip: on the inline-end edge */
.smtabs--start.smtabs--filled .smtabs__tab[b-e0sy2ln2i7]::after,
.smtabs--end.smtabs--filled   .smtabs__tab[b-e0sy2ln2i7]::after {
    inset: 20% 0 20% auto;
    width: 3px;
    height: auto;
    border-radius: 3px 0 0 3px;
    transform: scaleY(0);
    transform-origin: center;
    transition:
        opacity   var(--smt-dur-short)  var(--smt-ease-std),
        transform var(--smt-dur-medium) var(--smt-ease-decel);
}

.smtabs--start.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7]::after,
.smtabs--end.smtabs--filled   .smtabs__tab--active[b-e0sy2ln2i7]::after {
    opacity: 1;
    transform: scaleY(1);
}

.smtabs--start.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7],
.smtabs--end.smtabs--filled   .smtabs__tab--active[b-e0sy2ln2i7] {
    border-inline-end: 1px solid color-mix(in srgb, var(--smt-accent) 12%, var(--mud-palette-surface));
    margin-bottom: 0;
    margin-inline-end: -1px;
}


/* ════════════════════════════════════════════════════════════════════════
   PANELS  (content area)
   ════════════════════════════════════════════════════════════════════════ */

.smtabs__body[b-e0sy2ln2i7] {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.smtabs--top    .smtabs__body[b-e0sy2ln2i7],
.smtabs--bottom .smtabs__body[b-e0sy2ln2i7] { padding-block-start: 18px; }
.smtabs--start  .smtabs__body[b-e0sy2ln2i7] { padding-inline-start: 24px; }
.smtabs--end    .smtabs__body[b-e0sy2ln2i7] { padding-inline-end:   24px; }

.smtabs__body--bg[b-e0sy2ln2i7] {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 20px 24px;
    margin-block-start: 0;
}

.smtabs--top.smtabs--pills  .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--top.smtabs--pills  .smtabs__body--outline[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--outline[b-e0sy2ln2i7] {
    border-radius: 0 0 16px 16px;
}

.smtabs--top    .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--bottom .smtabs__body--bg[b-e0sy2ln2i7] { padding-block-start: 20px; }
.smtabs--start  .smtabs__body--bg[b-e0sy2ln2i7] { padding-inline-start: 20px; }
.smtabs--end    .smtabs__body--bg[b-e0sy2ln2i7] { padding-inline-end:   20px; }

.smtabs__body--outline[b-e0sy2ln2i7] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    padding: 20px 24px;
}

.smtabs--top.smtabs--pills  .smtabs__body--outline[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--outline[b-e0sy2ln2i7] {
    border-top: none;
}

.smtabs__body--bg.smtabs__body--outline[b-e0sy2ln2i7] {
    border: 1px solid var(--mud-palette-divider);
    box-shadow:
        0 1px 2px  rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.05);
}

[dark-mode="true"] .smtabs__body--bg.smtabs__body--outline[b-e0sy2ln2i7] {
    box-shadow:
        0 1px 2px  rgba(0, 0, 0, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.22);
}

.smtabs__panel[b-e0sy2ln2i7]          { display: none;  }
.smtabs__panel--active[b-e0sy2ln2i7]  { display: block; }


.smtabs--start.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7]::after,
.smtabs--end.smtabs--filled   .smtabs__tab--active[b-e0sy2ln2i7]::after {
    opacity: 1;
    transform: scaleY(1);
}

.smtabs--start.smtabs--filled .smtabs__tab--active[b-e0sy2ln2i7],
.smtabs--end.smtabs--filled   .smtabs__tab--active[b-e0sy2ln2i7] {
    border-inline-end: 1px solid color-mix(in srgb, var(--smt-accent) 12%, var(--mud-palette-surface));
    margin-bottom: 0;
    margin-inline-end: -1px;
}


/* ════════════════════════════════════════════════════════════════════════
   PANELS  (content area)
   ════════════════════════════════════════════════════════════════════════ */

.smtabs__body[b-e0sy2ln2i7] {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.smtabs--top    .smtabs__body[b-e0sy2ln2i7],
.smtabs--bottom .smtabs__body[b-e0sy2ln2i7] { padding-block-start: 18px; }
.smtabs--start  .smtabs__body[b-e0sy2ln2i7] { padding-inline-start: 24px; }
.smtabs--end    .smtabs__body[b-e0sy2ln2i7] { padding-inline-end:   24px; }

.smtabs__body--bg[b-e0sy2ln2i7] {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 20px 24px;
    margin-block-start: 0;
}

.smtabs--top.smtabs--pills  .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--top.smtabs--pills  .smtabs__body--outline[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--outline[b-e0sy2ln2i7] {
    border-radius: 0 0 16px 16px;
}

.smtabs--top    .smtabs__body--bg[b-e0sy2ln2i7],
.smtabs--bottom .smtabs__body--bg[b-e0sy2ln2i7] { padding-block-start: 20px; }
.smtabs--start  .smtabs__body--bg[b-e0sy2ln2i7] { padding-inline-start: 20px; }
.smtabs--end    .smtabs__body--bg[b-e0sy2ln2i7] { padding-inline-end:   20px; }

.smtabs__body--outline[b-e0sy2ln2i7] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    padding: 20px 24px;
}

.smtabs--top.smtabs--pills  .smtabs__body--outline[b-e0sy2ln2i7],
.smtabs--top.smtabs--filled .smtabs__body--outline[b-e0sy2ln2i7] {
    border-top: none;
}

.smtabs__body--bg.smtabs__body--outline[b-e0sy2ln2i7] {
    border: 1px solid var(--mud-palette-divider);
    box-shadow:
        0 1px 2px  rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.05);
}

[dark-mode="true"] .smtabs__body--bg.smtabs__body--outline[b-e0sy2ln2i7] {
    box-shadow:
        0 1px 2px  rgba(0, 0, 0, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.22);
}

.smtabs__panel[b-e0sy2ln2i7]          { display: none;  }
.smtabs__panel--active[b-e0sy2ln2i7]  { display: block; }
/* /Components/TermsAcceptanceView.razor.rz.scp.css */
/* Glassmorphism backdrop wrapper covering the whole page */
.terms-overlay-root[b-tfk91ks3dh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 15, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px;
}

/* Glass card container */
.terms-overlay-glass[b-tfk91ks3dh] {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    max-height: 600px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

[dark-mode="true"] .terms-overlay-glass[b-tfk91ks3dh] {
    background: rgba(28, 28, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Split layout */
.terms-container-split[b-tfk91ks3dh] {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left banner style */
.terms-left-banner[b-tfk91ks3dh] {
    width: 38%;
    background: #1e1e24;
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

/* Mesh gradient background on left banner */
.banner-gradient-mesh[b-tfk91ks3dh] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 10% 20%, rgba(107, 155, 210, 0.25) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(155, 142, 196, 0.25) 0%, transparent 40%),
                linear-gradient(135deg, #1f2533 0%, #11141c 100%);
    z-index: 1;
}

.banner-content[b-tfk91ks3dh] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-tfk91ks3dh] .banner-icon {
    color: #6b9bd2 !important;
}

.banner-title[b-tfk91ks3dh] {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

.banner-subtitle[b-tfk91ks3dh] {
    opacity: 0.8;
    line-height: 1.5 !important;
    font-weight: 300 !important;
}

.terms-stepper-pill[b-tfk91ks3dh] {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Right content panel style */
.terms-right-content[b-tfk91ks3dh] {
    width: 62%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.document-section[b-tfk91ks3dh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.document-title[b-tfk91ks3dh] {
    font-weight: 600 !important;
    color: #2c2c2c;
}

[dark-mode="true"] .document-title[b-tfk91ks3dh] {
    color: #e8e6e1;
}

/* Scroll area for HTML document */
.document-scroll-container[b-tfk91ks3dh] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

[dark-mode="true"] .document-scroll-container[b-tfk91ks3dh] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.document-html-content[b-tfk91ks3dh] {
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a4a;
}

[dark-mode="true"] .document-html-content[b-tfk91ks3dh] {
    color: #c5c2ba;
}

/* Customize scrollbars */
.document-scroll-container[b-tfk91ks3dh]::-webkit-scrollbar {
    width: 6px;
}

.document-scroll-container[b-tfk91ks3dh]::-webkit-scrollbar-track {
    background: transparent;
}

.document-scroll-container[b-tfk91ks3dh]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

[dark-mode="true"] .document-scroll-container[b-tfk91ks3dh]::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Action block style */
.action-section[b-tfk91ks3dh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.terms-checkbox[b-tfk91ks3dh] {
    margin-left: -8px;
}

[b-tfk91ks3dh] .terms-checkbox .mud-button-label {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.terms-actions-row[b-tfk91ks3dh] {
    display: flex;
    justify-content: flex-end;
}

.accept-button[b-tfk91ks3dh] {
    min-width: 160px;
    border-radius: 10px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .terms-overlay-root[b-tfk91ks3dh] {
        padding: 12px;
    }
    
    .terms-overlay-glass[b-tfk91ks3dh] {
        max-height: 100%;
        height: 100%;
        border-radius: 12px;
    }
    
    .terms-container-split[b-tfk91ks3dh] {
        flex-direction: column;
    }
    
    .terms-left-banner[b-tfk91ks3dh] {
        width: 100%;
        height: 25%;
        padding: 24px;
    }
    
    .terms-right-content[b-tfk91ks3dh] {
        width: 100%;
        height: 75%;
        padding: 24px;
    }
}
/* /Components/TwoFactorEnforcementView.razor.rz.scp.css */
/* ── Tokens ──────────────────────────────────────────────────────────────────
   Defined on the component wrapper, never on :root — Blazor's CSS isolation
   rewrites :root to :root[b-xxxx], which can never match <html>.
   The dark variants below work because MudThemeProvider sets dark-mode="true"
   on <html>, and the wrapper is a descendant of it.                           */
.twofa-gate-root[b-mpi6i0o61z] {
    --twofa-surface: var(--mud-palette-surface);
    --twofa-surface-alt: var(--mud-palette-background-grey);
    --twofa-text: var(--mud-palette-text-primary);
    --twofa-text-soft: var(--mud-palette-text-secondary);
    --twofa-border: var(--mud-palette-divider);
    /* Solid near-black call-to-action (near-white in dark mode) */
    --twofa-ink: #16181c;
    --twofa-ink-hover: #303439;
    --twofa-ink-contrast: #fbfbfa;
    /* The single washed-out pastel accent: step indicator, focus rings, success */
    --twofa-accent-fg: #4a7fa1;
    --twofa-accent-bg: #e6eff5;
    --twofa-accent-ring: rgba(74, 127, 161, 0.20);
    /* QR needs a light backing in both themes so scanners keep working */
    --twofa-qr-backing: #ffffff;
    --twofa-serif: 'Newsreader', 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --twofa-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    --twofa-ease: cubic-bezier(0.16, 1, 0.3, 1);

    inline-size: 100%;
    padding-block: clamp(20px, 3.5vh, 40px);
    padding-inline: 20px;
    color: var(--twofa-text);
    text-align: start;
}

[dark-mode="true"] .twofa-gate-root[b-mpi6i0o61z] {
    --twofa-ink: #f2f0ec;
    --twofa-ink-hover: #ffffff;
    --twofa-ink-contrast: #16181c;
    --twofa-accent-fg: #9dc2d8;
    --twofa-accent-bg: rgba(157, 194, 216, 0.12);
    --twofa-accent-ring: rgba(157, 194, 216, 0.26);
}

.twofa-shell[b-mpi6i0o61z] {
    max-inline-size: 580px;
    margin-inline: auto;
}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.twofa-masthead[b-mpi6i0o61z] {
    padding-block-end: 24px;
}

.twofa-eyebrow[b-mpi6i0o61z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--twofa-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--twofa-text-soft);
}

.twofa-headline[b-mpi6i0o61z] {
    margin: 12px 0 0;
    font-family: var(--twofa-serif);
    font-size: clamp(26px, 4.2vw, 34px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--twofa-text);
}

.twofa-lede[b-mpi6i0o61z] {
    margin: 10px 0 0;
    max-inline-size: 56ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--twofa-text-soft);
}

/* ── Step rows ───────────────────────────────────────────────────────────── */
.twofa-step[b-mpi6i0o61z] {
    border-block-start: 1px solid var(--twofa-border);
    padding-block: 20px;
}

.twofa-step-head[b-mpi6i0o61z] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: opacity 300ms ease;
}

/* Dimming lives on the head, not the section: the section's entry animation uses
   fill-mode both, so an opacity rule there would be permanently overridden. */
.twofa-step.is-upcoming .twofa-step-head[b-mpi6i0o61z] {
    opacity: 0.42;
}

.twofa-step-index[b-mpi6i0o61z] {
    flex: 0 0 auto;
    inline-size: 1.85rem;
    padding-block-start: 1px;
    font-family: var(--twofa-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--twofa-text-soft);
    transition: color 200ms ease;
}

.twofa-step.is-active .twofa-step-index[b-mpi6i0o61z] {
    color: var(--twofa-accent-fg);
}

.twofa-step-heading[b-mpi6i0o61z] {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.twofa-step-title[b-mpi6i0o61z] {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--twofa-text);
}

.twofa-step-note[b-mpi6i0o61z] {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--twofa-text-soft);
}

.twofa-step-done[b-mpi6i0o61z] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 6px;
    background: var(--twofa-accent-bg);
    color: var(--twofa-accent-fg);
}

.twofa-step-body[b-mpi6i0o61z] {
    margin-block-start: 18px;
    margin-inline-start: calc(1.85rem + 14px);
}

/* ── Authenticator connection ────────────────────────────────────────────── */
.twofa-qr-frame[b-mpi6i0o61z] {
    display: inline-block;
    padding: 10px;
    border: 1px solid var(--twofa-border);
    border-radius: 8px;
    background: var(--twofa-qr-backing);
}

.twofa-qr[b-mpi6i0o61z] {
    line-height: 0;
}

/* The QR canvas/img is injected by app.qrcode.js, so it carries no isolation
   attribute — ::deep is required to reach it. */
.twofa-qr[b-mpi6i0o61z]  canvas,
.twofa-qr[b-mpi6i0o61z]  img {
    max-inline-size: 100%;
}

.twofa-key[b-mpi6i0o61z] {
    margin-block-start: 18px;
}

.twofa-key-label[b-mpi6i0o61z] {
    display: block;
    font-family: var(--twofa-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--twofa-text-soft);
}

.twofa-key-chunks[b-mpi6i0o61z] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-block-start: 8px;
    direction: ltr;
}

.twofa-key-chunk[b-mpi6i0o61z] {
    padding: 4px 8px;
    border: 1px solid var(--twofa-border);
    border-radius: 4px;
    background: var(--twofa-surface-alt);
    font-family: var(--twofa-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--twofa-text);
}

/* ── Six-box verification code ───────────────────────────────────────────── */
.twofa-code[b-mpi6i0o61z] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: ltr;
}

.twofa-code-box[b-mpi6i0o61z] {
    inline-size: 44px;
    block-size: 50px;
    padding: 0;
    border: 1px solid var(--twofa-border);
    border-radius: 6px;
    background: transparent;
    color: var(--twofa-text);
    font-family: var(--twofa-mono);
    font-size: 18px;
    text-align: center;
    caret-color: var(--twofa-accent-fg);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    -moz-appearance: textfield;
}

.twofa-code-box[b-mpi6i0o61z]::-webkit-outer-spin-button,
.twofa-code-box[b-mpi6i0o61z]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.twofa-code-box:hover:not(:disabled)[b-mpi6i0o61z] {
    border-color: var(--twofa-text-soft);
}

.twofa-code-box:focus[b-mpi6i0o61z] {
    border-color: var(--twofa-accent-fg);
    box-shadow: 0 0 0 3px var(--twofa-accent-ring);
}

.twofa-code-box.is-filled[b-mpi6i0o61z] {
    border-color: var(--twofa-text);
}

.twofa-code.is-busy[b-mpi6i0o61z] {
    opacity: 0.5;
    pointer-events: none;
}

.twofa-inline-error[b-mpi6i0o61z] {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mud-palette-error);
}

.twofa-working[b-mpi6i0o61z] {
    font-family: var(--twofa-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--twofa-text-soft);
}

/* ── Recovery codes ──────────────────────────────────────────────────────── */
.twofa-recovery[b-mpi6i0o61z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--twofa-border);
    border-radius: 8px;
    background: var(--twofa-border);
    overflow: hidden;
    direction: ltr;
}

.twofa-recovery-code[b-mpi6i0o61z] {
    padding: 9px 14px;
    background: var(--twofa-surface);
    font-family: var(--twofa-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--twofa-text);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.twofa-actions[b-mpi6i0o61z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: 20px;
}

.twofa-btn[b-mpi6i0o61z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.twofa-btn:focus-visible[b-mpi6i0o61z] {
    outline: 3px solid var(--twofa-accent-ring);
    outline-offset: 2px;
}

.twofa-btn:active:not(:disabled)[b-mpi6i0o61z] {
    transform: scale(0.98);
}

.twofa-btn:disabled[b-mpi6i0o61z] {
    opacity: 0.45;
    cursor: default;
}

.twofa-btn--primary[b-mpi6i0o61z] {
    background: var(--twofa-ink);
    color: var(--twofa-ink-contrast);
}

.twofa-btn--primary:hover:not(:disabled)[b-mpi6i0o61z] {
    background: var(--twofa-ink-hover);
}

.twofa-btn--ghost[b-mpi6i0o61z] {
    background: transparent;
    border-color: var(--twofa-border);
    color: var(--twofa-text-soft);
}

.twofa-btn--ghost:hover:not(:disabled)[b-mpi6i0o61z] {
    border-color: var(--twofa-text-soft);
    color: var(--twofa-text);
}

/* ── Fallback + footnote ─────────────────────────────────────────────────── */
.twofa-fallback .twofa-btn[b-mpi6i0o61z] {
    margin-block-start: 20px;
}

.twofa-footnote[b-mpi6i0o61z] {
    margin: 28px 0 0;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--twofa-border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--twofa-text-soft);
}

/* ── Icons ───────────────────────────────────────────────────────────────── */
.twofa-icon[b-mpi6i0o61z] {
    inline-size: 15px;
    block-size: 15px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes twofa-enter-b-mpi6i0o61z {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.twofa-masthead[b-mpi6i0o61z],
.twofa-step[b-mpi6i0o61z],
.twofa-fallback[b-mpi6i0o61z] {
    animation: twofa-enter-b-mpi6i0o61z 600ms var(--twofa-ease) both;
}

.twofa-step:nth-of-type(1)[b-mpi6i0o61z] {
    animation-delay: 80ms;
}

.twofa-step:nth-of-type(2)[b-mpi6i0o61z] {
    animation-delay: 160ms;
}

.twofa-step:nth-of-type(3)[b-mpi6i0o61z] {
    animation-delay: 240ms;
}

.twofa-step-body[b-mpi6i0o61z] {
    animation: twofa-enter-b-mpi6i0o61z 600ms var(--twofa-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .twofa-masthead[b-mpi6i0o61z],
    .twofa-step[b-mpi6i0o61z],
    .twofa-step-body[b-mpi6i0o61z],
    .twofa-fallback[b-mpi6i0o61z] {
        animation: none;
    }

    .twofa-btn:active:not(:disabled)[b-mpi6i0o61z] {
        transform: none;
    }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .twofa-step-body[b-mpi6i0o61z] {
        margin-inline-start: 0;
    }

    .twofa-code-box[b-mpi6i0o61z] {
        inline-size: 38px;
        block-size: 46px;
        font-size: 17px;
    }

    .twofa-code[b-mpi6i0o61z] {
        gap: 6px;
    }

    .twofa-recovery[b-mpi6i0o61z] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Layout/UserProfileDialog.razor.rz.scp.css */
/* ============================================================
   UserProfileDialog – CSS Isolation
   Design: Premium split layout with vertical sidebar nav,
   double-bezel containers, soft shadows, and clean state shifts.
   ============================================================ */

.upd-root[b-fh4g93xdhr] {
    /* --- Light Theme Variables --- */
    --upd-bg: #fafafa;
    --upd-surface: #ffffff;
    --upd-surface-alt: #f4f3f0;
    --upd-surface-2: #eeeeeb;
    --upd-text: #1a1917;
    --upd-text-soft: #706b64;
    --upd-text-muted: #a09a93;
    --upd-accent: #5955f4;
    --upd-accent-soft: rgba(89, 85, 244, 0.06);
    --upd-accent-hover: rgba(89, 85, 244, 0.10);
    --upd-border: rgba(0, 0, 0, 0.05);
    --upd-border-inner: rgba(0, 0, 0, 0.04);
    --upd-shadow-outer: 0 4px 20px rgba(0, 0, 0, 0.03);
    --upd-shadow-inner: 0 2px 8px rgba(0, 0, 0, 0.02);
    --upd-radius-outer: 24px;
    --upd-radius-inner: 16px;
    --upd-radius-sm: 8px;
    --upd-success: #16a34a;
    --upd-success-soft: rgba(22, 163, 74, 0.08);
    --upd-warn: #d97706;
    --upd-warn-soft: rgba(217, 119, 6, 0.08);
    --upd-error: #dc2626;
    --upd-error-soft: rgba(220, 38, 38, 0.06);
    color: var(--upd-text);
    background: var(--upd-bg);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    width: 100%;
}

/* --- Dark Theme Variables --- */
[dark-mode="true"] .upd-root[b-fh4g93xdhr] {
    --upd-bg: #0d0c0a;
    --upd-surface: #171512;
    --upd-surface-alt: #1f1d19;
    --upd-surface-2: #282520;
    --upd-text: #f3f0eb;
    --upd-text-soft: #a0978d;
    --upd-text-muted: #6f675e;
    --upd-accent: #7e7af9;
    --upd-accent-soft: rgba(126, 122, 249, 0.08);
    --upd-accent-hover: rgba(126, 122, 249, 0.14);
    --upd-border: rgba(255, 255, 255, 0.05);
    --upd-border-inner: rgba(255, 255, 255, 0.04);
    --upd-shadow-outer: 0 4px 30px rgba(0, 0, 0, 0.35);
    --upd-shadow-inner: 0 2px 10px rgba(0, 0, 0, 0.20);
    --upd-success: #22c55e;
    --upd-success-soft: rgba(34, 197, 94, 0.10);
    --upd-warn: #fbbf24;
    --upd-warn-soft: rgba(251, 191, 36, 0.10);
    --upd-error: #ef4444;
    --upd-error-soft: rgba(239, 68, 68, 0.09);
}

/* --- Loading --- */
.upd-loading[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--upd-bg);
}

/* --- Main Split Container --- */
.upd-container[b-fh4g93xdhr] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    width: 100%;
}

/* --- Sidebar Style --- */
.upd-sidebar[b-fh4g93xdhr] {
    width: 280px;
    background: var(--upd-surface-alt);
    border-right: 1px solid var(--upd-border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
}

/* --- Profile Header in Sidebar --- */
.upd-profile-header[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.upd-avatar-ring[b-fh4g93xdhr] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: var(--upd-surface-2);
    border: 3px solid var(--upd-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--upd-accent);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.upd-avatar-ring:hover[b-fh4g93xdhr] {
    transform: scale(1.03);
}

.upd-avatar-img[b-fh4g93xdhr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upd-avatar-ctrl[b-fh4g93xdhr] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.upd-avatar-ring:hover .upd-avatar-ctrl[b-fh4g93xdhr] {
    opacity: 1;
}

.upd-ctl-btn[b-fh4g93xdhr] {
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.upd-ctl-btn:hover[b-fh4g93xdhr] {
    transform: scale(1.1) !important;
}

.upd-profile-meta[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upd-name[b-fh4g93xdhr] {
    font-size: 16px;
    font-weight: 700;
    color: var(--upd-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.upd-username[b-fh4g93xdhr] {
    font-size: 12px;
    color: var(--upd-text-soft);
    font-family: ui-monospace, monospace;
}

/* --- Badges Row --- */
.upd-badges[b-fh4g93xdhr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.upd-badge[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}
.upd-badge[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 12px !important;
}

.upd-badge--ok[b-fh4g93xdhr] {
    background: var(--upd-success-soft);
    color: var(--upd-success);
    border: 1px solid rgba(34, 197, 94, 0.15);
}
.upd-badge--info[b-fh4g93xdhr] {
    background: var(--upd-accent-soft);
    color: var(--upd-accent);
    border: 1px solid rgba(126, 122, 249, 0.15);
}
.upd-badge--warn[b-fh4g93xdhr] {
    background: var(--upd-warn-soft);
    color: var(--upd-warn);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

/* --- Contact Info Stack --- */
.upd-contact-info[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--upd-surface);
    padding: 12px 14px;
    border-radius: var(--upd-radius-sm);
    border: 1px solid var(--upd-border);
}

.upd-contact-item[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--upd-text-soft);
}
.upd-contact-item[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 13px !important;
    opacity: 0.7;
}
.upd-contact-text[b-fh4g93xdhr] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* --- Vertical Navigation Menu --- */
.upd-nav-menu[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upd-nav-item[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--upd-radius-sm);
    color: var(--upd-text-soft);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.upd-nav-item:hover[b-fh4g93xdhr] {
    color: var(--upd-text);
    background: var(--upd-surface-2);
}

.upd-nav-item.active[b-fh4g93xdhr] {
    color: var(--upd-accent);
    background: var(--upd-accent-soft);
    font-weight: 600;
}

.upd-nav-item[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 15px !important;
}

/* --- Content Panel --- */
.upd-content[b-fh4g93xdhr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--upd-bg);
}

.upd-content-scroll[b-fh4g93xdhr] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* --- Tab Transition Anim --- */
.animate-fade[b-fh4g93xdhr] {
    animation: updFadeIn-b-fh4g93xdhr 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes updFadeIn-b-fh4g93xdhr {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.upd-section[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Double-Bezel Nested Card Architecture --- */
.upd-double-bezel[b-fh4g93xdhr] {
    background: var(--upd-surface-alt);
    border: 1px solid var(--upd-border);
    padding: 6px;
    border-radius: var(--upd-radius-outer);
    box-shadow: var(--upd-shadow-outer);
}

.upd-card[b-fh4g93xdhr] {
    background: var(--upd-surface);
    border: 1px solid var(--upd-border-inner);
    border-radius: var(--upd-radius-inner);
    box-shadow: var(--upd-shadow-inner);
    overflow: hidden;
    transition: box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.upd-card:hover[b-fh4g93xdhr] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.upd-card--danger[b-fh4g93xdhr] {
    border-color: rgba(220, 38, 38, 0.15);
}
.upd-card--accent[b-fh4g93xdhr] {
    border-color: rgba(89, 85, 244, 0.15);
}

.upd-card-hd[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--upd-border);
}

.upd-card-hd-tail[b-fh4g93xdhr] {
    margin-left: auto;
}

.upd-card-icon[b-fh4g93xdhr] {
    width: 28px;
    height: 28px;
    border-radius: var(--upd-radius-sm);
    background: var(--upd-accent-soft);
    color: var(--upd-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.upd-card-icon[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 14px !important;
}

.upd-card-icon--neutral[b-fh4g93xdhr] {
    background: var(--upd-surface-alt);
    color: var(--upd-text-soft);
}
.upd-card-icon--danger[b-fh4g93xdhr] {
    background: var(--upd-error-soft);
    color: var(--upd-error);
}
.upd-card-icon--warn[b-fh4g93xdhr] {
    background: var(--upd-warn-soft);
    color: var(--upd-warn);
}

.upd-card-ttl[b-fh4g93xdhr] {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--upd-text);
    letter-spacing: -0.01em;
}

.upd-card-sub[b-fh4g93xdhr] {
    font-size: 12px;
    color: var(--upd-text-soft);
    margin-top: 2px;
    line-height: 1.4;
}

.upd-card-bd[b-fh4g93xdhr] {
    padding: 18px;
}

/* --- Deep styling to piercing custom components --- */
[b-fh4g93xdhr] .mud-input-control {
    margin-top: 4px;
    margin-bottom: 4px;
}

[b-fh4g93xdhr] .mud-input-outlined-border {
    border-color: var(--upd-border) !important;
    border-radius: var(--upd-radius-sm) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-fh4g93xdhr] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--upd-accent) !important;
    box-shadow: 0 0 0 3px var(--upd-accent-soft) !important;
}

/* --- Count badge --- */
.upd-count-pill[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--upd-accent-soft);
    color: var(--upd-accent);
    font-size: 10px;
    font-weight: 700;
    border-radius: 100px;
}
.upd-count-pill--sm[b-fh4g93xdhr] {
    min-width: 17px;
    height: 16px;
    font-size: 9.5px;
}

/* --- 2FA Banner --- */
.upd-2fa-banner[b-fh4g93xdhr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--upd-accent-soft);
    border-bottom: 1px solid var(--upd-border);
}

.upd-2fa-banner-icon[b-fh4g93xdhr] {
    width: 42px;
    height: 42px;
    border-radius: var(--upd-radius-sm);
    background: var(--upd-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.upd-2fa-banner-icon[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 20px !important;
}

.upd-2fa-banner-title[b-fh4g93xdhr] {
    font-size: 14px;
    font-weight: 700;
    color: var(--upd-text);
    margin-bottom: 2px;
}

.upd-2fa-banner-sub[b-fh4g93xdhr] {
    font-size: 12px;
    color: var(--upd-text-soft);
    line-height: 1.45;
}

/* --- 2FA Step List --- */
.upd-steps[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
}

.upd-step[b-fh4g93xdhr] {
    display: flex;
    gap: 16px;
    padding-bottom: 4px;
}

.upd-step-track[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
}

.upd-step-num[b-fh4g93xdhr] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--upd-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(126, 122, 249, 0.3);
}

.upd-step-line[b-fh4g93xdhr] {
    width: 2px;
    flex: 1;
    min-height: 18px;
    background: var(--upd-border);
    margin: 6px 0;
}

.upd-step-body[b-fh4g93xdhr] {
    flex: 1;
    padding: 2px 0 20px;
}

.upd-step--last .upd-step-body[b-fh4g93xdhr] {
    padding-bottom: 4px;
}

.upd-step-title[b-fh4g93xdhr] {
    font-size: 13px;
    font-weight: 700;
    color: var(--upd-text);
    margin-bottom: 4px;
}

.upd-step-sub[b-fh4g93xdhr] {
    font-size: 12px;
    color: var(--upd-text-soft);
    line-height: 1.5;
}

/* --- QR and manual setup key --- */
.upd-qr-cluster[b-fh4g93xdhr] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.upd-qr-frame[b-fh4g93xdhr] {
    padding: 8px;
    background: #fff;
    border-radius: var(--upd-radius-sm);
    border: 1px solid var(--upd-border);
    display: inline-flex;
}

.upd-secret-zone[b-fh4g93xdhr] {
    padding-top: 2px;
}

.upd-secret-label[b-fh4g93xdhr] {
    font-size: 10px;
    font-weight: 700;
    color: var(--upd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.upd-secret-key[b-fh4g93xdhr] {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    background: var(--upd-surface-alt);
    border: 1px solid var(--upd-border);
    padding: 8px 12px;
    border-radius: var(--upd-radius-sm);
    color: var(--upd-text);
    letter-spacing: 0.05em;
    word-break: break-all;
}

.upd-verify-row[b-fh4g93xdhr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.upd-verify-input[b-fh4g93xdhr] {
    min-width: 180px;
    max-width: 220px;
}

/* --- 2FA Active --- */
.upd-2fa-active-wrap[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upd-2fa-active-badge[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--upd-success);
    background: var(--upd-success-soft);
    border: 1px solid rgba(34, 197, 94, 0.15);
    padding: 6px 14px 6px 10px;
    border-radius: 20px;
    align-self: flex-start;
}
.upd-2fa-active-badge[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 14px !important;
}

.upd-recovery-grid[b-fh4g93xdhr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.upd-recovery-code[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--upd-surface-alt);
    border: 1px solid var(--upd-border);
    border-radius: var(--upd-radius-sm);
}
.upd-recovery-code[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 11px !important;
    opacity: 0.5;
}
.upd-recovery-code code[b-fh4g93xdhr] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--upd-text);
}

/* --- Passkey List --- */
.upd-passkey-list[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upd-passkey-row[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--upd-surface-alt);
    border: 1px solid var(--upd-border);
    border-radius: var(--upd-radius-sm);
    transition: all 0.2s ease;
}

.upd-passkey-row:hover[b-fh4g93xdhr] {
    border-color: var(--upd-accent);
}

.upd-passkey-icon[b-fh4g93xdhr] {
    width: 30px;
    height: 30px;
    border-radius: var(--upd-radius-sm);
    background: var(--upd-accent-soft);
    color: var(--upd-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.upd-passkey-icon[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 14px !important;
}

.upd-passkey-info[b-fh4g93xdhr] {
    flex: 1;
    min-width: 0;
}

.upd-passkey-name[b-fh4g93xdhr] {
    font-size: 13px;
    font-weight: 500;
    color: var(--upd-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.upd-passkey-actions[b-fh4g93xdhr] {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.upd-passkey-row:hover .upd-passkey-actions[b-fh4g93xdhr] {
    opacity: 1;
}

/* --- Claims Display --- */
.upd-claims[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upd-claim-group[b-fh4g93xdhr] {
    overflow: hidden;
    border-radius: var(--upd-radius-inner);
}

.upd-claim-type[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--upd-surface-alt);
    border-bottom: 1px solid var(--upd-border);
}

.upd-claim-type-badge[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--upd-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}
.upd-claim-type-badge[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 12px !important;
    opacity: 0.6;
}

.upd-claim-values[b-fh4g93xdhr] {
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--upd-surface);
}

.upd-claim-value[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: var(--upd-radius-sm);
    font-size: 12.5px;
    color: var(--upd-text);
    transition: background 0.15s ease;
}

.upd-claim-value--editable[b-fh4g93xdhr] {
    cursor: pointer;
}
.upd-claim-value--editable:hover[b-fh4g93xdhr] {
    background: var(--upd-surface-alt);
}

.upd-edit-hint[b-fh4g93xdhr] {
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--upd-text-muted);
}
.upd-claim-value--editable:hover .upd-edit-hint[b-fh4g93xdhr] {
    opacity: 1;
}

.upd-claim-edit[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

/* --- Empty States --- */
.upd-empty[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 18px;
    text-align: center;
}

.upd-empty-icon[b-fh4g93xdhr] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--upd-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--upd-text-muted);
    margin-bottom: 12px;
    border: 1px dashed var(--upd-border);
}
.upd-empty-icon[b-fh4g93xdhr]  .mud-icon-root {
    font-size: 20px !important;
}

.upd-empty-title[b-fh4g93xdhr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--upd-text);
}

.upd-empty-sub[b-fh4g93xdhr] {
    font-size: 11.5px;
    color: var(--upd-text-soft);
    margin-top: 2px;
    max-width: 250px;
}

/* --- Footer Area --- */
.upd-footer[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--upd-border);
    background: var(--upd-surface-alt);
    flex-shrink: 0;
}

.upd-save-btn[b-fh4g93xdhr] {
    border-radius: var(--upd-radius-sm) !important;
}

/* --- Responsive Layout --- */
@media (max-width: 768px) {
    .upd-root[b-fh4g93xdhr] {
        height: calc(100dvh - 85px);
        max-height: none;
        min-height: 480px;
    }

    .upd-container[b-fh4g93xdhr] {
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .upd-sidebar[b-fh4g93xdhr] {
        width: 100%;
        height: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--upd-border);
        padding: 12px;
        gap: 12px;
        flex-shrink: 0;
    }

    .upd-profile-header[b-fh4g93xdhr] {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 12px;
    }

    .upd-avatar-ring[b-fh4g93xdhr] {
        width: 56px;
        height: 56px;
    }

    .upd-profile-meta[b-fh4g93xdhr] {
        align-items: flex-start;
    }

    .upd-badges[b-fh4g93xdhr] {
        justify-content: flex-start;
        margin-top: -2px;
    }

    .upd-contact-info[b-fh4g93xdhr] {
        display: none; /* Hide contact info on mobile/tablet to save height space */
    }

    .upd-nav-menu[b-fh4g93xdhr] {
        flex-direction: row;
        gap: 3px;
        flex-wrap: wrap;
    }

    .upd-nav-item[b-fh4g93xdhr] {
        white-space: nowrap;
        padding: 8px 9px;
        flex: 1 0 0;
        width: auto;
    }

    .upd-content[b-fh4g93xdhr] {
        flex: 1;
        min-height: 0; /* Critical for scroll in flex item */
    }

    .upd-content-scroll[b-fh4g93xdhr] {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
    }

    .upd-double-bezel[b-fh4g93xdhr] {
        border-radius: var(--upd-radius-inner);
        padding: 4px;
    }

    .upd-card[b-fh4g93xdhr] {
        border-radius: calc(var(--upd-radius-inner) - 4px);
    }

    .upd-card-bd[b-fh4g93xdhr] {
        padding: 12px;
    }

    .upd-footer[b-fh4g93xdhr] {
        padding: 12px 16px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    /* Responsive Signature Pad Canvas Container */
    [b-fh4g93xdhr] .mud-paper-outlined.rounded-lg {
        width: 100% !important;
        height: 150px !important;
    }
}

/* ============================================================
   Multi-Device 2FA Management – Soft UI Architecture
   ============================================================ */

.upd-2fa-active-wrap[b-fh4g93xdhr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upd-2fa-header[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--upd-surface);
    border-bottom: 1px solid var(--upd-border);
    flex-wrap: wrap;
}

.upd-2fa-header-left[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upd-2fa-header-right[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upd-status-chip[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.upd-status-chip--success[b-fh4g93xdhr] {
    background: var(--upd-success-soft);
    color: var(--upd-success);
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.upd-status-chip--warn[b-fh4g93xdhr] {
    background: var(--upd-warn-soft);
    color: var(--upd-warn);
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.upd-device-grid[b-fh4g93xdhr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 16px;
}

.upd-device-card[b-fh4g93xdhr] {
    position: relative;
    background: var(--upd-surface);
    border: 1px solid var(--upd-border);
    border-radius: var(--upd-radius-inner);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--upd-shadow-inner);
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.upd-device-card:hover[b-fh4g93xdhr] {
    transform: translateY(-2px);
    border-color: var(--upd-accent-soft);
    box-shadow: 0 8px 24px var(--upd-shadow-outer);
}

.upd-device-card--primary[b-fh4g93xdhr] {
    border-color: rgba(89, 85, 244, 0.25);
    background: linear-gradient(180deg, var(--upd-surface) 0%, var(--upd-accent-soft) 100%);
}

.upd-device-card-top[b-fh4g93xdhr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.upd-device-icon-box[b-fh4g93xdhr] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--upd-surface-alt);
    color: var(--upd-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--upd-border-inner);
    flex-shrink: 0;
}

.upd-device-icon-box--primary[b-fh4g93xdhr] {
    background: var(--upd-accent);
    color: #ffffff;
    box-shadow: 0 4px 12px var(--upd-accent-soft);
}

.upd-device-card-info[b-fh4g93xdhr] {
    flex: 1;
    min-width: 0;
}

.upd-device-title[b-fh4g93xdhr] {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--upd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upd-device-sub[b-fh4g93xdhr] {
    font-size: 11.5px;
    color: var(--upd-text-soft);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.upd-badge-pill[b-fh4g93xdhr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.upd-badge-pill--primary[b-fh4g93xdhr] {
    background: var(--upd-accent-soft);
    color: var(--upd-accent);
    border: 1px solid rgba(89, 85, 244, 0.2);
}

.upd-badge-pill--type[b-fh4g93xdhr] {
    background: var(--upd-surface-alt);
    color: var(--upd-text-soft);
}

.upd-device-card-footer[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--upd-border-inner);
    margin-top: 4px;
}

.upd-device-meta[b-fh4g93xdhr] {
    font-size: 11px;
    color: var(--upd-text-muted);
}

.upd-device-actions[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.upd-modal-overlay[b-fh4g93xdhr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: updFadeIn-b-fh4g93xdhr 0.2s ease;
}

.upd-modal-card[b-fh4g93xdhr] {
    background: var(--upd-surface);
    border: 1px solid var(--upd-border);
    border-radius: var(--upd-radius-outer);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

.upd-modal-hd[b-fh4g93xdhr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--upd-border);
}

.upd-modal-title[b-fh4g93xdhr] {
    font-size: 15px;
    font-weight: 700;
    color: var(--upd-text);
}

.upd-modal-bd[b-fh4g93xdhr] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* /Pages/ApiExplorer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   API EXPLORER — "SIGNAL"
   A diagnostic instrument, not a form. Monospace carries every piece of
   technical data; the HTTP method carries the colour. Structure is drawn with
   hairlines and rails rather than floating cards.

   Surfaces, ink and outlines come from the app's MD3 tokens (app.main.css), so
   light/dark switch with the rest of the platform. Only the feature-specific
   layer — method hues, the mono stack, rail geometry, timings — is declared
   here, on the .apix-root wrapper. Never :root: Blazor's CSS isolation would
   rewrite it to :root[b-xxx], which cannot match <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

.apix-root[b-d8rx0xok98] {
    --x-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Depth reads like real equipment: a weighted bezel, a recessed navigator,
       and a lit work surface. Flat surfaces made the whole panel wash out. */
    --x-chrome: var(--md-sys-color-surface-container-high);
    --x-nav: var(--md-sys-color-surface-container);
    --x-face: var(--md-sys-color-surface-container-lowest);
    --x-panel: var(--md-sys-color-surface-container-high);
    --x-panel-2: var(--md-sys-color-surface-container-highest);
    --x-ink: var(--md-sys-color-on-surface);
    --x-ink-2: var(--md-sys-color-on-surface-variant);
    --x-line: color-mix(in srgb, var(--md-sys-color-outline) 40%, transparent);
    --x-line-soft: color-mix(in srgb, var(--md-sys-color-outline) 20%, transparent);
    --x-accent: var(--md-sys-color-primary);

    /* The method IS the palette. Each row sets --m; rail, tag and glow follow. */
    --x-get: #0F766E;
    --x-post: #B45309;
    --x-put: #1D4ED8;
    --x-patch: #7C3AED;
    --x-delete: #BE123C;
    --x-other: #5B6472;

    --x-rail: 2px;
    --x-ease: var(--md-sys-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
    --x-fast: 140ms;
    --x-med: 240ms;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    background: var(--x-face);
    color: var(--x-ink);
    font-feature-settings: 'tnum' 1, 'cv05' 1;
}

/* Dark mode re-tunes the method hues only — surfaces and ink already invert
   through the MD3 tokens. Muted ink-on-paper hues go washed-out on a dark
   panel, so each lifts to its 300/400 tone to hold the same signal strength. */
[dark-mode="true"] .apix-root[b-d8rx0xok98] {
    --x-get: #5EEAD4;
    --x-post: #FCD34D;
    --x-put: #93C5FD;
    --x-patch: #C4B5FD;
    --x-delete: #FDA4AF;
    --x-other: #9AA3B2;
}

/* ── Shared atoms ─────────────────────────────────────────────────────────── */

.apix-label[b-d8rx0xok98] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--x-ink-2);
    line-height: 1;
}

/* Routes, URLs and identifiers stay LTR even under an RTL UI locale. */
.apix-mono[b-d8rx0xok98] {
    font-family: var(--x-mono);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.apix-scroll[b-d8rx0xok98] {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--x-line) transparent;
}

    .apix-scroll[b-d8rx0xok98]::-webkit-scrollbar {
        width: 10px;
    }

    .apix-scroll[b-d8rx0xok98]::-webkit-scrollbar-thumb {
        background: var(--x-line);
        border: 3px solid transparent;
        background-clip: content-box;
        border-radius: 99px;
    }

        .apix-scroll[b-d8rx0xok98]::-webkit-scrollbar-thumb:hover {
            background: var(--x-ink-2);
            background-clip: content-box;
        }

/* ── Top bar: the instrument's face plate ─────────────────────────────────── */

.apix-bar[b-d8rx0xok98] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    padding: 0 18px;
    height: 56px;
    background: var(--x-chrome);
    border-block-end: 1px solid var(--x-line);
}

.apix-brand[b-d8rx0xok98] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.apix-brand-name[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.apix-brand-sub[b-d8rx0xok98] {
    font-size: 11px;
    color: var(--x-ink-2);
    white-space: nowrap;
}

/* Three bars, like a level meter. They idle flat and animate while the page
   is fetching — the one piece of ambient motion in the whole interface. */
.apix-meter[b-d8rx0xok98] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-inline-end: 2px;
}

    .apix-meter span[b-d8rx0xok98] {
        display: block;
        width: 3px;
        height: 4px;
        border-radius: 1px;
        background: var(--x-accent);
        opacity: .55;
        transition: height var(--x-med) var(--x-ease), opacity var(--x-med) var(--x-ease);
    }

.apix-meter-live span[b-d8rx0xok98] {
    opacity: 1;
    animation: apix-meter-b-d8rx0xok98 1s var(--x-ease) infinite;
}

    .apix-meter-live span:nth-child(2)[b-d8rx0xok98] {
        animation-delay: .16s;
    }

    .apix-meter-live span:nth-child(3)[b-d8rx0xok98] {
        animation-delay: .32s;
    }

@keyframes apix-meter-b-d8rx0xok98 {
    0%, 100% {
        height: 4px;
    }

    50% {
        height: 14px;
    }
}

.apix-bar-spacer[b-d8rx0xok98] {
    flex: 1 1 auto;
}

.apix-bar-group[b-d8rx0xok98] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.apix-bar-rule[b-d8rx0xok98] {
    width: 1px;
    height: 22px;
    background: var(--x-line);
    flex: 0 0 auto;
}

/* ── Ghost button: the default control of the whole console ───────────────── */

.apix-btn[b-d8rx0xok98] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: transparent;
    color: var(--x-ink-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--x-fast) var(--x-ease), border-color var(--x-fast) var(--x-ease), background var(--x-fast) var(--x-ease);
}

    .apix-btn:hover[b-d8rx0xok98] {
        color: var(--x-ink);
        border-color: var(--x-ink-2);
        background: var(--x-panel-2);
    }

    .apix-btn:focus-visible[b-d8rx0xok98] {
        outline: 2px solid var(--x-accent);
        outline-offset: 2px;
    }

.apix-btn-icon[b-d8rx0xok98] {
    width: 30px;
    padding: 0;
    justify-content: center;
}

.apix-btn-count[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 99px;
    background: var(--x-panel-2);
    color: var(--x-ink-2);
    letter-spacing: 0;
}

.apix-btn:hover .apix-btn-count[b-d8rx0xok98] {
    background: var(--x-face);
}

/* ── Body: three columns, divided by hairlines ────────────────────────────── */

.apix-body[b-d8rx0xok98] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.apix-col[b-d8rx0xok98] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
    border-inline-end: 1px solid var(--x-line);
    background: var(--x-nav);
}

.apix-col-targets[b-d8rx0xok98] {
    width: 216px;
}

.apix-col-endpoints[b-d8rx0xok98] {
    width: 306px;
}

.apix-colhead[b-d8rx0xok98] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    flex: 0 0 auto;
    background: var(--x-chrome);
    border-block-end: 1px solid var(--x-line);
}

.apix-colhead-n[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 10px;
    color: var(--x-ink-2);
    margin-inline-start: auto;
}

/* ── Rows: rail + content. One shared skeleton for targets and endpoints. ─── */

.apix-row[b-d8rx0xok98] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding-block: 0;
    padding-inline: 13px 12px;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--x-fast) var(--x-ease);
}

    /* The rail — a patch-bay cue. Absent until you reach for the row. */
    .apix-row[b-d8rx0xok98]::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--x-rail);
        background: var(--m, var(--x-accent));
        transform: scaleY(0);
        transform-origin: center;
        transition: transform var(--x-fast) var(--x-ease);
    }

    .apix-row:hover[b-d8rx0xok98] {
        background: color-mix(in srgb, var(--x-panel) 60%, transparent);
    }

        .apix-row:hover[b-d8rx0xok98]::before {
            transform: scaleY(.45);
        }

    .apix-row:focus-visible[b-d8rx0xok98] {
        outline: 2px solid var(--x-accent);
        outline-offset: -2px;
    }

.apix-row-on[b-d8rx0xok98] {
    background: var(--x-face);
    box-shadow: inset 0 1px 0 var(--x-line-soft), inset 0 -1px 0 var(--x-line-soft);
}

    .apix-row-on[b-d8rx0xok98]::before {
        width: 3px;
        box-shadow: 0 0 10px -1px var(--m, var(--x-accent));
    }

    .apix-row-on[b-d8rx0xok98]::before,
    .apix-row-on:hover[b-d8rx0xok98]::before {
        transform: scaleY(1);
    }

.apix-row-name[b-d8rx0xok98] {
    font-size: 12.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.apix-row-on .apix-row-name[b-d8rx0xok98] {
    font-weight: 600;
}

/* Targets carry a kind marker instead of a verb. */
.apix-kind[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--x-ink-2);
    background: var(--x-panel-2);
    flex: 0 0 auto;
}

.apix-row-on .apix-kind[b-d8rx0xok98] {
    color: var(--x-accent);
    background: color-mix(in srgb, var(--x-accent) 14%, transparent);
}

/* ── Verb tag ─────────────────────────────────────────────────────────────── */

.apix-verb[b-d8rx0xok98] {
    flex: 0 0 auto;
    width: 46px;
    font-family: var(--x-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    color: var(--m, var(--x-other));
    background: transparent;
    background: color-mix(in srgb, var(--m, var(--x-other)) 16%, transparent);
}

.m-get[b-d8rx0xok98] {
    --m: var(--x-get);
}

.m-post[b-d8rx0xok98] {
    --m: var(--x-post);
}

.m-put[b-d8rx0xok98] {
    --m: var(--x-put);
}

.m-patch[b-d8rx0xok98] {
    --m: var(--x-patch);
}

.m-delete[b-d8rx0xok98] {
    --m: var(--x-delete);
}

.apix-row-on .apix-verb[b-d8rx0xok98] {
    color: var(--md-sys-color-surface-container-lowest);
    background: var(--m, var(--x-other));
}

.apix-route[b-d8rx0xok98] {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--x-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.apix-row-on .apix-route[b-d8rx0xok98] {
    color: var(--x-ink);
}

/* ── Endpoint groups ──────────────────────────────────────────────────────── */

.apix-group[b-d8rx0xok98] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 13px 5px;
    background: linear-gradient(var(--x-nav) 74%, transparent);
}

    .apix-group[b-d8rx0xok98]::after {
        content: '';
        flex: 1 1 auto;
        height: 1px;
        background: var(--x-line-soft);
    }

/* Rows arrive in a short cascade once discovery lands — the list reads as
   data streaming in rather than a block appearing. --i is set per row. */
.apix-ep-in[b-d8rx0xok98] {
    animation: apix-in-b-d8rx0xok98 260ms var(--x-ease) both;
    animation-delay: calc(var(--i, 0) * 11ms);
}

@keyframes apix-in-b-d8rx0xok98 {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

[dir="rtl"] .apix-ep-in[b-d8rx0xok98] {
    animation-name: apix-in-rtl-b-d8rx0xok98;
}

@keyframes apix-in-rtl-b-d8rx0xok98 {
    from {
        opacity: 0;
        transform: translateX(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Filter field ─────────────────────────────────────────────────────────── */

.apix-filter[b-d8rx0xok98] {
    position: relative;
    flex: 0 0 auto;
    border-block-end: 1px solid var(--x-line);
}

    .apix-filter input[b-d8rx0xok98] {
        box-sizing: border-box;
        width: 100%;
        height: 34px;
        padding-block: 0;
        padding-inline: 13px 12px;
        border: 0;
        background: transparent;
        color: var(--x-ink);
        font-family: var(--x-mono);
        font-size: 11.5px;
        direction: ltr;
        text-align: start;
    }

        .apix-filter input[b-d8rx0xok98]::placeholder {
            color: var(--x-ink-2);
            opacity: .8;
            letter-spacing: .04em;
        }

        .apix-filter input:focus[b-d8rx0xok98] {
            outline: none;
            background: var(--x-face);
        }

        .apix-filter input:focus + .apix-filter-underline[b-d8rx0xok98] {
            transform: scaleX(1);
        }

.apix-filter-underline[b-d8rx0xok98] {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 1px;
    background: var(--x-accent);
    transform: scaleX(0);
    transition: transform var(--x-med) var(--x-ease);
}

/* ── States: loading, notices, void ───────────────────────────────────────── */

.apix-bars[b-d8rx0xok98] {
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .apix-bars span[b-d8rx0xok98] {
        display: block;
        height: 9px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--x-panel) 25%, var(--x-face) 50%, var(--x-panel) 75%) 0 0 / 280% 100%;
        animation: apix-sweep-b-d8rx0xok98 1.3s linear infinite;
    }

        .apix-bars span:nth-child(2)[b-d8rx0xok98] {
            width: 76%;
        }

        .apix-bars span:nth-child(3)[b-d8rx0xok98] {
            width: 88%;
        }

        .apix-bars span:nth-child(4)[b-d8rx0xok98] {
            width: 62%;
        }

@keyframes apix-sweep-b-d8rx0xok98 {
    to {
        background-position: -280% 0;
    }
}

.apix-notice[b-d8rx0xok98] {
    margin: 12px;
    padding: 11px 12px;
    border: 1px solid var(--x-line);
    border-inline-start: var(--x-rail) solid var(--x-post);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-face);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--x-ink-2);
}

.apix-notice-title[b-d8rx0xok98] {
    display: block;
    margin-block-end: 3px;
    font-family: var(--x-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--x-post);
}

.apix-console[b-d8rx0xok98] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--x-face);
}

/* The void: a faint blueprint grid so an empty console still reads as
   equipment that is powered on and waiting. */
.apix-void[b-d8rx0xok98] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

    /* The grid carries the mask on its own layer — masking the whole element
       faded the copy along with it. */
    .apix-void[b-d8rx0xok98]::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px, var(--x-line) 1px, transparent 0);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
        mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
    }

.apix-void-mark[b-d8rx0xok98],
.apix-void-hint[b-d8rx0xok98] {
    position: relative;
}

.apix-void-mark[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--x-ink-2);
}

.apix-void-hint[b-d8rx0xok98] {
    font-size: 11.5px;
    color: var(--x-ink-2);
    opacity: .75;
}

/* ── History drawer ───────────────────────────────────────────────────────── */

.apix-scrim[b-d8rx0xok98] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 42%, transparent);
    opacity: 0;
    animation: apix-fade-b-d8rx0xok98 var(--x-med) var(--x-ease) forwards;
    border: 0;
    padding: 0;
    cursor: pointer;
}

@keyframes apix-fade-b-d8rx0xok98 {
    to {
        opacity: 1;
    }
}

.apix-hist[b-d8rx0xok98] {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1401;
    width: min(430px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--x-nav);
    border-inline-start: 1px solid var(--x-line);
    box-shadow: -18px 0 46px -22px var(--md-sys-color-shadow, #000);
    animation: apix-slide-b-d8rx0xok98 var(--x-med) var(--md-sys-motion-easing-emphasized-decel, cubic-bezier(.05,.7,.1,1)) both;
}

@keyframes apix-slide-b-d8rx0xok98 {
    from {
        transform: translateX(100%);
    }
}

[dir="rtl"] .apix-hist[b-d8rx0xok98] {
    animation-name: apix-slide-rtl-b-d8rx0xok98;
}

@keyframes apix-slide-rtl-b-d8rx0xok98 {
    from {
        transform: translateX(-100%);
    }
}

.apix-hist-head[b-d8rx0xok98] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    flex: 0 0 auto;
    padding: 0 14px;
    border-block-end: 1px solid var(--x-line);
}

.apix-hist-title[b-d8rx0xok98] {
    font-family: var(--x-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.apix-hist-list[b-d8rx0xok98] {
    flex: 1 1 auto;
    min-height: 0;
}

.apix-hist-row[b-d8rx0xok98] {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 4px 9px;
    width: 100%;
    padding-block: 10px;
    padding-inline: 13px 14px;
    border: 0;
    border-block-end: 1px solid var(--x-line-soft);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--x-fast) var(--x-ease);
}

    .apix-hist-row[b-d8rx0xok98]::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--x-rail);
        background: var(--m, var(--x-other));
        transform: scaleY(0);
        transition: transform var(--x-fast) var(--x-ease);
    }

    .apix-hist-row:hover[b-d8rx0xok98] {
        background: var(--x-face);
    }

        .apix-hist-row:hover[b-d8rx0xok98]::before {
            transform: scaleY(1);
        }

    .apix-hist-row:focus-visible[b-d8rx0xok98] {
        outline: 2px solid var(--x-accent);
        outline-offset: -2px;
    }

.apix-hist-url[b-d8rx0xok98] {
    font-size: 11px;
    line-height: 1.4;
    color: var(--x-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.apix-hist-row:hover .apix-hist-url[b-d8rx0xok98] {
    color: var(--x-ink);
}

.apix-hist-meta[b-d8rx0xok98] {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--x-mono);
    font-size: 10px;
    color: var(--x-ink-2);
}

.apix-hist-code[b-d8rx0xok98] {
    font-weight: 700;
}

.s-2xx[b-d8rx0xok98] {
    color: var(--x-get);
}

.s-3xx[b-d8rx0xok98] {
    color: var(--x-put);
}

.s-4xx[b-d8rx0xok98] {
    color: var(--x-post);
}

.s-5xx[b-d8rx0xok98] {
    color: var(--x-delete);
}

.apix-hist-dot[b-d8rx0xok98] {
    opacity: .45;
}

.apix-hist-void[b-d8rx0xok98] {
    padding: 34px 20px;
    text-align: center;
    font-size: 11.5px;
    color: var(--x-ink-2);
}

/* ── MudBlazor form controls, dressed for the console ─────────────────────── */
/* CSS isolation stops at component boundaries, so anything MudBlazor renders
   needs ::deep to be reachable from here. */

/* Class lands on MudSelect's own root, which never carries the isolation
   attribute — without ::deep this rule compiles to .apix-env[b-xxx] and dies. */
[b-d8rx0xok98] .apix-env {
    width: 190px;
}

[b-d8rx0xok98] .apix-env .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
}

[b-d8rx0xok98] .apix-env .mud-input-slot,
[b-d8rx0xok98] .apix-env .mud-select-input {
    font-family: var(--x-mono);
    font-size: 11.5px;
}

[b-d8rx0xok98] .apix-env .mud-input > input,
[b-d8rx0xok98] .apix-env .mud-input .mud-input-slot {
    padding-block: 6px;
}
/* /Pages/DatabaseBackup.razor.rz.scp.css */
/* ── Design tokens (scoped to root wrapper) ─────────────────────────────── */
.dbk-root[b-ytnxhlb0jk] {
    --dbk-r-xs:     4px;
    --dbk-r-sm:     8px;
    --dbk-r:        12px;
    --dbk-r-lg:     16px;
    --dbk-sh-xs:    0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    --dbk-sh:       0 2px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    --dbk-sh-lg:    0 4px 24px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
    --dbk-surf:     color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    --dbk-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 70%, var(--mud-palette-surface));
    --dbk-div:      color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
    --dbk-tint:     color-mix(in srgb, var(--mud-palette-primary) 7%,  transparent);
    --dbk-tint-m:   color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    --dbk-accent:   color-mix(in srgb, var(--mud-palette-primary) 90%, transparent);
    --dbk-success:  var(--mud-palette-success);
    --dbk-error:    var(--mud-palette-error);
    --dbk-warning:  var(--mud-palette-warning);
    --dbk-pg-blue:  #336791;
    --dbk-pg-tint:  color-mix(in srgb, #336791 12%, transparent);
}

[dark-mode="true"] .dbk-root[b-ytnxhlb0jk] {
    --dbk-sh-xs:    0 1px 3px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18);
    --dbk-sh:       0 2px 12px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.22);
    --dbk-sh-lg:    0 4px 24px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.30);
    --dbk-surf:     color-mix(in srgb, var(--mud-palette-background-gray) 35%, var(--mud-palette-surface));
    --dbk-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 60%, var(--mud-palette-surface));
}

/* ── Page root ──────────────────────────────────────────────────────────── */
.dbk-root[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: calc(100vh - 4.8rem);
    position: relative;
}

/* faint radial glow behind content */
.dbk-root[b-ytnxhlb0jk]::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 8% 10%, color-mix(in srgb, #336791 6%, transparent), transparent 40%),
        radial-gradient(ellipse at 92% 85%, color-mix(in srgb, var(--mud-palette-primary) 5%, transparent), transparent 38%);
    pointer-events: none;
    z-index: 0;
}

.dbk-root > *[b-ytnxhlb0jk] { position: relative; z-index: 1; }

/* ── Entry animations ────────────────────────────────────────────────────── */
.dbk-enter[b-ytnxhlb0jk] {
    opacity: 0;
    transform: translateY(12px);
    animation: dbk-rise-b-ytnxhlb0jk 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dbk-enter-0[b-ytnxhlb0jk] { animation-delay: 0.00s; }
.dbk-enter-1[b-ytnxhlb0jk] { animation-delay: 0.06s; }
.dbk-enter-2[b-ytnxhlb0jk] { animation-delay: 0.12s; }
.dbk-enter-3[b-ytnxhlb0jk] { animation-delay: 0.18s; }
.dbk-enter-4[b-ytnxhlb0jk] { animation-delay: 0.24s; }

@keyframes dbk-rise-b-ytnxhlb0jk {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Top Bar ─────────────────────────────────────────────────────────────── */
.dbk-topbar[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--dbk-surf);
    border: 1px solid var(--dbk-div);
    border-radius: var(--dbk-r);
    box-shadow: var(--dbk-sh-xs);
}

.dbk-topbar-left[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.dbk-brand-glyph[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--dbk-r-sm);
    background: var(--dbk-pg-tint);
    border: 1px solid color-mix(in srgb, #336791 22%, transparent);
    color: var(--dbk-pg-blue);
    flex-shrink: 0;
}

[dark-mode="true"] .dbk-brand-glyph[b-ytnxhlb0jk] {
    color: color-mix(in srgb, #336791 80%, white);
    border-color: color-mix(in srgb, #336791 35%, transparent);
}

.dbk-topbar-text[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dbk-topbar-title[b-ytnxhlb0jk] {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbk-topbar-sub[b-ytnxhlb0jk] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbk-topbar-actions[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Alert (legacy) ──────────────────────────────────────────────────────── */
.dbk-alert-tools code[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    padding: 0 4px;
    border-radius: 3px;
    font-size: .8em;
}

/* ── Health alerts ───────────────────────────────────────────────────────── */
.dbk-health-alert[b-ytnxhlb0jk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--dbk-r-sm);
    border: 1px solid transparent;
}

.dbk-health-alert--error[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    color: var(--mud-palette-error-text);
}

.dbk-health-alert--warn[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
    color: var(--mud-palette-warning-text);
}

.dbk-health-alert-icon[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    padding-top: 1px;
    flex-shrink: 0;
    opacity: .85;
}

.dbk-health-alert--error .dbk-health-alert-icon[b-ytnxhlb0jk] { color: var(--mud-palette-error); }
.dbk-health-alert--warn  .dbk-health-alert-icon[b-ytnxhlb0jk] { color: var(--mud-palette-warning); }

.dbk-health-alert-body[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dbk-health-alert-title[b-ytnxhlb0jk] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dbk-health-alert-msg[b-ytnxhlb0jk] {
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.dbk-health-alert code[b-ytnxhlb0jk] {
    background: color-mix(in srgb, currentColor 12%, transparent);
    padding: 0 4px;
    border-radius: 3px;
    font-size: .85em;
}

/* ── Header stat chips ──────────────────────────────────────────────────── */
.dbk-topbar-chips[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-left: 4px;
}

.dbk-hchip[b-ytnxhlb0jk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}

.dbk-hchip-lbl[b-ytnxhlb0jk] { font-weight: 400; opacity: .8; }

.dbk-hchip--primary[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}
.dbk-hchip--success[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
}
.dbk-hchip--info[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: var(--mud-palette-info);
    border-color: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
}
.dbk-hchip--warning[b-ytnxhlb0jk] {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
}

/* ── Main layout: 7fr left · 5fr right ─────────────────────────────────── */
.dbk-main-layout[b-ytnxhlb0jk] {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 12px;
    align-items: start;
}

.dbk-main-left[b-ytnxhlb0jk]  { min-width: 0; }

.dbk-main-right[b-ytnxhlb0jk] {
    position: sticky;
    top: 72px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .dbk-main-layout[b-ytnxhlb0jk] { grid-template-columns: 1fr; }
    .dbk-main-right[b-ytnxhlb0jk]  { position: static; }
}

/* ── Body layout (inside left column) ───────────────────────────────────── */
.dbk-body[b-ytnxhlb0jk] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: start;
}

@media (max-width: 900px) {
    .dbk-body[b-ytnxhlb0jk] { grid-template-columns: 1fr; }
}

/* ── Section card ────────────────────────────────────────────────────────── */
.dbk-section[b-ytnxhlb0jk] {
    background: var(--dbk-surf);
    border: 1px solid var(--dbk-div);
    border-radius: var(--dbk-r);
    box-shadow: var(--dbk-sh-xs);
    overflow: hidden;
}

.dbk-section-header[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--dbk-div);
    background: var(--dbk-surf-alt);
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dbk-section-badge[b-ytnxhlb0jk] {
    margin-left: auto;
    background: var(--dbk-tint-m);
    color: var(--mud-palette-primary);
    padding: 1px 7px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ── Context cards ───────────────────────────────────────────────────────── */
.dbk-contexts-row[b-ytnxhlb0jk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding:7px;
}

.dbk-ctx-card[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    background: var(--dbk-surf);
    border: 1px solid var(--dbk-div);
    border-left: 2.5px solid var(--mud-palette-primary);
    border-radius: var(--dbk-r-sm);
    box-shadow: var(--dbk-sh-xs);
    flex: 1 1 210px;
    max-width: 205px;
    min-width: 0;
    transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
    position: relative;
    overflow: hidden;
}

/* subtle shimmer overlay */
.dbk-ctx-card[b-ytnxhlb0jk]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 60%, color-mix(in srgb, var(--mud-palette-primary) 4%, transparent));
    pointer-events: none;
}

.dbk-ctx-card:hover[b-ytnxhlb0jk] {
    background: var(--dbk-tint);
    box-shadow: var(--dbk-sh);
    transform: translateY(-1px);
}

.dbk-ctx-card--inactive[b-ytnxhlb0jk] {
    opacity: .5;
    border-left-color: var(--mud-palette-text-disabled);
}

.dbk-ctx-card-left[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.dbk-ctx-card-actions[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* ── Shared db-card helpers (status dot, avatar, info text) ─────────────── */
.dbk-db-status-dot[b-ytnxhlb0jk] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dbk-status-active[b-ytnxhlb0jk] {
    background: var(--mud-palette-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
    animation: dbk-pulse-b-ytnxhlb0jk 2.2s ease-in-out infinite;
}

.dbk-status-inactive[b-ytnxhlb0jk] { background: var(--mud-palette-text-disabled); }

@keyframes dbk-pulse-b-ytnxhlb0jk {
    0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 25%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mud-palette-success) 0%,  transparent); }
}

.dbk-db-avatar[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--dbk-r-xs);
    background: var(--dbk-pg-tint);
    color: var(--dbk-pg-blue);
    border: 1px solid color-mix(in srgb, #336791 18%, transparent);
    flex-shrink: 0;
}

[dark-mode="true"] .dbk-db-avatar[b-ytnxhlb0jk] {
    color: color-mix(in srgb, #336791 80%, white);
}

.dbk-db-info[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dbk-db-name[b-ytnxhlb0jk] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dbk-db-server[b-ytnxhlb0jk] {
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dbk-db-last[b-ytnxhlb0jk] {
    font-size: .6rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dbk-db-last--none[b-ytnxhlb0jk] { color: color-mix(in srgb, var(--mud-palette-text-secondary) 60%, transparent); font-style: italic; }

.dbk-db-card-actions[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dbk-btn-backup[b-ytnxhlb0jk] { font-size: .68rem !important; padding: 0 8px !important; min-height: 26px !important; height: 26px !important; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.dbk-empty[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 20px;
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
    text-align: center;
}

.dbk-empty--sm[b-ytnxhlb0jk] { padding: 24px 16px; }

.dbk-empty-sub[b-ytnxhlb0jk] {
    font-size: .72rem;
    opacity: .7;
}

.dbk-empty code[b-ytnxhlb0jk] {
    background: var(--dbk-tint);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85em;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.dbk-skeleton-wrap[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.dbk-skeleton[b-ytnxhlb0jk] { border-radius: var(--dbk-r-sm) !important; }

/* ── Backup history table ─────────────────────────────────────────────────── */
.dbk-table-wrap[b-ytnxhlb0jk] {
    overflow-x: auto;
}

.dbk-table[b-ytnxhlb0jk] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.dbk-table thead tr[b-ytnxhlb0jk] {
    background: var(--dbk-surf-alt);
    border-bottom: 1px solid var(--dbk-div);
}

.dbk-table th[b-ytnxhlb0jk] {
    padding: 7px 12px;
    text-align: left;
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dbk-th-actions[b-ytnxhlb0jk] { text-align: center; width: 40px; }

.dbk-tr[b-ytnxhlb0jk] {
    border-bottom: 1px solid var(--dbk-div);
    transition: background .12s ease;
}

.dbk-tr:last-child[b-ytnxhlb0jk] { border-bottom: none; }

.dbk-tr:hover[b-ytnxhlb0jk] { background: var(--dbk-tint); }

.dbk-table td[b-ytnxhlb0jk] { padding: 8px 12px; vertical-align: middle; }

.dbk-file-cell[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
}

.dbk-file-name[b-ytnxhlb0jk] {
    font-size: .74rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbk-ctx-chip[b-ytnxhlb0jk] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--dbk-pg-tint);
    color: var(--dbk-pg-blue);
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

[dark-mode="true"] .dbk-ctx-chip[b-ytnxhlb0jk] {
    color: color-mix(in srgb, #336791 80%, white);
}

.dbk-td-date[b-ytnxhlb0jk] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-size: .74rem;
}

.dbk-td-size[b-ytnxhlb0jk] {
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    font-size: .74rem;
    font-weight: 500;
}

.dbk-td-menu[b-ytnxhlb0jk] {
    text-align: center;
    width: 40px;
    padding: 0 4px !important;
}

/* ── Log panel ───────────────────────────────────────────────────────────── */
/* Light-mode defaults */
.dbk-log-panel[b-ytnxhlb0jk] {
    --log-bg: #f6f8fa;
    --log-border: color-mix(in srgb, #336791 22%, transparent);
    --log-header-bg: color-mix(in srgb, #336791 9%, transparent);
    --log-header-line: color-mix(in srgb, #336791 16%, transparent);
    --log-op-color: color-mix(in srgb, #336791 75%, #24292f);
    --log-text: #24292f;
    --log-idle-color: color-mix(in srgb, #336791 55%, #24292f);
    background: var(--log-bg);
    border: 1px solid var(--log-border);
    border-radius: var(--dbk-r);
    box-shadow: var(--dbk-sh-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 293px);
    min-height: 340px;
    max-height: 900px;
}

/* Dark-mode overrides */
[dark-mode="true"] .dbk-log-panel[b-ytnxhlb0jk] {
    --log-bg:          color-mix(in srgb, #0d1117 96%, var(--mud-palette-surface));
    --log-border:      color-mix(in srgb, #336791 35%, transparent);
    --log-header-bg:   color-mix(in srgb, #336791 12%, transparent);
    --log-header-line: color-mix(in srgb, #336791 22%, transparent);
    --log-op-color:    color-mix(in srgb, #336791 80%, white);
    --log-text:        #c9d1d9;
    --log-idle-color:  color-mix(in srgb, #336791 50%, #c9d1d9);
}

.dbk-log-header[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--log-header-bg);
    border-bottom: 1px solid var(--log-header-line);
}

.dbk-log-title-row[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dbk-log-op-label[b-ytnxhlb0jk] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--log-op-color);
}

.dbk-log-actions[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* running dot */
.dbk-log-dot[b-ytnxhlb0jk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dbk-log-dot--running[b-ytnxhlb0jk] {
    background: #4ade80;
    animation: dbk-blink-b-ytnxhlb0jk 0.9s ease-in-out infinite;
}

@keyframes dbk-blink-b-ytnxhlb0jk {
    0%,100% { opacity: 1; }
    50%      { opacity: .3; }
}

/* log body */
.dbk-log-body[b-ytnxhlb0jk] {
    flex: 1;
    overflow-y: scroll; /* always show scrollbar track */
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0; /* critical for flex child scrolling */
}

.dbk-log-body[b-ytnxhlb0jk]::-webkit-scrollbar { width: 5px; }
.dbk-log-body[b-ytnxhlb0jk]::-webkit-scrollbar-thumb { background: color-mix(in srgb, #336791 40%, transparent); border-radius: 3px; }
.dbk-log-body[b-ytnxhlb0jk]::-webkit-scrollbar-track { background: transparent; }

.dbk-log-line[b-ytnxhlb0jk] {
    font-size: .72rem;
    line-height: 1.55;
    color: var(--log-text);
    white-space: pre-wrap;
    word-break: break-all;
}

.dbk-log-success[b-ytnxhlb0jk]   { color: #16a34a; }
.dbk-log-error[b-ytnxhlb0jk]     { color: #dc2626; }
.dbk-log-warn[b-ytnxhlb0jk]      { color: #d97706; }
.dbk-log-cancelled[b-ytnxhlb0jk] { color: #64748b; }

[dark-mode="true"] .dbk-log-success[b-ytnxhlb0jk]   { color: #4ade80; }
[dark-mode="true"] .dbk-log-error[b-ytnxhlb0jk]     { color: #f87171; }
[dark-mode="true"] .dbk-log-warn[b-ytnxhlb0jk]      { color: #fbbf24; }
[dark-mode="true"] .dbk-log-cancelled[b-ytnxhlb0jk] { color: #94a3b8; }

/* Log panel idle state */
.dbk-log-idle[b-ytnxhlb0jk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    color: var(--log-idle-color);
    font-size: .78rem;
    text-align: center;
    user-select: none;
}

.dbk-log-idle-sub[b-ytnxhlb0jk] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    opacity: .5;
    line-height: 1.5;
    max-width: 200px;
}

.dbk-log-cursor[b-ytnxhlb0jk] {
    color: #4ade80;
    animation: dbk-blink-b-ytnxhlb0jk 0.85s step-start infinite;
}

/* ── Restore dialog ──────────────────────────────────────────────────────── */
.dbk-dialog-title[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
}

.dbk-restore-info[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.dbk-restore-file[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--dbk-tint);
    border: 1px solid var(--dbk-div);
    border-radius: var(--dbk-r-sm);
}

.dbk-restore-filename[b-ytnxhlb0jk] {
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dbk-restore-filesize[b-ytnxhlb0jk] {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dbk-restore-target[b-ytnxhlb0jk] { display: flex; flex-direction: column; }

/* ── File-restore dialog ─────────────────────────────────────────────────── */
.dbk-file-restore-body[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.dbk-file-restore-picker[b-ytnxhlb0jk] { width: 100%; }

.dbk-file-drop-zone[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    border: 2px dashed var(--dbk-div);
    border-radius: var(--dbk-r);
    background: var(--dbk-surf);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    text-align: center;
}

.dbk-file-drop-zone:hover[b-ytnxhlb0jk] {
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-secondary) 5%, var(--mud-palette-surface));
}

.dbk-file-drop-zone--has-file[b-ytnxhlb0jk] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.dbk-file-drop-label[b-ytnxhlb0jk] {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.dbk-file-drop-label--chosen[b-ytnxhlb0jk] {
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}

.dbk-file-drop-sub[b-ytnxhlb0jk] {
    font-size: .7rem;
    color: var(--mud-palette-text-disabled);
}

.dbk-file-restore-warn[b-ytnxhlb0jk] { margin: 0; }
.dbk-file-restore-field[b-ytnxhlb0jk] { width: 100%; }

/* Override database name field */
.dbk-restore-db-override[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dbk-div);
}

.dbk-restore-db-override-label[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
}

.dbk-restore-protected-info[b-ytnxhlb0jk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .75rem;
    background: rgba(var(--mud-palette-error-rgb), .08);
    border: 1px solid rgba(var(--mud-palette-error-rgb), .25);
    color: var(--mud-palette-error);
}

.dbk-restore-protected-info strong[b-ytnxhlb0jk] {
    font-weight: 700;
    font-family: monospace;
}

/* ── Backup config dialog ────────────────────────────────────────────────── */

/* Header */
.dbk-cfg-header[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dbk-cfg-header-icon[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--dbk-r-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.dbk-cfg-header-text[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dbk-cfg-ctx-name[b-ytnxhlb0jk] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dbk-cfg-ctx-sub[b-ytnxhlb0jk] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* Body */
.dbk-cfg-body[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: -4px -24px 0;
}

/* Two-column row */
.dbk-cfg-row2[b-ytnxhlb0jk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dbk-div);
}

.dbk-cfg-row2 > * + *[b-ytnxhlb0jk] {
    padding-left: 16px;
    border-left: 1px solid var(--dbk-div);
    margin-left: 0;
}

.dbk-cfg-row2--border[b-ytnxhlb0jk] { /* already has border-bottom from .dbk-cfg-row2 */ }

/* Group */
.dbk-cfg-group[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 7px;
}

.dbk-cfg-group-label[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mud-palette-text-secondary);
}

.dbk-cfg-group-label-row[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dbk-cfg-section-opt[b-ytnxhlb0jk] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .65;
    margin-left: 4px;
}

/* ── Segmented buttons ── */
.dbk-cfg-seg[b-ytnxhlb0jk] {
    display: flex;
    border-radius: var(--dbk-r-sm);
    border: 1px solid var(--dbk-div);
    overflow: hidden;
    background: var(--dbk-surf-alt);
}

.dbk-cfg-seg-btn[b-ytnxhlb0jk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 6px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--dbk-div);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: background .15s ease, color .15s ease;
    user-select: none;
    line-height: 1.2;
}

.dbk-cfg-seg-btn:last-child[b-ytnxhlb0jk] { border-right: none; }

.dbk-cfg-seg-btn:hover[b-ytnxhlb0jk] {
    background: var(--dbk-tint);
    color: var(--mud-palette-text-primary);
}

.dbk-cfg-seg-btn.active[b-ytnxhlb0jk] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.dbk-cfg-seg-btn.active code[b-ytnxhlb0jk] {
    background: rgba(255,255,255,.18);
    color: inherit;
}

.dbk-cfg-seg-btn code[b-ytnxhlb0jk] {
    font-size: .62rem;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* inline notice below format buttons */
.dbk-cfg-inline-notice[b-ytnxhlb0jk] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 6px 8px;
    border-radius: var(--dbk-r-xs);
    font-size: .68rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--mud-palette-info) 75%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
}

.dbk-cfg-inline-notice code[b-ytnxhlb0jk] {
    font-size: .82em;
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    padding: 0 3px;
    border-radius: 3px;
}

/* ── Toggles ── */
.dbk-cfg-toggles[b-ytnxhlb0jk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dbk-cfg-toggle[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px 4px 0;
    border-radius: var(--dbk-r-xs);
    background: var(--dbk-surf-alt);
    border: 1px solid var(--dbk-div);
    cursor: pointer;
    transition: background .15s ease;
}

.dbk-cfg-toggle:hover[b-ytnxhlb0jk] { background: var(--dbk-tint); }

.dbk-cfg-toggle-label[b-ytnxhlb0jk] {
    flex: 1;
    font-size: .77rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    user-select: none;
}

.dbk-cfg-toggle-flag[b-ytnxhlb0jk] {
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    white-space: nowrap;
}

/* ── Filters ── */
.dbk-cfg-section--filters[b-ytnxhlb0jk] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dbk-div);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dbk-cfg-fields[b-ytnxhlb0jk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── Command preview ── */
.dbk-cfg-preview[b-ytnxhlb0jk] {
    border-top: 1px solid color-mix(in srgb, #336791 20%, transparent);
    overflow: hidden;
}

.dbk-cfg-preview-label[b-ytnxhlb0jk] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 16px;
    background: color-mix(in srgb, #336791 8%, transparent);
    font-size: .61rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: color-mix(in srgb, #336791 70%, var(--mud-palette-text-secondary));
    border-bottom: 1px solid color-mix(in srgb, #336791 16%, transparent);
}

.dbk-cfg-preview-code[b-ytnxhlb0jk] {
    padding: 8px 16px;
    background: color-mix(in srgb, #0d1117 88%, var(--mud-palette-surface));
    font-size: .69rem;
    color: #8dd8a0;
    word-break: break-all;
    line-height: 1.6;
}

[dark-mode="true"] .dbk-cfg-preview-code[b-ytnxhlb0jk] {
    background: color-mix(in srgb, #0d1117 96%, var(--mud-palette-surface));
    color: #8dd8a0;
}

:not([dark-mode="true"]) .dbk-cfg-preview-code[b-ytnxhlb0jk] {
    background: #1e2a3a;
    color: #8dd8a0;
}

/* ── Design tokens for dialog content ──────────────────────────────────────
   Dialogs render in a portal outside .dbk-root, so variables on .dbk-root
   don't cascade into them. The .dbk-vars class is applied to the outermost
   HTML elements inside each dialog's TitleContent and DialogContent render
   fragments. These elements ARE rendered by DatabaseBackup and receive the
   Blazor scope attribute [b-xxx], so .dbk-vars[b-xxx] matches correctly and
   the variables cascade to all descendant dialog content.
────────────────────────────────────────────────────────────────────────────── */
.dbk-vars[b-ytnxhlb0jk] {
    --dbk-r-xs:     4px;
    --dbk-r-sm:     8px;
    --dbk-r:        12px;
    --dbk-r-lg:     16px;
    --dbk-sh-xs:    0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    --dbk-sh:       0 2px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    --dbk-sh-lg:    0 4px 24px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
    --dbk-surf:     color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    --dbk-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 70%, var(--mud-palette-surface));
    --dbk-div:      color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
    --dbk-tint:     color-mix(in srgb, var(--mud-palette-primary) 7%,  transparent);
    --dbk-tint-m:   color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    --dbk-accent:   color-mix(in srgb, var(--mud-palette-primary) 90%, transparent);
    --dbk-success:  var(--mud-palette-success);
    --dbk-error:    var(--mud-palette-error);
    --dbk-warning:  var(--mud-palette-warning);
    --dbk-pg-blue:  #336791;
    --dbk-pg-tint:  color-mix(in srgb, #336791 12%, transparent);
}

[dark-mode="true"] .dbk-vars[b-ytnxhlb0jk] {
    --dbk-sh-xs:    0 1px 3px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18);
    --dbk-sh:       0 2px 12px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.22);
    --dbk-sh-lg:    0 4px 24px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.30);
    --dbk-surf:     color-mix(in srgb, var(--mud-palette-background-gray) 35%, var(--mud-palette-surface));
    --dbk-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 60%, var(--mud-palette-surface));
}
/* /Pages/DatabaseLogs.razor.rz.scp.css */
/* ── Design tokens ──────────────────────────────────────────────────────── */
.dbl-root[b-n3a5k9p2bd] {
    --dbl-r-sm:    6px;
    --dbl-r:       12px;
    --dbl-sh-xs:   0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    --dbl-sh:      0 2px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    --dbl-surf:    color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    --dbl-div:     color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
    --dbl-added:   var(--mud-palette-success);
    --dbl-modified:var(--mud-palette-warning);
    --dbl-deleted: var(--mud-palette-error);
}

[dark-mode="true"] .dbl-root[b-n3a5k9p2bd] {
    --dbl-sh-xs:   0 1px 3px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18);
    --dbl-sh:      0 2px 12px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.22);
    --dbl-surf:    color-mix(in srgb, var(--mud-palette-background-gray) 35%, var(--mud-palette-surface));
}

/* ── Page root ────────────────────────────────────────────────────────────── */
.dbl-root[b-n3a5k9p2bd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Entry animation ─────────────────────────────────────────────────────── */
.dbl-enter[b-n3a5k9p2bd] {
    opacity: 0;
    transform: translateY(10px);
    animation: dbl-rise-b-n3a5k9p2bd 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dbl-enter-0[b-n3a5k9p2bd] { animation-delay: 0.00s; }
.dbl-enter-1[b-n3a5k9p2bd] { animation-delay: 0.09s; }

@keyframes dbl-rise-b-n3a5k9p2bd {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Stats strip ─────────────────────────────────────────────────────────── */
.dbl-stats[b-n3a5k9p2bd] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

@media (max-width: 1100px) {
    .dbl-stats[b-n3a5k9p2bd] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .dbl-stats[b-n3a5k9p2bd] { grid-template-columns: repeat(2, 1fr); }
}

.dbl-stat-card[b-n3a5k9p2bd] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--dbl-surf);
    border: 1px solid var(--dbl-div);
    border-radius: var(--dbl-r);
    box-shadow: var(--dbl-sh-xs);
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.dbl-stat-card:hover[b-n3a5k9p2bd] {
    box-shadow: var(--dbl-sh);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

/* Left colored accent bar */
.dbl-stat-card[b-n3a5k9p2bd]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.dbl-stat--total[b-n3a5k9p2bd]::before    { background: var(--mud-palette-primary); }
.dbl-stat--added[b-n3a5k9p2bd]::before    { background: var(--dbl-added); }
.dbl-stat--modified[b-n3a5k9p2bd]::before { background: var(--dbl-modified); }
.dbl-stat--deleted[b-n3a5k9p2bd]::before  { background: var(--dbl-deleted); }
.dbl-stat--time[b-n3a5k9p2bd]::before     { background: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); }

/* Icon circle */
.dbl-stat-icon[b-n3a5k9p2bd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--dbl-r-sm);
    flex-shrink: 0;
}

.dbl-stat--total    .dbl-stat-icon[b-n3a5k9p2bd] { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); }
.dbl-stat--added    .dbl-stat-icon[b-n3a5k9p2bd] { background: color-mix(in srgb, var(--dbl-added)   10%, transparent); color: var(--dbl-added); }
.dbl-stat--modified .dbl-stat-icon[b-n3a5k9p2bd] { background: color-mix(in srgb, var(--dbl-modified) 10%, transparent); color: var(--dbl-modified); }
.dbl-stat--deleted  .dbl-stat-icon[b-n3a5k9p2bd] { background: color-mix(in srgb, var(--dbl-deleted)  10%, transparent); color: var(--dbl-deleted); }
.dbl-stat--time     .dbl-stat-icon[b-n3a5k9p2bd] { background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent); color: var(--mud-palette-info); }

/* Text */
.dbl-stat-body[b-n3a5k9p2bd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.dbl-stat-val[b-n3a5k9p2bd] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
    white-space: nowrap;
}

.dbl-stat-val--sm[b-n3a5k9p2bd] { font-size: .82rem; }

.dbl-stat-lbl[b-n3a5k9p2bd] {
    font-size: .67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Proportion bar at bottom of card */
.dbl-stat-bar[b-n3a5k9p2bd] {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 3px;
    background: color-mix(in srgb, var(--mud-palette-divider) 40%, transparent);
}

.dbl-stat-bar-fill[b-n3a5k9p2bd] {
    height: 100%;
    width: var(--w, 0%);
    border-radius: 0 2px 2px 0;
    transition: width .6s cubic-bezier(.22,1,.36,1);
}

.dbl-bar--added[b-n3a5k9p2bd]    { background: var(--dbl-added); }
.dbl-bar--modified[b-n3a5k9p2bd] { background: var(--dbl-modified); }
.dbl-bar--deleted[b-n3a5k9p2bd]  { background: var(--dbl-deleted); }

/* ── Grid wrapper ─────────────────────────────────────────────────────────── */
.dbl-grid[b-n3a5k9p2bd] {
    flex: 1;
    min-height: 0;
}
/* /Pages/Dialogs/ApiEnvironmentDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ENVIRONMENT DIALOG
   The same instrument language as the Explorer console: mono keys, hairline
   fields, a rail on every variable row. Tokens are declared on the wrapper —
   never :root, which CSS isolation would rewrite to :root[b-xxx].
   ═══════════════════════════════════════════════════════════════════════════ */

.env-root[b-q9dqrd2ceu] {
    --x-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --x-face: var(--md-sys-color-surface-container-lowest);
    --x-panel: var(--md-sys-color-surface-container-low);
    --x-panel-2: var(--md-sys-color-surface-container);
    --x-ink: var(--md-sys-color-on-surface);
    --x-ink-2: var(--md-sys-color-on-surface-variant);
    --x-line: var(--md-sys-color-outline-variant);
    --x-accent: var(--md-sys-color-primary);
    --x-delete: #BE123C;
    --x-ease: var(--md-sys-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
    --x-fast: 140ms;

    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: min(520px, 78vw);
}

[dark-mode="true"] .env-root[b-q9dqrd2ceu] {
    --x-delete: #FDA4AF;
}

.env-label[b-q9dqrd2ceu] {
    display: block;
    margin-block-end: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--x-ink-2);
}

/* Carries the "required" affordance the MudTextField's Required flag used to give. */
.env-req[b-q9dqrd2ceu] {
    color: var(--x-delete);
    font-size: 8px;
    vertical-align: middle;
}

.env-in[b-q9dqrd2ceu] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: var(--x-face);
    color: var(--x-ink);
    font-family: var(--x-mono);
    font-size: 12px;
    transition: border-color var(--x-fast) var(--x-ease), background var(--x-fast) var(--x-ease);
}

    .env-in[b-q9dqrd2ceu]::placeholder {
        color: var(--x-ink-2);
        opacity: .7;
    }

    .env-in:focus[b-q9dqrd2ceu] {
        outline: none;
        border-color: var(--x-accent);
        background: var(--x-panel);
    }

.env-name[b-q9dqrd2ceu] {
    font-family: inherit;
    font-size: 13px;
}

.env-head[b-q9dqrd2ceu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .env-head[b-q9dqrd2ceu]::after {
        content: '';
        flex: 1 1 auto;
        height: 1px;
        background: var(--x-line);
    }

.env-count[b-q9dqrd2ceu] {
    font-family: var(--x-mono);
    font-size: 10px;
    color: var(--x-ink-2);
}

.env-rows[b-q9dqrd2ceu] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 42vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--x-line) transparent;
}

/* Each variable is a wired row: the rail lights on hover or focus-within, the
   same cue the Explorer's endpoint list uses. */
.env-row[b-q9dqrd2ceu] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    align-items: center;
    gap: 8px;
    padding-inline-start: 10px;
}

    .env-row[b-q9dqrd2ceu]::before {
        content: '';
        position: absolute;
        inset-block: 3px;
        inset-inline-start: 0;
        width: 2px;
        border-radius: 2px;
        background: var(--x-accent);
        opacity: 0;
        transition: opacity var(--x-fast) var(--x-ease);
    }

    .env-row:hover[b-q9dqrd2ceu]::before,
    .env-row:focus-within[b-q9dqrd2ceu]::before {
        opacity: 1;
    }

.env-x[b-q9dqrd2ceu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--x-ink-2);
    cursor: pointer;
    transition: color var(--x-fast) var(--x-ease), background var(--x-fast) var(--x-ease);
}

    .env-x:hover[b-q9dqrd2ceu] {
        color: var(--x-delete);
        background: color-mix(in srgb, var(--x-delete) 12%, transparent);
    }

    .env-x:focus-visible[b-q9dqrd2ceu] {
        outline: 2px solid var(--x-accent);
        outline-offset: -2px;
    }

.env-add[b-q9dqrd2ceu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px dashed var(--x-line);
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    background: transparent;
    color: var(--x-ink-2);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    align-self: flex-start;
    transition: color var(--x-fast) var(--x-ease), border-color var(--x-fast) var(--x-ease);
}

    .env-add:hover[b-q9dqrd2ceu] {
        color: var(--x-ink);
        border-color: var(--x-ink-2);
    }

    .env-add:focus-visible[b-q9dqrd2ceu] {
        outline: 2px solid var(--x-accent);
        outline-offset: 2px;
    }

.env-hint[b-q9dqrd2ceu] {
    font-size: 11px;
    line-height: 1.6;
    color: var(--x-ink-2);
}

    .env-hint code[b-q9dqrd2ceu] {
        font-family: var(--x-mono);
        font-size: 10.5px;
        padding: 1px 4px;
        border-radius: 3px;
        background: var(--x-panel-2);
    }
/* /Pages/Dialogs/JobSchedulesDialog.razor.rz.scp.css */
/* ================================================================
   JobSchedulesDialog.razor.css — weekly schedule grid editor
   ================================================================ */

.jsd-root[b-99pf0gsmce] {
    --jsd-accent:        var(--mud-palette-primary);
    --jsd-accent-soft:   color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --jsd-accent-soft-2: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    --jsd-accent-border: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    --jsd-error:         var(--mud-palette-error);
    --jsd-surface-alt:   var(--mud-palette-background-grey);
    --jsd-text:          var(--mud-palette-text-primary);
    --jsd-text-soft:     var(--mud-palette-text-secondary);
    --jsd-text-faint:    color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
    --jsd-border:        var(--mud-palette-divider);
    --jsd-mono:          ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.jsd-toolbar[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.jsd-toolbar-hint[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--jsd-text-soft);
}

.jsd-toolbar-hint[b-99pf0gsmce]  .mud-icon-root {
    font-size: 1rem !important;
    opacity: 0.7;
}

.jsd-tz-badge[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--jsd-surface-alt);
    border: 1px solid var(--jsd-border);
    font-family: var(--jsd-mono);
    font-size: 0.72rem;
    color: var(--jsd-text-soft);
}

.jsd-tz-badge[b-99pf0gsmce]  .mud-icon-root {
    font-size: 0.9rem !important;
    opacity: 0.7;
}

/* ── Body layout ────────────────────────────────────────────────── */
.jsd-body[b-99pf0gsmce] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.jsd-grid-col[b-99pf0gsmce] {
    flex: 1 1 520px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* ── Grid ───────────────────────────────────────────────────────── */
.jsd-grid-row[b-99pf0gsmce] {
    display: flex;
    gap: 3px;
    align-items: center;
    padding: 2px 6px;
    border-radius: 8px;
}

.jsd-grid-row--header[b-99pf0gsmce] {
    padding: 0 6px;
    margin-bottom: 2px;
}

.jsd-grid-row--everyday[b-99pf0gsmce] {
    background: var(--jsd-accent-soft-2);
}

.jsd-row-label[b-99pf0gsmce] {
    width: 92px;
    flex-shrink: 0;
    font-family: var(--jsd-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--jsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jsd-row-label--everyday[b-99pf0gsmce] {
    font-weight: 700;
    color: var(--jsd-accent);
}

.jsd-hour-tick[b-99pf0gsmce] {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--jsd-mono);
    font-size: 0.6rem;
    color: var(--jsd-text-faint);
}

.jsd-cell[b-99pf0gsmce] {
    all: unset;
    box-sizing: border-box;
    width: 22px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid var(--jsd-border);
    background: var(--jsd-surface-alt);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.jsd-cell:hover[b-99pf0gsmce] {
    border-color: var(--jsd-accent-border);
    transform: scale(1.08);
}

.jsd-cell--on[b-99pf0gsmce] {
    background: var(--jsd-accent) !important;
    border-color: var(--jsd-accent) !important;
}

/* ── Legend ─────────────────────────────────────────────────────── */
.jsd-legend[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    padding: 0 6px;
}

.jsd-legend-item[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--jsd-text-soft);
}

.jsd-legend-dot[b-99pf0gsmce] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}

.jsd-legend-dot--on[b-99pf0gsmce] {
    background: var(--jsd-accent);
}

.jsd-legend-dot--everyday[b-99pf0gsmce] {
    background: var(--jsd-accent-soft-2);
    border: 1px solid var(--jsd-border);
}

/* ── Side panel ─────────────────────────────────────────────────── */
.jsd-side[b-99pf0gsmce] {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 220px;
}

.jsd-panel-label[b-99pf0gsmce] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--jsd-text-soft);
}

.jsd-panel-label--accent[b-99pf0gsmce] {
    color: var(--jsd-accent);
}

/* Next run */
.jsd-next-run[b-99pf0gsmce] {
    border-radius: 12px;
    padding: 14px;
    background: var(--jsd-accent-soft);
    border: 1px solid var(--jsd-accent-border);
}

.jsd-next-run-value[b-99pf0gsmce] {
    font-family: var(--jsd-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--jsd-text);
    margin-top: 6px;
}

.jsd-next-run-empty[b-99pf0gsmce] {
    font-size: 0.78rem;
    color: var(--jsd-text-soft);
    margin-top: 6px;
    line-height: 1.5;
}

/* Chips */
.jsd-chips-col[b-99pf0gsmce] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jsd-chips-header[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jsd-clear-all[b-99pf0gsmce] {
    all: unset;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--jsd-error);
}

.jsd-clear-all:hover[b-99pf0gsmce] {
    text-decoration: underline;
}

.jsd-chips-list[b-99pf0gsmce] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.jsd-chip[b-99pf0gsmce] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--jsd-surface-alt);
    border: 1px solid var(--jsd-border);
}

.jsd-chip-dot[b-99pf0gsmce] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jsd-accent);
    flex-shrink: 0;
}

.jsd-chip-label[b-99pf0gsmce] {
    flex: 1;
    font-family: var(--jsd-mono);
    font-size: 0.74rem;
    color: var(--jsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jsd-chip-remove[b-99pf0gsmce] {
    all: unset;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    padding: 2px;
    color: var(--jsd-text-soft);
}

.jsd-chip-remove:hover[b-99pf0gsmce] {
    color: var(--jsd-error);
}

/* Presets */
.jsd-presets[b-99pf0gsmce] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--jsd-border);
}

.jsd-presets-row[b-99pf0gsmce] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jsd-preset-btn[b-99pf0gsmce] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--jsd-border);
    background: var(--jsd-surface-alt);
    color: var(--jsd-text);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.jsd-preset-btn:hover[b-99pf0gsmce] {
    border-color: var(--jsd-accent-border);
    background: var(--jsd-accent-soft-2);
}
/* /Pages/Dialogs/LookupsDialog.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   LookupsDialog.razor.css
   Uses --mud-palette-* variables for automatic light/dark theme adaptation.
   Dark-mode overrides use [dark-mode="true"] on <html> (set by MudThemeProvider).
────────────────────────────────────────────────────────────────────────── */

/* ── Header ───────────────────────────────────────────────────────────── */

.ld-header[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 16px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ld-icon-wrap[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    flex-shrink: 0;
}

.ld-header-meta[b-5bdjgvadpe] {
    flex: 1;
    min-width: 0;
}

.ld-title[b-5bdjgvadpe] {
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.ld-subtitle[b-5bdjgvadpe] {
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Identity Fields Bar ──────────────────────────────────────────────── */

.ld-fields-bar[b-5bdjgvadpe] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ld-name[b-5bdjgvadpe] { flex: 2 1 0; }
.ld-type[b-5bdjgvadpe] { flex: 2 1 0; }
.ld-sort[b-5bdjgvadpe] { flex: 0 0 110px; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.ld-tabs[b-5bdjgvadpe] {
    border-top: none !important;
}

/* ── Tab Panel ────────────────────────────────────────────────────────── */

.ld-tab-panel[b-5bdjgvadpe] {
    padding: 0;
}

.ld-panel[b-5bdjgvadpe] {
    padding: 20px 20px 28px;
}

/* ── Add Card ─────────────────────────────────────────────────────────── */

.ld-add-card[b-5bdjgvadpe] {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
}

.ld-add-card:focus-within[b-5bdjgvadpe] {
    border-color: var(--mud-palette-primary);
}

.ld-section-label[b-5bdjgvadpe] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.ld-add-row[b-5bdjgvadpe] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.ld-add-select[b-5bdjgvadpe] { flex: 0 0 190px; }
.ld-add-field[b-5bdjgvadpe]  { flex: 1 1 0; min-width: 0; }

.ld-action-btn[b-5bdjgvadpe] {
    flex-shrink: 0;
    margin-bottom: 2px;
    border-radius: 8px !important;
}

/* ── Item List ────────────────────────────────────────────────────────── */

.ld-list[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-row[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.ld-row:hover[b-5bdjgvadpe] {
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-primary);
}

/* ── Key / Locale Badges ──────────────────────────────────────────────── */

.ld-badge[b-5bdjgvadpe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
    white-space: nowrap;
    min-width: 44px;
    text-align: center;
    user-select: none;
}

.ld-badge-primary[b-5bdjgvadpe] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ld-badge-secondary[b-5bdjgvadpe] {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-row-label[b-5bdjgvadpe] {
    flex: 0 0 90px;
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-row-value[b-5bdjgvadpe] {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Empty State ──────────────────────────────────────────────────────── */

.ld-empty[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 24px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.55;
    user-select: none;
}

.ld-empty-icon[b-5bdjgvadpe] {
    font-size: 3rem !important;
    width: 3rem !important;
    height: 3rem !important;
    margin-bottom: 12px;
}

.ld-empty-text[b-5bdjgvadpe] {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* ── Templates ────────────────────────────────────────────────────────── */

.ld-expansions-wrapper[b-5bdjgvadpe] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ld-template-title[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    overflow: hidden;
}

.ld-template-subj[b-5bdjgvadpe] {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.72;
}

.ld-template-body[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 12px;
}

.ld-add-action[b-5bdjgvadpe] {
    display: flex;
    justify-content: flex-end;
}

/* ── Actions Menu ─────────────────────────────────────────────────────── */

.ld-actions-menu[b-5bdjgvadpe] {
    align-self: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Datasource List — mirrors DocumentTemplateDialog's dtd-ds-list-* styles
───────────────────────────────────────────────────────────────────────── */

.ld-ds-list-container[b-5bdjgvadpe] {
    --ld-ds-list-bg:       #fafafa;
    --ld-ds-list-border:   rgba(0, 0, 0, 0.08);
    --ld-ds-card-bg:       #ffffff;
    --ld-ds-card-border:   rgba(0, 0, 0, 0.08);
    --ld-ds-card-shadow:   0 2px 8px rgba(0, 0, 0, 0.04);
    --ld-ds-empty-color:   #adb5bd;
    --ld-ds-num-bg:        #f3f4f6;
    --ld-ds-num-color:     #4b5563;
    --ld-ds-label-color:   #6b7280;
    --ld-ds-icon-color:    #9ca3af;
    --ld-ds-result-bg:     #f0f4ff;
    --ld-ds-result-bd:     rgba(91, 141, 238, 0.2);
    --ld-ds-col-name:      #3b5bdb;
    --ld-ds-col-val:       #495057;
    --ld-ds-error-bg:      #fff5f5;
    --ld-ds-error-bd:      rgba(220, 53, 69, 0.2);
    --ld-ds-error-color:   #c92a2a;

    border: 1px solid var(--ld-ds-list-border);
    border-radius: 12px;
    padding: 18px;
    background: var(--ld-ds-list-bg);
}

html[dark-mode="true"] .ld-ds-list-container[b-5bdjgvadpe] {
    --ld-ds-list-bg:       rgba(255, 255, 255, 0.02);
    --ld-ds-list-border:   rgba(255, 255, 255, 0.06);
    --ld-ds-card-bg:       rgba(255, 255, 255, 0.04);
    --ld-ds-card-border:   rgba(255, 255, 255, 0.08);
    --ld-ds-card-shadow:   0 4px 12px rgba(0, 0, 0, 0.15);
    --ld-ds-empty-color:   #5a5e75;
    --ld-ds-num-bg:        rgba(255, 255, 255, 0.08);
    --ld-ds-num-color:     #a0a4bb;
    --ld-ds-label-color:   #8b8fa8;
    --ld-ds-icon-color:    #6b6f88;
    --ld-ds-result-bg:     rgba(122, 168, 240, 0.08);
    --ld-ds-result-bd:     rgba(122, 168, 240, 0.18);
    --ld-ds-col-name:      #7aa8f0;
    --ld-ds-col-val:       #a0a4bb;
    --ld-ds-error-bg:      rgba(220, 53, 69, 0.08);
    --ld-ds-error-bd:      rgba(220, 53, 69, 0.2);
    --ld-ds-error-color:   #ff6b6b;
}

.ld-ds-list-header[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.ld-ds-list-title[b-5bdjgvadpe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-ds-label-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
}

[b-5bdjgvadpe] .ld-ds-list-title .mud-icon-root {
    font-size: 16px !important;
    color: var(--ld-ds-icon-color);
}

/* Empty state */

.ld-ds-list-empty-state[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed var(--ld-ds-list-border);
    border-radius: 10px;
    background: transparent;
    width: 100%;
}

.ld-ds-empty-icon[b-5bdjgvadpe] {
    font-size: 36px !important;
    color: var(--ld-ds-empty-color);
    margin-bottom: 12px;
}

.ld-ds-list-empty-state p[b-5bdjgvadpe] {
    font-size: 13px;
    color: var(--ld-ds-empty-color);
    margin: 0;
    max-width: 320px;
}

/* Items */

.ld-ds-items[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-ds-item-card[b-5bdjgvadpe] {
    background: var(--ld-ds-card-bg);
    border: 1px solid var(--ld-ds-card-border);
    box-shadow: var(--ld-ds-card-shadow);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ld-ds-item-card:hover[b-5bdjgvadpe] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

html[dark-mode="true"] .ld-ds-item-card:hover[b-5bdjgvadpe] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.ld-ds-item-header[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-ds-item-num[b-5bdjgvadpe] {
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    background: var(--ld-ds-num-bg);
    color: var(--ld-ds-num-color);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ld-ds-item-subject[b-5bdjgvadpe] {
    flex-grow: 1;
    min-width: 200px;
}

[b-5bdjgvadpe] .ld-ds-item-subject .mud-input-control {
    margin-top: 0 !important;
}

.ld-ds-item-actions[b-5bdjgvadpe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ld-ds-item-body[b-5bdjgvadpe] {
    position: relative;
}

/* Column result preview */

.ld-ds-result[b-5bdjgvadpe] {
    border: 1px solid var(--ld-ds-result-bd);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--ld-ds-result-bg);
}

.ld-ds-result-label[b-5bdjgvadpe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ld-ds-label-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 8px;
}

.ld-ds-cols[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ld-ds-col[b-5bdjgvadpe] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

.ld-ds-col-name[b-5bdjgvadpe] {
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ld-ds-col-name);
    min-width: 140px;
    flex-shrink: 0;
}

.ld-ds-col-val[b-5bdjgvadpe] {
    color: var(--ld-ds-col-val);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Error state */

.ld-ds-error[b-5bdjgvadpe] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid var(--ld-ds-error-bd);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--ld-ds-error-bg);
    color: var(--ld-ds-error-color);
    font-size: 12.5px;
    line-height: 1.5;
}

[b-5bdjgvadpe] .ld-ds-error .mud-icon-root {
    font-size: 16px !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Copy To Offices List — mirrors GKRD's dtd-list-wrap ─── */

.ld-list-wrap[b-5bdjgvadpe] {
    --ld-list-bg:       #fafafa;
    --ld-list-border:   rgba(0, 0, 0, 0.08);
    --ld-list-label:    #6b7280;
    --ld-list-icon:     #9ca3af;
    --ld-list-empty:    #adb5bd;
    --ld-list-idx:      #9ca3af;

    border: 1px solid var(--ld-list-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--ld-list-bg);
}

html[dark-mode="true"] .ld-list-wrap[b-5bdjgvadpe] {
    --ld-list-bg:       rgba(255, 255, 255, 0.04);
    --ld-list-border:   rgba(255, 255, 255, 0.08);
    --ld-list-label:    #8b8fa8;
    --ld-list-icon:     #6b6f88;
    --ld-list-empty:    #5a5e75;
    --ld-list-idx:      #6b6f88;
}

.ld-list-label[b-5bdjgvadpe] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ld-list-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

[b-5bdjgvadpe] .ld-list-label .mud-icon-root {
    font-size: 14px !important;
    color: var(--ld-list-icon);
}

.ld-list-items[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.ld-list-index[b-5bdjgvadpe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ld-list-idx);
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.ld-list-empty[b-5bdjgvadpe] {
    font-size: 12px;
    color: var(--ld-list-empty);
    font-style: italic;
    margin: 0;
}

/* ── Dark Mode ────────────────────────────────────────────────────────── */

[dark-mode="true"] .ld-tabs-wrapper[b-5bdjgvadpe] {
    border-color: rgba(255, 255, 255, 0.08);
}

[dark-mode="true"] .ld-add-card[b-5bdjgvadpe] {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

[dark-mode="true"] .ld-add-card:focus-within[b-5bdjgvadpe] {
    border-color: var(--mud-palette-primary);
}

[dark-mode="true"] .ld-row[b-5bdjgvadpe] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

[dark-mode="true"] .ld-row:hover[b-5bdjgvadpe] {
    background: rgba(255, 255, 255, 0.055);
    border-color: var(--mud-palette-primary);
}

[dark-mode="true"] .ld-expansions-wrapper[b-5bdjgvadpe] {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Templates Tab Summary View ───────────────────────────────────────── */

.ld-templates-tab[b-5bdjgvadpe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-template-summary-grid[b-5bdjgvadpe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ld-template-summary-card[b-5bdjgvadpe] {
    position: relative;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.ld-template-summary-card:hover[b-5bdjgvadpe] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

html[dark-mode="true"] .ld-template-summary-card[b-5bdjgvadpe] {
    background: rgba(255, 255, 255, 0.02);
}

.ld-tsc-chips[b-5bdjgvadpe] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.ld-tsc-subject[b-5bdjgvadpe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-tsc-for[b-5bdjgvadpe] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.ld-tsc-delete[b-5bdjgvadpe] {
    position: absolute;
    top: 8px;
    right: 8px;
}

.ld-templates-open-btn[b-5bdjgvadpe] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* /Pages/Dialogs/LookupTemplatesDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   LookupTemplatesDialog.razor.css
   Premium card-grid template manager — MudBlazor palette adaptive,
   dark-mode via html[dark-mode="true"] set by MudThemeProvider.
════════════════════════════════════════════════════════════════════════ */

/* ── Root wrapper ──────────────────────────────────────────────────────── */

.ltd-root[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mud-palette-background);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.ltd-header[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 16px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.ltd-header-icon[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    flex-shrink: 0;
}

[b-d95v4ht25j] .ltd-header-icon .mud-icon-root {
    color: var(--mud-palette-primary);
}

.ltd-header-meta[b-d95v4ht25j] {
    flex: 1;
    min-width: 0;
}

.ltd-header-title[b-d95v4ht25j] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ltd-header-subtitle[b-d95v4ht25j] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltd-header-actions[b-d95v4ht25j] {
    flex-shrink: 0;
}

/* ── Scrollable Body ────────────────────────────────────────────────────── */

.ltd-body[b-d95v4ht25j] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Template Cards Grid ────────────────────────────────────────────────── */

.ltd-grid[b-d95v4ht25j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* ── Individual Card in Grid Mode ────────────────────────────────────────── */

.ltd-card[b-d95v4ht25j] {
    position: relative;
    border-radius: 14px;
    border: 1.5px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ltd-card:hover[b-d95v4ht25j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    border-color: var(--mud-palette-primary);
}

html[dark-mode="true"] .ltd-card[b-d95v4ht25j] {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

/* Accent left borders */
.ltd-card-accent-1[b-d95v4ht25j] { border-left: 4px solid var(--mud-palette-primary); }
.ltd-card-accent-2[b-d95v4ht25j] { border-left: 4px solid var(--mud-palette-secondary); }
.ltd-card-accent-3[b-d95v4ht25j] { border-left: 4px solid var(--mud-palette-tertiary, #6d9eeb); }
.ltd-card-accent-4[b-d95v4ht25j] { border-left: 4px solid var(--mud-palette-warning); }
.ltd-card-accent-5[b-d95v4ht25j] { border-left: 4px solid var(--mud-palette-info); }

.ltd-card-content[b-d95v4ht25j] {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ltd-card-chips[b-d95v4ht25j] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ltd-chip[b-d95v4ht25j] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ltd-chip--locale[b-d95v4ht25j] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.ltd-chip--org[b-d95v4ht25j] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: var(--mud-palette-secondary);
}

.ltd-chip--type[b-d95v4ht25j] {
    background: color-mix(in srgb, var(--mud-palette-tertiary, #6d9eeb) 12%, transparent);
    color: var(--mud-palette-tertiary, #6d9eeb);
}

.ltd-chip--process[b-d95v4ht25j] {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: var(--mud-palette-info);
}

.ltd-card-title-row[b-d95v4ht25j] {
    flex: 1;
}

.ltd-card-subject[b-d95v4ht25j] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ltd-card-subject--empty[b-d95v4ht25j] {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    font-weight: 400;
}

.ltd-card-meta-info[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 10px;
}

.ltd-card-info-item[b-d95v4ht25j] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    gap: 4px;
}

.ltd-info-label[b-d95v4ht25j] {
    font-weight: 500;
}

.ltd-info-value[b-d95v4ht25j] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ltd-card-stats[b-d95v4ht25j] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ltd-stat-badge[b-d95v4ht25j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    padding: 3px 8px;
    border-radius: 6px;
}

html[dark-mode="true"] .ltd-stat-badge[b-d95v4ht25j] {
    background: rgba(255,255,255,0.06);
}

[b-d95v4ht25j] .ltd-stat-badge .mud-icon-root {
    font-size: 13px !important;
}

.ltd-card-actions-overlay[b-d95v4ht25j] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 2px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ltd-card:hover .ltd-card-actions-overlay[b-d95v4ht25j] {
    opacity: 1;
    transform: scale(1);
}

html[dark-mode="true"] .ltd-card-actions-overlay[b-d95v4ht25j] {
    background: var(--mud-palette-background-gray);
}

/* ── Add Template Dotted Card ────────────────────────────────────────────── */

.ltd-add-card-btn[b-d95v4ht25j] {
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ltd-add-card-btn:hover[b-d95v4ht25j] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.ltd-add-card-inner[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--mud-palette-text-secondary);
}

.ltd-add-card-btn:hover .ltd-add-card-inner[b-d95v4ht25j] {
    color: var(--mud-palette-primary);
}

.ltd-add-icon-wrap[b-d95v4ht25j] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ltd-add-card-btn:hover .ltd-add-icon-wrap[b-d95v4ht25j] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ltd-add-text[b-d95v4ht25j] {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Form Edit View ──────────────────────────────────────────────────────── */

.ltd-edit-form[b-d95v4ht25j] {
    animation: ltd-fade-in-b-d95v4ht25j 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ltd-form-actions-bar[b-d95v4ht25j] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 16px;
}

/* ── Sections (Copy To Offices, Datasources, Editor) ─────────────────────── */

.ltd-section[b-d95v4ht25j] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--mud-palette-background-gray);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html[dark-mode="true"] .ltd-section[b-d95v4ht25j] {
    background: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.07);
}

.ltd-section--editor[b-d95v4ht25j] {
    background: transparent;
    border: none;
    padding: 0;
}

.ltd-section-header[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ltd-section-icon[b-d95v4ht25j] {
    font-size: 15px !important;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

[b-d95v4ht25j] .ltd-section-header .mud-icon-root {
    font-size: 15px !important;
    color: var(--mud-palette-text-secondary);
}

.ltd-section-title[b-d95v4ht25j] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Offices list ────────────────────────────────────────────────────────── */

.ltd-offices[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ltd-office-row[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ltd-office-num[b-d95v4ht25j] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-disabled);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Datasource Cards ────────────────────────────────────────────────────── */

.ltd-ds-list[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ltd-ds-card[b-d95v4ht25j] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.18s ease;
}

.ltd-ds-card:hover[b-d95v4ht25j] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

html[dark-mode="true"] .ltd-ds-card[b-d95v4ht25j] {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.ltd-ds-card-header[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ltd-ds-num[b-d95v4ht25j] {
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ltd-ds-subject[b-d95v4ht25j] {
    flex: 1;
    min-width: 0;
}

[b-d95v4ht25j] .ltd-ds-subject .mud-input-control {
    margin-top: 0 !important;
}

.ltd-ds-actions[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ltd-ds-card-body[b-d95v4ht25j] { }

/* ── DS result / error ───────────────────────────────────────────────────── */

.ltd-ds-empty[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    color: var(--mud-palette-text-disabled);
    text-align: center;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 8px;
}

.ltd-ds-empty-icon[b-d95v4ht25j] {
    font-size: 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 8px;
}

.ltd-ds-empty p[b-d95v4ht25j] {
    font-size: 12.5px;
    margin: 0;
}

.ltd-ds-result[b-d95v4ht25j] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.ltd-ds-result-label[b-d95v4ht25j] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 8px;
}

.ltd-ds-cols[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ltd-ds-col[b-d95v4ht25j] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.ltd-ds-col-name[b-d95v4ht25j] {
    font-family: 'Consolas', 'SF Mono', monospace;
    font-weight: 700;
    color: var(--mud-palette-info);
    min-width: 120px;
    flex-shrink: 0;
}

.ltd-ds-col-val[b-d95v4ht25j] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltd-ds-error[b-d95v4ht25j] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    color: var(--mud-palette-error);
    font-size: 12.5px;
    line-height: 1.5;
}

[b-d95v4ht25j] .ltd-ds-error .mud-icon-root {
    font-size: 16px !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */

.ltd-empty-state[b-d95v4ht25j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
    text-align: center;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 16px;
    background: var(--mud-palette-background-gray);
    animation: ltd-fade-in-b-d95v4ht25j 0.4s ease;
}

html[dark-mode="true"] .ltd-empty-state[b-d95v4ht25j] {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
}

.ltd-empty-icon-wrap[b-d95v4ht25j] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

[b-d95v4ht25j] .ltd-empty-icon-wrap .mud-icon-root {
    font-size: 28px !important;
    color: var(--mud-palette-primary);
}

.ltd-empty-title[b-d95v4ht25j] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 6px;
}

.ltd-empty-hint[b-d95v4ht25j] {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ltd-empty-small[b-d95v4ht25j] {
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    margin: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ltd-footer[b-d95v4ht25j] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    flex-shrink: 0;
}

html[dark-mode="true"] .ltd-footer[b-d95v4ht25j] {
    background: rgba(255,255,255,0.02);
}

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes ltd-fade-in-b-d95v4ht25j {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Report Table Cards ──────────────────────────────────────────────────── */

.ltd-tbl-card[b-d95v4ht25j] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.18s ease;
}

.ltd-tbl-card:hover[b-d95v4ht25j] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

html[dark-mode="true"] .ltd-tbl-card[b-d95v4ht25j] {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.ltd-tbl-top[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ltd-tbl-name[b-d95v4ht25j] {
    font-family: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
    font-weight: 600;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.ltd-tbl-sub[b-d95v4ht25j] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.ltd-tbl-acts[b-d95v4ht25j] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The strip is the column layout at its real widths — a bad layout is visible here without
   opening the designer. Hidden columns collapse to zero width but keep a dashed marker. */
.ltd-tbl-strip[b-d95v4ht25j] {
    display: flex;
    gap: 3px;
    block-size: 26px;
}

.ltd-tbl-seg[b-d95v4ht25j] {
    display: flex;
    align-items: center;
    padding-inline: 7px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    white-space: nowrap;
}

.ltd-tbl-seg-hidden[b-d95v4ht25j] {
    opacity: 0.45;
    border-style: dashed;
}

.ltd-tbl-sql[b-d95v4ht25j] {
    font-family: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    padding: 7px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/Dialogs/OIDCApplicationsDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════
   OIDCApplicationsDialog  ·  Soft & Clean UI
   All colours reference MudBlazor CSS vars so dark/light mode
   is inherited automatically from MudThemeProvider.
   ════════════════════════════════════════════════════════════ */

/* ── Root wrapper & layout ──────────────────────────────── */
.dlg-root[b-j4n6r6efzw] {
    --dlg-border:        var(--mud-palette-lines-default);
    --dlg-surface:       var(--mud-palette-surface);
    --dlg-bg:            var(--mud-palette-background);
    --dlg-text:          var(--mud-palette-text-primary);
    --dlg-text-soft:     var(--mud-palette-text-secondary);
    --dlg-radius:        10px;
    --dlg-mono:          'Cascadia Code', 'Fira Code', ui-monospace, monospace;

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 4px;
}

/* ── Section card ───────────────────────────────────────── */
.dlg-section[b-j4n6r6efzw] {
    border: 1px solid var(--dlg-border);
    border-radius: var(--dlg-radius);
    overflow: hidden;
    background: var(--dlg-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.18s ease;
}

.dlg-section:focus-within[b-j4n6r6efzw] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* ── Section header ─────────────────────────────────────── */
.dlg-section-hd[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dlg-text-soft);
    background: color-mix(in srgb, var(--dlg-bg) 55%, transparent);
    border-bottom: 1px solid var(--dlg-border);
    user-select: none;
}

[b-j4n6r6efzw] .dlg-section-icon {
    opacity: 0.55;
    flex-shrink: 0;
}

.dlg-section-hd-actions[b-j4n6r6efzw] {
    margin-left: auto;
    display: flex;
    gap: 0;
}

/* ── Section body ───────────────────────────────────────── */
.dlg-section-bd[b-j4n6r6efzw] {
    padding: 14px 16px;
}

.dlg-section-bd--compact[b-j4n6r6efzw] {
    padding: 10px 12px;
}

/* ── Badges ─────────────────────────────────────────────── */
.dlg-badge[b-j4n6r6efzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dlg-border) 80%, transparent);
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--dlg-text-soft);
}

.dlg-badge--primary[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.dlg-badge--secondary[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: var(--mud-palette-secondary);
}

/* ── Action mini-buttons ────────────────────────────────── */
[b-j4n6r6efzw] .dlg-action-btn {
    min-width: 0 !important;
    padding: 1px 8px !important;
    font-size: 0.7rem !important;
    height: 22px !important;
    line-height: 1 !important;
}

/* ── Radio selection groups (Client/Consent Type) ──────── */
.dlg-radio-group[b-j4n6r6efzw] {
    border: 1px solid var(--dlg-border);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.dlg-radio-group-label[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dlg-text-soft);
    opacity: 0.7;
    border-bottom: 1px solid var(--dlg-border);
    background: color-mix(in srgb, var(--dlg-bg) 45%, transparent);
    user-select: none;
}

.dlg-radio-card[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid var(--dlg-border);
    transition: background 0.12s ease;
    cursor: pointer;
}

.dlg-radio-card:last-child[b-j4n6r6efzw] {
    border-bottom: none;
}

.dlg-radio-card:hover[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.dlg-radio-card--primary[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) !important;
}

.dlg-radio-card--warn[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent) !important;
}

.dlg-radio-card--info[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-info) 7%, transparent) !important;
}

.dlg-radio-body[b-j4n6r6efzw] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.dlg-radio-title[b-j4n6r6efzw] {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.dlg-radio-sub[b-j4n6r6efzw] {
    font-size: 0.67rem;
    opacity: 0.48;
    line-height: 1.25;
}

/* ── URI panels ─────────────────────────────────────────── */
.dlg-uri-panel[b-j4n6r6efzw] {
    border: 1px solid var(--dlg-border);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dlg-uri-panel-hd[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--dlg-border);
    background: color-mix(in srgb, var(--dlg-bg) 45%, transparent);
    user-select: none;
}

.dlg-uri-panel--success .dlg-uri-panel-hd[b-j4n6r6efzw] {
    color: var(--mud-palette-success);
}

.dlg-uri-panel--info .dlg-uri-panel-hd[b-j4n6r6efzw] {
    color: var(--mud-palette-info);
}

.dlg-count[b-j4n6r6efzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 15%, transparent);
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 1px;
}

.dlg-uri-panel-bd[b-j4n6r6efzw] {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.dlg-uri-list[b-j4n6r6efzw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dlg-border) transparent;
}

.dlg-uri-row[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid var(--dlg-border);
    background: color-mix(in srgb, var(--dlg-bg) 55%, transparent);
    font-size: 0.72rem;
    transition: border-color 0.12s ease;
    cursor: default;
}

.dlg-uri-row:hover[b-j4n6r6efzw] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--dlg-border));
}

.dlg-uri-row--editing[b-j4n6r6efzw] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.dlg-uri-text[b-j4n6r6efzw] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--dlg-mono);
    font-size: 0.69rem;
    opacity: 0.72;
}

.dlg-uri-text--clickable[b-j4n6r6efzw] {
    cursor: text;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.dlg-uri-text--clickable:hover[b-j4n6r6efzw] {
    opacity: 1;
    color: var(--mud-palette-primary);
}

.dlg-uri-input[b-j4n6r6efzw] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--dlg-mono);
    font-size: 0.69rem;
    color: var(--mud-palette-text-primary);
    padding: 0;
    line-height: inherit;
}

[b-j4n6r6efzw] .dlg-uri-del {
    margin: -3px -5px -3px auto !important;
    opacity: 0.38;
    transition: opacity 0.12s ease;
}

[b-j4n6r6efzw] .dlg-uri-del:hover {
    opacity: 1;
}

.dlg-empty[b-j4n6r6efzw] {
    padding: 10px 4px;
    font-size: 0.72rem;
    opacity: 0.32;
    font-style: italic;
    text-align: center;
}

/* ── Scopes section ─────────────────────────────────────── */
.dlg-scope-sublabel[b-j4n6r6efzw] {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dlg-text-soft);
    opacity: 0.6;
    margin-bottom: 8px;
}

.dlg-scope-chips[b-j4n6r6efzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

/* Native <button> – CSS isolation applies directly */
.dlg-scope-chip[b-j4n6r6efzw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px 5px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--dlg-border);
    background: transparent;
    color: var(--dlg-text-soft);
    font-size: 0.74rem;
    font-weight: 500;
    font-family: var(--dlg-mono);
    cursor: pointer;
    transition: border-color 0.14s, color 0.14s, background 0.14s, box-shadow 0.14s;
    line-height: 1;
    outline: none;
    user-select: none;
}

.dlg-scope-chip:hover[b-j4n6r6efzw] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--dlg-border));
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.dlg-scope-chip--on[b-j4n6r6efzw] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.dlg-scope-dot[b-j4n6r6efzw] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
    transition: opacity 0.14s;
    flex-shrink: 0;
}

.dlg-scope-chip--on .dlg-scope-dot[b-j4n6r6efzw] {
    opacity: 1;
}

.dlg-scope-divider[b-j4n6r6efzw] {
    height: 1px;
    background: var(--dlg-border);
    margin: 14px 0 10px;
    opacity: 0.6;
}

[b-j4n6r6efzw] .dlg-scope-input {
    margin-bottom: 8px;
}

.dlg-scope-custom-list[b-j4n6r6efzw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.dlg-scope-custom-row[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, var(--dlg-border));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    transition: border-color 0.12s ease;
}

.dlg-scope-custom-row:hover[b-j4n6r6efzw] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--dlg-border));
}

.dlg-scope-custom-name[b-j4n6r6efzw] {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-family: var(--dlg-mono);
    flex-shrink: 0;
}

.dlg-scope-custom-value[b-j4n6r6efzw] {
    font-size: 0.63rem;
    opacity: 0.38;
    font-family: var(--dlg-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

[b-j4n6r6efzw] .dlg-scope-custom-del {
    margin-left: auto !important;
    opacity: 0.38;
    transition: opacity 0.12s ease;
    flex-shrink: 0;
}

[b-j4n6r6efzw] .dlg-scope-custom-del:hover {
    opacity: 1;
}

/* ── Requirements scrollable list ───────────────────────── */
.dlg-perm-scroll[b-j4n6r6efzw] {
    max-height: 230px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dlg-border) transparent;
    border: 1px solid var(--dlg-border);
    border-radius: 7px;
    margin-bottom: 6px;
}

/* ── Permissions non-scrollable 5-col grid ──────────────── */
.dlg-perm-grid[b-j4n6r6efzw] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-bottom: 2px;
}

@media (max-width: 1200px) {
    .dlg-perm-grid[b-j4n6r6efzw] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .dlg-perm-grid[b-j4n6r6efzw] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .dlg-perm-grid[b-j4n6r6efzw] { grid-template-columns: repeat(2, 1fr); }
}

.dlg-group-hd[b-j4n6r6efzw] {
    padding: 4px 10px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--dlg-surface));
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    user-select: none;
    margin-top: 4px;
}

.dlg-group-hd:first-child[b-j4n6r6efzw] {
    margin-top: 0;
}

.dlg-group-hd--flat[b-j4n6r6efzw] {
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    margin-bottom: 4px;
}

/* Native <label> – CSS isolation applies directly */
.dlg-check-row[b-j4n6r6efzw] {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s ease;
    gap: 1px;
    min-width: 0;
}

.dlg-check-row:hover[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.dlg-check-row--on[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.dlg-check-row--sec[b-j4n6r6efzw] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, transparent);
}

.dlg-check-labels[b-j4n6r6efzw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dlg-check-title[b-j4n6r6efzw] {
    font-size: 0.77rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlg-check-sub[b-j4n6r6efzw] {
    font-size: 0.59rem;
    opacity: 0.38;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--dlg-mono);
}

/* ── Active requirement chips ───────────────────────────── */
.dlg-active-chips[b-j4n6r6efzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
/* /Pages/Dialogs/OrganizationDialog.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   OrganizationDialog.razor.css
   Uses --mud-palette-* variables for automatic light/dark theme adaptation.
   Dark-mode overrides use [dark-mode="true"] on <html> (set by MudThemeProvider).
────────────────────────────────────────────────────────────────────────── */

/* ── Header ───────────────────────────────────────────────────────────── */

.od-header[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 16px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.od-icon-wrap[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    flex-shrink: 0;
}

.od-header-meta[b-ou84m3orhf] {
    flex: 1;
    min-width: 0;
}

.od-title[b-ou84m3orhf] {
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.od-subtitle[b-ou84m3orhf] {
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-inactive-chip[b-ou84m3orhf] {
    flex-shrink: 0;
}

/* ── Tabs Wrapper (SoftMaxTabs) ─────────────────────────────────────── */

/* Remove default padding from SoftMaxTabs panel area */
.od-tab-panel[b-ou84m3orhf] {
    padding: 0;
}

/* ── Section Divider + Label ──────────────────────────────────────────── */

.od-section-divider[b-ou84m3orhf] {
    margin: 4px 0 6px !important;
}

.od-section-label[b-ou84m3orhf] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 14px;
    margin-top: 8px;
}

/* ── Logo Picker ─────────────────────────────────────────────────────── */

.od-logo-picker[b-ou84m3orhf] {
    display: flex;
}

.od-logo-preview[b-ou84m3orhf] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 108px;
    height: 108px;
    padding: 10px;
    border-radius: 14px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.od-logo-preview:hover[b-ou84m3orhf] {
    border-color: var(--mud-palette-primary);
}

.od-logo-img[b-ou84m3orhf] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.od-logo-hint[b-ou84m3orhf] {
    color: var(--mud-palette-text-secondary);
    text-align: center;
    line-height: 1.35;
    padding: 0 2px;
}

.od-logo-remove-wrap[b-ou84m3orhf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, black 45%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
    border-radius: 13px;
}

.od-logo-preview:hover .od-logo-remove-wrap[b-ou84m3orhf] {
    opacity: 1;
}

.od-logo-remove-btn.mud-icon-button[b-ou84m3orhf] {
    color: white !important;
}

.od-logo-loading[b-ou84m3orhf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    border-radius: 13px;
}

/* ── Toggle Cards (checkboxes) ────────────────────────────────────────── */

.od-toggle-card[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    min-height: 52px;
    cursor: pointer;
    user-select: none;
}

.od-toggle-card:hover[b-ou84m3orhf] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.od-toggle-card--warn[b-ou84m3orhf] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 35%, var(--mud-palette-divider));
}

.od-toggle-card--warn:hover[b-ou84m3orhf] {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, var(--mud-palette-surface));
}

/* ── Locale Panels ────────────────────────────────────────────────────── */

/* Outer container — stacked cards with breathing room */
.od-locale-panels[b-ou84m3orhf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Override MudBlazor panel-group border */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* One locale card */
.od-locale-panel[b-ou84m3orhf] {
    border-radius: 14px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    background: var(--mud-palette-surface) !important;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    margin-bottom: 0 !important;
}

.od-locale-panel:hover[b-ou84m3orhf] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-divider)) !important;
    box-shadow: 0 3px 16px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent),
                0 1px 4px color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    transform: translateY(-1px);
}

/* Header row */
.od-locale-title[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 2px 0;
}

/* Initials badge — solid gradient pill */
.od-locale-badge[b-ou84m3orhf] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(
        140deg,
        var(--mud-palette-primary) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 65%, var(--mud-palette-secondary)) 100%
    );
    color: var(--mud-palette-primary-text);
    font-size: 11px;
    font-weight: 800;
    font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

/* Stacked name + key */
.od-locale-info[b-ou84m3orhf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.od-locale-name[b-ou84m3orhf] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-locale-key[b-ou84m3orhf] {
    font-size: 10px;
    font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

/* Fill-status dots */
.od-locale-dots[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding-right: 4px;
}

.od-locale-dot[b-ou84m3orhf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.od-locale-dot--filled[b-ou84m3orhf] {
    background: var(--mud-palette-success);
    box-shadow: 0 0 5px color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
}

.od-locale-dot--empty[b-ou84m3orhf] {
    background: var(--mud-palette-divider);
}

/* Expanded content area */
.od-locale-content[b-ou84m3orhf] {
    padding: 8px 2px 12px;
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── Custom Fields ────────────────────────────────────────────────────── */

/* ── Custom Fields — Soft & Modern Redesign ───────────────────────────── */

.od-cf-add-card[b-ou84m3orhf] {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.od-cf-add-card:focus-within[b-ou84m3orhf] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-divider));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.od-cf-add-header[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.od-cf-add-title[b-ou84m3orhf] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.od-cf-add-inputs[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.od-cf-input-group[b-ou84m3orhf] {
    flex: 1 1 180px;
    min-width: 150px;
}

.od-cf-add-btn-wrap[b-ou84m3orhf] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* List Header */
.od-cf-list-header[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.od-cf-count-badge[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
}

.od-cf-search-wrap[b-ou84m3orhf] {
    width: 200px;
}

.od-cf-filter-input .mud-input-outlined[b-ou84m3orhf] {
    border-radius: 8px !important;
}

/* Fields Grid & Cards */
.od-cf-fields-grid[b-ou84m3orhf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.od-cf-item-card[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 8px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.od-cf-item-card:hover[b-ou84m3orhf] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    transform: translateY(-1px);
}

.od-cf-key-badge[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    flex-shrink: 0;
    max-width: 300px;
}

.od-cf-key-icon[b-ou84m3orhf] {
    font-size: 14px !important;
    opacity: 0.8;
}

.od-cf-key-text[b-ou84m3orhf] {
    font-size: 0.78rem;
    font-weight: 700;
    font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-cf-val-box[b-ou84m3orhf] {
    flex: 1 1 0;
    min-width: 0;
}

.od-cf-val-input-field .mud-input[b-ou84m3orhf] {
    font-size: 0.875rem !important;
    color: var(--mud-palette-text-primary) !important;
}

.od-cf-del-btn[b-ou84m3orhf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

.od-cf-del-btn:hover[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    color: var(--mud-palette-error);
}

/* Empty State Card */
.od-cf-empty-card[b-ou84m3orhf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    border-radius: 16px;
    border: 1px dashed var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 50%, var(--mud-palette-surface));
    margin-top: 8px;
}

.od-cf-empty-icon-ring[b-ou84m3orhf] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.od-cf-empty-title[b-ou84m3orhf] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.od-cf-empty-sub[b-ou84m3orhf] {
    max-width: 360px;
    color: var(--mud-palette-text-secondary);
}

/* Dark Mode Overrides */
[dark-mode="true"] .od-icon-wrap[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

[dark-mode="true"] .od-toggle-card[b-ou84m3orhf] {
    background: var(--mud-palette-surface);
}

[dark-mode="true"] .od-toggle-card:hover[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

[dark-mode="true"] .od-locale-badge[b-ou84m3orhf] {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

[dark-mode="true"] .od-cf-add-card[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

[dark-mode="true"] .od-cf-key-badge[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

[dark-mode="true"] .od-cf-count-badge[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

[dark-mode="true"] .od-cf-item-card:hover[b-ou84m3orhf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}
/* /Pages/Dialogs/PasswordRevealDialog.razor.rz.scp.css */
/* ── Password reveal dialog ───────────────────────────────────────────────── */
.prd-root[b-vfk7buam0y] {
    --prd-r: 10px;
    --prd-div: color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    --prd-surf: color-mix(in srgb, var(--mud-palette-background-gray) 45%, var(--mud-palette-surface));
    --prd-warn-soft: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[dark-mode="true"] .prd-root[b-vfk7buam0y] {
    --prd-surf: color-mix(in srgb, var(--mud-palette-background-gray) 35%, var(--mud-palette-surface));
    --prd-warn-soft: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* ── Warning banner ───────────────────────────────────────────────────────── */
.prd-banner[b-vfk7buam0y] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--prd-r);
    background: var(--prd-warn-soft);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
    border-left-width: 3px;
    color: var(--mud-palette-warning);
}

.prd-banner-text[b-vfk7buam0y] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.prd-banner-title[b-vfk7buam0y] {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--mud-palette-text-primary);
}

.prd-banner-sub[b-vfk7buam0y] {
    font-size: .75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

/* ── Target summary ───────────────────────────────────────────────────────── */
.prd-target[b-vfk7buam0y] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.prd-label[b-vfk7buam0y] {
    flex: 0 0 116px;
    font-size: .67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
}

.prd-value[b-vfk7buam0y] {
    font-size: .85rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

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

/* ── Key entry / revealed secret ──────────────────────────────────────────── */
.prd-field[b-vfk7buam0y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prd-secret[b-vfk7buam0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--prd-r);
    background: var(--prd-surf);
    border: 1px solid var(--prd-div);
}

.prd-secret-value[b-vfk7buam0y] {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    letter-spacing: .04em;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}

.prd-hint[b-vfk7buam0y] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.prd-alert[b-vfk7buam0y] {
    border-radius: var(--prd-r);
}
/* /Pages/Dialogs/ReportOrganizationsBatchDialog.razor.rz.scp.css */
/* ================================================================
   ReportOrganizationsBatchDialog.razor.css — Batch Org Assignment Panel
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────────── */
.robd-root[b-v1se70e5iw] {
    --robd-accent:      var(--mud-palette-warning);
    --robd-accent-soft: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    --robd-accent-h:    color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    --robd-surface:     var(--mud-palette-surface);
    --robd-text:        var(--mud-palette-text-primary);
    --robd-text-soft:   var(--mud-palette-text-secondary);
    --robd-border:      var(--mud-palette-divider);
    --robd-r:           10px;
    --robd-r-sm:        6px;
    /* Layout */
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    background: var(--robd-surface);
    border-radius: var(--robd-r);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────── */
.robd-header[b-v1se70e5iw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, var(--robd-accent-soft) 0%, transparent 70%);
    border-bottom: 1px solid var(--robd-border);
    flex-shrink: 0;
}

.robd-header-icon-wrap[b-v1se70e5iw] {
    width: 34px;
    height: 34px;
    border-radius: var(--robd-r-sm);
    background: var(--robd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-v1se70e5iw] .robd-header-icon-wrap .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--robd-accent) !important;
}

.robd-header-info[b-v1se70e5iw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.robd-title[b-v1se70e5iw] {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--robd-text);
    letter-spacing: 0.01em;
}

.robd-sub[b-v1se70e5iw] {
    font-size: 0.68rem;
    color: var(--robd-text-soft);
}

[b-v1se70e5iw] .robd-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--robd-r-sm) !important;
    flex-shrink: 0;
}

/* ── Mode bar ────────────────────────────────────────────────────── */
.robd-mode-bar[b-v1se70e5iw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px 0;
    flex-shrink: 0;
}

.robd-mode[b-v1se70e5iw] {
    all: unset;
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    border-radius: var(--robd-r-sm);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--robd-text-soft);
    background: color-mix(in srgb, var(--robd-text-soft) 8%, transparent);
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.robd-mode:hover[b-v1se70e5iw] {
    background: var(--robd-accent-soft);
    color: var(--robd-text);
}

.robd-mode--active[b-v1se70e5iw] {
    background: var(--robd-accent-soft) !important;
    color: var(--robd-accent) !important;
    font-weight: 650;
    border-color: var(--robd-accent-h) !important;
}

/* ── Body ───────────────────────────────────────────────────────── */
.robd-body[b-v1se70e5iw] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.robd-hint[b-v1se70e5iw] {
    color: var(--robd-text-soft);
    font-size: 0.82rem;
}

.robd-loading[b-v1se70e5iw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 0;
    color: var(--robd-text-soft);
}

.robd-loading-text[b-v1se70e5iw] {
    font-size: 0.8rem;
}

.robd-selected-info[b-v1se70e5iw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    border-radius: var(--robd-r-sm);
    font-size: 0.8rem;
    color: var(--robd-text);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.robd-footer[b-v1se70e5iw] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--robd-border);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    flex-shrink: 0;
}

[b-v1se70e5iw] .robd-save-btn {
    flex: 1;
}

[b-v1se70e5iw] .robd-cancel-btn {
    flex-shrink: 0;
}
/* /Pages/Dialogs/ReportOrganizationsDialog.razor.rz.scp.css */
/* ================================================================
   ReportOrganizationsDialog.razor.css — Organization Assignment Panel
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────────── */
.rod-root[b-ks7vjiovh8] {
    --rod-accent:      var(--mud-palette-warning);
    --rod-accent-soft: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    --rod-accent-h:    color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    --rod-surface:     var(--mud-palette-surface);
    --rod-text:        var(--mud-palette-text-primary);
    --rod-text-soft:   var(--mud-palette-text-secondary);
    --rod-border:      var(--mud-palette-divider);
    --rod-r:           10px;
    --rod-r-sm:        6px;
    /* Layout */
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    background: var(--rod-surface);
    border-radius: var(--rod-r);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────── */
.rod-header[b-ks7vjiovh8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, var(--rod-accent-soft) 0%, transparent 70%);
    border-bottom: 1px solid var(--rod-border);
    flex-shrink: 0;
}

.rod-header-icon-wrap[b-ks7vjiovh8] {
    width: 34px;
    height: 34px;
    border-radius: var(--rod-r-sm);
    background: var(--rod-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-ks7vjiovh8] .rod-header-icon-wrap .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--rod-accent) !important;
}

.rod-header-info[b-ks7vjiovh8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rod-title[b-ks7vjiovh8] {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--rod-text);
    letter-spacing: 0.01em;
}

.rod-sub[b-ks7vjiovh8] {
    font-size: 0.68rem;
    color: var(--rod-text-soft);
}

.rod-header-badge[b-ks7vjiovh8] {
    flex-shrink: 0;
}

[b-ks7vjiovh8] .rod-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rod-r-sm) !important;
    flex-shrink: 0;
}

/* ── Body ───────────────────────────────────────────────────────── */
.rod-body[b-ks7vjiovh8] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.rod-hint[b-ks7vjiovh8] {
    color: var(--rod-text-soft);
    font-size: 0.82rem;
}

.rod-loading[b-ks7vjiovh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 0;
    color: var(--rod-text-soft);
}

.rod-loading-text[b-ks7vjiovh8] {
    font-size: 0.8rem;
}

.rod-selected-info[b-ks7vjiovh8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    border-radius: var(--rod-r-sm);
    font-size: 0.8rem;
    color: var(--rod-text);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.rod-footer[b-ks7vjiovh8] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--rod-border);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    flex-shrink: 0;
}

[b-ks7vjiovh8] .rod-save-btn {
    flex: 1;
}

[b-ks7vjiovh8] .rod-cancel-btn {
    flex-shrink: 0;
}
/* /Pages/Dialogs/ReportRolesBatchDialog.razor.rz.scp.css */
/* ================================================================
   ReportRolesBatchDialog.razor.css — Batch Role Assignment Panel
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────────── */
.rrbd-root[b-0o1am9to2x] {
    --rrbd-accent:       var(--mud-palette-primary);
    --rrbd-accent-soft:  color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --rrbd-accent-h:     color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    --rrbd-success:      var(--mud-palette-success);
    --rrbd-success-soft: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --rrbd-error:        var(--mud-palette-error);
    --rrbd-error-soft:   color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --rrbd-surface:      var(--mud-palette-surface);
    --rrbd-text:         var(--mud-palette-text-primary);
    --rrbd-text-soft:    var(--mud-palette-text-secondary);
    --rrbd-border:       var(--mud-palette-divider);
    --rrbd-r:            10px;
    --rrbd-r-sm:         6px;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    background: var(--rrbd-surface);
    border-radius: var(--rrbd-r);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────── */
.rrbd-header[b-0o1am9to2x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, var(--rrbd-accent-soft) 0%, transparent 70%);
    border-bottom: 1px solid var(--rrbd-border);
    flex-shrink: 0;
}

.rrbd-header-icon-wrap[b-0o1am9to2x] {
    width: 34px;
    height: 34px;
    border-radius: var(--rrbd-r-sm);
    background: var(--rrbd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-0o1am9to2x] .rrbd-header-icon-wrap .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--rrbd-accent) !important;
}

.rrbd-header-info[b-0o1am9to2x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rrbd-title[b-0o1am9to2x] {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--rrbd-text);
    letter-spacing: 0.01em;
}

.rrbd-sub[b-0o1am9to2x] {
    font-size: 0.68rem;
    color: var(--rrbd-text-soft);
}

[b-0o1am9to2x] .rrbd-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rrbd-r-sm) !important;
    flex-shrink: 0;
}

/* ── Mode toggle ─────────────────────────────────────────────────── */
.rrbd-mode-bar[b-0o1am9to2x] {
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
    flex-shrink: 0;
}

.rrbd-mode[b-0o1am9to2x] {
    all: unset;
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border-radius: var(--rrbd-r-sm);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rrbd-text-soft);
    background: color-mix(in srgb, var(--rrbd-text) 4%, transparent);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.rrbd-mode:hover[b-0o1am9to2x] {
    background: var(--rrbd-accent-soft);
    color: var(--rrbd-text);
}

.rrbd-mode--active[b-0o1am9to2x] {
    background: var(--rrbd-accent-soft) !important;
    color: var(--rrbd-accent) !important;
    font-weight: 650;
    border-color: var(--rrbd-accent-h) !important;
}

/* ── Search ─────────────────────────────────────────────────────── */
.rrbd-search-wrap[b-0o1am9to2x] {
    padding: 10px 14px 0;
    flex-shrink: 0;
}

[b-0o1am9to2x] .rrbd-search-field .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--rrbd-border) !important;
    border-radius: var(--rrbd-r-sm) !important;
}

[b-0o1am9to2x] .rrbd-search-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--rrbd-accent) !important;
}

/* ── Role List ───────────────────────────────────────────────────── */
.rrbd-list[b-0o1am9to2x] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 200px;
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: var(--rrbd-border) transparent;
}

.rrbd-list[b-0o1am9to2x]::-webkit-scrollbar { width: 4px; }
.rrbd-list[b-0o1am9to2x]::-webkit-scrollbar-track { background: transparent; }
.rrbd-list[b-0o1am9to2x]::-webkit-scrollbar-thumb { background: var(--rrbd-border); border-radius: 4px; }

/* ── Role Row ────────────────────────────────────────────────────── */
.rrbd-role-row[b-0o1am9to2x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rrbd-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
    user-select: none;
}

.rrbd-role-row:hover[b-0o1am9to2x] {
    background: color-mix(in srgb, var(--rrbd-text) 5%, transparent);
    border-color: var(--rrbd-border);
}

/* Replace mode "on" state */
.rrbd-role-row--on[b-0o1am9to2x] {
    background: var(--rrbd-accent-soft) !important;
    border-color: var(--rrbd-accent-h) !important;
}

/* Add/Remove mode states */
.rrbd-role-row--add[b-0o1am9to2x] {
    background: var(--rrbd-success-soft) !important;
    border-color: color-mix(in srgb, var(--rrbd-success) 30%, transparent) !important;
}

.rrbd-role-row--remove[b-0o1am9to2x] {
    background: var(--rrbd-error-soft) !important;
    border-color: color-mix(in srgb, var(--rrbd-error) 30%, transparent) !important;
}

/* Icon */
.rrbd-role-icon[b-0o1am9to2x] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rrbd-text-soft);
    transition: color 0.14s ease;
}

.rrbd-role-icon--on[b-0o1am9to2x],
.rrbd-role-icon--add[b-0o1am9to2x] {
    color: var(--rrbd-success) !important;
}

.rrbd-role-icon--remove[b-0o1am9to2x] {
    color: var(--rrbd-error) !important;
}

[b-0o1am9to2x] .rrbd-role-icon .mud-icon-root {
    font-size: 1.05rem !important;
}

/* Name */
.rrbd-role-name[b-0o1am9to2x] {
    flex: 1;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--rrbd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrbd-role-row--on .rrbd-role-name[b-0o1am9to2x] {
    color: var(--rrbd-accent);
    font-weight: 600;
}

.rrbd-role-row--add .rrbd-role-name[b-0o1am9to2x] {
    color: var(--rrbd-success);
    font-weight: 600;
}

.rrbd-role-row--remove .rrbd-role-name[b-0o1am9to2x] {
    color: var(--rrbd-error);
    font-weight: 600;
}

/* Pills */
.rrbd-role-pill[b-0o1am9to2x] {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 10px;
}

.rrbd-role-pill--add[b-0o1am9to2x] {
    background: var(--rrbd-success-soft);
    color: var(--rrbd-success);
    border: 1px solid color-mix(in srgb, var(--rrbd-success) 30%, transparent);
}

.rrbd-role-pill--remove[b-0o1am9to2x] {
    background: var(--rrbd-error-soft);
    color: var(--rrbd-error);
    border: 1px solid color-mix(in srgb, var(--rrbd-error) 30%, transparent);
}

/* Skeleton row */
.rrbd-role-row--skeleton[b-0o1am9to2x] {
    cursor: default;
    pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.rrbd-empty[b-0o1am9to2x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--rrbd-text-soft);
    font-size: 0.8rem;
    text-align: center;
}

[b-0o1am9to2x] .rrbd-empty .mud-icon-root {
    font-size: 2.2rem !important;
    opacity: 0.35;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.rrbd-footer[b-0o1am9to2x] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--rrbd-border);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    flex-shrink: 0;
}

[b-0o1am9to2x] .rrbd-save-btn {
    flex: 1;
}

[b-0o1am9to2x] .rrbd-cancel-btn {
    flex-shrink: 0;
}
/* /Pages/Dialogs/ReportRolesDialog.razor.rz.scp.css */
/* ================================================================
   ReportRolesDialog.razor.css — Modern Role Assignment Panel
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────────── */
.rrd-root[b-964lh6c9t1] {
    --rrd-accent:      var(--mud-palette-primary);
    --rrd-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --rrd-accent-h:    color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    --rrd-surface:     var(--mud-palette-surface);
    --rrd-text:        var(--mud-palette-text-primary);
    --rrd-text-soft:   var(--mud-palette-text-secondary);
    --rrd-border:      var(--mud-palette-divider);
    --rrd-r:           10px;
    --rrd-r-sm:        6px;
    /* Layout */
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    background: var(--rrd-surface);
    border-radius: var(--rrd-r);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────── */
.rrd-header[b-964lh6c9t1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, var(--rrd-accent-soft) 0%, transparent 70%);
    border-bottom: 1px solid var(--rrd-border);
    flex-shrink: 0;
}

.rrd-header-icon-wrap[b-964lh6c9t1] {
    width: 34px;
    height: 34px;
    border-radius: var(--rrd-r-sm);
    background: var(--rrd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-964lh6c9t1] .rrd-header-icon-wrap .mud-icon-root {
    font-size: 1.1rem !important;
    color: var(--rrd-accent) !important;
}

.rrd-header-info[b-964lh6c9t1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rrd-title[b-964lh6c9t1] {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--rrd-text);
    letter-spacing: 0.01em;
}

.rrd-sub[b-964lh6c9t1] {
    font-size: 0.68rem;
    color: var(--rrd-text-soft);
}

.rrd-header-badge[b-964lh6c9t1] {
    flex-shrink: 0;
}

[b-964lh6c9t1] .rrd-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rrd-r-sm) !important;
    flex-shrink: 0;
}

/* ── Search ─────────────────────────────────────────────────────── */
.rrd-search-wrap[b-964lh6c9t1] {
    padding: 10px 14px 0;
    flex-shrink: 0;
}

[b-964lh6c9t1] .rrd-search-field .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--rrd-border) !important;
    border-radius: var(--rrd-r-sm) !important;
}

[b-964lh6c9t1] .rrd-search-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--rrd-accent) !important;
}

/* ── Tab bar ─────────────────────────────────────────────────────── */
.rrd-tab-bar[b-964lh6c9t1] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 14px 0;
    flex-shrink: 0;
}

.rrd-tab[b-964lh6c9t1] {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--rrd-r-sm);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rrd-text-soft);
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.rrd-tab:hover[b-964lh6c9t1] {
    background: var(--rrd-accent-soft);
    color: var(--rrd-text);
}

.rrd-tab--active[b-964lh6c9t1] {
    background: var(--rrd-accent-soft) !important;
    color: var(--rrd-accent) !important;
    font-weight: 600;
    border-color: var(--rrd-accent-h) !important;
}

.rrd-tab-count[b-964lh6c9t1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--rrd-text-soft) 12%, transparent);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--rrd-text-soft);
}

.rrd-tab--active .rrd-tab-count[b-964lh6c9t1] {
    background: var(--rrd-accent-soft);
    color: var(--rrd-accent);
}

.rrd-tab-count--accent[b-964lh6c9t1] {
    background: var(--rrd-accent-soft) !important;
    color: var(--rrd-accent) !important;
}

.rrd-tab-clear[b-964lh6c9t1] {
    all: unset;
    cursor: pointer;
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--mud-palette-error);
    padding: 4px 8px;
    border-radius: var(--rrd-r-sm);
    transition: background 0.15s ease;
}

.rrd-tab-clear:hover[b-964lh6c9t1] {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* ── Role List ───────────────────────────────────────────────────── */
.rrd-list[b-964lh6c9t1] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 200px;
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: var(--rrd-border) transparent;
}

.rrd-list[b-964lh6c9t1]::-webkit-scrollbar { width: 4px; }
.rrd-list[b-964lh6c9t1]::-webkit-scrollbar-track { background: transparent; }
.rrd-list[b-964lh6c9t1]::-webkit-scrollbar-thumb { background: var(--rrd-border); border-radius: 4px; }

/* ── Role Row ────────────────────────────────────────────────────── */
.rrd-role-row[b-964lh6c9t1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rrd-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
    user-select: none;
}

.rrd-role-row:hover[b-964lh6c9t1] {
    background: color-mix(in srgb, var(--rrd-text) 5%, transparent);
    border-color: var(--rrd-border);
}

/* Selected state */
.rrd-role-row--on[b-964lh6c9t1] {
    background: var(--rrd-accent-soft) !important;
    border-color: var(--rrd-accent-h) !important;
}

.rrd-role-row--on:hover[b-964lh6c9t1] {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
}

/* Icon */
.rrd-role-icon[b-964lh6c9t1] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rrd-text-soft);
    transition: color 0.14s ease;
}

.rrd-role-icon--on[b-964lh6c9t1] {
    color: var(--rrd-accent) !important;
}

[b-964lh6c9t1] .rrd-role-icon .mud-icon-root {
    font-size: 1.05rem !important;
}

/* Name */
.rrd-role-name[b-964lh6c9t1] {
    flex: 1;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--rrd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrd-role-row--on .rrd-role-name[b-964lh6c9t1] {
    color: var(--rrd-accent);
    font-weight: 600;
}

/* "Assigned" pill */
.rrd-role-pill[b-964lh6c9t1] {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--rrd-accent-soft);
    color: var(--rrd-accent);
    border: 1px solid var(--rrd-accent-h);
}

/* Skeleton row */
.rrd-role-row--skeleton[b-964lh6c9t1] {
    cursor: default;
    pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.rrd-empty[b-964lh6c9t1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--rrd-text-soft);
    font-size: 0.8rem;
    text-align: center;
}

[b-964lh6c9t1] .rrd-empty .mud-icon-root {
    font-size: 2.2rem !important;
    opacity: 0.35;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.rrd-footer[b-964lh6c9t1] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--rrd-border);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    flex-shrink: 0;
}

[b-964lh6c9t1] .rrd-save-btn {
    flex: 1;
}

[b-964lh6c9t1] .rrd-cancel-btn {
    flex-shrink: 0;
}
/* /Pages/Dialogs/ReportsParametersDialog.razor.rz.scp.css */
/* =====================================================
   ReportsParametersDialog — Card View + Inline Sidebar
   ===================================================== */

.params-root[b-az4doy1xin] {
    --pd-accent: #6366f1;
    --pd-accent-soft: rgba(99, 102, 241, 0.09);
    --pd-surface: #ffffff;
    --pd-text: #18181b;
    --pd-text-soft: #71717a;
    --pd-border: rgba(0, 0, 0, 0.07);
    --pd-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 3px 10px rgba(0,0,0,0.05);
    --pd-shadow-hover: 0 3px 10px rgba(0,0,0,0.09), 0 10px 28px rgba(0,0,0,0.08);
    --pd-radius: 10px;
    --pd-transition: all 0.18s ease;
    --pd-badge-element-bg: rgba(99, 102, 241, 0.10);
    --pd-badge-element-fg: #4f46e5;
    --pd-badge-data-bg: rgba(16, 185, 129, 0.10);
    --pd-badge-data-fg: #059669;
    --pd-badge-req-bg: rgba(239, 68, 68, 0.10);
    --pd-badge-req-fg: #dc2626;
    --pd-badge-vis-bg: rgba(20, 184, 166, 0.10);
    --pd-badge-vis-fg: #0d9488;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 1.3rem);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0 6px;
}

/* ── Cards Panel ───────────────────────────────────── */
.params-panel-cards[b-az4doy1xin] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Header ────────────────────────────────────────── */
.params-header[b-az4doy1xin] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pd-border);
}

.params-header-info[b-az4doy1xin] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-az4doy1xin] .params-header-icon {
    color: var(--pd-accent) !important;
    font-size: 1.2rem !important;
    opacity: 0.85;
}

.params-title[b-az4doy1xin] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pd-text);
    letter-spacing: 0.01em;
}

.params-count-pill[b-az4doy1xin] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 20px;
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Empty State ───────────────────────────────────── */
.params-empty[b-az4doy1xin] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 52px 24px 40px;
    text-align: center;
}

.params-empty-icon-wrap[b-az4doy1xin] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--pd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

[b-az4doy1xin] .params-empty-icon-wrap .mud-icon-root {
    font-size: 1.9rem !important;
    color: var(--pd-accent) !important;
    opacity: 0.65;
}

.params-empty-title[b-az4doy1xin] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pd-text);
}

.params-empty-sub[b-az4doy1xin] {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--pd-text-soft);
    max-width: 280px;
    line-height: 1.55;
}

/* ── Parameter Card ────────────────────────────────── */
.param-card[b-az4doy1xin] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    transition: var(--pd-transition);
    overflow: hidden;
    height: 100%;
    cursor: default;
}

.param-card:hover[b-az4doy1xin] {
    box-shadow: var(--pd-shadow-hover);
    border-color: rgba(99, 102, 241, 0.18);
    transform: translateY(-1px);
}

.param-card--active[b-az4doy1xin] {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 2px var(--pd-accent-soft), var(--pd-shadow-hover) !important;
}

.param-card-head[b-az4doy1xin] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(99,102,241,0.045) 0%, transparent 70%);
    border-bottom: 1px solid var(--pd-border);
    min-height: 44px;
}

.param-sort-badge[b-az4doy1xin] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    font-size: 0.68rem;
    font-weight: 700;
}

.param-name-group[b-az4doy1xin] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.param-name[b-az4doy1xin] {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--pd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Consolas', 'Courier New', ui-monospace, monospace;
    letter-spacing: 0.01em;
}

.param-display-name[b-az4doy1xin] {
    font-size: 0.71rem;
    color: var(--pd-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.param-card-actions[b-az4doy1xin] {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.param-card:hover .param-card-actions[b-az4doy1xin] {
    opacity: 1;
}

[b-az4doy1xin] .param-card-actions .mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: unset !important;
}

[b-az4doy1xin] .param-card-actions .mud-icon-button .mud-icon-root {
    font-size: 1rem !important;
}

.param-card-body[b-az4doy1xin] {
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.param-badges[b-az4doy1xin] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.badge[b-az4doy1xin] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.badge-element[b-az4doy1xin]  { background: var(--pd-badge-element-bg); color: var(--pd-badge-element-fg); }
.badge-data[b-az4doy1xin]     { background: var(--pd-badge-data-bg);    color: var(--pd-badge-data-fg);    }
.badge-required[b-az4doy1xin] { background: var(--pd-badge-req-bg);     color: var(--pd-badge-req-fg);     }
.badge-visible[b-az4doy1xin]  { background: var(--pd-badge-vis-bg);     color: var(--pd-badge-vis-fg);     }

.param-detail-row[b-az4doy1xin] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.77rem;
}

.detail-label[b-az4doy1xin] {
    flex-shrink: 0;
    color: var(--pd-text-soft);
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 54px;
}

.detail-value[b-az4doy1xin] {
    color: var(--pd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.param-query-row[b-az4doy1xin] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.77rem;
}

.query-code[b-az4doy1xin] {
    font-family: 'Consolas', 'Courier New', ui-monospace, monospace;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--pd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Parameter Relations ──────────────────────────── */

/* DRIVES footer strip — pinned to card bottom (violet) */
.param-card-drives[b-az4doy1xin] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(139, 92, 246, 0.07);
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    font-size: 0.68rem;
    font-weight: 500;
    color: #5b21b6;
    overflow: hidden;
}

/* FROM header strip — pinned to card top, below card-head (amber) */
.param-card-from[b-az4doy1xin] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(245, 158, 11, 0.07);
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
    font-size: 0.68rem;
    font-weight: 500;
    color: #92400e;
    overflow: hidden;
}

.rel-icon[b-az4doy1xin] {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
}

.rel-label[b-az4doy1xin] {
    opacity: 0.65;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.rel-name[b-az4doy1xin] {
    font-family: 'Consolas', 'Courier New', ui-monospace, monospace;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════
   BACKDROP
   ═══════════════════════════════════════════════════ */
.params-backdrop[b-az4doy1xin] {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 35, 0.22);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    z-index: 5;
    border-radius: 8px;
}

.sidebar-open .params-backdrop[b-az4doy1xin] {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR FORM PANEL
   ═══════════════════════════════════════════════════ */
.params-panel-form[b-az4doy1xin] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 350px;
    background: var(--pd-surface);
    border-left: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 0 8px 8px 0;
    transform: translateX(calc(100% + 2px));
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-open .params-panel-form[b-az4doy1xin] {
    transform: translateX(0);
}

.sidebar-loading[b-az4doy1xin] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.sidebar-loading-text[b-az4doy1xin] {
    font-size: 0.8rem;
    color: var(--pd-text-soft);
    letter-spacing: 0.01em;
}

.form-header[b-az4doy1xin] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pd-border);
    background: linear-gradient(135deg, rgba(99,102,241,0.055) 0%, transparent 65%);
    flex-shrink: 0;
}

.form-header-left[b-az4doy1xin] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.form-header-icon-wrap[b-az4doy1xin] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-az4doy1xin] .form-header-icon-wrap .mud-icon-root {
    font-size: 1.05rem !important;
    color: var(--pd-accent) !important;
}

.form-title[b-az4doy1xin] {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--pd-text);
    letter-spacing: 0.01em;
}

[b-az4doy1xin] .form-close-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    color: var(--pd-text-soft) !important;
}

[b-az4doy1xin] .form-close-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

.form-body[b-az4doy1xin] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 8px;
}

.form-body[b-az4doy1xin]::-webkit-scrollbar { width: 4px; }
.form-body[b-az4doy1xin]::-webkit-scrollbar-track { background: transparent; }
.form-body[b-az4doy1xin]::-webkit-scrollbar-thumb { background: var(--pd-border); border-radius: 4px; }

.form-footer[b-az4doy1xin] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--pd-border);
    background: rgba(0, 0, 0, 0.015);
    flex-shrink: 0;
}

[b-az4doy1xin] .form-footer .mud-button-root {
    flex: 1;
}

/* ═══════════════════════════════════════════════════
   DARK MODE  —  [dark-mode="true"] set on <html>
   Blazor scopes these as [dark-mode="true"] .class[b-xxxx]
   which matches correctly since [b-xxxx] is on the
   component's own elements, not on <html>.
   ═══════════════════════════════════════════════════ */

[dark-mode="true"] .params-root[b-az4doy1xin] {
    --pd-accent:        #818cf8;
    --pd-accent-soft:   rgba(129, 140, 248, 0.12);
    --pd-surface:       #1e1e2e;
    --pd-text:          #e2e8f0;
    --pd-text-soft:     #94a3b8;
    --pd-border:        rgba(255, 255, 255, 0.08);
    --pd-shadow:        0 1px 3px rgba(0,0,0,0.3), 0 3px 10px rgba(0,0,0,0.3);
    --pd-shadow-hover:  0 3px 12px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.35);
    --pd-badge-element-bg:  rgba(129, 140, 248, 0.15);
    --pd-badge-element-fg:  #a5b4fc;
    --pd-badge-data-bg:     rgba(52, 211, 153, 0.15);
    --pd-badge-data-fg:     #34d399;
    --pd-badge-req-bg:      rgba(248, 113, 113, 0.15);
    --pd-badge-req-fg:      #f87171;
    --pd-badge-vis-bg:      rgba(45, 212, 191, 0.15);
    --pd-badge-vis-fg:      #2dd4bf;
}

[dark-mode="true"] .param-card-head[b-az4doy1xin] {
    background: linear-gradient(135deg, rgba(129,140,248,0.08) 0%, transparent 70%);
}

[dark-mode="true"] .param-card:hover[b-az4doy1xin] {
    border-color: rgba(129, 140, 248, 0.3);
}

[dark-mode="true"] .query-code[b-az4doy1xin] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

[dark-mode="true"] .param-card-from[b-az4doy1xin] {
    background: rgba(251, 191, 36, 0.08);
    border-bottom-color: rgba(251, 191, 36, 0.22);
    color: #fcd34d;
}

[dark-mode="true"] .param-card-drives[b-az4doy1xin] {
    background: rgba(167, 139, 250, 0.1);
    border-top-color: rgba(167, 139, 250, 0.25);
    color: #c4b5fd;
}

[dark-mode="true"] .params-panel-form[b-az4doy1xin] {
    border-left-color: rgba(129, 140, 248, 0.2);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.45);
}

[dark-mode="true"] .form-header[b-az4doy1xin] {
    background: linear-gradient(135deg, rgba(129,140,248,0.09) 0%, transparent 65%);
}

[dark-mode="true"] .form-footer[b-az4doy1xin] {
    background: rgba(0, 0, 0, 0.25);
}

[dark-mode="true"] .params-backdrop[b-az4doy1xin] {
    background: rgba(0, 0, 10, 0.45);
}

[b-az4doy1xin] [dark-mode="true"] .form-close-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* /Pages/Dialogs/TableDesignerDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TABLE DESIGNER

   Two panes on one surface: the working canvas and a property inspector.
   The header row of the canvas IS the editor — it carries the drag grip, the
   resize edge and the selection — so there is no second "column list" to keep
   in sync with what is on screen.

   Same enterprise-dense discipline as ModuleConfigurationDialog.razor.css:
   13px base, hairline borders, 5-8px radii, colour spent only on state
   (selected, hidden, sample, error).

   Every value derives from --mud-palette-*, so the dialog follows
   MudThemeProvider's light/dark switch rather than carrying a second theme.
   Per Blazor CSS isolation, tokens sit on .tdd-root and never on :root — a
   scoped :root[b-xxx] would never match <html>.

   Directional properties are logical (inline-start/end, padding-inline) so the
   whole designer mirrors under MudRtlProvider without a second stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.tdd-root[b-ktw8kj63jb] {
    /* Surfaces and lines */
    --tdd-line: var(--mud-palette-lines-default);
    --tdd-line-soft: color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    --tdd-surface: var(--mud-palette-surface);
    --tdd-sunken: var(--mud-palette-background-gray);
    --tdd-hover: var(--mud-palette-action-default-hover);
    /* Ink — derived from text-primary rather than from --mud-palette-text-secondary/-disabled,
       which are control tokens and measure under 3:1 against the surface. This tier carries
       database column names and CLR type names, which have to be readable. */
    --tdd-ink: var(--mud-palette-text-primary);
    --tdd-ink-2: color-mix(in srgb, var(--mud-palette-text-primary) 86%, transparent);
    --tdd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    /* State */
    --tdd-accent: var(--mud-palette-primary);
    --tdd-accent-wash: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    --tdd-accent-line: color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    --tdd-bad: var(--mud-palette-error);
    --tdd-bad-wash: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --tdd-warn: var(--mud-palette-warning);
    --tdd-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    /* Metrics */
    --tdd-r: 8px;
    --tdd-r-sm: 5px;
    --tdd-insp: 19rem;
    --tdd-ease: 0.18s ease;
    /* Identifiers (column names, CLR types, percentages) are code, so they get a real mono stack.
       --mud-typography-caption-family is the body sans and would render proportional. */
    --tdd-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: min(46rem, calc(100dvh - 6rem));
    max-block-size: calc(100dvh - 2rem);
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--tdd-ink);
    background: var(--tdd-surface);
}

/* Light ink on a dark ground reaches the same contrast at less alpha, and the washes need
   a little more presence to read at all. */
[dark-mode="true"] .tdd-root[b-ktw8kj63jb] {
    --tdd-ink-2: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    --tdd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 56%, transparent);
    --tdd-accent-wash: color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    --tdd-bad-wash: color-mix(in srgb, var(--mud-palette-error) 17%, transparent);
    --tdd-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
}

/* ── Shared atoms ────────────────────────────────────────────────────────── */

.tdd-label[b-ktw8kj63jb] {
    font-size: 0.65625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tdd-ink-3);
    font-weight: 600;
}

.tdd-section-title[b-ktw8kj63jb] {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.tdd-hint[b-ktw8kj63jb] {
    font-size: 0.6875rem;
    color: var(--tdd-ink-3);
    line-height: 1.45;
}

.tdd-dim[b-ktw8kj63jb] {
    color: var(--tdd-ink-3);
}

.tdd-sep[b-ktw8kj63jb] {
    color: var(--tdd-line);
}

.tdd-chip[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.6875rem;
    padding: 0.09375rem 0.375rem;
    border-radius: 4px;
    border: 1px solid var(--tdd-line);
    color: var(--tdd-ink-3);
    background: var(--tdd-sunken);
    white-space: nowrap;
}

.tdd-chip-sample[b-ktw8kj63jb] {
    font-family: inherit;
    color: var(--tdd-warn);
    background: var(--tdd-warn-wash);
    border-color: var(--tdd-warn-wash);
}

.tdd-grip[b-ktw8kj63jb] {
    color: var(--tdd-ink-3);
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: -1px;
    cursor: grab;
    flex: none;
    opacity: 0.55;
    transition: opacity var(--tdd-ease);
}

.tdd-grip:active[b-ktw8kj63jb] {
    cursor: grabbing;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.tdd-bar[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid var(--tdd-line);
    background: var(--tdd-sunken);
    flex: none;
}

.tdd-bar-icon[b-ktw8kj63jb] {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--tdd-r-sm);
    display: grid;
    place-items: center;
    flex: none;
    color: var(--tdd-accent);
    background: var(--tdd-accent-wash);
}

.tdd-bar-meta[b-ktw8kj63jb] {
    min-inline-size: 0;
}

.tdd-bar-title[b-ktw8kj63jb] {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.tdd-bar-sub[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.71875rem;
    color: var(--tdd-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdd-bar-actions[b-ktw8kj63jb] {
    margin-inline-start: auto;
    display: flex;
    gap: 0.4375rem;
    align-items: center;
    flex: none;
}

.tdd-errors[b-ktw8kj63jb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.875rem;
    background: var(--tdd-bad-wash);
    border-block-end: 1px solid var(--tdd-line);
    flex: none;
}

.tdd-error[b-ktw8kj63jb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.78125rem;
    color: var(--tdd-bad);
}

/* ── Panes ───────────────────────────────────────────────────────────────── */

.tdd-body[b-ktw8kj63jb] {
    display: grid;
    grid-template-columns: 1fr var(--tdd-insp);
    min-block-size: 0;
    flex: 1;
}

.tdd-main[b-ktw8kj63jb] {
    border-inline-end: 1px solid var(--tdd-line);
    min-inline-size: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ── Top fields ──────────────────────────────────────────────────────────── */

.tdd-top[b-ktw8kj63jb] {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-block-end: 1px solid var(--tdd-line);
    flex-wrap: wrap;
    align-items: center;
}

.tdd-top-field[b-ktw8kj63jb] {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.tdd-readout[b-ktw8kj63jb] {
    display: grid;
    gap: 0.125rem;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    flex: none;
}

.tdd-readout-value[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}

.tdd-readout-value .tdd-dim[b-ktw8kj63jb] {
    font-size: 0.6875rem;
}

/* ── SQL ─────────────────────────────────────────────────────────────────── */

.tdd-sql[b-ktw8kj63jb] {
    padding: 0.75rem 0.875rem;
    border-block-end: 1px solid var(--tdd-line);
    background: var(--tdd-sunken);
    display: grid;
    gap: 0.5rem;
}

.tdd-sql-head[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tdd-sql-icon[b-ktw8kj63jb] {
    color: var(--tdd-accent);
}

.tdd-sql-foot[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tdd-exec-error[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78125rem;
    color: var(--tdd-bad);
    background: var(--tdd-bad-wash);
    border-radius: var(--tdd-r-sm);
    padding: 0.375rem 0.625rem;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.tdd-empty[b-ktw8kj63jb] {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--tdd-ink-3);
    text-align: center;
}

.tdd-empty-icon[b-ktw8kj63jb] {
    font-size: 2rem;
    opacity: 0.4;
}

.tdd-empty p[b-ktw8kj63jb] {
    margin: 0;
    font-size: 0.8125rem;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */

.tdd-grid[b-ktw8kj63jb] {
    padding: 0.875rem;
    overflow-x: auto;
    flex: 1;
}

.tdd-grid-note[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.5625rem;
    font-size: 0.71875rem;
    color: var(--tdd-ink-3);
    flex-wrap: wrap;
}

table.tdd-pv[b-ktw8kj63jb] {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    table-layout: fixed;
    min-inline-size: 40rem;
}

table.tdd-pv th[b-ktw8kj63jb] {
    position: relative;
    text-align: start;
    vertical-align: top;
    padding: 0;
    border-block-end: 1px solid var(--tdd-line);
}

/* The header and data cells take the styles the user configured, delivered as custom properties on
   the table element. This is what makes the canvas a real preview rather than a layout ruler: the
   fallbacks are the designer's own chrome, so an unstyled table looks exactly as it did before. */
table.tdd-pv th[b-ktw8kj63jb] {
    background: var(--tdd-h-bg, transparent);
    border-block-start: var(--tdd-h-bt, 0);
    border-inline-end: var(--tdd-h-br, 0);
    border-block-end: var(--tdd-h-bb, 1px solid var(--tdd-line));
    border-inline-start: var(--tdd-h-bl, 0);
}

table.tdd-pv th .tdd-cn b[b-ktw8kj63jb] {
    color: var(--tdd-h-fg, var(--tdd-ink));
}

table.tdd-pv td[b-ktw8kj63jb] {
    padding: var(--tdd-d-pad, 0.4375rem 0.5625rem);
    color: var(--tdd-d-fg, var(--tdd-ink-3));
    background: var(--tdd-d-bg, transparent);
    border-block-start: var(--tdd-d-bt, 0);
    border-inline-end: var(--tdd-d-br, 0);
    border-block-end: var(--tdd-d-bb, 1px solid var(--tdd-line-soft));
    border-inline-start: var(--tdd-d-bl, 0);
    font-size: 0.78125rem;
    vertical-align: top;
}

/* The last sample row is the deliberately long one — banding it makes clear that a clipped
   value there is the point of the row, not a rendering accident. */
tr.tdd-longest[b-ktw8kj63jb] {
    background: var(--tdd-sunken);
}

tr.tdd-longest td[b-ktw8kj63jb] {
    color: var(--tdd-ink-2);
}

.tdd-colhead[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* The configured header margins, so the preview shows the real cell padding. */
    padding: var(--tdd-h-pad, 0.4375rem 0.5625rem 0.4375rem 0.375rem);
    inline-size: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-block-end: none;
    border-start-start-radius: var(--tdd-r-sm);
    border-start-end-radius: var(--tdd-r-sm);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--tdd-ease);
}

.tdd-colhead:hover[b-ktw8kj63jb] {
    background: var(--tdd-hover);
}

.tdd-colhead:hover .tdd-grip[b-ktw8kj63jb] {
    opacity: 1;
}

.tdd-colhead:focus-visible[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: -2px;
}

/* Selection is an outline, not a fill. A wash over the header would sit on top of the background
   colour the user chose and the canvas would stop showing what actually prints. */
th.tdd-sel .tdd-colhead[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: -2px;
    border-color: transparent;
}

.tdd-cn[b-ktw8kj63jb] {
    display: grid;
    gap: 1px;
    min-inline-size: 0;
}

/* pre-line, not nowrap: a caption may carry a deliberate line break, which prints as a second line
   in the report, so the preview has to show it stacked too. */
.tdd-cn b[b-ktw8kj63jb] {
    font-weight: 600;
    font-size: 0.78125rem;
    color: var(--tdd-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.tdd-cn small[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.625rem;
    color: var(--tdd-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdd-wpct[b-ktw8kj63jb] {
    margin-inline-start: auto;
    font-family: var(--tdd-mono);
    font-size: 0.65625rem;
    color: var(--tdd-ink-3);
    font-variant-numeric: tabular-nums;
    flex: none;
}

th.tdd-sel .tdd-wpct[b-ktw8kj63jb] {
    color: var(--tdd-accent);
}

.tdd-resize[b-ktw8kj63jb] {
    position: absolute;
    inset-block: 0.375rem 0;
    inset-inline-end: -0.1875rem;
    inline-size: 0.4375rem;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    /* Without this the browser claims the gesture for scrolling and pointermove never fires. */
    touch-action: none;
}

.tdd-resize[b-ktw8kj63jb]::after {
    content: "";
    inline-size: 1px;
    background: var(--tdd-line);
    transition: background var(--tdd-ease), inline-size var(--tdd-ease);
}

.tdd-resize:hover[b-ktw8kj63jb]::after {
    inline-size: 2px;
    background: var(--tdd-accent);
}

.tdd-clip[b-ktw8kj63jb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdd-wrap[b-ktw8kj63jb] {
    white-space: normal;
}

/* Hidden columns are not drawn in the grid — a token width would distort every other column's
   ratio and a real one would print nothing — so they get their own strip underneath. Dashed and
   dimmed to read as "excluded", but clickable, so nothing ever becomes unreachable. */
.tdd-hidden-strip[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    flex-wrap: wrap;
    margin-block-start: 0.625rem;
    padding-block-start: 0.625rem;
    border-block-start: 1px dashed var(--tdd-line);
}

.tdd-hidden-chip[b-ktw8kj63jb] {
    font: inherit;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    border: 1px dashed var(--tdd-line);
    background: transparent;
    color: var(--tdd-ink-3);
    cursor: pointer;
    font-style: italic;
    transition: background var(--tdd-ease), color var(--tdd-ease), border-color var(--tdd-ease);
}

.tdd-hidden-chip:hover[b-ktw8kj63jb] {
    background: var(--tdd-hover);
    color: var(--tdd-ink-2);
}

.tdd-hidden-chip:focus-visible[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: 1px;
}

.tdd-hidden-chip.tdd-on[b-ktw8kj63jb] {
    border-color: var(--tdd-accent-line);
    background: var(--tdd-accent-wash);
    color: var(--tdd-accent);
}

.tdd-align-start[b-ktw8kj63jb] { text-align: start; }
.tdd-align-center[b-ktw8kj63jb] { text-align: center; }
.tdd-align-end[b-ktw8kj63jb] { text-align: end; }

/* ── Width budget ────────────────────────────────────────────────────────── */

.tdd-budget[b-ktw8kj63jb] {
    padding: 0.75rem 0.875rem;
    border-block-start: 1px solid var(--tdd-line);
    background: var(--tdd-sunken);
    flex: none;
}

.tdd-bar-track[b-ktw8kj63jb] {
    display: flex;
    block-size: 0.5625rem;
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid var(--tdd-line);
    background: var(--tdd-surface);
}

.tdd-bar-track i[b-ktw8kj63jb] {
    display: block;
    background: var(--tdd-accent);
    border-inline-end: 1px solid var(--tdd-surface);
    opacity: 0.75;
}

.tdd-bar-track i:nth-child(even)[b-ktw8kj63jb] {
    opacity: 0.5;
}

.tdd-bar-track i:last-child[b-ktw8kj63jb] {
    border-inline-end: none;
}

.tdd-budget-foot[b-ktw8kj63jb] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin-block-start: 0.4375rem;
    font-size: 0.71875rem;
    color: var(--tdd-ink-3);
    flex-wrap: wrap;
}

.tdd-budget-foot b[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    color: var(--tdd-ink-2);
    font-variant-numeric: tabular-nums;
}

/* ── Inspector ───────────────────────────────────────────────────────────── */

.tdd-insp[b-ktw8kj63jb] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: auto;
}

.tdd-insp-head[b-ktw8kj63jb] {
    padding: 0.75rem 0.875rem;
    border-block-end: 1px solid var(--tdd-line);
    display: grid;
    gap: 0.125rem;
}

.tdd-insp-name[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--tdd-ink);
    word-break: break-all;
}

.tdd-insp-type[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.6875rem;
    color: var(--tdd-ink-3);
}

.tdd-insp-body[b-ktw8kj63jb] {
    padding: 0.75rem 0.875rem;
    display: grid;
    gap: 0.875rem;
    align-content: start;
}

.tdd-row[b-ktw8kj63jb] {
    display: grid;
    gap: 0.3125rem;
}

.tdd-slider[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
}

.tdd-slider[b-ktw8kj63jb]  .mud-slider {
    flex: 1;
    min-inline-size: 0;
}

.tdd-numbox[b-ktw8kj63jb] {
    font-family: var(--tdd-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    padding: 0.25rem 0.4375rem;
    min-inline-size: 3.5rem;
    text-align: center;
    flex: none;
}

.tdd-seg[b-ktw8kj63jb] {
    display: flex;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    overflow: hidden;
}

.tdd-seg button[b-ktw8kj63jb] {
    flex: 1;
    padding: 0.3125rem 0;
    font: inherit;
    font-size: 0.71875rem;
    color: var(--tdd-ink-3);
    background: transparent;
    border: none;
    border-inline-end: 1px solid var(--tdd-line);
    cursor: pointer;
    transition: background var(--tdd-ease), color var(--tdd-ease);
}

.tdd-seg button:last-child[b-ktw8kj63jb] {
    border-inline-end: none;
}

.tdd-seg button:hover[b-ktw8kj63jb] {
    background: var(--tdd-hover);
}

.tdd-seg button:focus-visible[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: -2px;
}

.tdd-seg button.tdd-on[b-ktw8kj63jb] {
    background: var(--tdd-accent-wash);
    color: var(--tdd-accent);
    font-weight: 600;
}

.tdd-tog[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

/* MudSwitch ships with a margin that pushes the row out of alignment with the other
   inspector controls. ::deep because CSS isolation does not reach into child components. */
.tdd-tog[b-ktw8kj63jb]  .mud-switch {
    margin: 0;
}

/* ── Inspector tabs ──────────────────────────────────────────────────────── */

.tdd-insp-tabs[b-ktw8kj63jb] {
    display: flex;
    border-block-end: 1px solid var(--tdd-line);
    flex: none;
}

.tdd-insp-tabs button[b-ktw8kj63jb] {
    flex: 1;
    padding: 0.5rem 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tdd-ink-3);
    background: var(--tdd-sunken);
    border: none;
    border-block-end: 2px solid transparent;
    cursor: pointer;
    transition: color var(--tdd-ease), background var(--tdd-ease), border-color var(--tdd-ease);
}

.tdd-insp-tabs button:hover[b-ktw8kj63jb] {
    background: var(--tdd-hover);
}

.tdd-insp-tabs button:focus-visible[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: -2px;
}

.tdd-insp-tabs button.tdd-on[b-ktw8kj63jb] {
    color: var(--tdd-accent);
    background: var(--tdd-surface);
    border-block-end-color: var(--tdd-accent);
}

/* ── Cell style blocks ───────────────────────────────────────────────────── */

.tdd-style[b-ktw8kj63jb] {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r);
    background: var(--tdd-sunken);
}

.tdd-style-head[b-ktw8kj63jb] {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tdd-ink-2);
}

.tdd-color[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* A native colour input rather than a picker component: this dialog deliberately holds no
   MudBlazor internals, and the swatch doubles as the preview of the chosen colour. */
.tdd-swatch[b-ktw8kj63jb] {
    inline-size: 1.75rem;
    block-size: 1.625rem;
    padding: 0;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    background: var(--tdd-surface);
    cursor: pointer;
    flex: none;
}

.tdd-hex[b-ktw8kj63jb] {
    flex: 1;
    min-inline-size: 0;
    font-family: var(--tdd-mono);
    font-size: 0.71875rem;
    text-transform: uppercase;
    padding: 0.25rem 0.4375rem;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    background: var(--tdd-surface);
    color: var(--tdd-ink);
}

.tdd-hex[b-ktw8kj63jb]::placeholder {
    text-transform: none;
    color: var(--tdd-ink-3);
}

/* Without this there is no way back to "inherit" once a colour has been chosen. */
.tdd-clear[b-ktw8kj63jb] {
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: var(--tdd-ink-3);
    background: transparent;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    cursor: pointer;
}

.tdd-clear:hover[b-ktw8kj63jb] {
    color: var(--tdd-bad);
    border-color: var(--tdd-bad-wash);
}

.tdd-mm[b-ktw8kj63jb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3125rem;
}

.tdd-mm label[b-ktw8kj63jb],
.tdd-mm-single[b-ktw8kj63jb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-inline-size: 0;
}

.tdd-mm label span[b-ktw8kj63jb],
.tdd-mm-single span[b-ktw8kj63jb] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--tdd-ink-3);
    flex: none;
}

.tdd-mm input[b-ktw8kj63jb],
.tdd-mm-single input[b-ktw8kj63jb],
.tdd-select[b-ktw8kj63jb] {
    inline-size: 100%;
    min-inline-size: 0;
    font-family: var(--tdd-mono);
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.3125rem;
    border: 1px solid var(--tdd-line);
    border-radius: var(--tdd-r-sm);
    background: var(--tdd-surface);
    color: var(--tdd-ink);
}

.tdd-select[b-ktw8kj63jb] {
    font-family: inherit;
}

.tdd-border-row[b-ktw8kj63jb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    align-items: center;
}

/* The side toggles as a box diagram — "bottom rule only" reads at a glance, which four checkboxes
   in a row never do. */
.tdd-sides[b-ktw8kj63jb] {
    display: grid;
    grid-template-columns: 0.75rem 1fr 0.75rem;
    grid-template-rows: 0.75rem 1.5rem 0.75rem;
    gap: 0.1875rem;
    inline-size: 5.5rem;
    justify-self: center;
}

.tdd-side[b-ktw8kj63jb] {
    padding: 0;
    border: none;
    border-radius: 2px;
    background: var(--tdd-line);
    cursor: pointer;
    transition: background var(--tdd-ease);
}

.tdd-side:hover[b-ktw8kj63jb] {
    background: var(--tdd-ink-3);
}

.tdd-side:focus-visible[b-ktw8kj63jb] {
    outline: 2px solid var(--tdd-accent);
    outline-offset: 1px;
}

.tdd-side.tdd-on[b-ktw8kj63jb] {
    background: var(--tdd-accent);
}

.tdd-side-t[b-ktw8kj63jb] { grid-area: 1 / 2 / 2 / 3; }
.tdd-side-l[b-ktw8kj63jb] { grid-area: 2 / 1 / 3 / 2; }
.tdd-side-r[b-ktw8kj63jb] { grid-area: 2 / 3 / 3 / 4; }
.tdd-side-b[b-ktw8kj63jb] { grid-area: 3 / 2 / 4 / 3; }

.tdd-side-mid[b-ktw8kj63jb] {
    grid-area: 2 / 2 / 3 / 3;
    border-radius: 2px;
    background: var(--tdd-surface);
    border: 1px dashed var(--tdd-line);
}

.tdd-insp-foot[b-ktw8kj63jb] {
    margin-block-start: auto;
    padding: 0.75rem 0.875rem;
    border-block-start: 1px solid var(--tdd-line);
    display: flex;
    gap: 0.5rem;
    background: var(--tdd-sunken);
}

.tdd-insp-foot > *[b-ktw8kj63jb] {
    flex: 1;
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
    .tdd-body[b-ktw8kj63jb] {
        grid-template-columns: 1fr;
    }

    .tdd-main[b-ktw8kj63jb] {
        border-inline-end: none;
        border-block-end: 1px solid var(--tdd-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tdd-root *[b-ktw8kj63jb],
    .tdd-root *[b-ktw8kj63jb]::before,
    .tdd-root *[b-ktw8kj63jb]::after {
        transition: none !important;
    }
}
/* /Pages/Dialogs/TableSchemaDiffDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TABLE SCHEMA DIFF

   The confirm shown when Execute returns a different column set than the one
   already configured. A bare "are you sure?" makes the user guess what changed;
   itemising it turns a renamed column into a two-second read.

   Same enterprise-dense discipline as ModuleConfigurationDialog.razor.css —
   13px base, hairline borders, 4-6px radii, colour spent only on state — and
   every value derives from --mud-palette-*, so it follows MudThemeProvider's
   light/dark switch rather than carrying a second theme.

   Per Blazor CSS isolation, tokens sit on .tsd-root and never on :root: a
   scoped :root[b-xxx] would never match <html>.

   Directional properties are logical so the dialog mirrors under MudRtlProvider.
   ═══════════════════════════════════════════════════════════════════════════ */

.tsd-root[b-x1lzov4vh4] {
    --tsd-line: var(--mud-palette-lines-default);
    --tsd-ink: var(--mud-palette-text-primary);
    --tsd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    --tsd-warn: var(--mud-palette-warning);
    --tsd-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    --tsd-bad: var(--mud-palette-error);
    --tsd-bad-wash: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --tsd-good: var(--mud-palette-success);
    --tsd-good-wash: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
    /* Column names are identifiers, so they get a real mono stack —
       --mud-typography-caption-family is the body sans and would render proportional. */
    --tsd-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--tsd-ink);
}

/* Light ink on a dark ground needs less alpha to reach the same contrast. */
[dark-mode="true"] .tsd-root[b-x1lzov4vh4] {
    --tsd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 56%, transparent);
    --tsd-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    --tsd-bad-wash: color-mix(in srgb, var(--mud-palette-error) 17%, transparent);
    --tsd-good-wash: color-mix(in srgb, var(--mud-palette-success) 17%, transparent);
}

.tsd-head[b-x1lzov4vh4] {
    display: flex;
    gap: 0.6875rem;
    align-items: start;
}

.tsd-icon[b-x1lzov4vh4] {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: 6px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--tsd-warn-wash);
    color: var(--tsd-warn);
}

.tsd-title[b-x1lzov4vh4] {
    font-weight: 600;
    font-size: 1rem;
}

.tsd-body[b-x1lzov4vh4] {
    margin: 0.3125rem 0 0;
    color: var(--tsd-ink-3);
}

.tsd-list[b-x1lzov4vh4] {
    border: 1px solid var(--tsd-line);
    border-radius: 6px;
    overflow: hidden;
}

.tsd-row[b-x1lzov4vh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.6875rem;
    border-block-end: 1px solid var(--tsd-line);
}

.tsd-row:last-child[b-x1lzov4vh4] {
    border-block-end: none;
}

.tsd-name[b-x1lzov4vh4] {
    font-family: var(--tsd-mono);
    font-size: 0.75rem;
}

.tsd-tag[b-x1lzov4vh4] {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    padding: 0.09375rem 0.4375rem;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.tsd-same[b-x1lzov4vh4] {
    color: var(--tsd-good);
    background: var(--tsd-good-wash);
    border-color: var(--tsd-good-wash);
}

.tsd-gone[b-x1lzov4vh4] {
    color: var(--tsd-bad);
    background: var(--tsd-bad-wash);
    border-color: var(--tsd-bad-wash);
}

.tsd-new[b-x1lzov4vh4] {
    color: var(--tsd-warn);
    background: var(--tsd-warn-wash);
    border-color: var(--tsd-warn-wash);
}

.tsd-foot[b-x1lzov4vh4] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* /Pages/Dialogs/UserDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   USER DIALOG — "Identity Dossier"

   Design language
   ───────────────
   · Monochrome canvas. The only hue is the app's themed primary, spent on
     state and focus — never on decoration.
   · Hairlines instead of cards. Sections are separated by rules, not boxes.
   · Monospace as a design device: ordinals, handles, keys, chips.
   · One page-load motion (a staggered rise), then 180ms transitions.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

.ud-root[b-g5mtdok4qn] {
    --ud-accent:      var(--mud-palette-primary);
    --ud-accent-ink:  var(--mud-palette-primary-text);
    --ud-wash:        color-mix(in srgb, var(--mud-palette-primary)  9%, transparent);
    --ud-wash-soft:   color-mix(in srgb, var(--mud-palette-primary)  5%, transparent);
    --ud-ring:        color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);

    --ud-canvas:      var(--mud-palette-surface);
    --ud-panel:       color-mix(in srgb, var(--mud-palette-surface) 97%, var(--mud-palette-text-primary));
    --ud-sunk:        color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-text-primary));

    --ud-ink:         var(--mud-palette-text-primary);
    --ud-ink-2:       var(--mud-palette-text-secondary);
    --ud-ink-3:       color-mix(in srgb, var(--mud-palette-text-secondary) 62%, transparent);

    --ud-line:        color-mix(in srgb, var(--mud-palette-text-primary) 13%, transparent);
    --ud-line-soft:   color-mix(in srgb, var(--mud-palette-text-primary)  7%, transparent);

    --ud-ok:          var(--mud-palette-success);
    --ud-warn:        var(--mud-palette-warning);
    --ud-danger:      var(--mud-palette-error);

    --ud-mono:        ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --ud-r:           12px;
    --ud-r-sm:        8px;
    --ud-ease:        cubic-bezier(0.2, 0, 0, 1);
    --ud-dur:         180ms;

    --ud-shadow:      0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
    --ud-shadow-band: 0 1px 0 var(--ud-line), 0 10px 26px -18px rgba(0, 0, 0, 0.45);

    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ud-canvas);
    color: var(--ud-ink);
}

[dark-mode="true"] .ud-root[b-g5mtdok4qn] {
    --ud-panel:       color-mix(in srgb, var(--mud-palette-surface) 93%, #ffffff);
    --ud-sunk:        color-mix(in srgb, var(--mud-palette-surface) 88%, #000000);
    --ud-line:        rgba(255, 255, 255, 0.11);
    --ud-line-soft:   rgba(255, 255, 255, 0.06);
    --ud-wash:        color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    --ud-wash-soft:   color-mix(in srgb, var(--mud-palette-primary)  7%, transparent);
    --ud-ring:        color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    --ud-shadow:      0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.32);
    --ud-shadow-band: 0 1px 0 var(--ud-line), 0 12px 30px -20px rgba(0, 0, 0, 0.9);
}

/* ══ IDENTITY BAND ═══════════════════════════════════════════════════════ */

.ud-band[b-g5mtdok4qn] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--ud-panel);
    box-shadow: var(--ud-shadow-band);
}

/* Atmosphere: a fine diagonal weave plus one soft accent bloom. */
.ud-band-weave[b-g5mtdok4qn] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(135deg,
            var(--ud-line-soft) 0px, var(--ud-line-soft) 1px,
            transparent 1px, transparent 7px),
        radial-gradient(120% 180% at 100% -40%, var(--ud-wash) 0%, transparent 62%);
    opacity: 0.9;
}

/* the weave carries further on a dark ground — pull it back */
[dark-mode="true"] .ud-band-weave[b-g5mtdok4qn] { opacity: 0.5; }

.ud-band-row[b-g5mtdok4qn] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    min-width: 0;
}

/* Avatar — seated in a hairline ring rather than floating over the band */
.ud-band-ava[b-g5mtdok4qn] {
    flex-shrink: 0;
    line-height: 0;
    border-radius: 50%;
    padding: 3px;
    background: var(--ud-canvas);
    box-shadow: 0 0 0 1px var(--ud-line), var(--ud-shadow);
    transition: box-shadow var(--ud-dur) var(--ud-ease);
}
.ud-band-ava:hover[b-g5mtdok4qn] { box-shadow: 0 0 0 1px var(--ud-ring), var(--ud-shadow); }

/* the picker's own circle keeps its shape inside the plate */
.ud-band-ava[b-g5mtdok4qn]  .sm-ap-root { gap: 0; }
.ud-band-ava[b-g5mtdok4qn]  .sm-ap-label { display: none; }

.ud-band-id[b-g5mtdok4qn] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ud-eyebrow[b-g5mtdok4qn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ud-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ud-ink-3);
    line-height: 1;
}

.ud-eyebrow-tick[b-g5mtdok4qn] {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--ud-accent);
    flex-shrink: 0;
}

.ud-band-name[b-g5mtdok4qn] {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ud-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-band-sub[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ud-ink-2);
}

.ud-band-handle[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 11.5px;
    color: var(--ud-ink-3);
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-band-sep[b-g5mtdok4qn] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ud-line);
    flex-shrink: 0;
}

.ud-band-mail[b-g5mtdok4qn] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-band-state[b-g5mtdok4qn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 42%;
    flex-shrink: 0;
}

.ud-band-x[b-g5mtdok4qn] {
    all: unset;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--ud-ink-3);
    cursor: pointer;
    align-self: flex-start;
    transition: background var(--ud-dur) var(--ud-ease), color var(--ud-dur) var(--ud-ease);
}
.ud-band-x:hover[b-g5mtdok4qn] { background: var(--ud-sunk); color: var(--ud-ink); }
.ud-band-x:focus-visible[b-g5mtdok4qn] { outline: 2px solid var(--ud-ring); outline-offset: 2px; }
.ud-band-x[b-g5mtdok4qn]  .mud-icon-root { font-size: 18px; }

/* ── Status pills ───────────────────────────────────────────────────────── */

.ud-pill[b-g5mtdok4qn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    border-radius: 100px;
    font-family: var(--ud-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    border: 1px solid transparent;
    line-height: 1;
}
.ud-pill[b-g5mtdok4qn]  .ud-pill-ico { font-size: 12px; }

.ud-pill--ok[b-g5mtdok4qn] {
    color: var(--ud-ok);
    background: color-mix(in srgb, var(--mud-palette-success) 11%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 26%, transparent);
}
.ud-pill--warn[b-g5mtdok4qn] {
    color: var(--ud-warn);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}
.ud-pill--danger[b-g5mtdok4qn] {
    color: var(--ud-danger);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}
.ud-pill--mute[b-g5mtdok4qn] {
    color: var(--ud-ink-3);
    background: var(--ud-sunk);
    border-color: var(--ud-line-soft);
}

/* ══ BODY ════════════════════════════════════════════════════════════════ */

.ud-body[b-g5mtdok4qn] {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    max-height: calc(100vh - 12rem);
    min-height: 240px;
    padding: 26px;
    scrollbar-width: thin;
    scrollbar-color: var(--ud-line) transparent;
}

.ud-body[b-g5mtdok4qn]::-webkit-scrollbar { width: 10px; }
.ud-body[b-g5mtdok4qn]::-webkit-scrollbar-track { background: transparent; }
.ud-body[b-g5mtdok4qn]::-webkit-scrollbar-thumb {
    background: var(--ud-line);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 100px;
}
.ud-body[b-g5mtdok4qn]::-webkit-scrollbar-thumb:hover { background-color: var(--ud-ink-3); background-clip: content-box; }

.ud-sheet[b-g5mtdok4qn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}

.ud-col-main[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.ud-col-rail[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ══ SECTIONS ════════════════════════════════════════════════════════════ */

.ud-sec[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ud-sec-head[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ud-sec-no[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--ud-ink-3);
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--ud-sunk);
    transition: color var(--ud-dur) var(--ud-ease), background var(--ud-dur) var(--ud-ease);
}

.ud-sec[b-g5mtdok4qn]  .ud-sec-ico {
    font-size: 17px;
    color: var(--ud-ink-3);
    transition: color var(--ud-dur) var(--ud-ease);
}

.ud-sec-title[b-g5mtdok4qn] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ud-ink);
    line-height: 1;
    white-space: nowrap;
}

/* The rule runs out to the edge — editorial, not boxed. */
.ud-sec-rule[b-g5mtdok4qn] {
    flex: 1 1 auto;
    height: 1px;
    min-width: 16px;
    background: linear-gradient(to right, var(--ud-line), var(--ud-line-soft));
    transition: background var(--ud-dur) var(--ud-ease);
}

/* Focus anywhere inside the section lights its index and rule. */
.ud-sec:focus-within .ud-sec-no[b-g5mtdok4qn] {
    color: var(--ud-accent-ink);
    background: var(--ud-accent);
}
.ud-sec:focus-within[b-g5mtdok4qn]  .ud-sec-ico { color: var(--ud-accent); }
.ud-sec:focus-within .ud-sec-rule[b-g5mtdok4qn] {
    background: linear-gradient(to right, var(--ud-ring), var(--ud-line-soft));
}

.ud-sec-count[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--ud-ink-2);
    background: var(--ud-sunk);
    border: 1px solid var(--ud-line-soft);
    border-radius: 100px;
    padding: 3px 7px;
    flex-shrink: 0;
}

.ud-sec-act[b-g5mtdok4qn] {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--ud-ink-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ud-dur) var(--ud-ease), color var(--ud-dur) var(--ud-ease);
}
.ud-sec-act:hover[b-g5mtdok4qn] { background: var(--ud-sunk); color: var(--ud-danger); }
.ud-sec-act:focus-visible[b-g5mtdok4qn] { outline: 2px solid var(--ud-ring); outline-offset: 1px; }
.ud-sec-act[b-g5mtdok4qn]  .mud-icon-root { font-size: 15px; }

/* ── Field grids ────────────────────────────────────────────────────────── */

.ud-fields[b-g5mtdok4qn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 20px;
    align-items: start;
    min-width: 0;
}

.ud-span2[b-g5mtdok4qn] { grid-column: 1 / -1; }

.ud-stack[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ══ LEDGER — metadata ═══════════════════════════════════════════════════ */

.ud-ledger[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ud-line-soft);
    border-radius: var(--ud-r);
    background: var(--ud-panel);
    overflow: hidden;
}

/* Rows and the add row share one column template so the key gutter stays true. */
.ud-led-row[b-g5mtdok4qn],
.ud-led-add[b-g5mtdok4qn] {
    display: grid;
    grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-inline: 22px 10px;
}

.ud-led-row[b-g5mtdok4qn] {
    padding-block: 9px;
    border-bottom: 1px solid var(--ud-line-soft);
    transition: background var(--ud-dur) var(--ud-ease);
}
.ud-led-row:hover[b-g5mtdok4qn] { background: var(--ud-wash-soft); }
.ud-led-row.is-editing[b-g5mtdok4qn] { background: var(--ud-wash); }

.ud-led-k[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ud-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-led-v[b-g5mtdok4qn] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ud-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-led-act[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.28;
    transition: opacity var(--ud-dur) var(--ud-ease);
}
.ud-led-row:hover .ud-led-act[b-g5mtdok4qn],
.ud-led-row:focus-within .ud-led-act[b-g5mtdok4qn] { opacity: 1; }

/* Add / edit row — reads like a prompt line */
.ud-led-add[b-g5mtdok4qn] {
    position: relative;
    padding-block: 8px;
    background: var(--ud-sunk);
    transition: background var(--ud-dur) var(--ud-ease);
}
.ud-led-add.is-editing[b-g5mtdok4qn] { background: var(--ud-wash); }

/* The prompt glyph lives in the gutter, so it costs no grid column. */
.ud-led-caret[b-g5mtdok4qn] {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ud-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--ud-accent);
    opacity: 0.7;
    user-select: none;
}

.ud-led-ki[b-g5mtdok4qn],
.ud-led-vi[b-g5mtdok4qn] {
    all: unset;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    cursor: text;
    color: var(--ud-ink);
    line-height: 1.5;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ud-line);
    transition: border-color var(--ud-dur) var(--ud-ease);
}
.ud-led-ki:focus[b-g5mtdok4qn],
.ud-led-vi:focus[b-g5mtdok4qn] { border-bottom-color: var(--ud-accent); }

.ud-led-ki[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ud-accent);
}
.ud-led-vi[b-g5mtdok4qn] { font-size: 13px; }

.ud-led-ki[b-g5mtdok4qn]::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ud-accent);
    opacity: 0.45;
}
.ud-led-vi[b-g5mtdok4qn]::placeholder { color: var(--ud-ink-3); }

/* ── Empty state ────────────────────────────────────────────────────────── */

.ud-empty[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 14px 18px 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ud-ink-3);
    border-bottom: 1px solid var(--ud-line-soft);
}
.ud-empty[b-g5mtdok4qn]  .ud-empty-ico { font-size: 18px; opacity: 0.5; }

/* ── Small icon buttons ─────────────────────────────────────────────────── */

.ud-ib[b-g5mtdok4qn] {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--ud-ink-2);
    cursor: pointer;
    transition: background var(--ud-dur) var(--ud-ease), color var(--ud-dur) var(--ud-ease), opacity var(--ud-dur) var(--ud-ease);
}
.ud-ib:hover[b-g5mtdok4qn] { background: var(--ud-line-soft); color: var(--ud-ink); }
.ud-ib:focus-visible[b-g5mtdok4qn] { outline: 2px solid var(--ud-ring); outline-offset: 1px; }
.ud-ib[b-g5mtdok4qn]  .mud-icon-root { font-size: 15px; }

.ud-ib--danger:hover[b-g5mtdok4qn] {
    color: var(--ud-danger);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.ud-ib--go[b-g5mtdok4qn] {
    color: var(--ud-accent-ink);
    background: var(--ud-accent);
}
.ud-ib--go:hover[b-g5mtdok4qn] {
    color: var(--ud-accent-ink);
    background: var(--ud-accent);
    filter: brightness(1.08);
}
.ud-ib[disabled][b-g5mtdok4qn] {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══ RAIL PANELS ═════════════════════════════════════════════════════════ */

.ud-panel[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px 16px;
    border: 1px solid var(--ud-line-soft);
    border-radius: var(--ud-r);
    background: var(--ud-panel);
    box-shadow: var(--ud-shadow);
    min-width: 0;
}

.ud-panel-head[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ud-panel-head[b-g5mtdok4qn]  .ud-panel-ico { font-size: 16px; color: var(--ud-ink-3); }

.ud-panel-title[b-g5mtdok4qn] {
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ud-ink-2);
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-panel-note[b-g5mtdok4qn] {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ud-ink-3);
}

/* ══ CONTROL BOARD — security flags ══════════════════════════════════════ */

.ud-board[b-g5mtdok4qn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ud-tile[b-g5mtdok4qn] {
    --tile-tone: var(--mud-palette-primary);
    position: relative;
    padding: 6px 10px 8px;
    border: 1px solid var(--ud-line-soft);
    border-radius: var(--ud-r-sm);
    background: var(--ud-canvas);
    overflow: hidden;
    transition: border-color var(--ud-dur) var(--ud-ease), background var(--ud-dur) var(--ud-ease);
}

.ud-tile--danger[b-g5mtdok4qn] { --tile-tone: var(--mud-palette-error); }
.ud-tile--warn[b-g5mtdok4qn]   { --tile-tone: var(--mud-palette-warning); }

/* the state bar lights up when the flag is on */
.ud-tile[b-g5mtdok4qn]::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--tile-tone);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 220ms var(--ud-ease);
}

.ud-tile:hover[b-g5mtdok4qn] { border-color: var(--ud-line); }

.ud-tile.is-on[b-g5mtdok4qn] {
    border-color: color-mix(in srgb, var(--tile-tone) 34%, transparent);
    background: color-mix(in srgb, var(--tile-tone) 7%, var(--ud-canvas));
}
.ud-tile.is-on[b-g5mtdok4qn]::before { transform: scaleY(1); }

.ud-tile-note[b-g5mtdok4qn] {
    margin: 0;
    padding-inline-start: 30px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ud-ink-3);
}

/* MudCheckBox internals — the row must fill the tile so the whole strip is a hit target */
.ud-tile[b-g5mtdok4qn]  .ud-tile-cb { width: 100%; }
.ud-tile[b-g5mtdok4qn]  .mud-checkbox {
    width: 100%;
    margin: 0;
    align-items: center;
}
.ud-tile[b-g5mtdok4qn]  .mud-checkbox > .mud-icon-button { padding: 5px; }
.ud-tile[b-g5mtdok4qn]  .mud-checkbox .mud-typography {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.3;
    color: var(--ud-ink);
    white-space: normal;
    word-break: break-word;
}

/* ══ TOKEN FIELD — tags ══════════════════════════════════════════════════ */

.ud-tokens[b-g5mtdok4qn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 7px 8px;
    border: 1px solid var(--ud-line);
    border-radius: var(--ud-r-sm);
    background: var(--ud-canvas);
    cursor: text;
    transition: border-color var(--ud-dur) var(--ud-ease), box-shadow var(--ud-dur) var(--ud-ease);
}
.ud-tokens:hover[b-g5mtdok4qn] { border-color: var(--ud-ink-3); }
.ud-tokens.is-focus[b-g5mtdok4qn] {
    border-color: var(--ud-accent);
    box-shadow: 0 0 0 3px var(--ud-ring);
}

.ud-token[b-g5mtdok4qn] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px 3px 3px 9px;
    border-radius: 6px;
    background: var(--ud-wash);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    transition: background var(--ud-dur) var(--ud-ease);
}
.ud-token:hover[b-g5mtdok4qn] { background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent); }

.ud-token-txt[b-g5mtdok4qn] {
    font-family: var(--ud-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--ud-accent);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-token-x[b-g5mtdok4qn] {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--ud-accent);
    opacity: 0.55;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--ud-dur) var(--ud-ease), background var(--ud-dur) var(--ud-ease);
}
.ud-token-x:hover[b-g5mtdok4qn] { opacity: 1; background: var(--ud-ring); }
.ud-token-x:focus-visible[b-g5mtdok4qn] { outline: 2px solid var(--ud-ring); outline-offset: 1px; opacity: 1; }
.ud-token-x[b-g5mtdok4qn]  .mud-icon-root { font-size: 12px; }

.ud-token-in[b-g5mtdok4qn] {
    all: unset;
    flex: 1 1 70px;
    min-width: 70px;
    box-sizing: border-box;
    padding: 2px 2px;
    cursor: text;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ud-ink);
}
.ud-token-in[b-g5mtdok4qn]::placeholder { color: var(--ud-ink-3); }

/* ══ SIGNATURE ═══════════════════════════════════════════════════════════ */

.ud-sig[b-g5mtdok4qn] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--ud-line);
    border-radius: var(--ud-r-sm);
    background-color: var(--ud-canvas);
    /* faint plotting dots — this is a page you sign, not a blank box */
    background-image: radial-gradient(var(--ud-line) 0.9px, transparent 1px);
    background-size: 14px 14px;
    overflow: hidden;
}

.ud-sig[b-g5mtdok4qn]  .ud-sig-outer { width: 100%; gap: 6px; }
.ud-sig[b-g5mtdok4qn]  .mud-paper { background: transparent; }

.ud-sig-wait[b-g5mtdok4qn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 168px;
}

/* ══ MUDBLAZOR INPUT REFINEMENTS ═════════════════════════════════════════ */

/* Slightly softer corners and a calmer label scale, matched to the sheet. */
.ud-sheet[b-g5mtdok4qn]  .mud-input-outlined .mud-input-outlined-border { border-radius: 10px; }
.ud-sheet[b-g5mtdok4qn]  .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--ud-ink-3);
}
.ud-sheet[b-g5mtdok4qn]  .mud-input-label { letter-spacing: 0.01em; }
.ud-sheet[b-g5mtdok4qn]  .mud-input-helper-text { letter-spacing: 0.01em; }

/* ══ MOTION — one staggered rise on open ═════════════════════════════════ */

@keyframes ud-rise-b-g5mtdok4qn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

.ud-band[b-g5mtdok4qn],
.ud-sec[b-g5mtdok4qn],
.ud-panel[b-g5mtdok4qn] {
    animation: ud-rise-b-g5mtdok4qn 0.42s var(--ud-ease) both;
}

.ud-col-main .ud-sec:nth-child(1)[b-g5mtdok4qn] { animation-delay: 60ms; }
.ud-col-main .ud-sec:nth-child(2)[b-g5mtdok4qn] { animation-delay: 105ms; }
.ud-col-main .ud-sec:nth-child(3)[b-g5mtdok4qn] { animation-delay: 150ms; }
.ud-col-main .ud-sec:nth-child(4)[b-g5mtdok4qn] { animation-delay: 195ms; }

.ud-col-rail .ud-panel:nth-child(1)[b-g5mtdok4qn] { animation-delay: 90ms; }
.ud-col-rail .ud-panel:nth-child(2)[b-g5mtdok4qn] { animation-delay: 135ms; }
.ud-col-rail .ud-panel:nth-child(3)[b-g5mtdok4qn] { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
    .ud-band[b-g5mtdok4qn],
    .ud-sec[b-g5mtdok4qn],
    .ud-panel[b-g5mtdok4qn] { animation: none; }
    .ud-body[b-g5mtdok4qn] { scroll-behavior: auto; }
    .ud-tile[b-g5mtdok4qn]::before { transition: none; }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

/* Rail folds under the record */
@media (max-width: 1100px) {
    .ud-sheet[b-g5mtdok4qn] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .ud-col-rail[b-g5mtdok4qn] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .ud-col-rail .ud-panel:nth-child(1)[b-g5mtdok4qn] { grid-row: span 2; }
}

@media (max-width: 780px) {
    .ud-col-rail[b-g5mtdok4qn] { grid-template-columns: minmax(0, 1fr); }
    .ud-col-rail .ud-panel:nth-child(1)[b-g5mtdok4qn] { grid-row: auto; }
    .ud-band-state[b-g5mtdok4qn] { max-width: none; justify-content: flex-start; }
}

@media (max-width: 680px) {
    .ud-body[b-g5mtdok4qn] { padding: 18px 16px; }

    .ud-band-row[b-g5mtdok4qn] {
        flex-wrap: wrap;
        padding: 16px 16px 14px;
        gap: 14px;
    }
    .ud-band-id[b-g5mtdok4qn] { flex: 1 1 140px; }
    .ud-band-state[b-g5mtdok4qn] {
        order: 4;
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .ud-band-name[b-g5mtdok4qn] { font-size: 18px; }
    .ud-band-sub[b-g5mtdok4qn] { font-size: 12px; }

    .ud-fields[b-g5mtdok4qn] { grid-template-columns: minmax(0, 1fr); }

    .ud-led-row[b-g5mtdok4qn],
    .ud-led-add[b-g5mtdok4qn] { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .ud-led-row .ud-led-k[b-g5mtdok4qn],
    .ud-led-add .ud-led-ki[b-g5mtdok4qn] { grid-column: 1 / -1; }
}
/* /Pages/Home.razor.rz.scp.css */


/* ── Root & Background ─────────────────────────────────────── */
.hd-root[b-orjuq292k7] {
    min-height: calc(100vh - 64px);
    padding: 1.25rem 1.5rem 3rem;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
}

/* ── Staggered entrance animations ────────────────────────── */
.hd-enter[b-orjuq292k7] {
    opacity: 0;
    transform: translateY(14px);
    animation: hd-rise-b-orjuq292k7 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hd-enter-0[b-orjuq292k7] {
    animation-delay: 0.00s;
}

.hd-enter-1[b-orjuq292k7] {
    animation-delay: 0.06s;
}

.hd-enter-2[b-orjuq292k7] {
    animation-delay: 0.12s;
}

.hd-enter-3[b-orjuq292k7] {
    animation-delay: 0.18s;
}

.hd-enter-4[b-orjuq292k7] {
    animation-delay: 0.24s;
}

.hd-enter-5[b-orjuq292k7] {
    animation-delay: 0.30s;
}

.hd-enter-6[b-orjuq292k7] {
    animation-delay: 0.36s;
}

.hd-enter-7[b-orjuq292k7] {
    animation-delay: 0.42s;
}

.hd-enter-8[b-orjuq292k7] {
    animation-delay: 0.48s;
}

.hd-enter-9[b-orjuq292k7] {
    animation-delay: 0.54s;
}

.hd-enter-10[b-orjuq292k7] {
    animation-delay: 0.60s;
}

.hd-enter-11[b-orjuq292k7] {
    animation-delay: 0.66s;
}

.hd-enter-12[b-orjuq292k7] {
    animation-delay: 0.72s;
}

.hd-enter-13[b-orjuq292k7] {
    animation-delay: 0.78s;
}

.hd-enter-14[b-orjuq292k7] {
    animation-delay: 0.84s;
}

.hd-enter-15[b-orjuq292k7] {
    animation-delay: 0.90s;
}

.hd-enter-16[b-orjuq292k7] {
    animation-delay: 0.96s;
}

@keyframes hd-rise-b-orjuq292k7 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Content wrapper (sits above background) ───────────────── */
.hd-content[b-orjuq292k7] {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* ── Toolbar ───────────────────────────────────────────────── */
.hd-toolbar[b-orjuq292k7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.hd-toolbar-left[b-orjuq292k7] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.hd-toolbar-right[b-orjuq292k7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Brand icon */
.hd-brand-icon-wrap[b-orjuq292k7] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
    font-size: 1.25rem;
    transition: box-shadow 0.2s;
}

    .hd-brand-icon-wrap:hover[b-orjuq292k7] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    }

.hd-toolbar-identity[b-orjuq292k7] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.hd-toolbar-title[b-orjuq292k7] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-toolbar-sub[b-orjuq292k7] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
    letter-spacing: 0.01em;
}

/* Status badges */
.hd-badge[b-orjuq292k7] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.hd-badge-live[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.hd-badge-paused[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.hd-live-dot[b-orjuq292k7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    display: inline-block;
    animation: hd-pulse-b-orjuq292k7 1.8s ease-in-out infinite;
    position: relative;
}

    .hd-live-dot[b-orjuq292k7]::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-success);
        opacity: 0;
        animation: hd-ripple-b-orjuq292k7 1.8s ease-out infinite;
    }

@keyframes hd-pulse-b-orjuq292k7 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }
}

@keyframes hd-ripple-b-orjuq292k7 {
    0% {
        opacity: 0.7;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

.hd-interval-select[b-orjuq292k7] {
    width: 110px;
}

/* ── KPI Strip ─────────────────────────────────────────────── */
.hd-kpi-strip[b-orjuq292k7] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .hd-kpi-strip[b-orjuq292k7] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .hd-kpi-strip[b-orjuq292k7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hd-kpi[b-orjuq292k7] {
    position: relative;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: default;
    isolation: isolate;
}

    .hd-kpi[tabindex][b-orjuq292k7] {
        cursor: pointer;
    }

    .hd-kpi:hover[b-orjuq292k7] {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px -8px rgba(0,0,0,0.16);
    }

    /* Colored top accent bar */
    .hd-kpi[b-orjuq292k7]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 14px 14px 0 0;
        transition: opacity 0.2s;
    }

    /* Shimmer sweep on hover */
    .hd-kpi[b-orjuq292k7]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -80%;
        width: 50%;
        height: 100%;
        background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
        transition: left 0.55s ease;
        pointer-events: none;
        z-index: 0;
    }

    .hd-kpi:hover[b-orjuq292k7]::after {
        left: 150%;
    }

.hd-kpi-primary[b-orjuq292k7]::before {
    background: var(--mud-palette-primary);
}

.hd-kpi-success[b-orjuq292k7]::before {
    background: var(--mud-palette-success);
}

.hd-kpi-error[b-orjuq292k7]::before {
    background: var(--mud-palette-error);
}

.hd-kpi-warning[b-orjuq292k7]::before {
    background: var(--mud-palette-warning);
}

.hd-kpi-info[b-orjuq292k7]::before {
    background: var(--mud-palette-info);
}

.hd-kpi-neutral[b-orjuq292k7]::before {
    background: var(--mud-palette-divider);
}

.hd-kpi-primary[b-orjuq292k7] {
    border-top-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-divider));
}

.hd-kpi-success[b-orjuq292k7] {
    border-top-color: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-divider));
}

.hd-kpi-error[b-orjuq292k7] {
    border-top-color: color-mix(in srgb, var(--mud-palette-error) 30%, var(--mud-palette-divider));
}

.hd-kpi-warning[b-orjuq292k7] {
    border-top-color: color-mix(in srgb, var(--mud-palette-warning) 30%, var(--mud-palette-divider));
}

.hd-kpi-info[b-orjuq292k7] {
    border-top-color: color-mix(in srgb, var(--mud-palette-info) 30%, var(--mud-palette-divider));
}

.hd-kpi-label[b-orjuq292k7] {
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-disabled);
    position: relative;
    z-index: 1;
}

.hd-kpi-num[b-orjuq292k7] {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hd-kpi:hover .hd-kpi-num[b-orjuq292k7] {
    transform: scale(1.04);
}

.hd-kpi-primary .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-primary);
}

.hd-kpi-success .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-success);
}

.hd-kpi-error .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-error);
}

.hd-kpi-warning .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-warning);
}

.hd-kpi-info .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-info);
}

.hd-kpi-neutral .hd-kpi-num[b-orjuq292k7] {
    color: var(--mud-palette-text-secondary);
}

.hd-kpi-desc[b-orjuq292k7] {
    font-size: 0.67rem;
    color: var(--mud-palette-text-disabled);
    position: relative;
    z-index: 1;
    margin-top: 0.15rem;
}

/* Icon on KPI card (top-right corner) */
.hd-kpi-icon-corner[b-orjuq292k7] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    opacity: 0.08;
    font-size: 1.8rem !important;
    z-index: 0;
    transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hd-kpi:hover .hd-kpi-icon-corner[b-orjuq292k7] {
    opacity: 0.14;
    transform: scale(1.12) rotate(-5deg);
}

/* ── Two-column main layout ────────────────────────────────── */
.hd-main-grid[b-orjuq292k7] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .hd-main-grid[b-orjuq292k7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .hd-main-grid[b-orjuq292k7] {
        grid-template-columns: 1fr;
    }
}

/* ── Panel card ────────────────────────────────────────────── */
.hd-panel[b-orjuq292k7] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

    .hd-panel:hover[b-orjuq292k7] {
        box-shadow: 0 8px 32px -12px rgba(0,0,0,0.14);
    }

/* Panel header */
.hd-panel-header[b-orjuq292k7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

    /* Left accent bar */
    .hd-panel-header[b-orjuq292k7]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 0 2px 2px 0;
    }

    /* Subtle gradient shimmer */
    .hd-panel-header[b-orjuq292k7]::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        background-size: 200% 100%;
        animation: hd-header-shimmer-b-orjuq292k7 7s ease-in-out infinite;
        transition: opacity 0.3s;
    }

.hd-panel:hover .hd-panel-header[b-orjuq292k7]::after {
    opacity: 1;
}

/* Accent color variants */
.hd-accent-primary[b-orjuq292k7]::before {
    background: var(--mud-palette-primary);
    box-shadow: 2px 0 8px -2px var(--mud-palette-primary);
}

.hd-accent-primary[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent), transparent);
}

.hd-accent-success[b-orjuq292k7]::before {
    background: var(--mud-palette-success);
    box-shadow: 2px 0 8px -2px var(--mud-palette-success);
}

.hd-accent-success[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mud-palette-success) 6%, transparent), transparent);
}

.hd-accent-error[b-orjuq292k7]::before {
    background: var(--mud-palette-error);
    box-shadow: 2px 0 8px -2px var(--mud-palette-error);
}

.hd-accent-error[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mud-palette-error) 6%, transparent), transparent);
}

.hd-accent-warning[b-orjuq292k7]::before {
    background: var(--mud-palette-warning);
    box-shadow: 2px 0 8px -2px var(--mud-palette-warning);
}

.hd-accent-warning[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mud-palette-warning) 6%, transparent), transparent);
}

.hd-accent-info[b-orjuq292k7]::before {
    background: var(--mud-palette-info);
    box-shadow: 2px 0 8px -2px var(--mud-palette-info);
}

.hd-accent-info[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mud-palette-info) 6%, transparent), transparent);
}

.hd-accent-amber[b-orjuq292k7]::before {
    background: #f59e0b;
    box-shadow: 2px 0 8px -2px #f59e0b;
}

.hd-accent-amber[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
}

.hd-accent-purple[b-orjuq292k7]::before {
    background: #a855f7;
    box-shadow: 2px 0 8px -2px #a855f7;
}

.hd-accent-purple[b-orjuq292k7]::after {
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.06), transparent);
}

@keyframes hd-header-shimmer-b-orjuq292k7 {
    0%, 100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -200% 0;
    }
}

.hd-panel-title[b-orjuq292k7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hd-panel-title-icon[b-orjuq292k7] {
    font-size: 1.05rem !important;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hd-panel:hover .hd-panel-title-icon[b-orjuq292k7] {
    transform: scale(1.15) rotate(-5deg);
}

.hd-accent-primary .hd-panel-title-icon[b-orjuq292k7] {
    color: var(--mud-palette-primary);
}

.hd-accent-success .hd-panel-title-icon[b-orjuq292k7] {
    color: var(--mud-palette-success);
}

.hd-accent-error .hd-panel-title-icon[b-orjuq292k7] {
    color: var(--mud-palette-error);
}

.hd-accent-warning .hd-panel-title-icon[b-orjuq292k7] {
    color: var(--mud-palette-warning);
}

.hd-accent-info .hd-panel-title-icon[b-orjuq292k7] {
    color: var(--mud-palette-info);
}

.hd-accent-amber .hd-panel-title-icon[b-orjuq292k7] {
    color: #f59e0b;
}

.hd-accent-purple .hd-panel-title-icon[b-orjuq292k7] {
    color: #a855f7;
}

.hd-panel-title-sub[b-orjuq292k7] {
    display: block;
    font-size: 0.64rem;
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
    letter-spacing: 0;
    margin-top: 0.1rem;
}

.hd-panel-actions[b-orjuq292k7] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.hd-panel-body[b-orjuq292k7] {
    padding: 1rem;
    flex: 1;
}

.hd-panel-body-flush[b-orjuq292k7] {
    flex: 1;
    overflow: hidden;
}

/* ── Metric tiles (server health) ──────────────────────────── */
.hd-metric-grid[b-orjuq292k7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.hd-metric-grid-4[b-orjuq292k7] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .hd-metric-grid-4[b-orjuq292k7] {
        grid-template-columns: 1fr 1fr;
    }
}

.hd-tile[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .hd-tile:hover[b-orjuq292k7] {
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-background-gray));
        transform: translateY(-1px);
    }

.hd-tile-full[b-orjuq292k7] {
    grid-column: 1 / -1;
}

.hd-tile-danger[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

.hd-tile-label[b-orjuq292k7] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-disabled);
}

.hd-tile-value[b-orjuq292k7] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Progress bars ─────────────────────────────────────────── */
.hd-progress-row[b-orjuq292k7] {
    margin-bottom: 0.85rem;
}

    .hd-progress-row:last-child[b-orjuq292k7] {
        margin-bottom: 0;
    }

.hd-progress-meta[b-orjuq292k7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}

.hd-progress-label[b-orjuq292k7] {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hd-progress-val[b-orjuq292k7] {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Request stats highlight ────────────────────────────────── */
.hd-stat-hero[b-orjuq292k7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) );
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
}

    .hd-stat-hero[b-orjuq292k7]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.05) 50%, transparent 65%);
        background-size: 200% 100%;
        animation: hd-shine-b-orjuq292k7 3.5s ease-in-out infinite;
    }

@keyframes hd-shine-b-orjuq292k7 {
    0%, 100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -200% 0;
    }
}

.hd-stat-hero-label[b-orjuq292k7] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.hd-stat-hero-val[b-orjuq292k7] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* ── Email legend ──────────────────────────────────────────── */
.hd-email-legend[b-orjuq292k7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.hd-email-row[b-orjuq292k7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
}

    .hd-email-row:last-child[b-orjuq292k7] {
        border-bottom: none;
    }

.hd-email-indicator[b-orjuq292k7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-dot[b-orjuq292k7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hd-dot-success[b-orjuq292k7] {
    background: var(--mud-palette-success);
    box-shadow: 0 0 5px var(--mud-palette-success);
}

.hd-dot-warning[b-orjuq292k7] {
    background: var(--mud-palette-warning);
    box-shadow: 0 0 5px var(--mud-palette-warning);
}

.hd-dot-error[b-orjuq292k7] {
    background: var(--mud-palette-error);
    box-shadow: 0 0 5px var(--mud-palette-error);
}

.hd-email-name[b-orjuq292k7] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Count pills ───────────────────────────────────────────── */
.hd-pill[b-orjuq292k7] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hd-pill-primary[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    color: var(--mud-palette-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.hd-pill-success[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}

.hd-pill-error[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent);
    color: var(--mud-palette-error);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.hd-pill-warning[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-warning) 13%, transparent);
    color: var(--mud-palette-warning);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
}

.hd-pill-neutral[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-divider);
}

/* ── Tables ────────────────────────────────────────────────── */
.hd-table-wrap[b-orjuq292k7] {
    overflow-x: auto;
}

.hd-table[b-orjuq292k7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
}

    .hd-table thead th[b-orjuq292k7] {
        padding: 0.5rem 0.8rem;
        text-align: left;
        font-size: 0.60rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--mud-palette-text-disabled);
        background: color-mix(in srgb, var(--mud-palette-background-gray) 75%, transparent);
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .hd-table tbody tr[b-orjuq292k7] {
        border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
        transition: background 0.13s ease;
    }

        .hd-table tbody tr:nth-child(even)[b-orjuq292k7] {
            background: color-mix(in srgb, var(--mud-palette-background-gray) 40%, transparent);
        }

        .hd-table tbody tr:last-child[b-orjuq292k7] {
            border-bottom: none;
        }

        .hd-table tbody tr:hover[b-orjuq292k7] {
            background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
        }

    .hd-table td[b-orjuq292k7] {
        padding: 0.48rem 0.8rem;
        vertical-align: middle;
    }

.hd-mono[b-orjuq292k7] {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.hd-td-clip[b-orjuq292k7] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 0.76rem;
}

.hd-td-muted[b-orjuq292k7] {
    color: var(--mud-palette-text-secondary);
}

/* ── User rows ─────────────────────────────────────────────── */
.hd-user-list[b-orjuq292k7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hd-user-row[b-orjuq292k7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.55rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, transparent);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

    .hd-user-row:hover[b-orjuq292k7] {
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
        border-color: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
        transform: translateX(2px);
    }

/* Avatar */
.hd-avatar[b-orjuq292k7] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hd-avatar-sm[b-orjuq292k7] {
    width: 24px;
    height: 24px;
    font-size: 0.58rem;
}

.hd-user-row:hover .hd-avatar[b-orjuq292k7] {
    transform: scale(1.1);
}

.hd-user-info[b-orjuq292k7] {
    flex: 1;
    min-width: 0;
}

.hd-user-name[b-orjuq292k7] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-user-meta[b-orjuq292k7] {
    font-size: 0.63rem;
    color: var(--mud-palette-text-disabled);
    display: block;
}

/* Online dot */
.hd-online-dot[b-orjuq292k7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    flex-shrink: 0;
    box-shadow: 0 0 5px var(--mud-palette-success);
    position: relative;
}

    .hd-online-dot[b-orjuq292k7]::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-success);
        opacity: 0;
        animation: hd-ripple-b-orjuq292k7 2s ease-out infinite;
    }

/* Job badge */
.hd-job-badge[b-orjuq292k7] {
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.hd-job-ok[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}

.hd-job-fail[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent);
    color: var(--mud-palette-error);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

/* ── Login activity chart ─────────────────────────────────── */
.hd-chart-panel[b-orjuq292k7] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: box-shadow 0.22s;
}

    .hd-chart-panel:hover[b-orjuq292k7] {
        box-shadow: 0 8px 32px -12px rgba(0,0,0,0.14);
    }

/* ── Empty state ───────────────────────────────────────────── */
.hd-empty[b-orjuq292k7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    gap: 0.55rem;
    text-align: center;
}

.hd-empty-text[b-orjuq292k7] {
    font-size: 0.80rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Trace ID display ──────────────────────────────────────── */
.hd-trace-id[b-orjuq292k7] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, #a855f7 10%, transparent);
    color: #a855f7;
    border: 1px solid color-mix(in srgb, #a855f7 22%, transparent);
    transition: box-shadow 0.2s;
}

    .hd-trace-id:hover[b-orjuq292k7] {
        box-shadow: 0 0 10px -3px #a855f7;
    }

/* ── Section: full-width below grids ───────────────────────── */
.hd-full-panel[b-orjuq292k7] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: box-shadow 0.22s;
}

    .hd-full-panel:hover[b-orjuq292k7] {
        box-shadow: 0 8px 32px -12px rgba(0,0,0,0.14);
    }

/* ── Session log filter chips ──────────────────────────────── */
.hd-filter-bar[b-orjuq292k7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

/* ── Status badge (live/disabled/paused) for section cards ─── */
.hd-sec-badge[b-orjuq292k7] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hd-sec-badge-live[b-orjuq292k7] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.hd-sec-badge-disabled[b-orjuq292k7] {
    background: var(--mud-palette-action-hover);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-divider);
}

/* ── OTel metric tiles strip ────────────────────────────────── */
.hd-otel-grid[b-orjuq292k7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 800px) {
    .hd-otel-grid[b-orjuq292k7] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── MudProgressLinear shimmer ──────────────────────────────── */
.hd-panel-body[b-orjuq292k7]  .mud-progress-linear {
    border-radius: 99px !important;
    overflow: hidden;
}

/* ── Search input max-width ─────────────────────────────────── */
.hd-session-search[b-orjuq292k7] {
    min-width: 260px;
    max-width: 380px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hd-root[b-orjuq292k7] {
        padding: 0.75rem 0.75rem 2rem;
    }

    .hd-toolbar[b-orjuq292k7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hd-kpi-num[b-orjuq292k7] {
        font-size: 1.65rem;
    }
}
/* /Pages/MinioBrowser.razor.rz.scp.css */
.ob-root[b-p9c9bwmsth] {
    --ob-r-xs:   6px;
    --ob-r-sm:   10px;
    --ob-r:      14px;
    --ob-r-lg:   18px;
    --ob-sh-xs:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --ob-sh-sm:  0 1px 6px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --ob-sh:     0 2px 14px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.05);
    --ob-sh-lg:  0 4px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --ob-tint:   color-mix(in srgb, var(--mud-palette-primary) 7%,  transparent);
    --ob-tint-m: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --ob-tint-h: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    --ob-surf:   color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    --ob-side:   color-mix(in srgb, var(--mud-palette-background-gray) 65%, var(--mud-palette-surface));
    --ob-div:    color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
}

[dark-mode="true"] .ob-root[b-p9c9bwmsth] {
    --ob-sh-xs:  0 1px 3px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.16);
    --ob-sh-sm:  0 1px 6px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.20);
    --ob-sh:     0 2px 14px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.24);
    --ob-sh-lg:  0 4px 28px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.32);
    --ob-surf:   color-mix(in srgb, var(--mud-palette-background-gray) 30%, var(--mud-palette-surface));
    --ob-side:   color-mix(in srgb, var(--mud-palette-background-gray) 60%, var(--mud-palette-surface));
}

/* ── Root wrapper ───────────────────────────────────────────────── */
.ob-root[b-p9c9bwmsth] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 4.8rem);
}

/* ── Shell ──────────────────────────────────────────────────────── */
.ob-shell[b-p9c9bwmsth] {
    flex: 1;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* ── Top Bar ── */
.ob-topbar[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--ob-r);
    background: var(--mud-palette-surface);
    box-shadow: var(--ob-sh-sm);
    flex-shrink: 0;
    min-height: 46px;
    overflow: hidden;
}
.ob-topbar-icon[b-p9c9bwmsth] {
    width: 32px;
    height: 32px;
    border-radius: var(--ob-r-sm);
    background: var(--ob-tint-m);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ob-topbar-brand[b-p9c9bwmsth] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.ob-topbar-title[b-p9c9bwmsth] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    line-height: 1.2;
}
.ob-topbar-sub[b-p9c9bwmsth] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    line-height: 1.2;
}
.ob-topbar-divider[b-p9c9bwmsth] {
    width: 1px;
    height: 26px;
    background: var(--ob-div);
    flex-shrink: 0;
    margin: 0 2px;
}

/* ── Inline Header Stats ── */
.ob-hstat[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: var(--ob-r-sm);
    flex-shrink: 0;
    transition: background .12s;
}
.ob-hstat-val[b-p9c9bwmsth] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    line-height: 1;
}
.ob-hstat-lbl[b-p9c9bwmsth] {
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    line-height: 1;
}
.ob-hstat-bucket[b-p9c9bwmsth] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-hstat-active[b-p9c9bwmsth] {
    background: var(--ob-tint);
    border: 1px solid var(--ob-tint-m);
    max-width: 240px;
    overflow: hidden;
}

/* ── Search Result Badge ── */
.ob-search-badge[b-p9c9bwmsth] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: var(--ob-tint);
    border: 1px solid var(--ob-tint-m);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: default;
}


/* ── Body (sidebar + main) ── */
.ob-body[b-p9c9bwmsth] {
    display: flex;
    flex: 1;
    overflow: hidden;
    border-radius: var(--ob-r);
    background: var(--mud-palette-surface);
    box-shadow: var(--ob-sh);
}

/* ── Sidebar ── */
.ob-sidebar[b-p9c9bwmsth] {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--ob-div);
    border-radius: var(--ob-r) 0 0 var(--ob-r);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ob-side);
}
.ob-sidebar-header[b-p9c9bwmsth] {
    padding: 16px 14px 8px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}
.ob-sidebar-list[b-p9c9bwmsth] {
    flex: 1;
    overflow-y: auto;
    padding: 2px 8px 8px;
    scrollbar-width: thin;
}
.ob-bucket[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--ob-r-sm);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    user-select: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
}
.ob-bucket:hover[b-p9c9bwmsth] {
    background: var(--ob-tint);
    color: var(--mud-palette-text-primary);
}
.ob-bucket.active[b-p9c9bwmsth] {
    background: var(--ob-tint-m);
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.ob-bucket-dot[b-p9c9bwmsth] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .35;
    transition: opacity .15s;
}
.ob-bucket.active .ob-bucket-dot[b-p9c9bwmsth] { opacity: 1; }
.ob-bucket-label[b-p9c9bwmsth] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.ob-bucket-action[b-p9c9bwmsth] {
    width: 20px;
    height: 20px;
    border-radius: var(--ob-r-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}
.ob-bucket:hover .ob-bucket-action[b-p9c9bwmsth] { opacity: 1; }
.ob-bucket-action:hover[b-p9c9bwmsth] {
    background: var(--ob-tint-m);
    color: var(--mud-palette-primary);
}
.ob-sidebar-footer[b-p9c9bwmsth] {
    padding: 6px 8px 10px;
    border-top: 1px solid var(--ob-div);
    flex-shrink: 0;
}
.ob-sidebar-add[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: var(--ob-r-sm);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    transition: background .15s ease;
    user-select: none;
}
.ob-sidebar-add:hover[b-p9c9bwmsth] { background: var(--ob-tint-m); }

/* ── Main Explorer ── */
.ob-main[b-p9c9bwmsth] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Toolbar ── */
.ob-toolbar[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--ob-div);
    flex-shrink: 0;
    min-height: 44px;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 25%, var(--mud-palette-surface));
}
.ob-toolbar-sep[b-p9c9bwmsth] {
    width: 1px;
    height: 16px;
    background: var(--ob-div);
    flex-shrink: 0;
    margin: 0 3px;
}

/* ── Breadcrumb ── */
.ob-breadcrumb[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ob-crumb[b-p9c9bwmsth] {
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: var(--ob-r-xs);
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    transition: color .15s, background .15s;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-crumb:hover[b-p9c9bwmsth] { color: var(--mud-palette-primary); background: var(--ob-tint); }
.ob-crumb.active[b-p9c9bwmsth] { color: var(--mud-palette-text-primary); font-weight: 700; cursor: default; }
.ob-crumb.active:hover[b-p9c9bwmsth] { background: transparent; }
.ob-crumb-sep[b-p9c9bwmsth] { color: var(--mud-palette-text-disabled); font-size: 0.65rem; flex-shrink: 0; line-height: 1; opacity: .7; }

/* ── Stats inline ── */
.ob-stat[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 4px 10px;
    background: var(--ob-surf);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Content + Details ── */
.ob-content-wrap[b-p9c9bwmsth] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Drop Zone ── */
.ob-drop[b-p9c9bwmsth] {
    position: relative;
    flex: 1;
    overflow: hidden;       /* no scroll here — handled by ob-table-scroll */
    min-width: 0;
    display: flex;
    flex-direction: column; /* table-scroll + pagination stacked */
}
.ob-drop.drag-over[b-p9c9bwmsth]::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed var(--mud-palette-primary);
    border-radius: var(--ob-r);
    background: var(--ob-tint);
    pointer-events: none;
    z-index: 10;
}

/* ── Table scroll wrapper — body scrolls, header stays fixed ── */
.ob-table-scroll[b-p9c9bwmsth] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;           /* critical for flex child to shrink below content height */
    scrollbar-width: thin;
    position: relative;      /* needed for thead sticky positioning context */
}

/* ── Empty State ── */
.ob-empty[b-p9c9bwmsth] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 200px;
    padding: 32px;
    opacity: 0.5;
}

/* ── File Grid ── */
.ob-grid[b-p9c9bwmsth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    padding: 10px;
    align-content: start;
}
.ob-card[b-p9c9bwmsth] {
    border-radius: var(--ob-r-sm);
    padding: 12px 8px 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, border-color .15s, transform .1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    user-select: none;
    border: 1.5px solid transparent;
    min-height: 100px;
    position: relative;
}
.ob-card:hover[b-p9c9bwmsth] {
    background: var(--ob-tint);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.ob-card:active[b-p9c9bwmsth] { transform: scale(0.96); }
.ob-card.sel[b-p9c9bwmsth] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: var(--ob-tint-m);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.ob-icon-box[b-p9c9bwmsth] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ob-r-sm);
    flex-shrink: 0;
}
.ob-thumb[b-p9c9bwmsth] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--ob-r-xs);
    box-shadow: var(--ob-sh-xs);
}
.ob-card-name[b-p9c9bwmsth] {
    font-size: 0.69rem;
    font-weight: 500;
    text-align: center;
    word-break: break-word;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--mud-palette-text-primary);
}
.ob-card-size[b-p9c9bwmsth] {
    font-size: 0.61rem;
    color: var(--mud-palette-text-disabled);
    line-height: 1;
}
.ob-card-check[b-p9c9bwmsth] {
    position: absolute;
    top: 4px;
    left: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.ob-card:hover .ob-card-check[b-p9c9bwmsth],
.ob-card.sel .ob-card-check[b-p9c9bwmsth] { opacity: 1; }

/* ── File Table ── */
.ob-table[b-p9c9bwmsth] {
    width: 100%;
    border-collapse: collapse;
}
.ob-table thead th[b-p9c9bwmsth] {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mud-palette-text-disabled);
    padding: 8px 10px;
    text-align: left;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 75%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--ob-div);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color .12s;
}
.ob-table thead th:hover[b-p9c9bwmsth] { color: var(--mud-palette-text-secondary); }
.ob-row[b-p9c9bwmsth] {
    transition: background .1s;
    cursor: pointer;
}
.ob-row:hover[b-p9c9bwmsth] { background: var(--ob-tint); }
.ob-row.sel[b-p9c9bwmsth]  { background: var(--ob-tint-m); }
.ob-row td[b-p9c9bwmsth] {
    padding: 6px 10px;
    font-size: 0.77rem;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 30%, transparent);
    vertical-align: middle;
    max-width: 0;
}
.ob-row-name[b-p9c9bwmsth] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}
.ob-row-meta[b-p9c9bwmsth] {
    font-size: 0.71rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ── Details Panel ── */
.ob-details[b-p9c9bwmsth] {
    width: 220px;
    flex-shrink: 0;
    border-left: 1px solid var(--ob-div);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 12px;
    gap: 10px;
    background: var(--ob-surf);
    scrollbar-width: thin;
}
.ob-details-thumb[b-p9c9bwmsth] {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    border-radius: var(--ob-r-sm);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, transparent);
}
.ob-details-icon-box[b-p9c9bwmsth] {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, transparent);
    border-radius: var(--ob-r-sm);
}
.ob-details-name[b-p9c9bwmsth] {
    font-size: 0.82rem;
    font-weight: 700;
    word-break: break-all;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
}
.ob-prop[b-p9c9bwmsth] { display: flex; flex-direction: column; gap: 2px; }
.ob-prop-label[b-p9c9bwmsth] {
    font-size: 0.57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mud-palette-text-disabled);
}
.ob-prop-val[b-p9c9bwmsth] {
    font-size: 0.73rem;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}
.ob-actions[b-p9c9bwmsth] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ob-div);
}

/* ── Skeleton shimmer ── */
@keyframes ob-shimmer-b-p9c9bwmsth {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.ob-skel[b-p9c9bwmsth] {
    border-radius: var(--ob-r-sm);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mud-palette-background-gray) 80%, transparent) 25%,
        color-mix(in srgb, var(--mud-palette-divider) 55%, transparent) 50%,
        color-mix(in srgb, var(--mud-palette-background-gray) 80%, transparent) 75%
    );
    background-size: 1200px 100%;
    animation: ob-shimmer-b-p9c9bwmsth 1.6s ease-in-out infinite;
}

/* ── Upload row ── */
.ob-upload-row[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 35%, transparent);
}
.ob-upload-row:last-child[b-p9c9bwmsth] { border-bottom: none; }

/* ── Pagination Bar ────────────────────────────────────────────────── */
.ob-pagination-bar[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border-top: 1px solid var(--ob-div);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 20%, var(--mud-palette-surface));
    gap: 8px;
    flex-wrap: wrap;
}

.ob-pagination-info[b-p9c9bwmsth] {
    font-size: 0.71rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Move Progress Overlay ── */
.ob-move-overlay[b-p9c9bwmsth] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    pointer-events: all;
    animation: ob-slide-up-b-p9c9bwmsth .2s ease;
}

@keyframes ob-slide-up-b-p9c9bwmsth {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ob-move-card[b-p9c9bwmsth] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--ob-div);
    border-radius: var(--ob-r);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 14px 16px 10px;
    min-width: 300px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ob-move-header[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-move-title[b-p9c9bwmsth] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob-move-bar[b-p9c9bwmsth] {
    margin: 0 !important;
}

.ob-move-stats[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ob-move-stat[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 500;
}

.ob-move-stat-done[b-p9c9bwmsth] { color: var(--mud-palette-success); }
.ob-move-stat-fail[b-p9c9bwmsth] { color: var(--mud-palette-error); }
.ob-move-stat-total[b-p9c9bwmsth] {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
}

.ob-move-current[b-p9c9bwmsth] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background: var(--ob-tint-l);
    border-radius: var(--ob-r-sm);
    padding: 3px 7px;
    overflow: hidden;
}

.ob-move-current-name[b-p9c9bwmsth] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

[dark-mode="true"] .ob-move-card[b-p9c9bwmsth] {
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
/* /Pages/Playground/PlaygroundPanel.razor.rz.scp.css */
/* ============================================================================
   PlaygroundPanel – sticky parameters column
   ============================================================================

   The controls column is usually far taller than the preview column (the Rich
   Text Editor lab is ~2000px against ~560px), which left a screen and a half of
   dead space beside it. Capping the panel to the viewport and letting it scroll
   internally removes that; `sticky` then keeps it in view once the preview
   column grows past it (big base64 images, long event log).

   Two things this depends on, both easy to break:
     • No ancestor between here and the page scroller may clip overflow.
       `MudTabs Rounded` emits `.mud-tabs-rounded { overflow: hidden }`, which
       becomes the sticky scrollport and silently disables pinning – hence the
       outer tabs in ComponentPlayground.razor deliberately omit `Rounded`.
     • `.pg-controls` must be a plain element rendered by this component, since
       CSS isolation does not reach into child components' markup.
   ========================================================================== */

.pg-controls[b-me91gr3tod] {
    /* Offset of the app bar above the .md3-content scroll container, plus the
       gap above the panel and a little breathing room beneath it. */
    --pg-sticky-top: 8px;
    --pg-sticky-offset: 96px;
}

/* Only once the grid actually splits into two columns (MudBlazor lg = 1280px).
   Below that the columns stack and pinning would cover the preview. */
@media (min-width: 1280px) {

    .pg-controls[b-me91gr3tod] {
        position: sticky;
        top: var(--pg-sticky-top);
        max-height: calc(100vh - var(--pg-sticky-offset));
        overflow-y: auto;
        /* Don't chain the wheel to the page once this panel hits its end. */
        overscroll-behavior: contain;
        /* overflow clips the paper's elevation shadow; pad it back out. */
        padding: 4px;
        margin: -4px;
    }

        /* Slim scrollbar so the panel doesn't gain a heavy gutter. */
        .pg-controls[b-me91gr3tod]::-webkit-scrollbar {
            width: 8px;
        }

        .pg-controls[b-me91gr3tod]::-webkit-scrollbar-thumb {
            background-color: var(--mud-palette-lines-inputs, rgba(0,0,0,.24));
            border-radius: 4px;
        }

        .pg-controls[b-me91gr3tod]::-webkit-scrollbar-track {
            background: transparent;
        }
}
/* /Pages/Reports.razor.rz.scp.css */
/* ================================================================
   Reports.razor.css — Card Grid + Sidebar Design
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────────── */
.rpt-root[b-u4b3qgx0a4] {
    --rpt-accent: var(--mud-palette-primary);
    --rpt-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --rpt-accent-h: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    --rpt-surface: var(--mud-palette-surface);
    --rpt-bg: var(--mud-palette-background);
    --rpt-text: var(--mud-palette-text-primary);
    --rpt-text-soft: var(--mud-palette-text-secondary);
    --rpt-border: var(--mud-palette-divider);
    --rpt-border-h: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    --rpt-shadow: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.05);
    --rpt-shadow-h: 0 3px 10px rgba(0,0,0,.09), 0 8px 24px rgba(0,0,0,.07);
    --rpt-radius: 12px;
    --rpt-radius-sm: 8px;
    --rpt-radius-xs: 6px;
    --rpt-sidebar-w: 340px;
    --rpt-transition: all 0.18s ease;
    /* Layout */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    min-height: 0;
    overflow: hidden;
}

/* Dark mode token overrides */
[dark-mode="true"] .rpt-root[b-u4b3qgx0a4] {
    --rpt-shadow: 0 1px 3px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.30);
    --rpt-shadow-h: 0 3px 12px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.38);
}

/* ── Enter Animations ───────────────────────────────────────────── */
.rpt-enter[b-u4b3qgx0a4] {
    opacity: 0;
    transform: translateY(8px);
    animation: rpt-rise-b-u4b3qgx0a4 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rpt-enter-0[b-u4b3qgx0a4] {
    animation-delay: 0.00s;
}

.rpt-enter-1[b-u4b3qgx0a4] {
    animation-delay: 0.07s;
}

.rpt-enter-2[b-u4b3qgx0a4] {
    animation-delay: 0.14s;
}

@keyframes rpt-rise-b-u4b3qgx0a4 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   HEADER
   ================================================================ */
.rpt-header[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rpt-border);
}

.rpt-header-left[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rpt-header-icon-wrap[b-u4b3qgx0a4] {
    width: 36px;
    height: 36px;
    border-radius: var(--rpt-radius-sm);
    background: var(--rpt-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-u4b3qgx0a4] .rpt-header-icon-wrap .mud-icon-root {
    font-size: 1.15rem !important;
    color: var(--rpt-accent) !important;
}

.rpt-header-title-group[b-u4b3qgx0a4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rpt-page-title[b-u4b3qgx0a4] {
    font-size: 1rem;
    font-weight: 650;
    color: var(--rpt-text);
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.rpt-page-sub[b-u4b3qgx0a4] {
    font-size: 0.72rem;
    color: var(--rpt-text-soft);
    letter-spacing: 0.01em;
}

.rpt-header-actions[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Search field */
.rpt-search-wrap[b-u4b3qgx0a4] {
    width: 230px;
}

[b-u4b3qgx0a4] .rpt-search-field .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--rpt-border) !important;
}

[b-u4b3qgx0a4] .rpt-search-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--rpt-accent) !important;
}

/* Filter buttons */
[b-u4b3qgx0a4] .rpt-filter-btn .mud-button-root {
    border-color: var(--rpt-border) !important;
    border-radius: var(--rpt-radius-xs) !important;
}

/* ── Menu items ─────────────────────────────────────────────────── */
.rpt-menu-item[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--rpt-text);
    padding: 2px 0;
    transition: color 0.15s ease;
}

.rpt-menu-item--active[b-u4b3qgx0a4] {
    color: var(--rpt-accent) !important;
    font-weight: 600;
}

/* ── Active filter strip ────────────────────────────────────────── */
.rpt-filter-strip[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: var(--rpt-accent-soft);
    border: 1px solid var(--rpt-accent-h);
    border-radius: var(--rpt-radius-sm);
}

/* ================================================================
   TABLE
   ================================================================ */
.rpt-table-wrap[b-u4b3qgx0a4] {
    border: 1px solid var(--rpt-border);
    border-radius: var(--rpt-radius);
    box-shadow: var(--rpt-shadow);
    overflow: hidden;
    margin-top: 10px;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-container {
    height: calc(100vh - 10.9rem);
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--rpt-border) transparent;
}

/* No vertical column rules, ever */
[b-u4b3qgx0a4] .rpt-table .mud-table-cell {
    border-inline: none !important;
}

/* ── Header row ─────────────────────────────────────────────────── */
[b-u4b3qgx0a4] .rpt-table .mud-table-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-background-grey) 65%, var(--rpt-surface));
    color: var(--rpt-text-soft);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-block-end: 1px solid var(--rpt-border);
    padding-block: 9px;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-sort-label-icon {
    opacity: 0.5;
}

.rpt-th-sort[b-u4b3qgx0a4] {
    text-align: right;
}

[b-u4b3qgx0a4] .rpt-th-sort .mud-table-sort-label {
    justify-content: flex-end;
}

.rpt-th-actions[b-u4b3qgx0a4] {
    text-align: right;
    width: 188px;
}

/* ── Body rows ──────────────────────────────────────────────────── */
[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row {
    border-block-end: 1px solid var(--rpt-border);
    cursor: pointer;
    transition: var(--rpt-transition);
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row:last-child {
    border-block-end: none;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row .mud-table-cell {
    padding-block: 8px;
    font-size: 0.8rem;
    color: var(--rpt-text);
}

/* Left accent bar, animated in on hover. Scoped to the row's first <td> rather
   than the <tr> itself — `position: relative` on a table-row doesn't reliably
   act as a containing block across browsers and was perturbing the table's
   column-width layout, shifting every other column. A <td> is a normal cell
   box, so an absolutely-positioned overlay inside it never affects sizing. */
[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row .mud-table-cell:first-child {
    position: relative;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row .mud-table-cell:first-child::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: var(--rpt-accent);
    transform: scaleY(0);
    transition: transform 0.18s ease;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row:hover {
    background-color: var(--rpt-accent-soft) !important;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row:hover .mud-table-cell:first-child::before {
    transform: scaleY(1);
}

/* Selected rows */
[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row.mud-selected-item {
    background-color: var(--rpt-accent-h) !important;
}

[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row.mud-selected-item .mud-table-cell:first-child::before {
    transform: scaleY(1);
}

/* Hidden reports — dimmed instead of the old diagonal hatch */
[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row.rpt-row-hidden {
    opacity: 0.6;
}

/* ── Report cell ────────────────────────────────────────────────── */
.rpt-cell-report[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rpt-row-icon[b-u4b3qgx0a4] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--rpt-radius-xs);
    background: var(--rpt-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-u4b3qgx0a4] .rpt-row-icon .mud-icon-root {
    font-size: 0.95rem !important;
    color: var(--rpt-accent) !important;
}

.rpt-row-title-group[b-u4b3qgx0a4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rpt-row-name[b-u4b3qgx0a4] {
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--rpt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.rpt-row-module[b-u4b3qgx0a4] {
    font-size: 0.68rem;
    color: var(--rpt-accent);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Chips ──────────────────────────────────────────────────────── */
[b-u4b3qgx0a4] .rpt-chip.mud-chip {
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    height: 20px !important;
    padding: 0 8px !important;
}

[b-u4b3qgx0a4] .rpt-chip--type.mud-chip {
    border-color: var(--rpt-border) !important;
    color: var(--rpt-text-soft) !important;
}

/* ── Sort column ────────────────────────────────────────────────── */
.rpt-td-sort[b-u4b3qgx0a4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rpt-text-soft);
}

/* ── Visibility pill ────────────────────────────────────────────── */
.rpt-hidden-pill[b-u4b3qgx0a4] {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rpt-text-soft);
    background: color-mix(in srgb, var(--rpt-text-soft) 14%, transparent);
    border-radius: var(--rpt-radius-xs);
    padding: 2px 7px;
}

/* ── Actions cell ───────────────────────────────────────────────── */
.rpt-td-actions[b-u4b3qgx0a4] {
    text-align: right;
    white-space: nowrap;
}

.rpt-row-actions[b-u4b3qgx0a4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[b-u4b3qgx0a4] .rpt-row-action-btn {
    border-radius: var(--rpt-radius-xs) !important;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}


[b-u4b3qgx0a4] .rpt-table .mud-table-body .mud-table-row:hover .rpt-row-action-btn,
[b-u4b3qgx0a4] .rpt-row-action-btn:focus-within {
    opacity: 1;
}

[b-u4b3qgx0a4] .mud-button-soft-color {
    border-radius: var(--rpt-radius-xs) !important;
}

/* ================================================================
   SKELETON TABLE (loading state)
   ================================================================ */
.rpt-skel-table[b-u4b3qgx0a4] {
    display: flex;
    flex-direction: column;
}

.rpt-skel-head-row[b-u4b3qgx0a4],
.rpt-skel-row[b-u4b3qgx0a4] {
    display: grid;
    grid-template-columns: 16px minmax(0, 2.4fr) 0.9fr 0.9fr 0.6fr 0.8fr 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
}

.rpt-skel-head-row[b-u4b3qgx0a4] {
    background: color-mix(in srgb, var(--mud-palette-background-grey) 65%, var(--rpt-surface));
    border-bottom: 1px solid var(--rpt-border);
}

.rpt-skel-row[b-u4b3qgx0a4] {
    border-bottom: 1px solid var(--rpt-border);
}

    .rpt-skel-row:last-child[b-u4b3qgx0a4] {
        border-bottom: none;
    }

.rpt-skel-report[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rpt-skel-report-text[b-u4b3qgx0a4] {
    flex: 1;
    min-width: 0;
}

.rpt-skel-avatar[b-u4b3qgx0a4] {
    border-radius: var(--rpt-radius-xs) !important;
    flex-shrink: 0 !important;
}

.rpt-skel-checkbox[b-u4b3qgx0a4] {
    border-radius: 3px !important;
}

.rpt-skel-chip[b-u4b3qgx0a4] {
    border-radius: 999px !important;
}

.rpt-skel-sort[b-u4b3qgx0a4] {
    justify-self: end;
}

.rpt-skel-actions[b-u4b3qgx0a4] {
    justify-self: end;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.rpt-empty[b-u4b3qgx0a4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 24px;
    text-align: center;
}

.rpt-empty-icon-wrap[b-u4b3qgx0a4] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rpt-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

[b-u4b3qgx0a4] .rpt-empty-icon-wrap .mud-icon-root {
    font-size: 2rem !important;
    color: var(--rpt-accent) !important;
    opacity: 0.65;
}

.rpt-empty-title[b-u4b3qgx0a4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rpt-text);
}

.rpt-empty-sub[b-u4b3qgx0a4] {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--rpt-text-soft);
    max-width: 280px;
    line-height: 1.55;
}

/* ================================================================
   SIDEBAR (add/edit form)
   ================================================================ */
.rpt-sidebar[b-u4b3qgx0a4] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--rpt-sidebar-w);
    background: var(--rpt-surface);
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--rpt-border));
    box-shadow: -6px 0 32px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + 2px));
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1200;
}

.sidebar-open .rpt-sidebar[b-u4b3qgx0a4] {
    transform: translateX(0);
}

[dark-mode="true"] .rpt-sidebar[b-u4b3qgx0a4] {
    box-shadow: -6px 0 32px rgba(0,0,0,0.45);
    border-left-color: color-mix(in srgb, var(--mud-palette-primary) 25%, var(--rpt-border));
}

/* Sidebar header */
.rpt-sidebar-header[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--rpt-border);
    background: linear-gradient(135deg, var(--rpt-accent-soft) 0%, transparent 65%);
    flex-shrink: 0;
}

.rpt-sidebar-header-left[b-u4b3qgx0a4] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rpt-sidebar-icon-wrap[b-u4b3qgx0a4] {
    width: 30px;
    height: 30px;
    border-radius: var(--rpt-radius-xs);
    background: var(--rpt-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-u4b3qgx0a4] .rpt-sidebar-icon-wrap .mud-icon-root {
    font-size: 1.05rem !important;
    color: var(--rpt-accent) !important;
}

.rpt-sidebar-title[b-u4b3qgx0a4] {
    font-size: 0.87rem;
    font-weight: 650;
    color: var(--rpt-text);
    letter-spacing: 0.01em;
}

[b-u4b3qgx0a4] .rpt-sidebar-close {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rpt-radius-xs) !important;
    color: var(--rpt-text-soft) !important;
}

    [b-u4b3qgx0a4] .rpt-sidebar-close:hover {
        background: color-mix(in srgb, var(--rpt-text) 8%, transparent) !important;
    }

/* Sidebar body */
.rpt-sidebar-body[b-u4b3qgx0a4] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--rpt-border) transparent;
}

    .rpt-sidebar-body[b-u4b3qgx0a4]::-webkit-scrollbar {
        width: 4px;
    }

    .rpt-sidebar-body[b-u4b3qgx0a4]::-webkit-scrollbar-track {
        background: transparent;
    }

    .rpt-sidebar-body[b-u4b3qgx0a4]::-webkit-scrollbar-thumb {
        background: var(--rpt-border);
        border-radius: 4px;
    }

/* Sidebar footer */
.rpt-sidebar-footer[b-u4b3qgx0a4] {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--rpt-border);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    flex-shrink: 0;
}

[b-u4b3qgx0a4] .rpt-sidebar-footer .mud-button-root {
    flex: 1;
}

/* Sidebar loading */
.rpt-sidebar-loading[b-u4b3qgx0a4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rpt-sidebar-loading-text[b-u4b3qgx0a4] {
    font-size: 0.8rem;
    color: var(--rpt-text-soft);
    letter-spacing: 0.01em;
}

/* ================================================================
   BACKDROP (when sidebar is open)
   ================================================================ */
.rpt-backdrop[b-u4b3qgx0a4] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 1199;
    transition: opacity 0.24s ease;
}

.sidebar-open .rpt-backdrop[b-u4b3qgx0a4] {
    display: block;
}

[dark-mode="true"] .sidebar-open .rpt-backdrop[b-u4b3qgx0a4] {
    background: rgba(0, 0, 10, 0.45);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .rpt-root[b-u4b3qgx0a4] {
        --rpt-sidebar-w: 100vw;
        padding: 12px;
    }

    .rpt-search-wrap[b-u4b3qgx0a4] {
        width: 100%;
        flex: 1;
    }

    .rpt-header-actions[b-u4b3qgx0a4] {
        width: 100%;
    }
}
/* /Pages/Terms.razor.rz.scp.css */
.terms-dashboard-root[b-cxbeck7zh1] {
    --bg-glass: rgba(255, 255, 255, 0.45);
    --bg-glass-hover: rgba(255, 255, 255, 0.65);
    --border-color: rgba(0, 0, 0, 0.06);
    --border-highlight: rgba(52, 129, 229, 0.2);
    --text-primary: #2c2c2c;
    --text-secondary: #7a7a7a;
    --accent-color: #3481e5;
    --accent-glow: rgba(52, 129, 229, 0.12);
    --accent-soft: rgba(52, 129, 229, 0.08);
    --shadow-soft: rgba(0, 0, 0, 0.02);
    --shadow-card: rgba(0, 0, 0, 0.04);
    --row-alt: rgba(0, 0, 0, 0.01);
    
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    border-radius: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px -10px var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides */
[dark-mode="true"] .terms-dashboard-root[b-cxbeck7zh1] {
    --bg-glass: rgba(25, 25, 25, 0.55);
    --bg-glass-hover: rgba(35, 35, 35, 0.7);
    --border-color: rgba(255, 255, 255, 0.06);
    --border-highlight: rgba(137, 180, 228, 0.25);
    --text-primary: #e8e6e1;
    --text-secondary: #8a8a8a;
    --accent-color: #89b4e4;
    --accent-glow: rgba(137, 180, 228, 0.15);
    --accent-soft: rgba(137, 180, 228, 0.08);
    --shadow-soft: rgba(0, 0, 0, 0.2);
    --shadow-card: rgba(0, 0, 0, 0.3);
    --row-alt: rgba(255, 255, 255, 0.01);
}

/* Header Area styling */
.dashboard-header[b-cxbeck7zh1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title[b-cxbeck7zh1] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
}

.dashboard-subtitle[b-cxbeck7zh1] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Create Button */
.btn-create-term[b-cxbeck7zh1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--accent-color);
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px 0 var(--accent-glow);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-create-term:hover[b-cxbeck7zh1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 var(--accent-glow);
    filter: brightness(1.08);
}

.btn-create-term:active[b-cxbeck7zh1] {
    transform: translateY(0);
}

.btn-create-term .btn-icon[b-cxbeck7zh1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-create-term.soft[b-cxbeck7zh1] {
    background: var(--accent-soft);
    color: var(--accent-color);
    box-shadow: none;
    border: 1px solid var(--border-highlight);
}

.btn-create-term.soft:hover[b-cxbeck7zh1] {
    background: var(--accent-color);
    color: #ffffff;
}

/* Toolbar area */
.dashboard-toolbar[b-cxbeck7zh1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 8px;
}

.search-wrapper[b-cxbeck7zh1] {
    position: relative;
    display: flex;
    align-items: center;
    width: 320px;
    max-width: 100%;
}

.search-icon[b-cxbeck7zh1] {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 20px;
}

.search-input[b-cxbeck7zh1] {
    width: 100%;
    padding: 10px 14px 10px 42px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

[dark-mode="true"] .search-input[b-cxbeck7zh1] {
    background: rgba(0, 0, 0, 0.15);
}

.search-input:focus[b-cxbeck7zh1] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-glass-hover);
}

.terms-count[b-cxbeck7zh1] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Grid & Table Container */
.grid-container[b-cxbeck7zh1] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px -10px var(--shadow-card);
}

[dark-mode="true"] .grid-container[b-cxbeck7zh1] {
    background: rgba(0, 0, 0, 0.1);
}

.modern-table[b-cxbeck7zh1] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.modern-table th[b-cxbeck7zh1] {
    padding: 14px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.02);
}

[dark-mode="true"] .modern-table th[b-cxbeck7zh1] {
    background: rgba(255, 255, 255, 0.02);
}

.modern-table td[b-cxbeck7zh1] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.table-row[b-cxbeck7zh1] {
    transition: background-color 0.2s ease;
}

.table-row:nth-child(even)[b-cxbeck7zh1] {
    background-color: var(--row-alt);
}

.table-row:hover[b-cxbeck7zh1] {
    background-color: var(--bg-glass-hover);
}

/* Columns widths and cell styling */
.col-title[b-cxbeck7zh1] { width: 35%; }
.col-roles[b-cxbeck7zh1] { width: 35%; }
.col-status[b-cxbeck7zh1] { width: 12%; }
.col-date[b-cxbeck7zh1] { width: 13%; }
.col-actions[b-cxbeck7zh1] { width: 5%; text-align: right; }

.cell-title-wrapper[b-cxbeck7zh1] {
    cursor: pointer;
}

.term-title-text[b-cxbeck7zh1] {
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.cell-title-wrapper:hover .term-title-text[b-cxbeck7zh1] {
    color: var(--accent-color);
    text-decoration: underline;
}

.roles-wrapper[b-cxbeck7zh1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-badge[b-cxbeck7zh1] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[dark-mode="true"] .role-badge[b-cxbeck7zh1] {
    background: rgba(255, 255, 255, 0.06);
}

.role-badge.none[b-cxbeck7zh1] {
    background: var(--accent-soft);
    color: var(--accent-color);
    border-color: var(--border-highlight);
}

/* Status Pill */
.status-pill[b-cxbeck7zh1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-pill.active[b-cxbeck7zh1] {
    background: rgba(56, 142, 60, 0.08);
    color: #2e7d32;
    border: 1px solid rgba(56, 142, 60, 0.15);
}

.status-pill.inactive[b-cxbeck7zh1] {
    background: rgba(142, 142, 142, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.status-dot[b-cxbeck7zh1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-pill.active .status-dot[b-cxbeck7zh1] {
    position: relative;
    animation: pulseGlow-b-cxbeck7zh1 2s infinite;
}

@keyframes pulseGlow-b-cxbeck7zh1 {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(46, 125, 50, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

.date-text[b-cxbeck7zh1] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Action buttons */
.actions-wrapper[b-cxbeck7zh1] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.action-btn[b-cxbeck7zh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-cxbeck7zh1] {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.3);
}

[dark-mode="true"] .action-btn:hover[b-cxbeck7zh1] {
    background: rgba(255, 255, 255, 0.05);
}

.action-btn.edit:hover[b-cxbeck7zh1] {
    color: var(--accent-color);
    background: var(--accent-soft);
    border-color: var(--border-highlight);
}

.action-btn.delete:hover[b-cxbeck7zh1] {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.08);
    border-color: rgba(211, 47, 47, 0.15);
}

/* Loading & Empty States */
.loading-state[b-cxbeck7zh1], .empty-state[b-cxbeck7zh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

[dark-mode="true"] .loading-state[b-cxbeck7zh1], 
[dark-mode="true"] .empty-state[b-cxbeck7zh1] {
    background: rgba(0, 0, 0, 0.15);
}

.spinner[b-cxbeck7zh1] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-cxbeck7zh1 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-cxbeck7zh1 {
    to { transform: rotate(360deg); }
}

.loading-text[b-cxbeck7zh1] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.empty-icon-wrapper[b-cxbeck7zh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--shadow-soft);
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.empty-state h3[b-cxbeck7zh1] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.empty-state p[b-cxbeck7zh1] {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 320px;
    margin: 0 0 24px 0;
}

/* Pagination Styling */
.pagination-container[b-cxbeck7zh1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.pagination-btn[b-cxbeck7zh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-cxbeck7zh1] {
    background: var(--bg-glass-hover);
    border-color: var(--accent-color);
}

.pagination-btn:disabled[b-cxbeck7zh1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-pages[b-cxbeck7zh1] {
    display: flex;
    gap: 4px;
}

.pagination-page-btn[b-cxbeck7zh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-page-btn:hover[b-cxbeck7zh1] {
    background: var(--bg-glass-hover);
    border-color: var(--border-color);
}

.pagination-page-btn.active[b-cxbeck7zh1] {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px 0 var(--accent-glow);
}
/* /Pages/UserActivities.razor.rz.scp.css */
/* ══ Design tokens ═══════════════════════════════════════════════════════════
   "Security operations" surface — quiet, layered, semantic. Shares the visual
   language of the DatabaseLogs page: feather-light shadows, 8px rhythm,
   uppercase micro-labels, soft semantic colour per event class.            */
.ua-root[b-5dy6slcg90] {
    --ua-r-sm:    6px;
    --ua-r:       12px;
    --ua-sh-xs:   0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    --ua-sh:      0 2px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    --ua-surf:    color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    --ua-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 65%, var(--mud-palette-surface));
    --ua-div:     color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
    --ua-created: var(--mud-palette-success);
    --ua-roles:   var(--mud-palette-info);
    --ua-password: var(--mud-palette-warning);
    --ua-danger:  var(--mud-palette-error);

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

[dark-mode="true"] .ua-root[b-5dy6slcg90] {
    --ua-sh-xs:   0 1px 3px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18);
    --ua-sh:      0 2px 12px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.22);
    --ua-surf:    color-mix(in srgb, var(--mud-palette-background-gray) 35%, var(--mud-palette-surface));
    --ua-surf-alt: color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-surface));
}

/* ══ Staggered entrance ══════════════════════════════════════════════════════ */
.ua-enter[b-5dy6slcg90] {
    opacity: 0;
    transform: translateY(10px);
    animation: ua-rise-b-5dy6slcg90 .4s cubic-bezier(.22, 1, .36, 1) forwards;
}

.ua-enter-0[b-5dy6slcg90] { animation-delay: 0s; }
.ua-enter-1[b-5dy6slcg90] { animation-delay: .08s; }
.ua-enter-2[b-5dy6slcg90] { animation-delay: .16s; }

@keyframes ua-rise-b-5dy6slcg90 {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ua-enter[b-5dy6slcg90] { animation: none; opacity: 1; transform: none; }
}

/* ══ Stat cards ══════════════════════════════════════════════════════════════ */
.ua-stats[b-5dy6slcg90] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

@media (max-width: 1400px) { .ua-stats[b-5dy6slcg90] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ua-stats[b-5dy6slcg90] { grid-template-columns: repeat(2, 1fr); } }

.ua-stat[b-5dy6slcg90] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--ua-surf);
    border: 1px solid var(--ua-div);
    border-radius: var(--ua-r);
    box-shadow: var(--ua-sh-xs);
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.ua-stat:hover[b-5dy6slcg90] {
    box-shadow: var(--ua-sh);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    transform: translateY(-1px);
}

/* Left accent rail */
.ua-stat[b-5dy6slcg90]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.ua-stat--total[b-5dy6slcg90]::before    { background: var(--mud-palette-primary); }
.ua-stat--created[b-5dy6slcg90]::before  { background: var(--ua-created); }
.ua-stat--roles[b-5dy6slcg90]::before    { background: var(--ua-roles); }
.ua-stat--password[b-5dy6slcg90]::before { background: var(--ua-password); }
.ua-stat--logins[b-5dy6slcg90]::before   { background: var(--mud-palette-secondary); }
.ua-stat--time[b-5dy6slcg90]::before     { background: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); }

.ua-stat-icon[b-5dy6slcg90] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ua-r-sm);
    flex-shrink: 0;
}

.ua-stat--total    .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);   color: var(--mud-palette-primary); }
.ua-stat--created  .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--ua-created) 10%, transparent);            color: var(--ua-created); }
.ua-stat--roles    .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--ua-roles) 10%, transparent);              color: var(--ua-roles); }
.ua-stat--password .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--ua-password) 10%, transparent);           color: var(--ua-password); }
.ua-stat--logins   .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent); color: var(--mud-palette-secondary); }
.ua-stat--time     .ua-stat-icon[b-5dy6slcg90] { background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);      color: var(--mud-palette-info); }

.ua-stat-body[b-5dy6slcg90] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.ua-stat-val[b-5dy6slcg90] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.ua-stat-val--sm[b-5dy6slcg90] { font-size: .82rem; font-weight: 600; }

.ua-stat-sub[b-5dy6slcg90] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--ua-danger);
    letter-spacing: .02em;
}

.ua-stat-lbl[b-5dy6slcg90] {
    font-size: .67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ══ Filter bar ══════════════════════════════════════════════════════════════ */
.ua-filters[b-5dy6slcg90] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ua-surf);
    border: 1px solid var(--ua-div);
    border-radius: var(--ua-r);
    box-shadow: var(--ua-sh-xs);
}

.ua-presets[b-5dy6slcg90] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ua-chip[b-5dy6slcg90] {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--ua-div);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .01em;
    cursor: pointer;
    transition: all .2s ease;
}

.ua-chip:hover[b-5dy6slcg90] {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.ua-chip:focus-visible[b-5dy6slcg90] {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    outline-offset: 2px;
}

.ua-chip--active[b-5dy6slcg90] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.ua-filter-row[b-5dy6slcg90] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ua-filter-field[b-5dy6slcg90] {
    flex: 1 1 210px;
    min-width: 180px;
}

.ua-filter-field--range[b-5dy6slcg90] { flex: 1 1 260px; }

.ua-ghost[b-5dy6slcg90] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--ua-div);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}

.ua-ghost:hover[b-5dy6slcg90] {
    color: var(--ua-danger);
    border-color: color-mix(in srgb, var(--ua-danger) 35%, transparent);
    background: color-mix(in srgb, var(--ua-danger) 7%, transparent);
}

.ua-ghost:focus-visible[b-5dy6slcg90] {
    outline: 3px solid color-mix(in srgb, var(--ua-danger) 22%, transparent);
    outline-offset: 2px;
}

/* ══ Tabs / tables ═══════════════════════════════════════════════════════════ */
.ua-tabs[b-5dy6slcg90] {
    flex: 1;
    min-height: 0;
}

.ua-tabs[b-5dy6slcg90]  .ua-panel {
    padding-top: 4px;
}

/* Column headers — uppercase micro-labels */
.ua-tabs[b-5dy6slcg90]  .ua-table th,
.ua-tabs[b-5dy6slcg90]  .ua-table .mud-table-sort-label {
    font-size: .69rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ua-tabs[b-5dy6slcg90]  .ua-table .mud-table-container {
    overflow-x: auto;
}

.ua-tabs[b-5dy6slcg90]  .ua-table .mud-table-root {
    border-radius: var(--ua-r);
}

.ua-tabs[b-5dy6slcg90]  .ua-table tbody tr {
    transition: background .18s ease;
}

.ua-tabs[b-5dy6slcg90]  .ua-table tbody td {
    border-color: var(--ua-div);
    font-size: .8rem;
    vertical-align: middle;
}

.ua-tabs[b-5dy6slcg90]  .ua-table--clickable tbody tr {
    cursor: pointer;
}

.ua-tabs[b-5dy6slcg90]  .ua-table .mud-table-pagination {
    border-top: 1px solid var(--ua-div);
}

.ua-th-action[b-5dy6slcg90] { width: 72px; text-align: center; }

/* ══ Cells ═══════════════════════════════════════════════════════════════════ */
.ua-user[b-5dy6slcg90] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ua-user-text[b-5dy6slcg90] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ua-user-name[b-5dy6slcg90] {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.ua-user-sub[b-5dy6slcg90] {
    font-size: .69rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.ua-actor[b-5dy6slcg90] {
    font-size: .79rem;
    color: var(--mud-palette-text-primary);
}

.ua-actor--system[b-5dy6slcg90] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.ua-summary[b-5dy6slcg90] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

.ua-date[b-5dy6slcg90] {
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.ua-mono[b-5dy6slcg90] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    letter-spacing: .01em;
    color: var(--mud-palette-text-secondary);
}

.ua-muted[b-5dy6slcg90] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.ua-chips[b-5dy6slcg90] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ══ Location cell ═══════════════════════════════════════════════════════════
   Logical properties throughout so the chip and its navigation button swap
   sides under RTL without a mirrored rule. */
.ua-loc[b-5dy6slcg90] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ua-loc-chip[b-5dy6slcg90] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-block: 3px;
    padding-inline: 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: .74rem;
    line-height: 1.4;
    max-width: 190px;
    min-width: 0;
}

.ua-loc-chip--muted[b-5dy6slcg90] {
    border-color: var(--ua-div);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* MudIcon renders its own <svg>, so it needs ::deep like the other MudBlazor internals here. */
.ua-loc-chip[b-5dy6slcg90]  .ua-loc-icon {
    flex-shrink: 0;
    font-size: .95rem !important;
    height: .95rem !important;
    width: .95rem !important;
    color: var(--mud-palette-primary);
}

.ua-loc-chip--muted[b-5dy6slcg90]  .ua-loc-icon { color: var(--mud-palette-text-secondary); }

.ua-loc-text[b-5dy6slcg90] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ua-loc-nav[b-5dy6slcg90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.ua-loc-nav:hover[b-5dy6slcg90] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    transform: translateY(-1px);
}

.ua-loc-nav:focus-visible[b-5dy6slcg90] {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .ua-loc-nav:hover[b-5dy6slcg90] { transform: none; }
}

.ua-tabs[b-5dy6slcg90]  .ua-type-chip {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ══ Empty state ═════════════════════════════════════════════════════════════ */
.ua-empty[b-5dy6slcg90] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    color: var(--mud-palette-text-secondary);
}

.ua-empty-title[b-5dy6slcg90] {
    font-size: .92rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.ua-empty-sub[b-5dy6slcg90] {
    font-size: .78rem;
    line-height: 1.6;
    text-align: center;
    max-width: 340px;
}
/* /Shared/Dialogs/ModuleConfigurationDialog.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CONFIGURATION WORKBENCH

   Three panes on one surface: menu rail, working table, property inspector.
   Same enterprise-dense discipline as EnvironmentSync.razor.css and
   SyncPeerManagerDialog.razor.css — 13px base, hairline borders, 4-5px radii,
   colour spent only on state (selected, unsaved, destructive, permission kind).

   Every value derives from --mud-palette-*, so the dialog follows
   MudThemeProvider's light/dark switch rather than carrying a second theme.
   Per Blazor CSS isolation, tokens sit on the .mcw-root wrapper and never on
   :root — a scoped :root[b-xxx] would never match <html>.

   Directional properties are logical (inline-start/end, padding-inline) so the
   whole workbench mirrors under MudRtlProvider without a second stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.mcw-root[b-1xbhyvm4ru] {
    /* Surfaces and lines */
    --mcw-line: var(--mud-palette-lines-default);
    --mcw-line-soft: color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    --mcw-surface: var(--mud-palette-surface);
    --mcw-sunken: var(--mud-palette-background-gray);
    --mcw-hover: var(--mud-palette-action-default-hover);
    /* Ink — a three-step ladder derived from text-primary rather than from
       --mud-palette-text-secondary/-disabled. Those two are control tokens: -disabled is 20% white
       in dark and 38% black in light, which measures 1.9:1 and 2.7:1 against the surface. That is
       fine for a greyed-out control and unreadable for the content this tier actually carries —
       database column names, grid counts, the module label. Measured against MudBlazor's palette:
       ink 10.1:1, ink-2 6.6:1, ink-3 4.7:1 in light (dark values in the block below). */
    --mcw-ink: var(--mud-palette-text-primary);
    --mcw-ink-2: color-mix(in srgb, var(--mud-palette-text-primary) 86%, transparent);
    --mcw-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    /* State */
    --mcw-accent: var(--mud-palette-primary);
    --mcw-accent-ink: var(--mud-palette-primary-text);
    --mcw-accent-wash: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    --mcw-accent-line: color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    --mcw-good: var(--mud-palette-success);
    --mcw-good-wash: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
    --mcw-warn: var(--mud-palette-warning);
    --mcw-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    --mcw-bad: var(--mud-palette-error);
    --mcw-bad-wash: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --mcw-info: var(--mud-palette-info);
    --mcw-info-wash: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    /* Metrics */
    --mcw-r: 8px;
    --mcw-r-sm: 6px;
    --mcw-r-lg: 13px;
    --mcw-rail: 17.5rem;
    --mcw-insp: 22.5rem;
    --mcw-row: 2.5rem;
    /* Feather-light and wide rather than tight and dark: the shell should read as a raised sheet,
       not a boxed-in panel. */
    --mcw-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 34px -12px rgb(0 0 0 / 20%);
    --mcw-ease: 0.18s ease;
    /* Identifiers (db names, element ids, SQL views) are code, so they get a real mono stack.
       --mud-typography-caption-family is the body sans and would silently render proportional. */
    --mcw-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

    display: flex;
    flex-direction: column;
    block-size: 100%;
    /* dvh rather than a hard-coded calc(100vh - 15.4rem): the panes flex, so the
       shell only needs a floor and a ceiling, not a pixel-exact height. */
    min-block-size: min(46rem, calc(100dvh - 9rem));
    max-block-size: calc(100dvh - 0rem);
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mcw-ink);
    background: var(--mcw-surface);
}

/* Darker grounds need a deeper shadow and slightly stronger washes to read at all. */
[dark-mode="true"] .mcw-root[b-1xbhyvm4ru] {
    /* Light ink on a dark ground needs less alpha to reach the same contrast: 8.0:1 and 5.1:1. */
    --mcw-ink-2: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    --mcw-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 56%, transparent);
    --mcw-shadow: 0 1px 2px rgb(0 0 0 / 38%), 0 12px 38px -14px rgb(0 0 0 / 68%);
    --mcw-accent-wash: color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    --mcw-warn-wash: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    --mcw-bad-wash: color-mix(in srgb, var(--mud-palette-error) 17%, transparent);
    --mcw-good-wash: color-mix(in srgb, var(--mud-palette-success) 17%, transparent);
    --mcw-info-wash: color-mix(in srgb, var(--mud-palette-info) 17%, transparent);
}

.mcw-root *[b-1xbhyvm4ru],
.mcw-root *[b-1xbhyvm4ru]::before,
.mcw-root *[b-1xbhyvm4ru]::after {
    box-sizing: border-box;
}

.mcw-root[b-1xbhyvm4ru]  .mcw-ico {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: none;
}

.mcw-spacer[b-1xbhyvm4ru] {
    flex: 1 1 auto;
}

.mcw-divider[b-1xbhyvm4ru] {
    inline-size: 1px;
    block-size: 1.3rem;
    flex: none;
    margin-inline: 0.3rem;
    background: var(--mcw-line-soft);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.mcw-head[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    block-size: 3.5rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--mcw-line);
    background: var(--mcw-surface);
}

.mcw-crumb[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-inline-size: 0;
    overflow: hidden;
}

.mcw-crumb-module[b-1xbhyvm4ru] {
    flex: none;
    max-inline-size: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 0.75rem;
    margin-inline-end: 0.25rem;
    border-inline-end: 1px solid var(--mcw-line-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mcw-ink-3);
}

.mcw-crumb-link[b-1xbhyvm4ru] {
    flex: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--mcw-ink-2);
    padding: 0.3rem 0.55rem;
    border-radius: var(--mcw-r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mcw-ease), color var(--mcw-ease);
}

    .mcw-crumb-link:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
        color: var(--mcw-ink);
    }

.mcw-crumb-sep[b-1xbhyvm4ru] {
    display: inline-flex;
    color: var(--mcw-ink-3);
    opacity: 0.65;
}

    .mcw-crumb-sep[b-1xbhyvm4ru]  .mcw-ico {
        inline-size: 0.78rem;
        block-size: 0.78rem;
    }

.mcw-crumb-now[b-1xbhyvm4ru] {
    font-weight: 600;
    padding-inline: 0.45rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcw-crumb-tail[b-1xbhyvm4ru] {
    color: var(--mcw-ink-2);
    padding-inline: 0.45rem;
    white-space: nowrap;
}

/* Chevrons are drawn pointing inline-end; mirroring is the stylesheet's job, not the markup's. */
[dir="rtl"] .mcw-crumb-sep[b-1xbhyvm4ru]  .mcw-ico,
[dir="rtl"] .mcw-twist[b-1xbhyvm4ru]  .mcw-ico,
[dir="rtl"] .mcw-grp-cv[b-1xbhyvm4ru]  .mcw-ico {
    transform: scaleX(-1);
}

/* ── Segmented mode control ───────────────────────────────────────────────── */
.mcw-seg[b-1xbhyvm4ru] {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    flex: none;
    border: 1px solid var(--mcw-line-soft);
    border-radius: 11px;
    background: var(--mcw-sunken);
}

.mcw-seg-btn[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--mcw-ink-2);
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mcw-ease), color var(--mcw-ease), box-shadow var(--mcw-ease);
}

    .mcw-seg-btn:hover[b-1xbhyvm4ru] {
        color: var(--mcw-ink);
    }

    .mcw-seg-btn.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-surface);
        border-color: var(--mcw-line-soft);
        color: var(--mcw-ink);
        box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 1px 1px rgb(0 0 0 / 4%);
    }

        .mcw-seg-btn.is-on[b-1xbhyvm4ru]  .mcw-ico {
            color: var(--mcw-accent);
        }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mcw-btn[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    block-size: 2.15rem;
    padding-inline: 0.85rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r);
    background: var(--mcw-surface);
    font: inherit;
    font-weight: 500;
    color: var(--mcw-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mcw-ease), color var(--mcw-ease), border-color var(--mcw-ease), box-shadow var(--mcw-ease);
}

    .mcw-btn:hover:not(:disabled)[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

    .mcw-btn:disabled[b-1xbhyvm4ru] {
        opacity: 0.4;
        cursor: default;
    }

    .mcw-btn.is-ghost[b-1xbhyvm4ru] {
        border-color: transparent;
        background: transparent;
        color: var(--mcw-ink-2);
    }

        .mcw-btn.is-ghost:hover:not(:disabled)[b-1xbhyvm4ru] {
            background: var(--mcw-hover);
            color: var(--mcw-ink);
        }

    .mcw-btn.is-primary[b-1xbhyvm4ru] {
        background: var(--mcw-accent);
        border-color: var(--mcw-accent);
        color: var(--mcw-accent-ink);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--mcw-accent) 30%, transparent);
    }

        .mcw-btn.is-primary:hover:not(:disabled)[b-1xbhyvm4ru] {
            filter: brightness(1.08);
            background: var(--mcw-accent);
        }

    /* Destructive is tinted, never filled: it must not compete with the primary action. */
    .mcw-btn.is-danger[b-1xbhyvm4ru] {
        border-color: transparent;
        background: transparent;
        color: var(--mcw-bad);
    }

        .mcw-btn.is-danger:hover:not(:disabled)[b-1xbhyvm4ru] {
            background: var(--mcw-bad-wash);
        }

    .mcw-btn.is-icon[b-1xbhyvm4ru] {
        inline-size: 2.15rem;
        padding-inline: 0;
        justify-content: center;
    }

.mcw-link[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--mcw-accent);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--mcw-r-sm);
    transition: background var(--mcw-ease);
}

    .mcw-link:hover:not(:disabled)[b-1xbhyvm4ru] {
        background: var(--mcw-accent-wash);
    }

    .mcw-link:disabled[b-1xbhyvm4ru] {
        color: var(--mcw-ink-3);
        cursor: default;
    }

/* ── Unsaved badge and pending-changes popover ────────────────────────────── */
.mcw-changes[b-1xbhyvm4ru] {
    position: relative;
    flex: none;
}

.mcw-dirty[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    block-size: 1.95rem;
    padding-inline: 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mcw-warn) 40%, transparent);
    background: var(--mcw-warn-wash);
    color: var(--mcw-warn);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--mcw-ease);
}

.mcw-dirty-n[b-1xbhyvm4ru] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mcw-pop[b-1xbhyvm4ru] {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 20;
    inline-size: 21.5rem;
    padding: 0.45rem;
    border: 1px solid var(--mcw-line-soft);
    border-radius: var(--mcw-r-lg);
    background: var(--mcw-surface);
    box-shadow: var(--mcw-shadow);
}

.mcw-pop-head[b-1xbhyvm4ru] {
    padding: 0.5rem 0.6rem 0.4rem;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mcw-ink-3);
}

.mcw-pop-list[b-1xbhyvm4ru] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-block-size: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mcw-pop-item[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--mcw-r-sm);
    transition: background var(--mcw-ease);
}

    .mcw-pop-item:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

.mcw-pop-name[b-1xbhyvm4ru] {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-pop-scope[b-1xbhyvm4ru] {
    margin-inline-start: auto;
    flex: none;
    font-size: 0.71rem;
    color: var(--mcw-ink-3);
}

.mcw-tag[b-1xbhyvm4ru] {
    flex: none;
    padding: 0.12rem 0.42rem;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

    .mcw-tag.is-add[b-1xbhyvm4ru] {
        background: var(--mcw-good-wash);
        color: var(--mcw-good);
    }

    .mcw-tag.is-mod[b-1xbhyvm4ru] {
        background: var(--mcw-warn-wash);
        color: var(--mcw-warn);
    }

.mcw-pop-foot[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-start: 0.35rem;
    padding: 0.6rem 0.45rem 0.25rem;
    border-block-start: 1px solid var(--mcw-line-soft);
}

/* ── Role context bar ─────────────────────────────────────────────────────── */
.mcw-rolebar[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: none;
    padding: 0.8rem 1rem;
    border-block-end: 1px solid var(--mcw-line);
    background: var(--mcw-info-wash);
}

    .mcw-rolebar.is-empty[b-1xbhyvm4ru] {
        background: var(--mcw-sunken);
    }

.mcw-role-av[b-1xbhyvm4ru] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 9px;
    background: var(--mcw-info);
    color: var(--mud-palette-info-text, #fff);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mcw-role-id[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
}

.mcw-role-label[b-1xbhyvm4ru] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mcw-ink-2);
}

.mcw-role-select[b-1xbhyvm4ru] {
    min-inline-size: 15rem;
}

.mcw-role-meta[b-1xbhyvm4ru] {
    font-size: 0.79rem;
    color: var(--mcw-ink-2);
    white-space: nowrap;
}

/* ── Body grid ────────────────────────────────────────────────────────────── */
.mcw-body[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-block-size: 0;
    display: grid;
    grid-template-columns: var(--mcw-rail) minmax(0, 1fr);
}

    .mcw-body.has-insp[b-1xbhyvm4ru] {
        grid-template-columns: var(--mcw-rail) minmax(0, 1fr) var(--mcw-insp);
    }

    /* At the deepest level the rail becomes an icon strip rather than disappearing,
       which is what keeps menu switching one click away from the columns editor. */
    .mcw-body.is-mini[b-1xbhyvm4ru] {
        --mcw-rail: 3.7rem;
    }

/* ── Rail ─────────────────────────────────────────────────────────────────── */
.mcw-rail[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    border-inline-end: 1px solid var(--mcw-line);
    background: var(--mcw-surface);
}

.mcw-body.is-mini .mcw-rail[b-1xbhyvm4ru] {
    align-items: center;
    padding-block-start: 0.45rem;
    gap: 0.5rem;
}

.mcw-mini[b-1xbhyvm4ru] {
    display: grid;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    flex: none;
    border: 1px solid var(--mcw-accent-line);
    border-radius: var(--mcw-r);
    background: var(--mcw-accent-wash);
    color: var(--mcw-accent);
    cursor: pointer;
}

.mcw-mini-label[b-1xbhyvm4ru] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.68rem;
    color: var(--mcw-ink-3);
    max-block-size: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-rail-top[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: none;
    padding: 0.7rem;
    border-block-end: 1px solid var(--mcw-line-soft);
}

.mcw-search[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    block-size: 2.15rem;
    padding-inline: 0.7rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r);
    background: var(--mcw-sunken);
    color: var(--mcw-ink-3);
    transition: border-color var(--mcw-ease), background var(--mcw-ease), box-shadow var(--mcw-ease);
}

    .mcw-search:focus-within[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent);
        background: var(--mcw-surface);
        box-shadow: 0 0 0 3px var(--mcw-accent-wash);
    }

    .mcw-search input[b-1xbhyvm4ru] {
        flex: 1 1 auto;
        min-inline-size: 0;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        color: var(--mcw-ink);
    }

        .mcw-search input[b-1xbhyvm4ru]::placeholder {
            color: var(--mcw-ink-3);
        }

.mcw-search-inline[b-1xbhyvm4ru] {
    inline-size: 12.5rem;
    flex: none;
}

.mcw-scope[b-1xbhyvm4ru] {
    display: flex;
    gap: 0.25rem;
}

.mcw-pill[b-1xbhyvm4ru] {
    border: 1px solid var(--mcw-line);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.73rem;
    color: var(--mcw-ink-2);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: background var(--mcw-ease), color var(--mcw-ease), border-color var(--mcw-ease);
}

    .mcw-pill:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

    .mcw-pill.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-accent-wash);
        border-color: var(--mcw-accent-line);
        color: var(--mcw-accent);
        font-weight: 600;
    }

.mcw-tree[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.45rem;
    scrollbar-width: thin;
}

.mcw-rail-hint[b-1xbhyvm4ru] {
    margin: 1rem 0.6rem;
    font-size: 0.79rem;
    color: var(--mcw-ink-3);
    line-height: 1.5;
}

.mcw-node[b-1xbhyvm4ru] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    block-size: var(--mcw-row);
    border-radius: var(--mcw-r);
    cursor: pointer;
    padding-inline-start: calc(0.5rem + var(--mcw-depth, 0) * 1rem);
    padding-inline-end: 0.5rem;
    transition: background var(--mcw-ease), color var(--mcw-ease);
}

    .mcw-node:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

    .mcw-node.is-sel[b-1xbhyvm4ru] {
        background: var(--mcw-accent-wash);
        color: var(--mcw-accent);
        font-weight: 600;
    }

        .mcw-node.is-sel[b-1xbhyvm4ru]::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block: 0.45rem;
            inline-size: 3px;
            border-radius: 3px;
            background: var(--mcw-accent);
        }

.mcw-node-text[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-node-count[b-1xbhyvm4ru] {
    flex: none;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mcw-ink-3);
    font-weight: 400;
}

.mcw-node-edit[b-1xbhyvm4ru] {
    display: none;
    place-items: center;
    flex: none;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: 0;
    border-radius: var(--mcw-r-sm);
    background: transparent;
    color: var(--mcw-ink-3);
    cursor: pointer;
}

.mcw-node:hover .mcw-node-edit[b-1xbhyvm4ru],
.mcw-node.is-sel .mcw-node-edit[b-1xbhyvm4ru] {
    display: grid;
}

.mcw-node-edit:hover[b-1xbhyvm4ru] {
    background: var(--mcw-surface);
    color: var(--mcw-accent);
}

/* Delete reads as destructive only once the pointer is on it - a row of red icons down the tree
   would make every menu look like a warning. */
.mcw-node-edit.is-danger:hover[b-1xbhyvm4ru] {
    background: var(--mcw-bad-wash);
    color: var(--mcw-bad);
}

/* ── Inspector action row ─────────────────────────────────────────────────
   For a property that opens a screen of its own instead of editing in place. Shaped like the
   fields around it rather than like a toolbar button, so it reads as part of the group.
   ────────────────────────────────────────────────────────────────────────── */
.mcw-action[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    inline-size: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r-sm);
    background: var(--mcw-sunken);
    font: inherit;
    color: var(--mcw-ink);
    cursor: pointer;
    text-align: start;
    transition: background var(--mcw-ease), border-color var(--mcw-ease);
}

    .mcw-action:hover:not(:disabled)[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent-line);
        background: var(--mcw-surface);
    }

    .mcw-action:disabled[b-1xbhyvm4ru] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .mcw-action.is-changed[b-1xbhyvm4ru] {
        border-color: color-mix(in srgb, var(--mcw-warn) 55%, transparent);
        background: var(--mcw-warn-wash);
    }

.mcw-action-ico[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-ink-2);
}

.mcw-action-text[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.mcw-action-title[b-1xbhyvm4ru] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-action-note[b-1xbhyvm4ru] {
    font-size: 0.76rem;
    color: var(--mcw-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-action-cv[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-ink-3);
}

[dir="rtl"] .mcw-action-cv[b-1xbhyvm4ru] {
    transform: scaleX(-1);
}

.mcw-twist[b-1xbhyvm4ru] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 0;
    background: transparent;
    color: var(--mcw-ink-3);
    cursor: pointer;
    padding: 0;
}

    .mcw-twist[b-1xbhyvm4ru]  .mcw-ico {
        inline-size: 0.8rem;
        block-size: 0.8rem;
        transition: transform 0.15s ease;
    }

    .mcw-twist.is-open[b-1xbhyvm4ru]  .mcw-ico {
        transform: rotate(90deg);
    }

[dir="rtl"] .mcw-twist.is-open[b-1xbhyvm4ru]  .mcw-ico {
    transform: rotate(90deg) scaleX(-1);
}

.mcw-twist.is-leaf[b-1xbhyvm4ru] {
    cursor: default;
}

.mcw-rail-foot[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.6rem 0.7rem;
    border-block-start: 1px solid var(--mcw-line-soft);
}

/* ── Canvas ───────────────────────────────────────────────────────────────── */
.mcw-canvas[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    background: var(--mcw-surface);
}

.mcw-pane[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    block-size: 100%;
}

.mcw-tools[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    block-size: 3.1rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--mcw-line);
}

.mcw-tools-title[b-1xbhyvm4ru] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-tools-sub[b-1xbhyvm4ru] {
    font-size: 0.75rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--mcw-ink-3);
}

.mcw-tabs[b-1xbhyvm4ru] {
    display: flex;
    gap: 0.15rem;
    flex: none;
}

.mcw-tab[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-block-end: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--mcw-ink-2);
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--mcw-ease), border-color var(--mcw-ease);
}

    .mcw-tab:hover[b-1xbhyvm4ru] {
        color: var(--mcw-ink);
    }

    .mcw-tab.is-on[b-1xbhyvm4ru] {
        color: var(--mcw-accent);
        border-block-end-color: var(--mcw-accent);
    }

.mcw-tab-n[b-1xbhyvm4ru] {
    font-size: 0.71rem;
    font-variant-numeric: tabular-nums;
    color: var(--mcw-ink-3);
    background: var(--mcw-sunken);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

.mcw-scroll[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.mcw-subhead[b-1xbhyvm4ru] {
    margin: 0;
    padding: 1rem 1rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mcw-ink-3);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.mcw-table[b-1xbhyvm4ru] {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .mcw-table th[b-1xbhyvm4ru] {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        background: var(--mcw-sunken);
        border-block-end: 1px solid var(--mcw-line);
        padding: 0.7rem 0.9rem;
        text-align: start;
        white-space: nowrap;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mcw-ink-2);
    }

    .mcw-table td[b-1xbhyvm4ru] {
        block-size: var(--mcw-row);
        padding: 0.35rem 0.9rem;
        border-block-end: 1px solid var(--mcw-line-soft);
        vertical-align: middle;
        white-space: nowrap;
    }

    .mcw-table tbody tr[b-1xbhyvm4ru] {
        cursor: pointer;
    }

        .mcw-table tbody tr td[b-1xbhyvm4ru] {
            transition: background var(--mcw-ease);
        }

    /* Permission matrices are edited cell by cell, so their rows must not offer a row cursor. */
    .mcw-table.is-static tbody tr[b-1xbhyvm4ru] {
        cursor: default;
    }

        .mcw-table tbody tr:hover td[b-1xbhyvm4ru] {
            background: var(--mcw-hover);
        }

        .mcw-table tbody tr.is-sel td[b-1xbhyvm4ru] {
            background: var(--mcw-accent-wash);
        }

            .mcw-table tbody tr.is-sel td:first-child[b-1xbhyvm4ru] {
                box-shadow: inset 2px 0 0 var(--mcw-accent);
            }

        /* Amber rail wins over the accent one: unsaved outranks selected. */
        .mcw-table tbody tr.is-dirty td:first-child[b-1xbhyvm4ru] {
            box-shadow: inset 2px 0 0 var(--mcw-warn);
        }

[dir="rtl"] .mcw-table tbody tr.is-sel td:first-child[b-1xbhyvm4ru] {
    box-shadow: inset -2px 0 0 var(--mcw-accent);
}

[dir="rtl"] .mcw-table tbody tr.is-dirty td:first-child[b-1xbhyvm4ru] {
    box-shadow: inset -2px 0 0 var(--mcw-warn);
}

.mcw-c[b-1xbhyvm4ru] {
    text-align: center;
}

.mcw-th-stack[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.mcw-col-tick[b-1xbhyvm4ru] {
    inline-size: 2.8rem;
}

.mcw-col-num[b-1xbhyvm4ru] {
    inline-size: 4rem;
}

.mcw-col-type[b-1xbhyvm4ru] {
    inline-size: 7rem;
}

.mcw-col-perm[b-1xbhyvm4ru] {
    inline-size: 6.6rem;
}

.mcw-col-act[b-1xbhyvm4ru] {
    inline-size: 7.5rem;
}

.mcw-strong[b-1xbhyvm4ru] {
    font-weight: 600;
}

.mcw-dim[b-1xbhyvm4ru] {
    color: var(--mcw-ink-3);
}

.mcw-mono[b-1xbhyvm4ru] {
    font-family: var(--mcw-mono);
    font-size: 0.78rem;
}

.mcw-num[b-1xbhyvm4ru] {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.mcw-none[b-1xbhyvm4ru] {
    text-align: center;
    color: var(--mcw-ink-3);
    padding-block: 2.6rem;
    cursor: default;
}

.mcw-chips[b-1xbhyvm4ru] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
}

.mcw-chip[b-1xbhyvm4ru] {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0.15rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}

    .mcw-chip.is-n[b-1xbhyvm4ru] {
        background: var(--mcw-sunken);
        border-color: var(--mcw-line);
        color: var(--mcw-ink-2);
    }

    .mcw-chip.is-a[b-1xbhyvm4ru] {
        background: var(--mcw-accent-wash);
        border-color: var(--mcw-accent-line);
        color: var(--mcw-accent);
    }

    .mcw-chip.is-w[b-1xbhyvm4ru] {
        background: var(--mcw-warn-wash);
        color: var(--mcw-warn);
    }

    .mcw-chip.is-g[b-1xbhyvm4ru] {
        background: var(--mcw-good-wash);
        color: var(--mcw-good);
    }

    .mcw-chip.is-r[b-1xbhyvm4ru] {
        background: var(--mcw-bad-wash);
        color: var(--mcw-bad);
    }

    .mcw-chip.is-i[b-1xbhyvm4ru] {
        background: var(--mcw-info-wash);
        color: var(--mcw-info);
    }

/* ── Checkbox / tri-state ─────────────────────────────────────────────────── */
.mcw-check[b-1xbhyvm4ru] {
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    padding: 0;
    border: 1.5px solid var(--mcw-ink-3);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    vertical-align: -3px;
    transition: background var(--mcw-ease), border-color var(--mcw-ease), box-shadow var(--mcw-ease);
}

    .mcw-check:hover:not(:disabled)[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent);
    }

/* Both a header's check-all and its column's row boxes must land on one axis. The header stack is
   block-level flex (not inline-flex) so it spans the full cell content box: its centre is then the
   cell centre, which is exactly what text-align:center gives the row boxes below. An inline-flex
   stack is only as wide as its label, so uppercase tracking on that label shifted the check-all
   off the column axis. */
.mcw-table td.mcw-c > .mcw-check[b-1xbhyvm4ru] {
    display: block;
    margin-inline: auto;
}

    .mcw-check:disabled[b-1xbhyvm4ru] {
        opacity: 0.3;
        cursor: default;
    }

    .mcw-check.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-accent);
        border-color: var(--mcw-accent);
    }

        .mcw-check.is-on[b-1xbhyvm4ru]::after {
            content: "";
            position: absolute;
            inset-inline-start: 0.33rem;
            inset-block-start: 0.11rem;
            inline-size: 0.26rem;
            block-size: 0.55rem;
            border: solid var(--mcw-accent-ink);
            border-width: 0 1.8px 1.8px 0;
            transform: rotate(43deg);
        }

    /* Indeterminate: something below this node is granted, this node is not. */
    .mcw-check.is-partial[b-1xbhyvm4ru]::after {
        content: "";
        position: absolute;
        inset-inline-start: 0.2rem;
        inset-block-start: 0.42rem;
        inline-size: 0.5rem;
        block-size: 2px;
        border-radius: 2px;
        background: var(--mcw-accent);
    }

    .mcw-check.is-g.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-good);
        border-color: var(--mcw-good);
    }

    .mcw-check.is-w.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-warn);
        border-color: var(--mcw-warn);
    }

    .mcw-check.is-r.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-bad);
        border-color: var(--mcw-bad);
    }

    .mcw-check.is-i.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-info);
        border-color: var(--mcw-info);
    }

    .mcw-check.is-g.is-on[b-1xbhyvm4ru]::after,
    .mcw-check.is-w.is-on[b-1xbhyvm4ru]::after,
    .mcw-check.is-r.is-on[b-1xbhyvm4ru]::after,
    .mcw-check.is-i.is-on[b-1xbhyvm4ru]::after {
        border-color: #fff;
    }

/* ── Inspector ────────────────────────────────────────────────────────────── */
.mcw-insp[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    border-inline-start: 1px solid var(--mcw-line);
    background: var(--mcw-surface);
}

.mcw-insp-in[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    block-size: 100%;
}

.mcw-insp-head[b-1xbhyvm4ru] {
    flex: none;
    padding: 1rem 1.15rem 0.9rem;
    border-block-end: 1px solid var(--mcw-line);
}

.mcw-insp-kicker[b-1xbhyvm4ru] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mcw-ink-3);
    margin-block-end: 0.3rem;
}

.mcw-insp-title[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.mcw-insp-sub[b-1xbhyvm4ru] {
    margin-block-start: 0.2rem;
    font-family: var(--mcw-mono);
    font-size: 0.75rem;
    color: var(--mcw-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-insp-body[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.mcw-insp-foot[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.7rem 1rem;
    border-block-start: 1px solid var(--mcw-line);
}

/* Groups: a collapsed one still reports its state in the header, so nothing hides silently. */
.mcw-grp[b-1xbhyvm4ru] {
    border-block-end: 1px solid var(--mcw-line-soft);
}

.mcw-grp-head[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    inline-size: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0.75rem 1.15rem;
    cursor: pointer;
    text-align: start;
    transition: background var(--mcw-ease);
}

    .mcw-grp-head:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

.mcw-grp-cv[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-ink-3);
}

    .mcw-grp-cv[b-1xbhyvm4ru]  .mcw-ico {
        inline-size: 0.8rem;
        block-size: 0.8rem;
        transition: transform 0.15s ease;
    }

    .mcw-grp-cv.is-open[b-1xbhyvm4ru]  .mcw-ico {
        transform: rotate(90deg);
    }

[dir="rtl"] .mcw-grp-cv.is-open[b-1xbhyvm4ru]  .mcw-ico {
    transform: rotate(90deg) scaleX(-1);
}

.mcw-grp-name[b-1xbhyvm4ru] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mcw-ink-2);
}

.mcw-grp-tally[b-1xbhyvm4ru] {
    margin-inline-start: auto;
    font-size: 0.71rem;
    font-variant-numeric: tabular-nums;
    color: var(--mcw-ink-3);
}

.mcw-grp-body[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 1.15rem 1.1rem;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.mcw-field[b-1xbhyvm4ru] {
    display: grid;
    grid-template-columns: 6.9rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

    .mcw-field.is-stacked[b-1xbhyvm4ru] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .mcw-field > label[b-1xbhyvm4ru] {
        font-size: 0.79rem;
        color: var(--mcw-ink-2);
    }

.mcw-req[b-1xbhyvm4ru] {
    color: var(--mcw-bad);
}

.mcw-input[b-1xbhyvm4ru],
.mcw-select[b-1xbhyvm4ru] {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 2.1rem;
    padding-inline: 0.65rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r-sm);
    background: var(--mcw-sunken);
    font: inherit;
    color: var(--mcw-ink);
    outline: none;
    transition: background var(--mcw-ease), border-color var(--mcw-ease), box-shadow var(--mcw-ease);
}

.mcw-area[b-1xbhyvm4ru] {
    block-size: auto;
    padding-block: 0.45rem;
    resize: vertical;
    line-height: 1.4;
}

.mcw-input:focus[b-1xbhyvm4ru],
.mcw-select:focus[b-1xbhyvm4ru] {
    border-color: var(--mcw-accent);
    background: var(--mcw-surface);
    box-shadow: 0 0 0 3px var(--mcw-accent-wash);
}

/* An edited field keeps an amber edge until the change is committed. */
.mcw-input.is-changed[b-1xbhyvm4ru] {
    border-color: color-mix(in srgb, var(--mcw-warn) 60%, transparent);
    background: var(--mcw-warn-wash);
}

.mcw-input[b-1xbhyvm4ru]::placeholder {
    color: var(--mcw-ink-3);
}

.mcw-note[b-1xbhyvm4ru] {
    margin: 0 0 0.3rem;
    font-size: 0.77rem;
    line-height: 1.5;
    color: var(--mcw-ink-3);
}

/* ── Toggles ──────────────────────────────────────────────────────────────── */
.mcw-tog[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-block-size: 1.8rem;
}

.mcw-tog-label[b-1xbhyvm4ru] {
    font-size: 0.81rem;
    min-inline-size: 0;
}

.mcw-tog-hint[b-1xbhyvm4ru] {
    display: block;
    font-size: 0.71rem;
    color: var(--mcw-ink-3);
    line-height: 1.4;
}

.mcw-tog-grid[b-1xbhyvm4ru] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1.1rem;
}

.mcw-switch[b-1xbhyvm4ru] {
    position: relative;
    flex: none;
    inline-size: 2.05rem;
    block-size: 1.18rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mcw-line);
    cursor: pointer;
    transition: background var(--mcw-ease);
}

    .mcw-switch[b-1xbhyvm4ru]::after {
        content: "";
        position: absolute;
        inset-block-start: 0.14rem;
        inset-inline-start: 0.14rem;
        inline-size: 0.9rem;
        block-size: 0.9rem;
        border-radius: 50%;
        background: var(--mcw-surface);
        box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
        transition: inset-inline-start var(--mcw-ease);
    }

    .mcw-switch.is-on[b-1xbhyvm4ru] {
        background: var(--mcw-accent);
    }

        .mcw-switch.is-on[b-1xbhyvm4ru]::after {
            inset-inline-start: 1.01rem;
        }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.mcw-empty[b-1xbhyvm4ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    block-size: 100%;
    padding: 2.75rem;
    text-align: center;
}

.mcw-empty-glyph[b-1xbhyvm4ru] {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border: 1px solid var(--mcw-accent-line);
    border-radius: 16px;
    background: var(--mcw-accent-wash);
    color: var(--mcw-accent);
}

    .mcw-empty-glyph[b-1xbhyvm4ru]  .mcw-ico {
        inline-size: 1.65rem;
        block-size: 1.65rem;
    }

.mcw-empty h5[b-1xbhyvm4ru] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
}

.mcw-empty p[b-1xbhyvm4ru] {
    margin: 0;
    max-inline-size: 34ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--mcw-ink-2);
}

/* ── Focus and motion ─────────────────────────────────────────────────────── */
.mcw-root :focus-visible[b-1xbhyvm4ru] {
    outline: 2px solid var(--mcw-accent);
    outline-offset: 2px;
    border-radius: var(--mcw-r-sm);
}

@media (prefers-reduced-motion: reduce) {
    .mcw-root *[b-1xbhyvm4ru] {
        transition: none !important;
    }
}

/* ── Narrow viewports ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mcw-root[b-1xbhyvm4ru] {
        --mcw-rail: 14.5rem;
        --mcw-insp: 19.5rem;
    }
}

@media (max-width: 900px) {
    .mcw-body[b-1xbhyvm4ru],
    .mcw-body.has-insp[b-1xbhyvm4ru] {
        grid-template-columns: minmax(0, 1fr);
    }

        /* Below this width the three panes cannot coexist honestly; the inspector wins
           because it is where editing happens, and the rail collapses to its strip. */
        .mcw-body.has-insp .mcw-rail[b-1xbhyvm4ru],
        .mcw-body.has-insp .mcw-canvas[b-1xbhyvm4ru] {
            display: none;
        }

    .mcw-insp[b-1xbhyvm4ru] {
        border-inline-start: 0;
    }
}

/* ── Row number column ────────────────────────────────────────────────────── */
.mcw-col-rownum[b-1xbhyvm4ru] {
    inline-size: 3.2rem;
}

/* ── Search clear ─────────────────────────────────────────────────────────── */
.mcw-search-clear[b-1xbhyvm4ru] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mcw-ink-3);
    cursor: pointer;
    transition: background var(--mcw-ease), color var(--mcw-ease);
}

    .mcw-search-clear:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
        color: var(--mcw-ink);
    }

/* ══ Combobox ═════════════════════════════════════════════════════════════════
   Replaces the native <select>, which cannot be restyled to match this surface and
   offers no type-ahead — ElementType alone has seventeen options. No JavaScript is
   involved: the popover is absolutely positioned and a full-viewport transparent
   veil behind it turns any outside click into a close.
   ═════════════════════════════════════════════════════════════════════════════ */
.mcw-combo[b-1xbhyvm4ru] {
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
}

.mcw-combo-btn[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    inline-size: 100%;
    block-size: 2.1rem;
    padding-inline: 0.65rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r-sm);
    background: var(--mcw-sunken);
    font: inherit;
    color: var(--mcw-ink);
    cursor: pointer;
    text-align: start;
    transition: background var(--mcw-ease), border-color var(--mcw-ease), box-shadow var(--mcw-ease);
}

    .mcw-combo-btn:hover[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent-line);
    }

.mcw-combo.is-open .mcw-combo-btn[b-1xbhyvm4ru] {
    border-color: var(--mcw-accent);
    background: var(--mcw-surface);
    box-shadow: 0 0 0 3px var(--mcw-accent-wash);
}

.mcw-combo-val[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .mcw-combo-val.is-ph[b-1xbhyvm4ru] {
        color: var(--mcw-ink-3);
    }

.mcw-combo-cv[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-ink-3);
    transition: transform var(--mcw-ease);
}

.mcw-combo.is-open .mcw-combo-cv[b-1xbhyvm4ru] {
    transform: rotate(180deg);
}

/* Covers the viewport so any click outside the list closes it. Transparent, and beneath
   the popover itself so the list stays clickable. */
.mcw-combo-veil[b-1xbhyvm4ru] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

.mcw-combo-pop[b-1xbhyvm4ru] {
    position: absolute;
    z-index: 40;
    inset-block-start: calc(100% + 0.35rem);
    inset-inline-start: 0;
    min-inline-size: 100%;
    max-inline-size: 22rem;
    padding: 0.35rem;
    border: 1px solid var(--mcw-line-soft);
    border-radius: var(--mcw-r-lg);
    background: var(--mcw-surface);
    box-shadow: var(--mcw-shadow);
}

.mcw-combo-search[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    block-size: 2rem;
    padding-inline: 0.6rem;
    margin-block-end: 0.3rem;
    border: 1px solid var(--mcw-line);
    border-radius: var(--mcw-r-sm);
    background: var(--mcw-sunken);
    color: var(--mcw-ink-3);
}

    .mcw-combo-search:focus-within[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent);
        background: var(--mcw-surface);
    }

    .mcw-combo-search input[b-1xbhyvm4ru] {
        flex: 1 1 auto;
        min-inline-size: 0;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        color: var(--mcw-ink);
    }

        .mcw-combo-search input[b-1xbhyvm4ru]::placeholder {
            color: var(--mcw-ink-3);
        }

.mcw-combo-list[b-1xbhyvm4ru] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-block-size: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mcw-combo-opt[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--mcw-r-sm);
    background: transparent;
    font: inherit;
    color: var(--mcw-ink);
    cursor: pointer;
    text-align: start;
    transition: background var(--mcw-ease), color var(--mcw-ease);
}

    .mcw-combo-opt:hover[b-1xbhyvm4ru] {
        background: var(--mcw-hover);
    }

    .mcw-combo-opt.is-sel[b-1xbhyvm4ru] {
        background: var(--mcw-accent-wash);
        color: var(--mcw-accent);
        font-weight: 600;
    }

    .mcw-combo-opt.is-clear[b-1xbhyvm4ru] {
        color: var(--mcw-ink-3);
    }

.mcw-combo-opt-text[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcw-combo-tick[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-accent);
}

.mcw-combo-none[b-1xbhyvm4ru] {
    padding: 0.7rem 0.6rem;
    font-size: 0.79rem;
    color: var(--mcw-ink-3);
    text-align: center;
}

/* Deliberately NOT lifting the inspector's overflow when a combobox opens. Switching a scroll
   container's overflow-y from auto to visible destroys the scroll box: the browser resets
   scrollTop to 0, so the pane jumped to the top the moment a dropdown in a lower group was
   opened, and with scrolling gone the rest of the panel could not be reached at all while the
   fixed veil still covered it. Inspector comboboxes expand in the flow instead (.is-inline),
   which needs no overflow games and no veil. */

/* The role bar's combobox is a fixed-width control rather than a full-width field. */
.mcw-role-select[b-1xbhyvm4ru] {
    inline-size: 15rem;
    flex: none;
}

/* ══ Combobox: inline variant ═════════════════════════════════════════════════
   Expands in the flow rather than floating. Used everywhere inside the inspector,
   which scrolls: a floating popover there either gets clipped by the scroll
   container or forces the overflow switch that broke scrolling entirely.
   ═════════════════════════════════════════════════════════════════════════════ */
.mcw-combo.is-inline .mcw-combo-pop[b-1xbhyvm4ru] {
    position: static;
    inline-size: auto;
    max-inline-size: none;
    margin-block-start: 0.35rem;
    box-shadow: none;
    border-color: var(--mcw-accent-line);
    background: var(--mcw-sunken);
}

.mcw-combo.is-inline .mcw-combo-list[b-1xbhyvm4ru] {
    max-block-size: 11rem;
}

/* ══ Inline column editing ════════════════════════════════════════════════════
   Every property in the row. Scrolls both ways, so Title and the database column
   are frozen: without them a row is unidentifiable once you scroll past the
   thirtieth field.
   ═════════════════════════════════════════════════════════════════════════════ */
.mcw-table.mcw-inline[b-1xbhyvm4ru] {
    /* Frozen column widths. The inset-inline-start offsets below are composed from
       these, so a width only ever changes in one place. */
    --mcw-frz-1: 2.6rem;
    --mcw-frz-2: 3rem;
    --mcw-frz-3: 13rem;
    --mcw-frz-4: 11rem;
    inline-size: max-content;
    min-inline-size: 100%;
}

    .mcw-table.mcw-inline th[b-1xbhyvm4ru],
    .mcw-table.mcw-inline td[b-1xbhyvm4ru] {
        padding: 0.25rem 0.4rem;
    }

/* Sticky needs an opaque background of its own: the scrolling cells pass underneath. */
/* A sticky cell has the scrolling columns passing directly beneath it, so its background must be
   fully opaque in EVERY state. The state tokens are not: --mcw-hover is MudBlazor's
   action-default-hover (~6% alpha) and the *-wash tokens are colour-mixed with transparent. So the
   opaque colour is set once as background-color, and every state tint is painted over it as a
   background-image layer instead of replacing the colour. Assigning a translucent token to
   background-color here is what made hovered rows show the columns underneath. */
.mcw-table.mcw-inline .mcw-frz[b-1xbhyvm4ru] {
    position: sticky;
    z-index: 3;
    background-color: var(--mcw-surface);
}

.mcw-table.mcw-inline thead .mcw-frz[b-1xbhyvm4ru] {
    /* Header cells are sticky on both axes, so they must outrank the body's sticky cells. */
    z-index: 5;
    background-color: var(--mcw-sunken);
}

.mcw-table.mcw-inline tbody tr.is-dirty .mcw-frz[b-1xbhyvm4ru] {
    background-image: linear-gradient(var(--mcw-warn-wash), var(--mcw-warn-wash));
}

.mcw-table.mcw-inline tbody tr:hover .mcw-frz[b-1xbhyvm4ru] {
    background-image: linear-gradient(var(--mcw-hover), var(--mcw-hover));
}

    /* Hovering an edited row keeps both tints, hover stacked on top. */
    .mcw-table.mcw-inline tbody tr.is-dirty:hover .mcw-frz[b-1xbhyvm4ru] {
        background-image: linear-gradient(var(--mcw-hover), var(--mcw-hover)),
                          linear-gradient(var(--mcw-warn-wash), var(--mcw-warn-wash));
    }

.mcw-frz-1[b-1xbhyvm4ru] { inset-inline-start: 0; }
.mcw-frz-2[b-1xbhyvm4ru] { inset-inline-start: var(--mcw-frz-1); }
.mcw-frz-3[b-1xbhyvm4ru] { inset-inline-start: calc(var(--mcw-frz-1) + var(--mcw-frz-2)); }

.mcw-frz-4[b-1xbhyvm4ru] {
    inset-inline-start: calc(var(--mcw-frz-1) + var(--mcw-frz-2) + var(--mcw-frz-3));
    /* The last frozen cell carries the seam between frozen and scrolling. */
    border-inline-end: 1px solid var(--mcw-line);
}

.mcw-frz-1[b-1xbhyvm4ru] { inline-size: var(--mcw-frz-1); }
.mcw-frz-2[b-1xbhyvm4ru] { inline-size: var(--mcw-frz-2); }
.mcw-frz-3[b-1xbhyvm4ru] { inline-size: var(--mcw-frz-3); }
.mcw-frz-4[b-1xbhyvm4ru] { inline-size: var(--mcw-frz-4); }

/* Column widths for the scrolling half. */
.mcw-cw-sel[b-1xbhyvm4ru] { inline-size: 9.5rem; }
.mcw-cw-txt[b-1xbhyvm4ru] { inline-size: 11rem; }
.mcw-cw-n[b-1xbhyvm4ru] { inline-size: 5rem; }
.mcw-cw-f[b-1xbhyvm4ru] { inline-size: 4.6rem; }

/* ── Editable cells ───────────────────────────────────────────────────────── */
.mcw-cell[b-1xbhyvm4ru] {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 1.85rem;
    padding-inline: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--mcw-r-sm);
    background: transparent;
    font: inherit;
    color: var(--mcw-ink);
    outline: none;
    transition: background var(--mcw-ease), border-color var(--mcw-ease), box-shadow var(--mcw-ease);
}

    /* Quiet until touched: thirty bordered boxes per row is unreadable. */
    .mcw-cell:hover[b-1xbhyvm4ru] {
        border-color: var(--mcw-line);
        background: var(--mcw-sunken);
    }

    .mcw-cell:focus[b-1xbhyvm4ru] {
        border-color: var(--mcw-accent);
        background: var(--mcw-surface);
        box-shadow: 0 0 0 3px var(--mcw-accent-wash);
    }

    .mcw-cell.is-changed[b-1xbhyvm4ru] {
        border-color: color-mix(in srgb, var(--mcw-warn) 55%, transparent);
        background: var(--mcw-warn-wash);
    }

    .mcw-cell[b-1xbhyvm4ru]::placeholder {
        color: var(--mcw-ink-3);
    }

.mcw-cell-n[b-1xbhyvm4ru] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Cell dropdown ─────────────────────────────────────────────────────────
   In place of a native select, which could not be styled to match the workbench and offered no
   type-ahead across the seventeen-value enums. Only this trigger sits in the cell: the list is
   rendered at the dialog root as position:fixed and anchored by JavaScript, because this grid
   scrolls both ways and a popover inside it is clipped by the scroll container - while lifting
   that container's overflow resets its scrollTop and kills scrolling entirely.
   ────────────────────────────────────────────────────────────────────────── */
.mcw-cell-pick[b-1xbhyvm4ru] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    text-align: start;
}

.mcw-cell-pick.is-open[b-1xbhyvm4ru] {
    border-color: var(--mcw-accent);
    background: var(--mcw-surface);
    box-shadow: 0 0 0 3px var(--mcw-accent-wash);
}

.mcw-cell-pick-val[b-1xbhyvm4ru] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .mcw-cell-pick-val.is-ph[b-1xbhyvm4ru] {
        color: var(--mcw-ink-3);
    }

.mcw-cell-pick-cv[b-1xbhyvm4ru] {
    display: inline-flex;
    flex: none;
    color: var(--mcw-ink-3);
    transition: transform var(--mcw-ease);
}

.mcw-cell-pick.is-open .mcw-cell-pick-cv[b-1xbhyvm4ru] {
    transform: rotate(180deg);
}

/* Also stops the grid scrolling under the open list, which would strand it away from its cell. */
.mcw-cell-veil[b-1xbhyvm4ru] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

/* top/left are written by ./core/js/module-config-workbench.js; nothing here may set them, and
   nothing may use inset-inline-* either - the anchor arithmetic is in physical coordinates. */
.mcw-cell-pop[b-1xbhyvm4ru] {
    position: fixed;
    z-index: 40;
    max-inline-size: 22rem;
    padding: 0.35rem;
    border: 1px solid var(--mcw-line-soft);
    border-radius: var(--mcw-r-lg);
    background: var(--mcw-surface);
    box-shadow: var(--mcw-shadow);
}
/* /Shared/Dialogs/PermissionMapDialog.razor.rz.scp.css */
/* Standalone from ModuleConfigurationDialog.razor.css on purpose: Blazor CSS isolation scopes
   custom properties to the component that defines them, so a separate dialog can't read
   ModuleConfigurationDialog's --mcw-* tokens even though the two share the same visual language.
   These re-derive the same handful of tokens from the same --mud-palette-* globals instead of
   introducing any cross-component CSS dependency. */
.pmd-root[b-ezh77ldomf] {
    --pmd-line: var(--mud-palette-lines-default);
    --pmd-surface: var(--mud-palette-surface);
    --pmd-ink: var(--mud-palette-text-primary);
    --pmd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent);
    --pmd-good: var(--mud-palette-success);
    --pmd-warn: var(--mud-palette-warning);

    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: min(46rem, calc(100dvh - 9rem));
    max-block-size: calc(100dvh - 2rem);
    color: var(--pmd-ink);
    background: var(--pmd-surface);
    font-size: 0.875rem;
}

[dark-mode="true"] .pmd-root[b-ezh77ldomf] {
    --pmd-ink-3: color-mix(in srgb, var(--mud-palette-text-primary) 56%, transparent);
}

.pmd-head[b-ezh77ldomf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--pmd-line);
}

.pmd-head-text[b-ezh77ldomf] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pmd-head-title[b-ezh77ldomf] {
    font-weight: 600;
}

.pmd-head-sub[b-ezh77ldomf] {
    font-size: 0.75rem;
    color: var(--pmd-ink-3);
}

.pmd-spacer[b-ezh77ldomf] {
    flex: 1 1 auto;
}

.pmd-legend[b-ezh77ldomf] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--pmd-ink-3);
}

.pmd-legend-item[b-ezh77ldomf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pmd-dot[b-ezh77ldomf] {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--pmd-ink-3);
}

.pmd-dot.is-full[b-ezh77ldomf] { background: var(--pmd-good); }
.pmd-dot.is-partial[b-ezh77ldomf] { background: var(--pmd-warn); }
.pmd-dot.is-none[b-ezh77ldomf] { background: var(--pmd-ink-3); }

.pmd-close[b-ezh77ldomf] {
    border: none;
    background: transparent;
    color: var(--pmd-ink);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.pmd-close:hover[b-ezh77ldomf] {
    background: var(--mud-palette-action-default-hover);
}

.pmd-body[b-ezh77ldomf] {
    flex: 1 1 auto;
    display: flex;
    min-block-size: 0;
}

.pmd-graph-wrap[b-ezh77ldomf] {
    flex: 1 1 auto;
    position: relative;
    min-inline-size: 0;
}

/* Fills pmd-graph-wrap. Stays empty of Razor content on purpose - see the comment in
   PermissionMapDialog.razor above this element. */
.pmd-graph[b-ezh77ldomf] {
    position: absolute;
    inset: 0;
}

.pmd-status[b-ezh77ldomf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pmd-ink-3);
}

.pmd-status.is-error[b-ezh77ldomf] {
    color: var(--mud-palette-error);
}

.pmd-insp[b-ezh77ldomf] {
    inline-size: 20rem;
    flex: 0 0 auto;
    border-inline-start: 1px solid var(--pmd-line);
    padding: 1rem;
    overflow-y: auto;
}

.pmd-insp-kicker[b-ezh77ldomf] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pmd-ink-3);
}

.pmd-insp-title[b-ezh77ldomf] {
    font-size: 1rem;
    font-weight: 600;
    margin-block-end: 0.75rem;
}

.pmd-status-chip[b-ezh77ldomf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-end: 0.75rem;
}

.pmd-flag-row[b-ezh77ldomf] {
    display: flex;
    justify-content: space-between;
    padding-block: 0.35rem;
    border-block-end: 1px solid var(--pmd-line);
}

.pmd-badge[b-ezh77ldomf] {
    font-size: 0.75rem;
    color: var(--pmd-ink-3);
}

.pmd-insp-hint[b-ezh77ldomf] {
    color: var(--pmd-ink-3);
    font-size: 0.8rem;
}
/* /Shared/Error404.razor.rz.scp.css */
/* ── Tokens (anchored on root element — CSS isolation safe) ── */
.e404-page[b-i02u1ylave] {
    --e404-bg:           #f2efe9;
    --e404-card-bg:      #ffffff;
    --e404-text:         #18181b;
    --e404-text-soft:    #71717a;
    --e404-text-muted:   #a1a1aa;
    --e404-accent:       #2563eb;
    --e404-accent-hover: #1d4ed8;
    --e404-accent-fg:    #ffffff;
    --e404-border:       rgba(0, 0, 0, 0.07);
    --e404-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    --e404-ghost-hover:  rgba(0, 0, 0, 0.05);
    --e404-radius:       14px;
    --e404-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --e404-transition:   background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[dark-mode="true"] .e404-page[b-i02u1ylave] {
    --e404-bg:           #0c0c12;
    --e404-card-bg:      #12121a;
    --e404-text:         #e4e4e7;
    --e404-text-soft:    #a1a1aa;
    --e404-text-muted:   #71717a;
    --e404-accent:       #3b82f6;
    --e404-accent-hover: #2563eb;
    --e404-accent-fg:    #ffffff;
    --e404-border:       rgba(255, 255, 255, 0.07);
    --e404-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.30);
    --e404-ghost-hover:  rgba(255, 255, 255, 0.05);
}

/* ── Page wrapper ───────────────────────────────────────── */
.e404-page[b-i02u1ylave] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--e404-bg);
    font-family: var(--e404-font);
    color: var(--e404-text);
    transition: var(--e404-transition);
    overflow: hidden;
}

/* ── Background layers ──────────────────────────────────── */
.e404-bg-layer[b-i02u1ylave] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.e404-bg-grid[b-i02u1ylave] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
}

[dark-mode="true"] .e404-bg-grid[b-i02u1ylave] {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.e404-bg-circle[b-i02u1ylave] {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
}

[dark-mode="true"] .e404-bg-circle[b-i02u1ylave] {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
}

/* ── Card ───────────────────────────────────────────────── */
.e404-card[b-i02u1ylave] {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 420px;
    border-radius: var(--e404-radius);
    box-shadow: var(--e404-shadow-lg);
    overflow: hidden;
    animation: e404-rise-b-i02u1ylave 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes e404-rise-b-i02u1ylave {
    from { opacity: 0; transform: translateY(24px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);      }
}

/* ── Visual panel ───────────────────────────────────────── */
.e404-panel-visual[b-i02u1ylave] {
    position: relative;
    width: 42%;
    flex-shrink: 0;
    background: var(--e404-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    overflow: hidden;
    gap: 20px;
}

.e404-panel-pattern[b-i02u1ylave] {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 14px,
        rgba(0, 0, 0, 0.055) 14px,
        rgba(0, 0, 0, 0.055) 15px
    );
    pointer-events: none;
}

.e404-panel-watermark[b-i02u1ylave] {
    position: absolute;
    bottom: -24px;
    right: -8px;
    font-size: 200px;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.09);
    pointer-events: none;
    user-select: none;
    letter-spacing: -8px;
}

.e404-icon-wrap[b-i02u1ylave] {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e404-icon-ring[b-i02u1ylave] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    animation: e404-ring-pulse-b-i02u1ylave 3s ease-in-out infinite;
}

.e404-icon-ring-outer[b-i02u1ylave] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    animation: e404-ring-pulse-b-i02u1ylave 3s ease-in-out infinite 0.6s;
}

@keyframes e404-ring-pulse-b-i02u1ylave {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(1.04); }
}

.e404-icon-wrap svg[b-i02u1ylave] {
    width: 52px;
    height: 52px;
    color: rgba(255, 255, 255, 0.95);
    stroke-width: 1.75;
    position: relative;
    z-index: 1;
}

.e404-panel-title[b-i02u1ylave] {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    margin-top: 4px;
}

/* ── Content panel ──────────────────────────────────────── */
.e404-panel-content[b-i02u1ylave] {
    flex: 1;
    background: var(--e404-card-bg);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--e404-border);
    transition: var(--e404-transition);
}

.e404-content-inner[b-i02u1ylave] {
    padding: 48px 44px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Typography ─────────────────────────────────────────── */
.e404-title[b-i02u1ylave] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--e404-text);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.e404-message[b-i02u1ylave] {
    font-size: 15px;
    line-height: 1.65;
    color: var(--e404-text-soft);
    margin-bottom: 28px;
    transition: color 0.3s ease;
}

/* ── Actions ────────────────────────────────────────────── */
.e404-actions[b-i02u1ylave] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.e404-btn[b-i02u1ylave] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    font-family: var(--e404-font);
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.15s ease;
    white-space: nowrap;
}

.e404-btn svg[b-i02u1ylave] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.e404-btn-primary[b-i02u1ylave] {
    background: var(--e404-accent);
    color: var(--e404-accent-fg);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.e404-btn-primary:hover[b-i02u1ylave] {
    background: var(--e404-accent-hover);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
    transform: translateY(-1px);
}

.e404-btn-primary:active[b-i02u1ylave] { transform: translateY(0); box-shadow: none; }

.e404-btn-ghost[b-i02u1ylave] {
    background: transparent;
    color: var(--e404-text-soft);
    border-color: var(--e404-border);
}

.e404-btn-ghost:hover[b-i02u1ylave] {
    background: var(--e404-ghost-hover);
    color: var(--e404-text);
    border-color: rgba(0, 0, 0, 0.13);
    transform: translateY(-1px);
}

[dark-mode="true"] .e404-btn-ghost:hover[b-i02u1ylave] {
    border-color: rgba(255, 255, 255, 0.13);
}

.e404-btn-ghost:active[b-i02u1ylave] { transform: translateY(0); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .e404-page[b-i02u1ylave] {
        padding: 16px;
        align-items: flex-start;
    }

    .e404-card[b-i02u1ylave] {
        flex-direction: column;
        min-height: unset;
        max-width: 100%;
    }

    .e404-panel-visual[b-i02u1ylave] {
        width: 100%;
        flex-direction: row;
        padding: 24px 28px;
        gap: 16px;
        min-height: unset;
        justify-content: flex-start;
    }

    .e404-panel-watermark[b-i02u1ylave] { display: none; }

    .e404-icon-wrap[b-i02u1ylave] {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .e404-icon-wrap svg[b-i02u1ylave] { width: 30px; height: 30px; }

    .e404-icon-ring[b-i02u1ylave]        { inset: 0; }
    .e404-icon-ring-outer[b-i02u1ylave]  { inset: -7px; }

    .e404-panel-title[b-i02u1ylave] {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
        text-align: left;
        letter-spacing: -0.01em;
    }

    .e404-panel-content[b-i02u1ylave] {
        border-left: none;
        border-top: 1px solid var(--e404-border);
    }

    .e404-content-inner[b-i02u1ylave] { padding: 32px 28px; }

    .e404-title[b-i02u1ylave] { font-size: 20px; }

    .e404-actions[b-i02u1ylave] { flex-direction: column; }

    .e404-btn[b-i02u1ylave] { justify-content: center; width: 100%; }
}

@media (max-width: 420px) {
    .e404-content-inner[b-i02u1ylave] { padding: 24px 20px; }
}
/* /Shared/Error500.razor.rz.scp.css */
/* ── Tokens (anchored on root element — CSS isolation safe) ── */
.e500-page[b-d266vhiuws] {
    --e500-bg:           #f2efe9;
    --e500-card-bg:      #ffffff;
    --e500-text:         #18181b;
    --e500-text-soft:    #71717a;
    --e500-text-muted:   #a1a1aa;
    --e500-accent:       #b91c2c;
    --e500-accent-hover: #9f1239;
    --e500-accent-fg:    #ffffff;
    --e500-border:       rgba(0, 0, 0, 0.07);
    --e500-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    --e500-ghost-hover:  rgba(0, 0, 0, 0.05);
    --e500-radius:       14px;
    --e500-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --e500-transition:   background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[dark-mode="true"] .e500-page[b-d266vhiuws] {
    --e500-bg:           #0c0c12;
    --e500-card-bg:      #12121a;
    --e500-text:         #e4e4e7;
    --e500-text-soft:    #a1a1aa;
    --e500-text-muted:   #71717a;
    --e500-accent:       #f43f5e;
    --e500-accent-hover: #e11d48;
    --e500-accent-fg:    #ffffff;
    --e500-border:       rgba(255, 255, 255, 0.07);
    --e500-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.30);
    --e500-ghost-hover:  rgba(255, 255, 255, 0.05);
}

/* ── Page wrapper ───────────────────────────────────────── */
.e500-page[b-d266vhiuws] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--e500-bg);
    font-family: var(--e500-font);
    color: var(--e500-text);
    transition: var(--e500-transition);
    overflow: hidden;
}

/* ── Background layers ──────────────────────────────────── */
.e500-bg-layer[b-d266vhiuws] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.e500-bg-grid[b-d266vhiuws] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
}

[dark-mode="true"] .e500-bg-grid[b-d266vhiuws] {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.e500-bg-circle[b-d266vhiuws] {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(185, 28, 44, 0.06) 0%, transparent 70%);
}

[dark-mode="true"] .e500-bg-circle[b-d266vhiuws] {
    background: radial-gradient(circle at center, rgba(244, 63, 94, 0.08) 0%, transparent 70%);
}

/* ── Card ───────────────────────────────────────────────── */
.e500-card[b-d266vhiuws] {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 420px;
    border-radius: var(--e500-radius);
    box-shadow: var(--e500-shadow-lg);
    overflow: hidden;
    animation: e500-rise-b-d266vhiuws 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes e500-rise-b-d266vhiuws {
    from { opacity: 0; transform: translateY(24px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);      }
}

/* ── Visual panel ───────────────────────────────────────── */
.e500-panel-visual[b-d266vhiuws] {
    position: relative;
    width: 42%;
    flex-shrink: 0;
    background: var(--e500-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    overflow: hidden;
    gap: 20px;
}

.e500-panel-pattern[b-d266vhiuws] {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 14px,
        rgba(0, 0, 0, 0.055) 14px,
        rgba(0, 0, 0, 0.055) 15px
    );
    pointer-events: none;
}

.e500-panel-watermark[b-d266vhiuws] {
    position: absolute;
    bottom: -24px;
    right: -8px;
    font-size: 200px;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.07);
    pointer-events: none;
    user-select: none;
    letter-spacing: -8px;
}

.e500-icon-wrap[b-d266vhiuws] {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e500-icon-ring[b-d266vhiuws] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    animation: e500-ring-pulse-b-d266vhiuws 3s ease-in-out infinite;
}

.e500-icon-ring-outer[b-d266vhiuws] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    animation: e500-ring-pulse-b-d266vhiuws 3s ease-in-out infinite 0.6s;
}

@keyframes e500-ring-pulse-b-d266vhiuws {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(1.04); }
}

.e500-icon-wrap svg[b-d266vhiuws] {
    width: 52px;
    height: 52px;
    color: rgba(255, 255, 255, 0.95);
    stroke-width: 1.75;
    position: relative;
    z-index: 1;
}

.e500-panel-title[b-d266vhiuws] {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    margin-top: 4px;
}

/* ── Content panel ──────────────────────────────────────── */
.e500-panel-content[b-d266vhiuws] {
    flex: 1;
    background: var(--e500-card-bg);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--e500-border);
    transition: var(--e500-transition);
}

.e500-content-inner[b-d266vhiuws] {
    padding: 48px 44px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Typography ─────────────────────────────────────────── */
.e500-title[b-d266vhiuws] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--e500-text);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.e500-message[b-d266vhiuws] {
    font-size: 15px;
    line-height: 1.65;
    color: var(--e500-text-soft);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.e500-page-url[b-d266vhiuws] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--e500-text-muted);
    margin-bottom: 28px;
    word-break: break-word;
    transition: color 0.3s ease;
}

/* ── Actions ────────────────────────────────────────────── */
.e500-actions[b-d266vhiuws] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.e500-btn[b-d266vhiuws] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    font-family: var(--e500-font);
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.15s ease;
    white-space: nowrap;
}

.e500-btn svg[b-d266vhiuws] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.e500-btn-primary[b-d266vhiuws] {
    background: var(--e500-accent);
    color: var(--e500-accent-fg);
    box-shadow: 0 2px 8px rgba(185, 28, 44, 0.28);
}

.e500-btn-primary:hover[b-d266vhiuws] {
    background: var(--e500-accent-hover);
    box-shadow: 0 4px 16px rgba(185, 28, 44, 0.38);
    transform: translateY(-1px);
}

.e500-btn-primary:active[b-d266vhiuws] { transform: translateY(0); box-shadow: none; }

[dark-mode="true"] .e500-btn-primary[b-d266vhiuws] {
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.28);
}

[dark-mode="true"] .e500-btn-primary:hover[b-d266vhiuws] {
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.38);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .e500-page[b-d266vhiuws] {
        padding: 16px;
        align-items: flex-start;
    }

    .e500-card[b-d266vhiuws] {
        flex-direction: column;
        min-height: unset;
        max-width: 100%;
    }

    .e500-panel-visual[b-d266vhiuws] {
        width: 100%;
        flex-direction: row;
        padding: 24px 28px;
        gap: 16px;
        min-height: unset;
        justify-content: flex-start;
    }

    .e500-panel-watermark[b-d266vhiuws] { display: none; }

    .e500-icon-wrap[b-d266vhiuws] {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .e500-icon-wrap svg[b-d266vhiuws] { width: 30px; height: 30px; }

    .e500-icon-ring[b-d266vhiuws]        { inset: 0; }
    .e500-icon-ring-outer[b-d266vhiuws]  { inset: -7px; }

    .e500-panel-title[b-d266vhiuws] {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
        text-align: left;
        letter-spacing: -0.01em;
    }

    .e500-panel-content[b-d266vhiuws] {
        border-left: none;
        border-top: 1px solid var(--e500-border);
    }

    .e500-content-inner[b-d266vhiuws] { padding: 32px 28px; }

    .e500-title[b-d266vhiuws] { font-size: 20px; }

    .e500-actions[b-d266vhiuws] { flex-direction: column; }

    .e500-btn[b-d266vhiuws] { justify-content: center; width: 100%; }
}

@media (max-width: 420px) {
    .e500-content-inner[b-d266vhiuws] { padding: 24px 20px; }
}
/* /Shared/UnderMaintenance.razor.rz.scp.css */
.maintenance-page[b-ulvpgpbx68] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mud-palette-background);
    padding: 2rem 1rem;
    box-sizing: border-box;
    z-index: 10;
}

/* Large soft circle behind text and plugs */
.maintenance-circle[b-ulvpgpbx68] {
    position: absolute;
    width: min(520px, 85vw);
    height: min(520px, 85vw);
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    z-index: 0;
    pointer-events: none;
}

/* Text area */
.maintenance-text-area[b-ulvpgpbx68] {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 2rem;
}

.maintenance-heading[b-ulvpgpbx68] {
    font-family: var(--mud-typography-default-family);
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 800;
    color: color-mix(in srgb, var(--mud-palette-primary) 85%, var(--mud-palette-text-primary));
    line-height: 1.25;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.02em;
}

.maintenance-subtext[b-ulvpgpbx68] {
    font-family: var(--mud-typography-default-family);
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-text-secondary));
    font-style: italic;
    margin: 0;
    font-weight: 400;
}

/* Plug illustration area */
.maintenance-plug-area[b-ulvpgpbx68] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    height: 90px;
    margin-bottom: 2.5rem;
}

/* Wires extending to screen edges */
.maintenance-wire[b-ulvpgpbx68] {
    flex: 1;
    height: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
    min-width: 20px;
}

.maintenance-wire-left[b-ulvpgpbx68] {
    border-radius: 0 2px 2px 0;
}

.maintenance-wire-right[b-ulvpgpbx68] {
    border-radius: 2px 0 0 2px;
}

/* Plug SVGs */
.maintenance-plug[b-ulvpgpbx68] {
    width: clamp(100px, 18vw, 140px);
    height: auto;
    flex-shrink: 0;
}

.maintenance-plug-left[b-ulvpgpbx68] {
    margin-right: clamp(8px, 3vw, 30px);
    animation: plug-nudge-left-b-ulvpgpbx68 3s ease-in-out infinite;
}

.maintenance-plug-right[b-ulvpgpbx68] {
    margin-left: clamp(8px, 3vw, 30px);
    animation: plug-nudge-right-b-ulvpgpbx68 3s ease-in-out infinite;
}

/* SVG fill classes using theme tokens */
[b-ulvpgpbx68] .plug-body {
    fill: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    stroke: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
    stroke-width: 2.5;
}

[b-ulvpgpbx68] .plug-band {
    fill: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-surface));
    stroke: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
    stroke-width: 2.5;
}

[b-ulvpgpbx68] .plug-cable {
    fill: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    stroke: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
    stroke-width: 2.5;
}

[b-ulvpgpbx68] .plug-prong {
    fill: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
}

[b-ulvpgpbx68] .plug-socket-hole {
    fill: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    stroke: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-secondary));
    stroke-width: 2;
}

/* Subtle nudge animation */
@keyframes plug-nudge-left-b-ulvpgpbx68 {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(6px); }
    55% { transform: translateX(-2px); }
    70% { transform: translateX(0); }
}

@keyframes plug-nudge-right-b-ulvpgpbx68 {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(-6px); }
    55% { transform: translateX(2px); }
    70% { transform: translateX(0); }
}

/* Action buttons */
.maintenance-actions[b-ulvpgpbx68] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

[b-ulvpgpbx68] .maintenance-btn {
    border-radius: calc(4px * 5) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Responsive */
@media (max-width: 480px) {
    .maintenance-plug-area[b-ulvpgpbx68] {
        height: 70px;
    }

    .maintenance-actions[b-ulvpgpbx68] {
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
    }

    [b-ulvpgpbx68] .maintenance-btn {
        width: 100%;
    }

    .maintenance-circle[b-ulvpgpbx68] {
        width: 90vw;
        height: 90vw;
    }
}