@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* Sidebar rail. Colours come from the --rail-* tokens in app.css so the rail follows
the light/dark theme; the dark values are the design's. State lives on
(data-rail / data-nav-closed / data-drawer / data-logout) because the layout renders
statically; see wwwroot/js/sidebar.js. */
.admin-shell[b-68nkk0vw8l] {
display: grid;
grid-template-columns: 256px 1fr;
min-height: 100vh;
background: var(--paper);
color: var(--ink);
font-family: var(--font-ui);
/* The rail width is deliberately NOT transitioned. Animating a grid track relayouts
the whole page — every card, chart and table — on each of ~16 frames, which reads
as lag on a dense page. It snaps in one reflow instead; the chevron and the labels
still animate, and those are composited. */
}
html[data-rail="collapsed"] .admin-shell[b-68nkk0vw8l] {
grid-template-columns: 84px 1fr;
}
/* --- sidebar --- */
.admin-sidebar[b-68nkk0vw8l] {
display: flex;
flex-direction: column;
background: var(--rail-bg);
border-right: 1px solid var(--rail-border);
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
font-family: Inter, system-ui, sans-serif;
}
.admin-brand[b-68nkk0vw8l] {
display: flex;
align-items: center;
gap: 11px;
padding: 18px 16px 16px;
}
.brand-mark[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #8272f5, #5a49d6);
font: 700 13px/1 Inter, sans-serif;
color: #fff;
letter-spacing: 0.5px;
text-decoration: none;
flex: none;
}
.brand-text[b-68nkk0vw8l] {
display: flex;
flex-direction: column;
flex: 1;
white-space: nowrap;
overflow: hidden;
transition: opacity 0.16s;
}
.brand-name[b-68nkk0vw8l] {
font: 600 14px/1.2 Inter, sans-serif;
color: var(--rail-brand-ink);
}
.brand-tag[b-68nkk0vw8l] {
font: 400 11px/1.2 Inter, sans-serif;
color: var(--rail-brand-tag);
}
.rail-collapse[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: 8px;
background: var(--rail-btn-bg);
border: 1px solid var(--rail-btn-border);
color: var(--rail-btn-ink);
cursor: pointer;
flex: none;
transition: transform 0.26s, background 0.12s;
}
.rail-collapse:hover[b-68nkk0vw8l] {
background: var(--rail-btn-hover);
}
html[data-rail="collapsed"] .rail-collapse[b-68nkk0vw8l] {
transform: rotate(180deg);
}
.drawer-close[b-68nkk0vw8l] {
display: none;
}
.brand-divider[b-68nkk0vw8l] {
height: 1px;
background: var(--rail-divider);
margin: 0 16px 10px;
}
/* --- nav --- */
.admin-nav[b-68nkk0vw8l] {
flex: 1;
padding: 0 12px;
overflow-y: auto;
overflow-x: hidden;
}
.nav-group-toggle[b-68nkk0vw8l] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 8px;
margin-bottom: 2px;
background: none;
border: none;
cursor: pointer;
transition: opacity 0.16s;
}
.nav-group-label[b-68nkk0vw8l] {
margin: 0;
font: 600 10px/1 Inter, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rail-group-ink);
}
.nav-group-chevron[b-68nkk0vw8l] {
margin-left: auto;
color: var(--rail-group-ink);
transition: transform 0.2s;
}
.nav-group[b-68nkk0vw8l] {
margin-bottom: 8px;
}
html[data-nav-closed~="workflow"] .nav-group[data-group="workflow"][b-68nkk0vw8l],
html[data-nav-closed~="records"] .nav-group[data-group="records"][b-68nkk0vw8l],
html[data-nav-closed~="admin"] .nav-group[data-group="admin"][b-68nkk0vw8l] {
display: none;
}
html[data-nav-closed~="workflow"] .nav-group-toggle[data-group="workflow"] .nav-group-chevron[b-68nkk0vw8l],
html[data-nav-closed~="records"] .nav-group-toggle[data-group="records"] .nav-group-chevron[b-68nkk0vw8l],
html[data-nav-closed~="admin"] .nav-group-toggle[data-group="admin"] .nav-group-chevron[b-68nkk0vw8l] {
transform: rotate(-90deg);
}
.admin-nav[b-68nkk0vw8l] .admin-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
margin-bottom: 2px;
border-radius: 9px;
text-decoration: none;
color: var(--rail-item-ink);
font: 500 13.5px/1 Inter, sans-serif;
white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.admin-nav[b-68nkk0vw8l] .admin-nav-link:hover {
background: var(--rail-item-hover);
text-decoration: none;
}
.admin-nav[b-68nkk0vw8l] .admin-nav-link.active {
background: var(--rail-active-bg);
color: var(--rail-active-ink);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--rail-active-bar);
}
.nav-icon[b-68nkk0vw8l] {
flex: none;
}
.nav-label[b-68nkk0vw8l] {
white-space: nowrap;
transition: opacity 0.16s;
}
.nav-badge[b-68nkk0vw8l] {
margin-left: auto;
padding: 3px 7px;
border-radius: 20px;
background: var(--rail-badge-bg);
color: var(--rail-badge-ink);
font: 600 10.5px/1 Inter, sans-serif;
transition: opacity 0.16s;
}
.nav-count[b-68nkk0vw8l] {
margin-left: auto;
color: var(--rail-count-ink);
font: 500 11.5px/1 Inter, sans-serif;
transition: opacity 0.16s;
}
/* --- rail foot: closes the rail off below the nav --- */
.rail-foot[b-68nkk0vw8l] {
padding: 12px 12px 14px;
border-top: 1px solid var(--rail-divider);
}
.rail-stat[b-68nkk0vw8l] {
display: flex;
align-items: baseline;
gap: 6px;
padding: 0 12px 10px;
}
.rail-stat-value[b-68nkk0vw8l] {
font: 600 17px/1 Inter, sans-serif;
color: var(--rail-brand-ink);
}
.rail-stat-label[b-68nkk0vw8l] {
font: 500 11.5px/1.3 Inter, sans-serif;
color: var(--rail-item-ink);
}
.rail-build[b-68nkk0vw8l] {
display: flex;
align-items: center;
gap: 7px;
padding: 0 12px;
font: 500 10.5px/1 "IBM Plex Mono", monospace;
letter-spacing: 0.04em;
color: var(--rail-logout-ink);
}
.rail-env[b-68nkk0vw8l] {
padding: 3px 6px;
border-radius: 5px;
background: var(--rail-card-bg);
color: var(--rail-card-ink);
text-transform: uppercase;
}
/* Collapsed to icons: the words have nowhere to go, so only the number stays. */
html[data-rail="collapsed"] .rail-stat[b-68nkk0vw8l] {
justify-content: center;
padding: 0 0 10px;
}
html[data-rail="collapsed"] .rail-stat-label[b-68nkk0vw8l],
html[data-rail="collapsed"] .rail-build[b-68nkk0vw8l] {
display: none;
}
/* --- collapsed rail: everything but the icons fades out --- */
html[data-rail="collapsed"] .brand-text[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-group-toggle[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-label[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-badge[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-count[b-68nkk0vw8l] {
opacity: 0;
pointer-events: none;
}
/* Sections always show their items while collapsed — there is no header to reopen them. */
html[data-rail="collapsed"] .nav-group[data-group][b-68nkk0vw8l] {
display: block;
}
/* These sit on the content column now, not the dark rail, so they use the page
tokens (--ink / --dim / --surface-2) rather than the --rail-* ones. */
/* Round, matching the landing header's chip — same person, same shape. */
.user-avatar[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #8272f5, #5a49d6);
font: 600 11px/1 Inter, sans-serif;
color: #fff;
flex: none;
}
/* Collapsed to the avatar by default and revealed on hover, so a long address
costs nothing at rest. Clipped rather than removed: the text stays in the
accessibility tree and is still read out. max-width rather than width because
the content sizes itself; it animates well enough on a string this short. */
.admin-user-name[b-68nkk0vw8l] {
min-width: 0;
max-width: 0;
margin: 0;
opacity: 0;
font: 500 12.5px/1.3 Inter, sans-serif;
color: var(--ink);
overflow: hidden;
white-space: nowrap;
transition: max-width 0.22s ease, margin 0.22s ease, opacity 0.15s ease;
}
.admin-user-link:hover .admin-user-name[b-68nkk0vw8l],
.admin-user-link:focus-visible .admin-user-name[b-68nkk0vw8l],
html[data-usermenu] .admin-user-name[b-68nkk0vw8l] {
max-width: 32ch;
margin: 0 7px 0 9px;
opacity: 1;
}
.admin-user-chevron[b-68nkk0vw8l] {
flex: none;
color: var(--dim);
transition: transform 0.16s;
}
html[data-usermenu] .admin-user-chevron[b-68nkk0vw8l] {
transform: rotate(180deg);
}
/* --- layout modals (log out, change password), centred over the page --- */
.logout-confirm[b-68nkk0vw8l] {
display: none;
position: fixed;
inset: 0;
z-index: 900;
padding: 20px;
align-items: center;
justify-content: center;
background: var(--rail-scrim);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
font-family: Inter, system-ui, sans-serif;
}
html[data-modal="logout"] #logout-modal[b-68nkk0vw8l],
html[data-modal="password"] #password-modal[b-68nkk0vw8l] {
display: flex;
}
.logout-card[b-68nkk0vw8l] {
width: 100%;
max-width: 300px;
padding: 20px;
border-radius: 16px;
background: var(--rail-modal-bg);
border: 1px solid var(--rail-modal-border);
box-shadow: var(--shadow-lg);
}
.logout-icon[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 14px;
border-radius: 11px;
background: rgba(240, 90, 90, 0.14);
color: #f05a5a;
}
.logout-title[b-68nkk0vw8l] {
font: 600 15px/1.3 Inter, sans-serif;
color: var(--rail-modal-title);
margin-bottom: 5px;
}
.logout-body[b-68nkk0vw8l] {
font: 400 12.5px/1.45 Inter, sans-serif;
color: var(--rail-modal-body);
margin-bottom: 18px;
}
.logout-actions[b-68nkk0vw8l] {
display: flex;
gap: 9px;
}
.logout-cancel[b-68nkk0vw8l] {
flex: 1;
padding: 10px;
border-radius: 9px;
background: var(--rail-cancel-bg);
border: 1px solid var(--rail-cancel-border);
color: var(--rail-cancel-ink);
font: 600 12.5px/1 Inter, sans-serif;
cursor: pointer;
}
.logout-confirm-btn[b-68nkk0vw8l] {
flex: 1;
padding: 10px;
border-radius: 9px;
background: #e0483f;
border: none;
color: #fff;
font: 600 12.5px/1 Inter, sans-serif;
cursor: pointer;
}
/* --- change password: the logout card with fields in it --- */
.pw-card[b-68nkk0vw8l] {
max-width: 340px;
}
.pw-icon[b-68nkk0vw8l] {
background: var(--rail-modal-icon-bg, rgba(109, 92, 245, 0.14));
color: #6d5cf5;
}
.pw-field[b-68nkk0vw8l] {
display: block;
width: 100%;
height: 40px;
margin-bottom: 10px;
padding: 0 12px;
border-radius: 9px;
border: 1px solid var(--rail-cancel-border);
background: var(--rail-cancel-bg);
color: var(--rail-modal-title);
font: 400 13px Inter, sans-serif;
}
.pw-field:focus[b-68nkk0vw8l] {
outline: none;
border-color: #6d5cf5;
box-shadow: 0 0 0 3px rgba(109, 92, 245, 0.16);
}
.pw-submit[b-68nkk0vw8l] {
flex: 1;
padding: 10px;
border-radius: 9px;
background: #6d5cf5;
border: none;
color: #fff;
font: 600 12.5px/1 Inter, sans-serif;
cursor: pointer;
}
/* Outcome of the password post, which arrives as a redirect with a query flag. */
.pw-banner[b-68nkk0vw8l] {
margin: 0 0 14px;
padding: 11px 14px;
border-radius: 10px;
font: 400 12.5px/1.45 Inter, sans-serif;
border: 1px solid var(--rail-modal-border);
background: var(--rail-modal-bg);
color: var(--rail-modal-body);
}
.pw-banner.bad[b-68nkk0vw8l] {
border-color: rgba(224, 72, 63, 0.4);
color: #e0483f;
}
/* No gap: a flex gap would still be paid on both sides of the collapsed name,
leaving a hole between the avatar and the chevron. The name carries its own
margin instead, and animates it away with its width. */
.admin-user-link[b-68nkk0vw8l] {
display: flex;
align-items: center;
min-width: 0;
padding: 4px 8px 4px 4px;
margin-right: 2px;
border: 1px solid transparent;
border-radius: 999px;
background: none;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
text-decoration: none;
transition: background 0.12s, border-color 0.12s;
}
.admin-user-link:hover[b-68nkk0vw8l] {
background: var(--surface-2);
border-color: var(--border);
}
/* --- mobile chrome, off until the drawer breakpoint --- */
.admin-topbar[b-68nkk0vw8l],
.admin-scrim[b-68nkk0vw8l] {
display: none;
}
/* --- content --- */
.admin-main[b-68nkk0vw8l] {
padding: 2rem 2.75rem 3rem;
width: 100%;
min-width: 0;
}
/* --- account bar, top right of the content column --- */
.admin-userbar[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: flex-end;
margin: -0.5rem 0 1.25rem;
}
/* Icon-only up here — the label it carried in the rail would just be noise
beside the account chip. */
.theme-toggle[b-68nkk0vw8l] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-right: 4px;
padding: 0;
border: none;
border-radius: 8px;
background: none;
color: var(--dim);
cursor: pointer;
flex: none;
transition: background 0.12s, color 0.12s;
}
.theme-toggle:hover[b-68nkk0vw8l] {
color: var(--ink);
background: var(--surface-2);
}
/* The positioning context for the dropdown. */
.admin-account[b-68nkk0vw8l] {
position: relative;
}
/* --- account dropdown --- */
.admin-usermenu[b-68nkk0vw8l],
.admin-menu-backdrop[b-68nkk0vw8l] {
display: none;
}
html[data-usermenu] .admin-usermenu[b-68nkk0vw8l] {
display: block;
}
/* Sits under the menu but over everything else, so a click anywhere on the page
dismisses it. Transparent on purpose — this is a menu, not a modal. */
html[data-usermenu] .admin-menu-backdrop[b-68nkk0vw8l] {
display: block;
position: fixed;
inset: 0;
z-index: 40;
}
.admin-usermenu[b-68nkk0vw8l] {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 41;
min-width: 220px;
padding: 5px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 11px;
box-shadow: var(--shadow-lg);
animation: userMenuIn-b-68nkk0vw8l 0.13s ease both;
}
@keyframes userMenuIn-b-68nkk0vw8l {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
.admin-usermenu-head[b-68nkk0vw8l] {
padding: 7px 10px 9px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border);
font: 500 11.5px/1.3 Inter, sans-serif;
color: var(--dim);
overflow-wrap: anywhere;
}
.admin-usermenu-item[b-68nkk0vw8l] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 7px;
background: none;
color: var(--ink);
font: 500 13px/1 Inter, sans-serif;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.12s;
}
.admin-usermenu-item svg[b-68nkk0vw8l] {
flex: none;
color: var(--dim);
}
.admin-usermenu-item:hover[b-68nkk0vw8l] {
background: var(--surface-2);
}
.admin-usermenu-item.danger[b-68nkk0vw8l],
.admin-usermenu-item.danger svg[b-68nkk0vw8l] {
color: var(--danger);
}
.admin-usermenu-item.danger:hover[b-68nkk0vw8l] {
background: var(--danger-soft);
}
.admin-usermenu-sep[b-68nkk0vw8l] {
height: 1px;
margin: 4px 6px;
background: var(--border);
}
#blazor-error-ui[b-68nkk0vw8l] {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--card);
border-top: 2px solid var(--bad);
color: var(--ink);
font-family: var(--font-ui);
font-size: 0.9rem;
padding: 0.8rem 2.5rem 0.8rem 1.25rem;
box-shadow: var(--shadow-lg);
}
#blazor-error-ui .reload[b-68nkk0vw8l] {
color: var(--accent);
}
#blazor-error-ui .dismiss[b-68nkk0vw8l] {
position: absolute;
right: 1rem;
top: 0.8rem;
cursor: pointer;
}
/* --- mobile: rail becomes an overlay drawer behind a hamburger --- */
@media (max-width: 900px) {
.admin-shell[b-68nkk0vw8l],
html[data-rail="collapsed"] .admin-shell[b-68nkk0vw8l] {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
align-content: start;
transition: none;
}
.admin-topbar[b-68nkk0vw8l] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--rail-topbar-bg);
border-bottom: 1px solid var(--rail-divider);
position: sticky;
top: 0;
z-index: 30;
}
.topbar-burger[b-68nkk0vw8l] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 38px;
height: 38px;
padding: 0;
border-radius: 10px;
background: var(--rail-btn-bg);
border: 1px solid var(--rail-btn-border);
cursor: pointer;
flex: none;
}
.topbar-burger span[b-68nkk0vw8l] {
width: 16px;
height: 2px;
border-radius: 2px;
background: var(--rail-burger-bar);
}
.topbar-title[b-68nkk0vw8l] {
font: 600 15px/1.1 Inter, sans-serif;
color: var(--rail-brand-ink);
}
.admin-scrim[b-68nkk0vw8l] {
display: block;
position: fixed;
inset: 0;
z-index: 40;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s;
}
html[data-drawer="open"] .admin-scrim[b-68nkk0vw8l] {
opacity: 1;
pointer-events: auto;
}
.admin-sidebar[b-68nkk0vw8l] {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 50;
width: 250px;
height: auto;
background: var(--rail-drawer-bg);
border-right: 1px solid var(--rail-border);
box-shadow: 14px 0 40px rgba(0, 0, 0, 0.4);
transform: translateX(-102%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-drawer="open"] .admin-sidebar[b-68nkk0vw8l] {
transform: translateX(0);
}
/* The rail toggle is desktop-only; the drawer is always full width. */
html[data-rail="collapsed"] .brand-text[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-group-toggle[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-label[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-badge[b-68nkk0vw8l],
html[data-rail="collapsed"] .nav-count[b-68nkk0vw8l] {
opacity: 1;
pointer-events: auto;
}
/* Even expanded, the name must not crowd out the icons on a narrow screen. */
.admin-user-link:hover .admin-user-name[b-68nkk0vw8l],
.admin-user-link:focus-visible .admin-user-name[b-68nkk0vw8l],
html[data-usermenu] .admin-user-name[b-68nkk0vw8l] {
max-width: 12ch;
}
.rail-collapse[b-68nkk0vw8l],
.brand-tag[b-68nkk0vw8l],
.brand-divider[b-68nkk0vw8l] {
display: none;
}
.brand-mark[b-68nkk0vw8l] {
width: 34px;
height: 34px;
border-radius: 10px;
font-size: 12px;
}
.brand-name[b-68nkk0vw8l] {
font: 600 14px/1.1 Inter, sans-serif;
}
.drawer-close[b-68nkk0vw8l] {
display: block;
margin-left: auto;
padding: 0;
background: none;
border: none;
color: var(--rail-brand-tag);
font: 400 20px/1 Inter, sans-serif;
cursor: pointer;
}
.admin-nav[b-68nkk0vw8l] {
padding: 6px 12px;
}
.admin-nav[b-68nkk0vw8l] .admin-nav-link {
padding: 11px 13px;
margin-bottom: 3px;
border-radius: 11px;
font: 500 14px/1 Inter, sans-serif;
}
.admin-nav[b-68nkk0vw8l] .admin-nav-link.active {
background: var(--rail-pill);
color: #fff;
font-weight: 600;
box-shadow: none;
}
.admin-main[b-68nkk0vw8l] {
padding: 1.4rem 1rem 2rem;
}
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Login chrome — centred "vault" (design 5a).
Colours come from the --lv-* tokens in app.css. */
.auth-shell[b-wjggac6l0o] {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background:
radial-gradient(120% 80% at 50% 120%, var(--lv-vignette), transparent 55%),
var(--lv-bg);
color: var(--lv-fg);
font-family: "Schibsted Grotesk", var(--font-ui);
}
/* layered glows */
.auth-shell[b-wjggac6l0o]::before,
.auth-shell[b-wjggac6l0o]::after {
content: "";
position: absolute;
pointer-events: none;
}
.auth-shell[b-wjggac6l0o]::before {
top: -200px;
left: 50%;
width: 820px;
height: 520px;
transform: translateX(-50%);
background: radial-gradient(circle, var(--lv-glow-1), transparent 60%);
animation: vault-drift-b-wjggac6l0o 16s ease-in-out infinite;
}
.auth-shell[b-wjggac6l0o]::after {
top: 60px;
left: 20%;
width: 360px;
height: 360px;
background: radial-gradient(circle, var(--lv-glow-2), transparent 62%);
}
@keyframes vault-drift-b-wjggac6l0o {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translate(calc(-50% + 30px), -24px) scale(1.08); }
}
.auth-topbar[b-wjggac6l0o] {
position: relative;
width: 100%;
padding: 26px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-wordmark[b-wjggac6l0o] {
font: 800 17px "Schibsted Grotesk", var(--font-ui);
color: var(--lv-fg);
letter-spacing: -0.01em;
}
.auth-actions[b-wjggac6l0o] {
display: flex;
align-items: center;
gap: 16px;
}
.auth-note[b-wjggac6l0o] {
font: 500 12.5px "Schibsted Grotesk", var(--font-ui);
color: var(--lv-fg-50);
}
.theme-btn[b-wjggac6l0o] {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--lv-line-12);
background: transparent;
color: var(--lv-fg-60);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-btn:hover[b-wjggac6l0o] {
color: var(--lv-fg);
border-color: var(--lv-line-hover);
}
.theme-btn svg[b-wjggac6l0o] {
width: 16px;
height: 16px;
}
.auth-body[b-wjggac6l0o] {
position: relative;
flex: 1;
display: flex;
align-items: center;
padding: 0 20px;
}
.auth-foot[b-wjggac6l0o] {
position: relative;
padding: 0 20px 28px;
display: flex;
align-items: center;
gap: 8px;
font: 400 11.5px "JetBrains Mono", monospace;
color: var(--lv-fg-32);
text-align: center;
}
.auth-foot-dot[b-wjggac6l0o] {
color: var(--lv-teal);
}
.auth-foot-sep[b-wjggac6l0o],
.auth-foot-link[b-wjggac6l0o] {
color: var(--lv-fg-32);
}
.auth-foot-link[b-wjggac6l0o] {
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-foot-link:hover[b-wjggac6l0o] {
color: var(--lv-fg-60);
}
@media (prefers-reduced-motion: reduce) {
.auth-shell[b-wjggac6l0o]::before { animation: none; }
}
@media (max-width: 520px) {
.auth-topbar[b-wjggac6l0o] {
padding: 20px;
}
}
/* /Components/Layout/ClientPortalLayout.razor.rz.scp.css */
#blazor-error-ui[b-t7hw9ftdix] {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fdf3d7;
border-top: 1px solid #b5622e;
color: #17302a;
font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
font-size: 0.9rem;
padding: 0.8rem 2.5rem 0.8rem 1.25rem;
}
#blazor-error-ui .reload[b-t7hw9ftdix] {
color: #b5622e;
}
#blazor-error-ui .dismiss[b-t7hw9ftdix] {
position: absolute;
right: 1rem;
top: 0.8rem;
cursor: pointer;
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Landing chrome — "vault" shell (design 7a).
Colours come from the --lv-* tokens in app.css, which resolve
dark (the design) or light from the theme toggle. */
.landing-shell[b-ddiacmj9o7] {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--lv-bg);
color: var(--lv-fg);
font-family: "Schibsted Grotesk", var(--font-ui);
}
/* ambient glows */
.landing-shell[b-ddiacmj9o7]::before,
.landing-shell[b-ddiacmj9o7]::after {
content: "";
position: absolute;
pointer-events: none;
}
.landing-shell[b-ddiacmj9o7]::before {
top: -220px;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 640px;
background: radial-gradient(circle, var(--lv-glow-1), transparent 58%);
}
.landing-shell[b-ddiacmj9o7]::after {
top: 520px;
left: -140px;
width: 460px;
height: 460px;
background: radial-gradient(circle, var(--lv-glow-2), transparent 62%);
}
.landing-header[b-ddiacmj9o7],
.landing-main[b-ddiacmj9o7],
.landing-footer[b-ddiacmj9o7] {
position: relative;
width: 100%;
max-width: 1560px;
margin: 0 auto;
padding-left: 56px;
padding-right: 56px;
}
.landing-header[b-ddiacmj9o7] {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 26px;
padding-bottom: 26px;
}
.brand[b-ddiacmj9o7] {
display: flex;
align-items: center;
gap: 10px;
}
.brand-mark[b-ddiacmj9o7] {
width: 26px;
height: 26px;
border-radius: 8px;
display: block;
}
.brand-name[b-ddiacmj9o7] {
font: 800 16px "Schibsted Grotesk", var(--font-ui);
color: var(--lv-fg);
letter-spacing: -0.01em;
}
.header-actions[b-ddiacmj9o7] {
display: flex;
align-items: center;
gap: 16px;
}
.theme-btn[b-ddiacmj9o7] {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--lv-line-12);
background: transparent;
color: var(--lv-fg-60);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-btn:hover[b-ddiacmj9o7] {
color: var(--lv-fg);
border-color: var(--lv-line-hover);
}
.theme-btn svg[b-ddiacmj9o7] {
width: 16px;
height: 16px;
}
.login-link[b-ddiacmj9o7] {
height: 36px;
padding: 0 18px;
border-radius: 8px;
border: 1px solid var(--lv-line-strong);
display: inline-flex;
align-items: center;
font: 600 11px "JetBrains Mono", monospace;
letter-spacing: 0.12em;
color: var(--lv-fg);
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.login-link:hover[b-ddiacmj9o7] {
color: var(--lv-fg);
border-color: var(--lv-line-hover);
background: var(--lv-surface-3);
}
/* No gap: it would still be paid on both sides of the collapsed name, leaving a
hole beside the avatar. The name carries its own margin and animates it away. */
.profile-chip[b-ddiacmj9o7] {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 4px;
border-radius: 999px;
border: 1px solid var(--lv-line-strong);
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.profile-chip:hover[b-ddiacmj9o7] {
border-color: var(--lv-line-hover);
background: var(--lv-surface-3);
}
.avatar[b-ddiacmj9o7] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(150deg, #7b6bff, #4b3fc7);
color: #fff;
font: 600 11px "Schibsted Grotesk", var(--font-ui);
}
/* Collapsed to the avatar at rest, revealed on hover or keyboard focus — the
same behaviour as the admin bar's account chip. Clipped rather than removed,
so the address stays in the accessibility tree. */
.profile-name[b-ddiacmj9o7] {
font: 400 11px "JetBrains Mono", monospace;
color: var(--lv-fg-60);
max-width: 0;
margin: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.22s ease, margin 0.22s ease, opacity 0.15s ease;
}
.profile-chip:hover .profile-name[b-ddiacmj9o7],
.profile-chip:focus-visible .profile-name[b-ddiacmj9o7] {
max-width: 14rem;
margin: 0 10px 0 0.6rem;
opacity: 1;
}
.landing-main[b-ddiacmj9o7] {
flex: 1;
}
.landing-footer[b-ddiacmj9o7] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 36px;
padding-top: 34px;
padding-bottom: 40px;
border-top: 1px solid var(--lv-footline);
font: 400 12px "Schibsted Grotesk", var(--font-ui);
color: var(--lv-fg-40);
}
.footer-links[b-ddiacmj9o7] {
display: flex;
align-items: center;
gap: 18px;
}
.landing-footer a[b-ddiacmj9o7] {
font: 400 12px "JetBrains Mono", monospace;
color: var(--lv-violet-eyebrow);
text-decoration: none;
}
.landing-footer a:hover[b-ddiacmj9o7] {
text-decoration: underline;
}
@media (max-width: 720px) {
.landing-header[b-ddiacmj9o7],
.landing-main[b-ddiacmj9o7],
.landing-footer[b-ddiacmj9o7] {
padding-left: 20px;
padding-right: 20px;
}
/* No hover on touch, so the chip stays an avatar on small screens. */
.profile-chip:hover .profile-name[b-ddiacmj9o7],
.profile-chip:focus-visible .profile-name[b-ddiacmj9o7] {
max-width: 0;
margin: 0;
opacity: 0;
}
.landing-footer[b-ddiacmj9o7] {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
.portal-shell[b-uep68zxsm0] {
min-height: 100vh;
display: flex;
flex-direction: column;
background:
var(--paper);
color: var(--ink);
font-family: var(--font-ui);
}
.portal-header[b-uep68zxsm0] {
display: flex;
align-items: center;
gap: 1.25rem;
max-width: 1080px;
width: 100%;
margin: 0 auto;
padding: 2.25rem 1.5rem 1.5rem;
}
.wordmark[b-uep68zxsm0] {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: 0.02em;
color: var(--ink);
}
.header-rule[b-uep68zxsm0] {
flex: 1;
height: 1px;
background: var(--line);
}
.header-tag[b-uep68zxsm0] {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.portal-main[b-uep68zxsm0] {
flex: 1;
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
.portal-footer[b-uep68zxsm0] {
display: flex;
justify-content: space-between;
gap: 1rem;
max-width: 1080px;
width: 100%;
margin: 0 auto;
padding: 1.25rem 1.5rem 2rem;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.portal-footer a[b-uep68zxsm0] {
color: var(--copper);
text-decoration: none;
}
.portal-footer a:hover[b-uep68zxsm0] {
text-decoration: underline;
}
#blazor-error-ui[b-uep68zxsm0] {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fdf3d7;
border-top: 1px solid var(--copper, #b5622e);
color: var(--ink, #17302a);
font-family: var(--font-ui);
font-size: 0.9rem;
padding: 0.8rem 2.5rem 0.8rem 1.25rem;
}
#blazor-error-ui .reload[b-uep68zxsm0] {
color: var(--copper, #b5622e);
}
#blazor-error-ui .dismiss[b-uep68zxsm0] {
position: absolute;
right: 1rem;
top: 0.8rem;
cursor: pointer;
}
@media (max-width: 768px) {
.portal-header[b-uep68zxsm0] {
padding: 1.5rem 1rem 1rem;
}
.portal-main[b-uep68zxsm0] {
padding: 0 1rem 3rem;
}
.portal-footer[b-uep68zxsm0] {
flex-direction: column;
gap: 0.35rem;
padding: 1rem;
}
}
.theme-btn[b-uep68zxsm0] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink-soft);
border-radius: 8px;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease;
}
.theme-btn:hover[b-uep68zxsm0] {
color: var(--ink);
border-color: var(--accent);
}
.theme-btn svg[b-uep68zxsm0] {
width: 16px;
height: 16px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kbm7j25jbd],
.components-reconnect-repeated-attempt-visible[b-kbm7j25jbd],
.components-reconnect-failed-visible[b-kbm7j25jbd],
.components-pause-visible[b-kbm7j25jbd],
.components-resume-failed-visible[b-kbm7j25jbd],
.components-rejoining-animation[b-kbm7j25jbd] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-retrying[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-failed[b-kbm7j25jbd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kbm7j25jbd] {
display: block;
}
#components-reconnect-modal[b-kbm7j25jbd] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-kbm7j25jbd 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-kbm7j25jbd 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kbm7j25jbd 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-kbm7j25jbd]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-kbm7j25jbd 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-kbm7j25jbd {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-kbm7j25jbd {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-kbm7j25jbd {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-kbm7j25jbd] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-kbm7j25jbd] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-kbm7j25jbd] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 8px;
}
#components-reconnect-modal button:hover[b-kbm7j25jbd] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-kbm7j25jbd] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-kbm7j25jbd] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-kbm7j25jbd] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-kbm7j25jbd 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-kbm7j25jbd] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-kbm7j25jbd {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Pages/Admin/Clients/ClientContactsPanel.razor.rz.scp.css */
.panel-hint[b-7fmmk580d2] {
margin: 0 0 0.6rem;
font-size: 0.82rem;
color: var(--ink-soft);
}
.contact-row[b-7fmmk580d2] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--line);
}
.contact-row:last-of-type[b-7fmmk580d2] {
border-bottom: none;
}
.contact-info[b-7fmmk580d2] {
min-width: 0;
}
.contact-name[b-7fmmk580d2] {
margin: 0 0 0.15rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.primary-badge[b-7fmmk580d2] {
margin-left: 0.4rem;
font-size: 0.66rem;
font-weight: 600;
color: var(--ink-soft);
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.05rem 0.35rem;
vertical-align: middle;
}
.contact-line[b-7fmmk580d2] {
display: block;
font-size: 0.8rem;
color: var(--accent);
text-decoration: none;
overflow-wrap: anywhere;
}
.contact-line:hover[b-7fmmk580d2] {
text-decoration: underline;
}
.contact-actions[b-7fmmk580d2] {
display: flex;
gap: 0.3rem;
flex-shrink: 0;
}
.mini-action[b-7fmmk580d2] {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 600;
color: var(--ink-soft);
background: none;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0.25rem 0.55rem;
cursor: pointer;
}
.mini-action:hover[b-7fmmk580d2] {
background: var(--surface-2);
}
.mini-action.danger[b-7fmmk580d2] {
color: var(--bad);
}
.mini-action:disabled[b-7fmmk580d2] {
opacity: 0.5;
cursor: not-allowed;
}
.contact-form[b-7fmmk580d2] {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0.6rem;
}
/* ::deep — InputText renders the , so it carries no scope attribute. */
[b-7fmmk580d2] .mini-input {
font-family: var(--font-ui);
font-size: 0.85rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface-1, var(--card));
color: var(--ink);
width: 100%;
box-sizing: border-box;
}
[b-7fmmk580d2] .validation-message {
margin: -0.15rem 0 0;
font-size: 0.78rem;
}
.mini-check[b-7fmmk580d2] {
font-size: 0.8rem;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 0.4rem;
}
.mini-form-actions[b-7fmmk580d2] {
display: flex;
gap: 0.4rem;
}
.panel-add[b-7fmmk580d2] {
margin-top: 0.5rem;
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.panel-add:hover[b-7fmmk580d2] {
text-decoration: underline;
}
/* /Components/Pages/Admin/Clients/ClientModals.razor.rz.scp.css */
/* Clients module dialog — a direct port of the redesign's modal. */
@keyframes clientFadeIn-b-6gygcfup6m {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-scrim[b-6gygcfup6m] {
position: fixed;
inset: 0;
z-index: 80;
background: var(--c-scrim);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: clientFadeIn-b-6gygcfup6m 0.16s ease both;
}
.modal-box[b-6gygcfup6m] {
width: 100%;
max-width: 440px;
background: var(--c-modal);
border: 1px solid var(--c-line-menu);
border-radius: 15px;
padding: 22px 24px 20px;
box-shadow: var(--c-shadow-modal);
font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}
.modal-title[b-6gygcfup6m] {
font: 600 17px "Outfit", sans-serif;
letter-spacing: -0.015em;
color: var(--c-g0);
}
.modal-body[b-6gygcfup6m] {
font-size: 13px;
color: var(--c-g8);
line-height: 1.55;
margin-top: 9px;
}
.modal-select[b-6gygcfup6m] {
margin-top: 15px;
}
.modal-select[b-6gygcfup6m] .dd-wrap .dd-trigger {
width: 100%;
background: var(--c-field);
border: 1px solid var(--c-line-2);
border-radius: 9px;
height: 40px;
padding: 0 11px;
color: var(--c-g-input);
font: 400 13px "IBM Plex Sans", sans-serif;
}
.modal-select[b-6gygcfup6m] .dd-wrap .dd-menu {
background: var(--c-menu);
border: 1px solid var(--c-line-menu);
border-radius: 10px;
padding: 5px;
box-shadow: var(--c-shadow-menu);
}
.modal-select[b-6gygcfup6m] .dd-wrap .dd-option {
color: var(--c-g2);
font: 400 12.5px "IBM Plex Sans", sans-serif;
padding: 8px 10px;
border-radius: 7px;
}
.modal-select[b-6gygcfup6m] .dd-wrap .dd-option:hover {
background: var(--c-menu-hover);
}
.modal-select[b-6gygcfup6m] .dd-wrap .dd-option.selected {
background: var(--c-chip-on);
color: var(--c-chip-ink);
}
.modal-actions[b-6gygcfup6m] {
display: flex;
gap: 9px;
justify-content: flex-end;
margin-top: 20px;
}
.modal-cancel[b-6gygcfup6m] {
border: 1px solid var(--c-line-14);
background: var(--c-modal-cancel);
color: var(--c-g2);
border-radius: 9px;
height: 36px;
padding: 0 15px;
font: 500 12.5px "IBM Plex Sans", sans-serif;
cursor: pointer;
}
.modal-confirm[b-6gygcfup6m] {
border: none;
border-radius: 9px;
height: 36px;
padding: 0 16px;
color: #fff;
font: 600 12.5px "IBM Plex Sans", sans-serif;
cursor: pointer;
}
.modal-confirm.danger[b-6gygcfup6m] {
background: var(--c-confirm);
}
.modal-confirm.go[b-6gygcfup6m] {
background: var(--c-accent);
}
.modal-cancel:disabled[b-6gygcfup6m],
.modal-confirm:disabled[b-6gygcfup6m] {
opacity: 0.6;
cursor: default;
}
/* /Components/Pages/Admin/Clients/ClientRelationshipsPanel.razor.rz.scp.css */
.panel-hint[b-3k336g6qqf] {
margin: 0 0 0.6rem;
font-size: 0.82rem;
color: var(--ink-soft);
}
.rel-row[b-3k336g6qqf] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--line);
}
.rel-row:last-of-type[b-3k336g6qqf] {
border-bottom: none;
}
.rel-info[b-3k336g6qqf] {
min-width: 0;
}
.rel-label[b-3k336g6qqf] {
margin: 0;
font-size: 0.85rem;
color: var(--ink);
}
.rel-label strong[b-3k336g6qqf] {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.1rem;
}
.rel-client[b-3k336g6qqf] {
color: var(--accent);
text-decoration: none;
font-weight: 600;
overflow-wrap: anywhere;
}
.rel-client:hover[b-3k336g6qqf] {
text-decoration: underline;
}
.rel-detail[b-3k336g6qqf] {
margin: 0.15rem 0 0;
font-size: 0.75rem;
color: var(--ink-soft);
}
.rel-actions[b-3k336g6qqf] {
display: flex;
gap: 0.3rem;
flex-shrink: 0;
}
.mini-action[b-3k336g6qqf] {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 600;
color: var(--ink-soft);
background: none;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0.25rem 0.55rem;
cursor: pointer;
}
.mini-action:hover[b-3k336g6qqf] {
background: var(--surface-2);
}
.mini-action.danger[b-3k336g6qqf] {
color: var(--bad);
}
.mini-action:disabled[b-3k336g6qqf] {
opacity: 0.5;
cursor: not-allowed;
}
.rel-form[b-3k336g6qqf] {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0.6rem;
}
.mini-input[b-3k336g6qqf] {
font-family: var(--font-ui);
font-size: 0.85rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface-1, var(--card));
color: var(--ink);
width: 100%;
box-sizing: border-box;
}
.mini-label[b-3k336g6qqf] {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
}
.rel-selected[b-3k336g6qqf] {
margin: 0;
font-size: 0.85rem;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.5rem;
}
.rel-candidates[b-3k336g6qqf] {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.rel-candidates li + li[b-3k336g6qqf] {
border-top: 1px solid var(--line);
}
.rel-candidate[b-3k336g6qqf] {
display: block;
width: 100%;
text-align: left;
font-family: var(--font-ui);
font-size: 0.85rem;
color: var(--ink);
background: none;
border: none;
padding: 0.45rem 0.6rem;
cursor: pointer;
}
.rel-candidate:hover[b-3k336g6qqf] {
background: var(--surface-2);
}
.rel-dates[b-3k336g6qqf] {
display: flex;
gap: 0.5rem;
}
.rel-dates .mini-label[b-3k336g6qqf] {
flex: 1;
}
.mini-form-actions[b-3k336g6qqf] {
display: flex;
gap: 0.4rem;
}
.panel-add[b-3k336g6qqf] {
margin-top: 0.5rem;
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.panel-add:hover[b-3k336g6qqf] {
text-decoration: underline;
}
/* /Components/Pages/Admin/Clients/ClientsImportModal.razor.rz.scp.css */
.import-backdrop[b-g52e6tu8w8] {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(15, 26, 22, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.import-box[b-g52e6tu8w8] {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.3));
width: min(640px, 100%);
max-height: 88vh;
overflow-y: auto;
padding: 1.75rem;
display: flex;
flex-direction: column;
transition: width 0.18s ease;
}
/* The design's box is a fixed 640px, but the preview table needs more room
once a file's been picked — widen only then. */
.import-box.import-box-wide[b-g52e6tu8w8] {
width: min(900px, 100%);
}
/* --- upload steps --- */
.import-steps[b-g52e6tu8w8] {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin: 0.4rem 0 1.2rem;
}
.import-step[b-g52e6tu8w8] {
display: flex;
gap: 0.8rem;
align-items: flex-start;
}
.step-num[b-g52e6tu8w8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--accent);
color: var(--on-dark);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.import-step:not(:first-child) .step-num[b-g52e6tu8w8] {
background: var(--surface-2);
color: var(--ink-soft);
}
.step-title[b-g52e6tu8w8] {
margin: 0 0 0.15rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--ink);
}
.step-text[b-g52e6tu8w8] {
margin: 0;
font-size: 0.83rem;
color: var(--ink-soft);
}
.step-text code[b-g52e6tu8w8] {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--ink);
}
.sample-link[b-g52e6tu8w8] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.sample-link:hover[b-g52e6tu8w8] {
text-decoration: underline;
}
.sample-link :global(svg)[b-g52e6tu8w8] {
width: 1rem;
height: 1rem;
}
/* --- dropzone (drag & drop or click; the invisible input covers the zone,
so native file drops land on it — no JS needed) --- */
.dropzone[b-g52e6tu8w8] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 14px;
background: var(--accent-soft);
padding: 2.1rem 1rem;
text-align: center;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.dropzone:hover[b-g52e6tu8w8],
.dropzone:focus-within[b-g52e6tu8w8] {
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.dropzone[b-g52e6tu8w8] input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.dz-icon[b-g52e6tu8w8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 12px;
background: var(--card);
color: var(--accent);
box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 40%, transparent);
margin-bottom: 0.25rem;
}
.dz-title[b-g52e6tu8w8] {
font-weight: 700;
font-size: 0.9rem;
color: var(--accent-hover);
}
.dz-hint[b-g52e6tu8w8] {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.import-head[b-g52e6tu8w8] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.4rem;
}
.import-head-title[b-g52e6tu8w8] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.import-icon[b-g52e6tu8w8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
border-radius: 11px;
background: var(--accent-soft);
color: var(--accent);
}
.import-title[b-g52e6tu8w8] {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.import-close[b-g52e6tu8w8] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex-shrink: 0;
border-radius: 9px;
border: none;
background: var(--surface-2);
color: var(--ink-soft);
cursor: pointer;
}
.import-close:hover[b-g52e6tu8w8] {
color: var(--ink);
}
.import-help[b-g52e6tu8w8] {
font-size: 0.85rem;
color: var(--ink-soft);
margin: 0 0 1rem;
}
.import-help code[b-g52e6tu8w8] {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--ink);
}
.parse-error[b-g52e6tu8w8] {
color: var(--bad);
margin-top: 0.8rem;
}
.preview-head[b-g52e6tu8w8] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 1.1rem 0 0.6rem;
}
.preview-summary[b-g52e6tu8w8] {
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
}
.import-button[b-g52e6tu8w8] {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.88rem;
color: var(--on-dark);
background: var(--accent);
border: none;
border-radius: 8px;
padding: 0.5rem 1.1rem;
cursor: pointer;
}
.import-button:hover[b-g52e6tu8w8] {
background: var(--accent-hover);
}
.import-button:disabled[b-g52e6tu8w8] {
opacity: 0.5;
cursor: not-allowed;
}
.preview-scroll[b-g52e6tu8w8] {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.preview-table[b-g52e6tu8w8] {
width: 100%;
border-collapse: collapse;
background: var(--card);
}
.preview-table th[b-g52e6tu8w8] {
font-size: 0.72rem;
font-weight: 600;
text-align: left;
color: var(--ink-soft);
padding: 0.6rem 0.8rem;
background: color-mix(in srgb, var(--ink) 3%, var(--card));
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.preview-table td[b-g52e6tu8w8] {
padding: 0.5rem 0.8rem;
border-bottom: 1px solid var(--line);
font-size: 0.84rem;
color: var(--ink);
}
.preview-table tbody tr:last-child td[b-g52e6tu8w8] {
border-bottom: none;
}
.row-invalid[b-g52e6tu8w8] {
background: color-mix(in srgb, var(--bad) 6%, transparent);
}
.row-warning[b-g52e6tu8w8] {
background: color-mix(in srgb, var(--warn, #b8860b) 6%, transparent);
}
.row-success[b-g52e6tu8w8] {
background: color-mix(in srgb, var(--good, #1d7a4f) 6%, transparent);
}
.cell-mono[b-g52e6tu8w8] {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--ink-soft, #51665f);
}
.badge-warn[b-g52e6tu8w8],
.badge-ok[b-g52e6tu8w8],
.badge-bad[b-g52e6tu8w8] {
font-size: 0.72rem;
font-weight: 600;
border-radius: 999px;
padding: 0.15rem 0.6rem;
white-space: nowrap;
}
.badge-warn[b-g52e6tu8w8] {
color: var(--warn, #b8860b);
background: color-mix(in srgb, var(--warn, #b8860b) 12%, transparent);
}
.badge-ok[b-g52e6tu8w8] {
color: var(--good, #1d7a4f);
background: color-mix(in srgb, var(--good, #1d7a4f) 12%, transparent);
}
.badge-bad[b-g52e6tu8w8] {
color: var(--bad);
background: color-mix(in srgb, var(--bad) 12%, transparent);
}
.import-result[b-g52e6tu8w8] {
margin-top: 1.1rem;
}
.result-line[b-g52e6tu8w8] {
margin: 0 0 0.5rem;
font-size: 0.92rem;
color: var(--ink);
}
.error-list[b-g52e6tu8w8] {
margin: 0 0 0.9rem;
padding-left: 1.2rem;
font-size: 0.85rem;
color: var(--bad);
}
/* /Components/Pages/Admin/Dashboard/Dashboard.razor.rz.scp.css */
/* ---- base ---- */
/* ---- period switch ---- */
.seg[b-14rxcrz8ze] {
display: inline-flex;
gap: 0.15rem;
padding: 0.2rem;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 12px;
}
.seg-btn[b-14rxcrz8ze] {
border: none;
background: transparent;
color: var(--ink-soft);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
padding: 0.42rem 1rem;
border-radius: 9px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover[b-14rxcrz8ze] { color: var(--ink); }
.seg-btn.on[b-14rxcrz8ze] { background: var(--accent); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.dash-cta svg[b-14rxcrz8ze] { width: 16px; height: 16px; }
.panel[b-14rxcrz8ze] {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 0.9rem 1rem;
}
.panel-head[b-14rxcrz8ze] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 0.4rem;
}
.panel-title[b-14rxcrz8ze] {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.94rem;
margin: 0 0 0.6rem;
color: var(--ink-deep);
}
.panel-head .panel-title[b-14rxcrz8ze] { margin: 0; }
/* ---- tone chips (shared by kpi + tiles) ---- */
/* ---- KPI cards ---- */
.kpi-chip svg[b-14rxcrz8ze] { width: 16px; height: 16px; }
.trend[b-14rxcrz8ze] { font-size: 0.8rem; font-weight: 600; display: inline-flex; gap: 0.3rem; align-items: center; margin-top: 0.15rem; }
.trend-arrow[b-14rxcrz8ze] { font-size: 0.7rem; }
.trend.up[b-14rxcrz8ze] { color: var(--good); }
.trend.down[b-14rxcrz8ze] { color: var(--bad); }
.trend.flat[b-14rxcrz8ze] { color: var(--ink-soft); }
/* ---- draggable widget grid (4-col) ---- */
.widget-grid[b-14rxcrz8ze] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
grid-auto-flow: row dense;
}
.widget[b-14rxcrz8ze] { display: flex; min-width: 0; }
.widget > .panel[b-14rxcrz8ze] { flex: 1; min-width: 0; }
.widget.span-1[b-14rxcrz8ze] { grid-column: span 1; }
.widget.span-2[b-14rxcrz8ze] { grid-column: span 2; }
.widget.span-4[b-14rxcrz8ze] { grid-column: span 4; }
.widget[draggable="true"][b-14rxcrz8ze] { cursor: grab; }
.widget[draggable="true"]:active[b-14rxcrz8ze] { cursor: grabbing; }
.widget.dragging[b-14rxcrz8ze] { opacity: 0.45; }
.widget .panel[b-14rxcrz8ze] { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.widget:hover > .panel[b-14rxcrz8ze] { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
@media (max-width: 1200px) {
.widget-grid[b-14rxcrz8ze] { grid-template-columns: repeat(2, 1fr); }
.widget.span-2[b-14rxcrz8ze], .widget.span-4[b-14rxcrz8ze] { grid-column: span 2; }
.widget.span-1[b-14rxcrz8ze] { grid-column: span 1; }
}
@media (max-width: 768px) {
.widget-grid[b-14rxcrz8ze] { grid-template-columns: 1fr; }
.widget.span-1[b-14rxcrz8ze], .widget.span-2[b-14rxcrz8ze], .widget.span-4[b-14rxcrz8ze] { grid-column: span 1; }
}
/* ---- chart chrome ---- */
.chart-legend[b-14rxcrz8ze] { display: flex; gap: 0.9rem; font-size: 0.72rem; color: var(--ink-soft); }
.chart-legend span[b-14rxcrz8ze] { display: inline-flex; align-items: center; gap: 0.3rem; }
.legend-dot[b-14rxcrz8ze] { width: 0.55rem; height: 0.55rem; border-radius: 3px; flex: none; display: inline-block; }
.chart-hint[b-14rxcrz8ze] { font-size: 0.72rem; color: var(--ink-soft); margin: 0.1rem 0 0; text-align: center; }
.drill-sep[b-14rxcrz8ze] { color: var(--ink-soft); font-weight: 400; margin: 0 0.15rem; }
.drill-label[b-14rxcrz8ze] { color: var(--accent); }
.back-chip[b-14rxcrz8ze] {
display: inline-flex; align-items: center; gap: 0.2rem;
background: var(--accent-soft); color: var(--accent);
border: none; border-radius: 999px; padding: 0.2rem 0.6rem 0.2rem 0.4rem;
font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit;
transition: background 0.12s ease;
}
.back-chip:hover[b-14rxcrz8ze] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.back-chip svg[b-14rxcrz8ze] { width: 14px; height: 14px; }
/* ---- recent activity ---- */
.activity-list[b-14rxcrz8ze] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.activity-item[b-14rxcrz8ze] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.5rem;
border-radius: 10px;
cursor: pointer;
transition: background 0.12s ease;
}
.activity-item:hover[b-14rxcrz8ze] { background: var(--surface-2); }
.act-icon[b-14rxcrz8ze] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 10px;
flex: none;
}
.act-icon svg[b-14rxcrz8ze] { width: 16px; height: 16px; }
.act-body[b-14rxcrz8ze] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.act-title[b-14rxcrz8ze] { font-weight: 600; font-size: 0.86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-meta[b-14rxcrz8ze] { font-size: 0.76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* status-tinted icon backgrounds (reuse status colours) */
.act-icon.status-draft[b-14rxcrz8ze] { background: var(--surface-2); color: var(--ink-soft); }
.act-icon.status-sent[b-14rxcrz8ze] { background: var(--accent-soft); color: var(--accent); }
.act-icon.status-inprogress[b-14rxcrz8ze] { background: color-mix(in srgb, #e0a13a 18%, transparent); color: #c9822e; }
.act-icon.status-submitted[b-14rxcrz8ze] { background: color-mix(in srgb, #4a83d4 18%, transparent); color: #4a83d4; }
.act-icon.status-approved[b-14rxcrz8ze] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
/* ---- record tiles ---- */
.tile-row[b-14rxcrz8ze] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (max-width: 768px) { .tile-row[b-14rxcrz8ze] { grid-template-columns: repeat(2, 1fr); } }
.tile[b-14rxcrz8ze] {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 0.6rem;
align-items: center;
padding: 0.6rem 0.75rem;
border: 1px solid var(--line);
border-radius: 10px;
text-decoration: none;
background: var(--paper);
transition: border-color 0.12s ease, transform 0.12s ease;
}
.tile:hover[b-14rxcrz8ze] { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.tile-chip[b-14rxcrz8ze] {
grid-row: 1 / span 2;
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: 9px;
}
.tile-chip svg[b-14rxcrz8ze] { width: 15px; height: 15px; }
.tile-value[b-14rxcrz8ze] { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink-deep); line-height: 1.1; }
.tile-label[b-14rxcrz8ze] { grid-column: 2; font-size: 0.78rem; color: var(--ink-soft); }
/* ---- status chips ---- */
/* /Components/Pages/Admin/Integrations/ConfigureActions.razor.rz.scp.css */
/* Tokens come from app.css and are redefined per theme there, so no literal
colours or fallbacks here — a fallback would silently win in dark mode. */
.field-label[b-d99hli0jl5] {
display: block;
font-family: var(--font-mono);
font-size: 0.63rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.3rem;
}
.config-picker[b-d99hli0jl5] {
max-width: 26rem;
margin-bottom: 1.8rem;
}
.config-section[b-d99hli0jl5] {
border: 1px solid var(--line);
border-radius: 0.7rem;
padding: 1.1rem 1.2rem;
margin-bottom: 1rem;
background: var(--card);
}
.config-section-head[b-d99hli0jl5] {
margin-bottom: 0.9rem;
}
.config-section-title[b-d99hli0jl5] {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
color: var(--ink);
margin: 0;
}
.config-section-sub[b-d99hli0jl5] {
font-size: 0.83rem;
color: var(--ink-soft);
margin: 0.15rem 0 0;
}
.config-row[b-d99hli0jl5] {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-bottom: 1rem;
}
.config-control[b-d99hli0jl5] {
flex: 1 1 13rem;
min-width: 12rem;
}
.mapping-table[b-d99hli0jl5] {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--line);
}
.mapping-table th[b-d99hli0jl5] {
font-family: var(--font-mono);
font-size: 0.63rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
text-align: left;
font-weight: 500;
padding: 0.6rem 0.6rem 0.5rem 0;
}
.mapping-table td[b-d99hli0jl5] {
padding: 0.4rem 0.6rem 0.4rem 0;
border-top: 1px solid var(--line);
vertical-align: middle;
}
.mapping-table td:last-child[b-d99hli0jl5],
.mapping-table th:last-child[b-d99hli0jl5] {
width: 45%;
padding-right: 0;
}
.mapping-label[b-d99hli0jl5] {
color: var(--ink);
font-size: 0.9rem;
}
/* /Components/Pages/Admin/Integrations/Integrations.razor.rz.scp.css */
/* Tokens come from app.css and are redefined per theme there, so no literal
colours or fallbacks here — a fallback would silently win in dark mode. */
.integration-grid[b-fad1frgktp] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: 1.1rem;
}
.integration-card[b-fad1frgktp] {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.2rem;
border: 1px solid var(--line);
border-radius: 0.7rem;
background: var(--card);
}
.integration-head[b-fad1frgktp] {
display: flex;
align-items: center;
gap: 0.8rem;
}
.integration-logo[b-fad1frgktp] {
width: 2.6rem;
height: 2.6rem;
border-radius: 0.55rem;
object-fit: contain;
flex: none;
}
.integration-monogram[b-fad1frgktp] {
display: grid;
place-items: center;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
}
.integration-name[b-fad1frgktp] {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
margin: 0;
}
.integration-status[b-fad1frgktp] {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0.15rem 0 0;
}
.status-on[b-fad1frgktp] { color: var(--good); }
.status-off[b-fad1frgktp] { color: var(--ink-soft); }
.status-error[b-fad1frgktp] { color: var(--bad); }
.integration-desc[b-fad1frgktp] {
color: var(--ink-soft);
font-size: 0.9rem;
margin: 0;
flex: 1;
}
.integration-meta[b-fad1frgktp] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.4rem;
margin: 0;
}
.integration-meta dt[b-fad1frgktp] {
font-family: var(--font-mono);
font-size: 0.63rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.integration-meta dd[b-fad1frgktp] {
margin: 0.1rem 0 0;
font-size: 0.88rem;
color: var(--ink);
}
.integration-result[b-fad1frgktp] {
font-size: 0.83rem;
color: var(--ink-soft);
background: var(--surface-2);
border-radius: 0.45rem;
padding: 0.5rem 0.65rem;
margin: 0;
}
.integration-actions[b-fad1frgktp] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
padding-top: 0.2rem;
}
/* /Components/Pages/Admin/Profile/Profile.razor.rz.scp.css */
/* The header, panels and field grid match the team member page — this is the
same object seen from the inside, so it should not look like a different app.
Scoped CSS can't be shared, so the shape is repeated rather than abstracted. */
.profile-page[b-vil09hch6f] {
animation: profileFadeUp-b-vil09hch6f 0.28s ease both;
}
@keyframes profileFadeUp-b-vil09hch6f {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
/* ---------- header ---------- */
.member-head[b-vil09hch6f] {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 16px 0 0;
flex-wrap: wrap;
}
.avatar-xl[b-vil09hch6f] {
width: 56px;
height: 56px;
flex: none;
border-radius: 16px;
color: var(--t-avatar-ink);
display: flex;
align-items: center;
justify-content: center;
font: 600 18px "IBM Plex Mono", monospace;
}
.member-id[b-vil09hch6f] {
flex: 1;
min-width: 220px;
}
.member-h1[b-vil09hch6f] {
font: 600 26px "Outfit", sans-serif;
letter-spacing: -0.025em;
margin: 0;
color: var(--t-g0);
}
.member-meta[b-vil09hch6f] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
flex-wrap: wrap;
}
.member-mail[b-vil09hch6f] {
font-size: 13px;
color: var(--t-grey-dot);
}
.sep[b-vil09hch6f] {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--t-sep);
}
.role-chip[b-vil09hch6f] {
font: 600 11px "IBM Plex Mono", monospace;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 6px;
}
.joined[b-vil09hch6f] {
font-size: 12.5px;
color: var(--t-g11);
}
/* ---------- panels ---------- */
.detail-grid[b-vil09hch6f] {
margin-top: 18px;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.panel[b-vil09hch6f] {
background: var(--t-panel);
border: 1px solid var(--t-line);
border-radius: 13px;
padding: 18px 20px;
}
.panel.profile[b-vil09hch6f] {
padding: 20px 22px;
}
.micro[b-vil09hch6f] {
font: 600 10px "IBM Plex Mono", monospace;
letter-spacing: 0.13em;
color: var(--t-g12);
}
.panel-cap[b-vil09hch6f] {
margin-bottom: 14px;
}
.profile .panel-cap[b-vil09hch6f] {
margin-bottom: 16px;
}
.side[b-vil09hch6f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.side-blurb[b-vil09hch6f] {
font-size: 12px;
color: var(--t-g9);
line-height: 1.55;
margin: 0 0 14px;
}
.side-note[b-vil09hch6f] {
font-size: 11.5px;
color: var(--t-g11);
margin: 0;
}
.access-role[b-vil09hch6f] {
font: 600 13px "IBM Plex Sans", sans-serif;
color: var(--role);
margin-bottom: 8px;
}
/* ---------- fields ---------- */
.fieldgrid[b-vil09hch6f] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.pfield[b-vil09hch6f] {
display: flex;
flex-direction: column;
gap: 6px;
}
.pfield-cap[b-vil09hch6f] {
font-size: 11.5px;
color: var(--t-g10);
}
.pfield input[b-vil09hch6f] {
background: var(--t-field);
border: 1px solid var(--t-line-3);
border-radius: 8px;
height: 36px;
padding: 0 11px;
color: var(--t-g1);
font-size: 13px;
font-family: inherit;
}
.pfield input:focus[b-vil09hch6f] {
outline: none;
border-color: var(--t-dash-accent-hi);
}
.pfield input[readonly][b-vil09hch6f] {
color: var(--t-grey-dot);
}
.profile-actions[b-vil09hch6f] {
display: flex;
gap: 9px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--t-line-5);
}
/* Full-width button with the icon and label on one line. */
.btn-block[b-vil09hch6f] {
width: 100%;
justify-content: center;
gap: 8px;
}
.btn-block svg[b-vil09hch6f] {
width: 15px;
height: 15px;
}
@media (max-width: 1100px) {
.detail-grid[b-vil09hch6f] {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.fieldgrid[b-vil09hch6f] {
grid-template-columns: minmax(0, 1fr);
}
}
/* /Components/Pages/Admin/Requests/Calendar.razor.rz.scp.css */
/* --- local design tokens (mirrors Calendar.dc.html) — light default, dark override --- */
.cal-shell[b-30pgzetu2h] {
--surface: #ffffff;
--surface2: #f3f3f6;
--head: #fafafb;
--border: rgba(20, 20, 30, .09);
--text: #181820;
--dim: rgba(24, 24, 32, .58);
--faint: rgba(24, 24, 32, .34);
--accent: #6d5cf5;
--k-doc-fill: #fdf2d0; --k-doc-border: #c98a08; --k-doc-text: #7a5300;
--k-sent-fill: #d9f7e3; --k-sent-border: #15a34a; --k-sent-text: #116237;
--k-email-fill: #dbeafe; --k-email-border: #2563eb; --k-email-text: #1c3ba0;
--k-sms-fill: #cdf5ee; --k-sms-border: #0d9488; --k-sms-text: #0a6156;
--k-expired-fill: #fde2e2; --k-expired-border: #dc4b4b; --k-expired-text: #8f1f1f;
}
:root[data-theme="dark"] .cal-shell[b-30pgzetu2h] {
--surface: #111117;
--surface2: #191921;
--head: #0f0f15;
--border: rgba(255, 255, 255, .075);
--text: #e8e8ec;
--dim: rgba(232, 232, 236, .6);
--faint: rgba(232, 232, 236, .32);
--k-doc-fill: rgba(234, 179, 8, .15); --k-doc-border: #eab308; --k-doc-text: #f2d888;
--k-sent-fill: rgba(34, 197, 94, .15); --k-sent-border: #22c55e; --k-sent-text: #a6e7bd;
--k-email-fill: rgba(59, 130, 246, .16); --k-email-border: #4b8bf4; --k-email-text: #a9c8f7;
--k-sms-fill: rgba(45, 212, 191, .15); --k-sms-border: #2dd4bf; --k-sms-text: #9beadd;
--k-expired-fill: rgba(240, 109, 109, .16); --k-expired-border: #f06d6d; --k-expired-text: #f3b0b0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cal-shell[b-30pgzetu2h] {
--surface: #111117;
--surface2: #191921;
--head: #0f0f15;
--border: rgba(255, 255, 255, .075);
--text: #e8e8ec;
--dim: rgba(232, 232, 236, .6);
--faint: rgba(232, 232, 236, .32);
--k-doc-fill: rgba(234, 179, 8, .15); --k-doc-border: #eab308; --k-doc-text: #f2d888;
--k-sent-fill: rgba(34, 197, 94, .15); --k-sent-border: #22c55e; --k-sent-text: #a6e7bd;
--k-email-fill: rgba(59, 130, 246, .16); --k-email-border: #4b8bf4; --k-email-text: #a9c8f7;
--k-sms-fill: rgba(45, 212, 191, .15); --k-sms-border: #2dd4bf; --k-sms-text: #9beadd;
--k-expired-fill: rgba(240, 109, 109, .16); --k-expired-border: #f06d6d; --k-expired-text: #f3b0b0;
}
}
/* --- page head --- */
/* --- toolbar --- */
.toolbar[b-30pgzetu2h] { margin-bottom: 16px; }
.cal-nav[b-30pgzetu2h] { display: inline-flex; align-items: center; gap: 8px; }
.cal-nav-btn[b-30pgzetu2h] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 9px;
cursor: pointer;
}
.cal-nav-btn:hover[b-30pgzetu2h] { background: var(--surface2); }
.cal-nav-btn svg[b-30pgzetu2h] { width: 15px; height: 15px; }
.cal-today[b-30pgzetu2h] {
height: 34px;
padding: 0 16px;
font-size: 13px;
font-weight: 550;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
cursor: pointer;
}
.cal-today:hover[b-30pgzetu2h] { background: var(--surface2); }
.cal-period[b-30pgzetu2h] {
font-family: var(--font-display);
font-weight: 650;
font-size: 19px;
color: var(--text);
min-width: 150px;
}
.pill-select[b-30pgzetu2h]::after { content: none; }
.pill-trigger[b-30pgzetu2h] {
display: flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 15px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 550;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
cursor: pointer;
}
.pill-trigger:hover[b-30pgzetu2h] { background: var(--surface2); }
.pill-chev[b-30pgzetu2h] { flex: 0 0 auto; }
.pill-select.active .pill-trigger[b-30pgzetu2h] {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.clear-filters[b-30pgzetu2h] {
font-size: 0.8rem;
font-weight: 500;
color: var(--dim);
background: none;
border: none;
cursor: pointer;
padding: 0.3rem 0.4rem;
}
.clear-filters:hover[b-30pgzetu2h] { color: var(--accent); text-decoration: underline; }
.menu-backdrop[b-30pgzetu2h] { position: fixed; inset: 0; z-index: 40; }
.filter-menu[b-30pgzetu2h] {
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 50;
min-width: 11rem;
max-height: 16rem;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
padding: 0.3rem;
display: flex;
flex-direction: column;
}
.filter-option[b-30pgzetu2h] {
text-align: left;
border: none;
background: none;
font-family: var(--font-ui);
font-size: 0.85rem;
color: var(--text);
padding: 0.5rem 0.7rem;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
}
.filter-option:hover[b-30pgzetu2h] { background: var(--surface2); }
.filter-option.selected[b-30pgzetu2h] {
color: var(--accent);
font-weight: 600;
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* --- view tabs --- */
.view-switch[b-30pgzetu2h] {
display: inline-flex;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 3px;
gap: 0;
}
.view-txt-btn[b-30pgzetu2h] {
border: none;
background: transparent;
color: var(--dim);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 550;
height: 28px;
padding: 0 15px;
border-radius: 7px;
cursor: pointer;
}
.view-txt-btn.active[b-30pgzetu2h] {
background: var(--accent);
color: #fff;
font-weight: 650;
}
/* --- legend --- */
.legend[b-30pgzetu2h] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 14px; }
.legend-item[b-30pgzetu2h] { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.legend-icon[b-30pgzetu2h] { display: inline-flex; }
.legend-icon svg[b-30pgzetu2h] { width: 14px; height: 14px; }
.legend-icon.k-doc[b-30pgzetu2h] { color: var(--k-doc-border); }
.legend-icon.k-sent[b-30pgzetu2h] { color: var(--k-sent-border); }
.legend-icon.k-email[b-30pgzetu2h] { color: var(--k-email-border); }
.legend-icon.k-sms[b-30pgzetu2h] { color: var(--k-sms-border); }
.legend-icon.k-expired[b-30pgzetu2h] { color: var(--k-expired-border); }
/* --- card shell wrapping every view --- */
.cal-card[b-30pgzetu2h] {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: var(--surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
/* --- month: weekday header --- */
.cal-weekdays[b-30pgzetu2h] {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
background: var(--head);
}
.cal-weekday[b-30pgzetu2h] {
padding: 11px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
color: var(--dim);
border-left: 1px solid var(--border);
}
/* --- month: week rows --- */
.cal-week-wrap[b-30pgzetu2h] { position: relative; border-top: 1px solid var(--border); }
.cal-week-grid[b-30pgzetu2h] {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-daycell[b-30pgzetu2h] {
min-height: 152px;
border-left: 1px solid var(--border);
padding: 8px 10px;
cursor: pointer;
}
.cal-daycell:hover[b-30pgzetu2h] { background: var(--surface2); }
.cal-daycell.muted .daynum[b-30pgzetu2h] { color: var(--faint); }
.daynum[b-30pgzetu2h] {
display: block;
width: fit-content;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.daynum.today[b-30pgzetu2h] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 12px;
background: var(--accent);
color: #fff;
font-weight: 700;
}
/* --- month: spanning bars overlay --- */
.cal-bars-layer[b-30pgzetu2h] { position: absolute; inset: 0; pointer-events: none; }
.cal-bar[b-30pgzetu2h] {
position: absolute;
display: flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 9px;
box-sizing: border-box;
font-size: 12px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
pointer-events: auto;
border-left: 3px solid transparent;
border-radius: 6px;
}
.cal-bar.lane-0[b-30pgzetu2h] { top: 36px; }
.cal-bar.lane-1[b-30pgzetu2h] { top: 65px; }
.cal-bar.lane-2[b-30pgzetu2h] { top: 94px; }
.cal-bar.cl[b-30pgzetu2h] { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cr[b-30pgzetu2h] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar.k-doc[b-30pgzetu2h] { background: var(--k-doc-fill); color: var(--k-doc-text); border-left-color: var(--k-doc-border); }
.cal-bar.k-sent[b-30pgzetu2h] { background: var(--k-sent-fill); color: var(--k-sent-text); border-left-color: var(--k-sent-border); }
.cal-bar.k-email[b-30pgzetu2h] { background: var(--k-email-fill); color: var(--k-email-text); border-left-color: var(--k-email-border); }
.cal-bar.k-sms[b-30pgzetu2h] { background: var(--k-sms-fill); color: var(--k-sms-text); border-left-color: var(--k-sms-border); }
.cal-bar.k-expired[b-30pgzetu2h] { background: var(--k-expired-fill); color: var(--k-expired-text); border-left-color: var(--k-expired-border); }
.bar-icon[b-30pgzetu2h] { flex: 0 0 auto; display: inline-flex; }
.bar-icon svg[b-30pgzetu2h] { width: 13px; height: 13px; }
.bar-title[b-30pgzetu2h] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-client[b-30pgzetu2h] { opacity: .72; font-weight: 450; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-more[b-30pgzetu2h] {
position: absolute;
top: 123px;
width: calc(14.2857% - 12px);
height: 18px;
font-size: 11px;
font-weight: 600;
color: var(--dim);
cursor: pointer;
pointer-events: auto;
white-space: nowrap;
}
.cal-more:hover[b-30pgzetu2h] { color: var(--accent); }
/* --- month: empty state --- */
.cal-empty[b-30pgzetu2h] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 90px 20px;
gap: 14px;
text-align: center;
}
.cal-empty-icon[b-30pgzetu2h] {
width: 56px;
height: 56px;
border-radius: 16px;
border: 2px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--faint);
}
.cal-empty-icon svg[b-30pgzetu2h] { width: 26px; height: 26px; }
.empty-title[b-30pgzetu2h] { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.empty-sub[b-30pgzetu2h] { font-size: 13px; color: var(--dim); max-width: 340px; margin: 0; }
.empty-cta[b-30pgzetu2h] {
margin-top: 4px;
height: 36px;
padding: 0 18px;
border-radius: 9px;
border: none;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.empty-cta:hover[b-30pgzetu2h] { opacity: 0.9; }
/* --- shared item chip icon (week / day / agenda rows) --- */
.chip-icon[b-30pgzetu2h] {
width: 26px;
height: 26px;
border-radius: 7px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.chip-icon svg[b-30pgzetu2h] { width: 15px; height: 15px; }
.chip-icon.k-doc[b-30pgzetu2h] { background: var(--k-doc-fill); color: var(--k-doc-border); }
.chip-icon.k-sent[b-30pgzetu2h] { background: var(--k-sent-fill); color: var(--k-sent-border); }
.chip-icon.k-email[b-30pgzetu2h] { background: var(--k-email-fill); color: var(--k-email-border); }
.chip-icon.k-sms[b-30pgzetu2h] { background: var(--k-sms-fill); color: var(--k-sms-border); }
.chip-icon.k-expired[b-30pgzetu2h] { background: var(--k-expired-fill); color: var(--k-expired-border); }
/* --- week view (per-day columns) --- */
.cal-week-cols[b-30pgzetu2h] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wcol[b-30pgzetu2h] {
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
min-height: 480px;
display: flex;
flex-direction: column;
}
.wcol-head[b-30pgzetu2h] {
padding: 12px 12px 10px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}
.wcol-dow[b-30pgzetu2h] { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dim); }
.wcol-dow.today[b-30pgzetu2h] { color: var(--accent); }
.wcol-date[b-30pgzetu2h] { font-size: 14px; font-weight: 650; color: var(--text); }
.wcol-date.today[b-30pgzetu2h] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.wcol-body[b-30pgzetu2h] { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wcol-item[b-30pgzetu2h] { display: flex; align-items: flex-start; gap: 7px; padding: 7px 8px; border-radius: 7px; background: var(--surface2); cursor: pointer; }
.wcol-text[b-30pgzetu2h] { min-width: 0; display: flex; flex-direction: column; }
.wcol-title[b-30pgzetu2h] { display: block; font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol-client[b-30pgzetu2h] { display: block; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol-empty[b-30pgzetu2h] { font-size: 12px; color: var(--faint); padding: 6px 8px; }
/* --- day view --- */
.cal-day-view[b-30pgzetu2h] { padding: 24px 26px 30px; }
.day-header[b-30pgzetu2h] {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.day-num[b-30pgzetu2h] { font-size: 40px; font-weight: 750; color: var(--text); line-height: 1; }
.day-dow[b-30pgzetu2h] { display: block; font-size: 16px; font-weight: 650; color: var(--text); }
.day-mon[b-30pgzetu2h] { display: block; font-size: 13px; color: var(--dim); }
.day-items[b-30pgzetu2h] { display: flex; flex-direction: column; gap: 9px; max-width: 640px; }
.day-item[b-30pgzetu2h] { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 10px; background: var(--surface2); cursor: pointer; }
.day-item-text[b-30pgzetu2h] { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.day-item-title[b-30pgzetu2h] { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.day-item-client[b-30pgzetu2h] { display: block; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-item-range[b-30pgzetu2h] { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.day-empty[b-30pgzetu2h] { font-size: 13px; color: var(--dim); padding: 20px 0; }
/* --- agenda view --- */
.cal-agenda-list[b-30pgzetu2h] { padding: 6px 0; }
.agenda-row[b-30pgzetu2h] { display: flex; gap: 20px; padding: 16px 22px; border-top: 1px solid var(--border); }
.agenda-left[b-30pgzetu2h] { flex: none; width: 118px; text-align: right; }
.agenda-dow[b-30pgzetu2h] { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim); }
.agenda-dow.today[b-30pgzetu2h] { color: var(--accent); }
.agenda-daynum[b-30pgzetu2h] { font-size: 26px; font-weight: 750; color: var(--text); line-height: 1.1; }
.agenda-mon[b-30pgzetu2h] { font-size: 12px; color: var(--dim); }
.agenda-items[b-30pgzetu2h] { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.agenda-item[b-30pgzetu2h] { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 9px; background: var(--surface2); cursor: pointer; }
.agenda-item-title[b-30pgzetu2h] { font-size: 13.5px; font-weight: 600; color: var(--text); }
.agenda-item-client[b-30pgzetu2h] { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-spacer[b-30pgzetu2h] { flex: 1; }
.agenda-range[b-30pgzetu2h] { font-size: 11px; color: var(--faint); white-space: nowrap; }
/* --- badges (popover only) --- */
/* --- hover popover (anchored at cursor, non-interactive) --- */
.cal-popover[b-30pgzetu2h] {
position: fixed;
z-index: 80;
width: 20rem;
max-width: calc(100vw - 2rem);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 1rem 1.1rem;
pointer-events: none;
}
.pop-head[b-30pgzetu2h] { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.pop-avatar[b-30pgzetu2h] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-weight: 700;
font-size: 0.85rem;
}
.pop-client[b-30pgzetu2h] { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.pop-kind[b-30pgzetu2h] { font-size: 0.78rem; color: var(--ink-soft); }
.pop-title[b-30pgzetu2h] { font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; line-height: 1.35; }
.pop-meta[b-30pgzetu2h] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.pop-due[b-30pgzetu2h] { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pop-progress[b-30pgzetu2h] { display: flex; align-items: center; margin-bottom: 0.6rem; }
.progress-track[b-30pgzetu2h] {
display: inline-block;
flex: 1;
height: 5px;
background: var(--surface-2);
border-radius: 999px;
overflow: hidden;
margin-right: 0.6rem;
}
.progress-fill[b-30pgzetu2h] { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progress-num[b-30pgzetu2h] { font-size: 0.76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pop-counts[b-30pgzetu2h] { font-size: 0.8rem; color: var(--ink-soft); }
.pop-counts .c-appr[b-30pgzetu2h] { color: var(--accent); font-weight: 600; }
.pop-counts .c-done[b-30pgzetu2h] { color: var(--good); font-weight: 600; }
.pop-counts .c-todo[b-30pgzetu2h] { color: var(--ink); font-weight: 600; }
/* /Components/Pages/Admin/Requests/PageSummary.razor.rz.scp.css */
.sum[b-8wiptoqgtw] {
margin-top: 2rem;
}
.sum-title[b-8wiptoqgtw] {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.7rem;
}
.sum-tiles[b-8wiptoqgtw] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
margin-bottom: 0.7rem;
}
.sum-tile[b-8wiptoqgtw] {
display: flex;
flex-direction: column;
gap: 0.15rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 0.9rem 1rem;
}
.sum-figure[b-8wiptoqgtw] {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.1;
color: var(--ink);
}
.sum-label[b-8wiptoqgtw] {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.sum-card[b-8wiptoqgtw] {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.1rem 1.2rem;
}
.sum-head[b-8wiptoqgtw] {
font-weight: 600;
font-size: 0.98rem;
color: var(--ink);
margin: 0 0 0.2rem;
}
.sum-note[b-8wiptoqgtw] {
font-size: 0.85rem;
color: var(--ink-soft);
margin: 0;
}
.sum-list[b-8wiptoqgtw] {
list-style: none;
margin: 0.8rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.sum-list li + li[b-8wiptoqgtw] {
border-top: 1px solid var(--line);
}
.sum-link[b-8wiptoqgtw] {
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 0.55rem 0;
font-family: var(--font-ui);
font-size: 0.88rem;
color: var(--accent);
cursor: pointer;
}
.sum-link:hover[b-8wiptoqgtw] {
text-decoration: underline;
}
.sum-done[b-8wiptoqgtw] {
display: flex;
align-items: flex-start;
gap: 0.7rem;
}
.sum-check[b-8wiptoqgtw] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--accent-soft, #e8f5ef);
color: var(--accent);
}
@media (max-width: 620px) {
.sum-tiles[b-8wiptoqgtw] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Admin/Requests/RequestBuilder.razor.rz.scp.css */
/* Request builder — mirrors the BUILDER step of Requests.dc.html. */
.builder[b-xf4kkxdgp2] {
display: grid;
grid-template-columns: 250px 1fr;
gap: 22px;
align-items: start;
width: auto;
padding: 0% 2%
}
/* --- left page tree --- */
.builder-tree[b-xf4kkxdgp2] {
position: sticky;
top: 20px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: 14px;
box-shadow: none;
}
.tree-heading[b-xf4kkxdgp2] {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--faint);
padding: 2px 6px 10px;
margin: 0;
}
.tree-list[b-xf4kkxdgp2] { list-style: none; margin: 0; padding: 0; }
.tree-page[b-xf4kkxdgp2],
.tree-section[b-xf4kkxdgp2] {
display: block;
width: 100%;
text-align: left;
border: none;
background: none;
border-radius: 8px;
cursor: pointer;
font-family: var(--font-ui);
}
.tree-page[b-xf4kkxdgp2] {
font-size: 13px;
font-weight: 650;
color: var(--text);
padding: 8px;
}
.tree-section[b-xf4kkxdgp2] {
font-size: 12.5px;
font-weight: 450;
color: var(--dim);
padding: 6px 8px 6px 18px;
}
.tree-page:hover[b-xf4kkxdgp2],
.tree-section:hover[b-xf4kkxdgp2] { background: var(--surface2); }
.tree-sub[b-xf4kkxdgp2] { list-style: none; margin: 0; padding: 0; border-left: none; }
.tree-add[b-xf4kkxdgp2] {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
margin-top: 8px;
padding: 10px;
border: none;
border-top: 1px solid var(--border);
background: none;
color: var(--accent);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.tree-add svg[b-xf4kkxdgp2] { width: 15px; height: 15px; }
/* --- canvas --- */
.builder-canvas[b-xf4kkxdgp2] {
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.builder-error[b-xf4kkxdgp2] {
padding: 12px 16px;
border-radius: 12px;
background: color-mix(in srgb, var(--danger) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
color: var(--danger);
font-size: 13px;
margin: 0;
}
.canvas-empty[b-xf4kkxdgp2] {
border: 1.5px dashed var(--border);
border-radius: 16px;
padding: 28px;
text-align: center;
color: var(--dim);
font-size: 13.5px;
background: transparent;
}
.canvas-empty p[b-xf4kkxdgp2] { margin: 0; }
/* --- page (section) card --- */
/* No overflow:hidden — the inline editors open a dropdown inside the card. */
.page-card[b-xf4kkxdgp2] {
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
padding: 0;
box-shadow: none;
}
.page-head[b-xf4kkxdgp2] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 15px 18px;
border-bottom: 1px solid var(--border);
margin: 0;
}
.page-title[b-xf4kkxdgp2] {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
margin: 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.page-no[b-xf4kkxdgp2] {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
flex: none;
background: var(--accent-soft);
color: var(--accent);
font-size: 13px;
font-weight: 750;
}
.page-actions[b-xf4kkxdgp2] {
display: inline-flex;
gap: 8px;
flex: none;
}
.mini[b-xf4kkxdgp2] {
height: 30px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--dim);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 550;
cursor: pointer;
}
.mini:hover[b-xf4kkxdgp2] { background: var(--surface2); color: var(--text); }
.mini.danger[b-xf4kkxdgp2] { color: var(--danger); }
.mini.danger:hover[b-xf4kkxdgp2] { background: var(--danger-soft); color: var(--danger); }
.mini.primary[b-xf4kkxdgp2] {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.mini.primary:hover[b-xf4kkxdgp2] { background: var(--accent-hover); color: #fff; }
/* --- section block inside a page --- */
.section-block[b-xf4kkxdgp2] {
padding: 16px 18px;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
}
.section-head[b-xf4kkxdgp2] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.section-title[b-xf4kkxdgp2] {
flex: 1;
min-width: 0;
margin: 0;
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.section-blurb[b-xf4kkxdgp2] {
font-size: 13px;
line-height: 1.5;
color: var(--dim);
margin: 0 0 10px;
}
.section-blurb > :first-child[b-xf4kkxdgp2] { margin-top: 0; }
.section-blurb > :last-child[b-xf4kkxdgp2] { margin-bottom: 0; }
.section-blurb p[b-xf4kkxdgp2] { margin: 0 0 .45rem; }
.section-blurb a[b-xf4kkxdgp2] { color: var(--accent); }
/* --- question rows --- */
.field-list[b-xf4kkxdgp2] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.field-row[b-xf4kkxdgp2] {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface2);
}
.field-row.internal[b-xf4kkxdgp2] { border-style: dashed; }
.field-row.content[b-xf4kkxdgp2] { border-style: dashed; }
.field-glyph[b-xf4kkxdgp2] {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
flex: none;
margin-top: 2px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
font-weight: 700;
}
.field-main[b-xf4kkxdgp2] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.field-label[b-xf4kkxdgp2] {
font-size: 15px;
font-weight: 650;
color: var(--text);
}
.field-desc[b-xf4kkxdgp2],
.field-content-preview[b-xf4kkxdgp2] {
font-size: 13px;
line-height: 1.45;
color: var(--dim);
margin-top: 3px;
}
.field-content-preview > :first-child[b-xf4kkxdgp2] { margin-top: 0; }
.field-content-preview > :last-child[b-xf4kkxdgp2] { margin-bottom: 0; }
.field-content-preview p[b-xf4kkxdgp2] { margin: 0 0 .4rem; }
.field-tags[b-xf4kkxdgp2] {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
.tag[b-xf4kkxdgp2] {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
color: var(--faint);
border: 1px solid var(--border);
padding: 3px 9px;
border-radius: 6px;
background: none;
}
.tag.internal-tag[b-xf4kkxdgp2] { color: var(--accent); border-color: var(--accent); }
.field-tools[b-xf4kkxdgp2] {
display: inline-flex;
align-items: center;
gap: 3px;
flex: none;
color: var(--faint);
}
.field-tools button[b-xf4kkxdgp2] {
display: flex;
align-items: center;
border: none;
background: none;
color: inherit;
cursor: pointer;
padding: 3px 6px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 550;
}
.field-tools button:hover[b-xf4kkxdgp2] { color: var(--text); }
.field-tools button.danger[b-xf4kkxdgp2] { color: var(--danger); }
/* the design paints Edit as the one accented tool */
.field-tools button[title="Edit"][b-xf4kkxdgp2] { color: var(--accent); }
/* --- add buttons --- */
.add-field-row[b-xf4kkxdgp2] {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.add-field-btn[b-xf4kkxdgp2],
.canvas-add[b-xf4kkxdgp2] {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border: 1px dashed var(--border);
border-radius: 9px;
background: transparent;
color: var(--accent);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
margin-top: 0;
}
.add-field-btn:hover[b-xf4kkxdgp2],
.canvas-add:hover[b-xf4kkxdgp2] { background: var(--accent-soft); }
.add-field-btn svg[b-xf4kkxdgp2],
.canvas-add svg[b-xf4kkxdgp2] { width: 14px; height: 14px; }
.canvas-add[b-xf4kkxdgp2] {
align-self: flex-start;
height: 40px;
padding: 0 18px;
border-radius: 11px;
font-size: 13px;
}
/* --- inline editors --- */
.inline-edit[b-xf4kkxdgp2] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.section-add[b-xf4kkxdgp2],
.page-add[b-xf4kkxdgp2] { margin: 0 18px 16px; }
.inline-edit input[type=text][b-xf4kkxdgp2] {
flex: 1;
min-width: 12rem;
height: 38px;
padding: 0 13px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 13.5px;
}
.inline-edit input:focus[b-xf4kkxdgp2] { outline: none; border-color: var(--accent); }
.section-editor[b-xf4kkxdgp2] {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.field-editor[b-xf4kkxdgp2] {
flex: 1;
border: 1px solid var(--accent);
border-radius: 12px;
background: var(--surface);
padding: 14px;
}
.fe-grid[b-xf4kkxdgp2] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.fe-grid label[b-xf4kkxdgp2] {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--dim);
}
.fe-full[b-xf4kkxdgp2] { grid-column: 1 / -1; }
.fe-hint[b-xf4kkxdgp2] { font-weight: 400; color: var(--faint); }
.fe-rte[b-xf4kkxdgp2] { display: flex; flex-direction: column; gap: 6px; }
.fe-rte-label[b-xf4kkxdgp2] {
font-size: 12px;
font-weight: 600;
color: var(--dim);
}
/* ::deep — InputText renders the , so it carries no scope attribute. */
[b-xf4kkxdgp2] .fe-grid input[type=text],
[b-xf4kkxdgp2] .fe-grid textarea {
padding: 10px 13px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 13.5px;
}
[b-xf4kkxdgp2] .fe-grid input:focus,
[b-xf4kkxdgp2] .fe-grid textarea:focus { outline: none; border-color: var(--accent); }
[b-xf4kkxdgp2] .fe-grid .validation-message { font-weight: 400; font-size: 12px; }
.fe-checks[b-xf4kkxdgp2] {
flex-direction: row !important;
gap: 16px !important;
align-items: center;
font-weight: 500 !important;
color: var(--text) !important;
}
.fe-checks span[b-xf4kkxdgp2] { display: inline-flex; align-items: center; gap: 7px; }
.fe-actions[b-xf4kkxdgp2] { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 900px) {
.builder[b-xf4kkxdgp2] { grid-template-columns: 1fr; }
.builder-tree[b-xf4kkxdgp2] { position: static; }
.fe-grid[b-xf4kkxdgp2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Requests/RequestDetailPage.razor.rz.scp.css */
/* Request detail / review — mirrors the DETAIL screen of Requests.dc.html.
The question column itself is RequestPreview, restyled under .req-shell
in app.css; everything here is the chrome around it. */
/* --- header card --- */
.rq-dhead[b-dqn56qyl42] {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface);
padding: 24px 26px 24px 30px;
margin-bottom: 20px;
}
/* the design clips the rail with overflow:hidden; that would clip the
save-as-template dropdown, so the rail rounds itself instead */
.rq-dhead .st-rail[b-dqn56qyl42] {
width: 5px;
border-radius: 18px 0 0 18px;
}
.rq-dhead-main[b-dqn56qyl42] {
flex: 1;
min-width: 240px;
}
.rq-dhead-client[b-dqn56qyl42] {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .05em;
color: var(--accent);
margin-bottom: 8px;
}
.rq-dhead-title[b-dqn56qyl42] {
font-family: var(--font-display);
margin: 0 0 12px;
font-size: 26px;
font-weight: 750;
letter-spacing: -.02em;
color: var(--text);
}
.rq-dhead-meta[b-dqn56qyl42] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--dim);
}
.rq-dhead-due[b-dqn56qyl42] {
display: inline-flex;
align-items: center;
gap: 5px;
}
.rq-dhead-side[b-dqn56qyl42] {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.rq-dhead-actions[b-dqn56qyl42] {
display: flex;
flex-direction: column;
gap: 8px;
}
/* --- save as template --- */
.rq-template-save[b-dqn56qyl42] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
width: 100%;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* ::deep — InputText renders the , so it carries no scope attribute. */
[b-dqn56qyl42] .rq-template-save input {
height: 38px;
min-width: 18rem;
padding: 0 13px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 13px;
}
[b-dqn56qyl42] .rq-template-save input:focus {
outline: none;
border-color: var(--accent);
}
[b-dqn56qyl42] .rq-template-save .validation-message {
flex-basis: 100%;
margin: 0;
font-size: 12.5px;
}
/* --- footer panels --- */
.rq-panel[b-dqn56qyl42] {
margin-top: 24px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
padding: 20px;
}
.rq-panel-row[b-dqn56qyl42] {
display: flex;
gap: 12px;
flex-wrap: wrap;
padding: 18px 20px;
}
.rq-panel-title[b-dqn56qyl42] {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 5px;
}
.rq-panel-text[b-dqn56qyl42] {
font-size: 12.5px;
line-height: 1.5;
color: var(--dim);
margin: 0 0 16px;
}
.rq-panel-text strong[b-dqn56qyl42] {
color: var(--text);
font-weight: 600;
}
.rq-panel-hint[b-dqn56qyl42] {
font-size: 12px;
color: var(--faint);
margin: 10px 0 0;
}
.rq-issued[b-dqn56qyl42] {
display: flex;
gap: 8px;
margin-top: 14px;
}
.rq-issued input[b-dqn56qyl42] {
flex: 1;
height: 38px;
padding: 0 13px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 12px;
}
.rq-issued button[b-dqn56qyl42] {
height: 38px;
padding: 0 16px;
border-radius: 10px;
border: 1px solid var(--border);
background: transparent;
color: var(--accent);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 650;
cursor: pointer;
}
.rq-issued button:hover[b-dqn56qyl42] {
background: var(--accent-soft);
}
/* --- expired --- */
.rq-expired[b-dqn56qyl42] {
border-color: color-mix(in srgb, var(--bad) 40%, transparent);
background: color-mix(in srgb, var(--bad) 7%, var(--surface));
}
.rq-expired .rq-panel-title[b-dqn56qyl42] { color: var(--bad); }
.rq-expired-actions[b-dqn56qyl42] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.rq-expired-label[b-dqn56qyl42] {
font-size: 12.5px;
font-weight: 600;
color: var(--dim);
}
[b-dqn56qyl42] .rq-expired-actions .wiz-input {
width: auto;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 13px;
}
/* --- approved --- */
.rq-approved[b-dqn56qyl42] {
margin-top: 24px;
border: 1px solid var(--ok-border);
border-radius: 16px;
background: var(--ok-soft);
padding: 28px;
text-align: center;
}
.rq-approved-check[b-dqn56qyl42] {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--ok);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.rq-approved-title[b-dqn56qyl42] {
font-family: var(--font-display);
font-size: 17px;
font-weight: 750;
color: var(--text);
margin-bottom: 6px;
}
.rq-approved-text[b-dqn56qyl42] {
font-size: 13px;
line-height: 1.5;
color: var(--dim);
max-width: 440px;
margin: 0 auto;
}
/* --- activity feed drawer --- */
.act-backdrop[b-dqn56qyl42] {
position: fixed;
inset: 0;
z-index: 30;
background: rgba(0, 0, 0, .45);
}
/* Opaque on purpose: the page behind it is a client's answers, and reading the
feed through them is unreadable. --surface is already solid; the explicit
isolation stops the backdrop's dim from tinting it. */
.act-drawer[b-dqn56qyl42] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 31;
isolation: isolate;
width: min(430px, 100vw);
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: -18px 0 40px rgba(0, 0, 0, .3);
}
.act-head[b-dqn56qyl42] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.act-title[b-dqn56qyl42] {
font-family: var(--font-display);
font-size: 16px;
font-weight: 750;
color: var(--text);
}
.act-close[b-dqn56qyl42] {
display: flex;
border: none;
background: none;
color: var(--faint);
cursor: pointer;
padding: 4px;
border-radius: 8px;
}
.act-close:hover[b-dqn56qyl42] {
color: var(--text);
background: var(--surface2);
}
.act-filters[b-dqn56qyl42] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.act-filters-label[b-dqn56qyl42] {
font-size: 12px;
color: var(--dim);
margin-right: 2px;
}
.act-chip[b-dqn56qyl42] {
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--border);
background: transparent;
color: var(--dim);
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 650;
cursor: pointer;
}
/* Each chip wears the colour of the nodes it filters to, so the legend and the
timeline read as one thing. */
.act-chip.on[b-dqn56qyl42] {
border-color: currentColor;
color: var(--act-tone);
background: var(--act-tone-soft);
}
.act-chip.cat-comment[b-dqn56qyl42] { --act-tone: var(--accent); --act-tone-soft: var(--accent-soft); }
.act-chip.cat-warning[b-dqn56qyl42] { --act-tone: var(--danger); --act-tone-soft: var(--danger-soft); }
.act-search[b-dqn56qyl42] {
height: 34px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 12.5px;
}
.act-search:focus[b-dqn56qyl42] {
outline: none;
border-color: var(--accent);
}
.act-search[b-dqn56qyl42]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.act-empty[b-dqn56qyl42] {
font-size: 12.5px;
color: var(--dim);
margin: 12px 0 0;
}
.act-list[b-dqn56qyl42] {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dim) 28%, transparent) transparent;
}
/* Every item carries its own tone; the node, its ring and the spine below it all
read from these two, so a kind is recoloured in one place. */
.act-item[b-dqn56qyl42] {
--act-tone: var(--dim);
--act-tone-soft: var(--surface2);
position: relative;
display: flex;
gap: 12px;
padding: 14px 2px 16px 0;
}
.act-item.kind-published[b-dqn56qyl42],
.act-item.kind-email[b-dqn56qyl42],
.act-item.kind-sms[b-dqn56qyl42] { --act-tone: #4b8bf4; --act-tone-soft: rgba(75, 139, 244, .12); }
.act-item.kind-submitted[b-dqn56qyl42],
.act-item.kind-approved[b-dqn56qyl42],
.act-item.kind-upload[b-dqn56qyl42] { --act-tone: var(--ok); --act-tone-soft: var(--ok-soft); }
.act-item.kind-integration[b-dqn56qyl42] { --act-tone: #e0a11b; --act-tone-soft: rgba(224, 161, 27, .13); }
/* category wins over kind: a failed send is red whatever channel it used */
.act-item.cat-comment[b-dqn56qyl42] { --act-tone: var(--accent); --act-tone-soft: var(--accent-soft); }
.act-item.cat-warning[b-dqn56qyl42] { --act-tone: var(--danger); --act-tone-soft: var(--danger-soft); }
/* The connector: from under this node down to the next one. Drawn on the item
rather than between them so the last entry ends the line cleanly. */
.act-item:not(:last-child)[b-dqn56qyl42]::before {
content: "";
position: absolute;
left: 14px;
top: 44px;
bottom: -2px;
width: 2px;
border-radius: 2px;
background: linear-gradient(var(--act-tone), var(--border));
opacity: .55;
}
.act-node[b-dqn56qyl42] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 29px;
height: 29px;
border-radius: 50%;
border: 1.5px solid var(--act-tone);
background: var(--act-tone-soft);
color: var(--act-tone);
/* punches the node out of the connector line behind it */
box-shadow: 0 0 0 3px var(--surface);
}
.act-node svg[b-dqn56qyl42] { width: 14px; height: 14px; }
/* --- who did it --- */
.act-actor[b-dqn56qyl42] {
display: flex;
align-items: center;
gap: 7px;
margin-top: 7px;
}
.act-avatar[b-dqn56qyl42] {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
}
/* the one distinction that matters when reading a thread: us or them */
.act-avatar.staff[b-dqn56qyl42] { background: var(--accent); }
.act-avatar.client[b-dqn56qyl42] { background: #4b8bf4; }
.act-actor-text[b-dqn56qyl42] {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.act-actor-name[b-dqn56qyl42] {
font-size: 11.5px;
font-weight: 650;
color: var(--text);
}
.act-actor-contact[b-dqn56qyl42] {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--faint);
overflow-wrap: anywhere;
}
.act-body[b-dqn56qyl42] {
min-width: 0;
flex: 1;
}
.act-text[b-dqn56qyl42] {
font-size: 12.5px;
line-height: 1.45;
color: var(--text);
margin: 0;
overflow-wrap: anywhere;
}
.act-detail[b-dqn56qyl42] {
font-size: 12px;
line-height: 1.45;
color: var(--dim);
margin: 4px 0 0;
overflow-wrap: anywhere;
}
.act-badge[b-dqn56qyl42] {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 5px;
background: var(--surface2);
border: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
color: var(--dim);
}
.act-when[b-dqn56qyl42] {
font-size: 11px;
color: var(--faint);
margin: 6px 0 0;
}
/* --- connected apps (integration actions) --- */
.rq-actions[b-dqn56qyl42] {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.rq-actions-title[b-dqn56qyl42] {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text);
margin: 0;
}
.rq-action-row[b-dqn56qyl42] {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
}
.rq-action-dot[b-dqn56qyl42] {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 6px;
flex: none;
background: var(--dim);
}
.rq-action-dot.ok[b-dqn56qyl42] { background: var(--ok); }
.rq-action-dot.failed[b-dqn56qyl42] { background: var(--danger); }
.rq-action-text[b-dqn56qyl42] {
min-width: 0;
}
.rq-action-name[b-dqn56qyl42] {
font-size: 13.5px;
color: var(--text);
margin: 0;
}
.rq-action-note[b-dqn56qyl42] {
font-size: 12.5px;
color: var(--dim);
margin: 2px 0 0;
}
/* /Components/Pages/Admin/Requests/RequestPreview.razor.rz.scp.css */
.prev-none[b-60mr6rmcp4] { color: var(--ink-soft); padding: 1.5rem; }
.prev-lockbar[b-60mr6rmcp4] {
display: flex;
align-items: center;
gap: 0.55rem;
background: var(--accent-soft);
color: var(--ink);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: var(--radius);
padding: 0.7rem 1rem;
font-size: 0.88rem;
margin-bottom: 1rem;
}
.prev-lockbar svg[b-60mr6rmcp4] { width: 18px; height: 18px; color: var(--accent); flex: none; }
.prev-shell[b-60mr6rmcp4] {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1.25rem;
align-items: start;
}
.prev-nav[b-60mr6rmcp4] {
position: sticky;
top: 1rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow-sm);
}
.prev-title[b-60mr6rmcp4] { font-weight: 700; color: var(--ink-deep); margin: 0 0 0.15rem; font-size: 1rem; }
.prev-due[b-60mr6rmcp4] { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.75rem; }
.prev-nav-list[b-60mr6rmcp4] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.prev-nav-item[b-60mr6rmcp4] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-ui);
color: var(--ink);
padding: 0.5rem 0.6rem;
border-radius: 6px;
font-size: 0.86rem;
}
.prev-nav-item:hover[b-60mr6rmcp4] { background: var(--surface-2); }
.prev-nav-item.active[b-60mr6rmcp4] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.prev-nav-row[b-60mr6rmcp4] { display: flex; align-items: center; gap: 0.1rem; }
.prev-nav-row .prev-nav-item[b-60mr6rmcp4] { flex: 1; min-width: 0; }
.prev-nav-toggle[b-60mr6rmcp4] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.6rem;
height: 1.6rem;
border: none;
background: none;
cursor: pointer;
border-radius: 6px;
color: var(--ink-soft);
}
.prev-nav-toggle:hover[b-60mr6rmcp4] { background: var(--surface-2); }
.prev-nav-chevron[b-60mr6rmcp4] { display: inline-flex; transition: transform 0.15s ease; }
.prev-nav-chevron svg[b-60mr6rmcp4] { width: 14px; height: 14px; }
.prev-nav-chevron.open[b-60mr6rmcp4] { transform: rotate(90deg); }
.prev-nav-count[b-60mr6rmcp4] {
font-size: 0.74rem;
font-weight: 600;
color: var(--ink-soft);
background: var(--surface-2);
border-radius: 999px;
padding: 0.1rem 0.5rem;
flex: none;
}
.prev-nav-count.done[b-60mr6rmcp4] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.prev-body[b-60mr6rmcp4] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.prev-card[b-60mr6rmcp4] {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.3rem 1.4rem;
}
/* A page is a transparent group: the heading sits on the page background and
each question below it brings its own card. */
.prev-page[b-60mr6rmcp4] { display: block; scroll-margin-top: 1rem; }
.prev-section-head[b-60mr6rmcp4] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0.4rem 0 0.7rem;
}
.prev-section-head.sub[b-60mr6rmcp4] {
margin-top: 1.4rem;
scroll-margin-top: 1rem;
}
.prev-section-count[b-60mr6rmcp4] {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
color: var(--ink-soft);
background: var(--surface-2);
border-radius: 999px;
padding: 0.1rem 0.5rem;
flex: none;
}
.prev-heading[b-60mr6rmcp4] { font-size: 1.1rem; font-weight: 600; color: var(--ink-deep); margin: 0; }
.prev-subheading[b-60mr6rmcp4] { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0; }
.prev-instructions[b-60mr6rmcp4] { font-size: 0.94rem; line-height: 1.65; color: var(--ink); }
.prev-instructions :is(h1,h2,h3)[b-60mr6rmcp4] { font-weight: 600; margin: 0.8rem 0 0.4rem; }
.prev-instructions p[b-60mr6rmcp4] { margin: 0 0 0.7rem; }
.prev-instructions ul[b-60mr6rmcp4], .prev-instructions ol[b-60mr6rmcp4] { margin: 0 0 0.7rem 1.4rem; }
.prev-instructions a[b-60mr6rmcp4] { color: var(--accent); }
/* sanitised blurb under a page/section heading */
.prev-section-blurb[b-60mr6rmcp4] { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1rem; }
.prev-section-blurb :is(h1,h2,h3)[b-60mr6rmcp4] { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0.8rem 0 0.4rem; }
.prev-section-blurb > :first-child[b-60mr6rmcp4] { margin-top: 0; }
.prev-section-blurb > :last-child[b-60mr6rmcp4] { margin-bottom: 0; }
.prev-section-blurb p[b-60mr6rmcp4] { margin: 0 0 0.55rem; }
.prev-section-blurb ul[b-60mr6rmcp4], .prev-section-blurb ol[b-60mr6rmcp4] { margin: 0 0 0.55rem 1.4rem; }
.prev-section-blurb a[b-60mr6rmcp4] { color: var(--accent); }
@media (max-width: 860px) {
.prev-shell[b-60mr6rmcp4] { grid-template-columns: 1fr; }
.prev-nav[b-60mr6rmcp4] { position: static; }
}
/* client header in nav */
.prev-client[b-60mr6rmcp4] {
display: flex;
align-items: center;
gap: 0.6rem;
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
border-bottom: 1px solid var(--line);
}
.prev-avatar[b-60mr6rmcp4] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.3rem;
height: 2.3rem;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-weight: 700;
font-size: 0.82rem;
flex: none;
}
.prev-client-info[b-60mr6rmcp4] { display: flex; flex-direction: column; min-width: 0; }
.prev-client-name[b-60mr6rmcp4] { font-weight: 600; color: var(--ink-deep); font-size: 0.9rem; }
.prev-client-email[b-60mr6rmcp4] { font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* subsection nav */
.prev-nav-sub[b-60mr6rmcp4] {
list-style: none;
margin: 0.1rem 0 0.2rem 0.75rem;
padding-left: 0.5rem;
border-left: 1.5px solid var(--line);
}
.prev-nav-subitem[b-60mr6rmcp4] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-ui);
color: var(--ink-soft);
padding: 0.4rem 0.5rem;
border-radius: 6px;
font-size: 0.82rem;
}
.prev-nav-subitem:hover[b-60mr6rmcp4] { background: var(--surface-2); color: var(--ink); }
/* completion tick */
.prev-nav-tick[b-60mr6rmcp4] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background: var(--accent);
color: var(--on-dark);
flex: none;
}
.prev-nav-tick svg[b-60mr6rmcp4] { width: 12px; height: 12px; }
/* /Components/Pages/Admin/Requests/RequestsDashboard.razor.rz.scp.css */
/* Requests list — mirrors the LIST screen of Requests.dc.html. Palette
tokens come from .req-shell in app.css; every number here is the
design's own px value. */
/* --- page head --- */
/* --- stat strip --- */
/* --- toolbar --- */
.req-toolbar[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.req-toolbar-gap[b-l8ua1dv8jt] {
flex: 1;
}
.req-toolbar-label[b-l8ua1dv8jt] {
font-size: 12.5px;
font-weight: 650;
color: var(--dim);
}
.req-toolbar-divider[b-l8ua1dv8jt] {
width: 1px;
height: 22px;
background: var(--border);
margin: 0 2px;
}
.req-search[b-l8ua1dv8jt] {
position: relative;
}
.req-search-icon[b-l8ua1dv8jt] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
color: var(--faint);
pointer-events: none;
}
.req-search-input[b-l8ua1dv8jt] {
width: 240px;
height: 38px;
padding: 0 14px 0 34px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-family: var(--font-ui);
font-size: 13px;
}
.req-search-input:focus[b-l8ua1dv8jt] {
outline: none;
border-color: var(--accent);
}
.req-search-input[b-l8ua1dv8jt]::placeholder {
color: var(--faint);
}
.req-search-input[b-l8ua1dv8jt]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* the shared ViewSwitch, wearing the design's segmented control */
[b-l8ua1dv8jt] .view-switch {
display: flex;
gap: 0;
padding: 3px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
}
[b-l8ua1dv8jt] .view-switch .view-btn {
width: 32px;
height: 30px;
border-radius: 8px;
background: transparent;
color: var(--dim);
box-shadow: none;
}
[b-l8ua1dv8jt] .view-switch .view-btn.active {
background: var(--accent);
color: #fff;
box-shadow: none;
}
/* --- grid view --- */
.rq-grid[b-l8ua1dv8jt] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.rq-card[b-l8ua1dv8jt] {
position: relative;
display: flex;
flex-direction: column;
min-height: 170px;
border: 1px solid var(--border);
border-radius: 16px;
/* The status rail rides in the background layer so border-radius clips it.
Not a child element: overflow:hidden on the card would clip the row menu
too, and a 4px-wide child with a 16px radius has its corners clamped to an
ellipse whose ends sweep outside the card — the rail that was poking past
the rounded corners. */
background: linear-gradient(to right, var(--st) 0 4px, transparent 4px) var(--surface);
padding: 22px 20px 18px 24px;
}
.rq-card-top[b-l8ua1dv8jt] {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.rq-card-titles[b-l8ua1dv8jt] {
flex: 1;
min-width: 0;
}
.rq-card-name[b-l8ua1dv8jt] {
font-size: 15.5px;
font-weight: 700;
line-height: 1.28;
color: var(--text);
margin-bottom: 3px;
}
.rq-card-client[b-l8ua1dv8jt] {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
color: var(--dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rq-card-spacer[b-l8ua1dv8jt] {
flex: 1;
}
.rq-card-foot[b-l8ua1dv8jt] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-top: 1px solid var(--border);
padding-top: 13px;
}
.rq-card-meta[b-l8ua1dv8jt] {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--faint);
/* keeps the meta and the row menu together on the right, rather than
letting space-between strand the meta in the middle */
margin-left: auto;
}
.rq-due[b-l8ua1dv8jt] {
display: inline-flex;
align-items: center;
gap: 5px;
}
.rq-done[b-l8ua1dv8jt] {
color: var(--ok);
font-weight: 600;
}
/* --- grouped list --- */
.rq-group[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 9px;
padding: 0 4px 9px;
margin-top: 22px;
}
/* the first group sits straight under the toolbar, so it keeps the list's own gap */
.rq-group:first-of-type[b-l8ua1dv8jt] {
margin-top: 0;
}
.rq-group-name[b-l8ua1dv8jt] {
font-family: var(--font-display);
font-size: 14px;
font-weight: 750;
color: var(--text);
}
.rq-group-count[b-l8ua1dv8jt] {
font-size: 11px;
font-weight: 700;
color: var(--faint);
background: var(--surface2);
padding: 2px 8px;
border-radius: 20px;
}
/* --- table view --- */
/* No overflow:hidden — it would clip the row menu. The corners are rounded
on the head and last row instead, which reads identically. */
.rq-table[b-l8ua1dv8jt] {
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
}
/* Was a CSS grid of `2.4fr 2fr 1.1fr 1.1fr .8fr 1.4fr` with a 12px gap. Under
table-layout:fixed the same ratios become percentages of the 8.8fr total,
and the gap becomes right-padding on every cell but the last. QuickGrid
renders the table/th/td, hence `::deep`. */
[b-l8ua1dv8jt] .rq-grid {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* Column 1 is the selection tick; the rest keep the design's ratios, scaled to
the remaining width. */
[b-l8ua1dv8jt] .rq-grid th:nth-child(1) { width: 4%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(2) { width: 26%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(3) { width: 22%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(4) { width: 12%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(5) { width: 12%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(6) { width: 9%; }
[b-l8ua1dv8jt] .rq-grid th:nth-child(7) { width: 15%; }
/* position:relative on the is what the absolutely-positioned .st-rail
anchors to, so the rail still spans the full row height. */
[b-l8ua1dv8jt] .rq-grid tbody tr.rq-trow {
position: relative;
cursor: pointer;
}
[b-l8ua1dv8jt] .rq-grid tbody tr[aria-rowindex]:not(:has(~ tr[aria-rowindex])) td:first-child { border-radius: 0 0 0 16px; }
[b-l8ua1dv8jt] .rq-grid tbody tr[aria-rowindex]:not(:has(~ tr[aria-rowindex])) td:last-child { border-radius: 0 0 16px 0; }
[b-l8ua1dv8jt] .rq-grid .st-rail {
width: 3px;
}
[b-l8ua1dv8jt] .rq-grid tbody tr[aria-rowindex]:not(:has(~ tr[aria-rowindex])) .st-rail {
border-radius: 0 0 0 16px;
}
.rq-tname[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.rq-tname span[b-l8ua1dv8jt] {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rq-tdim[b-l8ua1dv8jt] {
font-size: 12.5px;
color: var(--dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rq-tprogress[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 9px;
}
.rq-tpct[b-l8ua1dv8jt] {
font-size: 11.5px;
color: var(--faint);
width: 30px;
text-align: right;
}
/* --- board view --- */
.rq-board[b-l8ua1dv8jt] {
display: grid;
grid-template-columns: repeat(5, minmax(232px, 1fr));
gap: 14px;
}
.rq-col[b-l8ua1dv8jt] {
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface2);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 220px;
/* Cap to the viewport (the board starts ~15rem down) so a full column
scrolls its own cards instead of scrolling the whole page. */
max-height: calc(100vh - 17rem);
}
.rq-col-body[b-l8ua1dv8jt] {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-height: 0;
overflow-y: auto;
/* room for the card's hover lift and focus ring */
padding: 2px;
margin: -2px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dim) 28%, transparent) transparent;
}
.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar { width: 8px; }
.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar-track { background: transparent; }
.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--dim) 28%, transparent);
border-radius: 8px;
}
.rq-col-head[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px 8px;
border-bottom: 1px solid var(--border);
}
.rq-col-dot[b-l8ua1dv8jt] {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--st);
flex: none;
}
.rq-col-name[b-l8ua1dv8jt] {
flex: 1;
font-size: 12.5px;
font-weight: 700;
color: var(--text);
}
.rq-col-count[b-l8ua1dv8jt] {
font-size: 11px;
font-weight: 700;
color: var(--faint);
background: var(--surface);
padding: 2px 8px;
border-radius: 20px;
}
.rq-mini[b-l8ua1dv8jt] {
position: relative;
border: 1px solid var(--border);
border-radius: 12px;
background: linear-gradient(to right, var(--st) 0 3px, transparent 3px) var(--surface);
padding: 14px 14px 13px 16px;
}
.rq-mini[draggable="true"][b-l8ua1dv8jt] {
cursor: grab;
}
.rq-mini[draggable="true"]:active[b-l8ua1dv8jt] {
cursor: grabbing;
}
.rq-mini-top[b-l8ua1dv8jt] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-bottom: 12px;
}
.rq-mini-titles[b-l8ua1dv8jt] {
flex: 1;
min-width: 0;
}
.rq-mini-name[b-l8ua1dv8jt] {
font-size: 13.5px;
font-weight: 650;
line-height: 1.3;
color: var(--text);
margin-bottom: 2px;
}
.rq-mini-client[b-l8ua1dv8jt] {
font-size: 11px;
font-weight: 600;
color: var(--dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rq-mini-progress[b-l8ua1dv8jt] {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.rq-mini-progress .req-bar[b-l8ua1dv8jt] {
height: 5px;
border-radius: 3px;
}
.rq-mini-pct[b-l8ua1dv8jt] {
font-size: 11px;
color: var(--faint);
}
.rq-mini-foot[b-l8ua1dv8jt] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rq-mini-due[b-l8ua1dv8jt] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--faint);
}
/* --- row actions (not in the design) ---
Same slot in all three views: the trailing end of the card's foot row,
or the end of the table row. In the flow rather than pinned to a
corner, so it never lands on the ring or the progress figure. */
.rq-menu[b-l8ua1dv8jt] {
position: relative;
flex: none;
align-self: center;
margin-left: 2px;
}
.rq-dots[b-l8ua1dv8jt] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: 7px;
background: none;
color: var(--faint);
cursor: pointer;
transition: color .12s, background-color .12s;
}
.rq-dots svg[b-l8ua1dv8jt] { width: 16px; height: 16px; }
.rq-dots:hover[b-l8ua1dv8jt] {
color: var(--text);
background: var(--surface2);
}
/* Card menus open upward — the trigger sits at the bottom of the card. */
.rq-menu-list[b-l8ua1dv8jt] {
position: absolute;
right: 0;
bottom: 30px;
z-index: 21;
min-width: 9rem;
padding: 6px;
display: flex;
flex-direction: column;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.rq-trow .rq-menu-list[b-l8ua1dv8jt] {
top: 30px;
bottom: auto;
}
.rq-menu-list button[b-l8ua1dv8jt] {
text-align: left;
border: none;
background: none;
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 550;
color: var(--text);
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
}
.rq-menu-list button:hover[b-l8ua1dv8jt] {
background: var(--surface2);
}
.rq-menu-list .menu-danger[b-l8ua1dv8jt] {
color: var(--danger);
}
.menu-backdrop[b-l8ua1dv8jt] {
position: fixed;
inset: 0;
z-index: 20;
}
/* --- empty state --- */
.req-empty[b-l8ua1dv8jt] {
text-align: center;
padding: 70px 20px;
color: var(--dim);
}
.req-empty-title[b-l8ua1dv8jt] {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.req-empty-sub[b-l8ua1dv8jt] {
font-size: 13px;
}
/* the design scrolls the board sideways below 900px */
@media (max-width: 900px) {
.rq-board[b-l8ua1dv8jt] {
overflow-x: auto;
}
}
/* /Components/Pages/Admin/Requests/RequestWizard.razor.rz.scp.css */
/* Request wizard — mirrors the WIZARD screens of Requests.dc.html. The
stepper, builder and preview are their own components; this is the
top bar plus the four narrow steps around them. */
.wiz-topbar[b-44jdupqqhe] {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 34px;
}
.wiz-next[b-44jdupqqhe] {
height: 40px;
padding: 0 20px;
border-radius: 11px;
border: none;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 650;
cursor: pointer;
flex: none;
white-space: nowrap;
box-shadow: 0 3px 12px rgba(109, 92, 245, .35);
}
.wiz-next:hover[b-44jdupqqhe] { background: var(--accent-hover); }
.wiz-next:disabled[b-44jdupqqhe] { opacity: .5; cursor: not-allowed; }
.wiz-error[b-44jdupqqhe] {
max-width: 720px;
margin: 0 auto 20px;
padding: 12px 16px;
border-radius: 12px;
background: color-mix(in srgb, var(--danger) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
color: var(--danger);
font-size: 13px;
}
/* --- step widths --- */
.wiz-wide[b-44jdupqqhe] { max-width: 950px; margin: 0 auto; }
.wiz-narrow[b-44jdupqqhe] { max-width:900px; margin: 0 auto; }
.wiz-slim[b-44jdupqqhe] { max-width: 640px; margin: 0 auto; }
.wiz-h1[b-44jdupqqhe] {
font-family: var(--font-display);
text-align: center;
margin: 8px 0 6px;
font-size: 27px;
font-weight: 750;
color: var(--text);
}
.wiz-h1.tight[b-44jdupqqhe] { margin: 8px 0 28px; }
.wiz-sub[b-44jdupqqhe] {
text-align: center;
font-size: 14px;
color: var(--dim);
margin: 0 0 28px;
}
.wiz-sub strong[b-44jdupqqhe] { color: var(--text); font-weight: 650; }
.wiz-h2[b-44jdupqqhe] {
font-family: var(--font-display);
margin: 0;
font-size: 23px;
font-weight: 750;
color: var(--text);
}
.wiz-sub2[b-44jdupqqhe] {
font-size: 13px;
color: var(--dim);
margin: 3px 0 0;
}
.wiz-builder-head[b-44jdupqqhe] { margin-bottom: 18px; }
/* --- step 1: templates --- */
.wiz-blank[b-44jdupqqhe] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
border: 1.5px dashed var(--border);
border-radius: 16px;
background: transparent;
padding: 28px;
margin-bottom: 30px;
text-align: center;
cursor: pointer;
font-family: var(--font-ui);
}
.wiz-blank:hover[b-44jdupqqhe] { border-color: var(--accent); }
.wiz-blank:disabled[b-44jdupqqhe] { opacity: .6; cursor: not-allowed; }
.wiz-blank-icon[b-44jdupqqhe] {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
}
.wiz-blank-title[b-44jdupqqhe] {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.wiz-blank-note[b-44jdupqqhe] {
font-size: 13px;
color: var(--dim);
}
.wiz-divider[b-44jdupqqhe] {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 16px;
}
.wiz-tpl-grid[b-44jdupqqhe] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 14px;
}
.wiz-tpl[b-44jdupqqhe] {
display: block;
text-align: left;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: 18px;
cursor: pointer;
font-family: var(--font-ui);
transition: border-color .15s, transform .15s;
}
.wiz-tpl:hover[b-44jdupqqhe] {
border-color: var(--accent);
transform: translateY(-2px);
}
.wiz-tpl:disabled[b-44jdupqqhe] { opacity: .6; cursor: not-allowed; }
.wiz-tpl-name[b-44jdupqqhe] {
display: block;
min-height: 38px;
font-size: 14.5px;
font-weight: 650;
line-height: 1.35;
color: var(--text);
margin-bottom: 10px;
}
.wiz-tpl-meta[b-44jdupqqhe] {
font-size: 12.5px;
color: var(--dim);
}
.wiz-tpl-count[b-44jdupqqhe] { font-weight: 600; }
.wiz-tpl-cat[b-44jdupqqhe] { color: var(--accent); }
/* --- fields (steps 2 and 5) --- */
.wiz-label[b-44jdupqqhe] {
display: block;
font-size: 13px;
font-weight: 650;
color: var(--text);
margin-bottom: 8px;
}
.wiz-label.spaced[b-44jdupqqhe] { margin-top: 22px; }
.wiz-optional[b-44jdupqqhe] {
color: var(--faint);
font-weight: 400;
}
.wiz-input[b-44jdupqqhe] {
width: 100%;
height: 46px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
margin-bottom: 20px;
}
.wiz-input:focus[b-44jdupqqhe] {
outline: none;
border-color: var(--accent);
}
.wiz-input[b-44jdupqqhe]::placeholder { color: var(--faint); }
/* step 2 stacks with its own label margins, so no trailing gap there */
.wiz-narrow .wiz-input[b-44jdupqqhe] { margin-bottom: 0; }
.req-select[b-44jdupqqhe] { margin-bottom: 20px; }
.wiz-narrow .req-select[b-44jdupqqhe] { margin-bottom: 0; }
/* Quill, wearing the design's instructions box */
.wiz-rte[b-44jdupqqhe] {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
[b-44jdupqqhe] .wiz-rte .rte { border: none; border-radius: 0; }
[b-44jdupqqhe] .wiz-rte .ql-toolbar.ql-snow {
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: var(--head);
padding: 7px 10px;
}
[b-44jdupqqhe] .wiz-rte .ql-container.ql-snow {
border: none;
border-radius: 0;
background: transparent;
font-size: 14px;
}
[b-44jdupqqhe] .wiz-rte .ql-editor {
min-height: 150px;
max-height: none;
padding: 16px 18px;
line-height: 1.7;
color: var(--text);
}
/* --- checkbox --- */
.wiz-check[b-44jdupqqhe] {
display: flex;
align-items: center;
gap: 11px;
font-size: 13.5px;
color: var(--text);
cursor: pointer;
margin-bottom: 20px;
}
.wiz-check input[b-44jdupqqhe] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wiz-check-box[b-44jdupqqhe] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 6px;
border: 1.5px solid var(--faint);
color: transparent;
flex: none;
}
.wiz-check input:checked + .wiz-check-box[b-44jdupqqhe] {
border: none;
background: var(--accent);
color: #fff;
}
/* --- publish --- */
.wiz-publish-row[b-44jdupqqhe] {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 10px;
}
.wiz-publish[b-44jdupqqhe] {
height: 44px;
padding: 0 28px;
border-radius: 12px;
border: none;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 650;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
box-shadow: 0 4px 16px rgba(109, 92, 245, .4);
}
.wiz-publish:hover[b-44jdupqqhe] {
background: var(--accent-hover);
color: #fff;
text-decoration: none;
}
.wiz-publish:disabled[b-44jdupqqhe] { opacity: .5; cursor: not-allowed; }
.wiz-draft-link[b-44jdupqqhe] {
border: none;
background: none;
color: var(--accent);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 550;
text-decoration: underline;
cursor: pointer;
}
.wiz-draft-link:hover[b-44jdupqqhe] { opacity: .82; }
.wiz-client-links[b-44jdupqqhe] {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
}
.wiz-link-btn[b-44jdupqqhe] {
border: none;
background: none;
padding: 0;
color: var(--accent);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 550;
text-decoration: underline;
cursor: pointer;
}
.wiz-link-btn:hover[b-44jdupqqhe] { opacity: .82; }
.wiz-link-btn:disabled[b-44jdupqqhe] { opacity: .5; cursor: default; }
/* --- new-client modal --- */
.modal-scrim[b-44jdupqqhe] {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(15, 18, 33, .48);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-box[b-44jdupqqhe] {
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow-y: auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 26px 22px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.modal-title[b-44jdupqqhe] {
font-family: var(--font-display, var(--font-ui));
font-size: 18px;
font-weight: 600;
letter-spacing: -.015em;
color: var(--ink);
}
.modal-body[b-44jdupqqhe] {
margin-top: 14px;
}
.modal-actions[b-44jdupqqhe] {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 22px;
}
.modal-cancel[b-44jdupqqhe] {
border: 1px solid var(--border);
background: none;
color: var(--ink);
border-radius: 10px;
height: 38px;
padding: 0 16px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 550;
cursor: pointer;
}
.modal-confirm[b-44jdupqqhe] {
border: none;
border-radius: 10px;
height: 38px;
padding: 0 18px;
color: #fff;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.modal-confirm.go[b-44jdupqqhe] { background: var(--accent); }
.modal-cancel:disabled[b-44jdupqqhe],
.modal-confirm:disabled[b-44jdupqqhe] { opacity: .55; cursor: default; }
.wiz-hint[b-44jdupqqhe] {
font-size: 12px;
color: var(--faint);
text-align: center;
}
/* --- publish success --- */
.wiz-success[b-44jdupqqhe] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 0;
}
.wiz-success-check[b-44jdupqqhe] {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--ok);
color: #fff;
margin-bottom: 14px;
}
/* /Components/Pages/Admin/Requests/WizardStepper.razor.rz.scp.css */
/* Wizard stepper — mirrors the step rail of Requests.dc.html. */
.stepper[b-k0vi3s5h7l] {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.step[b-k0vi3s5h7l] {
display: flex;
align-items: center;
gap: 10px;
flex: none;
border: none;
background: none;
padding: 0;
cursor: pointer;
font-family: var(--font-ui);
}
.step:disabled[b-k0vi3s5h7l] { cursor: default; }
.step-dot[b-k0vi3s5h7l] {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
flex: none;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--dim);
font-size: 12.5px;
font-weight: 700;
}
.step-label[b-k0vi3s5h7l] {
font-size: 13.5px;
font-weight: 500;
color: var(--dim);
white-space: nowrap;
}
.step.active .step-dot[b-k0vi3s5h7l],
.step.done .step-dot[b-k0vi3s5h7l] {
border: none;
background: var(--accent);
color: #fff;
}
.step.active .step-dot[b-k0vi3s5h7l] {
box-shadow: 0 0 0 4px var(--accent-soft);
}
.step.active .step-label[b-k0vi3s5h7l] {
font-weight: 700;
color: var(--text);
}
.step.done .step-label[b-k0vi3s5h7l] { color: var(--text); }
.step-track[b-k0vi3s5h7l] {
position: relative;
flex: 1;
min-width: 20px;
height: 2px;
margin: 0 12px;
border-radius: 2px;
background: var(--border);
overflow: hidden;
}
.step-fill[b-k0vi3s5h7l] {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: var(--accent);
}
.step-fill.on[b-k0vi3s5h7l] { width: 100%; }
@media (max-width: 860px) {
.step-label[b-k0vi3s5h7l] { display: none; }
.step-track[b-k0vi3s5h7l] { margin: 0 8px; }
}
/* /Components/Pages/Admin/Team/AddTeamMember.razor.rz.scp.css */
.detail-head[b-vjkueejmcf] {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 1.8rem;
}
.detail-name[b-vjkueejmcf] {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
margin: 0;
color: var(--ink);
}
.invite-card[b-vjkueejmcf] {
max-width: 30rem;
margin: 0 auto;
}
.field-label[b-vjkueejmcf] {
display: block;
font-weight: 600;
font-size: 0.82rem;
color: var(--ink);
margin: 1.1rem 0 0.4rem;
}
.field-label:first-of-type[b-vjkueejmcf] {
margin-top: 0;
}
/* ::deep — InputText renders the , so it carries no scope attribute.
Still matches the plain