/* /Components/Layout/MainLayout.razor.rz.scp.css */ .skip-link[b-zce8qtwlzb] { position: absolute; top: -48px; left: 8px; z-index: 2000; background: var(--blue, #0385FF); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; transition: top 140ms ease; } .skip-link:focus[b-zce8qtwlzb] { top: 8px; } .sidebar-toggle-check[b-zce8qtwlzb] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; margin: -1px; } .app-shell[b-zce8qtwlzb] { display: flex; min-height: 100vh; background: transparent; /* the /welcome page gradient on shows through */ } .sidebar[b-zce8qtwlzb] { width: 240px; flex-shrink: 0; background: color-mix(in oklab, var(--card) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-right: 1px solid var(--hairline); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; } .main-column[b-zce8qtwlzb] { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar[b-zce8qtwlzb] { position: sticky; top: 0; z-index: 20; height: 56px; background: var(--topbar-bg); -webkit-backdrop-filter: var(--topbar-blur); backdrop-filter: var(--topbar-blur); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: flex-end; padding: 0 24px; gap: 6px; } .sidebar-toggle[b-zce8qtwlzb] { background: none; border: none; cursor: pointer; color: var(--text); padding: 8px; border-radius: 8px; display: none; align-items: center; justify-content: center; margin-right: auto; transition: background-color 140ms; } .sidebar-toggle:hover[b-zce8qtwlzb] { background: var(--bg-muted); } .sidebar-toggle svg[b-zce8qtwlzb] { display: block; } .sidebar-toggle .sidebar-toggle-close[b-zce8qtwlzb] { display: none; } .sidebar-overlay[b-zce8qtwlzb] { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 25; opacity: 0; pointer-events: none; transition: opacity 200ms ease; cursor: pointer; } .app-main[b-zce8qtwlzb] { flex: 1; background: transparent; } .app-content[b-zce8qtwlzb] { max-width: 1240px; margin: 0 auto; padding: 32px 32px 60px; } @media (max-width: 880px) { .sidebar[b-zce8qtwlzb] { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .25); z-index: 30; } .sidebar-toggle[b-zce8qtwlzb] { display: inline-flex; } .topbar[b-zce8qtwlzb] { padding: 0 18px; } .app-content[b-zce8qtwlzb] { padding: 22px 18px 40px; } } @media (max-width: 560px) { /* clip (x only) is the drift backstop: if the row still can't fit on a tiny screen it is trimmed at the edge instead of scrolling the page. y stays visible so the dropdowns still open below the bar. Scoped to the bar and to phones so no page background or desktop layout is touched. */ .topbar[b-zce8qtwlzb] { padding: 0 12px; gap: 4px; overflow-x: clip; } .app-content[b-zce8qtwlzb] { padding: 18px 14px 36px; } } /* /Components/Layout/NavMenu.razor.rz.scp.css */ .sidebar-inner[b-8oe199qvjh] { display: flex; flex-direction: column; height: 100%; padding: 16px 0; } .sidebar-brand[b-8oe199qvjh] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px 18px; text-decoration: none; margin: 0 8px 8px; border-bottom: 1px solid var(--hairline); } .sidebar-brand:hover[b-8oe199qvjh] { text-decoration: none; } .sidebar-brand-img[b-8oe199qvjh] { height: 46px; width: auto; max-width: 100%; display: block; background: transparent; } .sidebar-brand-img.brand-dark[b-8oe199qvjh] { display: none; } :root[data-theme="dark"] .sidebar-brand-img.brand-light[b-8oe199qvjh] { display: none; } :root[data-theme="dark"] .sidebar-brand-img.brand-dark[b-8oe199qvjh] { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar-brand-img.brand-light[b-8oe199qvjh] { display: none; } :root:not([data-theme="light"]) .sidebar-brand-img.brand-dark[b-8oe199qvjh] { display: block; } } .sidebar-brand-mark[b-8oe199qvjh] { width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue); } .sidebar-brand-mark svg[b-8oe199qvjh] { width: 100%; height: 100%; display: block; } .sidebar-brand-text[b-8oe199qvjh] { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.04em; color: var(--heading); } .sidebar-nav[b-8oe199qvjh] { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-cta[b-8oe199qvjh] { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue); color: #fff; text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); transition: background 140ms ease, transform 80ms ease; } .sidebar-cta:hover[b-8oe199qvjh] { background: var(--blue-dk); color: #fff; text-decoration: none; } .sidebar-cta:active[b-8oe199qvjh] { transform: translateY(1px); } .sidebar-cta svg[b-8oe199qvjh] { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-search[b-8oe199qvjh] { position: relative; display: flex; align-items: center; margin: 0 0 14px; } .sidebar-search-icon[b-8oe199qvjh] { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; } .sidebar-search-input[b-8oe199qvjh] { width: 100%; padding: 8px 10px 8px 30px; border-radius: 8px; border: 1px solid var(--hairline-2); background: var(--bg-2); color: var(--text); font-family: var(--font-body); font-size: 13px; } .sidebar-search-input:focus[b-8oe199qvjh] { outline: none; border-color: var(--blue); background: var(--card); } .sidebar-recent[b-8oe199qvjh] { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); } .sidebar-recent-label[b-8oe199qvjh] { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 4px; } .sidebar-recent-link[b-8oe199qvjh] { padding: 5px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-recent-link:hover[b-8oe199qvjh] { background: var(--bg-2); color: var(--text); } .sidebar-nav[b-8oe199qvjh] .sidebar-link, .sidebar-link[b-8oe199qvjh] { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 600; transition: background 140ms ease, color 140ms ease; } .sidebar-nav[b-8oe199qvjh] .sidebar-link svg, .sidebar-link svg[b-8oe199qvjh] { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-nav[b-8oe199qvjh] .sidebar-link:hover, .sidebar-link:hover[b-8oe199qvjh] { background: var(--bg-muted); color: var(--heading); text-decoration: underline; } .sidebar-nav[b-8oe199qvjh] .sidebar-link.active, .sidebar-link.active[b-8oe199qvjh] { background: var(--blue-soft); color: var(--blue); } .sidebar-group[b-8oe199qvjh] { display: flex; flex-direction: column; margin: 0; padding: 0; } .sidebar-group > summary[b-8oe199qvjh] { cursor: pointer; list-style: none; user-select: none; } .sidebar-group > summary[b-8oe199qvjh]::-webkit-details-marker { display: none; } .sidebar-group > summary[b-8oe199qvjh]::marker { display: none; content: ""; } .sidebar-group-summary span[b-8oe199qvjh] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sidebar-group-summary .chev[b-8oe199qvjh] { width: 14px; height: 14px; flex-shrink: 0; transition: transform 200ms ease; color: var(--text-3); } .sidebar-group[open] > .sidebar-group-summary .chev[b-8oe199qvjh] { transform: rotate(90deg); color: var(--blue); } .sidebar-sub[b-8oe199qvjh] { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 8px 30px; margin-left: 8px; border-left: 1px solid var(--hairline); } .sidebar-sub-empty[b-8oe199qvjh] { padding: 6px 12px; color: var(--text-4); font-size: 12.5px; font-style: italic; } .sidebar-subgroup > summary[b-8oe199qvjh] { list-style: none; cursor: pointer; } .sidebar-subgroup > summary[b-8oe199qvjh]::-webkit-details-marker { display: none; } .sidebar-subgroup > summary[b-8oe199qvjh]::marker { display: none; content: ""; } .sidebar-subgroup-summary .chev[b-8oe199qvjh] { width: 13px; height: 13px; flex: none; color: var(--text-4); transition: transform 180ms ease; } .sidebar-subgroup[open] > .sidebar-subgroup-summary .chev[b-8oe199qvjh] { transform: rotate(90deg); } .sidebar-subsub[b-8oe199qvjh] { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 14px; margin: 1px 0 1px 6px; border-left: 1px solid var(--hairline); } .sidebar-nav[b-8oe199qvjh] .sidebar-sub-link, .sidebar-sub-link[b-8oe199qvjh] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 8px; color: var(--text-3); text-decoration: none; font-family: var(--font-body); font-size: 13px; font-weight: 500; transition: all 140ms ease; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav[b-8oe199qvjh] .sidebar-sub-link:hover, .sidebar-sub-link:hover[b-8oe199qvjh] { color: var(--heading); background: var(--bg-muted); text-decoration: underline; } .sidebar-nav[b-8oe199qvjh] .sidebar-sub-link.active, .sidebar-sub-link.active[b-8oe199qvjh] { color: var(--blue); background: var(--blue-soft); font-weight: 600; } .sidebar-nav[b-8oe199qvjh] .sidebar-sub-link.sub-add, .sidebar-sub-link.sub-add[b-8oe199qvjh] { color: var(--blue); font-weight: 600; } .sidebar-subhead[b-8oe199qvjh] { padding: 10px 12px 2px; color: var(--text-4); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .sidebar-subhead:first-child[b-8oe199qvjh] { padding-top: 2px; } .sub-count[b-8oe199qvjh] { background: var(--warning); color: #fff; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 6px; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0; } /* thin divider between the filings statuses and the corrections links */ .sidebar-sub-sep[b-8oe199qvjh] { height: 1px; margin: 6px 12px; background: var(--hairline, rgba(148,163,184,.22)); } /* Platform dashboard entry — visually distinct so it reads as "leave this app for the platform-admin shell," not another in-app section. Amber accent matches the topbar mark in PlatformAdminLayout. */ .sidebar-link--platform[b-8oe199qvjh] { margin-top: 12px; border-left: 3px solid #f59e0b; padding-left: 9px; } .sidebar-link--platform .platform-arrow[b-8oe199qvjh] { width: 14px; height: 14px; margin-left: auto; opacity: .6; } .sidebar-link--platform:hover .platform-arrow[b-8oe199qvjh] { opacity: 1; transform: translateX(2px); transition: transform .15s, opacity .15s; } /* /Components/Layout/NotificationBell.razor.rz.scp.css */ .cart-btn[b-7wjdszmw4e] { position: relative; width: 38px; height: 38px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--text-2); display: grid; place-items: center; transition: all 140ms ease; text-decoration: none; } .cart-btn:hover[b-7wjdszmw4e] { background: var(--icon-btn-hover-bg); color: var(--heading); border-color: var(--hairline); text-decoration: none; } .cart-btn svg[b-7wjdszmw4e] { width: 18px; height: 18px; display: block; } .cart-badge[b-7wjdszmw4e] { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warning); color: #fff; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--topbar-bg); } .nf-badge-action[b-7wjdszmw4e] { background: #dc2626; } /* /Components/Layout/PlatformAdminLayout.razor.rz.scp.css */ /* Platform Admin shell — scoped styles for the marker chip on the topbar. Everything else (sidebar, app-shell, topbar) inherits the site-wide app-shell CSS so the two shells feel like the same product family. */ /* Uses the site's --warning / --warning-bg / --warning-text tokens so light/dark themes flip automatically along with the rest of the shell. */ .topbar-platform-mark[b-dzaslpdy98] { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin-left: 8px; font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; color: var(--warning-text, var(--warning)); background: var(--warning-bg); border: 1px solid var(--warning); border-radius: 6px; text-transform: uppercase; white-space: nowrap; } .topbar-platform-mark svg[b-dzaslpdy98] { flex-shrink: 0; } /* Slim accent stripe along the topbar's bottom so operators feel the change of environment. */ .topbar--platform[b-dzaslpdy98] { position: relative; } .topbar--platform[b-dzaslpdy98]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--warning), color-mix(in oklab, var(--warning) 60%, transparent)); pointer-events: none; } /* /Components/Layout/PlatformNavMenu.razor.rz.scp.css */ /* PlatformNavMenu — mostly inherits the global sidebar CSS. Blazor CSS isolation means the `.sidebar-link svg` size rule that lives inside NavMenu.razor.css doesn't apply here, so the sidebar icons need their own sizing declaration. Only the exit link (return to customer app) gets a special treatment so it reads as "leave this shell" not "in-app nav." */ .sidebar-link svg[b-9dl32fk2jw], .sidebar-sub-link svg[b-9dl32fk2jw] { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-link--exit[b-9dl32fk2jw] { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px dashed rgba(11, 27, 51, .12); color: var(--ink-3, #6b7280); font-size: 12.5px; } .sidebar-link--exit:hover[b-9dl32fk2jw] { color: var(--ink, #0b1b33); } .sidebar-link--exit svg[b-9dl32fk2jw] { width: 15px; height: 15px; } .sidebar-inner[b-9dl32fk2jw] { display: flex; flex-direction: column; height: 100%; padding: 16px 0; } .sidebar-brand[b-9dl32fk2jw] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px 18px; text-decoration: none; margin: 0 8px 8px; border-bottom: 1px solid var(--hairline); } .sidebar-brand:hover[b-9dl32fk2jw] { text-decoration: none; } .sidebar-brand-img[b-9dl32fk2jw] { height: 46px; width: auto; max-width: 100%; display: block; background: transparent; } .sidebar-brand-img.brand-dark[b-9dl32fk2jw] { display: none; } :root[data-theme="dark"] .sidebar-brand-img.brand-light[b-9dl32fk2jw] { display: none; } :root[data-theme="dark"] .sidebar-brand-img.brand-dark[b-9dl32fk2jw] { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar-brand-img.brand-light[b-9dl32fk2jw] { display: none; } :root:not([data-theme="light"]) .sidebar-brand-img.brand-dark[b-9dl32fk2jw] { display: block; } } .sidebar-brand-mark[b-9dl32fk2jw] { width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue); } .sidebar-brand-mark svg[b-9dl32fk2jw] { width: 100%; height: 100%; display: block; } .sidebar-brand-text[b-9dl32fk2jw] { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.04em; color: var(--heading); } .sidebar-nav[b-9dl32fk2jw] { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-cta[b-9dl32fk2jw] { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue); color: #fff; text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); transition: background 140ms ease, transform 80ms ease; } .sidebar-cta:hover[b-9dl32fk2jw] { background: var(--blue-dk); color: #fff; text-decoration: none; } .sidebar-cta:active[b-9dl32fk2jw] { transform: translateY(1px); } .sidebar-cta svg[b-9dl32fk2jw] { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-search[b-9dl32fk2jw] { position: relative; display: flex; align-items: center; margin: 0 0 14px; } .sidebar-search-icon[b-9dl32fk2jw] { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; } .sidebar-search-input[b-9dl32fk2jw] { width: 100%; padding: 8px 10px 8px 30px; border-radius: 8px; border: 1px solid var(--hairline-2); background: var(--bg-2); color: var(--text); font-family: var(--font-body); font-size: 13px; } .sidebar-search-input:focus[b-9dl32fk2jw] { outline: none; border-color: var(--blue); background: var(--card); } .sidebar-recent[b-9dl32fk2jw] { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); } .sidebar-recent-label[b-9dl32fk2jw] { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 4px; } .sidebar-recent-link[b-9dl32fk2jw] { padding: 5px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-recent-link:hover[b-9dl32fk2jw] { background: var(--bg-2); color: var(--text); } .sidebar-nav[b-9dl32fk2jw] .sidebar-link, .sidebar-link[b-9dl32fk2jw] { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 600; transition: background 140ms ease, color 140ms ease; } .sidebar-nav[b-9dl32fk2jw] .sidebar-link svg, .sidebar-link svg[b-9dl32fk2jw] { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-nav[b-9dl32fk2jw] .sidebar-link:hover, .sidebar-link:hover[b-9dl32fk2jw] { background: var(--bg-muted); color: var(--heading); text-decoration: underline; } .sidebar-nav[b-9dl32fk2jw] .sidebar-link.active, .sidebar-link.active[b-9dl32fk2jw] { background: var(--blue-soft); color: var(--blue); } .sidebar-group[b-9dl32fk2jw] { display: flex; flex-direction: column; margin: 0; padding: 0; } .sidebar-group > summary[b-9dl32fk2jw] { cursor: pointer; list-style: none; user-select: none; } .sidebar-group > summary[b-9dl32fk2jw]::-webkit-details-marker { display: none; } .sidebar-group > summary[b-9dl32fk2jw]::marker { display: none; content: ""; } .sidebar-group-summary span[b-9dl32fk2jw] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sidebar-group-summary .chev[b-9dl32fk2jw] { width: 14px; height: 14px; flex-shrink: 0; transition: transform 200ms ease; color: var(--text-3); } .sidebar-group[open] > .sidebar-group-summary .chev[b-9dl32fk2jw] { transform: rotate(90deg); color: var(--blue); } .sidebar-sub[b-9dl32fk2jw] { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 8px 30px; margin-left: 8px; border-left: 1px solid var(--hairline); } .sidebar-sub-empty[b-9dl32fk2jw] { padding: 6px 12px; color: var(--text-4); font-size: 12.5px; font-style: italic; } .sidebar-subgroup > summary[b-9dl32fk2jw] { list-style: none; cursor: pointer; } .sidebar-subgroup > summary[b-9dl32fk2jw]::-webkit-details-marker { display: none; } .sidebar-subgroup > summary[b-9dl32fk2jw]::marker { display: none; content: ""; } .sidebar-subgroup-summary .chev[b-9dl32fk2jw] { width: 13px; height: 13px; flex: none; color: var(--text-4); transition: transform 180ms ease; } .sidebar-subgroup[open] > .sidebar-subgroup-summary .chev[b-9dl32fk2jw] { transform: rotate(90deg); } .sidebar-subsub[b-9dl32fk2jw] { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 14px; margin: 1px 0 1px 6px; border-left: 1px solid var(--hairline); } .sidebar-nav[b-9dl32fk2jw] .sidebar-sub-link, .sidebar-sub-link[b-9dl32fk2jw] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 8px; color: var(--text-3); text-decoration: none; font-family: var(--font-body); font-size: 13px; font-weight: 500; transition: all 140ms ease; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav[b-9dl32fk2jw] .sidebar-sub-link:hover, .sidebar-sub-link:hover[b-9dl32fk2jw] { color: var(--heading); background: var(--bg-muted); text-decoration: underline; } .sidebar-nav[b-9dl32fk2jw] .sidebar-sub-link.active, .sidebar-sub-link.active[b-9dl32fk2jw] { color: var(--blue); background: var(--blue-soft); font-weight: 600; } .sidebar-nav[b-9dl32fk2jw] .sidebar-sub-link.sub-add, .sidebar-sub-link.sub-add[b-9dl32fk2jw] { color: var(--blue); font-weight: 600; } .sidebar-subhead[b-9dl32fk2jw] { padding: 10px 12px 2px; color: var(--text-4); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .sidebar-subhead:first-child[b-9dl32fk2jw] { padding-top: 2px; } .sub-count[b-9dl32fk2jw] { background: var(--warning); color: #fff; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 6px; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0; } /* thin divider between the filings statuses and the corrections links */ .sidebar-sub-sep[b-9dl32fk2jw] { height: 1px; margin: 6px 12px; background: var(--hairline, rgba(148,163,184,.22)); } /* Platform dashboard entry — visually distinct so it reads as "leave this app for the platform-admin shell," not another in-app section. Amber accent matches the topbar mark in PlatformAdminLayout. */ .sidebar-link--platform[b-9dl32fk2jw] { margin-top: 12px; border-left: 3px solid #f59e0b; padding-left: 9px; } .sidebar-link--platform .platform-arrow[b-9dl32fk2jw] { width: 14px; height: 14px; margin-left: auto; opacity: .6; } .sidebar-link--platform:hover .platform-arrow[b-9dl32fk2jw] { opacity: 1; transform: translateX(2px); transition: transform .15s, opacity .15s; } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-8lpmvyl7ct], .components-reconnect-repeated-attempt-visible[b-8lpmvyl7ct], .components-reconnect-failed-visible[b-8lpmvyl7ct], .components-pause-visible[b-8lpmvyl7ct], .components-resume-failed-visible[b-8lpmvyl7ct], .components-rejoining-animation[b-8lpmvyl7ct] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-retrying[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-failed[b-8lpmvyl7ct], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8lpmvyl7ct] { display: block; } #components-reconnect-modal[b-8lpmvyl7ct] { background-color: var(--bg, 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-8lpmvyl7ct 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-8lpmvyl7ct 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8lpmvyl7ct 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-8lpmvyl7ct]::backdrop { background-color: rgba(0, 0, 0, 0.4); animation: components-reconnect-modal-fadeInOpacity-b-8lpmvyl7ct 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-8lpmvyl7ct { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-8lpmvyl7ct { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-8lpmvyl7ct { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-8lpmvyl7ct] { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #components-reconnect-modal p[b-8lpmvyl7ct] { margin: 0; text-align: center; } #components-reconnect-modal button[b-8lpmvyl7ct] { border: 0; background-color: var(--blue); color: white; padding: 4px 24px; border-radius: 4px; } #components-reconnect-modal button:hover[b-8lpmvyl7ct] { background-color: var(--blue-dk); } #components-reconnect-modal button:active[b-8lpmvyl7ct] { background-color: var(--blue-press); } .components-rejoining-animation[b-8lpmvyl7ct] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-8lpmvyl7ct] { position: absolute; border: 3px solid var(--blue); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-8lpmvyl7ct 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-8lpmvyl7ct] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-8lpmvyl7ct { 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/Layout/TopbarActions.razor.rz.scp.css */ .topbar-actions[b-r4dj39b6l7] { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 6px; } /* Payer scope selector + return-to-firm, relocated from the sidebar into the topbar. order:-1 + margin-right:auto floats the group to the far LEFT of the flex-end topbar. */ .topbar-scope-group[b-r4dj39b6l7] { order: -1; margin-right: auto; display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-drop[b-r4dj39b6l7] { position: relative; margin: 0; } .topbar-drop > summary[b-r4dj39b6l7] { display: flex; align-items: center; gap: 9px; padding: 5px 10px; } .topbar-drop .scope-ico[b-r4dj39b6l7] { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; } .topbar-drop .scope-co[b-r4dj39b6l7] { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .topbar-drop .scope-eyebrow[b-r4dj39b6l7] { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .topbar-drop .scope-name[b-r4dj39b6l7] { font-weight: 700; font-size: 12.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-payer .scope-name[b-r4dj39b6l7] { max-width: 150px; } /* In the 56px topbar the dropdowns must overlay, not push the bar taller. */ .topbar-drop .scope-menu[b-r4dj39b6l7] { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 232px; margin-top: 0; } .topbar-year .scope-menu[b-r4dj39b6l7] { min-width: 168px; } .topbar-scope-exit[b-r4dj39b6l7] { margin: 0; padding: 6px 11px; white-space: nowrap; font-size: 12px; } @media (max-width: 880px) { .topbar-payer .scope-name[b-r4dj39b6l7] { max-width: 96px; } .topbar-drop .scope-ico[b-r4dj39b6l7] { display: none; } .topbar-scope-exit[b-r4dj39b6l7] { display: none; } } /* Phones: the row can't hold every label, so it collapses to icons. Without this the actions overflow the flex-end row and spill off the LEFT edge — the "bar drifts left" the fix is for. Every control stays reachable; only the text labels are dropped. */ @media (max-width: 560px) { .topbar-actions[b-r4dj39b6l7] { gap: 4px; } .topbar-scope-group[b-r4dj39b6l7] { gap: 4px; } .topbar-drop > summary[b-r4dj39b6l7] { gap: 5px; padding: 6px 8px; } /* Payer names run long — collapse that switch to just its glyph. */ .topbar-payer > summary[b-r4dj39b6l7] { padding: 6px 7px; } .topbar-payer .scope-ico[b-r4dj39b6l7] { display: block; } .topbar-payer .scope-co[b-r4dj39b6l7], .topbar-payer .scope-chev[b-r4dj39b6l7] { display: none; } /* Year is short and worth seeing at a glance in a tax app — keep the number, drop the label + chevron. */ .topbar-year .scope-eyebrow[b-r4dj39b6l7], .topbar-year .scope-chev[b-r4dj39b6l7] { display: none; } .topbar-year .scope-name[b-r4dj39b6l7] { font-size: 13px; } /* Account button becomes avatar-only; the name and chevron are the biggest offenders on a phone. */ .account-menu[b-r4dj39b6l7] { margin-left: 2px; padding-left: 6px; } .account-link[b-r4dj39b6l7] { padding: 4px; gap: 0; } .account-name[b-r4dj39b6l7], .account-chev[b-r4dj39b6l7] { display: none; } } .icon-btn[b-r4dj39b6l7] { position: relative; width: 38px; height: 38px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: all 140ms ease; text-decoration: none; padding: 0; } .icon-btn:hover[b-r4dj39b6l7] { background: var(--icon-btn-hover-bg); color: var(--heading); border-color: var(--hairline); } .icon-btn svg[b-r4dj39b6l7] { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun[b-r4dj39b6l7] { display: none; } .theme-toggle .icon-moon[b-r4dj39b6l7] { display: block; } .theme-toggle svg[b-r4dj39b6l7] { transition: transform 220ms ease; } .theme-toggle:hover svg[b-r4dj39b6l7] { transform: rotate(18deg); } .cart-btn[b-r4dj39b6l7] { position: relative; width: 38px; height: 38px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--text-2); display: grid; place-items: center; transition: all 140ms ease; text-decoration: none; } .cart-btn:hover[b-r4dj39b6l7] { background: var(--icon-btn-hover-bg); color: var(--heading); border-color: var(--hairline); text-decoration: none; } .cart-btn svg[b-r4dj39b6l7] { width: 18px; height: 18px; } .cart-badge[b-r4dj39b6l7] { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warning); color: #fff; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--topbar-bg); } .account-menu[b-r4dj39b6l7] { position: relative; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--hairline); } .account-menu > summary[b-r4dj39b6l7] { list-style: none; cursor: pointer; user-select: none; } .account-menu > summary[b-r4dj39b6l7]::-webkit-details-marker { display: none; } .account-menu > summary[b-r4dj39b6l7]::marker { display: none; content: ""; } .account-link[b-r4dj39b6l7] { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--bg-muted); color: var(--heading); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; transition: background 140ms ease, color 140ms ease; } .account-menu summary.account-link:hover[b-r4dj39b6l7], .account-link:hover[b-r4dj39b6l7] { background: var(--blue-soft); color: var(--blue-dk); text-decoration: underline; } .account-avatar[b-r4dj39b6l7] { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; text-transform: uppercase; flex-shrink: 0; } .account-name[b-r4dj39b6l7] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chev[b-r4dj39b6l7] { width: 12px; height: 12px; color: var(--text-3); transition: transform 200ms ease; flex-shrink: 0; } .account-menu[open] .account-chev[b-r4dj39b6l7] { transform: rotate(180deg); color: var(--blue); } .account-menu-dropdown[b-r4dj39b6l7] { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .12), 0 12px 32px -8px rgba(15, 23, 42, .18); padding: 6px; z-index: 50; display: flex; flex-direction: column; gap: 1px; animation: account-menu-pop-b-r4dj39b6l7 160ms ease; } @keyframes account-menu-pop-b-r4dj39b6l7 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .account-menu-item[b-r4dj39b6l7] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); background: transparent; border: none; width: 100%; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; cursor: pointer; text-align: left; transition: background 140ms ease, color 140ms ease; } .account-menu-item svg[b-r4dj39b6l7] { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); } .account-menu-item:hover[b-r4dj39b6l7] { background: var(--bg-muted); color: var(--heading); text-decoration: underline; } .account-menu-item:hover svg[b-r4dj39b6l7] { color: var(--heading); } .account-menu-item.account-menu-signout[b-r4dj39b6l7] { color: var(--danger-text); } .account-menu-item.account-menu-signout:hover[b-r4dj39b6l7] { background: var(--danger-bg); color: var(--danger-text); } .account-menu-item.account-menu-signout svg[b-r4dj39b6l7] { color: var(--danger); } .account-menu-sep[b-r4dj39b6l7] { height: 1px; background: var(--hairline); margin: 4px 4px; } .account-menu-form[b-r4dj39b6l7] { margin: 0; } .btn-pill[b-r4dj39b6l7] { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 13px; text-decoration: none; transition: all 160ms ease; border: 1.5px solid transparent; } .btn-pill.primary[b-r4dj39b6l7] { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: var(--shadow-button); } .btn-pill.primary:hover[b-r4dj39b6l7] { background: var(--blue-dk); border-color: var(--blue-dk); color: #fff; text-decoration: none; } .topnav-link.signin[b-r4dj39b6l7] { color: var(--heading); font-weight: 600; font-size: 13.5px; padding: 8px 12px; text-decoration: none; } .topnav-link.signin:hover[b-r4dj39b6l7] { color: var(--blue); text-decoration: underline; } @media (max-width: 880px) { .account-name[b-r4dj39b6l7] { display: none; } } .scope-meta[b-r4dj39b6l7] { color: var(--text-3); font-size: .78rem; font-variant-numeric: tabular-nums; } /* /Components/Pages/Admin/PricingEditor.razor.rz.scp.css */ /* Admin pricing editor — scoped. Utilitarian, dense, legible: a control surface, not a landing page. */ .pe[b-krd5xpmcg5] { --pe-ink: #101828; --pe-muted: #667085; --pe-line: #e4e7ec; --pe-line-soft: #eef0f3; --pe-accent: #2563eb; --pe-accent-soft: #eef2ff; --pe-surface: #fff; --pe-bg: #f7f8fa; max-width: 76rem; margin: 1.5rem auto 3rem; padding: 0 1.25rem; color: var(--pe-ink); } .pe__head[b-krd5xpmcg5] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-bottom: 1.25rem; } .pe__eyebrow[b-krd5xpmcg5] { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pe-accent); } .pe__head h1[b-krd5xpmcg5] { margin: .1rem 0 0; font-size: 1.5rem; letter-spacing: -.01em; } .pe__lede[b-krd5xpmcg5] { margin: 0; color: var(--pe-muted); max-width: 52rem; line-height: 1.55; font-size: .92rem; } /* Tier selector — a segmented control */ .pe__tierbar[b-krd5xpmcg5] { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; flex-wrap: wrap; } .pe__tierlabel[b-krd5xpmcg5] { font-size: .78rem; font-weight: 600; color: var(--pe-muted); text-transform: uppercase; letter-spacing: .05em; } .pe__pills[b-krd5xpmcg5] { display: inline-flex; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; padding: 3px; gap: 2px; } .pe__pill[b-krd5xpmcg5] { border: none; background: transparent; color: var(--pe-muted); font: inherit; font-size: .86rem; font-weight: 600; padding: .38rem .85rem; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } .pe__pill:hover[b-krd5xpmcg5] { color: var(--pe-ink); } .pe__pill.is-on[b-krd5xpmcg5] { background: var(--pe-surface); color: var(--pe-ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); } /* Two-pane body */ .pe__body[b-krd5xpmcg5] { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; align-items: start; } /* Left rail — grouped service nav */ .pe__rail[b-krd5xpmcg5] { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 14px; padding: .5rem; position: sticky; top: 1rem; } .pe__railgrp[b-krd5xpmcg5] { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pe-muted); padding: .7rem .6rem .3rem; } .pe__railitem[b-krd5xpmcg5] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; border: none; background: transparent; color: var(--pe-ink); text-align: left; font: inherit; font-size: .88rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; transition: background .1s; } .pe__railitem:hover[b-krd5xpmcg5] { background: var(--pe-bg); } .pe__railitem.is-on[b-krd5xpmcg5] { background: var(--pe-accent-soft); color: var(--pe-accent); font-weight: 600; } .pe__tag[b-krd5xpmcg5] { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6941c6; background: #f4f0ff; padding: .1rem .35rem; border-radius: 5px; } /* Right panel — the ladder editor */ .pe__panel[b-krd5xpmcg5] { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.25rem 1.4rem 1.5rem; min-width: 0; } .pe__panel-head[b-krd5xpmcg5] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .pe__panel-head h2[b-krd5xpmcg5] { margin: 0; font-size: 1.15rem; } .pe__meta[b-krd5xpmcg5] { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--pe-muted); margin-top: .25rem; } .pe__meta code[b-krd5xpmcg5] { background: var(--pe-bg); padding: .05rem .35rem; border-radius: 5px; font-size: .82em; } .pe__dot[b-krd5xpmcg5] { opacity: .5; } .pe__hint[b-krd5xpmcg5] { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: .7rem .9rem; margin: 0 0 1.1rem; font-size: .86rem; line-height: 1.5; color: #7a5c00; } .pe__hint em[b-krd5xpmcg5] { font-style: normal; font-weight: 600; } .pe__bundle[b-krd5xpmcg5] { display: flex; align-items: stretch; gap: .5rem; margin: 0 0 .5rem; flex-wrap: wrap; } .pe__bnum[b-krd5xpmcg5] { display: flex; flex-direction: column; gap: .1rem; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; padding: .5rem .8rem; min-width: 96px; } .pe__bnum span[b-krd5xpmcg5] { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pe-muted); } .pe__bnum strong[b-krd5xpmcg5] { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .pe__bnum--total[b-krd5xpmcg5] { background: var(--pe-accent-soft); border-color: color-mix(in oklab, var(--pe-accent) 30%, transparent); } .pe__bnum--total strong[b-krd5xpmcg5] { color: var(--pe-accent); } .pe__bplus[b-krd5xpmcg5], .pe__beq[b-krd5xpmcg5] { display: flex; align-items: center; color: var(--pe-muted); font-size: 1.1rem; font-weight: 700; } .pe__bnote[b-krd5xpmcg5] { font-size: .78rem; color: var(--pe-muted); margin: 0 0 1rem; } .pe__grid[b-krd5xpmcg5] { width: 100%; border-collapse: collapse; } .pe__grid th[b-krd5xpmcg5] { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pe-muted); padding: .3rem .5rem .5rem; font-weight: 600; } .pe__grid td[b-krd5xpmcg5] { padding: .28rem .5rem; border-top: 1px solid var(--pe-line-soft); } .pe__grid input[b-krd5xpmcg5] { width: 100%; padding: .4rem .55rem; border-radius: 8px; border: 1px solid var(--pe-line); font: inherit; font-size: .9rem; background: var(--pe-surface); color: var(--pe-ink); } .pe__grid input:focus-visible[b-krd5xpmcg5] { outline: 2px solid var(--pe-accent); outline-offset: 0; border-color: transparent; } .pe__open[b-krd5xpmcg5] { color: #98a2b3; font-style: italic; font-size: .85rem; } .pe__x[b-krd5xpmcg5] { border: none; background: none; color: #b42318; cursor: pointer; font-size: 1rem; line-height: 1; padding: .2rem .3rem; border-radius: 6px; } .pe__x:hover:not(:disabled)[b-krd5xpmcg5] { background: #fef3f2; } .pe__x:disabled[b-krd5xpmcg5] { color: var(--pe-line); cursor: default; } .pe__grid-actions[b-krd5xpmcg5] { margin: .6rem 0 1.1rem; } .pe__errors[b-krd5xpmcg5] { background: #fef3f2; border: 1px solid #fda29b; border-radius: 10px; padding: .75rem 1rem; margin: 1rem 0; font-size: .88rem; color: #912018; } .pe__errors ul[b-krd5xpmcg5] { margin: .35rem 0 0; padding-left: 1.1rem; } .pe__preview[b-krd5xpmcg5], .pe__apply[b-krd5xpmcg5] { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--pe-line-soft); margin-top: 1rem; } .pe__preview label[b-krd5xpmcg5], .pe__apply label[b-krd5xpmcg5] { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--pe-muted); } .pe__preview label[b-krd5xpmcg5] { flex-direction: row; align-items: center; gap: .5rem; } .pe__preview input[b-krd5xpmcg5], .pe__apply input[b-krd5xpmcg5] { padding: .4rem .55rem; border-radius: 8px; border: 1px solid var(--pe-line); font: inherit; } .pe__preview input[b-krd5xpmcg5] { width: 6rem; } .pe__preview-nums[b-krd5xpmcg5] { display: flex; gap: 1.5rem; font-size: .95rem; align-items: center; } .pe__up[b-krd5xpmcg5] { color: #b42318; font-weight: 600; } .pe__down[b-krd5xpmcg5] { color: #067647; font-weight: 600; } .pe__btn[b-krd5xpmcg5] { padding: .52rem 1.15rem; border-radius: 9px; border: 1px solid transparent; background: var(--pe-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: filter .12s; } .pe__btn:hover:not(:disabled)[b-krd5xpmcg5] { filter: brightness(1.06); } .pe__btn:disabled[b-krd5xpmcg5] { opacity: .5; cursor: default; } .pe__btn--quiet[b-krd5xpmcg5] { background: transparent; color: var(--pe-ink); border-color: var(--pe-line); } .pe__btn--quiet:hover:not(:disabled)[b-krd5xpmcg5] { background: var(--pe-bg); filter: none; } .pe__banner[b-krd5xpmcg5] { font-size: .88rem; align-self: center; } .pe__ok[b-krd5xpmcg5] { color: #067647; } .pe__err[b-krd5xpmcg5] { color: #b42318; } .pe__muted[b-krd5xpmcg5] { color: var(--pe-muted); } @media (max-width: 760px) { .pe__body[b-krd5xpmcg5] { grid-template-columns: minmax(0, 1fr); } .pe__rail[b-krd5xpmcg5] { position: static; display: flex; flex-wrap: wrap; gap: .25rem; } .pe__railgrp[b-krd5xpmcg5] { width: 100%; } } /* /Components/Pages/CopyB/FirmPrint.razor.rz.scp.css */ /* Firm print center page — mock header pattern (.eyebrow / display h1 / .lede / year chip) from the approved Copy B Print Center mock (artifact 7e3b6f6c), light-theme token mapping (blue = #0385FF family) with the mock's dark tokens as the prefers-color-scheme override. */ .printctr[b-mjbanslpgz] { --pd-card: #ffffff; --pd-soft: #EFF5FD; --pd-ink: #0B1220; --pd-ink-2: #3D4859; --pd-muted: #6B7688; --pd-blue: #0385FF; --pd-blue-dk: #0270D9; --pd-blue-line: rgba(3,133,255,.24); --pd-hair: #E5EBF3; --pd-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --pd-font-body: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; max-width: 1120px; margin: 0 auto; padding: 8px 4px 64px; color: var(--pd-ink); font-family: var(--pd-font-body); } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr[b-mjbanslpgz] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr[b-mjbanslpgz] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); } } /* ── mock header pattern ─────────────────────────────── */ .printctr-top[b-mjbanslpgz] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .printctr-top .eyebrow[b-mjbanslpgz] { font-family: var(--pd-font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-blue); } .printctr-top h1[b-mjbanslpgz] { font-family: var(--pd-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.04; margin: 12px 0 8px; text-wrap: balance; color: var(--pd-ink); } .printctr-top .lede[b-mjbanslpgz] { color: var(--pd-ink-2); font-size: 15.5px; line-height: 1.6; max-width: 640px; margin: 0; } .printctr-head-right[b-mjbanslpgz] { display: flex; align-items: center; gap: 12px; } .printctr-year[b-mjbanslpgz] { font-size: 12.5px; font-weight: 600; color: var(--pd-muted); padding: 7px 13px; border: 1px solid var(--pd-hair); border-radius: 999px; background: var(--pd-soft); white-space: nowrap; } /* ── buttons (mock .btn) ─────────────────────────────── */ .cbp-btn[b-mjbanslpgz] { font-family: var(--pd-font-body); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pd-ink); background: var(--pd-soft); border: 1px solid var(--pd-hair); border-radius: 9px; padding: 8px 13px; cursor: pointer; text-decoration: none; transition: .14s; } .cbp-btn:hover[b-mjbanslpgz] { border-color: var(--pd-blue-line); color: var(--pd-blue-dk); } /* ── loading / notes ─────────────────────────────────── */ .printctr-load[b-mjbanslpgz] { display: flex; align-items: center; gap: 12px; color: var(--pd-muted); padding: 48px 0; justify-content: center; } .cbp-spin[b-mjbanslpgz] { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--pd-hair); border-top-color: var(--pd-blue); display: inline-block; animation: pd-rot-b-mjbanslpgz .7s linear infinite; } .cbp-spin-lg[b-mjbanslpgz] { width: 26px; height: 26px; border-width: 3px; } @keyframes pd-rot-b-mjbanslpgz { to { transform: rotate(360deg); } } .printctr-note[b-mjbanslpgz] { padding: 28px; border: 1px solid var(--pd-hair); border-radius: 15px; color: var(--pd-muted); text-align: center; background: var(--pd-card); } .printctr-note-err[b-mjbanslpgz] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr-note-err[b-mjbanslpgz] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr-note-err[b-mjbanslpgz] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } } /* /Components/Pages/CopyB/PrintDesk.razor.rz.scp.css */ /* Print desk — styled to the approved Copy B Print Center mock (artifact 7e3b6f6c): mock header pattern (.eyebrow / display h1 / .lede / year chip) + the mock's .pcard by-payer cards, with the mock's light-theme tokens (blue = #0385FF family) and the mock's dark tokens as the prefers-color-scheme override. */ .printctr[b-ct3a1wr7eo] { --pd-card: #ffffff; --pd-soft: #EFF5FD; --pd-soft-2: #ECF2F9; --pd-ink: #0B1220; --pd-ink-2: #3D4859; --pd-muted: #6B7688; --pd-blue: #0385FF; --pd-blue-dk: #0270D9; --pd-blue-soft: #EAF4FF; --pd-blue-line: rgba(3,133,255,.24); --pd-hair: #E5EBF3; --pd-ok: #059669; --pd-warn: #B45309; --pd-dl: #0D9488; --pd-dl-soft: rgba(13,148,136,.10); --pd-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --pd-font-body: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --pd-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; max-width: 1120px; margin: 0 auto; padding: 8px 4px 64px; color: var(--pd-ink); font-family: var(--pd-font-body); } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr[b-ct3a1wr7eo] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-soft-2: #141E33; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-soft: rgba(61,158,255,.12); --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); --pd-ok: #34D399; --pd-warn: #FBBF24; --pd-dl: #2DD4BF; --pd-dl-soft: rgba(45,212,191,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr[b-ct3a1wr7eo] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-soft-2: #141E33; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-soft: rgba(61,158,255,.12); --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); --pd-ok: #34D399; --pd-warn: #FBBF24; --pd-dl: #2DD4BF; --pd-dl-soft: rgba(45,212,191,.14); } } /* ── mock header pattern ─────────────────────────────── */ .printctr-top[b-ct3a1wr7eo] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .printctr-top .eyebrow[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-blue); } .printctr-top h1[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.04; margin: 12px 0 8px; text-wrap: balance; color: var(--pd-ink); } .printctr-top .lede[b-ct3a1wr7eo] { color: var(--pd-ink-2); font-size: 15.5px; line-height: 1.6; max-width: 640px; margin: 0; } .printctr-head-right[b-ct3a1wr7eo] { display: flex; align-items: center; gap: 12px; } .printctr-year[b-ct3a1wr7eo] { font-size: 12.5px; font-weight: 600; color: var(--pd-muted); padding: 7px 13px; border: 1px solid var(--pd-hair); border-radius: 999px; background: var(--pd-soft); white-space: nowrap; } /* ── buttons (mock .btn / .btn.primary) ──────────────── */ .cbp-btn[b-ct3a1wr7eo] { font-family: var(--pd-font-body); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pd-ink); background: var(--pd-soft); border: 1px solid var(--pd-hair); border-radius: 9px; padding: 8px 13px; cursor: pointer; text-decoration: none; transition: .14s; } .cbp-btn:hover[b-ct3a1wr7eo] { border-color: var(--pd-blue-line); color: var(--pd-blue-dk); } .cbp-btn-primary[b-ct3a1wr7eo] { background: linear-gradient(135deg, var(--pd-blue), var(--pd-blue-dk)); color: #04121f; border-color: transparent; box-shadow: 0 6px 18px var(--pd-blue-line); } .cbp-btn-primary:hover[b-ct3a1wr7eo] { filter: brightness(1.06); color: #04121f; } /* ── loading / notes ─────────────────────────────────── */ .printctr-load[b-ct3a1wr7eo] { display: flex; align-items: center; gap: 12px; color: var(--pd-muted); padding: 48px 0; justify-content: center; } .printctr-note[b-ct3a1wr7eo] { padding: 28px; border: 1px solid var(--pd-hair); border-radius: 15px; color: var(--pd-muted); text-align: center; background: var(--pd-card); } .printctr-note-err[b-ct3a1wr7eo] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; } .cbp-spin[b-ct3a1wr7eo] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--pd-hair); border-top-color: var(--pd-blue); display: inline-block; animation: pd-rot-b-ct3a1wr7eo .7s linear infinite; } @keyframes pd-rot-b-ct3a1wr7eo { to { transform: rotate(360deg); } } .printctr-year-link[b-ct3a1wr7eo] { font-weight: 700; color: var(--pd-blue); text-decoration: none; margin: 0 4px; } .printctr-year-link:hover[b-ct3a1wr7eo] { text-decoration: underline; } /* ── stat tiles (scoped/solo) — .pcard visual language ── */ .desk-stats[b-ct3a1wr7eo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; } .desk-stat[b-ct3a1wr7eo] { display: flex; flex-direction: column; gap: 2px; padding: 18px; border: 1px solid var(--pd-hair); border-radius: 16px; background: var(--pd-card); text-decoration: none; color: inherit; transition: .15s; } .desk-stat:not(.desk-stat-quiet):hover[b-ct3a1wr7eo] { border-color: var(--pd-blue-line); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); } .desk-stat b[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--pd-blue-dk); font-variant-numeric: tabular-nums; } .desk-stat b.ok[b-ct3a1wr7eo] { color: var(--pd-ok); } .desk-stat b.dl[b-ct3a1wr7eo] { color: var(--pd-dl); } .desk-stat b.warn[b-ct3a1wr7eo] { color: var(--pd-warn); } .desk-stat span[b-ct3a1wr7eo] { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pd-muted); } .desk-stat-quiet[b-ct3a1wr7eo] { background: transparent; } .desk-stat-quiet b[b-ct3a1wr7eo] { color: var(--pd-ink); } .desk-progress[b-ct3a1wr7eo] { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .desk-progress-bar[b-ct3a1wr7eo] { flex: 1; height: 8px; border-radius: 999px; background: var(--pd-soft-2); overflow: hidden; } .desk-progress-fill[b-ct3a1wr7eo] { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pd-blue), var(--pd-dl)); transition: width .3s ease; } .desk-progress-label[b-ct3a1wr7eo] { font-size: 12.5px; color: var(--pd-muted); white-space: nowrap; } .desk-h2[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; } /* ── by-payer cards (mock .pcard, verbatim) ──────────── */ .pcard-grid[b-ct3a1wr7eo] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .pcard[b-ct3a1wr7eo] { border: 1px solid var(--pd-hair); border-radius: 16px; padding: 18px; background: var(--pd-card); display: flex; flex-direction: column; gap: 13px; transition: .15s; } .pcard:hover[b-ct3a1wr7eo] { border-color: var(--pd-blue-line); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); } .pcard-top[b-ct3a1wr7eo] { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pcard-name[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-weight: 700; font-size: 16px; } .pcard-tin[b-ct3a1wr7eo] { font-family: var(--pd-font-mono); font-size: 12px; color: var(--pd-muted); margin-top: 3px; } .pcard-big[b-ct3a1wr7eo] { text-align: right; } .pcard-big b[b-ct3a1wr7eo] { font-family: var(--pd-font-display); font-size: 26px; font-weight: 800; color: var(--pd-blue-dk); line-height: 1; display: block; } .pcard-big span[b-ct3a1wr7eo] { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pd-muted); } .pcard-stats[b-ct3a1wr7eo] { display: flex; gap: 8px; font-size: 11.5px; } .pcard-stats .stat[b-ct3a1wr7eo] { padding: 3px 9px; border-radius: 999px; background: var(--pd-soft-2); color: var(--pd-muted); font-weight: 600; } .pcard-stats .stat.on-print[b-ct3a1wr7eo] { background: var(--pd-blue-soft); color: var(--pd-blue-dk); } .pcard-stats .stat.on-dl[b-ct3a1wr7eo] { background: var(--pd-dl-soft); color: var(--pd-dl); } .pcard-bar[b-ct3a1wr7eo] { height: 6px; border-radius: 999px; background: var(--pd-soft-2); overflow: hidden; } .pcard-bar i[b-ct3a1wr7eo] { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pd-blue), var(--pd-dl)); } .pcard-open[b-ct3a1wr7eo] { font-size: 13px; font-weight: 600; color: var(--pd-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .pcard-open:hover[b-ct3a1wr7eo] { gap: 8px; } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr-note-err[b-ct3a1wr7eo] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr-note-err[b-ct3a1wr7eo] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } } @media (prefers-reduced-motion: reduce) { .pcard[b-ct3a1wr7eo], .desk-stat[b-ct3a1wr7eo], .desk-progress-fill[b-ct3a1wr7eo], .cbp-spin[b-ct3a1wr7eo], .pcard-open[b-ct3a1wr7eo] { animation: none !important; transition: none !important; } } /* /Components/Pages/CopyB/SinglePayerPrint.razor.rz.scp.css */ /* Single-payer print page — mock header pattern (.eyebrow / display h1 / .lede / year chip) from the approved Copy B Print Center mock (artifact 7e3b6f6c), light-theme token mapping (blue = #0385FF family) with the mock's dark tokens as the prefers-color-scheme override. */ .printctr[b-v1alt9csma] { --pd-card: #ffffff; --pd-soft: #EFF5FD; --pd-ink: #0B1220; --pd-ink-2: #3D4859; --pd-muted: #6B7688; --pd-blue: #0385FF; --pd-blue-dk: #0270D9; --pd-blue-line: rgba(3,133,255,.24); --pd-hair: #E5EBF3; --pd-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --pd-font-body: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; max-width: 1120px; margin: 0 auto; padding: 8px 4px 64px; color: var(--pd-ink); font-family: var(--pd-font-body); } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr[b-v1alt9csma] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr[b-v1alt9csma] { --pd-card: #111B2F; --pd-soft: #0E1728; --pd-ink: #F1F6FC; --pd-ink-2: #C5D0DE; --pd-muted: #8C99AC; --pd-blue: #3D9EFF; --pd-blue-dk: #5AB0FF; --pd-blue-line: rgba(61,158,255,.30); --pd-hair: rgba(255,255,255,.08); } } /* ── mock header pattern ─────────────────────────────── */ .printctr-top[b-v1alt9csma] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .printctr-top .eyebrow[b-v1alt9csma] { font-family: var(--pd-font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-blue); } .printctr-top h1[b-v1alt9csma] { font-family: var(--pd-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.04; margin: 12px 0 8px; text-wrap: balance; color: var(--pd-ink); } .printctr-top .lede[b-v1alt9csma] { color: var(--pd-ink-2); font-size: 15.5px; line-height: 1.6; max-width: 640px; margin: 0; } .printctr-year[b-v1alt9csma] { font-size: 12.5px; font-weight: 600; color: var(--pd-muted); padding: 7px 13px; border: 1px solid var(--pd-hair); border-radius: 999px; background: var(--pd-soft); white-space: nowrap; } /* ── loading / notes ─────────────────────────────────── */ .printctr-load[b-v1alt9csma] { display: flex; align-items: center; gap: 12px; color: var(--pd-muted); padding: 48px 0; justify-content: center; } .cbp-spin[b-v1alt9csma] { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--pd-hair); border-top-color: var(--pd-blue); display: inline-block; animation: pd-rot-b-v1alt9csma .7s linear infinite; } .cbp-spin-lg[b-v1alt9csma] { width: 26px; height: 26px; border-width: 3px; } @keyframes pd-rot-b-v1alt9csma { to { transform: rotate(360deg); } } .printctr-note[b-v1alt9csma] { padding: 28px; border: 1px solid var(--pd-hair); border-radius: 15px; color: var(--pd-muted); text-align: center; background: var(--pd-card); } .printctr-note p[b-v1alt9csma] { margin: 0 0 14px; } .printctr-note-err[b-v1alt9csma] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; } .printctr-year-link[b-v1alt9csma] { font-weight: 700; color: var(--pd-blue); text-decoration: none; margin: 0 4px; } .printctr-year-link:hover[b-v1alt9csma] { text-decoration: underline; } /* dark: explicit app toggle */ :root[data-theme="dark"] .printctr-note-err[b-v1alt9csma] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .printctr-note-err[b-v1alt9csma] { border-color: #7f1d1d; background: rgba(127,29,29,.2); color: #fca5a5; } } /* /Components/Shared/CopyB/CopyBPrintWorkspace.razor.rz.scp.css */ /* Ported 1:1 from the approved Copy B Print Center mock (artifact 7e3b6f6c), with the mock's color custom-properties mapped to the app's LIGHT theme (--card→#fff, blue = #0385FF family) and the mock's dark tokens kept as the prefers-color-scheme override. Geometry / spacing / radii / typography are the mock's values verbatim. The preview modal and progress player render as fixed-position overlays OUTSIDE the .cbp wrapper, so they must declare the palette themselves — otherwise every var(--cbp-*) resolves to nothing and the modal is transparent/see-through. */ .cbp[b-1vx8a3ixp7], .cbp-modal-scrim[b-1vx8a3ixp7], .cbp-mini[b-1vx8a3ixp7] { --cbp-card: #ffffff; --cbp-soft: #EFF5FD; /* mock --bg-2 */ --cbp-soft-2: #ECF2F9; /* mock --bg-3 */ --cbp-ink: #0B1220; --cbp-ink-2: #3D4859; --cbp-muted: #6B7688; /* mock --ink-3 */ --cbp-blue: #0385FF; --cbp-blue-dk: #0270D9; --cbp-blue-soft: #EAF4FF; --cbp-blue-line: rgba(3,133,255,.24); --cbp-hair: #E5EBF3; --cbp-hair-2: #EEF2F8; --cbp-ok: #059669; --cbp-ok-soft: rgba(5,150,105,.10); --cbp-warn: #B45309; --cbp-warn-soft: rgba(180,83,9,.10); --cbp-dl: #0D9488; --cbp-dl-soft: rgba(13,148,136,.10); --cbp-shadow: 0 24px 60px rgba(15,30,60,.18); --cbp-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --cbp-font-body: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --cbp-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; color: var(--cbp-ink); font-family: var(--cbp-font-body); } /* dark: explicit app toggle */ :root[data-theme="dark"] .cbp[b-1vx8a3ixp7], :root[data-theme="dark"] .cbp-modal-scrim[b-1vx8a3ixp7], :root[data-theme="dark"] .cbp-mini[b-1vx8a3ixp7] { --cbp-card: #111B2F; --cbp-soft: #0E1728; --cbp-soft-2: #141E33; --cbp-ink: #F1F6FC; --cbp-ink-2: #C5D0DE; --cbp-muted: #8C99AC; --cbp-blue: #3D9EFF; --cbp-blue-dk: #5AB0FF; --cbp-blue-soft: rgba(61,158,255,.12); --cbp-blue-line: rgba(61,158,255,.30); --cbp-hair: rgba(255,255,255,.08); --cbp-hair-2: rgba(255,255,255,.05); --cbp-ok: #34D399; --cbp-ok-soft: rgba(52,211,153,.14); --cbp-warn: #FBBF24; --cbp-warn-soft: rgba(251,191,36,.15); --cbp-dl: #2DD4BF; --cbp-dl-soft: rgba(45,212,191,.14); --cbp-shadow: 0 24px 60px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cbp[b-1vx8a3ixp7], :root:not([data-theme="light"]) .cbp-modal-scrim[b-1vx8a3ixp7], :root:not([data-theme="light"]) .cbp-mini[b-1vx8a3ixp7] { --cbp-card: #111B2F; --cbp-soft: #0E1728; --cbp-soft-2: #141E33; --cbp-ink: #F1F6FC; --cbp-ink-2: #C5D0DE; --cbp-muted: #8C99AC; --cbp-blue: #3D9EFF; --cbp-blue-dk: #5AB0FF; --cbp-blue-soft: rgba(61,158,255,.12); --cbp-blue-line: rgba(61,158,255,.30); --cbp-hair: rgba(255,255,255,.08); --cbp-hair-2: rgba(255,255,255,.05); --cbp-ok: #34D399; --cbp-ok-soft: rgba(52,211,153,.14); --cbp-warn: #FBBF24; --cbp-warn-soft: rgba(251,191,36,.15); --cbp-dl: #2DD4BF; --cbp-dl-soft: rgba(45,212,191,.14); --cbp-shadow: 0 24px 60px rgba(0,0,0,.45); } } /* ── command bar (mock .cmd) ─────────────────────────── */ .cbp-cmd[b-1vx8a3ixp7] { position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 16px; margin-bottom: 18px; border: 1px solid var(--cbp-hair); border-radius: 14px; background: color-mix(in srgb, var(--cbp-card) 88%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,.22); } .cbp-cmd-l[b-1vx8a3ixp7] { display: flex; align-items: baseline; gap: 11px; } .cbp-cmd-sel[b-1vx8a3ixp7] { font-family: var(--cbp-font-display); font-weight: 700; font-size: 15px; } .cbp-cmd-of[b-1vx8a3ixp7] { font-size: 13px; color: var(--cbp-muted); } .cbp-cmd-r[b-1vx8a3ixp7] { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cbp-field-i[b-1vx8a3ixp7] { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cbp-muted); } .cbp select[b-1vx8a3ixp7], .cbp input[type=number][b-1vx8a3ixp7], .cbp-modal-scrim select[b-1vx8a3ixp7], .cbp-modal-scrim input[type=number][b-1vx8a3ixp7] { font-family: var(--cbp-font-body); background: var(--cbp-soft); color: var(--cbp-ink); border: 1px solid var(--cbp-hair); border-radius: 8px; padding: 7px 9px; font-size: 13px; } /* ── checkbox (mock .ck, with .mixed indeterminate) ──── */ .cbp-ck[b-1vx8a3ixp7] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--cbp-muted); background: var(--cbp-soft); cursor: pointer; position: relative; flex: 0 0 auto; transition: .12s; margin: 0; } .cbp-ck:checked[b-1vx8a3ixp7] { background: var(--cbp-blue); border-color: var(--cbp-blue); } .cbp-ck:checked[b-1vx8a3ixp7]::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #04121f; border-width: 0 2px 2px 0; transform: rotate(45deg); } .cbp-ck.mixed[b-1vx8a3ixp7] { background: var(--cbp-blue-soft); border-color: var(--cbp-blue); } .cbp-ck.mixed[b-1vx8a3ixp7]::after { content: ""; position: absolute; left: 3px; top: 6.5px; width: 9px; height: 2.5px; background: var(--cbp-blue); border: 0; transform: none; border-radius: 2px; } .cbp-ck:disabled[b-1vx8a3ixp7] { opacity: .35; cursor: not-allowed; } /* ── buttons (mock .btn / .btn.primary) ──────────────── */ .cbp-btn[b-1vx8a3ixp7] { font-family: var(--cbp-font-body); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--cbp-ink); background: var(--cbp-soft); border: 1px solid var(--cbp-hair); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: .14s; } .cbp-btn:hover:not(:disabled)[b-1vx8a3ixp7] { border-color: var(--cbp-blue-line); color: var(--cbp-blue-dk); } .cbp-btn:disabled[b-1vx8a3ixp7] { opacity: .4; cursor: not-allowed; } .cbp-btn[b-1vx8a3ixp7] .cbp-ico { width: 15px; height: 15px; } .cbp-btn-primary[b-1vx8a3ixp7] { background: linear-gradient(135deg, var(--cbp-blue), var(--cbp-blue-dk)); color: #04121f; border-color: transparent; box-shadow: 0 6px 18px var(--cbp-blue-line); } .cbp-btn-primary:hover:not(:disabled)[b-1vx8a3ixp7] { filter: brightness(1.06); color: #04121f; } /* ── switch toggle (mock .toggle / .sw) ──────────────── */ .cbp-toggle[b-1vx8a3ixp7] { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cbp-ink-2); cursor: pointer; user-select: none; margin: 2px 0 4px; } .cbp-toggle input[b-1vx8a3ixp7] { position: absolute; opacity: 0; pointer-events: none; } .cbp-sw[b-1vx8a3ixp7] { width: 34px; height: 19px; border-radius: 999px; background: var(--cbp-soft-2); border: 1px solid var(--cbp-hair); position: relative; transition: .18s; flex: 0 0 auto; } .cbp-sw[b-1vx8a3ixp7]::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--cbp-muted); transition: .18s; } .cbp-toggle input:checked + .cbp-sw[b-1vx8a3ixp7] { background: var(--cbp-blue-soft); border-color: var(--cbp-blue-line); } .cbp-toggle input:checked + .cbp-sw[b-1vx8a3ixp7]::after { left: 16px; background: var(--cbp-blue); } /* ── payer sections (mock .payer) ────────────────────── */ .cbp-payer[b-1vx8a3ixp7] { margin-bottom: 20px; border: 1px solid var(--cbp-hair); border-radius: 15px; overflow: hidden; background: var(--cbp-card); } .cbp-payer-head[b-1vx8a3ixp7] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: linear-gradient(180deg, var(--cbp-soft), transparent); border-bottom: 1px solid var(--cbp-hair); flex-wrap: wrap; } .cbp-payer-id[b-1vx8a3ixp7] { display: flex; align-items: center; gap: 12px; } .cbp-payer-name[b-1vx8a3ixp7] { font-family: var(--cbp-font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; } .cbp-payer-meta[b-1vx8a3ixp7] { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--cbp-muted); } .cbp-mono[b-1vx8a3ixp7] { font-family: var(--cbp-font-mono); font-size: 12px; } .cbp-tag[b-1vx8a3ixp7] { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; } .cbp-tag-print[b-1vx8a3ixp7] { background: var(--cbp-blue-soft); color: var(--cbp-blue-dk); } .cbp-tag-dl[b-1vx8a3ixp7] { background: var(--cbp-dl-soft); color: var(--cbp-dl); } .cbp-table[b-1vx8a3ixp7] { width: 100%; border-collapse: collapse; font-size: 13.5px; } .cbp-table thead th[b-1vx8a3ixp7] { text-align: left; font-family: var(--cbp-font-display); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cbp-muted); padding: 10px 18px; border-bottom: 1px solid var(--cbp-hair); } .cbp-table tbody td[b-1vx8a3ixp7] { padding: 12px 18px; border-bottom: 1px solid var(--cbp-hair-2); vertical-align: middle; } .cbp-table tbody tr:last-child td[b-1vx8a3ixp7] { border-bottom: 0; } .cbp-table tbody tr[b-1vx8a3ixp7] { transition: background .12s; } .cbp-table tbody tr:hover[b-1vx8a3ixp7] { background: var(--cbp-soft); } .cbp-table tr.sel[b-1vx8a3ixp7] { background: var(--cbp-blue-soft) !important; } .cbp-c-ck[b-1vx8a3ixp7] { width: 44px; } .cbp-rname[b-1vx8a3ixp7] { font-weight: 600; } .cbp-rtin[b-1vx8a3ixp7] { font-size: 11.5px; color: var(--cbp-muted); font-family: var(--cbp-font-mono); margin-top: 2px; } .cbp-c-form[b-1vx8a3ixp7] { font-family: var(--cbp-font-mono); font-size: 12.5px; color: var(--cbp-ink-2); } .cbp-c-amt[b-1vx8a3ixp7] { text-align: right; white-space: nowrap; font-family: var(--cbp-font-mono); font-variant-numeric: tabular-nums; } .cbp-badge[b-1vx8a3ixp7] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .cbp-badge.ok[b-1vx8a3ixp7] { background: var(--cbp-ok-soft); color: var(--cbp-ok); } .cbp-badge.warn[b-1vx8a3ixp7] { background: var(--cbp-warn-soft); color: var(--cbp-warn); } .cbp-state[b-1vx8a3ixp7] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } .cbp-state[b-1vx8a3ixp7] .cbp-ico { width: 14px; height: 14px; } .cbp-state.ready[b-1vx8a3ixp7] { color: var(--cbp-muted); font-weight: 500; } .cbp-state.print[b-1vx8a3ixp7] { color: var(--cbp-blue-dk); } .cbp-state.dl[b-1vx8a3ixp7] { color: var(--cbp-dl); } .cbp-state.busy[b-1vx8a3ixp7] { color: var(--cbp-ink-2); } .cbp-pips[b-1vx8a3ixp7] { display: inline-flex; gap: 8px; } .cbp-pips.flip[b-1vx8a3ixp7] { animation: cbp-flip-b-1vx8a3ixp7 .5s ease; } @keyframes cbp-flip-b-1vx8a3ixp7 { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } } /* ── spinner ─────────────────────────────────────────── */ .cbp-spin[b-1vx8a3ixp7] { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--cbp-hair); border-top-color: var(--cbp-blue); display: inline-block; animation: cbp-rot-b-1vx8a3ixp7 .7s linear infinite; } .cbp-spin-lg[b-1vx8a3ixp7] { width: 26px; height: 26px; border-width: 3px; } @keyframes cbp-rot-b-1vx8a3ixp7 { to { transform: rotate(360deg); } } /* ── empty ───────────────────────────────────────────── */ .cbp-empty[b-1vx8a3ixp7] { text-align: center; padding: 64px 24px; color: var(--cbp-muted); } .cbp-empty-mark[b-1vx8a3ixp7] { font-size: 40px; opacity: .5; } .cbp-empty h3[b-1vx8a3ixp7] { margin: 12px 0 6px; color: var(--cbp-ink); font-family: var(--cbp-font-display); } .cbp-empty p[b-1vx8a3ixp7] { max-width: 440px; margin: 0 auto; font-size: 13.5px; line-height: 1.5; } /* ── preview modal (mock .scrim/.modal) ──────────────── */ .cbp-modal-scrim[b-1vx8a3ixp7] { position: fixed; inset: 0; background: rgba(4,9,18,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 22px; animation: cbp-fade-b-1vx8a3ixp7 .2s ease; } @keyframes cbp-fade-b-1vx8a3ixp7 { from { opacity: 0; } to { opacity: 1; } } .cbp-modal[b-1vx8a3ixp7] { width: min(1080px, 96vw); height: min(86vh, 880px); background: var(--cbp-card); color: var(--cbp-ink); border: 1px solid var(--cbp-hair); border-radius: 18px; box-shadow: var(--cbp-shadow); display: flex; flex-direction: column; overflow: hidden; animation: cbp-pop-b-1vx8a3ixp7 .24s cubic-bezier(.2,.9,.3,1.2); } @keyframes cbp-pop-b-1vx8a3ixp7 { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .cbp-modal-head[b-1vx8a3ixp7] { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cbp-hair); } .cbp-modal-head h2[b-1vx8a3ixp7] { font-family: var(--cbp-font-display); font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; } .cbp-modal-head p[b-1vx8a3ixp7] { margin: 4px 0 0; font-size: 12.5px; color: var(--cbp-muted); } .cbp-x[b-1vx8a3ixp7] { background: none; border: 0; color: var(--cbp-muted); font-size: 20px; cursor: pointer; line-height: 1; } .cbp-x:hover[b-1vx8a3ixp7] { color: var(--cbp-ink); } .cbp-modal-body[b-1vx8a3ixp7] { flex: 1; display: grid; grid-template-columns: 288px 1fr; min-height: 0; } .cbp-settings[b-1vx8a3ixp7] { border-right: 1px solid var(--cbp-hair); padding: 20px; overflow-y: auto; background: var(--cbp-soft); display: flex; flex-direction: column; gap: 6px; } .cbp-settings h4[b-1vx8a3ixp7] { font-family: var(--cbp-font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cbp-muted); margin: 10px 0 4px; } .cbp-field[b-1vx8a3ixp7] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; font-size: 13px; } .cbp-field > span[b-1vx8a3ixp7] { color: var(--cbp-ink-2); } .cbp-hint[b-1vx8a3ixp7] { font-size: 11.5px; color: var(--cbp-muted); line-height: 1.5; margin: 2px 0 8px; } .cbp-pills[b-1vx8a3ixp7] { display: flex; gap: 6px; flex-wrap: wrap; } .cbp-pills button[b-1vx8a3ixp7] { font-family: var(--cbp-font-body); font-size: 12px; font-weight: 600; color: var(--cbp-muted); background: var(--cbp-soft-2); border: 1px solid var(--cbp-hair); border-radius: 8px; padding: 7px 11px; cursor: pointer; } .cbp-pills button.on[b-1vx8a3ixp7] { background: var(--cbp-blue-soft); border-color: var(--cbp-blue-line); color: var(--cbp-blue-dk); } .cbp-settings-foot[b-1vx8a3ixp7] { margin-top: auto; display: flex; gap: 8px; padding-top: 14px; } .cbp-settings-foot .cbp-btn[b-1vx8a3ixp7] { flex: 1; justify-content: center; } /* preview pane stays dark slate in both themes (mock: light #6b7280 / dark #3a3f47) */ .cbp-preview-pane[b-1vx8a3ixp7] { position: relative; background: #6b7280; min-height: 0; display: flex; flex-direction: column; } /* dark: explicit app toggle */ :root[data-theme="dark"] .cbp-preview-pane[b-1vx8a3ixp7] { background: #3a3f47; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cbp-preview-pane[b-1vx8a3ixp7] { background: #3a3f47; } } .cbp-pv-meta[b-1vx8a3ixp7] { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #e6e9ee; background: rgba(0,0,0,.28); padding: 9px 18px; backdrop-filter: blur(4px); flex: 0 0 auto; z-index: 3; } .cbp-sheets[b-1vx8a3ixp7] { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* sheets are created by copyBPrint.js (no CSS-isolation attribute) → ::deep */ .cbp-sheets[b-1vx8a3ixp7] .cbp-sheet { background: #fff; border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.4); line-height: 0; animation: cbp-sheetin-b-1vx8a3ixp7 .3s ease both; } .cbp-sheets[b-1vx8a3ixp7] .cbp-sheet canvas { border-radius: 3px; display: block; max-width: 100%; } @keyframes cbp-sheetin-b-1vx8a3ixp7 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cbp-preview-loading[b-1vx8a3ixp7] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(20,22,28,.55); color: #fff; font-size: 13px; z-index: 5; } /* ── mini progress player (mock .mini) ───────────────── */ .cbp-mini[b-1vx8a3ixp7] { position: fixed; right: 22px; bottom: 22px; width: 346px; z-index: 1100; background: var(--cbp-card); border: 1px solid var(--cbp-hair); border-radius: 15px; box-shadow: var(--cbp-shadow); overflow: hidden; animation: cbp-slidein-b-1vx8a3ixp7 .25s cubic-bezier(.2,.9,.3,1.2); } .cbp-mini.min[b-1vx8a3ixp7] { width: 250px; } @keyframes cbp-slidein-b-1vx8a3ixp7 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .cbp-mini-head[b-1vx8a3ixp7] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, var(--cbp-soft), transparent); cursor: pointer; } .cbp-mini-title[b-1vx8a3ixp7] { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; font-family: var(--cbp-font-display); } .cbp-live[b-1vx8a3ixp7] { width: 9px; height: 9px; border-radius: 50%; background: var(--cbp-blue); box-shadow: 0 0 0 0 var(--cbp-blue-line); animation: cbp-pulse-b-1vx8a3ixp7 1.3s infinite; flex: 0 0 auto; } .cbp-live.done[b-1vx8a3ixp7] { background: var(--cbp-ok); animation: none; } @keyframes cbp-pulse-b-1vx8a3ixp7 { 0% { box-shadow: 0 0 0 0 var(--cbp-blue-line); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .cbp-mini-btns[b-1vx8a3ixp7] { display: flex; gap: 3px; } .cbp-mini-btns button[b-1vx8a3ixp7] { background: none; border: 0; color: var(--cbp-muted); cursor: pointer; width: 26px; height: 26px; border-radius: 7px; font-size: 13px; } .cbp-mini-btns button:hover[b-1vx8a3ixp7] { background: var(--cbp-hair); color: var(--cbp-ink); } .cbp-mini-body[b-1vx8a3ixp7] { padding: 12px 14px 15px; } .cbp-mini.min .cbp-mini-body[b-1vx8a3ixp7] { display: none; } .cbp-mini-bar[b-1vx8a3ixp7] { height: 7px; border-radius: 999px; background: var(--cbp-soft-2); overflow: hidden; } .cbp-mini-fill[b-1vx8a3ixp7] { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cbp-blue), var(--cbp-blue-dk)); transition: width .3s ease; } .cbp-mini-fill.done[b-1vx8a3ixp7] { background: var(--cbp-ok); } .cbp-mini-label[b-1vx8a3ixp7] { margin-top: 9px; font-size: 12px; color: var(--cbp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbp-mini-thumbs[b-1vx8a3ixp7] { display: flex; gap: 5px; margin-top: 11px; flex-wrap: wrap; } .cbp-mini-thumbs i[b-1vx8a3ixp7] { width: 15px; height: 20px; border-radius: 2px; background: var(--cbp-soft-2); border: 1px solid var(--cbp-hair); transition: .2s; } .cbp-mini-thumbs i.done[b-1vx8a3ixp7] { background: var(--cbp-blue); border-color: var(--cbp-blue); } @media (max-width: 720px) { .cbp-modal-body[b-1vx8a3ixp7] { grid-template-columns: 1fr; } .cbp-settings[b-1vx8a3ixp7] { border-right: 0; border-bottom: 1px solid var(--cbp-hair); max-height: 38%; } .cbp-cmd[b-1vx8a3ixp7] { position: static; } } @media (prefers-reduced-motion: reduce) { .cbp-cmd[b-1vx8a3ixp7], .cbp-modal-scrim[b-1vx8a3ixp7], .cbp-modal[b-1vx8a3ixp7], .cbp-mini[b-1vx8a3ixp7], .cbp-mini-fill[b-1vx8a3ixp7], .cbp-pips.flip[b-1vx8a3ixp7], .cbp-live[b-1vx8a3ixp7], .cbp-spin[b-1vx8a3ixp7], .cbp-mini-thumbs i[b-1vx8a3ixp7] { animation: none !important; transition: none !important; } .cbp-sheets[b-1vx8a3ixp7] .cbp-sheet { animation: none !important; } } .cbp-c-ship[b-1vx8a3ixp7] { white-space: nowrap; } .cbp-ship[b-1vx8a3ixp7] { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cbp-muted); cursor: pointer; } .cbp-ship input:disabled[b-1vx8a3ixp7] { cursor: not-allowed; } .cbp-ship input:disabled + span[b-1vx8a3ixp7] { opacity: .45; } .cbp-ship.on[b-1vx8a3ixp7] { color: var(--cbp-green, #157347); } /* /Components/Shared/ResultBlock.razor.rz.scp.css */ .code-wrap[b-ridk2xi5uf] { position: relative; } /* Copy button — floats top-right over the code block */ .copy-btn[b-ridk2xi5uf] { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--text-2, #cbd5e1); background: rgba(15, 23, 42, .78); border: 1px solid rgba(148, 163, 184, .32); border-radius: 6px; cursor: pointer; opacity: .55; transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease, transform .06s ease; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .code-wrap:hover .copy-btn[b-ridk2xi5uf], .copy-btn:focus-visible[b-ridk2xi5uf] { opacity: 1; } .copy-btn:hover[b-ridk2xi5uf] { background: rgba(51, 65, 85, .95); color: #fff; border-color: rgba(148, 163, 184, .6); } .copy-btn:active[b-ridk2xi5uf] { transform: translateY(1px); } .copy-btn.copied[b-ridk2xi5uf] { opacity: 1; color: #052e16; background: #4ade80; border-color: #22c55e; cursor: default; } .copy-btn:focus-visible[b-ridk2xi5uf] { outline: 2px solid #60a5fa; outline-offset: 2px; } /* A touch of polish on the code block itself */ .result-body[b-ridk2xi5uf] { max-height: 460px; overflow: auto; border-radius: 8px; scrollbar-width: thin; scroll-padding-top: 40px; } .result-body[b-ridk2xi5uf]::-webkit-scrollbar { width: 10px; height: 10px; } .result-body[b-ridk2xi5uf]::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .35); border-radius: 6px; } .result-body[b-ridk2xi5uf]::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); } /* /Components/Shared/YearReadinessBanner.razor.rz.scp.css */ .yr-banner[b-hdr3z0rp3i] { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-radius: 10px; margin: 0 0 1rem 0; font-size: .9rem; line-height: 1.35; border: 1px solid transparent; } .yr-blocked[b-hdr3z0rp3i] { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .yr-sandbox[b-hdr3z0rp3i] { background: #fffbeb; border-color: #fde68a; color: #92400e; } .yr-ic[b-hdr3z0rp3i] { font-size: 1.15rem; line-height: 1; } .yr-body[b-hdr3z0rp3i] { display: flex; flex-direction: column; gap: .15rem; } .yr-body strong[b-hdr3z0rp3i] { font-weight: 600; } @media (prefers-color-scheme: dark) { .yr-blocked[b-hdr3z0rp3i] { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; } .yr-sandbox[b-hdr3z0rp3i] { background: #2a2410; border-color: #78560f; color: #fcd34d; } }