/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Auth card spacing + clearer secondary-link hierarchy. */
.tmg-auth-card[b-cmcb5pt8v5] {
padding: 36px 36px 32px;
}
.tmg-auth-title[b-cmcb5pt8v5] {
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 1.75rem;
}
[b-cmcb5pt8v5] .form-floating {
margin-bottom: 1rem !important;
}
[b-cmcb5pt8v5] .form-floating > .form-control {
padding-top: 1.625rem;
padding-bottom: 0.5rem;
}
[b-cmcb5pt8v5] .form-check {
margin-bottom: 1.25rem !important;
}
[b-cmcb5pt8v5] .btn-primary.btn-lg {
padding: 0.65rem 1rem;
font-size: 1rem;
font-weight: 600;
}
.tmg-auth-divider[b-cmcb5pt8v5] {
margin: 1.25rem 0 0.5rem;
font-size: 0.7rem;
}
.tmg-auth-links[b-cmcb5pt8v5] {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--tmg-border, #E5E7EB);
gap: 0.55rem;
}
.tmg-auth-links a[b-cmcb5pt8v5] {
font-size: 0.875rem;
color: var(--tmg-text-muted, #6B7280);
transition: color 120ms ease;
}
.tmg-auth-links a:first-child[b-cmcb5pt8v5] {
color: var(--tmg-brand, #0F766E);
font-weight: 500;
}
.tmg-auth-links a:hover[b-cmcb5pt8v5] {
color: var(--tmg-brand, #0F766E);
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Mirror Login styling for visual consistency. */
.tmg-auth-card[b-i93qkkwsex] {
padding: 36px 36px 32px;
}
.tmg-auth-title[b-i93qkkwsex] {
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 1.75rem;
}
[b-i93qkkwsex] .form-floating {
margin-bottom: 1rem !important;
}
[b-i93qkkwsex] .form-floating > .form-control {
padding-top: 1.625rem;
padding-bottom: 0.5rem;
}
[b-i93qkkwsex] .btn-primary.btn-lg {
padding: 0.65rem 1rem;
font-size: 1rem;
font-weight: 600;
margin-top: 0.5rem;
}
.tmg-auth-links[b-i93qkkwsex] {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--tmg-border, #E5E7EB);
align-items: center;
text-align: center;
}
.tmg-auth-links a[b-i93qkkwsex] {
font-size: 0.875rem;
color: var(--tmg-text-muted, #6B7280);
}
.tmg-auth-links a:hover[b-i93qkkwsex] {
color: var(--tmg-brand, #0F766E);
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Account/Manage layout: tighter header, calmer left rail. */
.tmg-manage-header[b-3e4dt7syv9] {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
}
.tmg-manage-title[b-3e4dt7syv9] {
font-size: 1.625rem;
font-weight: 700;
margin: 0 0 4px;
letter-spacing: -0.01em;
color: var(--tmg-text, #111827);
}
.tmg-manage-subtitle[b-3e4dt7syv9] {
margin: 0;
color: var(--tmg-text-muted, #6B7280);
font-size: 0.95rem;
}
.tmg-manage-row[b-3e4dt7syv9] {
margin-top: 8px;
}
.tmg-manage-body[b-3e4dt7syv9] {
padding-left: 24px;
}
@media (max-width: 991.98px) {
.tmg-manage-body[b-3e4dt7syv9] {
padding-left: 12px;
padding-top: 16px;
}
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Replace the harsh Bootstrap nav-pills look with calm muted rail. */
.nav-pills[b-qh3f4qupd4] {
--bs-nav-pills-border-radius: 6px;
--bs-nav-pills-link-active-color: var(--tmg-text, #111827);
--bs-nav-pills-link-active-bg: rgba(15, 118, 110, 0.08);
border-right: 1px solid var(--tmg-border, #E5E7EB);
padding-right: 8px;
gap: 1px;
}
[b-qh3f4qupd4] .nav-link {
color: var(--tmg-text-muted, #6B7280);
padding: 0.5rem 0.85rem;
border-radius: 6px;
font-size: 0.9rem;
border-left: 2px solid transparent;
border-radius: 0 6px 6px 0;
transition: background 120ms ease, color 120ms ease;
}
[b-qh3f4qupd4] .nav-link:hover {
background: rgba(15, 23, 42, 0.04);
color: var(--tmg-text, #111827);
}
[b-qh3f4qupd4] .nav-link.active {
background: rgba(15, 118, 110, 0.08) !important;
color: var(--tmg-brand, #0F766E) !important;
font-weight: 600;
border-left-color: var(--tmg-brand, #0F766E);
}
@media (max-width: 991.98px) {
.nav-pills[b-qh3f4qupd4] {
border-right: none;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
padding-right: 0;
padding-bottom: 12px;
margin-bottom: 12px;
flex-direction: row !important;
flex-wrap: wrap;
}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-2ep6li6kfy] {
position: relative;
display: flex;
flex-direction: column;
background: var(--tmg-bg, #F9FAFB);
min-height: 100vh;
}
main[b-2ep6li6kfy] {
flex: 1;
background: var(--tmg-bg, #F9FAFB);
/* Critical: flex children without min-width:0 collapse to their min-content width,
and any deeply-nested wide grid/flex (e.g. many-campaign charts) pushes the body
past the viewport. Containing it here keeps horizontal scroll *local* to whichever
widget needs it, not on the document as a whole. */
min-width: 0;
overflow-x: hidden;
}
.sidebar[b-2ep6li6kfy] {
background: var(--tmg-sidebar-bg, #1F2937);
color: var(--tmg-sidebar-fg, #E5E7EB);
}
@media (max-width: 640.98px) {
.sidebar[b-2ep6li6kfy] {
min-height: 64px;
}
}
@media (min-width: 641px) {
.page[b-2ep6li6kfy] {
flex-direction: row;
}
.sidebar[b-2ep6li6kfy] {
width: 240px;
height: 100vh;
position: sticky;
top: 0;
flex-shrink: 0;
}
article.content[b-2ep6li6kfy] {
padding-left: 24px !important;
padding-right: 24px !important;
padding-top: 24px;
}
}
#blazor-error-ui[b-2ep6li6kfy] {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-2ep6li6kfy] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-d0ohu0gmbo] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked[b-d0ohu0gmbo] {
background-color: rgba(255, 255, 255, 0.5);
}
.tmg-sidebar-brand[b-d0ohu0gmbo] {
display: flex;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
min-height: 64px;
}
.tmg-sidebar-wordmark[b-d0ohu0gmbo] {
display: flex;
align-items: center;
gap: 10px;
color: var(--tmg-sidebar-fg, #E5E7EB);
text-decoration: none;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.tmg-sidebar-wordmark img[b-d0ohu0gmbo] {
filter: brightness(0) invert(1);
opacity: 0.95;
flex-shrink: 0;
display: block;
/* Optical alignment with text baseline. */
transform: translateY(-1px);
}
.tmg-sidebar-wordmark:hover[b-d0ohu0gmbo] {
color: #fff;
}
.tmg-sidebar-nav[b-d0ohu0gmbo] {
display: flex;
flex-direction: column;
height: calc(100% - 64px);
padding: 8px 0 0;
}
.tmg-nav-list[b-d0ohu0gmbo] {
list-style: none;
margin: 0;
padding: 0 8px;
}
.tmg-nav-list li[b-d0ohu0gmbo] {
margin: 1px 0;
}
.tmg-nav-list[b-d0ohu0gmbo] .tmg-nav-link,
.tmg-nav-list .tmg-nav-link[b-d0ohu0gmbo] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
color: var(--tmg-sidebar-fg, #E5E7EB);
text-decoration: none;
border-radius: 4px;
border-left: 2px solid transparent;
font-size: 0.9rem;
line-height: 1.25rem;
background: transparent;
border-top: none;
border-right: none;
border-bottom: none;
width: 100%;
}
.tmg-nav-list .tmg-nav-link i[b-d0ohu0gmbo] {
width: 18px;
font-size: 1rem;
text-align: center;
opacity: 0.85;
}
.tmg-nav-list[b-d0ohu0gmbo] a.tmg-nav-link:hover,
.tmg-nav-list .tmg-nav-link:hover[b-d0ohu0gmbo] {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.tmg-nav-list[b-d0ohu0gmbo] a.tmg-nav-link.active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-left-color: var(--tmg-sidebar-active, #10B981);
}
.nav-section-heading[b-d0ohu0gmbo] {
color: rgba(229, 231, 235, 0.5);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 14px 22px 4px;
font-weight: 600;
}
.tmg-sidebar-footer[b-d0ohu0gmbo] {
margin-top: auto;
padding: 12px 16px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: var(--tmg-sidebar-fg, #E5E7EB);
}
.tmg-user-row[b-d0ohu0gmbo] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.tmg-user-email[b-d0ohu0gmbo] {
font-size: 0.8rem;
color: rgba(229, 231, 235, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.tmg-role-chip[b-d0ohu0gmbo] {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 9px;
border-radius: 9999px;
background: rgba(16, 185, 129, 0.18);
color: #6ee7b7;
border: 1px solid rgba(16, 185, 129, 0.3);
flex-shrink: 0;
}
.tmg-role-chip.tmg-role-caller[b-d0ohu0gmbo] {
background: rgba(59, 130, 246, 0.18);
color: #93c5fd;
border-color: rgba(59, 130, 246, 0.3);
}
.tmg-user-email[b-d0ohu0gmbo] {
font-weight: 500;
}
.tmg-sidebar-footer-links[b-d0ohu0gmbo] {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.tmg-footer-link[b-d0ohu0gmbo] {
background: none;
border: none;
padding: 0;
color: rgba(229, 231, 235, 0.7);
font-size: 0.8rem;
text-decoration: none;
cursor: pointer;
}
.tmg-footer-link:hover[b-d0ohu0gmbo] {
color: #fff;
text-decoration: underline;
}
.tmg-signout-form[b-d0ohu0gmbo] {
display: inline;
margin: 0;
margin-left: auto;
}
.tmg-signout-btn[b-d0ohu0gmbo] {
color: rgba(229, 231, 235, 0.9);
font-weight: 500;
}
.tmg-signout-btn:hover[b-d0ohu0gmbo] {
color: #fff;
}
.nav-scrollable[b-d0ohu0gmbo] {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable[b-d0ohu0gmbo] {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler[b-d0ohu0gmbo] {
display: none;
}
.nav-scrollable[b-d0ohu0gmbo] {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 64px);
overflow-y: auto;
}
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Public top-bar polish: tighter padding, balanced right-side nav. */
.tmg-public-header[b-nnhc7qvaqx] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
}
.tmg-public-brand[b-nnhc7qvaqx] {
font-weight: 600;
letter-spacing: 0.01em;
}
.tmg-public-brand img[b-nnhc7qvaqx] {
display: block;
}
.tmg-public-header-nav[b-nnhc7qvaqx] {
display: flex;
align-items: center;
gap: 20px;
}
.tmg-public-header-nav a[b-nnhc7qvaqx] {
font-size: 0.9rem;
color: var(--tmg-text-muted, #6B7280);
text-decoration: none;
transition: color 120ms ease;
}
.tmg-public-header-nav a:hover[b-nnhc7qvaqx] {
color: var(--tmg-text, #111827);
}
.tmg-public-header-nav a.btn[b-nnhc7qvaqx] {
color: #fff;
font-size: 0.875rem;
padding: 0.4rem 1rem;
margin-left: 4px;
}
.tmg-public-header-nav a.btn:hover[b-nnhc7qvaqx] {
color: #fff;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-lyuyurc12h],
.components-reconnect-repeated-attempt-visible[b-lyuyurc12h],
.components-reconnect-failed-visible[b-lyuyurc12h],
.components-pause-visible[b-lyuyurc12h],
.components-resume-failed-visible[b-lyuyurc12h],
.components-rejoining-animation[b-lyuyurc12h] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-retrying[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-failed[b-lyuyurc12h],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-lyuyurc12h] {
display: block;
}
#components-reconnect-modal[b-lyuyurc12h] {
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-lyuyurc12h 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-lyuyurc12h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-lyuyurc12h 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-lyuyurc12h]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-lyuyurc12h 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-lyuyurc12h {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-lyuyurc12h {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-lyuyurc12h {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-lyuyurc12h] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-lyuyurc12h] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-lyuyurc12h] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-lyuyurc12h] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-lyuyurc12h] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-lyuyurc12h] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-lyuyurc12h] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-lyuyurc12h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-lyuyurc12h] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-lyuyurc12h {
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/About.razor.rz.scp.css */
/* About — marketing-grade public page. Visual language matches Home + Pricing.
Section rhythm: generous vertical breathing (~6rem on desktop, tighter on mobile),
max widths to keep long-form copy readable on wide monitors, alternating two-column
feature blocks with a small decorative "art" panel on the visual side.
Note on full-bleed bands: this page is rendered inside .tmg-public-main, which is a
centred 1100px column with 24px gutters. The closing CTA band uses the
margin-left/right: calc(50% - 50vw) trick to escape that container and stretch
edge-to-edge, the way a marketing CTA band is meant to read. */
/* Hero ───────────────────────────────────────────────────────────────────────── */
.tmg-about-hero[b-qwh1cmlld1] {
text-align: center;
padding: 4.5rem 1rem 4.5rem;
max-width: 760px;
margin: 0 auto;
}
[b-qwh1cmlld1] .tmg-about-hero-mark {
margin-bottom: 1rem;
opacity: 0.95;
}
[b-qwh1cmlld1] .tmg-about-hero-title {
font-size: clamp(1.85rem, 2.6vw + 1rem, 2.75rem);
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--tmg-text, #111827);
margin: 0 0 1.25rem;
}
[b-qwh1cmlld1] .tmg-about-hero-tagline {
font-size: 1.125rem;
line-height: 1.6;
color: var(--tmg-text-muted, #4B5563);
margin: 0 auto 2rem;
max-width: 600px;
}
[b-qwh1cmlld1] .tmg-about-hero-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
[b-qwh1cmlld1] .tmg-about-hero-actions .btn {
padding: 0.6rem 1.5rem;
font-weight: 500;
}
/* Principles row ─────────────────────────────────────────────────────────────── */
.tmg-about-principles[b-qwh1cmlld1] {
max-width: 1180px;
margin: 3.5rem auto 0;
padding: 0 1rem;
}
[b-qwh1cmlld1] .tmg-principle-card {
width: 100%;
padding: 1.75rem 1.5rem 1.5rem;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: var(--tmg-shadow-card, 0 1px 3px rgb(15 23 42 / .04), 0 10px 25px rgb(15 23 42 / .05));
transition: transform 160ms ease, box-shadow 160ms ease;
}
[b-qwh1cmlld1] .tmg-principle-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgb(15 23 42 / .05), 0 18px 36px rgb(15 23 42 / .08);
}
[b-qwh1cmlld1] .tmg-principle-icon {
color: var(--tmg-brand, #0F766E);
font-size: 1.6rem;
margin-bottom: 0.85rem;
display: block;
}
[b-qwh1cmlld1] .tmg-principle-card h2 {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--tmg-text, #111827);
}
[b-qwh1cmlld1] .tmg-principle-card p {
color: var(--tmg-text-muted, #4B5563);
line-height: 1.55;
margin: 0;
}
/* Use it your way ─────────────────────────────────────────────────────────────── */
.tmg-about-your-way[b-qwh1cmlld1] {
max-width: 1180px;
margin: 4.5rem auto 0;
padding: 0 1rem;
}
[b-qwh1cmlld1] .tmg-about-your-way-inner {
background: linear-gradient(140deg, rgba(15, 118, 110, 0.08) 0%, rgba(15, 118, 110, 0.02) 60%, transparent 100%);
border: 1px solid rgba(15, 118, 110, 0.18);
border-radius: var(--tmg-radius-lg, 14px);
padding: 2.25rem 2rem 2.5rem;
}
[b-qwh1cmlld1] .tmg-about-your-way-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--tmg-brand-deep, #115E59);
margin: 0 0 0.4rem;
}
[b-qwh1cmlld1] .tmg-about-your-way-lead {
font-size: 1.05rem;
color: var(--tmg-text-muted, #4B5563);
margin: 0 0 1.6rem;
}
[b-qwh1cmlld1] .tmg-about-your-way-grid {
margin: 0;
}
[b-qwh1cmlld1] .tmg-about-your-way-card {
background: #ffffff;
border: 1px solid rgba(15, 118, 110, 0.15);
border-radius: var(--tmg-radius-md, 10px);
padding: 1.4rem 1.5rem 1.5rem;
width: 100%;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
[b-qwh1cmlld1] .tmg-about-your-way-card h3 {
color: var(--tmg-brand-deep, #115E59);
margin: 0.6rem 0 0.5rem;
}
[b-qwh1cmlld1] .tmg-about-your-way-card p {
color: var(--tmg-text, #111827);
line-height: 1.55;
font-size: 0.95rem;
margin: 0;
}
[b-qwh1cmlld1] .tmg-about-your-way-icon {
color: var(--tmg-brand, #0F766E);
font-size: 1.5rem;
}
/* Transparency commitment band ────────────────────────────────────────────────── */
.tmg-about-transparency[b-qwh1cmlld1] {
max-width: 1180px;
margin: 4rem auto 0;
padding: 0 1rem;
}
[b-qwh1cmlld1] .tmg-about-transparency-inner {
background: rgba(15, 118, 110, 0.06);
border: 1px solid rgba(15, 118, 110, 0.25);
border-left: 4px solid var(--tmg-brand, #0F766E);
border-radius: var(--tmg-radius-lg, 12px);
padding: 1.1rem 1.4rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
[b-qwh1cmlld1] .tmg-about-transparency-icon {
color: var(--tmg-brand, #0F766E);
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
[b-qwh1cmlld1] .tmg-about-transparency-body {
color: var(--tmg-text, #111827);
line-height: 1.55;
font-size: 0.95rem;
}
[b-qwh1cmlld1] .tmg-about-transparency-body strong {
color: var(--tmg-brand-deep, #115E59);
}
/* Feature stories ─────────────────────────────────────────────────────────────── */
.tmg-about-feature[b-qwh1cmlld1] {
max-width: 1180px;
margin: 6.5rem auto 0;
padding: 0 1rem;
}
[b-qwh1cmlld1] .tmg-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tmg-brand, #0F766E);
margin-bottom: 0.65rem;
}
[b-qwh1cmlld1] .tmg-about-feature-title {
font-size: clamp(1.6rem, 1.8vw + 0.8rem, 2.1rem);
line-height: 1.18;
letter-spacing: -0.015em;
font-weight: 700;
color: var(--tmg-text, #111827);
margin: 0 0 1rem;
}
[b-qwh1cmlld1] .tmg-about-feature .lead {
font-size: 1.1rem;
line-height: 1.55;
color: var(--tmg-text, #111827);
margin-bottom: 1rem;
max-width: none;
}
[b-qwh1cmlld1] .tmg-about-feature p {
color: var(--tmg-text-muted, #4B5563);
line-height: 1.6;
max-width: none;
}
[b-qwh1cmlld1] .tmg-about-feature-bullets {
list-style: none;
padding: 0;
margin: 1.25rem 0 0;
}
[b-qwh1cmlld1] .tmg-about-feature-bullets li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.4rem 0;
color: var(--tmg-text, #111827);
line-height: 1.5;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
}
[b-qwh1cmlld1] .tmg-about-feature-bullets li:last-child {
border-bottom: none;
}
[b-qwh1cmlld1] .tmg-bullet-icon {
color: var(--tmg-brand, #0F766E);
font-weight: 700;
flex-shrink: 0;
margin-top: 0.2rem;
}
/* Feature art panels — decorative, never load-bearing for content ─────────────── */
[b-qwh1cmlld1] .tmg-about-feature-art {
position: relative;
border-radius: var(--tmg-radius-lg, 12px);
padding: 2.5rem 2rem;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.25rem;
text-align: center;
overflow: hidden;
isolation: isolate;
}
[b-qwh1cmlld1] .tmg-about-feature-art::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
[b-qwh1cmlld1] .tmg-about-feature-art--training {
background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%);
color: #fff;
}
[b-qwh1cmlld1] .tmg-about-feature-art--coaching {
background: linear-gradient(135deg, #134E4A 0%, #115E59 100%);
color: #fff;
}
[b-qwh1cmlld1] .tmg-about-feature-art--providers {
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
color: var(--tmg-text, #111827);
border: 1px solid var(--tmg-border, #E5E7EB);
}
[b-qwh1cmlld1] .tmg-about-feature-art-icon {
font-size: 3rem;
line-height: 1;
opacity: 0.95;
}
[b-qwh1cmlld1] .tmg-about-feature-art-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
}
[b-qwh1cmlld1] .tmg-about-feature-art-stat-value {
font-size: 3.25rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
}
[b-qwh1cmlld1] .tmg-about-feature-art-stat-label {
font-size: 0.85rem;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.08em;
}
[b-qwh1cmlld1] .tmg-about-feature-art-quote {
font-size: 1.15rem;
font-weight: 500;
line-height: 1.5;
max-width: 22rem;
}
[b-qwh1cmlld1] .tmg-about-feature-art-quote-mark {
color: rgba(255, 255, 255, 0.55);
font-size: 1.5em;
line-height: 1;
vertical-align: -0.1em;
}
[b-qwh1cmlld1] .tmg-about-feature-art-pillrow {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
max-width: 22rem;
}
[b-qwh1cmlld1] .tmg-about-feature-art-pill {
display: inline-block;
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
}
/* Providers tile grid (inside the providers art panel) ────────────────────────── */
[b-qwh1cmlld1] .tmg-providers-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
max-width: 22rem;
}
[b-qwh1cmlld1] .tmg-provider-tile {
background: #fff;
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: 8px;
padding: 0.9rem 1.1rem;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 1px 2px rgb(15 23 42 / .04);
}
[b-qwh1cmlld1] .tmg-provider-name {
font-weight: 600;
color: var(--tmg-text, #111827);
}
[b-qwh1cmlld1] .tmg-provider-meta {
font-size: 0.85rem;
color: var(--tmg-text-muted, #4B5563);
letter-spacing: 0.01em;
}
/* "Built on" chip strip ───────────────────────────────────────────────────────── */
.tmg-about-builton[b-qwh1cmlld1] {
max-width: 1180px;
margin: 6.5rem auto 0;
padding: 2.5rem 1rem 3rem;
text-align: center;
border-top: 1px solid var(--tmg-border, #E5E7EB);
}
[b-qwh1cmlld1] .tmg-about-builton-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tmg-text-muted, #6B7280);
margin-bottom: 1rem;
}
[b-qwh1cmlld1] .tmg-about-builton-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
[b-qwh1cmlld1] .tmg-builton-chip {
display: inline-block;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
color: var(--tmg-text-muted, #4B5563);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgb(15 23 42 / .03);
}
/* Closing CTA band ────────────────────────────────────────────────────────────── */
/* Full-bleed: this page sits inside .tmg-public-main (centred 1100px column with
24px gutters). The negative margin trick lets this single band escape the column
and stretch edge-to-edge, so it reads as a proper marketing band rather than a
small dark rectangle floating mid-page. The deep teal → brand-teal gradient is
the visual climax of the page. */
.tmg-about-cta[b-qwh1cmlld1] {
margin: 7rem calc(50% - 50vw) 0;
padding: 6rem 1.5rem;
background: linear-gradient(135deg, #0B3A37 0%, #0F766E 55%, #14B8A6 100%);
color: #fff;
position: relative;
overflow: hidden;
}
/* Soft radial light on the upper-left adds depth without distracting. */
.tmg-about-cta[b-qwh1cmlld1]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.12), transparent 60%);
pointer-events: none;
}
[b-qwh1cmlld1] .tmg-about-cta-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
position: relative;
}
[b-qwh1cmlld1] .tmg-about-cta-title {
font-size: clamp(1.85rem, 2.4vw + 0.8rem, 2.5rem);
line-height: 1.18;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0 0 1.1rem;
color: rgba(255, 255, 255, 0.98);
}
[b-qwh1cmlld1] .tmg-about-cta-tagline {
font-size: 1.15rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
margin: 0 auto 2.25rem;
max-width: 560px;
}
[b-qwh1cmlld1] .tmg-about-cta-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
[b-qwh1cmlld1] .tmg-about-cta-actions .btn {
padding: 0.7rem 1.75rem;
font-size: 1rem;
}
[b-qwh1cmlld1] .tmg-about-cta-actions .btn-primary {
background: #fff;
color: var(--tmg-brand-deep, #115E59);
border-color: #fff;
font-weight: 600;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
[b-qwh1cmlld1] .tmg-about-cta-actions .btn-primary:hover {
background: rgba(255, 255, 255, 0.92);
color: var(--tmg-brand, #0F766E);
border-color: rgba(255, 255, 255, 0.92);
}
[b-qwh1cmlld1] .tmg-about-cta-actions .btn-outline-light {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
[b-qwh1cmlld1] .tmg-about-cta-actions .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
color: #fff;
}
/* Fine print ─────────────────────────────────────────────────────────────────── */
.tmg-about-fineprint[b-qwh1cmlld1] {
max-width: 760px;
margin: 0 auto;
padding: 3.5rem 1rem 4.5rem;
text-align: center;
}
[b-qwh1cmlld1] .tmg-about-fineprint p {
color: var(--tmg-text-muted, #6B7280);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
[b-qwh1cmlld1] .tmg-about-fineprint a {
color: var(--tmg-brand, #0F766E);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Responsive tightening ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.tmg-about-hero[b-qwh1cmlld1] {
padding: 3rem 1rem 3rem;
}
.tmg-about-principles[b-qwh1cmlld1] {
margin-top: 2.5rem;
}
.tmg-about-transparency[b-qwh1cmlld1] {
margin-top: 3rem;
}
.tmg-about-feature[b-qwh1cmlld1] {
margin-top: 4.5rem;
}
.tmg-about-builton[b-qwh1cmlld1] {
margin-top: 4.5rem;
padding: 2rem 1rem 2.5rem;
}
.tmg-about-cta[b-qwh1cmlld1] {
margin-top: 4.5rem;
padding: 4rem 1.25rem;
}
[b-qwh1cmlld1] .tmg-about-cta-title {
font-size: 1.65rem;
}
[b-qwh1cmlld1] .tmg-about-cta-tagline {
font-size: 1.02rem;
}
.tmg-about-fineprint[b-qwh1cmlld1] {
padding: 2.5rem 1rem 3.5rem;
}
[b-qwh1cmlld1] .tmg-about-feature-art {
min-height: 200px;
padding: 2rem 1.25rem;
}
}
/* /Components/Pages/Agents/Edit.razor.rz.scp.css */
/* Agents editor polish — textarea spacing, rail emphasis, byte-count meta. */
[b-w2h2bqa2ji] textarea.form-control {
min-height: 180px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.875rem;
line-height: 1.5;
}
[b-w2h2bqa2ji] .form-text {
color: var(--tmg-text-muted);
margin-top: 0.35rem;
}
[b-w2h2bqa2ji] .form-text code {
font-size: 0.78rem;
color: var(--tmg-text-muted);
background: var(--tmg-bg);
padding: 0.05rem 0.3rem;
border-radius: 3px;
}
[b-w2h2bqa2ji] .tmg-form-rail {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 1rem;
}
[b-w2h2bqa2ji] .tmg-form-rail .btn:disabled {
opacity: 0.55;
}
[b-w2h2bqa2ji] .nav-tabs {
border-bottom: 1px solid var(--tmg-border);
}
[b-w2h2bqa2ji] .nav-tabs .nav-link {
color: var(--tmg-text-muted);
border: none;
border-bottom: 2px solid transparent;
padding: 0.5rem 0.9rem;
margin-bottom: -1px;
background: transparent;
}
[b-w2h2bqa2ji] .nav-tabs .nav-link.active {
color: var(--tmg-brand);
border-bottom-color: var(--tmg-brand);
font-weight: 600;
background: transparent;
}
[b-w2h2bqa2ji] .alert-warning {
background: #FFFBEB;
border-color: #FEF3C7;
color: #92400E;
}
/* /Components/Pages/Agents/Index.razor.rz.scp.css */
/* Agents list polish. */
[b-rbw4qqn8bv] table.tmg-table tbody tr td {
vertical-align: middle;
}
[b-rbw4qqn8bv] table.tmg-table td code {
font-size: 0.85rem;
color: var(--tmg-text-muted);
background: transparent;
padding: 0;
white-space: nowrap;
}
[b-rbw4qqn8bv] table.tmg-table td:nth-child(2) code {
color: var(--tmg-text);
}
[b-rbw4qqn8bv] table.tmg-table td:last-child {
text-align: right;
width: 1%;
white-space: nowrap;
}
/* /Components/Pages/Billing/BillingSettings.razor.rz.scp.css */
.tmg-billing-settings-shell[b-0m3fire0hy] {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
}
.tmg-billing-settings-header h1[b-0m3fire0hy] {
color: var(--tmg-text, #111827);
}
.tmg-billing-empty[b-0m3fire0hy] {
margin: 2rem auto;
max-width: 460px;
text-align: center;
background: #fff;
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: 12px;
padding: 2.5rem 2rem;
box-shadow: 0 1px 3px rgb(15 23 42 / .04), 0 10px 20px rgb(15 23 42 / .05);
}
.tmg-billing-empty-icon[b-0m3fire0hy] {
font-size: 2.5rem;
color: var(--tmg-brand, #0F766E);
display: block;
margin-bottom: 0.6rem;
}
.tmg-billing-empty-title[b-0m3fire0hy] {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.tmg-billing-empty-sub[b-0m3fire0hy] {
color: #4B5563;
margin-bottom: 1.5rem;
}
.tmg-billing-cards[b-0m3fire0hy] {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tmg-billing-card[b-0m3fire0hy] {
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: 12px;
box-shadow: 0 1px 3px rgb(15 23 42 / .04), 0 6px 16px rgb(15 23 42 / .04);
overflow: hidden;
}
.tmg-billing-card-head[b-0m3fire0hy] {
background: var(--tmg-brand, #0F766E);
color: #fff;
padding: 0.75rem 1.1rem;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tmg-billing-card-body[b-0m3fire0hy] {
padding: 1.1rem 1.1rem 1.25rem;
}
.tmg-billing-plan-row[b-0m3fire0hy] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.3rem;
}
.tmg-billing-plan-name[b-0m3fire0hy] {
font-size: 1.15rem;
font-weight: 700;
}
.tmg-billing-plan-price[b-0m3fire0hy] {
font-size: 1.5rem;
font-weight: 700;
color: var(--tmg-brand, #0F766E);
margin-bottom: 0.7rem;
font-variant-numeric: tabular-nums;
}
.tmg-billing-renews[b-0m3fire0hy] {
color: #374151;
margin-bottom: 0.4rem;
}
.tmg-billing-subid code[b-0m3fire0hy] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
background: #F3F4F6;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.78rem;
}
.tmg-billing-status-badge[b-0m3fire0hy] {
display: inline-block;
padding: 0.18rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tmg-status-active[b-0m3fire0hy] { background: #ECFDF5; color: #047857; border: 1px solid #6EE7B7; }
.tmg-status-pastdue[b-0m3fire0hy] { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.tmg-status-canceled[b-0m3fire0hy] { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }
.tmg-status-none[b-0m3fire0hy] { background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB; }
.tmg-billing-card-pm[b-0m3fire0hy] {
display: flex;
align-items: center;
gap: 0.6rem;
}
.tmg-billing-card-brand[b-0m3fire0hy] {
font-size: 1.4rem;
color: var(--tmg-brand, #0F766E);
}
.tmg-billing-card-num[b-0m3fire0hy] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 0.98rem;
letter-spacing: 0.06em;
}
/* /Components/Pages/Billing/Cancel.razor.rz.scp.css */
.tmg-billing-cancel-shell[b-wzxgn21opj] {
display: flex;
justify-content: center;
padding: 4rem 1rem;
}
.tmg-billing-cancel-card[b-wzxgn21opj] {
max-width: 480px;
width: 100%;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: 0 1px 3px rgb(15 23 42 / .04), 0 14px 30px rgb(15 23 42 / .07);
padding: 2.5rem 2rem 2rem;
text-align: center;
}
.tmg-billing-cancel-icon[b-wzxgn21opj] {
font-size: 3rem;
color: var(--tmg-brand, #0F766E);
display: block;
margin-bottom: 0.75rem;
}
.tmg-billing-cancel-title[b-wzxgn21opj] {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 0.4rem;
}
.tmg-billing-cancel-sub[b-wzxgn21opj] {
color: #4B5563;
margin-bottom: 1.5rem;
}
.tmg-billing-cancel-actions[b-wzxgn21opj] {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* /Components/Pages/Billing/Success.razor.rz.scp.css */
.tmg-billing-success-shell[b-mpz1hfov27] {
display: flex;
justify-content: center;
padding: 3rem 1rem 4rem;
}
.tmg-billing-success-card[b-mpz1hfov27] {
max-width: 540px;
width: 100%;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: 0 1px 3px rgb(15 23 42 / .04), 0 18px 36px rgb(15 23 42 / .08);
padding: 2.5rem 2rem 2rem;
text-align: center;
}
.tmg-billing-success-iconwrap[b-mpz1hfov27] {
display: flex;
justify-content: center;
margin-bottom: 1.25rem;
}
.tmg-billing-success-tick[b-mpz1hfov27] {
width: 84px;
height: 84px;
}
.tmg-billing-tick-circle[b-mpz1hfov27] {
stroke: var(--tmg-brand, #0F766E);
stroke-width: 3;
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: tmg-tick-circle-b-mpz1hfov27 0.55s ease-out forwards;
}
.tmg-billing-tick-path[b-mpz1hfov27] {
stroke: var(--tmg-brand, #0F766E);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: tmg-tick-path-b-mpz1hfov27 0.35s 0.45s ease-out forwards;
}
@keyframes tmg-tick-circle-b-mpz1hfov27 {
to { stroke-dashoffset: 0; }
}
@keyframes tmg-tick-path-b-mpz1hfov27 {
to { stroke-dashoffset: 0; }
}
.tmg-billing-success-title[b-mpz1hfov27] {
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 0.4rem;
color: var(--tmg-text, #111827);
}
.tmg-billing-success-sub[b-mpz1hfov27] {
color: #4B5563;
margin-bottom: 1.5rem;
}
.tmg-billing-summary[b-mpz1hfov27] {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: 10px;
overflow: hidden;
margin: 0 0 1.25rem;
text-align: left;
}
.tmg-billing-summary > div[b-mpz1hfov27] {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
background: #F9FAFB;
}
.tmg-billing-summary > div:last-child[b-mpz1hfov27] { border-bottom: none; }
.tmg-billing-summary dt[b-mpz1hfov27] {
font-weight: 600;
color: #374151;
margin: 0;
}
.tmg-billing-summary dd[b-mpz1hfov27] {
margin: 0;
color: #111827;
font-variant-numeric: tabular-nums;
}
.tmg-billing-subid code[b-mpz1hfov27] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
background: #F3F4F6;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tmg-billing-success-actions[b-mpz1hfov27] {
display: flex;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
flex-wrap: wrap;
}
/* /Components/Pages/Billing/Unavailable.razor.rz.scp.css */
.tmg-billing-cancel-shell[b-t5k4n3ynkj] {
display: flex;
justify-content: center;
padding: 4rem 1rem;
}
.tmg-billing-cancel-card[b-t5k4n3ynkj] {
max-width: 540px;
width: 100%;
background: #fff;
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: 0 1px 3px rgb(15 23 42 / .04), 0 14px 30px rgb(15 23 42 / .07);
padding: 2.5rem 2rem 2rem;
text-align: center;
}
.tmg-billing-cancel-icon[b-t5k4n3ynkj] {
font-size: 3rem;
display: block;
margin-bottom: 0.75rem;
}
.tmg-billing-cancel-title[b-t5k4n3ynkj] {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 0.4rem;
}
.tmg-billing-cancel-sub[b-t5k4n3ynkj] {
color: #4B5563;
margin-bottom: 1.5rem;
}
.tmg-billing-cancel-sub code[b-t5k4n3ynkj] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
background: #F3F4F6;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tmg-billing-cancel-actions[b-t5k4n3ynkj] {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* /Components/Pages/Calls/Detail.razor.rz.scp.css */
/* Call detail — Wave 7C polish. */
/* Header */
[b-1cfsgy96pk] .page-header h1 {
margin-bottom: 4px;
}
[b-1cfsgy96pk] .page-header-subtitle code {
font-size: 13px;
background: #F3F4F6;
padding: 2px 8px;
border-radius: 4px;
color: var(--tmg-text);
}
/* Metric tiles row at top. */
[b-1cfsgy96pk] .tmg-metric {
padding: 14px 16px;
border-radius: var(--tmg-radius);
}
[b-1cfsgy96pk] .tmg-metric-label {
font-size: 10px;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--tmg-text-muted);
text-transform: uppercase;
}
[b-1cfsgy96pk] .tmg-metric-value {
font-size: 20px;
font-weight: 700;
color: var(--tmg-text);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Section headings */
[b-1cfsgy96pk] section h2.h5 {
color: var(--tmg-text);
font-size: 15px;
font-weight: 600;
margin-bottom: 0.75rem;
letter-spacing: -0.005em;
}
/* Recording: subtle bg + spacing. */
[b-1cfsgy96pk] audio {
width: 100%;
max-width: 560px;
margin-top: 2px;
}
/* Transcript bubbles: tighten width, sharper timestamps. */
[b-1cfsgy96pk] .tmg-transcript {
gap: 10px;
padding: 4px 0;
}
[b-1cfsgy96pk] .tmg-bubble {
max-width: 68%;
padding: 10px 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
font-size: 14px;
line-height: 1.5;
}
[b-1cfsgy96pk] .tmg-bubble-agent {
background: #F3F4F6;
color: var(--tmg-text);
}
[b-1cfsgy96pk] .tmg-bubble-user {
background: var(--tmg-brand);
color: #fff;
}
[b-1cfsgy96pk] .tmg-bubble-speaker {
font-size: 10px;
letter-spacing: 0.06em;
margin-bottom: 4px;
opacity: 0.85;
}
/* Notes section helper text — readable, not over-muted. */
[b-1cfsgy96pk] section p.text-muted.small {
color: var(--tmg-text-muted);
font-size: 12px;
line-height: 1.55;
margin-bottom: 0.75rem;
}
[b-1cfsgy96pk] section p.text-muted.small code {
background: #F3F4F6;
padding: 1px 5px;
border-radius: 3px;
font-size: 11.5px;
}
[b-1cfsgy96pk] textarea.form-control {
border-color: var(--tmg-border);
font-size: 14px;
line-height: 1.55;
transition: border-color .12s, box-shadow .12s;
}
[b-1cfsgy96pk] textarea.form-control:focus {
border-color: var(--tmg-brand);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
/* Notes action row: link buttons left, Save right (already in markup). */
[b-1cfsgy96pk] .btn-link.btn-sm {
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--tmg-brand);
}
[b-1cfsgy96pk] .btn-link.btn-sm:hover {
text-decoration: underline;
color: var(--tmg-brand-hover);
}
[b-1cfsgy96pk] .btn-link.btn-sm.text-muted {
color: var(--tmg-text-muted) !important;
}
/* Save button: clear primary even at small size. */
[b-1cfsgy96pk] .btn-primary.btn-sm {
background: var(--tmg-brand);
border-color: var(--tmg-brand);
color: #fff;
font-weight: 600;
padding: 6px 18px;
}
[b-1cfsgy96pk] .btn-primary.btn-sm:disabled {
background: var(--tmg-brand);
border-color: var(--tmg-brand);
opacity: .45;
}
[b-1cfsgy96pk] .btn-primary.btn-sm:not(:disabled):hover {
background: var(--tmg-brand-hover);
border-color: var(--tmg-brand-hover);
}
/* Analysis section: card-like for separation from notes. */
[b-1cfsgy96pk] section.analysis-section {
padding-top: 1rem;
border-top: 1px solid var(--tmg-border);
}
[b-1cfsgy96pk] section.analysis-section table.table-sm code {
background: #F3F4F6;
padding: 1px 5px;
border-radius: 3px;
font-size: 12.5px;
}
[b-1cfsgy96pk] section.analysis-section table.table-sm thead th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
}
/* Toast feedback under notes — softer. */
[b-1cfsgy96pk] .alert.py-2.small {
font-size: 12.5px;
padding: 8px 12px;
border-radius: var(--tmg-radius);
}
/* /Components/Pages/Campaigns/Contacts/ImportSheet.razor.rz.scp.css */
/* Import from Google Sheet — Wave 7C polish. */
[b-dhowwlsdwg] .form-label {
font-size: 13px;
font-weight: 600;
color: var(--tmg-text);
margin-bottom: 6px;
}
[b-dhowwlsdwg] select.form-select {
max-width: 560px;
border-color: var(--tmg-border);
height: 40px;
background-color: #FFFFFF;
transition: border-color .12s, box-shadow .12s;
}
[b-dhowwlsdwg] select.form-select:focus {
border-color: var(--tmg-brand);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
/* Preview button — primary feel even when outline-secondary. */
[b-dhowwlsdwg] .btn-outline-secondary {
font-weight: 500;
padding: 6px 16px;
}
[b-dhowwlsdwg] .btn-outline-secondary:not(:disabled):hover {
background: var(--tmg-brand);
color: #fff;
border-color: var(--tmg-brand);
}
/* Preview table compactness. */
[b-dhowwlsdwg] table.table-sm thead th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
}
[b-dhowwlsdwg] table.table-sm tbody tr.table-danger {
background: #FEF2F2;
}
[b-dhowwlsdwg] .alert {
padding: 10px 14px;
border-radius: var(--tmg-radius);
}
[b-dhowwlsdwg] .alert.alert-warning {
background: #FFFBEB;
border-color: #FDE68A;
border-left: 3px solid var(--tmg-warning);
color: #78350F;
}
/* /Components/Pages/Campaigns/Contacts/Upload.razor.rz.scp.css */
/* Upload contacts — Wave 7C/8 polish. */
.tmg-upload-card[b-exfr8rpkkf] {
background: var(--tmg-surface);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius-lg);
padding: 20px 24px;
max-width: 720px;
margin-bottom: 1.5rem;
}
.tmg-upload-card h2.h6[b-exfr8rpkkf] {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tmg-text-muted);
margin-bottom: 0;
font-weight: 600;
}
/* The proper drop-zone: centred icon + prompt, with the native file input
styled so the entire zone reads as a single affordance. */
.tmg-dropzone[b-exfr8rpkkf] {
position: relative;
border: 2px dashed var(--tmg-border);
border-radius: var(--tmg-radius-lg);
background: #FAFBFC;
padding: 28px 20px 22px;
text-align: center;
transition: border-color .15s, background-color .15s;
}
.tmg-dropzone:hover[b-exfr8rpkkf] {
border-color: var(--tmg-brand);
background: rgba(15, 118, 110, 0.04);
}
.tmg-dropzone-icon[b-exfr8rpkkf] {
display: block;
font-size: 28px;
color: var(--tmg-text-muted);
margin-bottom: 8px;
line-height: 1;
}
.tmg-dropzone-prompt[b-exfr8rpkkf] {
font-size: 14px;
font-weight: 500;
color: var(--tmg-text);
margin-bottom: 10px;
}
/* Style the inline file input + checkbox as a small import card. */
[b-exfr8rpkkf] .form-check {
padding: 8px 12px;
background: #F9FAFB;
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
display: inline-flex;
align-items: center;
gap: 8px;
}
[b-exfr8rpkkf] .form-check .form-check-input {
margin-top: 0;
margin-left: 0;
accent-color: var(--tmg-brand);
}
[b-exfr8rpkkf] .form-check .form-check-label {
font-size: 14px;
color: var(--tmg-text);
}
/* Make the InputFile blend into the dropzone wrapper. */
[b-exfr8rpkkf] .tmg-dropzone input[type="file"] {
display: inline-block;
width: auto;
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
background: #fff;
padding: 4px 8px;
color: var(--tmg-text);
font-size: 13px;
cursor: pointer;
}
/* Preview-time file input (after a successful selection rerender) keeps
the old standalone affordance shape. */
[b-exfr8rpkkf] input[type="file"]:not(.tmg-dropzone input[type="file"]) {
display: block;
padding: 12px;
width: 100%;
max-width: 560px;
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
background: #FAFBFC;
color: var(--tmg-text);
font-size: 13px;
cursor: pointer;
}
[b-exfr8rpkkf] input[type="file"]::file-selector-button {
border: 1px solid var(--tmg-border);
background: #FFFFFF;
padding: 6px 14px;
border-radius: var(--tmg-radius);
margin-right: 12px;
font-weight: 500;
color: var(--tmg-text);
cursor: pointer;
transition: background-color .12s, border-color .12s;
}
[b-exfr8rpkkf] input[type="file"]::file-selector-button:hover {
background: rgba(15, 118, 110, 0.06);
border-color: var(--tmg-brand);
color: var(--tmg-brand);
}
[b-exfr8rpkkf] .form-text {
font-size: 12px;
color: var(--tmg-text-muted);
margin-top: 6px;
}
/* Preview table: tighter rows + zebra. */
[b-exfr8rpkkf] table.table-sm thead th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
border-bottom: 2px solid var(--tmg-border);
}
[b-exfr8rpkkf] table.table-sm tbody tr.table-danger {
background: #FEF2F2;
}
[b-exfr8rpkkf] table.table-sm code {
font-size: 12px;
}
/* Confirm-import button spacing. */
[b-exfr8rpkkf] .btn-primary {
margin-left: 8px;
}
/* /Components/Pages/Campaigns/Detail.razor.rz.scp.css */
/* Campaign Detail — Wave 7C polish.
Restyle only — do not change DOM/structure (manual-mode flow is load-bearing). */
/* ---------- Header ---------- */
[b-yukges59ir] .page-header h1 {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
[b-yukges59ir] .page-header h1 .badge {
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
vertical-align: middle;
}
/* Brand-aligned mode chip (replaces Bootstrap default bg-info text-dark brick). */
[b-yukges59ir] .page-header h1 .badge.tmg-mode-chip {
background: rgba(15, 118, 110, 0.10);
color: var(--tmg-brand);
border: 1px solid rgba(15, 118, 110, 0.25);
letter-spacing: 0.02em;
}
[b-yukges59ir] .page-header-actions .btn {
font-weight: 500;
}
/* ---------- Tab strip ---------- */
[b-yukges59ir] .nav-tabs {
border-bottom: 1px solid var(--tmg-border);
gap: 4px;
}
[b-yukges59ir] .nav-tabs .nav-link {
color: var(--tmg-text-muted);
border: none;
border-bottom: 2px solid transparent;
padding: 10px 16px;
font-weight: 500;
font-size: 14px;
border-radius: 0;
background: transparent;
transition: color .12s, border-color .12s, background-color .12s;
}
[b-yukges59ir] .nav-tabs .nav-link:hover {
color: var(--tmg-text);
background: rgba(15, 118, 110, 0.04);
border-bottom-color: var(--tmg-border);
}
[b-yukges59ir] .nav-tabs .nav-link.active {
color: var(--tmg-brand);
border-bottom: 2px solid var(--tmg-brand);
background: transparent;
font-weight: 600;
}
/* ---------- Overview: budget alert — slimmer ---------- */
[b-yukges59ir] .alert.alert-info,
[b-yukges59ir] .alert.alert-warning,
[b-yukges59ir] .alert.alert-danger {
padding: 10px 14px;
font-size: 14px;
border-radius: var(--tmg-radius);
margin-bottom: 1rem;
}
[b-yukges59ir] .alert.alert-info {
background: #ECFEFF;
border-color: #A5F3FC;
color: #0E7490;
border-left: 3px solid #06B6D4;
}
[b-yukges59ir] .alert.alert-warning {
background: #FFFBEB;
border-color: #FDE68A;
color: #78350F;
border-left: 3px solid var(--tmg-warning);
}
[b-yukges59ir] .alert.alert-danger {
border-left: 3px solid var(--tmg-danger);
}
/* ---------- Counters row — denser cards, numeric value emphasis ---------- */
[b-yukges59ir] .tmg-metric {
padding: 14px 16px;
border-radius: var(--tmg-radius);
}
[b-yukges59ir] .tmg-metric-label {
font-size: 10px;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--tmg-text-muted);
text-transform: uppercase;
}
[b-yukges59ir] .tmg-metric-value {
font-size: 22px;
font-weight: 700;
color: var(--tmg-text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin-top: 2px;
}
/* Secondary action group on Overview: visually grouped. */
[b-yukges59ir] .mb-3.d-flex.flex-wrap.gap-2 {
padding: 10px 12px;
background: #F9FAFB;
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
margin-top: 0.25rem;
}
[b-yukges59ir] .mb-3.d-flex.flex-wrap.gap-2 .btn {
font-weight: 500;
}
/* Definition list (Agent / From number / Dial window ...) */
[b-yukges59ir] dl.row {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--tmg-border);
}
[b-yukges59ir] dl.row dt {
color: var(--tmg-text-muted);
font-weight: 500;
font-size: 13px;
padding-top: 4px;
padding-bottom: 4px;
}
[b-yukges59ir] dl.row dd {
color: var(--tmg-text);
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
}
[b-yukges59ir] dl.row dd code {
font-size: 13px;
background: transparent;
padding: 0;
color: var(--tmg-text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Tighten the dl: the keys ("Agent", "From number"...) are short; using
col-sm-3 leaves a huge gap. Override to give keys 160px max. */
[b-yukges59ir] dl.row > dt.col-sm-3 {
flex: 0 0 160px;
max-width: 160px;
}
[b-yukges59ir] dl.row > dd.col-sm-9 {
flex: 0 0 calc(100% - 160px);
max-width: calc(100% - 160px);
}
/* ---------- Contacts tab ---------- */
[b-yukges59ir] table.tmg-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
white-space: nowrap;
}
[b-yukges59ir] table.tmg-table td {
vertical-align: middle;
padding-top: 12px;
padding-bottom: 12px;
}
[b-yukges59ir] table.tmg-table tbody tr:hover {
background: rgba(15, 118, 110, 0.03);
}
[b-yukges59ir] table.tmg-table td code {
font-size: 13px;
color: var(--tmg-text-muted);
background: transparent;
padding: 0;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Right-most action column: fixed-width slots so single "Call" lines up
with the "Call · Skip" pairs underneath. */
[b-yukges59ir] table.tmg-table tbody td:last-child .btn-group {
min-width: 132px;
justify-content: flex-end;
display: inline-flex;
}
[b-yukges59ir] table.tmg-table tbody td:last-child .btn-group .btn {
min-width: 64px;
}
/* Notes column muted preview */
[b-yukges59ir] table.tmg-table td small.text-muted.fst-italic {
opacity: .6;
font-size: 12px;
}
/* Right-most action button group: snug, right-aligned. */
[b-yukges59ir] table.tmg-table tbody td:last-child {
text-align: right;
white-space: nowrap;
}
[b-yukges59ir] .btn-group-sm .btn {
margin-left: 2px;
}
[b-yukges59ir] .btn-group-sm .btn i.bi {
font-size: 12px;
}
/* Batch research toolbar above contacts. */
[b-yukges59ir] .d-flex.align-items-center.gap-2.mb-2.flex-wrap {
padding: 10px 12px;
background: #F9FAFB;
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
margin-bottom: 0.75rem !important;
}
/* In-flight active-call banner: more presence. */
[b-yukges59ir] .alert.alert-info strong {
color: inherit;
}
/* ---------- Calls tab ---------- */
[b-yukges59ir] table.tmg-table.table-hover tbody td {
padding-top: 10px;
padding-bottom: 10px;
}
[b-yukges59ir] .tmg-row-clickable {
cursor: pointer;
}
[b-yukges59ir] .tmg-row-clickable:hover {
background: rgba(15, 118, 110, 0.05) !important;
}
/* Avatar column: tighter, centred. */
[b-yukges59ir] .tmg-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--tmg-brand);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
/* Right-align numeric duration/cost columns on the Calls table. */
[b-yukges59ir] table.tmg-table.table-hover tbody td:nth-child(5),
[b-yukges59ir] table.tmg-table.table-hover tbody td:nth-child(6),
[b-yukges59ir] table.tmg-table.table-hover thead th:nth-child(5),
[b-yukges59ir] table.tmg-table.table-hover thead th:nth-child(6) {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ---------- Settings tab ---------- */
[b-yukges59ir] .h5 {
color: var(--tmg-text);
font-size: 15px;
font-weight: 600;
margin-top: 1.5rem;
}
[b-yukges59ir] label.form-check {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
cursor: pointer;
font-size: 14px;
}
[b-yukges59ir] label.form-check input[type="checkbox"] {
accent-color: var(--tmg-brand);
margin-right: 0;
}
/* ---------- Objection handling tab ---------- */
[b-yukges59ir] .tmg-objection-card {
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
background: #fff;
transition: border-color .12s, box-shadow .12s;
}
[b-yukges59ir] .tmg-objection-card:hover {
border-color: rgba(15, 118, 110, 0.35);
box-shadow: 0 1px 3px rgba(15, 118, 110, 0.05);
}
[b-yukges59ir] .tmg-objection-card h3 {
color: var(--tmg-text);
font-size: 15px;
}
[b-yukges59ir] .tmg-objection-card .text-body {
color: var(--tmg-text-muted);
font-size: 14px;
line-height: 1.5;
}
[b-yukges59ir] .tmg-objection-card .btn-group .btn {
padding: 4px 10px;
line-height: 1.2;
}
[b-yukges59ir] .tmg-objection-card .btn-group .btn i.bi {
font-size: 14px;
line-height: 1;
vertical-align: middle;
}
/* Slightly more breathing room between the body of the card and the action group. */
[b-yukges59ir] .tmg-objection-card .card-body > .d-flex {
gap: 0.75rem;
}
/* ---------- Pagination nav under tables ---------- */
[b-yukges59ir] nav .btn {
margin-right: 4px;
}
/* ---------- Modal Research section ---------- */
[b-yukges59ir] .tmg-modal-research .tmg-research-link {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
}
[b-yukges59ir] .tmg-modal-research .tmg-research-link:hover,
[b-yukges59ir] .tmg-modal-research .tmg-research-link:focus {
text-decoration: underline;
color: #0a58ca;
}
[b-yukges59ir] .tmg-modal-research .tmg-research-links li {
line-height: 1.5;
}
[b-yukges59ir] .tmg-modal-research p {
line-height: 1.45;
overflow-wrap: anywhere;
}
/* /Components/Pages/Campaigns/Index.razor.rz.scp.css */
/* Campaigns list — Wave 7C polish. Scoped: only affects this page. */
/* Toolbar: give inputs comfortable widths, raise contrast on the search,
and let the spacer push "+ New campaign" to the trailing edge. */
[b-6ljcebwsax] .tmg-toolbar {
padding: 14px 16px;
gap: 10px;
}
[b-6ljcebwsax] .tmg-toolbar input[type="text"] {
min-width: 240px;
max-width: 320px;
height: 36px;
padding: 0 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 32px;
}
[b-6ljcebwsax] .tmg-toolbar select.form-select {
min-width: 150px;
max-width: 180px;
height: 36px;
}
[b-6ljcebwsax] .tmg-toolbar .btn-primary {
height: 36px;
padding: 0 16px;
font-weight: 600;
white-space: nowrap;
}
/* Table — column-specific tightening so counter columns don't dominate. */
[b-6ljcebwsax] .tmg-table {
margin-top: .25rem;
}
[b-6ljcebwsax] .tmg-table thead th {
font-size: 11px;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--tmg-text-muted);
}
/* Centre numeric counter columns (Pending..Skipped: 4th–9th columns). */
[b-6ljcebwsax] .tmg-table thead th:nth-child(n+4):nth-child(-n+9),
[b-6ljcebwsax] .tmg-table tbody td:nth-child(n+4):nth-child(-n+9) {
text-align: center;
width: 72px;
font-variant-numeric: tabular-nums;
}
/* Status column (3rd) — keep badge left-aligned but reserve breathing room. */
[b-6ljcebwsax] .tmg-table thead th:nth-child(3),
[b-6ljcebwsax] .tmg-table tbody td:nth-child(3) {
width: 110px;
}
/* Mode column (2nd) — small, dim, capitalized tag. */
[b-6ljcebwsax] .tmg-table tbody td:nth-child(2) .small {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tmg-text-muted);
}
/* Name column — slightly longer truncation, brand-coloured link weight. */
[b-6ljcebwsax] .tmg-table tbody td:first-child {
max-width: 320px;
}
[b-6ljcebwsax] .tmg-table tbody td:first-child a.tmg-truncate {
font-weight: 600;
color: var(--tmg-text);
max-width: 300px;
}
[b-6ljcebwsax] .tmg-table tbody td:first-child a.tmg-truncate:hover {
color: var(--tmg-brand);
}
/* Actions column (last) — right-aligned, snug button group. */
[b-6ljcebwsax] .tmg-table thead th:last-child,
[b-6ljcebwsax] .tmg-table tbody td:last-child {
text-align: right;
white-space: nowrap;
width: 140px;
}
[b-6ljcebwsax] .tmg-table tbody td:last-child .btn {
margin-left: 4px;
min-width: 64px;
font-weight: 500;
}
/* Row hover — make rows feel clickable. */
[b-6ljcebwsax] .tmg-table tbody tr:hover {
background: rgba(15, 118, 110, 0.03);
}
/* Zero counter cells fade out so non-zero values pop. */
[b-6ljcebwsax] .tmg-table tbody td.tmg-zero {
color: #CBD2DA;
}
/* Pagination footer — proper card-floor styling, not naked flex. */
.pagination-footer[b-6ljcebwsax] {
margin-top: 1rem;
padding: 10px 14px;
border-top: 1px solid var(--tmg-border);
background: #FAFBFC;
border-bottom-left-radius: var(--tmg-radius);
border-bottom-right-radius: var(--tmg-radius);
display: flex;
justify-content: space-between;
align-items: center;
}
/* /Components/Pages/Campaigns/New.razor.rz.scp.css */
/* New campaign form — Wave 7C polish. */
[b-ikgivra5sr] .tmg-form .form-label.fw-bold {
color: var(--tmg-text);
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
[b-ikgivra5sr] .tmg-form .form-text {
font-size: 12px;
color: var(--tmg-text-muted);
margin-top: 6px;
line-height: 1.5;
}
/* Mode radios: turn into segmented pills. */
[b-ikgivra5sr] .tmg-form input[type="radio"] {
accent-color: var(--tmg-brand);
margin-right: 6px;
}
[b-ikgivra5sr] .tmg-form label.me-3,
[b-ikgivra5sr] .tmg-form label.me-3 + label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--tmg-border);
border-radius: 999px;
cursor: pointer;
font-size: 14px;
transition: background-color .12s, border-color .12s;
}
[b-ikgivra5sr] .tmg-form label.me-3:hover,
[b-ikgivra5sr] .tmg-form label.me-3 + label:hover {
background: rgba(15, 118, 110, 0.04);
border-color: var(--tmg-brand);
}
[b-ikgivra5sr] .tmg-form .form-control,
[b-ikgivra5sr] .tmg-form .form-select {
border-color: var(--tmg-border);
transition: border-color .12s, box-shadow .12s;
}
[b-ikgivra5sr] .tmg-form .form-control:focus,
[b-ikgivra5sr] .tmg-form .form-select:focus {
border-color: var(--tmg-brand);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
/* Spacing rhythm between field groups. */
[b-ikgivra5sr] .tmg-form .mb-3 {
margin-bottom: 1.25rem !important;
}
/* Recording-warning alert: warmer + tighter. */
[b-ikgivra5sr] .tmg-form .alert-warning {
border-left: 3px solid var(--tmg-warning);
background: #FFFBEB;
border-color: #FDE68A;
color: #78350F;
font-size: 13px;
line-height: 1.5;
}
/* /Components/Pages/Compliance.razor.rz.scp.css */
/* Compliance — long-form public page. Style sister to About; tighter copy density
because this is a reference doc, not a marketing pitch. */
[b-3j2a7bh5hh] .tmg-compliance-page-header {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
/* Hero ───────────────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-hero {
text-align: center;
padding: 3.5rem 1rem 2rem;
max-width: 760px;
margin: 0 auto;
}
[b-3j2a7bh5hh] .tmg-compliance-hero-icon {
font-size: 2.5rem;
color: var(--tmg-brand, #0F766E);
margin-bottom: 0.85rem;
display: inline-block;
}
[b-3j2a7bh5hh] .tmg-compliance-hero-title {
font-size: clamp(1.85rem, 2.4vw + 1rem, 2.5rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--tmg-text, #111827);
margin: 0 0 1rem;
}
[b-3j2a7bh5hh] .tmg-compliance-hero-tagline {
font-size: 1.1rem;
line-height: 1.6;
color: var(--tmg-text-muted, #4B5563);
margin: 0 auto;
max-width: 600px;
}
/* Top alert ─────────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-alert {
max-width: 920px;
margin: 1.5rem auto 0;
padding: 0 1rem;
}
[b-3j2a7bh5hh] .tmg-compliance-alert-inner {
background: #FEF3C7;
border: 1px solid #F59E0B;
border-left: 4px solid #B45309;
border-radius: var(--tmg-radius-lg, 12px);
padding: 1.25rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
[b-3j2a7bh5hh] .tmg-compliance-alert-icon {
color: #B45309;
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
[b-3j2a7bh5hh] .tmg-compliance-alert-title {
font-weight: 600;
color: #78350F;
margin-bottom: 0.35rem;
}
[b-3j2a7bh5hh] .tmg-compliance-alert-body {
color: #78350F;
line-height: 1.55;
margin: 0;
font-size: 0.95rem;
}
/* Sections ──────────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-section {
max-width: 1180px;
margin: 4rem auto 0;
padding: 0 1rem;
}
[b-3j2a7bh5hh] .tmg-compliance-section-title {
font-size: clamp(1.4rem, 1.4vw + 0.8rem, 1.75rem);
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 700;
color: var(--tmg-text, #111827);
margin: 0 0 1rem;
}
[b-3j2a7bh5hh] .tmg-compliance-section p {
color: var(--tmg-text-muted, #4B5563);
line-height: 1.6;
max-width: 70ch;
}
[b-3j2a7bh5hh] .tmg-compliance-regulated {
list-style: none;
padding: 0;
margin: 1.25rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.4rem 1.5rem;
max-width: 920px;
}
[b-3j2a7bh5hh] .tmg-compliance-regulated li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.4rem 0;
color: var(--tmg-text, #111827);
line-height: 1.5;
font-size: 0.95rem;
}
[b-3j2a7bh5hh] .tmg-bullet-icon {
color: var(--tmg-brand, #0F766E);
font-weight: 700;
flex-shrink: 0;
margin-top: 0.2rem;
}
/* Regime cards ──────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-regimes {
margin-top: 1.5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-card {
width: 100%;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
padding: 1.5rem 1.25rem 1.25rem;
box-shadow: var(--tmg-shadow-card, 0 1px 3px rgb(15 23 42 / .04), 0 10px 25px rgb(15 23 42 / .05));
display: flex;
flex-direction: column;
transition: transform 160ms ease, box-shadow 160ms ease;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgb(15 23 42 / .05), 0 18px 36px rgb(15 23 42 / .08);
}
[b-3j2a7bh5hh] .tmg-compliance-regime-flag {
font-size: 1.85rem;
line-height: 1;
margin-bottom: 0.65rem;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--tmg-text, #111827);
margin: 0 0 0.65rem;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-bullets {
list-style: none;
padding: 0;
margin: 0 0 0.85rem;
flex-grow: 1;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-bullets li {
color: var(--tmg-text-muted, #4B5563);
font-size: 0.88rem;
line-height: 1.5;
padding: 0.25rem 0;
border-bottom: 1px solid var(--tmg-border-soft, #F3F4F6);
}
[b-3j2a7bh5hh] .tmg-compliance-regime-bullets li:last-child {
border-bottom: none;
}
[b-3j2a7bh5hh] .tmg-compliance-regime-fine {
font-size: 0.78rem;
color: #B45309;
background: #FEF3C7;
border-radius: 6px;
padding: 0.4rem 0.65rem;
line-height: 1.35;
font-weight: 500;
margin-top: auto;
}
/* Tool cards ────────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-tools {
margin-top: 1.5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-tool-card {
width: 100%;
background: var(--tmg-surface, #fff);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
padding: 1.35rem 1.25rem;
box-shadow: 0 1px 2px rgb(15 23 42 / .03);
transition: transform 160ms ease, box-shadow 160ms ease;
}
[b-3j2a7bh5hh] .tmg-compliance-tool-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgb(15 23 42 / .05), 0 18px 36px rgb(15 23 42 / .08);
}
[b-3j2a7bh5hh] .tmg-compliance-tool-icon {
font-size: 1.4rem;
color: var(--tmg-brand, #0F766E);
margin-bottom: 0.65rem;
display: block;
}
[b-3j2a7bh5hh] .tmg-compliance-tool-card h3 {
font-weight: 600;
color: var(--tmg-text, #111827);
margin: 0 0 0.4rem;
}
[b-3j2a7bh5hh] .tmg-compliance-tool-card p {
color: var(--tmg-text-muted, #4B5563);
line-height: 1.5;
font-size: 0.9rem;
margin: 0;
}
/* Final checklist ───────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-final {
margin-top: 5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-final-inner {
max-width: 820px;
background: linear-gradient(135deg, #F0FDFA 0%, #ECFEFF 100%);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
padding: 2.5rem 2rem;
margin: 0 auto;
}
[b-3j2a7bh5hh] .tmg-compliance-final-inner .tmg-compliance-section-title {
margin-bottom: 1.25rem;
}
[b-3j2a7bh5hh] .tmg-compliance-checklist {
counter-reset: complchk;
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-checklist li {
position: relative;
padding: 0.65rem 0 0.65rem 2.5rem;
color: var(--tmg-text, #111827);
line-height: 1.55;
border-bottom: 1px solid rgba(15, 118, 110, 0.12);
counter-increment: complchk;
}
[b-3j2a7bh5hh] .tmg-compliance-checklist li:last-child {
border-bottom: none;
}
[b-3j2a7bh5hh] .tmg-compliance-checklist li::before {
content: counter(complchk);
position: absolute;
left: 0;
top: 0.65rem;
width: 1.75rem;
height: 1.75rem;
background: var(--tmg-brand, #0F766E);
color: #fff;
border-radius: 50%;
font-size: 0.85rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
[b-3j2a7bh5hh] .tmg-compliance-final-note {
color: var(--tmg-text-muted, #4B5563);
font-size: 0.92rem;
line-height: 1.6;
margin: 0;
padding-top: 1rem;
border-top: 1px solid rgba(15, 118, 110, 0.18);
font-style: italic;
}
/* Back link ─────────────────────────────────────────────────────────────────── */
[b-3j2a7bh5hh] .tmg-compliance-back {
max-width: 1180px;
margin: 2rem auto 4rem;
padding: 0 1rem;
text-align: center;
}
[b-3j2a7bh5hh] .tmg-compliance-back-link {
color: var(--tmg-brand, #0F766E);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: background 120ms ease;
}
[b-3j2a7bh5hh] .tmg-compliance-back-link:hover {
background: rgba(15, 118, 110, 0.08);
text-decoration: none;
}
/* Responsive ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
[b-3j2a7bh5hh] .tmg-compliance-hero {
padding-top: 2.5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-section {
margin-top: 3rem;
}
[b-3j2a7bh5hh] .tmg-compliance-final {
margin-top: 3.5rem;
}
[b-3j2a7bh5hh] .tmg-compliance-final-inner {
padding: 1.75rem 1.25rem;
}
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Wave 7B: Dashboard scoped polish.
Targets, in order of priority:
1. "Now strip" 4-tile row: stronger label/value hierarchy + accent edge.
2. Active campaigns table: bolder headers, hover row, aligned status pill,
progress bar contrast.
3. Outcomes funnel: dim zero values, decreasing tile size hint.
4. Calls-per-day chart: visible baseline, wider empty-day bars.
5. Recent calls list: tighter two-line meta, time chip on trailing.
6. Empty states: more generous padding + softer icon. */
/* ---------- Now strip ---------- */
section.row .tmg-metric[b-iirw87z6ch] {
position: relative;
padding: 14px 16px 16px;
overflow: hidden;
}
section.row .tmg-metric[b-iirw87z6ch]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--tmg-brand);
opacity: 0.55;
}
section.row .tmg-metric-label[b-iirw87z6ch] {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
section.row .tmg-metric-value[b-iirw87z6ch] {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
}
section.row .tmg-metric-detail[b-iirw87z6ch] {
font-size: 0.78rem;
margin-top: 6px;
}
section.row .progress[b-iirw87z6ch] {
background: rgba(15, 118, 110, 0.10);
}
section.row .progress-bar[b-iirw87z6ch] {
background: var(--tmg-brand);
}
/* ---------- Active campaigns table ---------- */
.tmg-card h2.h5[b-iirw87z6ch] {
font-weight: 600;
letter-spacing: -0.005em;
color: var(--tmg-text);
}
.tmg-table thead th[b-iirw87z6ch] {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tmg-text-muted);
border-bottom: 2px solid var(--tmg-border);
padding-top: 10px;
padding-bottom: 10px;
white-space: nowrap;
}
.tmg-table tbody tr[b-iirw87z6ch] {
transition: background-color 0.12s ease;
}
.tmg-table tbody tr:hover[b-iirw87z6ch] {
background: rgba(15, 118, 110, 0.04);
}
.tmg-table tbody td[b-iirw87z6ch] {
vertical-align: middle;
padding-top: 10px;
padding-bottom: 10px;
}
.tmg-table tbody td .badge.tmg-status[b-iirw87z6ch] {
vertical-align: middle;
}
.tmg-table tbody td .progress[b-iirw87z6ch] {
background: rgba(15, 118, 110, 0.10);
margin-bottom: 2px;
}
.tmg-table tbody td .progress-bar[b-iirw87z6ch] {
background: var(--tmg-brand);
}
.tmg-table tbody td small[b-iirw87z6ch] {
color: var(--tmg-text-muted);
font-variant-numeric: tabular-nums;
}
/* Inline action column: align right so empty cells don't yank the row layout. */
.tmg-table tbody td:last-child[b-iirw87z6ch] {
text-align: right;
white-space: nowrap;
}
/* ---------- Outcomes funnel ---------- */
section.tmg-card .row .tmg-metric.text-center[b-iirw87z6ch] {
padding: 12px 8px;
}
section.tmg-card .row .col-md-2 .tmg-metric-label[b-iirw87z6ch] {
margin-bottom: 4px;
}
section.tmg-card .row .col-md-2 .tmg-metric-value[b-iirw87z6ch] {
font-size: 1.6rem;
font-variant-numeric: tabular-nums;
}
/* Visually de-emphasise zero values in the funnel — keeps numeric tabular
alignment but tells the eye "nothing here". */
section.tmg-card .row .tmg-metric-value:not(:empty)[b-iirw87z6ch] {
color: var(--tmg-text);
}
/* ---------- Calls per day ---------- */
.tmg-bar-row[b-iirw87z6ch] {
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--tmg-border);
margin: 0 auto;
max-width: 560px;
}
.tmg-bar[b-iirw87z6ch] {
width: 28px;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--tmg-brand) 0%, var(--tmg-brand-hover) 100%);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.tmg-bar.tmg-bar-empty[b-iirw87z6ch] {
width: 28px;
height: 6px !important;
background: var(--tmg-border);
box-shadow: none;
}
.tmg-bar-count[b-iirw87z6ch] {
font-size: 0.78rem;
font-weight: 600;
color: var(--tmg-text);
min-height: 1.1em;
}
.tmg-bar-label[b-iirw87z6ch] {
font-size: 0.72rem;
color: var(--tmg-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---------- Recent calls ---------- */
.tmg-list-item[b-iirw87z6ch] {
padding: 12px 8px;
gap: 14px;
}
.tmg-list-item .tmg-avatar[b-iirw87z6ch] {
width: 36px;
height: 36px;
flex: 0 0 36px;
font-size: 0.78rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}
.tmg-list-item .tmg-list-title[b-iirw87z6ch] {
font-weight: 600;
font-size: 0.92rem;
margin-bottom: 2px;
}
.tmg-list-item .tmg-list-meta[b-iirw87z6ch] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
line-height: 1.2;
}
.tmg-list-item .tmg-list-trailing[b-iirw87z6ch] {
font-size: 0.75rem;
padding: 2px 8px;
background: rgba(15, 23, 42, 0.05);
color: var(--tmg-text-muted);
border-radius: 9999px;
font-variant-numeric: tabular-nums;
}
/* ---------- Empty states ---------- */
.tmg-empty[b-iirw87z6ch] {
padding: 2.5rem 1rem 2.25rem;
}
.tmg-empty .tmg-empty-icon[b-iirw87z6ch] {
font-size: 2.4rem;
opacity: 0.35;
color: var(--tmg-brand);
margin-bottom: 0.6rem;
}
.tmg-empty .tmg-empty-title[b-iirw87z6ch] {
font-size: 1rem;
margin-bottom: 0.35rem;
}
.tmg-empty p[b-iirw87z6ch] {
font-size: 0.88rem;
color: var(--tmg-text-muted);
}
/* ---------- Page header polish ---------- */
.page-header h1[b-iirw87z6ch] {
letter-spacing: -0.015em;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.tmg-error[b-infcrc7z7a] {
text-align: center;
padding: 48px 16px;
max-width: 540px;
margin: 0 auto;
}
.tmg-error-icon[b-infcrc7z7a] {
font-size: 2.75rem;
color: #DC2626;
margin-bottom: 12px;
line-height: 1;
}
.tmg-error-title[b-infcrc7z7a] {
font-size: 1.625rem;
font-weight: 700;
margin: 0 0 12px;
color: var(--tmg-text, #111827);
letter-spacing: -0.01em;
}
.tmg-error-text[b-infcrc7z7a] {
color: var(--tmg-text-muted, #6B7280);
margin-bottom: 16px;
}
.tmg-error-request[b-infcrc7z7a] {
background: var(--tmg-bg, #F9FAFB);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.875rem;
color: var(--tmg-text-muted, #6B7280);
display: inline-block;
margin-bottom: 20px;
}
.tmg-error-request code[b-infcrc7z7a] {
font-size: 0.8rem;
color: var(--tmg-text, #111827);
}
.tmg-error-actions[b-infcrc7z7a] {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home hero polish: tighter top spacing, anchored brand mark, balanced cards. */
.tmg-hero[b-kzwgqcrq1w] {
padding: 64px 16px 40px;
max-width: 720px;
margin: 0 auto;
}
.tmg-hero-mark[b-kzwgqcrq1w] {
margin-bottom: 16px;
opacity: 0.95;
}
.tmg-hero-title[b-kzwgqcrq1w] {
font-size: 2.5rem;
letter-spacing: -0.02em;
line-height: 1.15;
}
.tmg-hero-tagline[b-kzwgqcrq1w] {
font-size: 1.125rem;
max-width: 540px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.tmg-hero-actions[b-kzwgqcrq1w] {
margin-top: 28px;
}
.tmg-hero-actions .btn[b-kzwgqcrq1w] {
padding: 0.6rem 1.5rem;
font-size: 1rem;
font-weight: 500;
}
/* Feature card row: uniform alignment, gentle hover lift. */
.tmg-feature-row[b-kzwgqcrq1w] {
margin-top: 32px;
margin-bottom: 24px;
}
.tmg-feature-row .tmg-card[b-kzwgqcrq1w] {
height: 100%;
padding: 24px;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.tmg-feature-row .tmg-card:hover[b-kzwgqcrq1w] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.tmg-feature-icon[b-kzwgqcrq1w] {
font-size: 1.75rem;
margin-bottom: 12px;
}
.tmg-feature-row h2[b-kzwgqcrq1w] {
font-weight: 600;
margin-bottom: 8px;
}
/* /Components/Pages/Insights/Index.razor.rz.scp.css */
/* Scoped chart styles for the Insights page. No JS chart libraries — pure CSS. */
/* Containment: when a tenant has many campaigns the vbar-row can otherwise force the
parent card (and the page itself) to grow beyond the viewport. Pin the card so the
horizontal scrollbar lives inside the chart container, not on the whole page. */
.tmg-insights-card[b-064uc6jash] {
overflow-x: hidden;
min-width: 0;
max-width: 100%;
}
.tmg-insights-card h2[b-064uc6jash] {
margin-bottom: 0.5rem;
}
/* Horizontal bar list (objections). */
.tmg-hbar-list[b-064uc6jash] {
list-style: none;
margin: 0;
padding: 0;
}
.tmg-hbar-row[b-064uc6jash] {
display: grid;
grid-template-columns: minmax(140px, 28%) 1fr 56px;
align-items: center;
gap: 0.75rem;
padding: 0.35rem 0;
}
.tmg-hbar-label[b-064uc6jash] {
font-size: 0.9rem;
color: var(--tmg-text, #1f2937);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tmg-hbar-track[b-064uc6jash] {
background: var(--tmg-track, #f1f3f5);
border-radius: 4px;
height: 18px;
position: relative;
overflow: hidden;
}
.tmg-hbar-fill[b-064uc6jash] {
background: var(--tmg-brand, #14b8a6);
height: 100%;
border-radius: 4px;
transition: width 220ms ease;
}
.tmg-hbar-count[b-064uc6jash] {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--tmg-text, #1f2937);
text-align: right;
}
/* Vertical bar row (conversion %, appointments). */
.tmg-vbar-row[b-064uc6jash] {
display: flex;
align-items: flex-end;
gap: 1rem;
padding: 0.5rem 0 0.5rem;
min-height: 180px;
overflow-x: auto;
/* Critical: without min-width:0 the flex children's intrinsic min-content size
propagates up and bloats the parent card past the viewport. */
min-width: 0;
scrollbar-width: thin;
}
.tmg-vbar-col[b-064uc6jash] {
display: flex;
flex-direction: column;
align-items: center;
/* Snug fixed-width cells so many-campaign tenants get a usable horizontal scroll
inside the card instead of a 12,000px-wide page. */
flex: 0 0 88px;
min-width: 88px;
}
.tmg-vbar-count[b-064uc6jash] {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--tmg-text, #1f2937);
margin-bottom: 0.25rem;
}
.tmg-vbar[b-064uc6jash] {
width: 36px;
background: var(--tmg-brand, #14b8a6);
border-radius: 4px 4px 0 0;
transition: height 220ms ease;
}
.tmg-vbar-empty[b-064uc6jash] {
background: var(--tmg-track, #e5e7eb);
}
.tmg-vbar-label[b-064uc6jash] {
margin-top: 0.4rem;
font-size: 0.85rem;
text-align: center;
color: var(--tmg-text, #1f2937);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tmg-vbar-sublabel[b-064uc6jash] {
font-size: 0.75rem;
color: var(--tmg-muted, #6b7280);
margin-top: 0.1rem;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.tmg-notfound[b-ucwe5w5cph] {
text-align: center;
padding: 48px 16px;
max-width: 480px;
margin: 0 auto;
}
.tmg-notfound-code[b-ucwe5w5cph] {
font-size: 4rem;
font-weight: 700;
color: var(--tmg-brand, #0F766E);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 8px;
}
.tmg-notfound-title[b-ucwe5w5cph] {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 8px;
color: var(--tmg-text, #111827);
}
.tmg-notfound-text[b-ucwe5w5cph] {
color: var(--tmg-text-muted, #6B7280);
margin-bottom: 24px;
}
.tmg-notfound-actions[b-ucwe5w5cph] {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
.tmg-pricing-header[b-ze966khdmd] {
text-align: center;
margin: 2.5rem auto 2rem;
max-width: 720px;
padding: 0 1rem;
}
.tmg-pricing-row[b-ze966khdmd] {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.tmg-pricing-card[b-ze966khdmd] {
position: relative;
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: var(--tmg-shadow-card, 0 1px 3px rgb(15 23 42 / .04), 0 10px 25px rgb(15 23 42 / .05));
overflow: hidden;
background: var(--tmg-surface, #fff);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.tmg-pricing-card:hover[b-ze966khdmd] {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgb(15 23 42 / .05), 0 18px 36px rgb(15 23 42 / .08);
}
.tmg-pricing-card-popular[b-ze966khdmd] {
border: 2px solid var(--tmg-brand, #0F766E);
box-shadow: 0 4px 8px rgb(15 118 110 / .12), 0 20px 40px rgb(15 118 110 / .14);
}
.tmg-pricing-popular-badge[b-ze966khdmd] {
position: absolute;
top: 14px;
right: 14px;
background: #fff;
color: var(--tmg-brand, #0F766E);
border: 1px solid var(--tmg-brand, #0F766E);
border-radius: 999px;
padding: 4px 12px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
z-index: 2;
box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}
.tmg-pricing-card-header[b-ze966khdmd] {
background: var(--tmg-brand, #0F766E);
color: #fff;
padding: 1.75rem 1.5rem 1.5rem;
text-align: center;
}
.tmg-pricing-card-header .bi[b-ze966khdmd] {
font-size: 1.6rem;
opacity: 0.95;
display: block;
margin-bottom: 0.5rem;
}
.tmg-pricing-tier[b-ze966khdmd] {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 0.5rem;
}
.tmg-pricing-price[b-ze966khdmd] {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.15rem;
}
.tmg-pricing-amount[b-ze966khdmd] {
font-size: 2.25rem;
font-weight: 700;
line-height: 1;
}
.tmg-pricing-period[b-ze966khdmd] {
font-size: 1rem;
opacity: 0.9;
}
.tmg-pricing-plus[b-ze966khdmd] {
margin-top: 0.35rem;
font-size: 0.78rem;
opacity: 0.9;
}
.tmg-pricing-tagline[b-ze966khdmd] {
margin-top: 0.25rem;
margin-bottom: 1rem;
font-style: italic;
}
.tmg-pricing-bullets[b-ze966khdmd] {
list-style: none;
padding: 0;
margin: 0 0 1.25rem 0;
}
.tmg-pricing-bullets li[b-ze966khdmd] {
padding: 0.4rem 0;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
font-size: 0.92rem;
color: var(--tmg-text, #111827);
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.tmg-pricing-bullets li:last-child[b-ze966khdmd] {
border-bottom: none;
}
.tmg-bullet-icon[b-ze966khdmd] {
color: var(--tmg-brand, #0F766E);
font-weight: 700;
flex-shrink: 0;
margin-top: 0.15rem;
}
.tmg-pricing-cta[b-ze966khdmd] {
width: 100%;
font-weight: 600;
padding: 0.6rem 1rem;
}
.tmg-pricing-footer[b-ze966khdmd] {
text-align: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem 3rem;
}
/* /Components/Pages/Settings/AuditLog.razor.rz.scp.css */
/* Audit log — filter row alignment, monospace details column. */
[b-cstrkfagzv] .form-label.small {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
margin-bottom: 0.25rem;
}
[b-cstrkfagzv] table.tmg-table {
font-size: 0.85rem;
table-layout: fixed;
width: 100%;
}
[b-cstrkfagzv] table.tmg-table thead th:nth-child(1) { width: 130px; }
[b-cstrkfagzv] table.tmg-table thead th:nth-child(2) { width: 110px; }
[b-cstrkfagzv] table.tmg-table thead th:nth-child(3) { width: 140px; }
[b-cstrkfagzv] table.tmg-table thead th:nth-child(4) { width: 180px; }
[b-cstrkfagzv] table.tmg-table thead th:nth-child(5) { width: auto; }
[b-cstrkfagzv] table.tmg-table tbody td {
overflow: hidden;
}
[b-cstrkfagzv] table.tmg-table tbody td {
vertical-align: top;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
[b-cstrkfagzv] table.tmg-table td:nth-child(1) code {
background: transparent;
color: var(--tmg-text-muted);
padding: 0;
font-size: 0.78rem;
white-space: nowrap;
}
[b-cstrkfagzv] table.tmg-table td:nth-child(5) {
max-width: 28rem;
}
[b-cstrkfagzv] table.tmg-table td:nth-child(5) small {
display: block;
max-width: 100%;
overflow: hidden;
}
[b-cstrkfagzv] table.tmg-table td:nth-child(5) code {
background: var(--tmg-bg);
color: var(--tmg-text-muted);
padding: 0.15rem 0.4rem;
border-radius: 3px;
font-size: 0.75rem;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Reveal full JSON on hover so the row height stays compact at rest. */
[b-cstrkfagzv] table.tmg-table tbody tr:hover td:nth-child(5) code {
white-space: pre-wrap;
word-break: break-all;
background: var(--tmg-bg);
color: var(--tmg-text);
}
/* Action column: small chip rather than naked bold. */
[b-cstrkfagzv] table.tmg-table td:nth-child(3) strong {
display: inline-block;
background: rgba(15, 118, 110, 0.08);
color: var(--tmg-brand);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.03em;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
}
/* Pagination: spacing between Prev/Next. */
[b-cstrkfagzv] nav {
margin-top: 0.75rem;
}
[b-cstrkfagzv] nav .btn + .btn {
margin-left: 0.5rem;
}
[b-cstrkfagzv] .text-muted.small {
color: var(--tmg-text-muted);
margin-bottom: 0.75rem !important;
}
/* /Components/Pages/Settings/CostRates.razor.rz.scp.css */
/* Cost rates — FX rate row, add-rate form alignment, history current row. */
[b-uwwldyw1h1] .tmg-section-heading {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tmg-text-muted);
margin-bottom: 0.5rem;
}
[b-uwwldyw1h1] .form-label.small {
font-size: 0.78rem;
font-weight: 600;
color: var(--tmg-text-muted);
margin-bottom: 0.25rem;
}
[b-uwwldyw1h1] table.tmg-table tbody td {
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
[b-uwwldyw1h1] table.tmg-table tr.table-success {
background: rgba(16, 185, 129, 0.08);
}
[b-uwwldyw1h1] table.tmg-table tr.table-success td {
background: transparent;
}
[b-uwwldyw1h1] section.mb-4 {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 1rem;
}
/* /Components/Pages/Settings/Credentials.razor.rz.scp.css */
/* Credentials — tighten Set buttons, kbd-style env vars. */
[b-mk57gb779f] code {
font-size: 0.8rem;
background: var(--tmg-bg);
color: var(--tmg-text);
padding: 0.1rem 0.4rem;
border-radius: 3px;
}
[b-mk57gb779f] .text-danger code,
[b-mk57gb779f] .small code {
background: rgba(239, 68, 68, 0.08);
color: #B91C1C;
}
[b-mk57gb779f] .btn-outline-secondary.btn-sm {
border-color: var(--tmg-border);
}
/* /Components/Pages/Settings/DoNotCall.razor.rz.scp.css */
/* DNC — add-entry / bulk panes, entries table. */
[b-z3cek0p4fq] section.row > [class*="col-"] {
margin-bottom: 1rem;
}
[b-z3cek0p4fq] .tmg-section-heading {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tmg-text-muted);
margin-bottom: 0.75rem;
}
[b-z3cek0p4fq] input[type="file"] {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--tmg-border);
border-radius: var(--tmg-radius);
background: #FAFBFC;
font-size: 0.875rem;
}
[b-z3cek0p4fq] input[type="file"]::file-selector-button {
margin-right: 0.75rem;
padding: 0.25rem 0.75rem;
border: 1px solid var(--tmg-border);
border-radius: 4px;
background: #fff;
font-size: 0.85rem;
cursor: pointer;
}
[b-z3cek0p4fq] table.tmg-table tbody td {
vertical-align: middle;
}
[b-z3cek0p4fq] table.tmg-table td code {
font-size: 0.85rem;
background: transparent;
padding: 0;
color: var(--tmg-text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Add-entry placeholders should clearly look like ghost text, not values. */
[b-z3cek0p4fq] .col-md-6:first-child input.form-control::placeholder {
color: #B7BDC8;
opacity: 1;
}
[b-z3cek0p4fq] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
[b-z3cek0p4fq] .small code {
background: var(--tmg-bg);
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.78rem;
}
/* /Components/Pages/Settings/Erasure.razor.rz.scp.css */
/* Erasure — search row alignment, btn-primary brand fix, confirm states. */
[b-hm5hovv9sf] input.form-control {
max-width: 400px;
}
[b-hm5hovv9sf] .btn-primary {
background-color: var(--tmg-brand);
border-color: var(--tmg-brand);
color: #fff;
}
[b-hm5hovv9sf] .btn-primary:hover {
background-color: var(--tmg-brand-hover);
border-color: var(--tmg-brand-hover);
}
[b-hm5hovv9sf] table.tmg-table tbody td {
vertical-align: middle;
}
[b-hm5hovv9sf] table.tmg-table td code {
font-size: 0.85rem;
background: transparent;
padding: 0;
}
[b-hm5hovv9sf] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
[b-hm5hovv9sf] .alert {
border-radius: var(--tmg-radius);
}
/* /Components/Pages/Settings/GoogleSheets.razor.rz.scp.css */
/* Google Sheets — textarea, service-account email callout, connection table. */
[b-ttb3i8v0wn] textarea.font-monospace {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.5;
background: #FAFBFC;
}
[b-ttb3i8v0wn] details {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 0.5rem 0.75rem;
}
[b-ttb3i8v0wn] details summary {
cursor: pointer;
font-weight: 600;
color: var(--tmg-brand);
}
[b-ttb3i8v0wn] details ol {
margin-top: 0.5rem;
padding-left: 1.25rem;
}
[b-ttb3i8v0wn] .alert-info {
background: #ECFEFF;
border-color: #A5F3FC;
color: #155E75;
}
[b-ttb3i8v0wn] .alert-info code {
background: rgba(15, 118, 110, 0.08);
color: var(--tmg-brand-hover);
font-size: 0.9rem;
}
[b-ttb3i8v0wn] table.tmg-table tbody td {
vertical-align: middle;
}
[b-ttb3i8v0wn] table.tmg-table td code {
font-size: 0.82rem;
background: transparent;
padding: 0;
color: var(--tmg-text-muted);
}
[b-ttb3i8v0wn] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
[b-ttb3i8v0wn] .text-success {
color: var(--tmg-brand) !important;
}
/* /Components/Pages/Settings/Notifications.razor.rz.scp.css */
.tmg-notif-unread > td[b-hhoknkgxwh] {
background: rgba(15, 118, 110, 0.04);
}
.tmg-notif-unread > td:first-child[b-hhoknkgxwh] {
box-shadow: inset 3px 0 0 var(--tmg-brand, #0F766E);
}
/* /Components/Pages/Settings/PhoneNumbers.razor.rz.scp.css */
/* Phone numbers — two-column tables polish. */
[b-dxu3v9yftm] .tmg-section-heading {
margin-bottom: 0.75rem;
}
[b-dxu3v9yftm] table.tmg-table {
background: var(--tmg-surface);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
overflow: hidden;
}
[b-dxu3v9yftm] table.tmg-table th {
background: var(--tmg-bg);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
}
[b-dxu3v9yftm] table.tmg-table tbody td {
vertical-align: middle;
}
[b-dxu3v9yftm] table.tmg-table td code {
font-size: 0.85rem;
background: transparent;
padding: 0;
color: var(--tmg-text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Loading skeleton rows. */
.tmg-skeleton-rows[b-dxu3v9yftm] {
display: flex;
flex-direction: column;
gap: 8px;
}
.tmg-skeleton-row[b-dxu3v9yftm] {
height: 38px;
border-radius: var(--tmg-radius);
background: linear-gradient(90deg, #F1F5F9 0%, #E5E7EB 50%, #F1F5F9 100%);
background-size: 200% 100%;
animation: tmg-shimmer-b-dxu3v9yftm 1.4s linear infinite;
}
@keyframes tmg-shimmer-b-dxu3v9yftm {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
[b-dxu3v9yftm] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
/* /Components/Pages/Settings/Users.razor.rz.scp.css */
/* Users — table polish, role pill alignment. */
[b-x4zvbooczm] table.tmg-table tbody td {
vertical-align: middle;
}
[b-x4zvbooczm] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
[b-x4zvbooczm] .badge.tmg-status {
font-size: 0.72rem;
padding: 0.3em 0.7em;
text-transform: lowercase;
letter-spacing: 0.02em;
}
/* Differentiate the two role pills: admin = brand, caller = neutral slate. */
[b-x4zvbooczm] .badge.tmg-role-admin {
background: rgba(15, 118, 110, 0.10);
color: var(--tmg-brand);
border: 1px solid rgba(15, 118, 110, 0.25);
font-weight: 600;
}
[b-x4zvbooczm] .badge.tmg-role-caller {
background: #F1F5F9;
color: #475569;
border: 1px solid #E2E8F0;
font-weight: 500;
}
[b-x4zvbooczm] .text-muted.small i.bi-shield-lock-fill {
color: var(--tmg-text-muted);
}
[b-x4zvbooczm] .btn-outline-primary {
border-color: var(--tmg-brand);
color: var(--tmg-brand);
}
[b-x4zvbooczm] .btn-outline-primary:hover {
background: var(--tmg-brand);
color: #fff;
}
/* /Components/Pages/Training/Admin.razor.rz.scp.css */
/* Training admin — bar chart brand colour, table polish. */
[b-bq3kmvwzo8] .progress {
background: var(--tmg-bg);
border-radius: 999px;
overflow: hidden;
}
[b-bq3kmvwzo8] .progress-bar.bg-info {
background-color: var(--tmg-brand) !important;
color: #fff;
font-weight: 600;
font-size: 0.78rem;
}
[b-bq3kmvwzo8] table.tmg-table tbody tr:hover {
background: var(--tmg-bg);
}
[b-bq3kmvwzo8] table.tmg-table tbody td {
vertical-align: middle;
}
[b-bq3kmvwzo8] table.tmg-table td:last-child {
text-align: right;
}
/* /Components/Pages/Training/AdminUserDetail.razor.rz.scp.css */
/* Training admin user detail — filter row, sessions table. */
[b-o4icjmfxvf] .form-label.me-2 {
font-weight: 600;
color: var(--tmg-text);
margin-bottom: 0;
margin-right: 0.75rem !important;
}
[b-o4icjmfxvf] select.form-select {
border-color: var(--tmg-border);
}
[b-o4icjmfxvf] .tmg-inline-bar-fill {
background: var(--tmg-brand);
}
[b-o4icjmfxvf] table tbody tr:hover {
background: var(--tmg-bg);
}
[b-o4icjmfxvf] table tbody td {
vertical-align: middle;
}
[b-o4icjmfxvf] audio {
height: 32px;
}
/* /Components/Pages/Training/Edit.razor.rz.scp.css */
/* Training scenario editor — difficulty radio polish, prompt textarea, rail. */
[b-gtll4ghklf] form {
max-width: none;
}
[b-gtll4ghklf] .form-check-inline {
margin-right: 1.25rem;
padding: 0.4rem 0.9rem 0.4rem 2rem;
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: 999px;
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
[b-gtll4ghklf] .form-check-inline:hover {
background: #fff;
border-color: var(--tmg-text-muted);
}
[b-gtll4ghklf] .form-check-inline .form-check-input {
margin-left: -1.5rem;
}
[b-gtll4ghklf] .form-check-inline .form-check-input:checked {
background-color: var(--tmg-brand);
border-color: var(--tmg-brand);
}
[b-gtll4ghklf] .form-check-inline .form-check-label {
font-weight: 500;
color: var(--tmg-text);
}
[b-gtll4ghklf] textarea.form-control {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.875rem;
line-height: 1.5;
}
[b-gtll4ghklf] .form-text {
color: var(--tmg-text-muted);
margin-top: 0.35rem;
}
[b-gtll4ghklf] .form-text code {
font-size: 0.78rem;
color: var(--tmg-text-muted);
background: var(--tmg-bg);
padding: 0.05rem 0.3rem;
border-radius: 3px;
}
[b-gtll4ghklf] .tmg-form-rail {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 1rem;
}
/* /Components/Pages/Training/Index.razor.rz.scp.css */
/* Training index — scenario card polish, sessions list. */
[b-fl3rydz24c] .tmg-scenario-card {
transition: box-shadow .15s ease, transform .15s ease;
}
[b-fl3rydz24c] .tmg-scenario-card:hover {
box-shadow: var(--tmg-shadow-md);
transform: translateY(-1px);
}
[b-fl3rydz24c] .tmg-scenario-card .card-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--tmg-text);
}
[b-fl3rydz24c] .tmg-scenario-card .card-text {
color: var(--tmg-text-muted);
line-height: 1.45;
min-height: 3em;
}
[b-fl3rydz24c] .tmg-scenario-card .btn-sm {
padding: 0.3rem 0.75rem;
font-size: 0.85rem;
}
[b-fl3rydz24c] .tmg-scenario-card .text-warning {
color: #B45309 !important;
}
[b-fl3rydz24c] .transcript {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 0.75rem;
}
[b-fl3rydz24c] .tmg-list {
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
overflow: hidden;
background: var(--tmg-surface);
}
[b-fl3rydz24c] .tmg-list .tmg-list-item {
cursor: pointer;
padding: 12px 14px;
border-bottom: 1px solid var(--tmg-border);
transition: background-color .12s ease;
}
[b-fl3rydz24c] .tmg-list .tmg-list-item:last-child {
border-bottom: none;
}
[b-fl3rydz24c] .tmg-list .tmg-list-item:hover {
background: rgba(15, 118, 110, 0.03);
}
[b-fl3rydz24c] .tmg-list .tmg-list-trailing {
color: var(--tmg-text-muted);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
[b-fl3rydz24c] .tmg-scenario-voice {
min-height: 1.4em;
}
/* /Components/Pages/Training/Run.razor.rz.scp.css */
/* Training run — constrain form width, polish helpers. */
.tmg-form-narrow[b-7e203xe0b5] {
max-width: 520px;
}
[b-7e203xe0b5] form {
max-width: 520px;
}
[b-7e203xe0b5] .form-text {
color: var(--tmg-text-muted);
margin-top: 0.35rem;
}
[b-7e203xe0b5] .form-text code {
font-size: 0.78rem;
background: var(--tmg-bg);
color: var(--tmg-text-muted);
padding: 0.05rem 0.3rem;
border-radius: 3px;
}
[b-7e203xe0b5] .btn-primary {
padding: 0.5rem 1.25rem;
}
/* /Components/Pages/Training/Session.razor.rz.scp.css */
/* Training session detail — transcript bubbles, recording player, pitch context. */
[b-9hmn0iwvo1] .transcript {
background: var(--tmg-bg);
border: 1px solid var(--tmg-border);
border-radius: var(--tmg-radius);
padding: 1rem;
}
[b-9hmn0iwvo1] .transcript > div {
margin-bottom: 0.5rem;
}
/* Trainee bubble: softer brand tint, not the full saturated brand wall. */
[b-9hmn0iwvo1] .transcript .bg-primary {
background-color: rgba(15, 118, 110, 0.12) !important;
color: var(--tmg-text) !important;
border: 1px solid rgba(15, 118, 110, 0.30);
}
[b-9hmn0iwvo1] .transcript .bg-primary.text-white {
color: var(--tmg-text) !important;
}
[b-9hmn0iwvo1] .transcript .bg-light {
background-color: #fff !important;
border: 1px solid var(--tmg-border);
}
[b-9hmn0iwvo1] .tmg-metric-when {
font-size: 0.95rem;
font-weight: 600;
color: var(--tmg-text);
font-variant-numeric: tabular-nums;
}
[b-9hmn0iwvo1] .tmg-metric-when .text-muted {
font-size: 0.78rem;
font-weight: 500;
margin-left: 4px;
}
[b-9hmn0iwvo1] audio {
width: 100%;
max-width: 480px;
}
[b-9hmn0iwvo1] section h2.h5 {
color: var(--tmg-text);
font-weight: 600;
margin-bottom: 0.5rem;
}
[b-9hmn0iwvo1] .tmg-ai-overall {
background: var(--tmg-brand);
color: #fff;
border-radius: var(--tmg-radius);
padding: 0.6rem 1rem;
min-width: 110px;
text-align: center;
line-height: 1;
}
[b-9hmn0iwvo1] .tmg-ai-overall-num {
font-size: 2.2rem;
font-weight: 700;
}
[b-9hmn0iwvo1] .tmg-ai-overall-denom {
font-size: 0.85rem;
opacity: 0.85;
margin-left: 0.25rem;
}
[b-9hmn0iwvo1] .page-header-subtitle code {
font-size: 0.85rem;
background: var(--tmg-bg);
color: var(--tmg-text-muted);
padding: 0.1rem 0.4rem;
border-radius: 3px;
}
/* /Components/Pages/Voices/Create.razor.rz.scp.css */
/* Voices create — file-input affordance, consent checkbox emphasis, form max-width. */
[b-dz9p3wob8w] form {
max-width: 760px;
}
[b-dz9p3wob8w] input[type="file"] {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
margin-top: 0.25rem;
border: 1px dashed var(--tmg-border);
border-radius: var(--tmg-radius);
background: #FAFBFC;
color: var(--tmg-text);
font-size: 0.9rem;
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
[b-dz9p3wob8w] input[type="file"]:hover {
border-color: var(--tmg-brand);
background: #F4FBFA;
}
[b-dz9p3wob8w] input[type="file"]::file-selector-button {
margin-right: 0.75rem;
padding: 0.25rem 0.75rem;
border: 1px solid var(--tmg-border);
border-radius: 4px;
background: #fff;
color: var(--tmg-text);
font-size: 0.85rem;
cursor: pointer;
}
[b-dz9p3wob8w] input[type="file"]::file-selector-button:hover {
background: var(--tmg-bg);
}
[b-dz9p3wob8w] .form-check {
padding: 0.75rem 0.75rem 0.75rem 2.25rem;
background: #FFFBEB;
border: 1px solid #FEF3C7;
border-radius: var(--tmg-radius);
margin-bottom: 1rem;
}
[b-dz9p3wob8w] .form-check .form-check-input {
margin-top: 0.2rem;
}
[b-dz9p3wob8w] .form-check .form-check-label {
color: var(--tmg-text);
font-size: 0.9rem;
}
[b-dz9p3wob8w] .form-text {
color: var(--tmg-text-muted);
margin-top: 0.35rem;
}
/* /Components/Pages/Voices/Import.razor.rz.scp.css */
/* Voices import — table polish, tighter rows, badge style. */
[b-1nig0481ry] table {
table-layout: auto;
}
[b-1nig0481ry] table th {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tmg-text-muted);
background: var(--tmg-bg);
border-bottom: 1px solid var(--tmg-border);
}
[b-1nig0481ry] table tbody tr {
border-bottom: 1px solid var(--tmg-border);
}
[b-1nig0481ry] table tbody tr td {
vertical-align: middle;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
[b-1nig0481ry] table tbody tr td:first-child {
max-width: 28rem;
word-break: break-all;
font-size: 0.875rem;
}
[b-1nig0481ry] table tbody td code {
font-size: 0.8rem;
color: var(--tmg-text-muted);
background: transparent;
padding: 0;
white-space: nowrap;
}
[b-1nig0481ry] td:last-child {
text-align: right;
white-space: nowrap;
}
[b-1nig0481ry] .badge.bg-secondary {
background: rgba(100, 116, 139, 0.15) !important;
color: var(--tmg-text-muted) !important;
font-weight: 500;
padding: 0.35em 0.65em;
}
/* /Components/Pages/Voices/Index.razor.rz.scp.css */
/* Voices list polish — tighten row layout, soften delete weight, monospaced voice id. */
[b-ejl9af3a9e] table.tmg-table tbody tr td {
vertical-align: middle;
}
[b-ejl9af3a9e] table.tmg-table td code {
font-size: 0.85rem;
color: var(--tmg-text-muted);
background: transparent;
padding: 0;
white-space: nowrap;
}
[b-ejl9af3a9e] table.tmg-table td:last-child {
text-align: right;
white-space: nowrap;
}
[b-ejl9af3a9e] table.tmg-table td:last-child .btn + .btn {
margin-left: 0.375rem;
}
[b-ejl9af3a9e] .btn-outline-danger {
border-color: var(--tmg-border);
color: var(--tmg-danger);
}
[b-ejl9af3a9e] .btn-outline-danger:hover {
background-color: var(--tmg-danger);
border-color: var(--tmg-danger);
color: #fff;
}
[b-ejl9af3a9e] audio {
width: 100%;
max-width: 480px;
margin: 0.25rem 0;
}
/* /Components/Shared/CallNavigatorModal.razor.rz.scp.css */
/* Wave 7B: CallNavigatorModal scoped polish.
The app.css base already paints dialog/header/footer; this file
refines the rhythm seen on screens 46-48:
- Header: tighter title block, position chip pulled flush with title baseline.
- Body: ensure metric tile grid breathes (gap on mobile).
- Footer: kbd chip vertical-aligned with button text; disabled buttons
get softer styling so the eye doesn't track them.
- kbd chips inside header / footer share a single sizing rule. */
.tmg-modal-header[b-m1dlw487tb] {
align-items: flex-start;
padding-top: 20px;
padding-bottom: 16px;
}
.tmg-modal-header > div:first-child[b-m1dlw487tb] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.tmg-modal-title[b-m1dlw487tb] {
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Position indicator: muted text, not a pill — avoids being mistaken for
a status badge at a glance. Note: do NOT use text-transform: uppercase
here — e2e tests assert the literal text "X of Y" via innerText. */
.tmg-modal-position[b-m1dlw487tb] {
margin-top: 0;
align-self: flex-start;
background: transparent;
color: var(--tmg-text-muted);
border: none;
padding: 0;
font-size: 0.78rem;
letter-spacing: 0.02em;
font-weight: 500;
}
.tmg-modal-header .btn-close[b-m1dlw487tb] {
margin-top: 2px;
}
.tmg-modal-body[b-m1dlw487tb] {
padding-top: 20px;
padding-bottom: 20px;
}
.tmg-modal-footer[b-m1dlw487tb] {
align-items: center;
padding-top: 14px;
padding-bottom: 14px;
justify-content: space-between;
}
.tmg-modal-footer-actions[b-m1dlw487tb] {
display: inline-flex;
gap: 8px;
}
.tmg-modal-keyhint .tmg-kbd[b-m1dlw487tb] {
margin: 0 2px;
}
.tmg-modal-footer .btn[b-m1dlw487tb] {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.tmg-modal-footer .btn:disabled[b-m1dlw487tb] {
opacity: 0.55;
}
/* kbd chips rendered inside this component: smaller, baseline-aligned.
These are literal tags in CallNavigatorModal.razor so they get
the scope attribute automatically. */
.tmg-kbd[b-m1dlw487tb] {
font-size: 0.7rem;
padding: 1px 6px;
line-height: 1.3;
vertical-align: baseline;
background: rgba(15, 23, 42, 0.04);
}
.tmg-modal-footer .tmg-kbd[b-m1dlw487tb] {
margin-left: 2px;
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
.tmg-notification-bell[b-51l6qut73c] {
position: relative;
display: inline-flex;
align-items: center;
}
.tmg-bell-btn[b-51l6qut73c] {
position: relative;
background: transparent;
border: 0;
color: inherit;
padding: 6px 8px;
border-radius: var(--tmg-radius, 6px);
cursor: pointer;
line-height: 1;
}
.tmg-bell-btn:hover[b-51l6qut73c],
.tmg-bell-btn:focus-visible[b-51l6qut73c] {
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.tmg-bell-btn i[b-51l6qut73c] {
font-size: 1.05rem;
}
.tmg-bell-badge[b-51l6qut73c] {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--tmg-brand, #0F766E);
color: #fff;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 600;
line-height: 16px;
text-align: center;
}
.tmg-bell-dropdown[b-51l6qut73c] {
position: absolute;
top: calc(100% + 6px);
/* Bell lives in the left sidebar; opening "right: 0" would push the panel off the
left edge of the viewport. Open into the content area instead. */
left: 0;
width: 360px;
max-width: calc(100vw - 24px);
background: var(--tmg-surface, #fff);
color: var(--tmg-text, #111827);
border: 1px solid var(--tmg-border, #E5E7EB);
border-radius: var(--tmg-radius-lg, 12px);
box-shadow: var(--tmg-shadow-md, 0 4px 12px rgb(0 0 0 / .15));
z-index: 1050;
overflow: hidden;
}
.tmg-bell-head[b-51l6qut73c] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
}
.tmg-bell-title[b-51l6qut73c] {
font-weight: 600;
font-size: 0.875rem;
}
.tmg-bell-mark-all[b-51l6qut73c] {
background: transparent;
border: 0;
color: var(--tmg-brand, #0F766E);
font-size: 0.75rem;
cursor: pointer;
padding: 0;
}
.tmg-bell-mark-all:hover[b-51l6qut73c] {
text-decoration: underline;
}
.tmg-bell-empty[b-51l6qut73c] {
padding: 16px 14px;
color: var(--tmg-text-muted, #6B7280);
font-size: 0.875rem;
text-align: center;
}
.tmg-bell-list[b-51l6qut73c] {
list-style: none;
margin: 0;
padding: 0;
max-height: 360px;
overflow-y: auto;
}
.tmg-bell-row[b-51l6qut73c] {
padding: 10px 14px;
border-bottom: 1px solid var(--tmg-border, #E5E7EB);
cursor: pointer;
border-left: 3px solid transparent;
}
.tmg-bell-row:last-child[b-51l6qut73c] {
border-bottom: 0;
}
.tmg-bell-row.unread[b-51l6qut73c] {
border-left-color: var(--tmg-brand, #0F766E);
background: rgba(15, 118, 110, 0.04);
}
.tmg-bell-row:hover[b-51l6qut73c] {
background: rgba(15, 118, 110, 0.08);
}
.tmg-bell-row-title[b-51l6qut73c] {
font-weight: 600;
font-size: 0.85rem;
line-height: 1.3;
margin-bottom: 2px;
}
.tmg-bell-row-body[b-51l6qut73c] {
font-size: 0.8rem;
color: var(--tmg-text-muted, #6B7280);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.tmg-bell-row-time[b-51l6qut73c] {
font-size: 0.7rem;
color: var(--tmg-text-muted, #6B7280);
}
.tmg-bell-foot[b-51l6qut73c] {
padding: 8px 14px;
border-top: 1px solid var(--tmg-border, #E5E7EB);
text-align: center;
background: rgba(15, 118, 110, 0.02);
}
.tmg-bell-foot a[b-51l6qut73c] {
color: var(--tmg-brand, #0F766E);
text-decoration: none;
font-size: 0.78rem;
}
.tmg-bell-foot a:hover[b-51l6qut73c] {
text-decoration: underline;
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* Wave 7B: StatusBadge scoped polish.
Goals:
- Visually distinguish NoAnswer from Skipped (both slate in app.css).
- Add a small leading dot to common states so they read at a glance
even at very small sizes (table rows, list meta).
- Tighten vertical alignment so pills sit on the baseline cleanly. */
.badge.tmg-status[b-3zm9b3o028] {
vertical-align: middle;
border: 1px solid transparent;
white-space: nowrap;
}
/* Leading dot for the most common states (pure CSS, no extra markup).
The colour matches the text so the dot reads even on grayscale. */
.badge.tmg-status-pending[b-3zm9b3o028]::before,
.badge.tmg-status-queued[b-3zm9b3o028]::before,
.badge.tmg-status-done[b-3zm9b3o028]::before,
.badge.tmg-status-failed[b-3zm9b3o028]::before,
.badge.tmg-status-skipped[b-3zm9b3o028]::before,
.badge.tmg-status-noanswer[b-3zm9b3o028]::before,
.badge.tmg-status-optout[b-3zm9b3o028]::before,
.badge.tmg-status-info[b-3zm9b3o028]::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 6px;
}
/* Distinguish NoAnswer (hollow ring) from Skipped (solid dot) — both
slate in app.css but functionally different. NoAnswer means "tried,
nothing"; Skipped means "we chose not to try". */
.badge.tmg-status-noanswer[b-3zm9b3o028] {
border-color: rgba(100, 116, 139, 0.35);
}
.badge.tmg-status-noanswer[b-3zm9b3o028]::before {
background: transparent;
box-shadow: inset 0 0 0 1.5px currentColor;
}
/* Failed gets a stronger ring — drives the eye in long lists. */
.badge.tmg-status-failed[b-3zm9b3o028] {
border-color: rgba(239, 68, 68, 0.30);
}
/* Skipped: clearly muted (no border, dim dot). */
.badge.tmg-status-skipped[b-3zm9b3o028]::before {
opacity: 0.6;
}