/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor's unhandled-error bar. Hidden until blazor.web.js sets an inline
style.display = 'block' on a real circuit failure; the inline style beats this rule.
MainLayout does not load ProAuditThemeAssets, so private aliases fall back to the
Audit Journal literals (same approach as ReconnectModal.razor.css). */
#blazor-error-ui[b-qohdvz6d5c] {
--error-ui-card: var(--pa-card, #fffaf3);
--error-ui-ink: var(--pa-ink, #191510);
--error-ui-hair: var(--pa-hair, #e3d8cb);
--error-ui-bad: var(--pa-bad-fg, #963d30);
--error-ui-font-body: var(--pa-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
box-sizing: border-box;
padding: 12px 48px 12px 20px;
background: var(--error-ui-card);
color: var(--error-ui-ink);
border-top: 1px solid var(--error-ui-hair);
box-shadow: inset 4px 0 0 var(--error-ui-bad), 0 -6px 18px rgba(25, 21, 16, .12);
font-family: var(--error-ui-font-body);
font-size: 14px;
line-height: 1.5;
}
#blazor-error-ui .reload[b-qohdvz6d5c] {
margin-left: 6px;
color: var(--error-ui-bad);
font-weight: 600;
}
#blazor-error-ui .dismiss[b-qohdvz6d5c] {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
cursor: pointer;
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
PortalLayout — Warm Industrial Refinement
Charcoal shell, golden orange accents, clean hierarchy
═══════════════════════════════════════════════════════ */
/* ── AppBar ──────────────────────────────────────────── */
[b-mra4qu2usv] .portal-appbar {
border-bottom: 1px solid rgba(221, 145, 66, 0.15);
backdrop-filter: blur(8px);
}
.portal-title[b-mra4qu2usv] {
font-weight: 300;
letter-spacing: 0.04em;
user-select: none;
}
.portal-title-accent[b-mra4qu2usv] {
font-weight: 700;
color: #dd9142;
}
[b-mra4qu2usv] .portal-menu-toggle {
transition: transform 0.2s ease;
}
[b-mra4qu2usv] .portal-menu-toggle:hover {
transform: scale(1.08);
}
/* ── Company Badge ───────────────────────────────────── */
.portal-company-badge[b-mra4qu2usv] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
margin-right: 12px;
background: rgba(221, 145, 66, 0.12);
border: 1px solid rgba(221, 145, 66, 0.25);
border-radius: 20px;
color: rgba(255, 255, 255, 0.92);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease;
}
.portal-company-badge:hover[b-mra4qu2usv] {
background: rgba(221, 145, 66, 0.2);
border-color: rgba(221, 145, 66, 0.4);
}
/* ── Drawer ──────────────────────────────────────────── */
[b-mra4qu2usv] .portal-drawer {
border-right: 1px solid rgba(221, 145, 66, 0.08);
}
.portal-nav-wrapper[b-mra4qu2usv] {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 8px;
}
/* Nav link styling — golden left accent on active */
[b-mra4qu2usv] .portal-nav .mud-nav-link {
margin: 2px 8px;
border-radius: 6px;
transition: background 0.15s ease, padding-left 0.15s ease;
border-left: 3px solid transparent;
}
[b-mra4qu2usv] .portal-nav .mud-nav-link:hover {
background: rgba(221, 145, 66, 0.08);
}
[b-mra4qu2usv] .portal-nav .mud-nav-link.active {
background: rgba(221, 145, 66, 0.12);
border-left-color: #dd9142;
font-weight: 600;
}
/* Nav group headers */
[b-mra4qu2usv] .portal-nav .mud-nav-group .mud-nav-link {
margin-left: 20px;
font-size: 0.8125rem;
}
/* ── Main Content ────────────────────────────────────── */
[b-mra4qu2usv] .portal-main {
background: #fafaf8;
min-height: 100vh;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The global reconnect dialog also appears on pages without Audit Journal assets.
Private aliases inherit customer branding without replacing the shared tokens. */
#components-reconnect-modal[b-ejwu2n1i0a] {
--reconnect-card: var(--pa-card, #fffaf3);
--reconnect-ink: var(--pa-ink, #191510);
--reconnect-muted: var(--pa-muted, #706358);
--reconnect-hair: var(--pa-hair, #e3d8cb);
--reconnect-faint-decor: var(--pa-faint-decor, #8a7d6e);
--reconnect-brand: var(--pa-orange, #dd9142);
--reconnect-brand-deep: var(--pa-orange-deep, #925f2a);
--reconnect-brand-hover: var(--pa-orange-hover, #d0832f);
--reconnect-brand-fg: var(--pa-orange-fg, #16120e);
--reconnect-ok-bg: var(--pa-ok-bg, #e8f6ea);
--reconnect-ok-fg: var(--pa-ok-fg, #296a37);
--reconnect-bad-fg: var(--pa-bad-fg, #963d30);
--reconnect-font-display: var(--pa-font-display, Georgia, serif);
--reconnect-font-body: var(--pa-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
--reconnect-radius: var(--pa-radius, 10px);
--reconnect-shadow: var(--pa-shadow-dialog, 0 24px 60px rgba(25, 21, 16, .35));
--reconnect-button-shadow: var(--pa-shadow-btn, 0 6px 14px rgba(139, 82, 28, .16));
display: none;
position: fixed;
inset: 0;
box-sizing: border-box;
width: 426px;
height: fit-content;
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 32px);
margin: auto;
padding: 31px 32px 26px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--reconnect-card);
color: var(--reconnect-ink);
border: 1px solid var(--reconnect-hair);
border-radius: 18px;
box-shadow: var(--reconnect-shadow);
font-family: var(--reconnect-font-body);
line-height: 1.5;
text-align: center;
opacity: 1;
transition: opacity 240ms ease;
}
/* Blazor's retained state classes must never make a closed dialog visible. */
#components-reconnect-modal[open][b-ejwu2n1i0a] {
display: block;
}
#components-reconnect-modal[b-ejwu2n1i0a]::backdrop {
--reconnect-backdrop-ink: var(--pa-shadow-ink, #191510);
background: color-mix(in srgb, var(--reconnect-backdrop-ink) 28%, transparent);
backdrop-filter: blur(3px);
opacity: 1;
transition: opacity 240ms ease;
}
#components-reconnect-modal[data-leaving="true"][b-ejwu2n1i0a],
#components-reconnect-modal[data-leaving="true"][b-ejwu2n1i0a]::backdrop {
opacity: 0;
}
/* Keep native modal blocking during the first connection check, without flashing
the car on a healthy tab resume. Only a failed attempt reveals the artwork. */
#components-reconnect-modal[data-pending="true"][b-ejwu2n1i0a],
#components-reconnect-modal[data-pending="true"][b-ejwu2n1i0a]::backdrop {
opacity: 0;
transition: none;
pointer-events: none;
}
#components-reconnect-modal[data-pending="true"] :is(.car-body, .spokes, .road-line)[b-ejwu2n1i0a] {
animation-play-state: paused;
}
#components-reconnect-modal [hidden][b-ejwu2n1i0a] {
display: none !important;
}
.connection-label[b-ejwu2n1i0a] {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--reconnect-muted);
font-size: 12px;
font-weight: 600;
}
.connection-dot[b-ejwu2n1i0a] {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--reconnect-brand-deep);
}
.car-scene[b-ejwu2n1i0a] {
display: block;
width: 280px;
max-width: 100%;
height: 130px;
margin: 15px auto 18px;
overflow: hidden;
}
.road-bed[b-ejwu2n1i0a] {
fill: color-mix(in srgb, var(--reconnect-hair) 55%, var(--reconnect-card));
}
.road-line[b-ejwu2n1i0a] {
stroke: var(--reconnect-faint-decor);
stroke-width: 2;
stroke-dasharray: 19 24;
animation: reconnect-road-travel-b-ejwu2n1i0a 1.8s linear infinite;
}
.car-shell[b-ejwu2n1i0a] {
fill: var(--reconnect-brand);
stroke: var(--reconnect-ink);
stroke-width: 2.3;
stroke-linejoin: round;
}
.car-glass[b-ejwu2n1i0a] {
fill: var(--reconnect-card);
stroke: var(--reconnect-ink);
stroke-width: 2;
stroke-linejoin: round;
}
.car-detail[b-ejwu2n1i0a] {
fill: none;
stroke: var(--reconnect-ink);
stroke-width: 1.8;
stroke-linecap: round;
}
.tire[b-ejwu2n1i0a] { fill: var(--reconnect-ink); }
.rim[b-ejwu2n1i0a] { fill: var(--reconnect-card); }
.spokes[b-ejwu2n1i0a] {
stroke: var(--reconnect-muted);
stroke-width: 1.5;
transform-box: fill-box;
transform-origin: center;
animation: reconnect-wheel-turn-b-ejwu2n1i0a 1.6s linear infinite;
}
.car-body[b-ejwu2n1i0a] {
animation: reconnect-idle-body-b-ejwu2n1i0a 1.3s ease-in-out infinite;
}
.car-shadow[b-ejwu2n1i0a] {
fill: color-mix(in srgb, var(--reconnect-ink) 9%, transparent);
}
.tail-light[b-ejwu2n1i0a] { fill: var(--reconnect-bad-fg); }
.head-light[b-ejwu2n1i0a] {
fill: var(--reconnect-card);
stroke: var(--reconnect-ink);
stroke-width: 1.5;
}
.car-arrival[b-ejwu2n1i0a] {
transition: transform 650ms cubic-bezier(.5, 0, .8, .7);
}
#reconnect-title[b-ejwu2n1i0a] {
color: var(--reconnect-ink);
font-family: var(--reconnect-font-display);
font-weight: 600;
font-size: 29px;
letter-spacing: -.6px;
line-height: 1.15;
margin: 0 0 14px;
}
.reconnect-description[b-ejwu2n1i0a] {
color: var(--reconnect-muted);
font-size: 14px;
line-height: 1.65;
margin: 0 auto;
max-width: 33ch;
min-height: 47px;
}
.connection-footer[b-ejwu2n1i0a] {
box-sizing: border-box;
margin-top: 25px;
padding-top: 19px;
border-top: 1px solid var(--reconnect-hair);
display: flex;
justify-content: center;
align-items: center;
min-height: 40px;
gap: 8px;
font-size: 12px;
color: var(--reconnect-muted);
}
.connection-footer svg[b-ejwu2n1i0a] {
width: 15px;
height: 15px;
flex: 0 0 auto;
}
/* Same primary-button primitive, with local fallbacks for unthemed pages. */
#components-reconnect-modal .reconnect-cta[b-ejwu2n1i0a] {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
min-height: 42px;
margin-top: 21px;
padding: 10px 22px;
border: none;
border-radius: var(--reconnect-radius);
background: var(--reconnect-brand);
color: var(--reconnect-brand-fg);
box-shadow: var(--reconnect-button-shadow);
font: inherit;
font-size: .84rem;
font-weight: 700;
cursor: pointer;
transition: background-color 150ms ease;
}
#components-reconnect-modal .reconnect-cta:hover[b-ejwu2n1i0a] {
background: var(--reconnect-brand-hover);
}
#components-reconnect-modal .reconnect-cta:disabled[b-ejwu2n1i0a] {
opacity: .45;
cursor: not-allowed;
box-shadow: none;
}
#components-reconnect-modal .reconnect-cta:focus-visible[b-ejwu2n1i0a] {
outline: 2px solid var(--reconnect-brand-deep);
outline-offset: 3px;
}
/* This heading is an announcement/focus target, not an interactive control. */
#reconnect-title:focus[b-ejwu2n1i0a] { outline: none; }
#components-reconnect-modal[data-state="restored"] .connection-dot[b-ejwu2n1i0a] {
background: var(--reconnect-ok-fg);
}
#components-reconnect-modal[data-state="restored"] .connection-label[b-ejwu2n1i0a] {
color: var(--reconnect-ok-fg);
}
#components-reconnect-modal[data-state="restored"] .car-arrival[b-ejwu2n1i0a] {
transform: translateX(300px);
}
#components-reconnect-modal:is([data-state="failed"], [data-state="paused"], [data-state="resume-failed"]) :is(.car-body, .spokes, .road-line)[b-ejwu2n1i0a] {
animation-play-state: paused;
}
.restored-mark[b-ejwu2n1i0a] {
opacity: 0;
transition: opacity 260ms 280ms;
}
#components-reconnect-modal[data-state="restored"] .restored-mark[b-ejwu2n1i0a] {
opacity: 1;
}
.restored-ground[b-ejwu2n1i0a] { fill: var(--reconnect-ok-bg); }
.restored-check[b-ejwu2n1i0a] {
fill: none;
stroke: var(--reconnect-ok-fg);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes reconnect-road-travel-b-ejwu2n1i0a {
to { stroke-dashoffset: 86; }
}
@keyframes reconnect-wheel-turn-b-ejwu2n1i0a {
to { transform: rotate(360deg); }
}
@keyframes reconnect-idle-body-b-ejwu2n1i0a {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.2px); }
}
@media (prefers-reduced-motion: reduce) {
#components-reconnect-modal[b-ejwu2n1i0a],
#components-reconnect-modal[b-ejwu2n1i0a]::backdrop,
#components-reconnect-modal .reconnect-cta[b-ejwu2n1i0a],
.car-scene *[b-ejwu2n1i0a] {
animation: none !important;
transition: none !important;
}
}
@media (max-width: 500px) {
#components-reconnect-modal[b-ejwu2n1i0a] { padding: 25px 22px 23px; }
#reconnect-title[b-ejwu2n1i0a] { font-size: 26px; }
.car-scene[b-ejwu2n1i0a] { margin-top: 12px; margin-bottom: 15px; }
}
/* /Components/Pages/Admin/Ai/AiOperationConfirmDialog.razor.rz.scp.css */
[b-191fpwrfok] .aiadm-dialog-content { padding: 0; }
.aiadm-dialog-root[b-191fpwrfok] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
}
.aiadm-dialog-root p[b-191fpwrfok] { margin: 0; }
/* /Components/Pages/Admin/Ai/Dialogs/CreateAiBlockDialog.razor.rz.scp.css */
[b-k4bb7nwqqs] .aic-block-dialog-content { padding: 0; }
.aic-block-dialog-root[b-k4bb7nwqqs] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
}
.aic-block-dialog-root p[b-k4bb7nwqqs] { margin: 0; }
/* /Components/Pages/Admin/Ai/Dialogs/ResolveStuckAttemptDialog.razor.rz.scp.css */
[b-46wsfsamjc] .aic-resolve-dialog-content { padding: 0; }
.aic-resolve-dialog-root[b-46wsfsamjc] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
}
.aic-resolve-dialog-root p[b-46wsfsamjc] { margin: 0; }
/* /Components/Pages/Admin/Ai/Dialogs/SetAiBudgetCeilingDialog.razor.rz.scp.css */
[b-00ahzy7qlz] .aic-ceiling-dialog-content { padding: 0; }
.aic-ceiling-dialog-root[b-00ahzy7qlz] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
}
.aic-ceiling-dialog-root p[b-00ahzy7qlz] { margin: 0; }
/* /Components/Pages/Admin/Ai/Tabs/ChatRetentionSection.razor.rz.scp.css */
/* Chat retention sits under the workflow routing and shares its card: the same strong hairline, radius and ground.
Selectors that must beat the page's .aic-workspace sizing (pills 10px, inputs 13px) carry one more class. */
.acr-panel[b-iydutlkn3t] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin: 0;
padding: 18px 22px;
border: 1px solid var(--pa-hair-strong);
border-radius: var(--pa-radius);
background: var(--pa-card);
min-width: 0;
}
.acr-panel--loading[b-iydutlkn3t] { min-height: 132px; align-content: start; }
.acr-skel-line[b-iydutlkn3t] { width: 34rem; max-width: 100%; }
.acr-skel-line--short[b-iydutlkn3t] { width: 18rem; }
/* The policy sentence carries the setting: its number reads first, in the tab's route colour. */
.acr-policy[b-iydutlkn3t] {
margin: 0;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
color: var(--pa-ink);
overflow-wrap: anywhere;
}
.acr-days[b-iydutlkn3t] {
font-size: 26px;
font-weight: 650;
line-height: 1;
color: var(--pa-teal-deep);
padding-inline: 2px;
}
/* In edit the number becomes a field of the same size, so the sentence around it stays put. */
.acr-panel .acr-days-input[b-iydutlkn3t] {
display: inline-block;
width: 7.5ch;
min-height: 0;
margin-inline: 4px;
padding: 1px 8px;
font-size: 22px;
font-weight: 650;
line-height: 1.1;
color: var(--pa-teal-deep);
vertical-align: baseline;
}
.acr-range[b-iydutlkn3t] { margin: 0; font-size: 12px; color: var(--pa-muted); }
.acr-error[b-iydutlkn3t] { margin: 0; font-size: 13px; font-weight: 600; color: var(--pa-bad-fg); }
.acr-scope[b-iydutlkn3t] { margin: 0; max-width: 78ch; font-size: 13px; line-height: 1.6; color: var(--pa-muted); text-wrap: pretty; }
.acr-foot[b-iydutlkn3t] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--pa-hair);
}
.acr-foot > p[b-iydutlkn3t] { flex: 1 1 260px; min-width: 0; margin: 0; }
.acr-changed[b-iydutlkn3t] { font-size: 13px; color: var(--pa-muted); }
.acr-note[b-iydutlkn3t] { font-size: 12px; color: var(--pa-muted); }
.acr-actions[b-iydutlkn3t] { display: flex; flex-wrap: wrap; gap: 8px; }
.acr .acr-pill[b-iydutlkn3t] { font-size: 12px; }
.acr .acr-callout[b-iydutlkn3t] { margin: 0; flex-wrap: wrap; align-items: center; }
.acr-callout > span:first-child[b-iydutlkn3t] { flex: 1 1 280px; min-width: 0; }
.acr-callout-actions[b-iydutlkn3t] { display: flex; flex-wrap: wrap; gap: 14px; }
.acr-callout-actions .aic-link[b-iydutlkn3t] { font-size: 13px; }
/* The page stacks section heads on narrow screens but its later align-items: center rule centres them; keep this one left. */
@media (max-width: 768px) {
.acr .aic-section__head[b-iydutlkn3t] { align-items: flex-start; }
}
@media (max-width: 680px) {
.acr-panel[b-iydutlkn3t] { padding: 14px 12px; }
.acr-policy[b-iydutlkn3t] { font-size: 16px; }
.acr-actions[b-iydutlkn3t] { width: 100%; }
}
/* /Components/Pages/Admin/Ai/Tabs/CrmAssistLimitsSection.razor.rz.scp.css */
/* CRM Assist's limits sit in its row between the route's figures and the advanced details, on the same hairline. The
fields, labels and grid are the row's own; this only spaces the section and sets its footer. */
.acl[b-48fszjwbfh] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 14px 0 16px;
border-top: 1px solid var(--pa-hair);
min-width: 0;
}
.acl-head[b-48fszjwbfh] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 6px 12px;
}
.acl-form[b-48fszjwbfh] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
/* A number of up to six digits does not need the track's full width. */
.acl .acl-number[b-48fszjwbfh] { max-width: 11rem; }
.acl .acl-range[b-48fszjwbfh] { color: var(--pa-muted); }
.acl-foot[b-48fszjwbfh] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
}
/* Reads first: the numbers in force, whatever is in the fields above. */
.acl-in-force[b-48fszjwbfh] { flex: 1 1 280px; min-width: 0; }
.acl-in-force-line[b-48fszjwbfh] { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pa-ink); overflow-wrap: anywhere; }
.acl-in-force-line strong[b-48fszjwbfh] { font-weight: 650; color: var(--pa-teal-deep); }
.acl-note[b-48fszjwbfh] { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--pa-muted); }
.acl-foot > .acl-note[b-48fszjwbfh] { flex: 0 1 auto; margin: 0; }
.acl-actions[b-48fszjwbfh] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.acl-loading[b-48fszjwbfh] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 72px; align-content: start; }
.acl-skel-line[b-48fszjwbfh] { width: 26rem; max-width: 100%; }
.acl .acl-callout[b-48fszjwbfh] { margin: 0; flex-wrap: wrap; align-items: center; }
.acl-callout > span:first-child[b-48fszjwbfh] { flex: 1 1 280px; min-width: 0; }
.acl-callout-actions[b-48fszjwbfh] { display: flex; flex-wrap: wrap; gap: 14px; }
.acl-callout-actions .aic-link[b-48fszjwbfh] { font-size: 13px; }
@media (max-width: 680px) {
.acl .acl-number[b-48fszjwbfh] { max-width: none; }
.acl-actions[b-48fszjwbfh] { width: 100%; margin-left: 0; }
}
/* /Components/Pages/Admin/Ai/Tabs/ProviderConnectionEditor.razor.rz.scp.css */
/* A key's status pill keeps its own width: the summary row's flexible text span rule would otherwise
stretch it across the row once every provider lists its keys. */
.aic-connection-summary > .pa-pill[b-bp04z22d15] { flex: 0 0 auto; }
/* /Components/Pages/Admin/Ai/Tabs/ProviderKeyPasteBox.razor.rz.scp.css */
/* The paste box sits above the provider rows and shares their card: the same hairline, radius and ground. */
.akp[b-jyzdsjwm8n] {
display: grid;
gap: 8px;
padding: 16px 20px;
margin-bottom: 18px;
border: 1px solid var(--pa-hair);
border-radius: var(--pa-radius);
background: var(--pa-card);
min-width: 0;
}
.akp-head[b-jyzdsjwm8n] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.akp-head > div[b-jyzdsjwm8n] { margin-right: auto; min-width: 0; }
.akp-title[b-jyzdsjwm8n] { font-size: 16px; font-weight: 650; margin: 0 0 3px; color: var(--pa-ink); }
.akp-lede[b-jyzdsjwm8n] { margin: 0; max-width: 72ch; font-size: 13px; line-height: 1.55; }
/* Write-only: what is pasted is drawn as dots, like the per-provider key inputs. */
.akp-paste[b-jyzdsjwm8n] { box-sizing: border-box; min-height: 92px; resize: vertical; line-height: 1.6; -webkit-text-security: disc; }
.akp-actions[b-jyzdsjwm8n] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.akp-blocker[b-jyzdsjwm8n] { margin: 2px 0 0; color: var(--pa-warn-fg); font-size: 13px; }
/* One aligned line per key: provider, tail, what happens. */
.akp-rows[b-jyzdsjwm8n] { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--pa-hair); }
.akp-row[b-jyzdsjwm8n] {
display: grid;
grid-template-columns: 28px minmax(150px, 230px) 96px minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 6px;
padding: 9px 0;
border-bottom: 1px solid var(--pa-hair);
font-size: 13px;
}
.akp-mark[b-jyzdsjwm8n] {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 7px;
font-size: 16px;
color: var(--pa-ink);
background: var(--pa-card-tint);
}
.akp-provider[b-jyzdsjwm8n] { min-width: 0; font-weight: 600; }
.akp-select[b-jyzdsjwm8n] { box-sizing: border-box; padding-block: 6px; font-size: 13px; }
.akp-tail[b-jyzdsjwm8n] { color: var(--pa-ink); white-space: nowrap; letter-spacing: .04em; }
.akp-action[b-jyzdsjwm8n] { min-width: 0; overflow-wrap: anywhere; }
.akp-confirm[b-jyzdsjwm8n] { grid-column: 2 / -1; font-size: 13px; }
.akp-row.akp-row--save .akp-action[b-jyzdsjwm8n] { color: var(--pa-teal-deep); }
.akp-row.akp-row--attention .akp-action[b-jyzdsjwm8n] { color: var(--pa-warn-fg); }
.akp-row.akp-row--skip[b-jyzdsjwm8n] { color: var(--pa-muted); }
.akp-row.akp-row--skip .akp-provider[b-jyzdsjwm8n] { font-weight: 500; }
.akp-row.akp-row--skip .akp-mark[b-jyzdsjwm8n] { opacity: .55; }
@media (max-width: 680px) {
.akp[b-jyzdsjwm8n] { padding: 14px 12px; }
.akp-row[b-jyzdsjwm8n] { grid-template-columns: 26px minmax(0, 1fr); }
.akp-tail[b-jyzdsjwm8n], .akp-action[b-jyzdsjwm8n], .akp-confirm[b-jyzdsjwm8n] { grid-column: 2; }
}
/* /Components/Pages/Admin/Onboarding/ApprovalCodes.razor.rz.scp.css */
.apc-page[b-yjcjntcx38] {
background: var(--pa-paper);
min-height: calc(100vh - 80px);
margin: -16px;
padding: 36px 48px 64px;
color: var(--pa-ink);
font-feature-settings: 'ss01', 'cv11';
}
@media (max-width: 900px) {
.apc-page[b-yjcjntcx38] { padding: 24px 18px 56px; }
}
/* ============================================================
HEADER
============================================================ */
.apc-header[b-yjcjntcx38] { max-width: var(--pa-page-max); margin: 0 auto; }
.apc-edition-strip[b-yjcjntcx38] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 1px solid var(--pa-hair);
}
.apc-edition-mark[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 600;
color: var(--pa-faint);
letter-spacing: 0.06em;
}
.apc-edition-mark .apc-edition-num[b-yjcjntcx38] {
color: var(--pa-ink);
background: var(--pa-card-tint);
border: 1px solid var(--pa-hair-strong);
border-radius: 4px;
padding: 3px 8px;
}
.apc-edition-mark .apc-edition-sep[b-yjcjntcx38] {
color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong));
}
.apc-edition-now[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 500;
color: var(--pa-faint);
letter-spacing: 0.04em;
}
.apc-edition-now-dot[b-yjcjntcx38] {
width: 5px; height: 5px;
border-radius: 999px;
background: var(--pa-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 18%, transparent);
animation: apc-pulse-b-yjcjntcx38 2.4s ease-in-out infinite;
}
@keyframes apc-pulse-b-yjcjntcx38 {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 18%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pa-teal) 4%, transparent); }
}
.apc-header-inner[b-yjcjntcx38] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.apc-eyebrow[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--pa-teal-deep);
margin-bottom: 14px;
}
.apc-eyebrow-dot[b-yjcjntcx38] {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--pa-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 14%, transparent);
}
.apc-title[b-yjcjntcx38] {
font-size: clamp(34px, 4.4vw, 46px);
font-weight: 600;
letter-spacing: 0;
line-height: 1.02;
color: var(--pa-ink);
margin: 0 0 12px 0;
}
.apc-title-italic[b-yjcjntcx38] {
font-style: italic;
font-weight: 400;
color: var(--pa-orange-deep);
letter-spacing: 0;
}
.apc-subtitle[b-yjcjntcx38] {
font-size: 15.5px;
font-weight: 400;
color: var(--pa-muted);
max-width: 68ch;
line-height: 1.55;
margin: 0;
}
.apc-primary-btn[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-card);
background: var(--pa-orange);
border: 1px solid var(--pa-orange-deep);
border-radius: 10px;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 18%, transparent),
0 1px 2px color-mix(in srgb, var(--pa-orange) 32%, transparent),
0 6px 20px -8px color-mix(in srgb, var(--pa-orange) 50%, transparent);
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.apc-primary-btn:hover[b-yjcjntcx38] {
background: var(--pa-orange-deep);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 20%, transparent),
0 2px 4px color-mix(in srgb, var(--pa-orange) 36%, transparent),
0 10px 24px -6px color-mix(in srgb, var(--pa-orange) 55%, transparent);
}
.apc-primary-btn:active[b-yjcjntcx38] { transform: translateY(0); }
.apc-primary-btn svg[b-yjcjntcx38] { width: 16px; height: 16px; stroke-width: 2.25; }
.apc-rule-accent[b-yjcjntcx38] {
max-width: var(--pa-page-max);
margin: 28px auto 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--pa-orange) 14%,
var(--pa-orange) 30%,
var(--pa-teal) 70%,
transparent 100%
);
opacity: 0.55;
}
/* ============================================================
STATS STRIP
============================================================ */
.apc-stats[b-yjcjntcx38] {
max-width: var(--pa-page-max);
margin: 36px auto 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px) { .apc-stats[b-yjcjntcx38] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .apc-stats[b-yjcjntcx38] { grid-template-columns: minmax(0, 1fr); } }
.apc-stat[b-yjcjntcx38] {
position: relative;
padding: 18px 20px 18px;
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 12px;
box-shadow:
0 1px 0 color-mix(in srgb, var(--pa-card) 60%, transparent) inset,
0 1px 2px color-mix(in srgb, var(--pa-shadow-ink) 3%, transparent);
overflow: hidden;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.apc-stat:hover[b-yjcjntcx38] {
transform: translateY(-2px);
box-shadow:
0 1px 0 color-mix(in srgb, var(--pa-card) 70%, transparent) inset,
0 4px 12px color-mix(in srgb, var(--pa-shadow-ink) 6%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--pa-shadow-ink) 16%, transparent);
}
.apc-stat-accent[b-yjcjntcx38] {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
opacity: 0.7;
}
.apc-stat:nth-child(1) .apc-stat-accent[b-yjcjntcx38] { background: linear-gradient(90deg, var(--pa-teal) 0%, transparent 100%); }
.apc-stat:nth-child(2) .apc-stat-accent[b-yjcjntcx38] { background: linear-gradient(90deg, var(--pa-warn-fg) 0%, transparent 100%); }
.apc-stat:nth-child(3) .apc-stat-accent[b-yjcjntcx38] { background: linear-gradient(90deg, var(--pa-orange) 0%, transparent 100%); }
.apc-stat:nth-child(4) .apc-stat-accent[b-yjcjntcx38] { background: linear-gradient(90deg, var(--pa-ink) 0%, transparent 100%); }
.apc-stat-head[b-yjcjntcx38] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.apc-stat-label[b-yjcjntcx38] {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--pa-faint);
}
.apc-stat-icon[b-yjcjntcx38] {
width: 22px; height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong));
opacity: 0.7;
}
.apc-stat-icon svg[b-yjcjntcx38] { width: 16px; height: 16px; stroke-width: 1.75; }
.apc-stat-num[b-yjcjntcx38] {
font-size: 30px;
font-weight: 700;
letter-spacing: 0;
color: var(--pa-ink);
line-height: 1;
}
.apc-stat-num.is-empty[b-yjcjntcx38] { color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong)); font-weight: 600; }
.apc-stat-num-suffix[b-yjcjntcx38] {
font-size: 15px;
font-weight: 500;
color: var(--pa-faint);
margin-left: 4px;
}
.apc-stat-foot[b-yjcjntcx38] {
margin-top: 8px;
font-size: 12px;
color: var(--pa-faint);
line-height: 1.4;
}
.apc-stat-foot strong[b-yjcjntcx38] { color: var(--pa-ink); font-weight: 600; }
.apc-stat-bar[b-yjcjntcx38] {
margin-top: 10px;
height: 4px;
background: color-mix(in srgb, var(--pa-ink) 5%, transparent);
border-radius: 999px;
overflow: hidden;
}
.apc-stat-bar-fill[b-yjcjntcx38] {
height: 100%;
background: var(--pa-orange);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apc-stat:nth-child(1) .apc-stat-bar-fill[b-yjcjntcx38] { background: var(--pa-teal); }
.apc-stat:nth-child(2) .apc-stat-bar-fill[b-yjcjntcx38] { background: var(--pa-warn-fg); }
.apc-stat:nth-child(3) .apc-stat-bar-fill[b-yjcjntcx38] { background: var(--pa-orange); }
.apc-stat:nth-child(4) .apc-stat-bar-fill[b-yjcjntcx38] { background: var(--pa-ink); }
/* Stats loading skeleton */
.apc-stats-skeleton .apc-stat[b-yjcjntcx38] {
position: relative;
min-height: 110px;
}
.apc-stats-skeleton .apc-stat[b-yjcjntcx38]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--pa-ink) 4%, transparent),
transparent
);
animation: apc-shimmer-b-yjcjntcx38 1.6s linear infinite;
}
@keyframes apc-shimmer-b-yjcjntcx38 {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* ============================================================
TOOLBAR
============================================================ */
.apc-toolbar[b-yjcjntcx38] {
max-width: var(--pa-page-max);
margin: 32px auto 16px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.apc-search[b-yjcjntcx38] {
position: relative;
flex: 1 1 320px;
max-width: 52ch;
}
.apc-search svg[b-yjcjntcx38] {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
stroke: var(--pa-faint);
stroke-width: 2;
pointer-events: none;
}
.apc-search input[b-yjcjntcx38] {
width: 100%;
height: 42px;
padding: 0 14px 0 40px;
font-size: 14px;
color: var(--pa-ink);
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 10px;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.apc-search input[b-yjcjntcx38]::placeholder { color: var(--pa-faint); }
.apc-search input:focus[b-yjcjntcx38] {
border-color: var(--pa-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 14%, transparent);
}
.apc-status-group[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 10px;
}
.apc-status-group label[b-yjcjntcx38] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--pa-faint);
}
.apc-status-group select[b-yjcjntcx38] {
height: 42px;
padding: 0 36px 0 14px;
font-size: 14px;
font-weight: 500;
color: var(--pa-ink);
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 10px;
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.apc-status-group select:focus[b-yjcjntcx38] {
border-color: var(--pa-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 14%, transparent);
}
.apc-count[b-yjcjntcx38] {
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: 6px;
color: var(--pa-faint);
}
.apc-count-num[b-yjcjntcx38] {
font-size: 15px;
font-weight: 600;
color: var(--pa-ink);
letter-spacing: 0;
}
.apc-count-label[b-yjcjntcx38] {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
/* ============================================================
DATA GRID
============================================================ */
.apc-grid-card[b-yjcjntcx38] {
max-width: var(--pa-page-max);
margin: 0 auto;
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 14px;
overflow: hidden;
box-shadow:
0 1px 0 color-mix(in srgb, var(--pa-card) 60%, transparent) inset,
0 1px 2px color-mix(in srgb, var(--pa-shadow-ink) 3%, transparent),
0 12px 32px -20px color-mix(in srgb, var(--pa-shadow-ink) 12%, transparent);
}
.apc-page[b-yjcjntcx38] .mud-table-root,
.apc-page[b-yjcjntcx38] .mud-table-container { background: transparent; }
.apc-page[b-yjcjntcx38] table.mud-table-root { border-collapse: separate; border-spacing: 0; }
.apc-page[b-yjcjntcx38] th.mud-table-cell {
background: var(--pa-card-tint);
color: var(--pa-faint);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.13em;
padding: 14px 22px;
border-bottom: 1px solid var(--pa-hair);
border-top: none;
}
.apc-page[b-yjcjntcx38] td.mud-table-cell {
padding: 18px 22px;
font-size: 14px;
color: var(--pa-ink);
border-bottom: 1px solid var(--pa-hair);
vertical-align: middle;
}
.apc-page[b-yjcjntcx38] .mud-table-row:last-child td.mud-table-cell { border-bottom: none; }
.apc-page[b-yjcjntcx38] .mud-table-row { cursor: pointer; transition: background 140ms ease; }
.apc-page[b-yjcjntcx38] .mud-table-row:hover td.mud-table-cell { background: color-mix(in srgb, var(--pa-orange) 3.5%, transparent); }
.apc-page[b-yjcjntcx38] .mud-table-row:hover .apc-row-arrow { opacity: 1; transform: translateX(0); }
.apc-row-arrow[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
color: var(--pa-faint);
opacity: 0;
transform: translateX(-4px);
transition: all 180ms ease;
}
.apc-row-arrow svg[b-yjcjntcx38] { width: 14px; height: 14px; stroke-width: 2; }
/* Cell: code */
.apc-code-wrap[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.apc-mono-code[b-yjcjntcx38] {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.045em;
color: var(--pa-ink);
padding: 6px 12px;
background: linear-gradient(180deg, var(--pa-card-tint) 0%, color-mix(in srgb, var(--pa-card-tint) 70%, var(--pa-hair)) 100%);
border: 1px solid var(--pa-hair-strong);
border-radius: 7px;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 70%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--pa-ink) 4%, transparent);
white-space: nowrap;
}
.apc-copy-btn[b-yjcjntcx38] {
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
color: var(--pa-faint);
cursor: pointer;
opacity: 0.6;
transition: all 140ms ease;
}
.apc-copy-btn:hover[b-yjcjntcx38] {
background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
border-color: var(--pa-hair);
color: var(--pa-ink);
opacity: 1;
}
.apc-copy-btn.is-copied[b-yjcjntcx38] {
color: var(--pa-teal-deep);
opacity: 1;
background: color-mix(in srgb, var(--pa-teal) 8%, transparent);
border-color: color-mix(in srgb, var(--pa-teal) 25%, transparent);
}
.apc-copy-btn svg[b-yjcjntcx38] { width: 14px; height: 14px; stroke-width: 2; }
/* Cell: status pill */
.apc-status-pill[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.apc-status-pill[b-yjcjntcx38]::before {
content: '';
width: 6px; height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-card) 40%, transparent);
}
.apc-status-usable[b-yjcjntcx38] {
color: var(--pa-teal-deep);
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-teal) 22%, transparent);
}
.apc-status-revoked[b-yjcjntcx38] {
color: var(--pa-bad-fg);
background: color-mix(in srgb, var(--pa-bad-fg) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-bad-fg) 20%, transparent);
}
/* 2%, not 5%: grid rows hover (Mud TableHover plus the 3.5% orange cell wash), and on
that stack a 5% ink wash left --pa-muted at 4.29:1 in dark. 2% gives 4.66 there
(light 4.80); the 12% border still draws the pill. */
.apc-status-expired[b-yjcjntcx38] {
color: var(--pa-muted);
background: color-mix(in srgb, var(--pa-ink) 2%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-ink) 12%, transparent);
}
.apc-status-exhausted[b-yjcjntcx38] {
color: var(--pa-warn-fg);
background: color-mix(in srgb, var(--pa-orange) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-orange) 26%, transparent);
}
/* Cell: uses */
.apc-uses[b-yjcjntcx38] { min-width: 70px; }
.apc-uses-count[b-yjcjntcx38] {
font-size: 13px;
font-weight: 600;
color: var(--pa-ink);
letter-spacing: 0;
}
.apc-uses-sep[b-yjcjntcx38] { color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong)); margin: 0 2px; font-weight: 400; }
.apc-uses-max[b-yjcjntcx38] { color: var(--pa-faint); font-weight: 500; }
.apc-uses-bar[b-yjcjntcx38] {
height: 3px;
background: color-mix(in srgb, var(--pa-ink) 6%, transparent);
border-radius: 999px;
margin-top: 6px;
overflow: hidden;
width: 72px;
}
.apc-uses-fill[b-yjcjntcx38] {
height: 100%;
background: var(--pa-orange);
border-radius: 999px;
transition: width 220ms ease;
}
/* Cell: context */
.apc-context[b-yjcjntcx38] {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.apc-chip[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--pa-muted);
padding: 3px 9px;
background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
border: 1px solid var(--pa-hair);
border-radius: 6px;
line-height: 1.3;
}
.apc-chip strong[b-yjcjntcx38] { color: var(--pa-ink); font-weight: 600; }
.apc-chip-mso[b-yjcjntcx38] {
color: var(--pa-teal-deep);
background: color-mix(in srgb, var(--pa-teal) 6%, transparent);
border-color: color-mix(in srgb, var(--pa-teal) 20%, transparent);
}
.apc-chip-mso strong[b-yjcjntcx38] { color: var(--pa-teal-deep); }
.apc-chip-plan[b-yjcjntcx38] {
color: var(--pa-orange-deep);
background: color-mix(in srgb, var(--pa-orange) 6%, transparent);
border-color: color-mix(in srgb, var(--pa-orange) 22%, transparent);
}
.apc-chip-icon[b-yjcjntcx38] { width: 12px; height: 12px; stroke-width: 2; }
.apc-context-standalone[b-yjcjntcx38] {
font-size: 13px;
color: var(--pa-faint);
font-style: italic;
}
/* Cell: trial/expires */
.apc-trial[b-yjcjntcx38] { font-size: 13px; font-weight: 500; color: var(--pa-ink); }
.apc-dash[b-yjcjntcx38] { color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong)); font-size: 15px; }
.apc-expires[b-yjcjntcx38] { font-size: 13px; font-weight: 500; color: var(--pa-ink); }
.apc-expires.is-none[b-yjcjntcx38] { color: var(--pa-faint); font-weight: 400; }
.apc-expires.is-past[b-yjcjntcx38] { color: var(--pa-faint); }
.apc-expires.is-soon[b-yjcjntcx38] { color: var(--pa-warn-fg); font-weight: 600; }
/* Cell: created */
.apc-created-date[b-yjcjntcx38] {
font-size: 13px;
font-weight: 500;
color: var(--pa-ink);
letter-spacing: 0;
}
.apc-created-by[b-yjcjntcx38] { font-size: 11.5px; color: var(--pa-faint); margin-top: 2px; }
/* Empty state */
.apc-empty-state[b-yjcjntcx38] {
padding: 72px 24px;
text-align: center;
max-width: 52ch;
margin: 0 auto;
}
.apc-empty-icon[b-yjcjntcx38] {
width: 56px; height: 56px;
margin: 0 auto 20px;
border-radius: 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--pa-orange) 12%, transparent) 0%, color-mix(in srgb, var(--pa-teal) 8%, transparent) 100%);
border: 1px solid var(--pa-hair);
display: flex;
align-items: center;
justify-content: center;
color: var(--pa-orange-deep);
}
.apc-empty-icon svg[b-yjcjntcx38] { width: 24px; height: 24px; stroke-width: 1.75; }
.apc-empty-state h3[b-yjcjntcx38] {
font-size: 22px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-ink);
margin: 0 0 10px;
}
.apc-empty-state p[b-yjcjntcx38] {
font-size: 14px;
color: var(--pa-muted);
line-height: 1.55;
margin: 0 0 24px;
}
/* Pager */
.apc-page[b-yjcjntcx38] .mud-table-pagination {
background: var(--pa-card-tint);
border-top: 1px solid var(--pa-hair);
font-size: 12.5px;
color: var(--pa-muted);
}
.apc-page[b-yjcjntcx38] .mud-table-pagination-toolbar { padding: 10px 16px; }
.apc-page[b-yjcjntcx38] .mud-table-pagination-select { color: var(--pa-ink); }
/* Menu override */
.apc-page[b-yjcjntcx38] .mud-menu button.mud-icon-button {
width: 32px; height: 32px; min-width: 32px;
color: var(--pa-faint);
}
.apc-page[b-yjcjntcx38] .mud-menu button.mud-icon-button:hover {
background: color-mix(in srgb, var(--pa-ink) 5%, transparent);
color: var(--pa-ink);
}
/* ============================================================
DETAIL DRAWER
Design tokens are redeclared here because the drawer renders
OUTSIDE .apc-page (it's a fixed overlay). Without this block
the var(--pa-paper) / var(--ink-*) lookups would fail and the
drawer would be transparent. Same gotcha as .logs-dialog.
============================================================ */
.apc-drawer[b-yjcjntcx38],
.apc-drawer-backdrop[b-yjcjntcx38] {
color: var(--pa-ink);
font-feature-settings: 'ss01', 'cv11';
}
.apc-drawer-backdrop[b-yjcjntcx38] {
position: fixed;
inset: 0;
background: var(--pa-scrim);
backdrop-filter: var(--pa-scrim-filter);
-webkit-backdrop-filter: var(--pa-scrim-filter);
z-index: 1100;
animation: apc-fadeIn-b-yjcjntcx38 220ms ease;
}
@keyframes apc-fadeIn-b-yjcjntcx38 {
from { opacity: 0; }
to { opacity: 1; }
}
.apc-drawer[b-yjcjntcx38] {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(100%, 540px);
background: var(--pa-paper);
z-index: 1101;
box-shadow:
-1px 0 0 var(--pa-hair),
-16px 0 48px -16px color-mix(in srgb, var(--pa-shadow-ink) 30%, transparent);
display: flex;
flex-direction: column;
animation: apc-slideIn-b-yjcjntcx38 280ms cubic-bezier(0.32, 0.72, 0, 1);
overflow: hidden;
}
@keyframes apc-slideIn-b-yjcjntcx38 {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.apc-drawer-head[b-yjcjntcx38] {
position: relative;
padding: 24px 28px 22px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--pa-card) 70%, transparent) 0%, color-mix(in srgb, var(--pa-card) 0%, transparent) 100%),
var(--pa-card);
border-bottom: 1px solid var(--pa-hair);
}
.apc-drawer-head[b-yjcjntcx38]::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--pa-orange) 18%,
var(--pa-teal) 64%,
transparent 100%);
opacity: 0.5;
}
.apc-drawer-head-top[b-yjcjntcx38] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.apc-drawer-eyebrow[b-yjcjntcx38] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-teal-deep);
}
.apc-drawer-close[b-yjcjntcx38] {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--pa-faint);
cursor: pointer;
transition: all 140ms ease;
}
.apc-drawer-close:hover[b-yjcjntcx38] {
background: color-mix(in srgb, var(--pa-ink) 5%, transparent);
border-color: var(--pa-hair);
color: var(--pa-ink);
}
.apc-drawer-close svg[b-yjcjntcx38] { width: 16px; height: 16px; stroke-width: 2; }
.apc-drawer-codeplate[b-yjcjntcx38] {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.apc-drawer-mono[b-yjcjntcx38] {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--pa-ink);
padding: 8px 14px;
background: var(--pa-card-tint);
border: 1px solid var(--pa-hair-strong);
border-radius: 8px;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pa-card) 70%, transparent);
}
.apc-drawer-actions-inline[b-yjcjntcx38] {
display: inline-flex;
gap: 8px;
}
.apc-drawer-mini[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--pa-muted);
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 7px;
cursor: pointer;
transition: all 140ms ease;
}
.apc-drawer-mini:hover[b-yjcjntcx38] { border-color: var(--pa-teal); color: var(--pa-teal-deep); }
.apc-drawer-mini.is-copied[b-yjcjntcx38] {
color: var(--pa-teal-deep);
border-color: var(--pa-teal);
background: color-mix(in srgb, var(--pa-teal) 6%, transparent);
}
.apc-drawer-mini svg[b-yjcjntcx38] { width: 13px; height: 13px; stroke-width: 2; }
.apc-drawer-body[b-yjcjntcx38] {
flex: 1;
overflow-y: auto;
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
gap: 22px;
}
.apc-drawer-section[b-yjcjntcx38] { display: flex; flex-direction: column; gap: 10px; }
.apc-drawer-section-head[b-yjcjntcx38] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
display: flex;
align-items: center;
gap: 10px;
}
.apc-drawer-section-head[b-yjcjntcx38]::after {
content: '';
flex: 1;
height: 1px;
background: var(--pa-hair);
}
.apc-drawer-meta[b-yjcjntcx38] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.apc-drawer-meta-item[b-yjcjntcx38] {
padding: 12px 14px;
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 9px;
}
.apc-drawer-meta-k[b-yjcjntcx38] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
margin-bottom: 4px;
}
.apc-drawer-meta-v[b-yjcjntcx38] {
font-size: 14px;
font-weight: 500;
color: var(--pa-ink);
line-height: 1.4;
}
.apc-drawer-meta-v.is-mono[b-yjcjntcx38] {
font-size: 13.5px;
letter-spacing: 0;
}
.apc-drawer-notes[b-yjcjntcx38] {
padding: 14px 16px;
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 9px;
font-size: 13.5px;
color: var(--pa-ink);
line-height: 1.55;
font-style: italic;
}
.apc-drawer-notes-empty[b-yjcjntcx38] {
font-style: italic;
font-size: 13px;
color: var(--pa-faint);
}
.apc-drawer-url[b-yjcjntcx38] {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--pa-card);
border: 1px dashed var(--pa-hair-strong);
border-radius: 9px;
}
.apc-drawer-url-label[b-yjcjntcx38] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
}
.apc-drawer-url-value[b-yjcjntcx38] {
font-size: 11.5px;
color: var(--pa-muted);
word-break: break-all;
}
.apc-drawer-foot[b-yjcjntcx38] {
padding: 16px 28px;
background: var(--pa-card);
border-top: 1px solid var(--pa-hair);
display: flex;
gap: 10px;
align-items: center;
}
.apc-drawer-foot-spacer[b-yjcjntcx38] { flex: 1; }
.apc-drawer-revoke[b-yjcjntcx38] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
color: var(--pa-bad-fg);
background: var(--pa-card);
border: 1px solid color-mix(in srgb, var(--pa-bad-fg) 32%, transparent);
border-radius: 8px;
cursor: pointer;
transition: all 140ms ease;
}
.apc-drawer-revoke:hover[b-yjcjntcx38] {
background: color-mix(in srgb, var(--pa-bad-fg) 6%, transparent);
border-color: var(--pa-bad-fg);
}
.apc-drawer-revoke svg[b-yjcjntcx38] { width: 13px; height: 13px; stroke-width: 2; }
.apc-drawer-uses-bar[b-yjcjntcx38] {
margin-top: 10px;
height: 6px;
background: color-mix(in srgb, var(--pa-ink) 6%, transparent);
border-radius: 999px;
overflow: hidden;
}
.apc-drawer-uses-fill[b-yjcjntcx38] {
height: 100%;
background: var(--pa-orange);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* /Components/Pages/Admin/Onboarding/GenerateApprovalCodeDialog.razor.rz.scp.css */
.gac-dialog[b-hehxkhw5or] {
font-feature-settings: 'ss01', 'cv11';
}
.gac-dialog[b-hehxkhw5or] .mud-dialog {
border-radius: 18px !important;
overflow: hidden;
background: var(--pa-paper) !important;
box-shadow:
0 1px 0 color-mix(in srgb, var(--pa-card) 70%, transparent) inset,
var(--pa-shadow-dialog);
}
.gac-dialog[b-hehxkhw5or] .mud-dialog-title {
padding: 22px 28px 18px !important;
border-bottom: 1px solid var(--pa-hair);
background:
linear-gradient(180deg, color-mix(in srgb, var(--pa-card) 75%, transparent) 0%, color-mix(in srgb, var(--pa-card) 0%, transparent) 100%),
var(--pa-card);
position: relative;
}
.gac-dialog[b-hehxkhw5or] .mud-dialog-title::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--pa-orange) 18%,
var(--pa-orange) 36%,
var(--pa-teal) 64%,
transparent 100%);
opacity: 0.55;
}
.gac-dialog[b-hehxkhw5or] .mud-dialog-content {
padding: 0 !important;
background: var(--pa-paper);
}
.gac-dialog[b-hehxkhw5or] .mud-dialog-actions { display: none; }
/* ---------- Title ---------- */
.gac-title[b-hehxkhw5or] {
display: flex;
flex-direction: column;
gap: 8px;
}
.gac-title-stamp[b-hehxkhw5or] {
display: flex;
align-items: center;
gap: 12px;
}
.gac-title-mark[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--pa-faint);
padding: 3px 8px;
background: var(--pa-paper);
border: 1px solid var(--pa-hair-strong);
border-radius: 4px;
}
.gac-title-eyebrow[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-teal-deep);
}
.gac-title-main[b-hehxkhw5or] {
font-size: 24px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-ink);
line-height: 1.1;
}
/* ---------- Two-column shell ---------- */
.gac-shell[b-hehxkhw5or] {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
min-height: 480px;
}
.gac-config[b-hehxkhw5or] {
padding: 26px 28px 24px;
display: flex;
flex-direction: column;
gap: 24px;
border-right: 1px solid var(--pa-hair);
background: var(--pa-paper);
}
.gac-blueprint[b-hehxkhw5or] {
padding: 26px 28px 24px;
background:
radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--pa-teal) 5%, transparent) 0%, transparent 50%),
radial-gradient(120% 60% at 0% 100%, color-mix(in srgb, var(--pa-orange) 4%, transparent) 0%, transparent 50%),
var(--pa-card-tint);
display: flex;
flex-direction: column;
gap: 18px;
}
/* ---------- Section ---------- */
.gac-section[b-hehxkhw5or] {
display: flex;
flex-direction: column;
gap: 12px;
}
.gac-section-head[b-hehxkhw5or] {
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 6px;
}
.gac-section-num[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--pa-orange-deep);
width: 18px;
}
.gac-section-name[b-hehxkhw5or] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--pa-muted);
}
.gac-section-rule[b-hehxkhw5or] {
flex: 1;
height: 1px;
background: var(--pa-hair);
margin-left: 4px;
}
.gac-field[b-hehxkhw5or] {
display: flex;
flex-direction: column;
gap: 6px;
}
.gac-field-conditional[b-hehxkhw5or] { animation: gac-fadeDown-b-hehxkhw5or 220ms ease both; }
@keyframes gac-fadeDown-b-hehxkhw5or {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.gac-label[b-hehxkhw5or] {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--pa-ink);
}
.gac-help[b-hehxkhw5or] {
font-size: 12px;
color: var(--pa-faint);
line-height: 1.45;
}
/* ---------- MudBlazor input skin ---------- */
.gac-dialog[b-hehxkhw5or] .mud-input-outlined .mud-input-outlined-border {
border-color: var(--pa-hair-strong);
border-radius: 9px;
}
.gac-dialog[b-hehxkhw5or] .mud-input-outlined.mud-shrink .mud-input-outlined-border,
.gac-dialog[b-hehxkhw5or] .mud-input-outlined.mud-focused .mud-input-outlined-border {
border-color: var(--pa-teal) !important;
border-width: 1.5px !important;
}
.gac-dialog[b-hehxkhw5or] .mud-input-label {
font-size: 13px;
color: var(--pa-muted);
}
.gac-dialog[b-hehxkhw5or] .mud-input-slot input,
.gac-dialog[b-hehxkhw5or] .mud-input-slot textarea {
font-size: 14px;
color: var(--pa-ink);
}
/* ---------- Segmented toggle ---------- */
.gac-segmented[b-hehxkhw5or] {
display: inline-flex;
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 10px;
padding: 3px;
position: relative;
width: 100%;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pa-card) 60%, transparent);
}
.gac-seg[b-hehxkhw5or] {
flex: 1;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-faint);
background: transparent;
border: none;
border-radius: 7px;
cursor: pointer;
transition: all 160ms ease;
position: relative;
z-index: 1;
}
.gac-seg:hover[b-hehxkhw5or] { color: var(--pa-muted); }
.gac-seg.is-active[b-hehxkhw5or] {
color: var(--pa-ink);
background: var(--pa-card-tint);
box-shadow:
0 1px 2px color-mix(in srgb, var(--pa-shadow-ink) 6%, transparent),
0 0 0 1px var(--pa-hair-strong),
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 70%, transparent);
}
/* ---------- Preset chips ---------- */
.gac-presets[b-hehxkhw5or] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.gac-preset[b-hehxkhw5or] {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 6px 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--pa-muted);
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 7px;
cursor: pointer;
transition: all 140ms ease;
}
.gac-preset:hover[b-hehxkhw5or] {
color: var(--pa-ink);
border-color: color-mix(in srgb, var(--pa-ink) 22%, transparent);
transform: translateY(-1px);
}
.gac-preset.is-active[b-hehxkhw5or] {
color: var(--pa-orange-deep);
border-color: var(--pa-orange);
background: color-mix(in srgb, var(--pa-orange) 8%, transparent);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--pa-orange) 10%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 60%, transparent);
}
.gac-preset-num[b-hehxkhw5or] {
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.gac-preset-unit[b-hehxkhw5or] {
font-size: 11.5px;
font-weight: 500;
color: var(--pa-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.gac-preset.is-active .gac-preset-unit[b-hehxkhw5or] { color: var(--pa-orange-deep); opacity: 0.75; }
/* ---------- Trial / expires linked row ---------- */
.gac-window[b-hehxkhw5or] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.gac-link-icon[b-hehxkhw5or] {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 26px;
color: var(--pa-teal-deep);
background: color-mix(in srgb, var(--pa-teal) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-teal) 22%, transparent);
border-radius: 999px;
position: relative;
}
.gac-link-icon svg[b-hehxkhw5or] { width: 14px; height: 14px; stroke-width: 2.25; }
.gac-link-icon[b-hehxkhw5or]::before,
.gac-link-icon[b-hehxkhw5or]::after {
content: '';
position: absolute;
top: 50%;
width: 12px;
height: 1px;
background: color-mix(in srgb, var(--pa-teal) 35%, transparent);
}
.gac-link-icon[b-hehxkhw5or]::before { right: 100%; }
.gac-link-icon[b-hehxkhw5or]::after { left: 100%; }
.gac-checkbox[b-hehxkhw5or] {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--pa-muted);
cursor: pointer;
user-select: none;
margin-top: 6px;
}
.gac-checkbox input[b-hehxkhw5or] {
width: 14px; height: 14px;
accent-color: var(--pa-teal);
cursor: pointer;
margin: 0;
}
/* ---------- Blueprint card ---------- */
.gac-bp-eyebrow[b-hehxkhw5or] {
display: flex;
align-items: center;
gap: 10px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-faint);
}
.gac-bp-eyebrow-dot[b-hehxkhw5or] {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--pa-teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 16%, transparent);
animation: gac-pulse-b-hehxkhw5or 2.4s ease-in-out infinite;
}
@keyframes gac-pulse-b-hehxkhw5or {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-teal) 16%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pa-teal) 4%, transparent); }
}
.gac-bp-codeplate[b-hehxkhw5or] {
margin-top: 6px;
padding: 18px 18px 16px;
background:
linear-gradient(180deg, var(--pa-card) 0%, var(--pa-card-tint) 100%);
border: 1px solid var(--pa-hair-strong);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.gac-bp-codeplate[b-hehxkhw5or]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--pa-orange) 0%, var(--pa-teal) 100%);
}
.gac-bp-code-label[b-hehxkhw5or] {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pa-faint);
margin-bottom: 6px;
}
.gac-bp-code[b-hehxkhw5or] {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--pa-ink);
line-height: 1;
}
.gac-bp-code .gac-bp-code-x[b-hehxkhw5or] {
color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong));
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong));
text-underline-offset: 4px;
}
.gac-bp-code-caption[b-hehxkhw5or] {
margin-top: 8px;
font-size: 11px;
color: var(--pa-faint);
font-style: italic;
}
.gac-bp-list[b-hehxkhw5or] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.gac-bp-list li[b-hehxkhw5or] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: var(--pa-muted);
}
.gac-bp-list li strong[b-hehxkhw5or] {
color: var(--pa-ink);
font-weight: 600;
}
.gac-bp-bullet[b-hehxkhw5or] {
width: 14px; height: 14px;
margin-top: 3px;
flex-shrink: 0;
color: var(--pa-orange-text);
}
.gac-bp-bullet svg[b-hehxkhw5or] { width: 14px; height: 14px; stroke-width: 1.75; }
.gac-bp-bullet.is-teal[b-hehxkhw5or] { color: var(--pa-teal-deep); }
.gac-bp-bullet.is-muted[b-hehxkhw5or] { color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong)); }
.gac-bp-section-rule[b-hehxkhw5or] {
height: 1px;
background: var(--pa-hair);
margin: 4px 0 2px;
}
.gac-bp-window[b-hehxkhw5or] {
display: flex;
flex-direction: column;
gap: 8px;
}
.gac-bp-window-head[b-hehxkhw5or] {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.gac-bp-window-title[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
}
.gac-bp-window-counter[b-hehxkhw5or] {
font-size: 11.5px;
font-weight: 600;
color: var(--pa-ink);
}
.gac-bp-window-counter.is-muted[b-hehxkhw5or] { color: color-mix(in srgb, var(--pa-faint) 60%, var(--pa-hair-strong)); font-weight: 500; }
.gac-bp-track[b-hehxkhw5or] {
position: relative;
height: 8px;
background: color-mix(in srgb, var(--pa-ink) 6%, transparent);
border-radius: 999px;
overflow: hidden;
}
.gac-bp-track-fill[b-hehxkhw5or] {
position: absolute;
top: 0; left: 0; bottom: 0;
background: linear-gradient(90deg, var(--pa-orange) 0%, var(--pa-teal) 100%);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gac-bp-track-fill.is-infinite[b-hehxkhw5or] {
width: 100% !important;
background: repeating-linear-gradient(
-45deg,
var(--pa-teal) 0,
var(--pa-teal) 8px,
color-mix(in srgb, var(--pa-teal) 55%, transparent) 8px,
color-mix(in srgb, var(--pa-teal) 55%, transparent) 16px);
animation: gac-march-b-hehxkhw5or 12s linear infinite;
}
@keyframes gac-march-b-hehxkhw5or {
from { background-position: 0 0; }
to { background-position: 320px 0; }
}
.gac-bp-track-labels[b-hehxkhw5or] {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--pa-faint);
}
.gac-bp-track-labels strong[b-hehxkhw5or] { color: var(--pa-ink); font-weight: 600; }
.gac-bp-url[b-hehxkhw5or] {
padding: 11px 12px;
background: var(--pa-card);
border: 1px dashed var(--pa-hair-strong);
border-radius: 9px;
display: flex;
flex-direction: column;
gap: 4px;
}
.gac-bp-url-label[b-hehxkhw5or] {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-faint);
}
.gac-bp-url-value[b-hehxkhw5or] {
font-size: 11px;
color: var(--pa-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Footer ---------- */
.gac-footer[b-hehxkhw5or] {
padding: 14px 28px 22px;
background: var(--pa-paper);
border-top: 1px solid var(--pa-hair);
display: flex;
flex-direction: column;
gap: 12px;
}
.gac-actions[b-hehxkhw5or] {
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: center;
}
.gac-actions-hint[b-hehxkhw5or] {
margin-right: auto;
font-size: 12px;
color: var(--pa-faint);
font-style: italic;
}
.gac-btn[b-hehxkhw5or] {
font-size: 13.5px;
font-weight: 600;
padding: 10px 18px;
border-radius: 9px;
cursor: pointer;
transition: all 140ms ease;
border: 1px solid transparent;
letter-spacing: 0;
}
.gac-btn-ghost[b-hehxkhw5or] {
background: transparent;
color: var(--pa-muted);
border-color: var(--pa-hair-strong);
}
.gac-btn-ghost:hover[b-hehxkhw5or] {
background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
color: var(--pa-ink);
border-color: color-mix(in srgb, var(--pa-ink) 22%, transparent);
}
.gac-btn-primary[b-hehxkhw5or] {
background: var(--pa-orange);
color: var(--pa-card);
border-color: var(--pa-orange-deep);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 18%, transparent),
0 1px 2px color-mix(in srgb, var(--pa-orange) 32%, transparent),
0 6px 20px -8px color-mix(in srgb, var(--pa-orange) 50%, transparent);
}
.gac-btn-primary:hover:not(:disabled)[b-hehxkhw5or] {
background: var(--pa-orange-deep);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 22%, transparent),
0 2px 4px color-mix(in srgb, var(--pa-orange) 36%, transparent),
0 10px 24px -6px color-mix(in srgb, var(--pa-orange) 55%, transparent);
}
.gac-btn-primary:disabled[b-hehxkhw5or] { opacity: 0.55; cursor: not-allowed; }
.gac-btn svg[b-hehxkhw5or] { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
/* ---------- Success state (refined) ---------- */
.gac-success[b-hehxkhw5or] {
display: flex;
flex-direction: column;
gap: 22px;
padding: 28px 32px;
}
.gac-success-top[b-hehxkhw5or] {
display: flex;
align-items: center;
gap: 16px;
animation: gac-fadeIn-b-hehxkhw5or 360ms ease both;
}
.gac-check-ring[b-hehxkhw5or] {
width: 48px; height: 48px;
border-radius: 999px;
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
border: 1.5px solid color-mix(in srgb, var(--pa-teal) 32%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--pa-teal-deep);
flex-shrink: 0;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--pa-teal) 4%, transparent);
}
.gac-check-ring svg[b-hehxkhw5or] { width: 24px; height: 24px; stroke-width: 2.5; }
.gac-success-text h4[b-hehxkhw5or] {
font-size: 19px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-ink);
margin: 0 0 4px;
}
.gac-success-text p[b-hehxkhw5or] {
font-size: 13.5px;
color: var(--pa-muted);
line-height: 1.55;
margin: 0;
}
.gac-code-card[b-hehxkhw5or] {
padding: 24px 22px;
background:
radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--pa-orange) 6%, transparent) 0%, transparent 50%),
radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--pa-teal) 6%, transparent) 0%, transparent 50%),
linear-gradient(180deg, var(--pa-card) 0%, var(--pa-card-tint) 100%);
border: 1px solid var(--pa-hair-strong);
border-radius: 14px;
position: relative;
overflow: hidden;
animation: gac-fadeIn-b-hehxkhw5or 360ms ease 120ms both;
}
.gac-code-card[b-hehxkhw5or]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--pa-orange) 0%, var(--pa-teal) 100%);
}
.gac-code-label[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-faint);
margin-bottom: 12px;
}
.gac-code-display[b-hehxkhw5or] {
font-size: 30px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--pa-ink);
line-height: 1;
word-break: break-all;
}
.gac-code-actions[b-hehxkhw5or] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.gac-mini-btn[b-hehxkhw5or] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
font-size: 12.5px;
font-weight: 600;
color: var(--pa-muted);
background: var(--pa-card);
border: 1px solid var(--pa-hair-strong);
border-radius: 7px;
cursor: pointer;
transition: all 140ms ease;
}
.gac-mini-btn svg[b-hehxkhw5or] { width: 13px; height: 13px; stroke-width: 2; }
.gac-mini-btn:hover[b-hehxkhw5or] { border-color: var(--pa-teal); color: var(--pa-teal-deep); }
.gac-mini-btn.is-copied[b-hehxkhw5or] {
color: var(--pa-teal-deep);
border-color: var(--pa-teal);
background: color-mix(in srgb, var(--pa-teal) 6%, transparent);
}
.gac-url-row[b-hehxkhw5or] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 10px;
animation: gac-fadeIn-b-hehxkhw5or 360ms ease 220ms both;
}
.gac-url-label[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
flex-shrink: 0;
}
.gac-url-value[b-hehxkhw5or] {
font-size: 12.5px;
color: var(--pa-muted);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gac-meta-grid[b-hehxkhw5or] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
animation: gac-fadeIn-b-hehxkhw5or 360ms ease 320ms both;
}
.gac-meta-item[b-hehxkhw5or] {
padding: 11px 13px;
border: 1px solid var(--pa-hair);
border-radius: 9px;
background: var(--pa-card-tint);
}
.gac-meta-k[b-hehxkhw5or] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pa-faint);
margin-bottom: 4px;
}
.gac-meta-v[b-hehxkhw5or] {
font-size: 13.5px;
font-weight: 500;
color: var(--pa-ink);
}
.gac-meta-v.is-mono[b-hehxkhw5or] {
letter-spacing: 0.02em;
}
@keyframes gac-fadeIn-b-hehxkhw5or {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Responsive ---------- */
@media (max-width: 760px) {
.gac-shell[b-hehxkhw5or] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.gac-config[b-hehxkhw5or] { border-right: none; border-bottom: 1px solid var(--pa-hair); }
}
/* /Components/Pages/Admin/Onboarding/RevokeApprovalCodeDialog.razor.rz.scp.css */
.rac-dialog[b-yr225r99kf] .mud-dialog { border-radius: 14px !important; overflow: hidden; }
.rac-title[b-yr225r99kf] { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.rac-eyebrow[b-yr225r99kf] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-bad-fg);
}
.rac-title-main[b-yr225r99kf] {
font-size: 19px;
font-weight: 600;
letter-spacing: 0;
color: var(--pa-ink);
}
.rac-body[b-yr225r99kf] { padding: 4px 0 8px; }
.rac-code-preview[b-yr225r99kf] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: linear-gradient(180deg, var(--pa-card-tint) 0%, color-mix(in srgb, var(--pa-card-tint) 70%, var(--pa-hair)) 100%);
border: 1px solid var(--pa-hair-strong);
border-radius: 11px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
.rac-code-preview[b-yr225r99kf]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--pa-bad-fg);
opacity: 0.75;
}
.rac-code-label[b-yr225r99kf] {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pa-faint);
flex-shrink: 0;
}
.rac-code-value[b-yr225r99kf] {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--pa-ink);
}
.rac-warn-text[b-yr225r99kf] {
font-size: 14px;
color: var(--pa-muted);
line-height: 1.6;
margin: 0;
}
.rac-warn-text strong[b-yr225r99kf] { color: var(--pa-ink); font-weight: 600; }
.rac-consequences[b-yr225r99kf] {
margin-top: 14px;
padding: 12px 14px;
background: color-mix(in srgb, var(--pa-bad-fg) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-bad-fg) 18%, transparent);
border-radius: 9px;
font-size: 13px;
color: var(--pa-muted);
line-height: 1.55;
}
.rac-consequences strong[b-yr225r99kf] { color: color-mix(in srgb, var(--pa-bad-fg) 78%, var(--pa-ink)); font-weight: 600; }
.rac-actions[b-yr225r99kf] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 20px;
}
.rac-btn[b-yr225r99kf] {
font-size: 13.5px;
font-weight: 600;
padding: 10px 18px;
border-radius: 9px;
cursor: pointer;
border: 1px solid transparent;
transition: all 140ms ease;
}
.rac-btn-ghost[b-yr225r99kf] {
background: transparent;
color: var(--pa-muted);
border-color: var(--pa-hair-strong);
}
.rac-btn-ghost:hover[b-yr225r99kf] { background: color-mix(in srgb, var(--pa-ink) 4%, transparent); color: var(--pa-ink); }
.rac-btn-danger[b-yr225r99kf] {
background: var(--pa-bad-fg);
color: var(--pa-card);
border-color: color-mix(in srgb, var(--pa-bad-fg) 78%, var(--pa-ink));
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--pa-card) 14%, transparent),
0 1px 2px color-mix(in srgb, var(--pa-bad-fg) 32%, transparent);
}
.rac-btn-danger:hover[b-yr225r99kf] { background: color-mix(in srgb, var(--pa-bad-fg) 78%, var(--pa-ink)); }
.rac-btn-danger:disabled[b-yr225r99kf] { opacity: 0.55; cursor: not-allowed; }
/* /Components/Pages/Admin/ProAudit/AccessTabContent.razor.rz.scp.css */
.pa-access-tab[b-fomjaqqu7w] {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.5rem 0;
}
.pa-access-scope[b-fomjaqqu7w] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border-radius: 6px;
background: var(--pa-thead-bg);
color: var(--pa-thead-fg);
transition: background 200ms ease, color 200ms ease;
}
.pa-access-scope.is-restricted[b-fomjaqqu7w] {
background: var(--pa-warn-bg);
color: var(--pa-warn-fg);
}
.pa-access-glyph[b-fomjaqqu7w] {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.pa-access-scope-text[b-fomjaqqu7w] {
font-size: 0.95rem;
}
.pa-access-helper[b-fomjaqqu7w] {
margin: 0.25rem 0 0 0;
font-size: 0.8125rem;
color: var(--mud-palette-text-secondary, #666);
}
.pa-access-picker[b-fomjaqqu7w] {
overflow: hidden;
transition: max-height 220ms ease, opacity 220ms ease;
}
.pa-access-picker.is-closed[b-fomjaqqu7w] {
max-height: 0;
opacity: 0;
pointer-events: none;
}
.pa-access-picker.is-open[b-fomjaqqu7w] {
max-height: 4000px;
opacity: 1;
pointer-events: auto;
}
.pa-section-divider[b-fomjaqqu7w] {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mud-palette-text-secondary, #666);
margin: 1rem 0 0.5rem 0;
}
.pa-access-grant-list[b-fomjaqqu7w] {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-top: 0.75rem;
}
.pa-access-grant-card[b-fomjaqqu7w] {
animation: pa-access-card-enter-b-fomjaqqu7w 180ms ease both;
}
@keyframes pa-access-card-enter-b-fomjaqqu7w {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.pa-access-grant-meta[b-fomjaqqu7w] {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.pa-access-grant-name[b-fomjaqqu7w] {
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pa-access-grant-sub[b-fomjaqqu7w] {
font-size: 0.75rem;
color: var(--mud-palette-text-secondary, #666);
}
.pa-access-pill[b-fomjaqqu7w] {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.4;
}
.pa-access-pill-pending[b-fomjaqqu7w] {
background: var(--pa-info-bg);
color: var(--pa-info-fg);
}
.pa-access-pill-marketplace[b-fomjaqqu7w] {
background: var(--pa-adas-bg);
color: var(--pa-adas-fg);
}
/* /Components/Pages/Admin/ProAudit/AuditRuleDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
AuditRuleDialog — Premium chrome scoped styles
══════════════════════════════════════════════════════════════ */
/* --pa-code-bg / --pa-code-border live in proaudit-theme.css — see the note in
ScriptEditorPanel.razor.css. A `:root` block in a scoped stylesheet is rewritten
to `:root[b-...]` and never matches. Do not move them back. */
/* ── Dialog content area ── */
[b-178veowrdm] .pa-rule-dialog-content {
padding: 0 1.5rem 1rem !important;
max-height: 82vh;
overflow-y: auto;
}
[b-178veowrdm] .pa-rule-dialog-actions {
padding: 0.75rem 1.5rem !important;
border-top: 1px solid var(--pa-hair);
gap: 0.5rem;
}
/* ── Dialog width override ── */
[b-178veowrdm] .mud-dialog {
max-width: min(900px, 96vw) !important;
width: min(900px, 96vw) !important;
}
/* ── Header section ── */
.pa-rule-header[b-178veowrdm] {
padding: 1rem 0 0.75rem;
border-bottom: 1px solid var(--pa-hair);
margin-bottom: 0;
}
[b-178veowrdm] .pa-rule-name-field .mud-input-root {
font-size: 14px;
font-weight: 500;
}
/* ── Pill-style tab bar (MudTabs override) ── */
[b-178veowrdm] .pa-rule-tabs {
margin-top: 0.5rem !important;
}
[b-178veowrdm] .pa-rule-tabs .mud-tabs-toolbar {
background: var(--pa-card-tint) !important;
border-radius: 10px !important;
padding: 3px !important;
border: none !important;
min-height: 40px !important;
margin-bottom: 0.5rem;
}
[b-178veowrdm] .pa-rule-tabs .mud-tabs-toolbar .mud-tabs-toolbar-content {
gap: 2px;
}
[b-178veowrdm] .pa-rule-tabs .mud-tab {
font-size: 0.8125rem !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
color: var(--pa-muted) !important;
border-radius: 8px !important;
min-height: 34px !important;
padding: 0 16px !important;
transition: all 0.2s ease !important;
min-width: 90px !important;
}
[b-178veowrdm] .pa-rule-tabs .mud-tab:hover {
color: var(--pa-ink) !important;
background: color-mix(in srgb, var(--pa-card) 50%, transparent) !important;
}
[b-178veowrdm] .pa-rule-tabs .mud-tab.mud-tab-active {
background: var(--pa-card) !important;
color: var(--pa-ink) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
/* Hide the default MudTabs slider/indicator */
[b-178veowrdm] .pa-rule-tabs .mud-tab-slider {
display: none !important;
}
/* Tab panel content */
[b-178veowrdm] .pa-rule-tab-panel {
padding: 0.75rem 0 0 !important;
}
/* ── Details tab ── */
.pa-rule-details[b-178veowrdm] {
padding: 0;
}
/* ── Sources section ── */
.pa-rule-sources[b-178veowrdm] {
border: 1px solid var(--pa-hair);
border-radius: 10px;
padding: 0.75rem 1rem;
background: color-mix(in srgb, var(--pa-ink) 1%, transparent);
}
.pa-rule-sources-header[b-178veowrdm] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.pa-rule-sources-label[b-178veowrdm] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pa-teal-deep);
}
[b-178veowrdm] .pa-rule-add-source-btn {
text-transform: none !important;
color: var(--pa-teal-deep) !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
}
.pa-rule-source-row[b-178veowrdm] {
margin-bottom: 0.25rem;
}
[b-178veowrdm] .pa-rule-remove-source-btn {
color: var(--pa-faint-decor) !important;
transition: color 0.15s ease !important;
}
/* The Mud palette's Error, mapped by role: #bf1a2a in light (so light is unchanged) and
--pa-bad-fg in dark (PaletteDark pins it). The literal #bf1a2a was 2.26:1 on the dark
card; this is 6.01:1 there and 5.28:1 under the icon button's own hover wash. */
[b-178veowrdm] .pa-rule-remove-source-btn:hover {
color: var(--mud-palette-error, #bf1a2a) !important;
}
/* ── ADAS Calibration section ── */
.pa-rule-adas-section[b-178veowrdm] {
padding: 0;
}
/* ── ADAS Profiles tab ── */
.pa-rule-adas-tab[b-178veowrdm] {
padding: 0;
}
.pa-rule-adas-tab-header[b-178veowrdm] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.pa-rule-adas-tab-header[b-178veowrdm] .pa-section-divider {
flex: 1;
}
.pa-rule-adas-loading[b-178veowrdm] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--pa-muted);
padding: 0.75rem 0;
}
.pa-rule-adas-empty[b-178veowrdm] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: color-mix(in srgb, var(--pa-ink) 2%, transparent);
border: 1px dashed color-mix(in srgb, var(--pa-ink) 12%, transparent);
border-radius: 10px;
margin-bottom: 1rem;
}
[b-178veowrdm] .pa-rule-adas-empty-icon {
font-size: 1.75rem !important;
color: var(--pa-faint-decor);
flex-shrink: 0;
}
.pa-rule-adas-empty-text[b-178veowrdm] {
font-size: 0.8125rem;
font-weight: 600;
color: var(--pa-muted);
}
/* --pa-faint, not --pa-muted: both source values failed (3.11 / 2.18:1) so both
had to move, but they did not have to CONVERGE — the subordinate line keeps
its step down the ladder, and --pa-faint still clears AA (4.61:1 on paper). */
.pa-rule-adas-empty-sub[b-178veowrdm] {
font-size: 0.75rem;
color: var(--pa-faint);
margin-top: 0.15rem;
}
.pa-rule-adas-empty-sub code[b-178veowrdm] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
background: color-mix(in srgb, var(--pa-teal) 8%, transparent);
color: var(--pa-teal-deep);
border-radius: 3px;
padding: 0.05rem 0.3rem;
}
.pa-rule-adas-list[b-178veowrdm] {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
max-height: 220px;
overflow-y: auto;
}
.pa-rule-adas-card[b-178veowrdm] {
border: 1px solid color-mix(in srgb, var(--pa-ink) 8%, transparent);
border-radius: 10px;
padding: 0.625rem 0.875rem;
background: var(--pa-card);
transition: border-color 0.15s ease;
}
.pa-rule-adas-card:hover[b-178veowrdm] {
border-color: color-mix(in srgb, var(--pa-teal) 20%, transparent);
}
.pa-rule-adas-card-header[b-178veowrdm] {
display: flex;
align-items: center;
justify-content: space-between;
}
.pa-rule-adas-vehicle[b-178veowrdm] {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.pa-rule-adas-status[b-178veowrdm] {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/* These three stay literal, and it is a decision rather than an omission. They are
8px status dots in a foreign (Tailwind) palette, and unlike a wash they do not
break when the page darkens -- a saturated mid-tone reads on cream and on the dark
card alike. Moving them onto --pa-ok-border / --pa-warn-border is a visible LIGHT
change (delta 36 and 71) with no dark-mode benefit, so it belongs with the rest of
the foreign-Tailwind sweep, not here. The #bf1a2a delete hovers were once filed under
the same reasoning, and that was WRONG: a dark red on the dark card is 2.26:1. They now
read --mud-palette-error (see .pa-rule-remove-source-btn:hover). */
.pa-rule-adas-status.researched[b-178veowrdm] { background: #22c55e; }
.pa-rule-adas-status.partiallyresearched[b-178veowrdm] { background: #f59e0b; }
.pa-rule-adas-status.unresearched[b-178veowrdm] { background: color-mix(in srgb, var(--pa-ink) 20%, transparent); }
.pa-rule-adas-make[b-178veowrdm] {
font-weight: 700;
font-size: 0.8125rem;
color: var(--pa-ink);
}
.pa-rule-adas-model[b-178veowrdm] {
font-weight: 600;
font-size: 0.8125rem;
color: var(--pa-ink);
}
.pa-rule-adas-years[b-178veowrdm] {
font-size: 0.6875rem;
color: var(--pa-muted);
background: color-mix(in srgb, var(--pa-ink) 5%, transparent);
border-radius: 4px;
padding: 0.1rem 0.35rem;
}
.pa-rule-adas-actions[b-178veowrdm] {
display: flex;
align-items: center;
flex-shrink: 0;
}
[b-178veowrdm] .pa-rule-adas-delete-btn {
color: var(--pa-faint-decor) !important;
}
[b-178veowrdm] .pa-rule-adas-delete-btn:hover {
color: var(--mud-palette-error, #bf1a2a) !important;
}
.pa-rule-adas-sensors[b-178veowrdm] {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.35rem;
padding-top: 0.35rem;
border-top: 1px solid color-mix(in srgb, var(--pa-ink) 5%, transparent);
}
.pa-rule-adas-sensor-row[b-178veowrdm] {
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.pa-rule-sensor-badge[b-178veowrdm] {
font-size: 0.6rem;
font-weight: 700;
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
color: var(--pa-teal-deep);
border: 1px solid color-mix(in srgb, var(--pa-teal) 20%, transparent);
border-radius: 4px;
padding: 0.1rem 0.4rem;
white-space: nowrap;
flex-shrink: 0;
}
.pa-rule-part-chip[b-178veowrdm] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.6rem;
background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
color: var(--pa-muted);
border: 1px solid color-mix(in srgb, var(--pa-ink) 10%, transparent);
border-radius: 4px;
padding: 0.05rem 0.3rem;
}
.pa-rule-optional-badge[b-178veowrdm] {
font-size: 0.6rem;
font-weight: 600;
color: var(--pa-warn-fg);
background: var(--pa-warn-bg);
border-radius: 3px;
padding: 0.05rem 0.25rem;
}
/* ── ADAS API Reference panel ── */
.pa-rule-adas-api[b-178veowrdm] {
background: var(--pa-code-bg);
border: 1px solid var(--pa-code-border);
border-radius: 10px;
padding: 0.875rem 1rem;
}
.pa-rule-adas-api-grid[b-178veowrdm] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pa-rule-adas-api-row[b-178veowrdm] {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
}
.pa-rule-adas-api-sig[b-178veowrdm] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
color: #cdd6f4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pa-rule-adas-ret[b-178veowrdm] { color: #89dceb; }
.pa-rule-adas-param[b-178veowrdm] { color: #fab387; }
.pa-rule-adas-api-desc[b-178veowrdm] {
font-size: 0.6875rem;
/* On --pa-code-bg. 50% alpha measured 3.87:1; 72% is 6.49:1. */
color: rgba(205, 214, 244, 0.72);
white-space: nowrap;
text-align: right;
}
@media (max-width: 700px) {
.pa-rule-adas-api-row[b-178veowrdm] { grid-template-columns: 1fr; }
.pa-rule-adas-api-desc[b-178veowrdm] { text-align: left; }
}
/* ── Footer buttons ── */
[b-178veowrdm] .pa-rule-cancel-btn {
text-transform: none !important;
color: var(--pa-muted) !important;
border-color: color-mix(in srgb, var(--pa-ink) 15%, transparent) !important;
font-weight: 500 !important;
padding: 0.4rem 1.25rem !important;
border-radius: 8px !important;
}
[b-178veowrdm] .pa-rule-cancel-btn:hover {
background: color-mix(in srgb, var(--pa-ink) 4%, transparent) !important;
border-color: color-mix(in srgb, var(--pa-ink) 25%, transparent) !important;
}
[b-178veowrdm] .pa-rule-submit-btn {
background: var(--pa-orange) !important;
color: var(--pa-orange-fg) !important; /* white on the brand fill is 2.56:1 */
font-weight: 600 !important;
text-transform: none !important;
padding: 0.5rem 1.5rem !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--pa-orange) 30%, transparent) !important;
transition: all 0.2s ease !important;
}
[b-178veowrdm] .pa-rule-submit-btn:hover {
background: var(--pa-orange-hover) !important;
box-shadow: 0 4px 12px color-mix(in srgb, var(--pa-orange) 40%, transparent) !important;
}
[b-178veowrdm] .pa-rule-submit-btn:disabled {
opacity: 0.6 !important;
}
/* ── Cited Sources tab — header label + count badge ── */
.pa-rule-tab-text[b-178veowrdm] {
margin-right: 6px;
}
.pa-rule-tab-badge[b-178veowrdm] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
border-radius: 8px;
background: color-mix(in srgb, var(--pa-orange) 18%, transparent);
/* Orange text on an orange tint: the flat deep twin is only ~4.4:1 over this
composite, so use the tinted-chip mix the theme prescribes (6.43:1). */
color: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
font: 600 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
vertical-align: middle;
}
/* /Components/Pages/Admin/ProAudit/CSharpScriptEditor.razor.rz.scp.css */
.cs-editor-chrome[b-1lbnwu09il] {
--cs-bg: var(--code-bg, #1e1e2e);
--cs-hdr: var(--code-header-bg, #16161f);
--cs-border: var(--code-border, rgba(0, 166, 156, 0.25));
border: 1px solid var(--cs-border);
border-radius: 8px;
overflow: hidden;
background: var(--cs-bg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
margin-bottom: 1rem;
}
.cs-editor-bar[b-1lbnwu09il] {
display: flex;
align-items: center;
gap: 6px;
padding: 0.5rem 0.75rem;
background: var(--cs-hdr);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
user-select: none;
}
.cs-editor-dot[b-1lbnwu09il] {
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0.85;
flex-shrink: 0;
}
.cs-editor-title[b-1lbnwu09il] {
margin-left: 0.5rem;
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
/* 3.22:1 on the dark editor chrome; --pa-sidebar-text is the house token
for text on a dark surface and is not white-labelled. */
color: var(--pa-sidebar-text);
letter-spacing: 0.02em;
}
.cs-editor-monaco[b-1lbnwu09il] {
width: 100%;
overflow: hidden;
}
/* /Components/Pages/Admin/ProAudit/LibraryCoverage.razor.rz.scp.css */
/* ── LibraryCoverage page tokens ───────────────────────────────────── */
.lcov-page[b-w1zfsl4iyp] {
/* Local names for the house palette, so the page keeps its own
vocabulary while the values -- and their dark answers -- come from
one place. --neutral-300/-700, --indigo-600/-100, --mint-50,
--amber-700 and --amber-50 were declared here and referenced
NOWHERE; they are deleted rather than retokenised, which is seven
of this file's seventeen literals gone with the dead code. */
--ink: var(--pa-ink);
--paper: var(--pa-paper);
--paper-sunk: var(--pa-thead-bg);
--paper-raised: var(--pa-card);
--rule: var(--pa-hair);
--rule-soft: color-mix(in srgb, var(--pa-hair) 55%, var(--pa-card));
--neutral-500: var(--pa-muted);
--neutral-600: color-mix(in srgb, var(--pa-muted) 60%, var(--pa-ink));
--indigo-700: var(--pa-info-fg);
--indigo-50: var(--pa-info-bg);
/* text-only token; #059669 was 3.35:1 on the page ground */
--mint-600: var(--pa-ok-fg);
--font-display: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
padding: 2rem 2.5rem 4rem;
min-height: 100vh;
}
/* Masthead */
.lcov-masthead[b-w1zfsl4iyp] {
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--rule);
}
.lcov-masthead__eyebrow[b-w1zfsl4iyp] {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--neutral-500);
margin: 0 0 0.4rem;
}
.lcov-masthead__title[b-w1zfsl4iyp] {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.5rem;
line-height: 1.2;
}
.lcov-masthead__title em[b-w1zfsl4iyp] {
font-style: italic;
font-weight: 400;
color: var(--neutral-500);
}
.lcov-masthead__lede[b-w1zfsl4iyp] {
font-size: 0.9375rem;
color: var(--neutral-600);
margin: 0;
max-width: 56ch;
}
/* Stats bar */
.lcov-stats[b-w1zfsl4iyp] {
display: flex;
gap: 2rem;
margin-bottom: 1.75rem;
}
.lcov-stat[b-w1zfsl4iyp] {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.lcov-stat__value[b-w1zfsl4iyp] {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
color: var(--ink);
}
.lcov-stat__value.is-zero[b-w1zfsl4iyp] {
color: var(--mint-600);
}
.lcov-stat__label[b-w1zfsl4iyp] {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--neutral-500);
}
/* Table */
.lcov-table-wrap[b-w1zfsl4iyp] {
background: var(--paper-raised);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
}
.lcov-table[b-w1zfsl4iyp] {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.lcov-table thead th[b-w1zfsl4iyp] {
background: var(--paper-sunk);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--neutral-500);
padding: 0.6rem 1rem;
text-align: left;
border-bottom: 1px solid var(--rule);
white-space: nowrap;
}
.lcov-table tbody tr[b-w1zfsl4iyp] {
border-bottom: 1px solid var(--rule-soft);
transition: background 120ms ease;
}
.lcov-table tbody tr:last-child[b-w1zfsl4iyp] {
border-bottom: none;
}
.lcov-table tbody tr:hover[b-w1zfsl4iyp] {
background: var(--paper-sunk);
}
.lcov-table td[b-w1zfsl4iyp] {
padding: 0.65rem 1rem;
vertical-align: middle;
}
.lcov-rule-name[b-w1zfsl4iyp] {
font-weight: 500;
color: var(--ink);
}
.lcov-date[b-w1zfsl4iyp] {
font-size: 0.8125rem;
color: var(--neutral-500);
white-space: nowrap;
}
/* Category badge */
.lcov-badge[b-w1zfsl4iyp] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 3px;
background: var(--indigo-50);
color: var(--indigo-700);
white-space: nowrap;
}
/* Empty state */
.lcov-empty[b-w1zfsl4iyp] {
text-align: center;
padding: 4rem 2rem;
color: var(--neutral-500);
}
.lcov-empty__headline[b-w1zfsl4iyp] {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--mint-600);
margin: 0 0 0.5rem;
}
.lcov-empty__sub[b-w1zfsl4iyp] {
font-size: 0.875rem;
}
/* Loading */
.lcov-loading[b-w1zfsl4iyp] {
padding: 3rem;
text-align: center;
color: var(--neutral-500);
font-style: italic;
}
/* /Components/Pages/Admin/ProAudit/LinkedLibraryArticlePicker.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
pa-art-picker — Linked Library Articles picker
Mirrors pa-oem-picker exactly (editorial card catalog).
Class prefix differs so they never collide if both render in
the same dialog.
══════════════════════════════════════════════════════════════ */
.pa-art-picker[b-41unkapc1t] {
--art-bg: var(--pa-card-tint);
--art-border: var(--pa-hair);
--art-ink: var(--pa-ink);
/* These local names shadow the house palette. Pointing them AT the house
tokens fixes the contrast at one place instead of nine, and — because the
accent now reads --pa-orange — makes the picker white-label aware, which
the hardcoded #DD9142 never was. --art-accent stays the FILL; text uses
--art-accent-text, mirroring --pa-orange / --pa-orange-text. */
--art-ink-muted: var(--pa-muted);
--art-ink-faint: var(--pa-faint);
--art-accent: var(--pa-orange);
--art-accent-text: var(--pa-orange-text);
/* The chip ground and the add-button hover are both "this item is chosen",
which is what --pa-row-selected means everywhere else in the house. It is
OPAQUE, so neither palette has to composite a wash to know what the text
lands on: the remove glyph reads 4.98:1 light / 5.07:1 dark and the add
icon 4.63 / 4.97, where a 13% brand tint left both at 4.4-4.5 in dark. */
--art-selected: var(--pa-row-selected);
--art-row-hover: var(--pa-row-hover);
--art-chip-radius: 2px;
--art-font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
--art-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: var(--art-font-body);
display: flex;
flex-direction: column;
gap: 0;
}
/* ── Chips area ─────────────────────────────────────────── */
.pa-art-chips[b-41unkapc1t] {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 36px;
margin-bottom: 10px;
align-items: flex-start;
}
.pa-art-empty-hint[b-41unkapc1t] {
font-size: 0.8rem;
color: var(--art-ink-faint);
font-style: italic;
letter-spacing: 0.01em;
line-height: 36px;
}
.pa-art-chip[b-41unkapc1t] {
display: flex;
align-items: stretch;
height: 28px;
max-width: 280px;
background: var(--art-selected);
border: 1px solid var(--art-border);
border-radius: var(--art-chip-radius);
overflow: hidden;
gap: 0;
font-size: 0.78rem;
color: var(--art-ink);
transition: box-shadow 0.15s ease;
}
.pa-art-chip:hover[b-41unkapc1t] {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pa-art-chip-stripe[b-41unkapc1t] {
display: block;
width: 4px;
flex-shrink: 0;
background: var(--art-ink-faint);
}
.pa-art-chip-title[b-41unkapc1t] {
display: inline-flex;
align-items: center;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
font-size: 0.78rem;
min-width: 0;
}
.pa-art-chip-remove[b-41unkapc1t] {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
border: none;
background: transparent;
cursor: pointer;
color: var(--art-ink-muted);
font-size: 1rem;
line-height: 1;
padding: 0;
border-left: 1px solid var(--art-border);
transition: background 0.1s, color 0.1s;
flex-shrink: 0;
}
.pa-art-chip-remove:hover[b-41unkapc1t] {
background: var(--pa-bad-bg);
color: var(--pa-bad-fg);
}
/* ── Search input ────────────────────────────────────────── */
.pa-art-search-wrap[b-41unkapc1t] {
position: relative;
display: flex;
align-items: center;
background: var(--art-bg);
border: 1px solid var(--art-border);
border-radius: 4px;
padding: 0 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-art-search-wrap:focus-within[b-41unkapc1t] {
border-color: var(--art-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-orange) 15%, transparent);
}
.pa-art-search-icon[b-41unkapc1t] {
display: flex;
align-items: center;
justify-content: center;
color: var(--art-ink-faint);
margin-right: 8px;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.pa-art-spinner[b-41unkapc1t] {
display: block;
width: 14px;
height: 14px;
border: 2px solid var(--art-border);
border-top-color: var(--art-accent);
border-radius: 50%;
animation: pa-art-spin-b-41unkapc1t 0.7s linear infinite;
}
@keyframes pa-art-spin-b-41unkapc1t {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.pa-art-spinner[b-41unkapc1t] {
animation: none;
border-top-color: var(--art-ink-muted);
opacity: 0.6;
}
}
.pa-art-search-input[b-41unkapc1t] {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: var(--art-font-body);
font-size: 0.875rem;
color: var(--art-ink);
padding: 10px 0;
min-width: 0;
}
.pa-art-search-input[b-41unkapc1t]::placeholder {
color: var(--art-ink-faint);
font-style: italic;
}
.pa-art-search-input[b-41unkapc1t]::-webkit-search-decoration,
.pa-art-search-input[b-41unkapc1t]::-webkit-search-cancel-button,
.pa-art-search-input[b-41unkapc1t]::-webkit-search-results-button,
.pa-art-search-input[b-41unkapc1t]::-webkit-search-results-decoration {
display: none;
}
/* ── Results list ────────────────────────────────────────── */
.pa-art-results[b-41unkapc1t] {
margin: 4px 0 0 0;
padding: 0;
list-style: none;
border: 1px solid var(--art-border);
border-radius: 4px;
overflow: hidden;
background: var(--pa-card);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.pa-art-result-row[b-41unkapc1t] {
display: flex;
align-items: stretch;
height: 44px;
gap: 0;
cursor: default;
transition: background 0.1s ease;
border-bottom: 1px solid var(--art-border);
}
.pa-art-result-row:last-child[b-41unkapc1t] {
border-bottom: none;
}
.pa-art-result-row:hover:not(.pa-art-result-added)[b-41unkapc1t] {
background: var(--art-row-hover);
}
@media (prefers-reduced-motion: reduce) {
.pa-art-result-row[b-41unkapc1t] {
transition: none;
}
}
.pa-art-result-row.pa-art-result-added[b-41unkapc1t] {
opacity: 0.55;
}
.pa-art-result-stripe[b-41unkapc1t] {
display: block;
width: 4px;
flex-shrink: 0;
background: var(--art-ink-faint);
}
.pa-art-result-meta[b-41unkapc1t] {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
min-width: 0;
}
.pa-art-result-title[b-41unkapc1t] {
font-size: 0.85rem;
color: var(--art-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.pa-art-result-subject-label[b-41unkapc1t] {
font-size: 0.7rem;
color: var(--art-ink-faint);
white-space: nowrap;
margin-left: auto;
padding-left: 8px;
flex-shrink: 0;
}
.pa-art-result-add[b-41unkapc1t] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
border: none;
background: transparent;
cursor: pointer;
color: var(--art-accent-text);
border-left: 1px solid var(--art-border);
transition: background 0.1s, color 0.1s;
flex-shrink: 0;
}
.pa-art-result-add:hover:not(:disabled)[b-41unkapc1t] {
background: var(--art-selected);
}
.pa-art-result-add:disabled[b-41unkapc1t] {
color: var(--art-ink-faint);
cursor: default;
}
.pa-art-no-results[b-41unkapc1t] {
padding: 10px 12px;
font-size: 0.82rem;
color: var(--art-ink-muted);
font-style: italic;
border: 1px dashed var(--art-border);
border-radius: 4px;
margin-top: 6px;
background: var(--art-bg);
}
/* ── Subject stripe colors — chips AND result rows ─────────
Class applied as pa-art-subj-{lowercased subject token}.
ONE --pa-subj-* token per PositionStatementSubject, the same family
PositionStatementsList and the Library index read, so the same article
carries the same hue in the picker and on the page behind it. The token
name is the enum name kebab-cased: PartsAndProcurement ->
--pa-subj-parts-and-procurement. Adding an enum value means adding the
token in proaudit-theme.css (light AND both dark blocks) and one rule
here; leaving it out is not a compile error, it silently falls through
to the grey --art-ink-faint default, which is how PartsAndProcurement
went seventeen-of-eighteen until 2026-09-21.
─────────────────────────────────────────────────────────── */
.pa-art-subj-adascalibration .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-adascalibration[b-41unkapc1t] { background: var(--pa-subj-adas-calibration); }
.pa-art-subj-prepostrepairscanning .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-prepostrepairscanning[b-41unkapc1t] { background: var(--pa-subj-pre-post-repair-scanning); }
.pa-art-subj-structuralrepair .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-structuralrepair[b-41unkapc1t] { background: var(--pa-subj-structural-repair); }
.pa-art-subj-corrosionprotection .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-corrosionprotection[b-41unkapc1t] { background: var(--pa-subj-corrosion-protection); }
.pa-art-subj-glassreplacement .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-glassreplacement[b-41unkapc1t] { background: var(--pa-subj-glass-replacement); }
.pa-art-subj-refinishpaint .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-refinishpaint[b-41unkapc1t] { background: var(--pa-subj-refinish-paint); }
.pa-art-subj-airbagrestraintsystem .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-airbagrestraintsystem[b-41unkapc1t] { background: var(--pa-subj-airbag-restraint-system); }
.pa-art-subj-wheelalignment .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-wheelalignment[b-41unkapc1t] { background: var(--pa-subj-wheel-alignment); }
.pa-art-subj-hybridevprocedures .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-hybridevprocedures[b-41unkapc1t] { background: var(--pa-subj-hybrid-ev-procedures); }
.pa-art-subj-onetimeuseparts .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-onetimeuseparts[b-41unkapc1t] { background: var(--pa-subj-one-time-use-parts); }
.pa-art-subj-adhesivebonding .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-adhesivebonding[b-41unkapc1t] { background: var(--pa-subj-adhesive-bonding); }
.pa-art-subj-mechanicalprocedures .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-mechanicalprocedures[b-41unkapc1t] { background: var(--pa-subj-mechanical-procedures); }
.pa-art-subj-toolequipmentrequirements .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-toolequipmentrequirements[b-41unkapc1t] { background: var(--pa-subj-tool-equipment-requirements); }
.pa-art-subj-materialspecifications .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-materialspecifications[b-41unkapc1t] { background: var(--pa-subj-material-specifications); }
.pa-art-subj-headlamplighting .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-headlamplighting[b-41unkapc1t] { background: var(--pa-subj-headlamp-lighting); }
.pa-art-subj-bumperenergyabsorption .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-bumperenergyabsorption[b-41unkapc1t] { background: var(--pa-subj-bumper-energy-absorption); }
.pa-art-subj-partsandprocurement .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-partsandprocurement[b-41unkapc1t] { background: var(--pa-subj-parts-and-procurement); }
.pa-art-subj-generalcollisionrepair .pa-art-chip-stripe[b-41unkapc1t],
.pa-art-result-row .pa-art-result-stripe.pa-art-subj-generalcollisionrepair[b-41unkapc1t] { background: var(--pa-subj-general-collision-repair); }
/* /Components/Pages/Admin/ProAudit/LinkedOemReferencePicker.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
pa-oem-picker — Linked OEM References picker
Editorial "card catalog" aesthetic
══════════════════════════════════════════════════════════════ */
.pa-oem-picker[b-ajhz1o9q2c] {
--oem-bg: var(--pa-card-tint);
--oem-border: var(--pa-hair);
--oem-ink: var(--pa-ink);
/* Mirrors pa-art-picker — see LinkedLibraryArticlePicker.razor.css for why
these point at the house tokens rather than carrying their own hexes. */
--oem-ink-muted: var(--pa-muted);
--oem-ink-faint: var(--pa-faint);
--oem-accent: var(--pa-orange);
--oem-accent-text: var(--pa-orange-text);
/* The chip ground and the add-button hover are both "this item is chosen",
which is what --pa-row-selected means everywhere else in the house. It is
OPAQUE, so neither palette has to composite a wash to know what the text
lands on: the remove glyph reads 4.98:1 light / 5.07:1 dark and the add
icon 4.63 / 4.97, where a 13% brand tint left both at 4.4-4.5 in dark. */
--oem-selected: var(--pa-row-selected);
--oem-row-hover: var(--pa-row-hover);
--oem-chip-radius: 2px;
--oem-font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
--oem-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: var(--oem-font-body);
display: flex;
flex-direction: column;
gap: 0;
}
/* ── Chips area ─────────────────────────────────────────── */
.pa-oem-chips[b-ajhz1o9q2c] {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 36px;
margin-bottom: 10px;
align-items: flex-start;
}
.pa-oem-empty-hint[b-ajhz1o9q2c] {
font-size: 0.8rem;
color: var(--oem-ink-faint);
font-style: italic;
letter-spacing: 0.01em;
line-height: 36px;
}
.pa-oem-chip[b-ajhz1o9q2c] {
display: flex;
align-items: stretch;
height: 28px;
max-width: 280px;
background: var(--oem-selected);
border: 1px solid var(--oem-border);
border-radius: var(--oem-chip-radius);
overflow: hidden;
gap: 0;
font-size: 0.78rem;
color: var(--oem-ink);
transition: box-shadow 0.15s ease;
}
.pa-oem-chip:hover[b-ajhz1o9q2c] {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pa-oem-chip-stripe[b-ajhz1o9q2c] {
display: block;
width: 4px;
flex-shrink: 0;
background: var(--oem-ink-faint);
}
.pa-oem-chip-make[b-ajhz1o9q2c] {
display: inline-flex;
align-items: center;
font-family: var(--oem-font-mono);
font-size: 0.65rem;
color: var(--oem-ink-muted);
letter-spacing: 0.04em;
padding: 0 4px 0 6px;
white-space: nowrap;
}
.pa-oem-chip-title[b-ajhz1o9q2c] {
display: inline-flex;
align-items: center;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
font-size: 0.78rem;
min-width: 0;
}
.pa-oem-chip-remove[b-ajhz1o9q2c] {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
border: none;
background: transparent;
cursor: pointer;
color: var(--oem-ink-muted);
font-size: 1rem;
line-height: 1;
padding: 0;
border-left: 1px solid var(--oem-border);
transition: background 0.1s, color 0.1s;
flex-shrink: 0;
}
.pa-oem-chip-remove:hover[b-ajhz1o9q2c] {
background: var(--pa-bad-bg);
color: var(--pa-bad-fg);
}
/* ── Search input ────────────────────────────────────────── */
.pa-oem-search-wrap[b-ajhz1o9q2c] {
position: relative;
display: flex;
align-items: center;
background: var(--oem-bg);
border: 1px solid var(--oem-border);
border-radius: 4px;
padding: 0 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-oem-search-wrap:focus-within[b-ajhz1o9q2c] {
border-color: var(--oem-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-orange) 15%, transparent);
}
.pa-oem-search-icon[b-ajhz1o9q2c] {
display: flex;
align-items: center;
justify-content: center;
color: var(--oem-ink-faint);
margin-right: 8px;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.pa-oem-spinner[b-ajhz1o9q2c] {
display: block;
width: 14px;
height: 14px;
border: 2px solid var(--oem-border);
border-top-color: var(--oem-accent);
border-radius: 50%;
animation: pa-oem-spin-b-ajhz1o9q2c 0.7s linear infinite;
}
@keyframes pa-oem-spin-b-ajhz1o9q2c {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.pa-oem-spinner[b-ajhz1o9q2c] {
animation: none;
border-top-color: var(--oem-ink-muted);
opacity: 0.6;
}
}
.pa-oem-search-input[b-ajhz1o9q2c] {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: var(--oem-font-body);
font-size: 0.875rem;
color: var(--oem-ink);
padding: 10px 0;
min-width: 0;
}
.pa-oem-search-input[b-ajhz1o9q2c]::placeholder {
color: var(--oem-ink-faint);
font-style: italic;
}
.pa-oem-search-input[b-ajhz1o9q2c]::-webkit-search-decoration,
.pa-oem-search-input[b-ajhz1o9q2c]::-webkit-search-cancel-button,
.pa-oem-search-input[b-ajhz1o9q2c]::-webkit-search-results-button,
.pa-oem-search-input[b-ajhz1o9q2c]::-webkit-search-results-decoration {
display: none;
}
/* ── Results list ────────────────────────────────────────── */
.pa-oem-results[b-ajhz1o9q2c] {
margin: 4px 0 0 0;
padding: 0;
list-style: none;
border: 1px solid var(--oem-border);
border-radius: 4px;
overflow: hidden;
background: var(--pa-card);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.pa-oem-result-row[b-ajhz1o9q2c] {
display: flex;
align-items: stretch;
height: 44px;
gap: 0;
cursor: default;
transition: background 0.1s ease;
border-bottom: 1px solid var(--oem-border);
}
.pa-oem-result-row:last-child[b-ajhz1o9q2c] {
border-bottom: none;
}
.pa-oem-result-row:hover:not(.pa-oem-result-added)[b-ajhz1o9q2c] {
background: var(--oem-row-hover);
}
@media (prefers-reduced-motion: reduce) {
.pa-oem-result-row[b-ajhz1o9q2c] {
transition: none;
}
}
.pa-oem-result-row.pa-oem-result-added[b-ajhz1o9q2c] {
opacity: 0.55;
}
.pa-oem-result-stripe[b-ajhz1o9q2c] {
display: block;
width: 4px;
flex-shrink: 0;
background: var(--oem-ink-faint);
}
.pa-oem-result-meta[b-ajhz1o9q2c] {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
min-width: 0;
}
.pa-oem-result-make[b-ajhz1o9q2c] {
font-family: var(--oem-font-mono);
font-size: 0.65rem;
color: var(--oem-ink-muted);
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
min-width: 64px;
}
.pa-oem-result-title[b-ajhz1o9q2c] {
font-size: 0.85rem;
color: var(--oem-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.pa-oem-result-subject-label[b-ajhz1o9q2c] {
font-size: 0.7rem;
color: var(--oem-ink-faint);
white-space: nowrap;
margin-left: auto;
padding-left: 8px;
flex-shrink: 0;
}
.pa-oem-result-add[b-ajhz1o9q2c] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
border: none;
background: transparent;
cursor: pointer;
color: var(--oem-accent-text);
border-left: 1px solid var(--oem-border);
transition: background 0.1s, color 0.1s;
flex-shrink: 0;
}
.pa-oem-result-add:hover:not(:disabled)[b-ajhz1o9q2c] {
background: var(--oem-selected);
}
.pa-oem-result-add:disabled[b-ajhz1o9q2c] {
color: var(--oem-ink-faint);
cursor: default;
}
.pa-oem-no-results[b-ajhz1o9q2c] {
padding: 10px 12px;
font-size: 0.82rem;
color: var(--oem-ink-muted);
font-style: italic;
border: 1px dashed var(--oem-border);
border-radius: 4px;
margin-top: 6px;
background: var(--oem-bg);
}
/* ── Subject stripe colors — chips AND result rows ─────────
Class applied as pa-oem-subj-{lowercased subject token}.
ONE --pa-subj-* token per PositionStatementSubject, the same family
PositionStatementsList and the Library index read, so the same article
carries the same hue in the picker and on the page behind it. The token
name is the enum name kebab-cased: PartsAndProcurement ->
--pa-subj-parts-and-procurement. Adding an enum value means adding the
token in proaudit-theme.css (light AND both dark blocks) and one rule
here; leaving it out is not a compile error, it silently falls through
to the grey --oem-ink-faint default, which is how PartsAndProcurement
went seventeen-of-eighteen until 2026-09-21.
─────────────────────────────────────────────────────────── */
.pa-oem-subj-adascalibration .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-adascalibration[b-ajhz1o9q2c] { background: var(--pa-subj-adas-calibration); }
.pa-oem-subj-prepostrepairscanning .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-prepostrepairscanning[b-ajhz1o9q2c] { background: var(--pa-subj-pre-post-repair-scanning); }
.pa-oem-subj-structuralrepair .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-structuralrepair[b-ajhz1o9q2c] { background: var(--pa-subj-structural-repair); }
.pa-oem-subj-corrosionprotection .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-corrosionprotection[b-ajhz1o9q2c] { background: var(--pa-subj-corrosion-protection); }
.pa-oem-subj-glassreplacement .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-glassreplacement[b-ajhz1o9q2c] { background: var(--pa-subj-glass-replacement); }
.pa-oem-subj-refinishpaint .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-refinishpaint[b-ajhz1o9q2c] { background: var(--pa-subj-refinish-paint); }
.pa-oem-subj-airbagrestraintsystem .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-airbagrestraintsystem[b-ajhz1o9q2c] { background: var(--pa-subj-airbag-restraint-system); }
.pa-oem-subj-wheelalignment .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-wheelalignment[b-ajhz1o9q2c] { background: var(--pa-subj-wheel-alignment); }
.pa-oem-subj-hybridevprocedures .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-hybridevprocedures[b-ajhz1o9q2c] { background: var(--pa-subj-hybrid-ev-procedures); }
.pa-oem-subj-onetimeuseparts .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-onetimeuseparts[b-ajhz1o9q2c] { background: var(--pa-subj-one-time-use-parts); }
.pa-oem-subj-adhesivebonding .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-adhesivebonding[b-ajhz1o9q2c] { background: var(--pa-subj-adhesive-bonding); }
.pa-oem-subj-mechanicalprocedures .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-mechanicalprocedures[b-ajhz1o9q2c] { background: var(--pa-subj-mechanical-procedures); }
.pa-oem-subj-toolequipmentrequirements .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-toolequipmentrequirements[b-ajhz1o9q2c] { background: var(--pa-subj-tool-equipment-requirements); }
.pa-oem-subj-materialspecifications .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-materialspecifications[b-ajhz1o9q2c] { background: var(--pa-subj-material-specifications); }
.pa-oem-subj-headlamplighting .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-headlamplighting[b-ajhz1o9q2c] { background: var(--pa-subj-headlamp-lighting); }
.pa-oem-subj-bumperenergyabsorption .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-bumperenergyabsorption[b-ajhz1o9q2c] { background: var(--pa-subj-bumper-energy-absorption); }
.pa-oem-subj-partsandprocurement .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-partsandprocurement[b-ajhz1o9q2c] { background: var(--pa-subj-parts-and-procurement); }
.pa-oem-subj-generalcollisionrepair .pa-oem-chip-stripe[b-ajhz1o9q2c],
.pa-oem-result-row .pa-oem-result-stripe.pa-oem-subj-generalcollisionrepair[b-ajhz1o9q2c] { background: var(--pa-subj-general-collision-repair); }
/* /Components/Pages/Admin/ProAudit/PartDialog.razor.rz.scp.css */
[b-qt3f895ysf] .mud-dialog {
max-width: min(680px, 96vw) !important;
width: min(680px, 96vw) !important;
}
.part-dialog-title[b-qt3f895ysf] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.part-title-icon[b-qt3f895ysf] {
color: var(--pa-teal-deep);
font-size: 1.25rem !important;
}
.category-section[b-qt3f895ysf] {
background: var(--pa-card-tint);
border: 1px solid var(--pa-hair, rgba(50, 50, 50, 0.08));
border-radius: 8px;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
}
.flags-grid[b-qt3f895ysf] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 0.5rem;
}
@media (max-width: 600px) {
.flags-grid[b-qt3f895ysf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dialog-actions[b-qt3f895ysf] {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1rem;
}
.btn-cancel[b-qt3f895ysf] {
text-transform: none;
color: var(--pa-muted);
border-color: color-mix(in srgb, var(--pa-ink) 20%, transparent);
}
.btn-save[b-qt3f895ysf] {
background: var(--pa-orange) !important;
color: var(--pa-orange-fg) !important;
font-weight: 600;
text-transform: none;
padding: 0.5rem 1.5rem;
}
/* /Components/Pages/Admin/ProAudit/PartKeywordDialog.razor.rz.scp.css */
[b-uim6ygrsyt] .mud-dialog {
max-width: min(620px, 96vw) !important;
width: min(620px, 96vw) !important;
}
.pkd-title[b-uim6ygrsyt] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pkd-title-icon[b-uim6ygrsyt] {
color: var(--pa-teal-deep);
font-size: 1.25rem !important;
}
.exclusion-row[b-uim6ygrsyt] {
border-radius: 8px;
padding: 0.5rem 0.75rem;
transition: background 0.2s ease;
}
.exclusion-row.exclusion-active[b-uim6ygrsyt] {
background: color-mix(in srgb, var(--pa-warn-border) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-warn-border) 30%, transparent);
}
.dialog-actions[b-uim6ygrsyt] {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1rem;
}
.btn-cancel[b-uim6ygrsyt] {
text-transform: none;
color: var(--pa-muted);
border-color: color-mix(in srgb, var(--pa-ink) 20%, transparent);
}
.btn-save[b-uim6ygrsyt] {
background: var(--pa-orange) !important;
color: var(--pa-orange-fg) !important;
font-weight: 600;
text-transform: none;
padding: 0.5rem 1.5rem;
}
/* /Components/Pages/Admin/ProAudit/RuleOverrideManagerBody.razor.rz.scp.css */
.override-manager-body[b-5kbf3z5aem] {
/* Local shadows of the house palette. --brand-teal is used only as TEXT
here (#00a69c is 2.70:1), so it points at the text twin; both now
inherit the per-tenant white-label overrides. */
--brand-orange: var(--pa-orange);
--brand-teal: var(--pa-teal-deep);
--brand-charcoal: var(--pa-ink);
--brand-red: var(--pa-bad-fg);
--border-subtle: color-mix(in srgb, var(--pa-ink) 8%, transparent);
}
.om-loading[b-5kbf3z5aem] { display: flex; justify-content: center; padding: 3rem; }
.om-rule-name[b-5kbf3z5aem] { font-size: 1rem; font-weight: 700; color: var(--brand-charcoal); margin-bottom: 0.75rem; }
.om-count[b-5kbf3z5aem] { font-size: 0.8125rem; color: var(--pa-muted); margin-bottom: 0.75rem; }
.om-empty[b-5kbf3z5aem] { text-align: center; padding: 2rem; }
[b-5kbf3z5aem] .om-empty-icon { font-size: 2.5rem !important; color: var(--pa-faint-decor); margin-bottom: 0.5rem; }
/* Primary line --pa-muted, subordinate --pa-faint: both source values failed,
but the hierarchy between them survives the fix. */
.om-empty-text[b-5kbf3z5aem] { font-size: 0.875rem; font-weight: 600; color: var(--pa-muted); }
.om-empty-sub[b-5kbf3z5aem] { font-size: 0.75rem; color: var(--pa-faint); margin-top: 0.25rem; }
.om-card[b-5kbf3z5aem] {
border: 1px solid var(--border-subtle);
border-radius: 8px;
margin-bottom: 0.5rem;
overflow: hidden;
}
.om-card-header[b-5kbf3z5aem] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
background: color-mix(in srgb, var(--pa-ink) 2%, transparent);
border-bottom: 1px solid var(--border-subtle);
}
.om-scope[b-5kbf3z5aem] { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.om-client-name[b-5kbf3z5aem] { font-weight: 700; font-size: 0.8125rem; color: var(--brand-charcoal); }
.om-arrow[b-5kbf3z5aem] { color: var(--pa-faint-decor); font-size: 0.75rem; }
.om-shop-name[b-5kbf3z5aem] { font-weight: 600; font-size: 0.8125rem; color: var(--pa-muted); }
.om-scope-badge[b-5kbf3z5aem] {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
color: var(--pa-teal-deep);
border-radius: 3px;
padding: 0.1rem 0.35rem;
}
/* Orange text on an orange tint — the mix, not the flat token (see theme). */
.om-scope-badge--profile[b-5kbf3z5aem] {
background: color-mix(in srgb, var(--pa-orange) 12%, transparent);
color: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
}
[b-5kbf3z5aem] .om-delete-btn { color: var(--pa-faint-decor) !important; }
[b-5kbf3z5aem] .om-delete-btn:hover { color: var(--brand-red) !important; }
.om-card-body[b-5kbf3z5aem] { padding: 0.5rem 0.75rem; }
.om-field[b-5kbf3z5aem] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.3rem;
}
.om-field-label[b-5kbf3z5aem] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pa-muted);
width: 70px;
flex-shrink: 0;
}
.om-field-value[b-5kbf3z5aem] { font-size: 0.8125rem; color: var(--brand-charcoal); }
.om-val-on[b-5kbf3z5aem] { color: var(--pa-ok-fg); font-weight: 600; }
.om-val-off[b-5kbf3z5aem] { color: var(--brand-red); font-weight: 600; }
.om-var-row[b-5kbf3z5aem] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.2rem 0 0.2rem 70px;
}
.om-var-name[b-5kbf3z5aem] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
color: var(--brand-teal);
font-weight: 600;
}
.om-var-value[b-5kbf3z5aem] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
color: var(--pa-muted);
background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
border-radius: 3px;
padding: 0.05rem 0.3rem;
}
.om-empty-override[b-5kbf3z5aem] { font-size: 0.75rem; color: var(--pa-muted); font-style: italic; }
.om-bulk-actions[b-5kbf3z5aem] { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
[b-5kbf3z5aem] .om-reset-all-btn {
text-transform: none !important;
font-size: 0.75rem !important;
color: var(--brand-red) !important;
border-color: rgba(191, 26, 42, 0.25) !important;
}
/* /Components/Pages/Admin/ProAudit/RuleOverrideManagerDialog.razor.rz.scp.css */
/* Dialog shell sizing is in wwwroot/css/rule-templates.css because the MudDialog root is not isolation-reachable. */
/* /Components/Pages/Admin/ProAudit/RuleTemplateDetail.razor.rz.scp.css */
.rtd[b-9rjcgonw4j] {
--rtd-charcoal: var(--pa-ink);
/* --rtd-teal was #00a69c, the FILL teal, but 12 of its 16 uses are
`color:` and the other 4 are border-colors — so it is a text token in
practice and points at the text twin. --rtd-orange is genuinely a fill
(button backgrounds), so it keeps the fill token and text goes through
--rtd-orange-text, mirroring --pa-orange / --pa-orange-text. Both now
inherit ProAuditLayout's per-tenant white-label overrides. */
--rtd-teal: var(--pa-teal-deep);
--rtd-orange: var(--pa-orange);
/* All three text consumers sit on a color-mix(in srgb, var(--pa-orange) 10%, transparent) tint, where the
flat deep twin is still ~4.4:1 — so this is the tinted-chip mix the
theme prescribes (6.43:1), which stays branded by mixing the token. */
--rtd-orange-text: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
--rtd-paper: var(--pa-card-tint);
--rtd-card: var(--pa-card);
--rtd-border: color-mix(in srgb, var(--pa-ink) 10%, transparent);
--rtd-border-strong: color-mix(in srgb, var(--pa-ink) 18%, transparent);
--rtd-text-muted: var(--pa-muted);
max-width: 1080px;
margin: 0 auto;
padding: 1rem 1.5rem 4rem;
font-family: 'Roboto', sans-serif;
}
.rtd-loading[b-9rjcgonw4j], .rtd-error[b-9rjcgonw4j] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
gap: 0.75rem;
color: var(--pa-muted);
font-family: 'Roboto', sans-serif;
}
.rtd-error p[b-9rjcgonw4j] { margin: 0; }
.rtd-back[b-9rjcgonw4j] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.65rem;
background: transparent;
border: 1px solid var(--rtd-border-strong);
border-radius: 5px;
font-size: 0.75rem;
font-weight: 600;
color: var(--rtd-text-muted);
cursor: pointer;
font-family: inherit;
margin-bottom: 1rem;
transition: all 0.15s ease;
}
.rtd-back:hover[b-9rjcgonw4j] {
background: color-mix(in srgb, var(--pa-teal) 4%, transparent);
color: var(--rtd-teal);
border-color: var(--rtd-teal);
}
.rtd-head[b-9rjcgonw4j] {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--rtd-border);
}
.rtd-head-row[b-9rjcgonw4j] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
flex-wrap: wrap;
}
.rtd-head-left[b-9rjcgonw4j] { flex: 1; min-width: 320px; }
.rtd-head-right[b-9rjcgonw4j] { display: flex; gap: 0.5rem; flex-shrink: 0; }
.rtd-eyebrow[b-9rjcgonw4j] {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rtd-teal);
display: block;
margin-bottom: 0.4rem;
}
.rtd-title[b-9rjcgonw4j] {
font-size: 2rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--rtd-charcoal);
letter-spacing: -0.02em;
line-height: 1.1;
}
.rtd-title-input[b-9rjcgonw4j] {
width: 100%;
font-size: 2rem;
font-weight: 700;
font-family: inherit;
color: var(--rtd-charcoal);
background: var(--rtd-card);
border: 1px solid var(--rtd-border-strong);
border-radius: 6px;
padding: 0.4rem 0.75rem;
outline: none;
}
.rtd-title-input:focus[b-9rjcgonw4j] { border-color: var(--rtd-teal); }
.rtd-desc[b-9rjcgonw4j] {
font-size: 0.9375rem;
color: var(--rtd-text-muted);
line-height: 1.55;
margin: 0;
max-width: 640px;
}
.rtd-desc-placeholder[b-9rjcgonw4j] { font-style: italic; opacity: 0.7; }
.rtd-desc-input[b-9rjcgonw4j] {
width: 100%;
font-size: 0.9375rem;
font-family: inherit;
color: var(--rtd-charcoal);
background: var(--rtd-card);
border: 1px solid var(--rtd-border-strong);
border-radius: 6px;
padding: 0.5rem 0.75rem;
outline: none;
resize: vertical;
margin-top: 0.5rem;
}
.rtd-desc-input:focus[b-9rjcgonw4j] { border-color: var(--rtd-teal); }
.rtd-stats[b-9rjcgonw4j] {
display: flex;
gap: 2rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--rtd-border);
}
.rtd-stat[b-9rjcgonw4j] { display: flex; flex-direction: column; gap: 0.2rem; }
.rtd-stat-val[b-9rjcgonw4j] {
font-size: 1.5rem;
font-weight: 700;
color: var(--rtd-charcoal);
line-height: 1;
letter-spacing: -0.02em;
}
.rtd-stat-lbl[b-9rjcgonw4j] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rtd-text-muted);
}
.rtd-section[b-9rjcgonw4j] { margin-top: 2rem; }
.rtd-section-head[b-9rjcgonw4j] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.rtd-section-title[b-9rjcgonw4j] {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
color: var(--rtd-charcoal);
letter-spacing: -0.01em;
}
.rtd-section-sub[b-9rjcgonw4j] {
font-size: 0.8125rem;
color: var(--rtd-text-muted);
margin: 0;
max-width: 640px;
line-height: 1.5;
}
.rtd-empty[b-9rjcgonw4j] {
background: var(--rtd-card);
border: 1px dashed var(--rtd-border-strong);
border-radius: 10px;
padding: 3rem 2rem;
text-align: center;
color: var(--rtd-charcoal);
}
[b-9rjcgonw4j] .rtd-empty-icon {
background: color-mix(in srgb, var(--pa-teal) 8%, transparent);
color: var(--rtd-teal);
border-radius: 50%;
width: 56px;
height: 56px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.rtd-empty h3[b-9rjcgonw4j] { margin: 0 0 0.4rem 0; font-size: 1.125rem; font-weight: 700; }
.rtd-empty p[b-9rjcgonw4j] { margin: 0; color: var(--rtd-text-muted); font-size: 0.875rem; }
.rtd-rule-list[b-9rjcgonw4j] { display: flex; flex-direction: column; gap: 0.5rem; }
/* ── Bundle group row ────────────────────────────────────── */
.rtd-bundle[b-9rjcgonw4j] {
background: var(--rtd-card);
border: 1px solid var(--rtd-border-strong);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.rtd-bundle:hover[b-9rjcgonw4j] { border-color: color-mix(in srgb, var(--pa-teal) 45%, transparent); }
.rtd-bundle-head[b-9rjcgonw4j] {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.85rem 1rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--pa-teal) 5%, transparent), color-mix(in srgb, var(--pa-teal) 1%, transparent));
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.15s ease;
}
.rtd-bundle-head:hover[b-9rjcgonw4j] { background: color-mix(in srgb, var(--pa-teal) 8%, transparent); }
.rtd-bundle-chev[b-9rjcgonw4j] {
display: inline-block;
width: 1.1rem;
font-size: 1.1rem;
line-height: 1;
color: var(--rtd-text-muted);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.rtd-bundle-chev.open[b-9rjcgonw4j] { transform: rotate(90deg); }
.rtd-bundle-icon[b-9rjcgonw4j] {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
color: var(--rtd-teal);
}
.rtd-bundle-icon svg[b-9rjcgonw4j] { width: 100%; height: 100%; }
.rtd-bundle-main[b-9rjcgonw4j] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rtd-bundle-title-row[b-9rjcgonw4j] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.rtd-bundle-name[b-9rjcgonw4j] {
font-size: 0.9375rem;
font-weight: 700;
color: var(--rtd-charcoal);
}
.rtd-bundle-badge[b-9rjcgonw4j] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.18rem 0.55rem;
border-radius: 999px;
line-height: 1;
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
color: var(--rtd-teal);
}
.rtd-bundle-type[b-9rjcgonw4j] {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.45rem;
border-radius: 999px;
line-height: 1;
}
.rtd-bundle-type--locked[b-9rjcgonw4j] {
background: color-mix(in srgb, var(--pa-ink) 8%, transparent);
color: var(--rtd-charcoal);
}
.rtd-bundle-type--coll[b-9rjcgonw4j] {
background: color-mix(in srgb, var(--pa-orange) 10%, transparent);
color: var(--rtd-orange-text);
}
.rtd-bundle-count[b-9rjcgonw4j] {
font-size: 0.75rem;
color: var(--rtd-text-muted);
font-variant-numeric: tabular-nums;
}
.rtd-bundle-presets[b-9rjcgonw4j] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--pa-orange) 10%, transparent);
color: var(--rtd-orange-text);
}
.rtd-bundle-desc[b-9rjcgonw4j] {
font-size: 0.8125rem;
color: var(--rtd-text-muted);
line-height: 1.5;
margin: 0;
}
.rtd-bundle-actions[b-9rjcgonw4j] { display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center; }
/* Doubled on purpose. These tie .rtd-rule-btn / .rtd-rule-btn:hover on
specificity and sit ~90 lines ABOVE them, so both `color` declarations
were dead and the remove button rendered charcoal instead of red. */
.rtd-rule-btn.rtd-rule-btn--remove[b-9rjcgonw4j] {
color: var(--pa-bad-fg);
border-color: color-mix(in srgb, var(--pa-bad-border) 30%, transparent);
}
.rtd-rule-btn.rtd-rule-btn--remove:hover[b-9rjcgonw4j] {
background: var(--pa-bad-bg);
border-color: color-mix(in srgb, var(--pa-bad-border) 55%, transparent);
color: var(--pa-bad-fg);
}
.rtd-bundle-rules[b-9rjcgonw4j] {
padding: 0.5rem;
background: var(--rtd-paper);
border-top: 1px solid var(--rtd-border);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.rtd-rule[b-9rjcgonw4j] {
background: var(--rtd-card);
border: 1px solid var(--rtd-border);
border-radius: 8px;
padding: 0.85rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: border-color 0.15s ease;
}
.rtd-rule:hover[b-9rjcgonw4j] { border-color: var(--rtd-border-strong); }
.rtd-rule-head[b-9rjcgonw4j] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.rtd-rule-head-main[b-9rjcgonw4j] {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.rtd-rule-name[b-9rjcgonw4j] {
font-size: 0.875rem;
font-weight: 700;
color: var(--rtd-charcoal);
}
.rtd-cat-chip[b-9rjcgonw4j] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.18rem 0.55rem;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
color: var(--rtd-teal);
}
.rtd-pill-muted[b-9rjcgonw4j] {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--pa-ink) 7%, transparent);
color: var(--rtd-text-muted);
}
.rtd-rule-actions[b-9rjcgonw4j] { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.rtd-rule-btn[b-9rjcgonw4j] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
background: var(--rtd-card);
border: 1px solid var(--rtd-border-strong);
border-radius: 5px;
font-size: 0.75rem;
font-weight: 600;
color: var(--rtd-charcoal);
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
}
.rtd-rule-btn:hover[b-9rjcgonw4j] {
background: color-mix(in srgb, var(--pa-teal) 6%, transparent);
border-color: var(--rtd-teal);
color: var(--rtd-teal);
}
.rtd-rule-btn.primary[b-9rjcgonw4j] {
background: color-mix(in srgb, var(--pa-orange) 10%, transparent);
border-color: color-mix(in srgb, var(--pa-orange) 40%, transparent);
color: var(--rtd-orange-text);
}
/* white on a solid brand-orange fill is 2.56:1 — this is the .pa-btn--primary pairing. */
.rtd-rule-btn.primary:hover[b-9rjcgonw4j] { background: var(--rtd-orange); color: var(--pa-orange-fg); }
.rtd-rule-btn-icon[b-9rjcgonw4j] { padding: 0.35rem 0.45rem; }
.rtd-no-vars[b-9rjcgonw4j] {
font-size: 0.75rem;
color: var(--rtd-text-muted);
font-style: italic;
padding: 0 0.5rem;
}
.rtd-rule-desc[b-9rjcgonw4j] {
font-size: 0.8125rem;
color: var(--rtd-text-muted);
line-height: 1.5;
margin: 0;
}
.rtd-preset-row[b-9rjcgonw4j] {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--rtd-border);
}
.rtd-preset-chip[b-9rjcgonw4j] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.55rem;
background: var(--pa-card-tint);
border: 1px solid var(--rtd-border);
border-radius: 4px;
font-size: 0.75rem;
color: var(--rtd-charcoal);
font-family: 'Consolas', 'Menlo', monospace;
}
.rtd-preset-chip strong[b-9rjcgonw4j] {
font-weight: 700;
color: var(--rtd-teal);
font-family: 'Roboto', sans-serif;
}
.rtd-btn[b-9rjcgonw4j] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
font-family: inherit;
transition: all 0.15s ease;
}
.rtd-btn-primary[b-9rjcgonw4j] { background: var(--rtd-orange); color: var(--pa-orange-fg); border-color: var(--rtd-orange); }
.rtd-btn-primary:hover:not([disabled])[b-9rjcgonw4j] { background: var(--pa-orange-hover); }
.rtd-btn-primary[disabled][b-9rjcgonw4j] { opacity: 0.5; cursor: not-allowed; }
.rtd-btn-ghost[b-9rjcgonw4j] { background: transparent; color: var(--rtd-charcoal); border-color: var(--rtd-border-strong); }
.rtd-btn-ghost:hover[b-9rjcgonw4j] { background: color-mix(in srgb, var(--pa-ink) 4%, transparent); }
/* /Components/Pages/Admin/ProAudit/ScriptEditorPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
ScriptEditorPanel — Script editor + test runner styles
══════════════════════════════════════════════════════════════ */
/* --pa-code-bg / --pa-code-header-bg / --pa-code-border live in
proaudit-theme.css. They used to be declared in a `:root { }` block RIGHT HERE,
which the scoped-css rewriter turned into `:root[b-...]` — a selector that can
never match , so the tokens silently did not exist and this console had
no background at all. Do not move them back. */
/* ── Script tab content ── */
.script-tab-content[b-4pcrgolu2z] {
padding: 0;
}
/* ── Trigger filter ── */
.trigger-filter-row[b-4pcrgolu2z] {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.625rem 0.875rem;
background: color-mix(in srgb, var(--pa-teal) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-teal) 18%, transparent);
border-radius: 8px;
}
.trigger-filter-label[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--pa-ink);
flex-wrap: wrap;
}
[b-4pcrgolu2z] .trigger-icon {
color: var(--pa-teal-deep);
font-size: 1.1rem !important;
}
.trigger-hint[b-4pcrgolu2z] {
font-size: 0.6875rem;
font-weight: 400;
color: var(--pa-muted);
}
[b-4pcrgolu2z] .trigger-filter-select {
width: 100%;
}
/* ── Variable Preview Panel ── */
.var-preview-panel[b-4pcrgolu2z] {
background: color-mix(in srgb, var(--pa-teal) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-teal) 18%, transparent);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
.var-preview-header[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pa-teal-deep);
margin-bottom: 0.5rem;
}
.var-preview-count[b-4pcrgolu2z] {
font-size: 0.625rem;
font-weight: 700;
background: color-mix(in srgb, var(--pa-teal) 15%, transparent);
color: var(--pa-teal-deep);
border-radius: 10px;
padding: 0.05rem 0.4rem;
margin-left: 0.25rem;
}
.var-preview-warn[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: var(--pa-warn-fg);
background: var(--pa-warn-bg);
border-radius: 4px;
padding: 0.3rem 0.5rem;
margin-bottom: 0.4rem;
}
.var-preview-warn[b-4pcrgolu2z] .mud-icon-root {
font-size: 0.875rem !important;
/* #f59e0b was 1.91:1 — under even the 3:1 non-text bar for a warning glyph. */
color: var(--pa-warn-fg);
}
.var-preview-grid[b-4pcrgolu2z] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
}
.var-preview-grid-header[b-4pcrgolu2z] {
display: grid;
grid-template-columns: 1fr 0.7fr 0.8fr 1.2fr;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
font-weight: 700;
color: var(--pa-muted);
text-transform: uppercase;
font-size: 0.625rem;
letter-spacing: 0.05em;
border-bottom: 1px solid color-mix(in srgb, var(--pa-teal) 12%, transparent);
}
.var-preview-grid-row[b-4pcrgolu2z] {
display: grid;
grid-template-columns: 1fr 0.7fr 0.8fr 1.2fr;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--pa-ink) 4%, transparent);
}
.var-preview-name[b-4pcrgolu2z] { color: var(--pa-teal-deep); font-weight: 600; }
/* Type is the stronger column, default the weaker one — they read 0.55 and 0.65
alpha before and both failed, but keep their relative weight after. */
.var-preview-type[b-4pcrgolu2z] { color: var(--pa-muted); }
.var-preview-default[b-4pcrgolu2z] { color: var(--pa-faint); }
.var-preview-label[b-4pcrgolu2z] { color: var(--pa-ink); font-family: inherit; }
.var-preview-controls[b-4pcrgolu2z] {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--pa-teal) 12%, transparent);
}
.var-preview-controls-label[b-4pcrgolu2z] {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pa-muted);
margin-bottom: 0.5rem;
}
/* ── API Reference ── */
.api-reference[b-4pcrgolu2z] {
background: color-mix(in srgb, var(--pa-teal) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--pa-teal) 15%, transparent);
border-radius: 8px;
padding: 0.875rem 1rem;
}
.api-ref-header[b-4pcrgolu2z] {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pa-teal-deep);
margin-bottom: 0.75rem;
}
.api-ref-grid[b-4pcrgolu2z] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.api-ref-group[b-4pcrgolu2z] {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.api-ref-type[b-4pcrgolu2z] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.6875rem;
color: var(--pa-muted);
line-height: 1.2;
}
.output-type[b-4pcrgolu2z] {
/* Was rgba(221,145,66,0.7) — the brand orange at 70%, 1.72:1 on this panel.
--pa-orange-text resolves to the deep twin and stays white-label branded. */
color: var(--pa-orange-text) !important;
}
.api-ref-name[b-4pcrgolu2z] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.875rem;
font-weight: 600;
color: var(--pa-teal-deep);
margin-bottom: 0.35rem;
}
.api-ref-sub[b-4pcrgolu2z] {
font-size: 0.6875rem;
font-weight: 600;
color: var(--pa-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.4rem;
}
.api-ref-props[b-4pcrgolu2z] {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
}
.api-ref-props span[b-4pcrgolu2z] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.6875rem;
background: color-mix(in srgb, var(--pa-teal) 8%, transparent);
color: var(--pa-muted);
border: 1px solid color-mix(in srgb, var(--pa-teal) 15%, transparent);
border-radius: 3px;
padding: 0.1rem 0.35rem;
white-space: nowrap;
}
.api-ref-divider[b-4pcrgolu2z] {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.625rem;
color: var(--pa-faint-decor); /* a "·" separator glyph, not read as text */
padding: 0.1rem 0;
flex-basis: 100%;
background: none !important;
border: none !important;
white-space: nowrap;
letter-spacing: 0.04em;
}
/* ── Test runner ── */
.test-tab-content[b-4pcrgolu2z] {
padding: 0.5rem 0;
}
.test-upload-row[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.test-upload-label[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--pa-ink);
white-space: nowrap;
flex-shrink: 0;
}
[b-4pcrgolu2z] .test-upload-icon {
color: var(--pa-teal-deep);
font-size: 1.1rem !important;
}
.test-file-btn[b-4pcrgolu2z] {
font-size: 0.8rem !important;
padding: 0.3rem 0.875rem !important;
cursor: pointer;
border-color: color-mix(in srgb, var(--pa-ink) 25%, transparent) !important;
color: var(--pa-ink) !important;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex !important;
align-items: center;
}
[b-4pcrgolu2z] .test-repeat-field {
width: 72px;
flex-shrink: 0;
}
[b-4pcrgolu2z] .test-repeat-field .mud-input-root {
font-size: 0.8125rem;
}
[b-4pcrgolu2z] .test-run-btn {
/* white on --pa-teal is 3.03:1 — fine for a glyph, not for button text.
--pa-teal-shade is the SURFACE teal: light --pa-teal-deep byte for byte (6.21:1)
and invariant, where --pa-teal-deep is the TEXT teal and brightens in dark
(white on it fell to 2.16:1). White-labelled the same way (AccentText). */
background: var(--pa-teal-shade) !important;
color: white !important;
font-weight: 600;
text-transform: none;
font-size: 0.8125rem;
padding: 0.3rem 1rem !important;
}
/* ── Test console ── */
.test-console[b-4pcrgolu2z] {
border: 1px solid var(--pa-code-border);
border-radius: 8px;
overflow: hidden;
background: var(--pa-code-bg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.test-console-bar[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 6px;
padding: 0.5rem 0.75rem;
background: var(--pa-code-header-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
user-select: none;
}
.test-console-title[b-4pcrgolu2z] {
margin-left: 0.5rem;
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.75rem;
/* 3.20:1 at 35% white on --pa-code-header-bg. --pa-sidebar-text is the
house token for text on dark chrome and measures 9.90:1 here; it is not
one of the white-labelled tokens, so it stays fixed under branding. */
color: var(--pa-sidebar-text);
letter-spacing: 0.02em;
}
.test-console-body[b-4pcrgolu2z] {
padding: 0.75rem 1rem;
min-height: 220px;
max-height: 340px;
overflow-y: auto;
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.8rem;
line-height: 1.65;
}
.test-log[b-4pcrgolu2z] {
display: flex;
gap: 0.5rem;
white-space: pre-wrap;
word-break: break-word;
}
.test-log-tag[b-4pcrgolu2z] {
flex-shrink: 0;
width: 58px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
padding-top: 0.05rem;
opacity: 0.7;
}
.test-log-msg[b-4pcrgolu2z] {
flex: 1;
}
/* Log line colors */
/* The console is Catppuccin Mocha on --pa-code-bg (#1e1e2e), deliberately outside
the Audit Journal palette; every hue below clears AA on that ground (7.1–11.0:1).
Only the dimmed line failed — 35% alpha measured 2.59:1, now 5.19:1 at 62%. */
.test-log-dim[b-4pcrgolu2z] { color: rgba(205, 214, 244, 0.62); }
.test-log-info[b-4pcrgolu2z] { color: #cdd6f4; }
.test-log-ok[b-4pcrgolu2z] { color: #a6e3a1; }
.test-log-warn[b-4pcrgolu2z] { color: #f9e2af; }
.test-log-error[b-4pcrgolu2z] { color: #f38ba8; }
.test-log-match[b-4pcrgolu2z] { color: #89dceb; }
.test-log-none[b-4pcrgolu2z] { color: #fab387; }
.test-log-log[b-4pcrgolu2z] { color: #cba6f7; }
.test-log-cache[b-4pcrgolu2z] { color: #a6e3a1; opacity: 0.75; font-style: italic; }
.test-log-cache .test-log-tag[b-4pcrgolu2z] { color: #a6e3a1; opacity: 0.75; }
.test-log-ok .test-log-tag[b-4pcrgolu2z] { color: #a6e3a1; opacity: 1; }
.test-log-error .test-log-tag[b-4pcrgolu2z] { color: #f38ba8; opacity: 1; }
.test-log-match .test-log-tag[b-4pcrgolu2z] { color: #89dceb; opacity: 1; }
.test-log-warn .test-log-tag[b-4pcrgolu2z] { color: #f9e2af; opacity: 1; }
.test-log-none .test-log-tag[b-4pcrgolu2z] { color: #fab387; opacity: 1; }
.test-log-log .test-log-tag[b-4pcrgolu2z] { color: #cba6f7; opacity: 1; }
/* Chrome dots (used in console header) */
[b-4pcrgolu2z] .editor-chrome-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
/* ── Snippet toolbar ── */
.snippet-toolbar[b-4pcrgolu2z] {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.5rem;
margin-bottom: 0.375rem;
/* Was rgba(30,30,46,0.55) — 55% Catppuccin over the LIGHT dialog surface,
which composites to a mid-grey, not the dark chrome it was meant to be.
The snippet buttons then measured 1.42:1 on it. Opaque, matching the
Monaco editor header directly below, takes them to 9.9:1. */
background: var(--pa-code-header-bg);
border: 1px solid color-mix(in srgb, var(--pa-teal) 15%, transparent);
border-radius: 6px;
}
[b-4pcrgolu2z] .snippet-btn {
font-size: 0.7rem !important;
font-weight: 600 !important;
text-transform: none !important;
color: var(--pa-sidebar-text) !important;
padding: 0.15rem 0.5rem !important;
min-width: unset !important;
letter-spacing: 0.01em;
border-radius: 4px !important;
transition: color 0.15s, background 0.15s;
}
[b-4pcrgolu2z] .snippet-btn:hover {
color: var(--pa-sidebar-text-bright) !important;
background: color-mix(in srgb, var(--pa-teal) 12%, transparent) !important;
}
[b-4pcrgolu2z] .snippet-btn-icon {
font-size: 0.875rem !important;
margin-right: 0.2rem;
opacity: 0.7;
}
/* /Components/Pages/Admin/ProAudit/ShopRulesProbes.razor.rz.scp.css */
/* Staff's probe check on /admin/proaudit/shop-rules (AI rule builder task P). Layout only, every colour a house token.
One memorable thing: the tape, fifteen numbered cells in the probe set's order that fill with each request's verdict as
the run goes. Everything else stays quiet and reads like the shop rules table above it. */
/* Every grid here sizes its one column to the space it has, so the wide table scrolls inside its own box. */
.rbp[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.rbp p[b-ll1d703wks] { margin: 0; }
.rbp-quiet[b-ll1d703wks] { color: var(--pa-muted); font-size: 12.5px; line-height: 1.45; }
.rbp-head[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; }
.rbp-head-text[b-ll1d703wks] { display: grid; gap: 6px; min-width: 0; }
.rbp-head-text .pa-section-label[b-ll1d703wks] { margin: 0; }
.rbp-sub[b-ll1d703wks] { max-width: 80ch; color: var(--pa-ink); font-size: 13.5px; line-height: 1.55; }
.rbp-prompt[b-ll1d703wks] { display: grid; gap: 4px; min-width: 0; padding-left: 14px; border-left: 2px solid var(--pa-hair-strong); }
.rbp-prompt-label[b-ll1d703wks] { color: var(--pa-ink); font-size: 12.5px; font-weight: 700; }
.rbp-hash[b-ll1d703wks] { font-size: 12px; color: var(--pa-ink); overflow-wrap: anywhere; line-height: 1.4; }
.rbp-readonly[b-ll1d703wks] { margin: 0; }
/* The run strip: what a run costs and who pays, the one option, and the one action. */
.rbp-strip[b-ll1d703wks] {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center;
padding: 14px 16px; background: var(--pa-card); border: 1px solid var(--pa-hair); border-radius: var(--pa-radius);
}
.rbp-cost[b-ll1d703wks] { display: grid; gap: 4px; min-width: 0; grid-column: 1; }
.rbp-cost p:first-child[b-ll1d703wks] { color: var(--pa-ink); font-size: 13.5px; line-height: 1.5; }
.rbp-cost b[b-ll1d703wks] { font-weight: 650; }
.rbp-next[b-ll1d703wks] { grid-column: 1; display: flex; gap: 8px; align-items: flex-start; color: var(--pa-ink); font-size: 13px; line-height: 1.45; cursor: pointer; }
.rbp-next input[b-ll1d703wks] { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--pa-orange); }
.rbp-acts[b-ll1d703wks] { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; justify-content: flex-end; }
.rbp-block[b-ll1d703wks] { margin: 0; }
.rbp-block > div[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.rbp-block a[b-ll1d703wks] { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* A customer company: where staff mark a company as demo, side by side, wrapping on a phone. */
.rbp-links[b-ll1d703wks] { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* The tape. */
.rbp-progress[b-ll1d703wks] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; }
.rbp-tape[b-ll1d703wks] { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rbp-cell[b-ll1d703wks] {
display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
font: inherit; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--pa-muted); background: var(--pa-card); border: 1.5px solid var(--pa-hair-strong); border-radius: var(--pa-radius-sm);
cursor: pointer;
}
.rbp-cell:focus-visible[b-ll1d703wks] { outline: 2px solid var(--pa-orange); outline-offset: 2px; }
.rbp-cell.is-waiting[b-ll1d703wks] { border-style: dashed; }
.rbp-cell.is-running[b-ll1d703wks] { color: var(--pa-ink); border-color: var(--pa-orange); box-shadow: inset 0 0 0 2px var(--pa-orange); }
.rbp-cell.is-pass[b-ll1d703wks] { color: var(--pa-ok-fg); background: var(--pa-ok-bg); border-color: var(--pa-ok-border); }
.rbp-cell.is-judge[b-ll1d703wks] { color: var(--pa-warn-fg); background: var(--pa-warn-bg); border-color: var(--pa-warn-border); }
.rbp-cell.is-fail[b-ll1d703wks] { color: var(--pa-bad-fg); background: var(--pa-bad-bg); border-color: var(--pa-bad-border); }
.rbp-cell.is-none[b-ll1d703wks] { color: var(--pa-neutral-fg); background: var(--pa-card-tint); border-style: dotted; }
.rbp-status[b-ll1d703wks] { display: grid; gap: 2px; min-width: 0; }
.rbp-status p:first-child[b-ll1d703wks] { color: var(--pa-ink); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
/* The results table: column geometry and the verdict cue on each row's edge. */
.rbp-grid td[b-ll1d703wks] { vertical-align: top; }
/* The actions column's hidden label is absolutely placed: anchored to its cell, it stays inside the table's scroller
instead of widening the page on a phone (the shop rules table above does the same). */
.rbp-grid > thead > tr > th[b-ll1d703wks] { position: relative; }
.rbp-grid .num[b-ll1d703wks] { text-align: right; white-space: nowrap; }
.rbp-grid .rbp-typed[b-ll1d703wks] { min-width: 240px; }
.rbp-typed q[b-ll1d703wks] { display: block; color: var(--pa-ink); font-weight: 600; line-height: 1.45; }
.rbp-typed small[b-ll1d703wks] { display: block; margin-top: 2px; color: var(--pa-muted); font-size: 12.5px; }
.rbp-tr.is-pass > td:first-child[b-ll1d703wks] { box-shadow: inset 3px 0 0 var(--pa-ok-border); }
.rbp-tr.is-judge > td:first-child[b-ll1d703wks] { box-shadow: inset 3px 0 0 var(--pa-warn-border); }
.rbp-tr.is-fail > td:first-child[b-ll1d703wks] { box-shadow: inset 3px 0 0 var(--pa-bad-border); }
.rbp-failed[b-ll1d703wks] { margin: 0; padding-left: 16px; min-width: 180px; color: var(--pa-bad-fg); font-size: 12.5px; line-height: 1.45; }
.rbp-row-acts[b-ll1d703wks] { white-space: nowrap; text-align: right; }
.rbp-row-acts .pa-btn + .pa-btn[b-ll1d703wks] { margin-left: 6px; }
/* An opened row: Claude's answer and its checks beside what a good answer has. */
.rbp-detail-row > td[b-ll1d703wks] { background: var(--pa-card-tint); }
.rbp-detail[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; padding: 6px 2px 10px; }
.rbp-detail h3[b-ll1d703wks] { margin: 0 0 6px; color: var(--pa-ink); font-size: 14px; font-weight: 700; }
.rbp-detail h4[b-ll1d703wks] { margin: 0 0 4px; color: var(--pa-muted); font-size: 12.5px; font-weight: 700; }
.rbp-answer[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.rbp-answer .pa-callout[b-ll1d703wks] { margin: 0; }
.rbp-said[b-ll1d703wks] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.rbp-reply[b-ll1d703wks] {
margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--pa-hair-strong);
color: var(--pa-ink); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.rbp-part[b-ll1d703wks] { display: grid; gap: 4px; min-width: 0; }
.rbp-part p[b-ll1d703wks] { color: var(--pa-ink); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.rbp-questions[b-ll1d703wks] { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.rbp-questions > li[b-ll1d703wks] { display: grid; gap: 4px; }
.rbp-chips[b-ll1d703wks] { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.rbp-chip[b-ll1d703wks] {
padding: 4px 11px; color: var(--pa-ink); background: var(--pa-card); border: 1px solid var(--pa-hair-strong);
border-radius: 100px; font-size: 12.5px; line-height: 1.4;
}
.rbp-plain[b-ll1d703wks] { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--pa-ink); font-size: 13px; line-height: 1.5; }
.rbp-same[b-ll1d703wks] { color: var(--pa-ink); font-size: 13px; font-weight: 600; }
.rbp-checks[b-ll1d703wks] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--pa-hair); }
.rbp-check-list[b-ll1d703wks] { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.rbp-check-list > li[b-ll1d703wks] { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--pa-ink); font-size: 13px; line-height: 1.45; }
.rbp-check-list .pa-pill[b-ll1d703wks] { min-width: 62px; text-align: center; }
.rbp-evidence[b-ll1d703wks] { flex-basis: 100%; margin-left: 70px; color: var(--pa-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.rbp-next-turn[b-ll1d703wks] { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--pa-hair); }
.rbp-guide[b-ll1d703wks] { display: grid; gap: 8px; align-content: start; min-width: 0; padding-left: 18px; border-left: 1px solid var(--pa-hair); }
.rbp-guide p[b-ll1d703wks] { color: var(--pa-ink); font-size: 13px; line-height: 1.55; }
.rbp-wordings[b-ll1d703wks] { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rbp-wordings > li[b-ll1d703wks] { display: grid; gap: 6px; justify-items: start; }
.rbp-wordings q[b-ll1d703wks] { color: var(--pa-ink); font-size: 13px; }
@media (max-width: 768px) {
.rbp-head[b-ll1d703wks] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rbp-strip[b-ll1d703wks] { grid-template-columns: minmax(0, 1fr); }
.rbp-acts[b-ll1d703wks] { grid-column: 1; grid-row: auto; justify-content: flex-start; }
.rbp-progress[b-ll1d703wks] { grid-template-columns: minmax(0, 1fr); }
/* A phone reads each request as a short labelled stack instead of a table to scroll sideways, so an opened row is
always in view, full width. The column names stay for screen readers. */
.rbp-grid > thead[b-ll1d703wks] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rbp-grid[b-ll1d703wks], .rbp-grid > tbody[b-ll1d703wks] { display: block; }
.rbp-grid > tbody > tr.rbp-tr[b-ll1d703wks] { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--pa-hair); }
.rbp-grid > tbody > tr.rbp-tr > td[b-ll1d703wks] { grid-column: 2; display: block; padding: 2px 10px 2px 0; border: 0; text-align: left; }
.rbp-grid > tbody > tr.rbp-tr > td.num[b-ll1d703wks] { grid-column: 1; grid-row: 1 / span 6; padding-left: 4px; text-align: right; }
.rbp-grid > tbody > tr.rbp-tr > td:empty[b-ll1d703wks] { display: none; }
.rbp-grid > tbody > tr.rbp-tr > td[data-label][b-ll1d703wks]::before { content: attr(data-label) ": "; color: var(--pa-muted); }
.rbp-grid .rbp-typed[b-ll1d703wks], .rbp-failed[b-ll1d703wks] { min-width: 0; }
.rbp-row-acts[b-ll1d703wks] { padding-top: 6px; text-align: left; white-space: normal; }
.rbp-grid > tbody > tr.rbp-detail-row[b-ll1d703wks], .rbp-grid > tbody > tr.rbp-detail-row > td[b-ll1d703wks] { display: block; }
.rbp-detail[b-ll1d703wks] { grid-template-columns: minmax(0, 1fr); }
.rbp-guide[b-ll1d703wks] { padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid var(--pa-hair); }
.rbp-evidence[b-ll1d703wks] { margin-left: 0; }
}
/* /Components/Pages/Admin/ProAudit/_CitedSourcesTab.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
Cited Sources tab (Task 27)
Editorial card stack — Personal override → Shop default → Seed
default. Matches the cited-sources.html mockup (section ②) and
reuses the liby-v3-cite design language (warm paper / amber accent;
see pa-pages/library.css). Class prefix: `pa-rule-note-card-*`
(admin-side namespace) + `pa-rule-cited-*`.
proaudit-library.css is retired; the V3 citation styles now live in
pa-pages/library.css. This scoped sheet carries its own fallback
values, so the cards stay readable regardless of what the host
dialog loads.
══════════════════════════════════════════════════════════════ */
.liby-v3-cite-tab-stack[b-0iw1llcotx] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 4px 8px;
}
.pa-rule-cited-intro[b-0iw1llcotx] {
display: flex;
gap: 8px;
align-items: flex-start;
font: 400 13.5px/1.55 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
color: var(--pa-thead-fg);
max-width: 78ch;
margin-bottom: 4px;
}
.pa-rule-cited-intro-num[b-0iw1llcotx] {
font: 500 11px/1.55 'JetBrains Mono', ui-monospace, monospace;
color: var(--pa-orange-text);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.pa-rule-cited-intro strong[b-0iw1llcotx] {
color: var(--pa-ink);
font-weight: 600;
}
.pa-rule-cited-loading[b-0iw1llcotx],
.pa-rule-cited-empty[b-0iw1llcotx] {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 18px;
border: 1px dashed var(--pa-hair);
border-radius: 8px;
background: var(--pa-card-tint);
color: var(--pa-muted);
}
.pa-rule-cited-empty-icon[b-0iw1llcotx] {
color: var(--pa-faint);
}
.pa-rule-cited-empty-text[b-0iw1llcotx] {
font: 500 14px 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pa-ink);
margin-bottom: 4px;
}
.pa-rule-cited-empty-sub[b-0iw1llcotx] {
font: 400 12.5px/1.5 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pa-muted);
max-width: 60ch;
}
.pa-rule-cited-empty em[b-0iw1llcotx] {
color: var(--pa-orange-text);
font-style: normal;
font-weight: 500;
}
/* ── Stacked editorial card ── */
.pa-rule-note-card[b-0iw1llcotx] {
background: var(--pa-card);
border: 1px solid var(--pa-hair);
border-radius: 10px;
padding: 16px 18px 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-rule-note-card.is-active[b-0iw1llcotx] {
border-color: var(--pa-orange);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-orange) 18%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--pa-orange) 2.5%, transparent), var(--pa-card));
}
.pa-rule-note-card-head[b-0iw1llcotx] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.pa-rule-note-card-scope[b-0iw1llcotx] {
font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
color: var(--pa-ink);
}
/* Orange TEXT on an orange TINT. --pa-orange-text alone is only ~4.4:1 over this
composite, so the house answer for a tinted chip applies: mix the branded token
toward ink. Stays white-label because the mix reads --pa-orange-deep. */
.pa-rule-note-card-scope.is-personal[b-0iw1llcotx] {
background: color-mix(in srgb, var(--pa-orange) 12%, transparent);
color: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
}
.pa-rule-note-card-scope.is-shop[b-0iw1llcotx] {
background: color-mix(in srgb, var(--pa-teal) 10%, transparent);
color: var(--pa-teal-deep);
}
.pa-rule-note-card-scope.is-default[b-0iw1llcotx] {
background: var(--pa-thead-bg);
color: var(--pa-muted);
}
.pa-rule-note-card-author[b-0iw1llcotx] {
font: 400 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
color: var(--pa-faint);
letter-spacing: 0.02em;
}
.pa-rule-note-card-author strong[b-0iw1llcotx] {
color: var(--pa-ink);
font-weight: 600;
}
.pa-rule-note-card-active[b-0iw1llcotx] {
margin-left: auto;
font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.14em;
color: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
padding: 4px 8px;
border-radius: 4px;
background: color-mix(in srgb, var(--pa-orange) 8%, transparent);
}
.pa-rule-note-card-body[b-0iw1llcotx] {
font: 400 14px/1.6 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pa-ink);
margin: 0 0 12px;
white-space: pre-wrap;
word-break: break-word;
}
.pa-rule-note-card-body strong[b-0iw1llcotx] {
color: var(--pa-ink);
font-weight: 600;
}
/* ── Inline edit mode ── */
.pa-rule-note-card-edit[b-0iw1llcotx] {
margin: 0 0 12px;
}
.pa-rule-note-card-edit-actions[b-0iw1llcotx] {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
/* ── Source meta strip ── */
.pa-rule-note-card-source[b-0iw1llcotx] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin-bottom: 10px;
background: var(--pa-card-tint);
border: 1px solid var(--pa-hair);
border-radius: 6px;
}
.pa-rule-note-card-source-tag[b-0iw1llcotx] {
font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink));
padding: 3px 6px;
background: color-mix(in srgb, var(--pa-orange) 12%, transparent);
border-radius: 3px;
}
.pa-rule-note-card-source-tag--free[b-0iw1llcotx] {
color: var(--pa-muted);
background: var(--pa-thead-bg);
}
.pa-rule-note-card-source-meta[b-0iw1llcotx] {
font: 400 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
color: var(--pa-thead-fg);
letter-spacing: 0.02em;
}
.pa-rule-note-card-source--free[b-0iw1llcotx] {
background: transparent;
border-style: dashed;
}
/* ── Action row ── */
.pa-rule-note-card-actions[b-0iw1llcotx] {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
border-top: 1px solid var(--pa-row-border);
padding-top: 10px;
margin-top: 4px;
}
.pa-rule-note-card-act[b-0iw1llcotx] {
font: 500 12px 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pa-thead-fg);
background: transparent;
border: 1px solid var(--pa-hair);
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
letter-spacing: 0.01em;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pa-rule-note-card-act:hover:not(:disabled)[b-0iw1llcotx] {
background: var(--pa-card);
border-color: var(--pa-orange);
color: var(--pa-ink);
}
.pa-rule-note-card-act:disabled[b-0iw1llcotx] {
opacity: 0.5;
cursor: not-allowed;
}
.pa-rule-note-card-act--danger[b-0iw1llcotx] {
color: var(--pa-bad-fg);
border-color: color-mix(in srgb, var(--pa-bad-fg) 22%, var(--pa-card));
}
.pa-rule-note-card-act--danger:hover:not(:disabled)[b-0iw1llcotx] {
background: color-mix(in srgb, var(--pa-bad-fg) 6%, transparent);
border-color: var(--pa-bad-fg);
color: color-mix(in srgb, var(--pa-bad-fg) 90%, var(--pa-ink));
}
.pa-rule-note-card-act-info[b-0iw1llcotx] {
margin-left: auto;
font: 400 11.5px/1.4 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pa-faint);
max-width: 48ch;
text-align: right;
}
.pa-rule-note-card-act-info em[b-0iw1llcotx] {
color: var(--pa-orange-text);
font-style: normal;
font-weight: 500;
}
/* /Components/Pages/Admin/Profile/Index.razor.rz.scp.css */
.page-header[b-ylxj1iazgy] {
margin-bottom: 1.75rem;
}
.header-content[b-ylxj1iazgy] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.page-title[b-ylxj1iazgy] {
font-weight: 700;
color: var(--pa-ink);
letter-spacing: 0;
}
.page-subtitle[b-ylxj1iazgy] {
color: var(--pa-faint);
margin-top: 0.25rem;
}
.section-header[b-ylxj1iazgy] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.field-label[b-ylxj1iazgy] {
color: var(--pa-faint) !important;
margin-bottom: 0.25rem;
}
.edit-actions[b-ylxj1iazgy] {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
/* /Components/Pages/Admin/ProRecovery/Dialogs/AmendShareTermsDialog.razor.rz.scp.css */
/* The action dialog renders inside the provider, outside the page element that declares the --pa-* tokens, so the
root redeclares them (the house dialog pattern). Layout lives in admin-chrome.css under .prva-dialog-*. */
.prva-dialog-root[b-dauvemqlbc] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
color: var(--pa-ink);
}
/* /Components/Pages/Admin/ProRecovery/Dialogs/CorrectShareTermsDialog.razor.rz.scp.css */
/* The action dialog renders inside the provider, outside the page element that declares the --pa-* tokens, so the
root redeclares them (the house dialog pattern). Layout lives in admin-chrome.css under .prva-dialog-*. */
.prva-dialog-root[b-yogsdwpqx2] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
color: var(--pa-ink);
}
/* /Components/Pages/Admin/ProRecovery/Dialogs/EngagementLifecycleDialog.razor.rz.scp.css */
/* The action dialog renders inside the provider, outside the page element that declares the --pa-* tokens, so the
root redeclares them (the house dialog pattern). Layout lives in admin-chrome.css under .prva-dialog-*. */
.prva-dialog-root[b-3ss219sioj] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
color: var(--pa-ink);
}
/* /Components/Pages/Admin/ProRecovery/Dialogs/EnrollShopDialog.razor.rz.scp.css */
.prv-enroll-root[b-veaf5bvfu4] {
--pa-paper: inherit;
--pa-card: inherit;
--pa-card-tint: inherit;
--pa-ink: inherit;
--pa-muted: inherit;
--pa-faint: inherit;
--pa-faint-decor: inherit;
--pa-hair: inherit;
--pa-hair-strong: inherit;
--pa-orange: inherit;
--pa-orange-deep: inherit;
--pa-orange-text: inherit;
--pa-orange-fg: inherit;
--pa-orange-hover: inherit;
--pa-teal: inherit;
--pa-teal-deep: inherit;
--pa-ok-bg: inherit;
--pa-ok-fg: inherit;
--pa-ok-border: inherit;
--pa-warn-bg: inherit;
--pa-warn-fg: inherit;
--pa-warn-border: inherit;
--pa-bad-bg: inherit;
--pa-bad-fg: inherit;
--pa-bad-border: inherit;
--pa-info-bg: inherit;
--pa-info-fg: inherit;
--pa-info-border: inherit;
--pa-neutral-fg: inherit;
--pa-row-border: inherit;
--pa-radius: inherit;
--pa-radius-sm: inherit;
--pa-shadow-btn: inherit;
--pa-shadow-dialog: inherit;
--pa-focus-halo: inherit;
--pa-focus-ring: inherit;
--pa-font-display: inherit;
--pa-font-body: inherit;
--pa-font-numeric: inherit;
--pa-dur-fast: inherit;
--pa-dur-slow: inherit;
/* Unclassed text (the scope labels) would otherwise take MudBlazor's grey, not the house ink. */
color: var(--pa-ink);
}
.prv-enroll-root p[b-veaf5bvfu4] { margin: 0; }
.prv-enroll-lede[b-veaf5bvfu4] {
margin-top: 6px;
color: var(--pa-muted);
max-width: 60ch;
}
.prv-enroll-body[b-veaf5bvfu4] {
display: grid;
gap: 16px;
min-width: 0;
}
.prv-enroll-candidates[b-veaf5bvfu4] {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
max-height: 18rem;
overflow-y: auto;
}
/* A