.tmp-crm,
.tmp-client-profile,
.tmp-client-documents {
    --tmp-primary: var(--tmp-primary-color, #1f4f8f);
    --tmp-primary-dark: var(--tmp-secondary-color, #173b6b);
    --tmp-accent: var(--tmp-accent-color, #d6a84f);
    --tmp-bg: var(--tmp-light-bg, #f5f7fb);
    --tmp-surface: var(--tmp-light-card, #ffffff);
    --tmp-card-bg: var(--tmp-light-card, #ffffff);
    --tmp-border: var(--tmp-light-border, #dce3ee);
    --tmp-heading: var(--tmp-light-heading, #172033);
    --tmp-text: var(--tmp-light-text, #172033);
    --tmp-muted: var(--tmp-light-text, #667085);
    --tmp-form-bg: var(--tmp-light-card, #ffffff);
    --tmp-input-bg: var(--tmp-light-card, #ffffff);
    --tmp-input-border: var(--tmp-border, #dce3ee);
    --tmp-button-bg: var(--tmp-primary-color, #1f4f8f);
    --tmp-button-text: var(--tmp-primary-button-text, #ffffff);
    --tmp-button-hover-bg: var(--tmp-secondary-color, #173b6b);
    --tmp-secondary-button-bg: var(--tmp-secondary-button-bg-source, color-mix(in srgb, var(--tmp-primary-color, #1f4f8f) 10%, var(--tmp-light-card, #ffffff)));
    --tmp-secondary-button-text: var(--tmp-secondary-button-text-source, var(--tmp-primary-color, #1f4f8f));
    --tmp-secondary-button-hover-bg: var(--tmp-secondary-button-hover-source, color-mix(in srgb, var(--tmp-primary-color, #1f4f8f) 17%, var(--tmp-light-card, #ffffff)));
    --tmp-table-header-bg: var(--tmp-table-header-bg-source, color-mix(in srgb, var(--tmp-primary-color, #1f4f8f) 7%, var(--tmp-light-card, #ffffff)));
    --tmp-content-width: 1272px;
    --tmp-readable-width: 1040px;
    /* Hero = 13.25" × 4.8" @ 96dpi → ratio 4.8/13.25 = 0.3623 */
    --tmp-hero-height: 461px;
    --tmp-hero-ratio: 0.36226; /* 4.8 ÷ 13.25 */
    color: var(--tmp-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

body.twlcrm-crm-page .portal-content .tmp-crm {
    width: 100%;
    max-width: none;
}

body.twlcrm-crm-page .tmp-crm:not(.tmp-client-dashboard):not(.tmp-preparer-dashboard):not(.tmp-firm-dashboard):not(.tmp-tax-return):not(.tmp-flow-page):not(.tmp-login-shell) {
    width: min(1280px, calc(100vw - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 28px 0 42px;
}

.tmp-client-dashboard,
.tmp-preparer-dashboard,
.tmp-firm-dashboard,
.tmp-tax-return,
.tmp-flow-page {
    min-height: 100vh;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-client-dashboard .tmp-tabset,
.tmp-preparer-dashboard > .tmp-card,
.tmp-preparer-dashboard > .tmp-grid,
.tmp-preparer-dashboard > h2,
.tmp-firm-dashboard > .tmp-grid,
.tmp-firm-dashboard .tmp-tabset,
.tmp-tax-return > .tmp-notice,
.tmp-flow-page > .tmp-flow-grid,
.tmp-flow-page > .tmp-notice {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}

.tmp-tax-return .tmp-tax-progress,
.tmp-tax-return .tmp-tax-layout,
.tmp-flow-page > .tmp-section-band {
    width: 100%;
    max-width: none;
}

.tmp-crm *,
.tmp-client-profile *,
.tmp-client-documents * {
    box-sizing: border-box;
}

.tmp-crm h1,
.tmp-client-profile h1 {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: 0;
    color: var(--tmp-heading);
}

.tmp-crm h2,
.tmp-client-profile h2,
.tmp-client-documents h2,
.tmp-client-documents h3 {
    margin: 30px 0 14px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--tmp-heading);
}

.tmp-crm h3,
.tmp-client-profile h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tmp-heading);
}

.tmp-crm p,
.tmp-client-profile p,
.tmp-client-documents p {
    color: var(--tmp-muted);
}

.tmp-crm a,
.tmp-client-profile a,
.tmp-client-documents a {
    color: var(--tmp-primary);
    font-weight: 650;
    text-decoration: none;
}

.tmp-crm a:hover,
.tmp-client-profile a:hover,
.tmp-client-documents a:hover {
    text-decoration: underline;
}

.tmp-crm hr,
.tmp-client-profile hr,
.tmp-client-documents hr {
    border: 0;
    border-top: 1px solid var(--tmp-border);
    margin: 28px 0;
}

.tmp-page-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: var(--tmp-font-dark-bg, #ffffff);
}
.tmp-page-header h1,
.tmp-page-header h2,
.tmp-page-header p,
.tmp-page-header .tmp-page-kicker {
    color: var(--tmp-font-dark-bg, #ffffff);
}

.tmp-page-kicker {
    margin: 0 0 6px;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tmp-portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    min-height: 260px;
    margin: 0 0 28px;
    padding: clamp(26px, 4vw, 44px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tmp-primary) 22%, var(--tmp-border));
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(17, 24, 39, .52)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .14);
}

.tmp-client-dashboard > .tmp-portal-hero,
.tmp-preparer-dashboard > .tmp-portal-hero,
.tmp-firm-dashboard > .tmp-portal-hero,
.tmp-firm-page > .tmp-portal-hero,
.tmp-firm-inner-page > .tmp-portal-hero,
.tmp-manage-clients > .tmp-portal-hero,
.tmp-add-client > .tmp-portal-hero,
.tmp-manage-preparers > .tmp-portal-hero,
.tmp-tax-return > .tmp-portal-hero,
.tmp-flow-page > .tmp-portal-hero {
    width: 100%;
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.tmp-client-dashboard > .tmp-portal-hero--image-only,
.tmp-preparer-dashboard > .tmp-portal-hero--image-only,
.tmp-firm-dashboard > .tmp-portal-hero--image-only,
.tmp-firm-page > .tmp-portal-hero--image-only,
.tmp-firm-inner-page > .tmp-portal-hero--image-only,
.tmp-manage-clients > .tmp-portal-hero--image-only,
.tmp-add-client > .tmp-portal-hero--image-only,
.tmp-manage-preparers > .tmp-portal-hero--image-only,
.tmp-tax-return > .tmp-portal-hero--image-only,
.tmp-flow-page > .tmp-portal-hero--image-only,
.tmp-crm > .tmp-portal-hero--image-only,
div > .tmp-portal-hero--image-only {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 13.25 / 4.8;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    /* Full reset of the base hero background -- image only, no overlay */
    background: var(--tmp-hero-image, none) center center / cover no-repeat !important;
    background-color: var(--tmp-primary-dark) !important;
    box-shadow: none !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    align-items: unset !important;
}

.tmp-portal-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--tmp-primary), var(--tmp-accent));
}

.tmp-portal-hero--image-only::after {
    height: 0;
    display: none;
}

/* hero overlay fix moved to end of file */

.tmp-client-welcome {
    display: grid;
    justify-items: center;
    width: 100%;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 58px) max(16px, calc((100vw - 980px) / 2)) clamp(24px, 4vw, 42px);
    color: var(--tmp-welcome-text, var(--tmp-text));
    background: var(--tmp-welcome-bg, var(--tmp-surface));
    text-align: center;
}

.tmp-page-intro {
    width: 100%;
    padding: clamp(30px, 5vw, 58px) 16px clamp(26px, 4vw, 44px);
    background: var(--tmp-welcome-bg, var(--tmp-surface));
    text-align: center;
}

.tmp-page-intro__inner {
    display: grid;
    justify-items: center;
    width: min(var(--tmp-readable-width), 100%);
    margin: 0 auto;
}

.tmp-page-intro__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 86px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.tmp-page-intro h1 {
    max-width: 860px;
    margin-bottom: 12px;
    color: var(--tmp-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.03;
}

.tmp-page-intro p:not(.tmp-page-kicker) {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tmp-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.tmp-page-intro .tmp-hero-actions {
    justify-content: center;
}

.tmp-client-welcome__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 86px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.tmp-client-welcome h1 {
    color: var(--tmp-welcome-text, var(--tmp-heading)) !important;
    max-width: 760px;
    margin-bottom: 12px;
    color: var(--tmp-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.03;
}

.tmp-client-welcome > p:not(.tmp-page-kicker) {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tmp-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.tmp-client-welcome .tmp-hero-actions {
    justify-content: center;
}

.tmp-client-owner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 14px 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

.tmp-client-owner img {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    object-fit: cover;
}

.tmp-client-owner div {
    display: grid;
    gap: 2px;
    text-align: left;
}

.tmp-client-owner strong {
    color: var(--tmp-heading);
}

.tmp-client-owner span {
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-portal-hero__content {
    position: relative;
    z-index: 1;
    max-width: 740px;
}

.tmp-portal-hero__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 76px;
    margin-bottom: 20px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .26));
}

.tmp-portal-hero .tmp-page-kicker {
    color: color-mix(in srgb, var(--tmp-accent) 72%, white);
}

.tmp-portal-hero h1,
.tmp-portal-hero h2,
.tmp-portal-hero p {
    color: var(--tmp-hero-text, #ffffff);
}

.tmp-portal-hero h1 {
    max-width: 860px;
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1.02;
}

.tmp-portal-hero p {
    max-width: 680px;
    margin: 0;
    font-size: 1rem;
}

.tmp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.tmp-portal-hero__portrait {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    justify-items: center;
    width: min(220px, 24vw);
}

.tmp-portal-hero__portrait img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.tmp-portal-hero__portrait span {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.tmp-portal-hero__portrait small {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}

.tmp-design-luxury .tmp-portal-hero {
    background:
        linear-gradient(135deg, rgba(7, 10, 16, .92), rgba(31, 25, 12, .62)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, #090b10, #2d260d);
}

.tmp-design-modern .tmp-portal-hero {
    background:
        linear-gradient(135deg, rgba(12, 31, 63, .9), rgba(0, 128, 145, .55)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-accent));
}

.tmp-design-minimal .tmp-portal-hero {
    min-height: 210px;
    color: var(--tmp-text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-primary) 12%, white), var(--tmp-surface)),
        var(--tmp-hero-image, none);
}

.tmp-design-minimal .tmp-portal-hero h1,
.tmp-design-minimal .tmp-portal-hero h2,
.tmp-design-minimal .tmp-portal-hero p {
    color: var(--tmp-heading);
}

/* Design-preset image-only heroes inherit from the universal rule above */

.tmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 18px 0 26px;
}

.tmp-card,
.tmp-crm .tmp-card,
.tmp-client-profile .tmp-card {
    background: var(--tmp-surface);
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(20, 35, 60, .06);
}

.tmp-crm form,
.tmp-client-profile form,
.tmp-client-documents form {
    background: var(--tmp-form-bg);
}

.tmp-stat-card {
    min-height: 140px;
}

.tmp-stat-link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tmp-stat-link:hover,
.tmp-stat-link:focus {
    border-color: var(--tmp-primary);
    box-shadow: 0 12px 28px rgba(20, 35, 60, .1);
    text-decoration: none !important;
    transform: translateY(-1px);
}

.tmp-stat-label {
    color: var(--tmp-muted);
    font-size: 14px;
    font-weight: 700;
}

.tmp-stat-value {
    display: block;
    margin-top: 18px;
    font-size: 42px;
    line-height: 1;
    font-weight: 760;
    color: var(--tmp-heading);
}

.tmp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

.tmp-quick-panel {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
    margin: 22px 0 28px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--tmp-border);
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-primary) 8%, white), var(--tmp-surface));
}

.tmp-client-dashboard .tmp-quick-panel,
.tmp-preparer-dashboard .tmp-quick-panel,
.tmp-firm-dashboard .tmp-quick-panel {
    width: min(1240px, calc(100vw - 32px));
    margin: 0 auto 28px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--tmp-section-header-bg, #111111), color-mix(in srgb, var(--tmp-section-header-bg, #111111) 86%, white), var(--tmp-section-header-bg, #111111));
}

.tmp-client-dashboard .tmp-quick-panel__intro h3,
.tmp-client-dashboard .tmp-quick-panel__intro p,
.tmp-preparer-dashboard .tmp-quick-panel__intro h3,
.tmp-preparer-dashboard .tmp-quick-panel__intro p,
.tmp-firm-dashboard .tmp-quick-panel__intro h3,
.tmp-firm-dashboard .tmp-quick-panel__intro p {
    color: var(--tmp-section-header-text, #ffffff);
}

.tmp-quick-panel__intro h3 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.tmp-quick-panel__intro p:last-child {
    margin-bottom: 0;
}

.tmp-quick-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.tmp-quick-link-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 13px;
    color: var(--tmp-button-text) !important;
    border: 1px solid color-mix(in srgb, var(--tmp-accent) 30%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--tmp-button-bg), color-mix(in srgb, var(--tmp-button-bg) 70%, var(--tmp-accent)));
    box-shadow: 0 10px 22px rgba(17, 24, 39, .08);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
}

.tmp-quick-link-grid a:hover,
.tmp-quick-link-grid a:focus {
    background:
        linear-gradient(135deg, var(--tmp-button-hover-bg), color-mix(in srgb, var(--tmp-button-hover-bg) 70%, var(--tmp-accent)));
    color: var(--tmp-button-text) !important;
    transform: translateY(-1px);
}

.tmp-promo-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 22px 0;
    padding: clamp(20px, 3vw, 30px);
    color: #ffffff;
    border-radius: 12px;
    background:
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
}

.tmp-section-band {
    display: grid;
    grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 30px clamp(18px, 4vw, 54px) 22px;
    color: var(--tmp-section-header-text, #ffffff);
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-section-band span {
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--tmp-section-accent, var(--tmp-accent)), transparent);
}

.tmp-section-band h2 {
    margin: 0;
    color: var(--tmp-section-header-text, #ffffff);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
    text-align: center;
}

.tmp-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 24px;
    padding-bottom: 48px;
}

.tmp-flow-card {
    color: var(--tmp-heading, #172033) !important;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.tmp-flow-card h3 {
    margin-top: 0;
    font-size: clamp(1.25rem, 2vw, 1.9rem);

    color: var(--tmp-heading, #172033) !important;}

.tmp-client-documents-page .tmp-flow-card,
.tmp-state-refund-page .tmp-state-card {
    border-radius: 0;
    box-shadow: none;
}

.tmp-client-documents-page .tmp-flow-card {
    border: 0;
    border-top: 1px solid var(--tmp-border);
}

.tmp-client-experience {
    padding-bottom: 58px;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-messages-inbox {
    width: min(1240px, calc(100vw - 32px));
    max-width: none;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 46px) 0 clamp(34px, 5vw, 58px);
}

.tmp-dashboard-section {
    padding-bottom: clamp(34px, 5vw, 68px);
}

.tmp-dashboard-section > .tmp-client-link-grid,
.tmp-dashboard-section > .tmp-announcement-list,
.tmp-dashboard-section > .tmp-status-tracker,
.tmp-dashboard-section > .tmp-tool-grid,
.tmp-dashboard-section > .tmp-dashboard-split,
.tmp-dashboard-section > .tmp-promo-band,
.tmp-dashboard-section > .tmp-review-card,
.tmp-state-grid {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin: clamp(26px, 4vw, 42px) auto 0;
}

.tmp-client-link-grid,
.tmp-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.tmp-client-link-card,
.tmp-tool-card {
    display: grid;
    gap: 12px;
    align-content: center;
    min-height: 132px;
    padding: 24px 20px;
    color: var(--tmp-button-text) !important;
    border: 1px solid color-mix(in srgb, var(--tmp-section-accent) 35%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-button-bg) 88%, #000), color-mix(in srgb, var(--tmp-button-bg) 68%, var(--tmp-section-accent)));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .18);
    text-align: center;
    text-decoration: none !important;
}

.tmp-client-link-card:hover,
.tmp-tool-card:hover,
.tmp-client-link-card:focus,
.tmp-tool-card:focus {
    color: var(--tmp-button-text) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.tmp-client-link-icon,
.tmp-tool-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
}

.tmp-client-link-icon svg,
.tmp-tool-card span svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tmp-icon-text {
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
}

.tmp-client-link-card strong,
.tmp-tool-card strong {
    color: inherit;
    font-size: 1rem;
}

.tmp-announcement-list {
    display: grid;
    gap: 16px;
}

.tmp-announcement-card {
    display: grid;
    gap: 8px;
    padding: clamp(20px, 3vw, 30px);
    border-left: 6px solid var(--tmp-section-accent, var(--tmp-accent));
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .14);
}

.tmp-announcement-card.is-high,
.tmp-announcement-card.is-urgent {
    border-left-color: #dc2626;
}

.tmp-announcement-card span {
    color: var(--tmp-primary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-announcement-card h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.tmp-announcement-card p {
    margin: 0;
}

.tmp-status-tracker {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-status-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 10px 0 0;
}

.tmp-status-step {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    align-content: start;
    justify-items: center;
    padding: 0 6px;
    color: var(--tmp-muted);
    text-align: center;
}

.tmp-status-step::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 4px;
    background: var(--tmp-border);
    transform: translateY(-50%);
}

.tmp-status-step:last-child::before {
    display: none;
}

.tmp-status-step span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border: 3px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 850;
}

.tmp-status-step strong {
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 1.25;
}

.tmp-status-step.is-complete::before {
    background: var(--tmp-section-accent, var(--tmp-accent));
}

.tmp-status-step.is-complete span,
.tmp-status-step.is-current span {
    border-color: var(--tmp-section-accent, var(--tmp-accent));
    background: var(--tmp-section-accent, var(--tmp-accent));
    color: #111827;
}

.tmp-status-step.is-complete strong {
    color: var(--tmp-heading);
}

.tmp-status-step.is-current span {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--tmp-section-accent, var(--tmp-accent)) 18%, transparent);
}

.tmp-status-step.is-current strong {
    color: var(--tmp-heading);
}

.tmp-status-message {
    justify-self: center;
    width: min(720px, 100%);
    padding: 18px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-primary) 9%, white);
    text-align: center;
}

.tmp-status-message span {
    color: var(--tmp-primary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-status-message h3 {
    margin: 4px 0 6px;
    font-size: 1.35rem;
}

.tmp-status-message p {
    margin: 0;
}

.tmp-dashboard-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
}

.tmp-document-list,
.tmp-client-task-list,
.tmp-client-invoice-list {
    display: grid;
    gap: 12px;
}

.tmp-document-card,
.tmp-client-task-card,
.tmp-client-invoice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-surface) 92%, var(--tmp-bg));
}

.tmp-document-card {
    align-items: flex-start;
    flex-direction: column;
    color: var(--tmp-heading) !important;
    text-decoration: none !important;
}

.tmp-document-card span,
.tmp-client-task-card span,
.tmp-client-invoice-card span,
.tmp-client-task-card small,
.tmp-client-invoice-card small {
    display: inline-flex;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-client-task-card p,
.tmp-client-invoice-card p {
    margin: 6px 0;
}

.tmp-review-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(24px, 4vw, 42px);
    color: var(--tmp-hero-text, #ffffff);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .3)),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    box-shadow: 0 20px 44px rgba(0, 0, 0, .2);
}

.tmp-review-card h2,
.tmp-review-card p {
    color: inherit;
}

.tmp-review-card h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.7rem);
}

.tmp-review-stars {
    display: flex;
    gap: 4px;
    color: var(--tmp-section-accent, var(--tmp-accent));
    font-size: 26px;
}

.tmp-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding-bottom: 52px;
}

.tmp-state-refund-page .tmp-state-grid,
.tmp-messages-inbox {
    width: min(var(--tmp-readable-width), calc(100vw - 32px));
}

.tmp-state-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

.tmp-state-card h3 {
    margin: 0;
}

.tmp-reminder-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 22px;
}

.tmp-promo-band h3,
.tmp-promo-band p {
    color: #ffffff;
}

.tmp-promo-band > div > span {
    display: inline-flex;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--tmp-section-accent, var(--tmp-accent)) 76%, white);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-promo-band h3 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}

.tmp-promo-band p {
    margin: 0;
}

.tmp-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--tmp-border);
}

.tmp-summary-strip p {
    margin: 0;
}

.tmp-form {
    margin-top: 18px;
}

.tmp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.tmp-field {
    margin: 0 0 16px;
}

.tmp-field label,
.tmp-crm label,
.tmp-client-profile label {
    display: block;
    margin-bottom: 7px;
    color: var(--tmp-text);
    font-size: 14px;
    font-weight: 700;
}

.tmp-form-footer {
    margin-top: 20px;
}

.tmp-button,
.tmp-crm a.tmp-button,
.tmp-client-profile a.tmp-button,
.tmp-crm button,
.tmp-client-profile button,
.tmp-client-documents button,
.tmp-crm input[type="submit"],
.tmp-client-profile input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 0;
    border-radius: 8px;
    background: var(--tmp-button-bg);
    color: var(--tmp-button-text) !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
}

.tmp-button:hover,
.tmp-button:visited,
.tmp-button:focus,
.tmp-crm a.tmp-button:hover,
.tmp-crm a.tmp-button:visited,
.tmp-crm a.tmp-button:focus,
.tmp-client-profile a.tmp-button:hover,
.tmp-client-profile a.tmp-button:visited,
.tmp-client-profile a.tmp-button:focus,
.tmp-crm button:hover,
.tmp-client-profile button:hover,
.tmp-client-documents button:hover {
    background: var(--tmp-button-hover-bg);
    color: var(--tmp-button-text) !important;
    text-decoration: none !important;
}

.tmp-button-secondary {
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-button-secondary:hover,
.tmp-button-secondary:visited,
.tmp-button-secondary:focus,
.tmp-crm a.tmp-button-secondary:hover,
.tmp-crm a.tmp-button-secondary:visited,
.tmp-crm a.tmp-button-secondary:focus,
.tmp-client-profile a.tmp-button-secondary:hover,
.tmp-client-profile a.tmp-button-secondary:visited,
.tmp-client-profile a.tmp-button-secondary:focus {
    background: var(--tmp-secondary-button-hover-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-button-light,
.tmp-crm a.tmp-button-light,
.tmp-client-profile a.tmp-button-light {
    background: rgba(255, 255, 255, .92);
    color: var(--tmp-primary-dark) !important;
}

.tmp-button-light:hover,
.tmp-button-light:visited,
.tmp-button-light:focus,
.tmp-crm a.tmp-button-light:hover,
.tmp-crm a.tmp-button-light:visited,
.tmp-crm a.tmp-button-light:focus {
    background: #ffffff;
    color: var(--tmp-primary-dark) !important;
}

.tmp-login-shell {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
    gap: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 62px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(17, 24, 39, .38)),
        var(--tmp-login-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: 0 20px 54px rgba(17, 24, 39, .16);
}

.tmp-login-art {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    align-content: center;
    min-height: calc(100vh - 62px);
    padding: clamp(32px, 6vw, 90px);
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .18), rgba(17, 24, 39, .02)),
        var(--tmp-login-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
}

.tmp-login-art .tmp-page-kicker,
.tmp-login-art h1,
.tmp-login-art p {
    color: var(--tmp-hero-text, #ffffff);
}

.tmp-login-art h1 {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    line-height: .98;
}

.tmp-login-art p {
    max-width: 560px;
    margin: 0;
    font-size: 1.05rem;
}

.tmp-login-panel {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: center;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 62px);
    padding: clamp(32px, 6vw, 90px);
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
    box-shadow: none;
}

.tmp-login-panel .tmp-brand-logo {
    max-height: 130px;
    margin: 0 auto 26px;
    filter: none;
}

.tmp-login-panel h2 {
    margin-top: 0;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.tmp-login-panel form {
    width: min(430px, 100%);
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-crm input[type="text"],
.tmp-crm input[type="email"],
.tmp-crm input[type="password"],
.tmp-crm input[type="date"],
.tmp-crm input[type="time"],
.tmp-crm input[type="url"],
.tmp-crm input[type="number"],
.tmp-crm input[type="tel"],
.tmp-crm input[type="search"],
.tmp-crm input:not([type]),
.tmp-crm select,
.tmp-crm textarea,
.tmp-client-profile input[type="text"],
.tmp-client-profile input[type="email"],
.tmp-client-profile input[type="password"],
.tmp-client-profile input[type="date"],
.tmp-client-profile input[type="time"],
.tmp-client-profile input[type="url"],
.tmp-client-profile input[type="number"],
.tmp-client-profile input[type="tel"],
.tmp-client-profile input:not([type]),
.tmp-client-profile select,
.tmp-client-profile textarea,
.tmp-client-documents input,
.tmp-client-documents select,
.tmp-client-documents textarea {
    width: 100%;
    max-width: 760px;
    min-height: 40px;
    border: 1px solid var(--tmp-input-border);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--tmp-input-bg);
    color: var(--tmp-text);
    font-size: 14px;
}

.tmp-crm textarea,
.tmp-client-profile textarea,
.tmp-client-documents textarea {
    min-height: 96px;
}

.tmp-crm .tmp-form-grid input,
.tmp-crm .tmp-form-grid select,
.tmp-crm .tmp-form-grid textarea {
    max-width: none;
}

.tmp-crm table,
.tmp-client-profile table,
.tmp-client-documents table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 35, 60, .05);
}

.tmp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
}

.tmp-manage-clients .tmp-table-wrap,
.tmp-manage-preparers .tmp-table-wrap {
    border-radius: 0;
}

.tmp-manage-clients table,
.tmp-manage-preparers table {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-manage-clients th,
.tmp-manage-preparers th {
    background: transparent;
}

.tmp-manage-clients tr,
.tmp-manage-preparers tr {
    background: var(--tmp-surface);
}

.tmp-crm th,
.tmp-crm td,
.tmp-client-profile th,
.tmp-client-profile td,
.tmp-client-documents th,
.tmp-client-documents td {
    border: 0 !important;
    border-bottom: 1px solid var(--tmp-border) !important;
    padding: 12px 14px !important;
    text-align: left;
}

.tmp-crm tr:last-child td,
.tmp-crm tr:last-child th,
.tmp-client-profile tr:last-child td,
.tmp-client-profile tr:last-child th {
    border-bottom: 0 !important;
}

.tmp-crm th,
.tmp-client-profile th,
.tmp-client-documents th {
    background: var(--tmp-table-header-bg);
    color: var(--tmp-text);
    font-size: 13px;
    font-weight: 750;
}

.tmp-alert,
.tmp-notice {
    background: #fff;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-left: 4px solid var(--tmp-primary, #1f4f8f);
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 16px;
    color: var(--tmp-text, #172033);
}

.tmp-success {
    border-left-color: #17a673;
}

.tmp-filter-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tmp-border);
    color: var(--tmp-text);
    font-weight: 650;
}

.tmp-list-tools {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    background: var(--tmp-surface, #ffffff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
}

.tmp-list-tools__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: min(260px, 100%);
}

.tmp-list-tools__field label {
    color: var(--tmp-heading, #172033);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tmp-list-summary {
    margin: 0 0 14px;
    color: var(--tmp-muted, #667085);
    font-size: .92rem;
    text-align: center;
}

.tmp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}

.tmp-pagination span {
    color: var(--tmp-heading, #172033);
    font-weight: 800;
}

.tmp-progress-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.tmp-progress-summary > div,
.tmp-notification-item,
.tmp-automation-row {
    background: var(--tmp-surface);
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
}

.tmp-progress-summary > div {
    padding: 14px;
}

.tmp-progress-summary span,
.tmp-notification-item span,
.tmp-automation-row summary span,
.tmp-automation-row summary em {
    display: block;
    color: var(--tmp-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.tmp-progress-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--tmp-heading);
    font-size: 20px;
}

.tmp-notification-list,
.tmp-automation-list {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
}

.tmp-notification-item {
    display: grid;
    gap: 4px;
    padding: 14px;
    color: var(--tmp-text) !important;
    text-decoration: none !important;
}

.tmp-notification-item:hover {
    border-color: var(--tmp-primary);
}

.tmp-automation-row {
    padding: 0;
}

.tmp-automation-row summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    cursor: pointer;
}

.tmp-automation-row form {
    padding: 0 14px 14px;
}

.tmp-commission-form {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.tmp-commission-form input,
.tmp-commission-form select,
.tmp-commission-form textarea {
    max-width: none !important;
}

.tmp-document-request-list,
.tmp-message-thread-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 22px;
}

.tmp-document-request-item,
.tmp-message-thread-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
}

.tmp-document-request-item span,
.tmp-message-thread-item span {
    display: block;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-document-request-item p,
.tmp-message-thread-item p {
    margin: 8px 0 0;
}

.tmp-inline-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tmp-inline-upload input[type="file"] {
    max-width: 240px;
}

.tmp-error {
    border-left-color: #dc3545;
}

.tmp-empty-state {
    color: var(--tmp-muted);
    text-align: center;
}

.tmp-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    background: color-mix(in srgb, var(--tmp-primary) 10%, white);
    color: var(--tmp-primary-dark);
    font-size: 13px;
    font-weight: 750;
}

.tmp-status-pill.is-inactive {
    background: #f2f4f7;
    color: #667085;
}

.tmp-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tmp-crm .tmp-inline-form select {
    width: auto;
    max-width: 180px;
    min-height: 36px;
}

.tmp-crm button.tmp-button-secondary {
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-crm button.tmp-button-secondary:hover,
.tmp-crm button.tmp-button-secondary:focus {
    background: var(--tmp-secondary-button-hover-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-crm .tmp-button-small {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.tmp-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tmp-protected-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-accent) 18%, white);
    color: #3d2a00;
    font-size: 13px;
    font-weight: 750;
}

.tmp-manage-panel {
    position: relative;
    max-width: min(720px, calc(100vw - 32px));
}

.tmp-manage-panel > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    list-style: none;
}

.tmp-manage-panel > summary::-webkit-details-marker {
    display: none;
}

.tmp-manage-panel[open] > summary {
    margin-bottom: 12px;
}

.tmp-manage-panel__body {
    display: grid;
    gap: 14px;
    width: min(680px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 34px rgba(20, 35, 60, .12);
}

.tmp-manage-form {
    display: grid;
    gap: 12px;
}

.tmp-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.tmp-crm .tmp-manage-grid input,
.tmp-crm .tmp-manage-grid select,
.tmp-crm .tmp-manage-grid textarea,
.tmp-crm .tmp-manage-form textarea {
    max-width: none;
}

.tmp-manage-split {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.tmp-danger-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-checkline,
.tmp-check-field label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tmp-crm .tmp-checkline input,
.tmp-crm .tmp-check-field input {
    width: auto;
    min-height: 0;
}

.tmp-crm button.tmp-button-danger,
.tmp-crm .tmp-button-danger {
    background: #b42318;
    color: #ffffff !important;
}

.tmp-crm button.tmp-button-danger:hover,
.tmp-crm .tmp-button-danger:hover,
.tmp-crm button.tmp-button-danger:focus,
.tmp-crm .tmp-button-danger:focus {
    background: #8f1d14;
    color: #ffffff !important;
}

.tmp-dashboard-link {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

.tmp-referral-input {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.tmp-brand-logo {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.tmp-tabset {
    display: grid;
    gap: 18px;
    margin: 22px 0;
}

.tmp-tab-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tmp-border);
    scrollbar-width: thin;
}

.tmp-crm .tmp-tab-button,
.tmp-client-profile .tmp-tab-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    color: var(--tmp-text) !important;
}

.tmp-crm .tmp-tab-button.is-active,
.tmp-client-profile .tmp-tab-button.is-active {
    border-color: var(--tmp-primary);
    background: var(--tmp-primary);
    color: var(--tmp-button-text) !important;
}

.tmp-tab-panel {
    display: none;
}

.tmp-tab-panel.is-active {
    display: block;
}

.tmp-tab-panel > h2:first-child,
.tmp-tab-panel > h3:first-child {
    margin-top: 0;
}

@media (max-width: 820px) {
    .tmp-crm,
    .tmp-client-profile,
    .tmp-client-documents {
        max-width: none;
        width: 100%;
    }

    .tmp-crm h1,
    .tmp-client-profile h1 {
        font-size: 28px;
    }

    .tmp-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tmp-page-header .tmp-button {
        width: 100%;
    }

    .tmp-portal-hero,
    .tmp-login-shell,
    .tmp-quick-panel {
        grid-template-columns: 1fr;
    }

    .tmp-portal-hero {
        min-height: 0;
        padding: 22px;
        border-radius: 10px;
    }

    .tmp-client-dashboard > .tmp-portal-hero--image-only,
    .tmp-tax-return > .tmp-portal-hero--image-only,
    .tmp-flow-page > .tmp-portal-hero--image-only {
        width: 100%;
        height: max(190px, calc(100vw * .3623));
        min-height: max(190px, calc(100vw * .3623));
        padding: 0;
        border-radius: 0;
    }

    .tmp-client-welcome {
        padding: 28px 16px 30px;
    }

    .tmp-client-owner {
        align-items: center;
        flex-direction: column;
        border-radius: 16px;
        text-align: center;
    }

    .tmp-client-owner div {
        text-align: center;
    }

    .tmp-portal-hero__portrait {
        width: min(190px, 60vw);
        justify-self: start;
    }

    .tmp-hero-actions,
    .tmp-promo-band {
        align-items: stretch;
        flex-direction: column;
    }

    .tmp-login-shell {
        min-height: 0;
        padding: 18px;
        border-radius: 10px;
    }

    .tmp-login-art,
    .tmp-login-panel {
        grid-column: 1;
        grid-row: auto;
        min-height: auto;
    }

    .tmp-login-panel {
        padding: 18px;
    }

    .tmp-login-art h1,
    .tmp-portal-hero h1 {
        font-size: 2rem;
    }

    .tmp-quick-link-grid {
        grid-template-columns: 1fr;
    }

    .tmp-flow-grid {
        grid-template-columns: 1fr;
    }

    .tmp-dashboard-split,
    .tmp-review-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .tmp-client-link-grid,
    .tmp-tool-grid,
    .tmp-state-grid {
        grid-template-columns: 1fr;
    }

    .tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid,
    .tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid {
        width: 100%;
        margin-top: 0;
        padding: 0 12px;
    }

    .tmp-client-dashboard .tmp-client-link-card,
    .tmp-client-dashboard .tmp-tool-card {
        min-height: 88px;
        border-radius: 0;
        box-shadow: none;
    }

    .tmp-client-dashboard .tmp-dashboard-section > .tmp-status-tracker {
        width: min(100%, calc(100vw - 24px));
        margin-top: 22px;
    }

    .tmp-status-track {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        background: transparent;
    }

    .tmp-status-step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        justify-items: start;
        min-height: 58px;
        padding: 0 0 18px;
        text-align: left;
    }

    .tmp-status-step::before {
        top: 38px;
        left: 19px;
        width: 4px;
        height: calc(100% - 2px);
        transform: none;
    }

    .tmp-status-step span {
        margin: 0;
        grid-row: 1;
        grid-column: 1;
    }

    .tmp-status-step strong {
        align-self: center;
        grid-column: 2;
        font-size: 13px;
    }

    .tmp-client-dashboard .tmp-status-message {
        margin: 0 auto;
    }

    .tmp-document-card,
    .tmp-client-task-card,
    .tmp-client-invoice-card {
        align-items: stretch;
        flex-direction: column;
    }

    .tmp-tax-form-actions {
        position: static;
        flex-direction: column;
        align-items: stretch;
        margin: 0 0 20px;
    }

    .tmp-tax-layout,
    .tmp-tax-progress {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tmp-tax-steps {
        grid-template-columns: 1fr;
        /* ISSUE 3 FIX mobile: adequate bottom padding */
        padding: 10px 0 24px;
    }

    .tmp-tax-steps a {
        /* ISSUE 3 FIX mobile: 2-column layout -- circle | label -- both on same row */
        display: grid;
        grid-template-rows: unset;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        min-height: 52px;
        padding: 0 0 16px;
        text-align: left;
        /* ISSUE 3 FIX mobile: label font size */
        font-size: 0.82rem;
    }

    .tmp-tax-steps a::before {
        /* ISSUE 3 FIX mobile: vertical connector line centered on 36px circle */
        top: 18px;
        left: 17px;
        width: 4px;
        height: calc(100% - 4px);
    }

    .tmp-tax-steps a span {
        grid-column: 1;
        /* ISSUE 3 FIX mobile: match new 32px circle, keep centered on its row */
        width: 32px;
        height: 32px;
        margin: 0;
        align-self: center;
    }

    .tmp-form-grid,
    .tmp-intake-grid,
    .tmp-tax-layout {
        grid-template-columns: 1fr !important;
    }

    .tmp-crm input[type="text"],
    .tmp-crm input[type="email"],
    .tmp-crm input[type="password"],
    .tmp-crm input[type="date"],
    .tmp-crm input[type="time"],
    .tmp-crm input[type="url"],
    .tmp-crm input[type="number"],
    .tmp-crm input[type="tel"],
    .tmp-crm input[type="search"],
    .tmp-crm input:not([type]),
    .tmp-crm select,
    .tmp-crm textarea,
    .tmp-client-profile input[type="text"],
    .tmp-client-profile input[type="email"],
    .tmp-client-profile input[type="password"],
    .tmp-client-profile input[type="date"],
    .tmp-client-profile input[type="time"],
    .tmp-client-profile input[type="url"],
    .tmp-client-profile input[type="number"],
    .tmp-client-profile input:not([type]),
    .tmp-client-profile select,
    .tmp-client-profile textarea,
    .tmp-client-documents input,
    .tmp-client-documents select,
    .tmp-client-documents textarea {
        max-width: none;
        font-size: 16px;
    }

    .tmp-crm .tmp-button,
    .tmp-crm button,
    .tmp-crm input[type="submit"],
    .tmp-client-profile button,
    .tmp-client-documents button {
        width: 100%;
        min-height: 44px;
    }

    .tmp-card,
    .tmp-crm .tmp-card,
    .tmp-client-profile .tmp-card {
        padding: 16px;
        border-radius: 8px;
        box-shadow: none;
    }

    .tmp-manage-clients .tmp-table-wrap,
    .tmp-manage-preparers .tmp-table-wrap {
        overflow: visible;
    }

    .tmp-manage-clients table,
    .tmp-manage-preparers table,
    .tmp-manage-clients thead,
    .tmp-manage-preparers thead,
    .tmp-manage-clients tbody,
    .tmp-manage-preparers tbody,
    .tmp-manage-clients tr,
    .tmp-manage-preparers tr,
    .tmp-manage-clients td,
    .tmp-manage-preparers td {
        display: block;
        width: 100%;
    }

    .tmp-manage-clients table,
    .tmp-manage-preparers table {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .tmp-manage-clients thead,
    .tmp-manage-preparers thead {
        display: none;
    }

    .tmp-manage-clients tr,
    .tmp-manage-preparers tr {
        margin-bottom: 14px;
        border: 1px solid var(--tmp-border);
        border-radius: 10px;
        background: var(--tmp-surface);
        box-shadow: 0 8px 20px rgba(20, 35, 60, .06);
        overflow: hidden;
    }

    .tmp-manage-clients td,
    .tmp-manage-preparers td {
        display: grid;
        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        border-bottom: 1px solid var(--tmp-border) !important;
        overflow-wrap: anywhere;
    }

    .tmp-manage-clients td::before,
    .tmp-manage-preparers td::before {
        content: attr(data-label);
        color: var(--tmp-muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .tmp-manage-clients td:last-child,
    .tmp-manage-preparers td:last-child {
        grid-template-columns: 1fr;
        border-bottom: 0 !important;
    }

    .tmp-manage-clients td:last-child::before,
    .tmp-manage-preparers td:last-child::before {
        display: none;
    }

    .tmp-row-actions,
    .tmp-manage-split,
    .tmp-danger-zone,
    .tmp-inline-form {
        width: 100%;
        align-items: stretch;
    }

    .tmp-row-actions > *,
    .tmp-inline-form > *,
    .tmp-manage-split > *,
    .tmp-danger-zone > * {
        width: 100%;
    }

    .tmp-manage-panel,
    .tmp-manage-panel__body {
        width: 100%;
        max-width: none;
    }

    .tmp-manage-panel__body {
        padding: 14px;
        box-shadow: none;
    }

    .tmp-manage-grid {
        grid-template-columns: 1fr;
    }

    .tmp-crm .tmp-inline-form select {
        width: 100%;
        max-width: none;
    }

    .tmp-crm .tmp-tab-button,
    .tmp-client-profile .tmp-tab-button {
        width: auto;
        min-height: 40px;
    }
}

.tmp-intake-page {
    min-height: calc(100vh - 70px);
    margin: 0;
    padding: 32px 12px;
    background-color: var(--tmp-intake-bg, #e5b2a9);
    background-size: cover;
    background-position: center;
    /* General text -- overridden by more specific vars below */
    color: var(--tmp-intake-text, #111827);
}

.tmp-intake-shell {
    width: min(920px, 100%);
    margin: 0 auto;
}

.tmp-intake-logo-wrap {
    margin-bottom: 18px;
    text-align: center;
}

.tmp-intake-logo {
    max-width: 240px;
    max-height: 120px;
    object-fit: contain;
}

.tmp-intake-card {
    padding: 0;
    background: var(--tmp-intake-card-bg, rgba(255,255,255,0.12));
    border-radius: 8px;
}

.tmp-intake-heading {
    margin-bottom: 20px;
}

.tmp-intake-heading h1 {
    margin: 0 0 8px;
    /* FIRM-CUSTOMIZABLE: heading color, falls back to general text color */
    color: var(--tmp-intake-heading-color, var(--tmp-intake-text, #111827));
    font-size: 34px;
    line-height: 1.15;
}

.tmp-intake-heading p {
    margin: 0;
    /* FIRM-CUSTOMIZABLE: subheading/description color */
    color: var(--tmp-intake-subheading-color, var(--tmp-intake-text, #111827));
    font-size: 17px;
}

.tmp-intake-form {
    display: grid;
    gap: 16px;
}

.tmp-intake-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.tmp-intake-form label {
    display: block;
    margin: 2px 0 -6px;
    font-weight: 700;
    /* FIRM-CUSTOMIZABLE: form field label color */
    color: var(--tmp-intake-label-color, var(--tmp-intake-text, #111827));
}

.tmp-intake-form input,
.tmp-intake-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 4px;
    background: #fff;
    color: #111827;
    font-size: 15px;
}

.tmp-intake-form select[multiple] {
    min-height: 48px;
    padding: 8px 10px;
}

.tmp-intake-form button {
    justify-self: start;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--tmp-intake-button-bg, #111827);
    color: var(--tmp-intake-button-text, #ffffff);
    font-weight: 800;
    cursor: pointer;
}

.tmp-tax-layout {
    display: grid;
    gap: 18px;
    align-items: start;
    margin-top: clamp(22px, 4vw, 44px);
    padding: 0 max(16px, calc((100vw - var(--tmp-content-width)) / 2)) 58px;
}

.tmp-tax-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    overflow: visible;
    /* ISSUE 3 FIX: increased bottom padding so label text is never clipped */
    padding: 24px 0 32px;
}

.tmp-tax-steps a {
    position: relative;
    z-index: 1;
    display: grid;
    /* ISSUE 3 FIX: grid rows -- circle first, then label -- with explicit row heights */
    grid-template-rows: 32px auto;
    justify-items: center;
    align-items: start;
    gap: 8px;
    /* ISSUE 3 FIX: increased min-height to accommodate circle + label */
    min-height: 90px;
    padding: 0 6px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    /* Use firm-customizable wizard step label color; white by default on dark canvas */
    color: var(--tmp-wizard-step-label, #ffffff);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.3;
}

.tmp-tax-steps a::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 4px;
    /* Firm-customizable: connector line between steps */
    background: var(--tmp-wizard-step-connector, var(--tmp-border));
}

.tmp-tax-steps a:last-child::before {
    display: none;
}

.tmp-tax-steps a span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    /* Firm-customizable: circle number text */
    color: var(--tmp-wizard-step-circle-text, var(--tmp-muted));
    border: 3px solid var(--tmp-wizard-step-connector, var(--tmp-border));
    border-radius: 50%;
    /* Firm-customizable: circle background */
    background: var(--tmp-wizard-step-circle-bg, var(--tmp-surface));
    align-self: start;
}

.tmp-tax-steps a.is-current {
    /* Current step label slightly brighter */
    color: var(--tmp-wizard-step-label, #ffffff);
    opacity: 1;
}

.tmp-tax-steps a.is-done::before {
    /* FIRM-CUSTOMIZABLE: completed step connector color */
    background: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
}

.tmp-tax-steps a.is-done span {
    color: #111827;
    /* FIRM-CUSTOMIZABLE: completed step circle color */
    border-color: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
    background: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
}

.tmp-tax-steps a.is-current span {
    color: #111827;
    border-color: var(--tmp-primary);
    background: var(--tmp-primary);
    /* ISSUE 3 FIX: halo sized relative to the 32px circle */
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--tmp-primary) 15%, transparent);
}

.tmp-tax-steps a.is-done {
    color: var(--tmp-wizard-step-label, #ffffff);
}

.tmp-tax-steps a.is-skipped {
    opacity: 0.35;
}

.tmp-tax-panel {
    min-width: 0;
}

.tmp-tax-form {
    padding: clamp(20px, 3vw, 34px);
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
    box-shadow: none;
}

.tmp-tax-form-actions {
    position: sticky;
    top: 58px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 28px;
    padding: 16px 18px;
    border: 0;
    border-left: 5px solid var(--tmp-section-accent, var(--tmp-accent));
    border-radius: 0;
    background: color-mix(in srgb, var(--tmp-primary) 8%, var(--tmp-surface));
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.tmp-tax-form-actions strong {
    display: block;
    color: var(--tmp-heading);
    font-size: 1.05rem;
}

.tmp-tax-form-actions .tmp-actions {
    margin: 0;
}

.tmp-tax-form h2 {
    text-align: center;
}

.tmp-tax-form h3 {
    margin-top: 24px;
}

.tmp-required-note {
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-required-note span,
.tmp-tax-form label span,
.tmp-tax-fieldset legend span {
    color: #dc2626;
}

.tmp-tax-fieldset {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 0;
    border: 0;
}

.tmp-tax-fieldset legend {
    margin-bottom: 6px;
    font-weight: 800;
}

.tmp-tax-fieldset label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 600;
    color: var(--tmp-text);
}

.tmp-tax-progress {
    margin-top: clamp(28px, 5vw, 58px);
    margin-bottom: 0;
    padding: 16px max(16px, calc((100vw - var(--tmp-content-width)) / 2));
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
}

.tmp-tax-progress-bar {
    overflow: hidden;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--tmp-secondary-button-bg);
}

.tmp-tax-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tmp-primary);
}

.tmp-tax-upload {
    margin: 18px 0;
}

.tmp-tax-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--tmp-muted);
    font-weight: 800;
    cursor: pointer;
}

.tmp-tax-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tmp-dependent-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-signature-request-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 14px 0;
    padding: 22px;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card {
    margin: 14px 0;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
    cursor: pointer;
    list-style: none;
}

.tmp-signature-inline-card summary::-webkit-details-marker {
    display: none;
}

.tmp-signature-click {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 22px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-weight: 800;
}

.tmp-signature-iframe {
    display: block;
    width: calc(100% - 44px);
    min-height: 760px;
    margin: 0 22px 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card p {
    margin: 0 22px 22px;
}

.tmp-tax-centered {
    text-align: center;
}

.tmp-tax-summary-section {
    margin: 14px 0;
}

.tmp-tax-summary-section summary {
    cursor: pointer;
}

.tmp-tax-summary-section table {
    margin-top: 14px;
}

.tmp-bank-advance-info {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #f8fafc;
}

@media (max-width: 720px) {
    .tmp-crm,
    .tmp-client-profile,
    .tmp-client-documents {
        padding: 0;
        border-radius: 0;
    }

    .tmp-page-header {
        display: flex;
        flex-direction: column;
    }

    .tmp-crm h1,
    .tmp-client-profile h1 {
        font-size: 28px;
    }

    .tmp-stat-value {
        font-size: 34px;
    }

    .tmp-intake-grid {
        grid-template-columns: 1fr;
    }

    .tmp-intake-heading h1 {
        font-size: 28px;
    }

    .tmp-tax-layout {
        grid-template-columns: 1fr;
    }

    .tmp-tax-steps {
        position: static;
    }

    .tmp-signature-request-card {
        grid-template-columns: 1fr;
    }

    .tmp-signature-inline-card summary {
        grid-template-columns: 1fr;
    }

    .tmp-document-request-item,
    .tmp-message-thread-item {
        grid-template-columns: 1fr;
    }

    .tmp-inline-upload {
        justify-content: flex-start;
    }
}

/* ============================================================
   PORTAL LAYOUT FIXES -- v2.9
   Fixes: hero height, documents page layout, step labels, nav
   ============================================================ */

/* ISSUE 1 & 2 FIX: Documents & Tasks page uses tmp-client-dashboard class now.
   Ensure the hero on that page gets the exact same full height as Dashboard Home. */
.tmp-client-documents-page.tmp-client-dashboard > .tmp-portal-hero--image-only {
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    margin: 0;
    padding: 0;
    border: 0;
    background-image: var(--tmp-hero-image, none);
    background-color: var(--tmp-primary-dark);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: none;
}

/* ISSUE 2 FIX: Documents & Tasks page-intro section should match Dashboard Home
   welcome section -- white background, centered content, consistent spacing. */
.tmp-client-documents-page .tmp-page-intro {
    width: 100%;
    padding: clamp(30px, 5vw, 58px) 16px clamp(26px, 4vw, 44px);
    background: var(--tmp-welcome-bg, var(--tmp-surface));
    text-align: center;
}

.tmp-client-documents-page .tmp-page-intro__inner {
    display: grid;
    justify-items: center;
    width: min(var(--tmp-readable-width), 100%);
    margin: 0 auto;
}

/* ISSUE 2 FIX: Sections inside Documents page use the same full-width dark canvas
   and centered content widths as Dashboard Home. */
.tmp-client-documents-page .tmp-client-experience {
    padding-bottom: 58px;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-client-documents-page .tmp-dashboard-section > .tmp-dashboard-split {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* ISSUE 3 FIX: Additional step label visibility -- ensure the text node that sits
   after the <span> circle inside each <a> is never hidden or clipped. */
.tmp-tax-steps a > :not(span) {
    /* Target the text node wrapper -- browsers wrap bare text in anonymous boxes,
       but named siblings (strong tags from PHP output) are targeted here. */
    display: block;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure step label text color is always readable on both light and dark backgrounds */
.tmp-tax-steps a,
.tmp-tax-steps a:visited {
    color: var(--tmp-text, #172033);
}

.tmp-tax-steps a.is-done {
    color: var(--tmp-text, #172033);
}

/* ISSUE 3 FIX: On very small screens (≤ 480px) make labels slightly smaller
   but never invisible */
@media (max-width: 480px) {
    .tmp-tax-steps a {
        font-size: 0.75rem;
    }
}

/* ============================================================
   PORTAL LAYOUT FIXES -- v2.9.1
   ============================================================ */

/* FIX: Requested Documents -- center to match section content width */
.tmp-doc-requests-wrap {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px) 0 0;
}

.tmp-doc-requests-heading {
    margin: 0 0 14px;
    color: var(--tmp-surface, #ffffff);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* FIX: Hero banner -- strictly enforce 13.25" × 4.8" aspect ratio at 96dpi.
   13.25 × 96 = 1272px wide, 4.8 × 96 = 460.8px tall → ratio 0.36226.
   Using aspect-ratio as a modern fallback for browsers that support it. */
.tmp-portal-hero--image-only {
    aspect-ratio: 13.25 / 4.8;
}

/* Override any lingering fixed pixel heights from earlier rules */
/* All image-only heroes -- aspect ratio responsive sizing */
.tmp-portal-hero--image-only {
    aspect-ratio: 13.25 / 4.8;
    height: auto !important;
    min-height: unset !important;
}

/* Mobile: keep ratio but allow slight compression below 600px */
@media (max-width: 600px) {
    .tmp-portal-hero--image-only {
        /* On phones use a slightly taller ratio so the image isn't a sliver */
        aspect-ratio: 4 / 1.8;
    }
}

/* ============================================================
   WIZARD STEP COLOR OVERRIDES -- v2.9.2
   All colors below are controlled per-firm from the admin
   Firm Edit screen under "Portal Section Colors".
   ============================================================ */

/* Progress bar fill -- firm-customizable */
.tmp-tax-progress-bar span {
    background: var(--tmp-wizard-progress-bar, var(--tmp-primary));
}

/* Progress % text -- firm-customizable */
.tmp-tax-progress > div {
    color: var(--tmp-wizard-progress-text, var(--tmp-text));
    font-size: 0.9rem;
}

/* Progress section background -- keep it consistent with canvas
   so the bar area doesn't appear as a jarring white stripe */
.tmp-tax-progress {
    background: var(--tmp-portal-canvas, #050505);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Tax steps section sits on the canvas -- text must be readable */
.tmp-tax-layout {
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-tax-steps a,
.tmp-tax-steps a:visited {
    color: var(--tmp-wizard-step-label, #ffffff);
}

.tmp-tax-steps a.is-current,
.tmp-tax-steps a.is-done {
    color: var(--tmp-wizard-step-label, #ffffff);
}

/* Uncompleted circle on dark canvas */
.tmp-tax-steps a span {
    background: var(--tmp-wizard-step-circle-bg, #2a2a2a);
    border-color: var(--tmp-wizard-step-connector, #555555);
    color: var(--tmp-wizard-step-circle-text, #ffffff);
}

/* Connector line between circles */
.tmp-tax-steps a::before {
    background: var(--tmp-wizard-step-connector, #555555);
}

/* Skipped steps -- dim but still readable */
.tmp-tax-steps a.is-skipped {
    opacity: 0.38;
}

/* Mobile responsive -- same variable overrides apply */
@media (max-width: 760px) {
    .tmp-tax-steps a {
        color: var(--tmp-wizard-step-label, #ffffff);
    }
    .tmp-tax-progress > div {
        color: var(--tmp-wizard-progress-text, #ffffff);
    }
}

/* ============================================================
   STATUS TRACKER COLOR OVERRIDES -- v2.9.3
   Controlled per-firm from Firm Edit → Portal Section Colors
   ============================================================ */

/* Incomplete step label */
.tmp-status-step {
    color: var(--tmp-status-step-label, #ffffff);
}

.tmp-status-step strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Completed step label */
.tmp-status-step.is-complete strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Current step label */
.tmp-status-step.is-current strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Incomplete circle */
.tmp-status-step span {
    background: var(--tmp-status-circle-bg, #2a2a2a);
    border-color: var(--tmp-status-connector, #444444);
    color: var(--tmp-status-circle-text, #ffffff);
}

/* Connector line between steps */
.tmp-status-step::before {
    background: var(--tmp-status-connector, #444444);
}

/* Completed connector line uses accent (already var-driven, keep it) */
.tmp-status-step.is-complete::before {
    background: var(--tmp-section-accent, var(--tmp-accent));
}

@media (max-width: 760px) {
    .tmp-status-step strong {
        color: var(--tmp-status-step-label, #ffffff);
    }
    .tmp-status-step.is-complete strong,
    .tmp-status-step.is-current strong {
        color: var(--tmp-status-step-label, #ffffff);
    }
}

/* ============================================================
   PHASE 2 -- Features #1-4 Styles -- v2.10.0
   ============================================================ */

/* -- Notification Center -- */
.tmp-notification-center .tmp-page-header { margin-bottom: 24px; }
.tmp-notification-list { display: grid; gap: 10px; }
.tmp-notification-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 8px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    transition: border-color .15s, box-shadow .15s;
}
.tmp-notification-item.is-unread {
    border-left: 4px solid var(--tmp-primary, #1f4f8f);
    box-shadow: 0 2px 10px rgba(31,79,143,.08);
}
.tmp-notification-item.is-read { opacity: .7; }
.tmp-notif-icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
    font-size: 18px;
}
.tmp-notif-body { min-width: 0; }
.tmp-notif-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tmp-notif-type { font-weight: 700; font-size: 13px; color: var(--tmp-primary,#1f4f8f); }
.tmp-notif-time { font-size: 12px; color: var(--tmp-muted,#667085); }
.tmp-notif-desc { margin: 0; font-size: 14px; line-height: 1.45; }
.tmp-notif-link { font-size: 13px; font-weight: 700; color: var(--tmp-primary,#1f4f8f); text-decoration: none; margin-top: 6px; display: inline-block; }
.tmp-notif-actions { display: flex; flex-direction: column; gap: 6px; }
.tmp-notif-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff);
    color: var(--tmp-muted,#667085);
    cursor: pointer; font-size: 14px; font-weight: 800;
}
.tmp-notif-action-btn:hover { background: var(--tmp-primary,#1f4f8f); color: #fff; border-color: var(--tmp-primary,#1f4f8f); }
.tmp-notif-delete-btn:hover { background: #e53e3e !important; border-color: #e53e3e !important; }
.tmp-notif-widget { }

/* -- Firm Admin permissions grid -- */
.tmp-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.tmp-perm-toggle {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; font-size: 14px; font-weight: 600;
    padding: 10px 12px; border-radius: 8px;
    background: var(--tmp-bg,#f5f7fb);
    border: 1px solid var(--tmp-border,#dce3ee);
    transition: background .15s;
}
.tmp-perm-toggle:hover { background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white); }
.tmp-perm-toggle input { display: none; }
.tmp-perm-track {
    position: relative; width: 42px; height: 23px;
    border-radius: 999px; background: var(--tmp-border,#dce3ee);
    transition: background .2s; flex-shrink: 0;
}
.tmp-perm-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.tmp-perm-toggle input:checked ~ .tmp-perm-track { background: var(--tmp-primary,#1f4f8f); }
.tmp-perm-toggle input:checked ~ .tmp-perm-track .tmp-perm-thumb { transform: translateX(19px); }
.tmp-perm-toggle input:checked + .tmp-perm-track { background: var(--tmp-primary,#1f4f8f); }
.tmp-perm-toggle input:checked + .tmp-perm-track .tmp-perm-thumb { transform: translateX(19px); }

/* -- Edit client / client list item selected state -- */
.tmp-client-list-item.is-selected {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 7%, white);
    border-color: var(--tmp-primary,#1f4f8f);
}
.tmp-edit-client-fields .tmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tmp-edit-client-fields .tmp-table th { background: var(--tmp-table-header-bg,#f8fafd); padding: 10px 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--tmp-border,#dce3ee); }
.tmp-edit-client-fields .tmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--tmp-border,#dce3ee); }
.tmp-edit-client-fields .tmp-table tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
    .tmp-notification-item { grid-template-columns: 36px 1fr; }
    .tmp-notif-actions { flex-direction: row; grid-column: 1/-1; }
    .tmp-perm-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENT / PREPARER CARD GRID -- v2.10.3
   ============================================================ */

.tmp-client-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 4px 0 28px;
}

.tmp-client-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(17,24,39,.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s;
}
.tmp-client-card:hover { box-shadow: 0 4px 18px rgba(17,24,39,.1); }

.tmp-client-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-client-card__name {
    display: block;
    font-size: .98rem;
    font-weight: 750;
    color: var(--tmp-heading, #172033);
}
.tmp-client-card__id {
    display: block;
    font-size: .75rem;
    color: var(--tmp-muted, #667085);
    margin-top: 2px;
}

.tmp-client-card__body {
    flex: 1 1 auto;
    padding: 10px 16px;
    display: grid;
    gap: 4px;
}
.tmp-client-card__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .82rem;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.tmp-client-card__row:last-child { border-bottom: 0; }
.tmp-client-card__row span:first-child { color: var(--tmp-muted, #667085); flex-shrink: 0; }
.tmp-client-card__row span:last-child { text-align: right; font-weight: 600; }

.tmp-client-card__actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
    flex-wrap: wrap;
}

/* ============================================================
   WORKFLOW AUTOMATION GROUPED ACCORDION -- v2.10.3
   ============================================================ */

.tmp-workflow-group-list {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.tmp-workflow-group {
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    overflow: hidden;
    background: var(--tmp-surface, #fff);
}

.tmp-workflow-group__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tmp-surface, #fff);
    color: var(--tmp-heading, #172033);
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.tmp-workflow-group {
    background: var(--tmp-surface, #ffffff) !important;
    border: 1px solid var(--tmp-border, #dce3ee) !important;
}
.tmp-workflow-group__header {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-workflow-group__header:hover { background: var(--tmp-bg, #f5f7fb); }
.tmp-workflow-group__header[aria-expanded="true"] {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 5%, white);
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-workflow-group__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.tmp-workflow-group__title strong { font-size: .94rem; color: var(--tmp-heading,#172033); }

.tmp-workflow-group__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tmp-workflow-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}
.tmp-workflow-mini-pill.is-on  { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 12%,white); color: var(--tmp-primary,#1f4f8f); }
.tmp-workflow-mini-pill.is-off { background: var(--tmp-bg,#f5f7fb); color: var(--tmp-muted,#667085); text-decoration: line-through; }

.tmp-workflow-group__chevron {
    font-size: 18px;
    transition: transform .2s;
    flex-shrink: 0;
    color: var(--tmp-muted,#667085);
}
.tmp-workflow-group__header[aria-expanded="true"] .tmp-workflow-group__chevron {
    transform: rotate(180deg);
}

.tmp-workflow-group__body {
    padding: 0;
}
.tmp-workflow-group__body[hidden] { display: none; }

.tmp-workflow-template-card {
    padding: 16px 18px;
    border-top: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-workflow-template-card:first-child { border-top: none; }

.tmp-workflow-template-card__label { margin-bottom: 12px; }

.tmp-workflow-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tmp-accent,#d6a84f) 15%, white);
    color: var(--tmp-heading,#172033);
    font-size: .78rem;
    font-weight: 700;
}

.tmp-workflow-form-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.tmp-workflow-enable-toggle {
    /* inherits .tmp-perm-toggle from firm-admin styles */
    padding: 6px 10px;
    border-radius: 6px;
}

/* ============================================================
   FIRM PAGE STANDARD LAYOUT -- v2.10.4
   Hero image → pill nav → intro section → content
   ============================================================ */

/* Wrapper that sits below the hero+nav intro, holds the page body */
.tmp-firm-page-content {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) 0 60px;
}

/* Dark canvas sections use --tmp-font-dark-bg for text */
.tmp-client-experience,
.tmp-firm-page > .tmp-client-experience,
.tmp-manage-clients > .tmp-client-experience,
.tmp-add-client > .tmp-client-experience,
.tmp-manage-preparers > .tmp-client-experience,
.tmp-status-track,
.tmp-tax-layout,
.tmp-tax-progress {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* Light/white sections use --tmp-font-light-bg */
.tmp-firm-page-content,
.tmp-firm-page-content h1,
.tmp-firm-page-content h2,
.tmp-firm-page-content h3,
.tmp-page-intro h1,
.tmp-page-intro h2,
.tmp-page-intro p {
    color: var(--tmp-font-light-bg, #172033);
}
.tmp-page-intro h1 {
    color: var(--tmp-heading-light-bg, #172033);
}

/* Firm hero overlay text */
.tmp-portal-hero--firm .tmp-portal-hero__content h1,
.tmp-portal-hero--firm .tmp-portal-hero__content p,
.tmp-portal-hero--firm .tmp-page-kicker {
    color: var(--tmp-hero-text, #ffffff);
}

/* Dashboard section headings on dark canvas */
.tmp-section-band h2 {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* Pill nav sits full-width directly below the hero image, no gap */
.tmp-firm-page .portal-pill-nav,
.tmp-manage-clients .portal-pill-nav,
.tmp-manage-preparers .portal-pill-nav,
.tmp-firm-admin-manager .portal-pill-nav,
.tmp-add-firm-admin .portal-pill-nav,
.tmp-notification-center .portal-pill-nav,
.tmp-workflow-automations-page .portal-pill-nav,
.tmp-reports-page .portal-pill-nav,
.tmp-intake-settings-page .portal-pill-nav,
.tmp-signature-templates-page .portal-pill-nav {
    position: relative; /* not sticky on inner pages -- stays under hero */
    top: 0;
    margin: 0;
}

/* Workflow automation page content gets standard width */
.tmp-workflow-automations-page .tmp-firm-page-content,
.tmp-reports-page .tmp-firm-page-content,
.tmp-signature-templates-page .tmp-firm-page-content,
.tmp-intake-settings-page .tmp-firm-page-content {
    width: min(1100px, calc(100vw - 32px));
}

/* ============================================================
   NEXT PHASE CENTERS
   ============================================================ */

.tmp-next-phase-page .tmp-client-experience {
    padding-top: clamp(28px, 5vw, 58px);
}

.tmp-next-phase-section {
    background: transparent;
    padding: 0;
}

.tmp-next-phase-content {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 32px));
    margin: 0 auto;
}

.tmp-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(18px, 2vw, 28px);
    margin-bottom: clamp(20px, 3vw, 36px);
}

.tmp-flow-card.tmp-mini-form,
.tmp-next-phase-content .tmp-flow-card {
    background: var(--tmp-surface, #ffffff);
    color: var(--tmp-text, #172033);
    border: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-next-phase-content .tmp-flow-card h2,
.tmp-next-phase-content .tmp-flow-card h3,
.tmp-next-phase-content .tmp-table-wrap th,
.tmp-next-phase-content label,
.tmp-next-phase-content strong {
    color: var(--tmp-heading, #172033);
}

.tmp-next-phase-content .tmp-field {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.tmp-next-phase-content input,
.tmp-next-phase-content select,
.tmp-next-phase-content textarea {
    width: 100%;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--tmp-text, #172033);
    background: #ffffff;
}

.tmp-next-phase-content .tmp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 14px;
}

.tmp-table-wrap {
    overflow-x: auto;
}

.tmp-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.tmp-table-wrap th,
.tmp-table-wrap td {
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.tmp-table-wrap th {
    background: color-mix(in srgb, var(--tmp-surface, #ffffff) 88%, var(--tmp-primary, #145c72));
    font-size: 13px;
}

.tmp-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    min-width: 460px;
}

.tmp-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tmp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tmp-action-row form {
    margin: 0;
}

.tmp-button-small,
.tmp-next-phase-content .tmp-button-small {
    padding: 7px 12px;
    font-size: 13px;
}

.tmp-button-danger,
.tmp-next-phase-content .tmp-button-danger {
    background: #b42318;
    color: #ffffff;
}

.tmp-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.tmp-check-inline input {
    width: auto;
}

.tmp-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.tmp-check-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    padding-bottom: 10px;
}

.tmp-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--tmp-primary, #145c72) 14%, #ffffff);
    color: var(--tmp-heading, #172033);
    font-weight: 700;
    font-size: 12px;
}

.tmp-muted {
    color: var(--tmp-muted, #637083);
}

.tmp-activity-accordion {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.tmp-activity-day {
    background: #ffffff;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    overflow: hidden;
}

.tmp-activity-day summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--tmp-surface, #ffffff) 88%, var(--tmp-primary, #145c72));
}

.tmp-activity-day summary span {
    color: var(--tmp-muted, #637083);
    font-size: 13px;
}

.tmp-activity-list {
    display: grid;
    gap: 0;
}

.tmp-activity-item {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-activity-item span,
.tmp-activity-item small {
    color: var(--tmp-muted, #637083);
    font-size: 12px;
}

.tmp-activity-item p {
    margin: 0;
}

@media (max-width: 720px) {
    .tmp-next-phase-content {
        width: calc(100vw - 24px);
    }

    .tmp-inline-grid,
    .tmp-table-wrap table {
        min-width: 620px;
    }

    .tmp-inline-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   FIRM INNER PAGE LAYOUT (no hero) -- PDF Spec
   ============================================================ */
.tmp-firm-inner-page {
    min-height: 100vh;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-firm-page-title {
    text-align: center;
    padding: clamp(28px, 4vw, 52px) 20px clamp(18px, 3vw, 32px);
    background: var(--tmp-surface, #fff);
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-firm-page-title h1 {
    margin: 6px 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--tmp-heading, #172033);
}
.tmp-firm-page-subtitle {
    color: var(--tmp-muted, #667085);
    max-width: 560px;
    margin: 0 auto;
    font-size: .95rem;
}
.tmp-firm-page-body {
    width: min(1272px, calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(24px,3vw,40px) 0 60px;
}

/* ============================================================
   PILL NAV -- Centered, no brand div
   ============================================================ */
.portal-pill-nav {
    width: 100%;
    background: var(--twlcrm-portal-nav-bg, #111111);
    border-bottom: 3px solid var(--twlcrm-accent, #d6a84f);
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 16px;
}
.portal-pill-nav__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 9px;
    max-width: 1400px;
    margin: 0 auto;
}
.portal-pill-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: var(--twlcrm-portal-nav-text, #ffffff);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .13s, border-color .13s, color .13s;
}
.portal-pill-nav__btn:hover,
.portal-pill-nav__btn.is-active {
    background: var(--twlcrm-accent, #d6a84f);
    border-color: var(--twlcrm-accent, #d6a84f);
    color: #111;
}
.portal-pill-nav__btn--logout { opacity: .55; }
.portal-pill-nav__btn--logout:hover { opacity: 1; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }

/* ============================================================
   WORKFLOW AUTOMATION -- Cards & Modal
   ============================================================ */
.tmp-wa-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tmp-wa-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 24px;
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    min-width: 100px;
}
.tmp-wa-stat__val { font-size: 1.8rem; font-weight: 800; color: var(--tmp-primary,#1f4f8f); }
.tmp-wa-stat__lbl { font-size: .78rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .05em; }

.tmp-wa-search-wrap { margin-bottom: 18px; }
.tmp-wa-search {
    width: 100%;
    max-width: 380px;
    padding: 9px 14px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 999px;
    font-size: .88rem;
    background: var(--tmp-surface,#fff);
}

.tmp-wa-category { margin-bottom: 28px; }
.tmp-wa-category__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tmp-muted,#667085);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--tmp-border,#dce3ee);
}

.tmp-wa-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: box-shadow .15s;
}
.tmp-wa-card:hover { box-shadow: 0 3px 12px rgba(17,24,39,.08); }
.tmp-wa-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
}
.tmp-wa-card__left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tmp-wa-card__name { font-size: .94rem; color: var(--tmp-heading,#172033); }
.tmp-wa-card__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tmp-wa-card__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tmp-wa-card__status { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tmp-wa-card__status.is-on { color: #16a34a; }
.tmp-wa-card__status.is-off { color: var(--tmp-muted,#667085); }

.tmp-wa-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.tmp-wa-pill.is-on  { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 12%,white); color: var(--tmp-primary,#1f4f8f); }
.tmp-wa-pill.is-off { background: var(--tmp-bg,#f5f7fb); color: var(--tmp-muted,#667085); opacity: .7; }

/* Modal */
.tmp-wa-modal { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.tmp-wa-modal.is-open { pointer-events: all; }
.tmp-wa-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .22s; }
.tmp-wa-modal.is-open .tmp-wa-modal__overlay { opacity: 1; }
.tmp-wa-modal__panel {
    position: absolute;
    top: 0; right: 0;
    width: min(540px, 100vw);
    height: 100vh;
    background: var(--tmp-surface,#fff);
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.tmp-wa-modal.is-open .tmp-wa-modal__panel { transform: translateX(0); }
.tmp-wa-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
    flex-shrink: 0;
}
.tmp-wa-modal__title { margin: 0; font-size: 1.05rem; }
.tmp-wa-modal__close {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: var(--tmp-muted,#667085); width: 32px; height: 32px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.tmp-wa-modal__close:hover { background: var(--tmp-bg,#f5f7fb); }
.tmp-wa-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
body.tmp-wa-modal-open { overflow: hidden; }

.tmp-wa-chips { margin-bottom: 16px; padding: 12px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; }
.tmp-wa-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tmp-wa-chip {
    padding: 4px 10px; border-radius: 999px;
    background: var(--tmp-primary,#1f4f8f); color: #fff;
    border: none; cursor: pointer; font-size: .78rem; font-weight: 700;
}
.tmp-wa-chip:hover { opacity: .85; }

.tmp-wa-template-block {
    padding: 16px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--tmp-bg,#f5f7fb);
}
.tmp-wa-template-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.tmp-wa-channel-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; }
.tmp-wa-field { margin-bottom: 10px; }
.tmp-wa-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.tmp-wa-field input, .tmp-wa-field textarea { width: 100%; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; padding: 8px 10px; font-size: .85rem; background: #fff; }

/* Toggle switch for automation enable/disable */
.tmp-wa-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .85rem; font-weight: 600; }
.tmp-wa-toggle input { display: none; }
.tmp-wa-toggle__track { position: relative; width: 42px; height: 23px; border-radius: 999px; background: var(--tmp-border,#dce3ee); transition: background .18s; flex-shrink: 0; }
.tmp-wa-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.tmp-wa-toggle input:checked + .tmp-wa-toggle__track { background: #16a34a; }
.tmp-wa-toggle input:checked + .tmp-wa-toggle__track .tmp-wa-toggle__thumb { transform: translateX(19px); }

/* ============================================================
   FORM BUILDER -- 3-panel layout
   ============================================================ */
.tmp-fb-editor { display: flex; flex-direction: column; min-height: 80vh; }
.tmp-fb-settings-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--tmp-surface,#fff);
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
    flex-wrap: wrap;
}
.tmp-fb-settings-bar__left { display: flex; gap: 16px; flex-wrap: wrap; flex: 1 1 auto; }
.tmp-fb-settings-bar__left .tmp-field label { font-size: .75rem; font-weight: 700; display: block; margin-bottom: 3px; }
.tmp-fb-settings-bar__left .tmp-field input,
.tmp-fb-settings-bar__left .tmp-field select { font-size: .85rem; padding: 7px 10px; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; }
.tmp-fb-settings-bar__right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#fb-save-msg { padding: 0 16px; }

.tmp-fb-panels { display: grid; grid-template-columns: 200px 1fr 240px; flex: 1 1 auto; min-height: 70vh; border-top: 1px solid var(--tmp-border,#dce3ee); }

.tmp-fb-left {
    border-right: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-bg,#f5f7fb);
    padding: 14px 10px;
    overflow-y: auto;
}
.tmp-fb-left h3 { margin: 0 0 4px; font-size: .85rem; }
.tmp-fb-hint { font-size: .75rem; color: var(--tmp-muted,#667085); margin: 0 0 10px; }
.tmp-fb-palette { display: grid; gap: 5px; }
.tmp-fb-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 7px;
    background: var(--tmp-surface,#fff);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    transition: background .12s, border-color .12s;
}
.tmp-fb-palette-item:hover { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white); border-color: var(--tmp-primary,#1f4f8f); }

.tmp-fb-center { background: var(--tmp-bg,#f5f7fb); display: flex; flex-direction: column; }
.tmp-fb-canvas-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff); font-size: .85rem; font-weight: 700;
}
.tmp-fb-canvas {
    flex: 1 1 auto;
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tmp-fb-canvas-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--tmp-muted,#667085);
    font-size: .9rem;
    border: 2px dashed var(--tmp-border,#dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface,#fff);
}

.tmp-fb-field-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s;
}
.tmp-fb-field-card:hover { border-color: var(--tmp-primary,#1f4f8f); }
.tmp-fb-field-card.is-active { border-color: var(--tmp-primary,#1f4f8f); box-shadow: 0 0 0 3px color-mix(in srgb,var(--tmp-primary,#1f4f8f) 15%,white); }
.tmp-fb-field-card__controls { display: flex; gap: 4px; flex-shrink: 0; }
.tmp-fb-ctrl {
    width: 26px; height: 26px; border-radius: 5px;
    border: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-bg,#f5f7fb);
    cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.tmp-fb-ctrl:hover { background: var(--tmp-primary,#1f4f8f); color: #fff; border-color: var(--tmp-primary,#1f4f8f); }
.tmp-fb-ctrl--del:hover { background: #e53e3e !important; border-color: #e53e3e !important; }

.tmp-fb-right {
    border-left: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff);
    overflow-y: auto;
}
.tmp-fb-toggle-row { margin: 10px 0; }
.tmp-fb-sig-preview {
    padding: 16px;
    border: 2px dashed var(--tmp-border,#dce3ee);
    border-radius: 6px;
    text-align: center;
    color: var(--tmp-muted,#667085);
    font-size: .8rem;
}

/* Form builder template library */
.tmp-fb-library__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tmp-fb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tmp-fb-template-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s;
}
.tmp-fb-template-card:hover { box-shadow: 0 4px 16px rgba(17,24,39,.08); }
.tmp-fb-template-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tmp-fb-template-card__meta { font-size: .78rem; color: var(--tmp-muted,#667085); }
.tmp-fb-template-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Preview */
.tmp-fb-preview { max-width: 680px; margin: 0 auto; }
.tmp-fb-preview__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 18px; flex-wrap: wrap; gap: 10px; }
.tmp-fb-preview__form { background: var(--tmp-surface,#fff); border: 1px solid var(--tmp-border,#dce3ee); border-radius: 10px; padding: 28px; }
.tmp-fb-preview-field { margin-bottom: 16px; }
.tmp-fb-preview-field label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .88rem; }
.tmp-fb-preview-field input, .tmp-fb-preview-field select, .tmp-fb-preview-field textarea {
    width: 100%; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; padding: 8px 10px; font-size: .88rem;
}

@media (max-width: 760px) {
    .tmp-fb-panels { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    .tmp-fb-left { border-right: none; border-bottom: 1px solid var(--tmp-border,#dce3ee); max-height: 200px; }
    .tmp-fb-right { border-left: none; border-top: 1px solid var(--tmp-border,#dce3ee); max-height: 300px; }
    .tmp-wa-modal__panel { width: 100vw; }
    .portal-pill-nav__btn { font-size: .7rem; padding: 5px 11px; min-height: 32px; }
}

/* ============================================================
   TAX FIELD LIBRARY -- Form Builder Left Panel
   ============================================================ */

/* Tab switcher */
.tmp-fb-left-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--tmp-border, #dce3ee);
}
.tmp-fb-tab {
    flex: 1 1 auto;
    padding: 8px 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    color: var(--tmp-muted, #667085);
    font-family: inherit;
    transition: color .13s, border-color .13s;
    text-align: center;
    white-space: nowrap;
}
.tmp-fb-tab:hover { color: var(--tmp-heading, #172033); }
.tmp-fb-tab.is-active {
    color: var(--tmp-primary, #1f4f8f);
    border-bottom-color: var(--tmp-primary, #1f4f8f);
}

/* Tab panels */
.tmp-fb-tab-panel { padding-top: 2px; }

/* Tax section label (category divider inside the list) */
.tmp-fb-tax-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tmp-muted, #667085);
    padding: 12px 2px 5px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
    margin-top: 6px;
}
.tmp-fb-tax-palette .tmp-fb-tax-section-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* Tax field library palette */
.tmp-fb-tax-palette {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmp-fb-tax-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 6px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tmp-text, #172033);
    font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.35;
}

.tmp-fb-tax-item:hover {
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 8%, white);
    border-color: var(--tmp-primary, #1f4f8f);
    color: var(--tmp-primary, #1f4f8f);
}

/* "Added" flash state */
.tmp-fb-tax-item--added {
    background: color-mix(in srgb, #16a34a 12%, white) !important;
    border-color: #16a34a !important;
    color: #16a34a !important;
    font-weight: 800 !important;
}

/* Widen the left sidebar slightly since tax field names are longer */
.tmp-fb-panels {
    grid-template-columns: 220px 1fr 240px;
}

@media (max-width: 900px) {
    .tmp-fb-panels { grid-template-columns: 1fr; }
    .tmp-fb-left { max-height: 280px; }
}

/* ============================================================
   PAYROLL CENTER -- v2.11.0
   ============================================================ */

/* ── Import Card ────────────────────────────────────────────── */
.tmp-payroll-import-card,
.tmp-payroll-history-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 12px;
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 24px;
}

.tmp-payroll-section-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-section-desc {
    color: var(--tmp-muted, #667085);
    font-size: .88rem;
    margin: 0 0 22px;
}

/* ── Steps ──────────────────────────────────────────────────── */
.tmp-payroll-import-steps {
    display: grid;
    gap: 20px;
    margin-bottom: 22px;
}

.tmp-payroll-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
}
.tmp-payroll-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.tmp-payroll-step__label {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tmp-muted, #667085);
    margin-bottom: 10px;
}

/* ── Bank selector ──────────────────────────────────────────── */
.tmp-payroll-bank-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tmp-payroll-bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    border: 2px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    cursor: pointer;
    min-width: 150px;
    text-align: center;
    transition: border-color .15s, background .15s;
    position: relative;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-payroll-bank-card input[type="radio"] { display: none; }
.tmp-payroll-bank-card:has(input:checked) {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 7%, white);
}
.tmp-payroll-bank-card:hover:not(.is-coming-soon) {
    border-color: var(--tmp-primary, #1f4f8f);
}
.tmp-payroll-bank-card.is-coming-soon {
    opacity: .55;
    cursor: not-allowed;
}
.tmp-payroll-bank-card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-bank-card__soon {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tmp-muted, #667085);
    background: var(--tmp-bg, #f5f7fb);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--tmp-border, #dce3ee);
}

/* ── Period row ─────────────────────────────────────────────── */
.tmp-payroll-period-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tmp-payroll-period-row .tmp-field {
    margin: 0;
    flex: 1 1 160px;
}

/* ── Upload zone ────────────────────────────────────────────── */
.tmp-payroll-upload-zone {
    position: relative;
}
.tmp-payroll-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.tmp-payroll-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: 2px dashed var(--tmp-border, #dce3ee);
    border-radius: 10px;
    background: var(--tmp-bg, #f5f7fb);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.tmp-payroll-upload-zone:hover .tmp-payroll-upload-label {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 5%, white);
}
.tmp-payroll-upload-icon { font-size: 2rem; }
#payroll-file-name { font-size: .88rem; font-weight: 600; color: var(--tmp-heading, #172033); }
.tmp-payroll-upload-label small { font-size: .75rem; color: var(--tmp-muted, #667085); }

.tmp-payroll-import-actions { display: flex; justify-content: flex-end; }
.tmp-payroll-import-btn { font-size: .9rem; padding: 11px 28px; }

/* ── Payroll Run History ─────────────────────────────────────── */
.tmp-payroll-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.tmp-payroll-empty {
    text-align: center;
    padding: 40px;
    color: var(--tmp-muted, #667085);
    font-size: .9rem;
}
.tmp-payroll-empty p:first-child { font-size: 2rem; }

.tmp-payroll-run-list { display: grid; gap: 12px; }
.tmp-payroll-run-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    background: var(--tmp-surface, #ffffff) !important;
    flex-wrap: wrap;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-payroll-run-card * {
    color: inherit;
}
.tmp-payroll-run-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.tmp-payroll-run-card__num {
    font-size: .95rem;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-payroll-run-card__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--tmp-text, #333333) !important;
}
.tmp-payroll-run-card__meta span {
    color: var(--tmp-text, #333333) !important;
}
.tmp-payroll-run-card__stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.tmp-payroll-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 90px;
}
.tmp-payroll-stat span { font-size: .7rem; color: var(--tmp-muted, #667085) !important; text-transform: uppercase; letter-spacing: .04em; }
.tmp-payroll-stat strong { font-size: .92rem; color: var(--tmp-heading, #172033) !important; }

.tmp-payroll-run-card__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Settings panel ─────────────────────────────────────────── */
.tmp-payroll-settings-panel {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    margin-top: 4px;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-settings-panel *:not(button):not(input):not(select):not(option) {
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-settings-panel > summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: .88rem;
    color: var(--tmp-heading, #172033);
    list-style: none;
}
.tmp-payroll-settings-panel > summary::-webkit-details-marker { display: none; }
.tmp-payroll-settings-body { padding: 0 18px 18px; }

.tmp-payroll-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.tmp-payroll-profile-card {
    background: var(--tmp-surface, #ffffff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    padding: 14px;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-profile-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: .9rem;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-profile-card label,
.tmp-payroll-profile-card .tmp-field {
    color: var(--tmp-text, #172033);
}

/* ── Firm Admin Card -- text must be visible on dark canvas ── */
.tmp-admin-card,
.tmp-firm-admin-card,
.tmp-admin-list-item {
    background: var(--tmp-surface, #ffffff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--tmp-heading, #172033);
}
.tmp-admin-card *,
.tmp-firm-admin-card *,
.tmp-admin-list-item * {
    color: var(--tmp-heading, #172033);
}

/* ── Run Detail ──────────────────────────────────────────────── */
.tmp-payroll-run-detail { }
.tmp-payroll-run-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-payroll-run-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.tmp-payroll-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    min-width: 120px;
    text-align: center;
}
.tmp-payroll-summary-stat span { font-size: .72rem; color: var(--tmp-muted, #667085); text-transform: uppercase; letter-spacing: .04em; }
.tmp-payroll-summary-stat strong { font-size: 1.1rem; font-weight: 800; color: var(--tmp-primary, #1f4f8f); }

/* Preparer grid */
.tmp-payroll-preparer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.tmp-payroll-prep-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    padding: 16px;
}
.tmp-payroll-prep-card__top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-payroll-prep-card__top strong { font-size: .95rem; }
.tmp-payroll-prep-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tmp-payroll-prep-card__stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .78rem;
}
.tmp-payroll-prep-card__stats span { color: var(--tmp-muted, #667085); }
.tmp-payroll-prep-card__stats strong { font-size: .88rem; }

/* ── Detail table ───────────────────────────────────────────── */
.tmp-payroll-detail-table-wrap {
    overflow-x: auto;
}
.tmp-payroll-detail-table-wrap .tmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
}
.tmp-payroll-detail-table-wrap .tmp-table th {
    background: var(--tmp-bg, #f5f7fb);
    padding: 9px 12px;
    text-align: left;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tmp-muted, #667085);
    border-bottom: 2px solid var(--tmp-border, #dce3ee);
    white-space: nowrap;
}
.tmp-payroll-detail-table-wrap .tmp-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    vertical-align: middle;
}
.tmp-payroll-detail-table-wrap .tmp-table tfoot td,
.tmp-payroll-detail-table-wrap .tmp-table tfoot th {
    padding: 11px 12px;
    border-top: 2px solid var(--tmp-border, #dce3ee);
    border-bottom: none;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-payroll-detail-table-wrap .tmp-table tr:last-child td { border-bottom: 0; }

/* Status pill variants */
.tmp-status-pill--draft    { background: color-mix(in srgb, #667085 12%, white); color: #667085; }
.tmp-status-pill--approved { background: color-mix(in srgb, #16a34a 12%, white); color: #16a34a; }
.tmp-status-pill--paid     { background: color-mix(in srgb, #1f4f8f 12%, white); color: #1f4f8f; }

@media (max-width: 760px) {
    .tmp-payroll-run-card { grid-template-columns: 1fr; }
    .tmp-payroll-run-card__stats { justify-content: flex-start; }
    .tmp-payroll-bank-grid { flex-direction: column; }
    .tmp-payroll-bank-card { min-width: 0; width: 100%; }
    .tmp-payroll-preparer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAYROLL PAYMENTS -- Pay Stubs, Earnings Widget, Gateway
   ============================================================ */

/* Earnings widget on preparer dashboard */
.tmp-earnings-widget { }
.tmp-earnings-highlight {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border: 1px solid color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
    border-radius: 8px;
    margin-bottom: 16px;
}
.tmp-earnings-highlight__stat { display: flex; flex-direction: column; gap: 2px; }
.tmp-earnings-highlight__stat span { font-size: .72rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .04em; }
.tmp-earnings-highlight__stat strong { font-size: 1rem; font-weight: 800; }
.tmp-earnings-history { display: grid; gap: 8px; }
.tmp-earnings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 7px;
    background: var(--tmp-bg,#f5f7fb);
    flex-wrap: wrap;
}
.tmp-earnings-row__info { display: flex; flex-direction: column; gap: 2px; }
.tmp-earnings-row__info strong { font-size: .88rem; }
.tmp-earnings-row__info span { font-size: .75rem; color: var(--tmp-muted,#667085); }
.tmp-earnings-row__amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tmp-earnings-row__amounts span { font-size: .75rem; color: var(--tmp-muted,#667085); }
.tmp-earnings-row__amounts strong { font-size: .92rem; }
.tmp-earnings-row__status { display: flex; align-items: center; gap: 8px; }

/* Pay stub list */
.tmp-pay-stub-list { display: grid; gap: 10px; }
.tmp-pay-stub-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface,#fff);
    flex-wrap: wrap;
}
.tmp-pay-stub-list-item > div { display: flex; flex-direction: column; gap: 4px; }

/* Pay stub document */
.tmp-pay-stub-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.tmp-pay-stub-doc {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 13px;
}
.tmp-pay-stub-doc__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 28px;
    background: var(--tmp-heading,#172033);
    color: #fff;
    gap: 20px;
    flex-wrap: wrap;
}
.tmp-pay-stub-doc__firm { display: flex; align-items: center; gap: 14px; }
.tmp-pay-stub-doc__firm strong { display: block; font-size: 1rem; }
.tmp-pay-stub-doc__firm span { font-size: .82rem; opacity: .75; }
.tmp-pay-stub-doc__title { text-align: right; }
.tmp-pay-stub-doc__title h2 { margin: 0 0 4px; font-size: 1.3rem; color: #fff; }
.tmp-pay-stub-doc__title span { font-size: .82rem; opacity: .7; }

.tmp-pay-stub-doc__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 20px 28px;
    background: #f8fafd;
    border-bottom: 1px solid #ddd;
}
.tmp-pay-stub-doc__meta > div { display: flex; flex-direction: column; gap: 3px; }
.tmp-pay-stub-doc__meta span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.tmp-pay-stub-doc__meta strong { font-size: .88rem; color: #172033; }

.tmp-pay-stub-doc__summary {
    padding: 20px 28px;
    border-bottom: 1px solid #ddd;
    display: grid;
    gap: 6px;
}
.tmp-pay-stub-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
}
.tmp-pay-stub-summary-row:last-child { border-bottom: none; }
.tmp-pay-stub-summary-row--deduction { color: #e53e3e; }
.tmp-pay-stub-summary-row--total {
    font-size: 1rem;
    font-weight: 800;
    padding-top: 10px;
    border-top: 2px solid #172033;
    border-bottom: none;
    margin-top: 6px;
}

.tmp-pay-stub-paid-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 28px;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
    border-bottom: 1px solid #bbf7d0;
    color: #16a34a;
    font-size: .85rem;
    font-weight: 700;
    flex-wrap: wrap;
}

.tmp-pay-stub-doc__lines { padding: 20px 28px; }
.tmp-pay-stub-doc__lines h4 { margin: 0 0 12px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.tmp-pay-stub-doc__lines table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tmp-pay-stub-doc__lines th {
    text-align: left; padding: 7px 8px;
    background: #f8fafd; border-bottom: 2px solid #ddd;
    color: #667085; font-size: .72rem; text-transform: uppercase;
}
.tmp-pay-stub-doc__lines td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; }
.tmp-pay-stub-footer { padding: 16px 28px; background: #f8fafd; font-size: .78rem; color: #667085; border-top: 1px solid #ddd; }

/* Mark as paid */
.tmp-mark-paid-form { margin-top: 8px; }
.tmp-mark-paid-toggle > summary { list-style: none; cursor: pointer; }
.tmp-mark-paid-toggle > summary::-webkit-details-marker { display: none; }
.tmp-mark-paid-fields { margin-top: 10px; padding: 14px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; border: 1px solid var(--tmp-border,#dce3ee); }
.tmp-mark-paid-fields .tmp-field { margin-bottom: 10px; }
.tmp-pay-paid-badge { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f0fdf4; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #16a34a; flex-wrap: wrap; }

/* Gateway settings */
.tmp-gateway-settings .tmp-gw-section { padding: 14px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; border: 1px solid var(--tmp-border,#dce3ee); margin-top: 4px; }

/* ============================================================
   CRM FIXES CSS -- Items 1, 4, 5, 6, 12
   ============================================================ */

/* Form Submissions list */
.tmp-sub-list { display: grid; gap: 8px; }
.tmp-sub-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface, #fff);
    flex-wrap: wrap;
}
.tmp-sub-list-item > div { display: flex; flex-direction: column; gap: 3px; }
.tmp-sub-list-item strong { font-size: .88rem; }
.tmp-sub-list-item span { font-size: .75rem; color: var(--tmp-muted, #667085); }

/* Support ticket thread */
.tmp-ticket-thread { margin-top: 24px; border-top: 1px solid var(--tmp-border, #dce3ee); padding-top: 18px; }
.tmp-ticket-thread h4 { margin: 0 0 14px; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tmp-muted, #667085); }
.tmp-ticket-msg {
    margin-bottom: 14px;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-ticket-msg--original { background: var(--tmp-bg, #f5f7fb); }
.tmp-ticket-msg--staff { background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white); border-color: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white); }
.tmp-ticket-msg--client { background: var(--tmp-surface, #fff); }
.tmp-ticket-msg__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .78rem; flex-wrap: wrap; }
.tmp-ticket-msg__meta strong { font-size: .85rem; }
.tmp-ticket-msg__meta span { color: var(--tmp-muted, #667085); }
.tmp-ticket-msg__body { font-size: .88rem; line-height: 1.5; }
.tmp-ticket-reply-form { margin-top: 14px; }
.tmp-ticket-reply-row { display: flex; gap: 10px; align-items: flex-end; }
.tmp-ticket-reply-row textarea { flex: 1 1 auto; border: 1px solid var(--tmp-border, #dce3ee); border-radius: 7px; padding: 9px 12px; font-size: .88rem; font-family: inherit; resize: none; min-height: 70px; }

/* ============================================================
   PREPARER DASHBOARD -- Clean Layout
   ============================================================ */
.tmp-preparer-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: clamp(16px,2vw,24px) clamp(16px,3vw,32px) 0;
    max-width: 1272px;
    margin: 0 auto;
}
.tmp-preparer-stat-card {
    flex: 1 1 140px;
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tmp-preparer-stat-card__val { font-size: 1.6rem; font-weight: 800; color: var(--tmp-primary,#1f4f8f); }
.tmp-preparer-stat-card__lbl { font-size: .75rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .05em; }

.tmp-preparer-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    max-width: 1272px;
    margin: 20px auto 40px;
    padding: 0 clamp(16px,3vw,32px);
    align-items: start;
}
@media (max-width: 860px) {
    .tmp-preparer-body { grid-template-columns: 1fr; }
}

.tmp-preparer-col { display: flex; flex-direction: column; gap: 16px; }

.tmp-preparer-section {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px 18px;
}
.tmp-preparer-section__title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tmp-muted,#667085);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tmp-preparer-section__link { font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tmp-primary,#1f4f8f); text-decoration: none; }
.tmp-preparer-empty { color: var(--tmp-muted,#667085); font-size: .85rem; padding: 8px 0; }

/* Quick action grid */
.tmp-preparer-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tmp-preparer-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    color: var(--tmp-heading,#172033);
    background: var(--tmp-bg,#f5f7fb);
    transition: background .12s, border-color .12s;
}
.tmp-preparer-action-btn:hover {
    background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white);
    border-color: var(--tmp-primary,#1f4f8f);
    color: var(--tmp-primary,#1f4f8f);
}
.tmp-preparer-action-btn span { font-size: 1rem; }

/* Message preview cards in preparer dashboard */
.tmp-msg-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-msg-preview-card:last-child { border-bottom: none; }
.tmp-msg-preview-card__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--tmp-primary,#1f4f8f);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tmp-msg-preview-card__body { flex: 1 1 auto; min-width: 0; }
.tmp-msg-preview-card__body strong { display: block; font-size: .85rem; }
.tmp-msg-preview-card__body span { font-size: .75rem; color: var(--tmp-muted,#667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Thread item role label */
.tmp-thread-item__role { font-size: .7rem; color: var(--tmp-muted,#667085); }

/* ============================================================
   FIRM SETUP WIZARD
   ============================================================ */
.tmp-setup-wizard {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px,4vw,48px) 20px;
}
.tmp-setup-wizard__header { text-align: center; margin-bottom: 32px; }
.tmp-setup-wizard__header h1 { margin: 0 0 10px; font-size: clamp(1.5rem,3vw,2rem); }
.tmp-setup-wizard__header p { color: var(--tmp-muted,#667085); margin: 0; }

.tmp-setup-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    position: relative;
}
.tmp-setup-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--tmp-border,#dce3ee);
    z-index: 0;
}
.tmp-setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    position: relative;
    z-index: 1;
}
.tmp-setup-step__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--tmp-border,#dce3ee);
    color: var(--tmp-muted,#667085);
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; font-weight: 800;
}
.tmp-setup-step.is-active .tmp-setup-step__num {
    background: var(--tmp-primary,#1f4f8f);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--tmp-primary,#1f4f8f) 20%,white);
}
.tmp-setup-step.is-done .tmp-setup-step__num {
    background: #16a34a;
    color: #fff;
}
.tmp-setup-step__lbl { font-size: .75rem; font-weight: 700; color: var(--tmp-muted,#667085); text-align: center; }
.tmp-setup-step.is-active .tmp-setup-step__lbl { color: var(--tmp-primary,#1f4f8f); }
.tmp-setup-step.is-done .tmp-setup-step__lbl { color: #16a34a; }

.tmp-setup-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 12px;
    padding: clamp(20px,3vw,32px);
}
.tmp-setup-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.tmp-setup-card > p { color: var(--tmp-muted,#667085); margin: 0 0 20px; }
.tmp-setup-card--complete { text-align: center; padding: 40px; }
.tmp-setup-check {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}

.tmp-setup-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.tmp-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    background: var(--tmp-bg,#f5f7fb);
    transition: border-color .13s, background .13s;
    min-height: 60px;
}
.tmp-provider-card input[type="radio"] { display: none; }
.tmp-provider-card:hover { border-color: var(--tmp-primary,#1f4f8f); }
.tmp-provider-card.is-selected {
    border-color: var(--tmp-primary,#1f4f8f);
    background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white);
}
.tmp-provider-card__name { font-size: .82rem; font-weight: 700; color: var(--tmp-heading,#172033); }
.tmp-setup-btn { width: 100%; margin-top: 20px; font-size: .95rem; padding: 13px; }

/* Firm Settings tabs */
.tmp-settings-tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--tmp-border,#dce3ee);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tmp-settings-tab {
    padding: 10px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--tmp-muted,#667085);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .12s, border-color .12s;
}
.tmp-settings-tab:hover { color: var(--tmp-heading,#172033); }
.tmp-settings-tab.is-active { color: var(--tmp-primary,#1f4f8f); border-bottom-color: var(--tmp-primary,#1f4f8f); }

.tmp-settings-connected-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    font-size: .84rem;
    color: #15803d;
    margin-bottom: 16px;
}

.tmp-email-hint { margin-top: 10px; }

/* ============================================================
   FIRM DASHBOARD -- Centered Branded Icon Quick-Nav
   ============================================================ */
.tmp-firm-quicknav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px 28px;
    max-width: 900px;
    margin: 0 auto;
}
.tmp-firm-quicknav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 90px;
    height: 90px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--qn-color, #d6a84f) 12%, white);
    border: 2px solid color-mix(in srgb, var(--qn-color, #d6a84f) 30%, white);
    text-decoration: none;
    color: var(--tmp-heading, #172033);
    font-size: .74rem;
    font-weight: 700;
    transition: background .14s, border-color .14s, transform .12s;
    text-align: center;
}
.tmp-firm-quicknav__btn:hover {
    background: var(--qn-color, #d6a84f);
    border-color: var(--qn-color, #d6a84f);
    color: #fff;
    transform: translateY(-2px);
}
.tmp-firm-quicknav__icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* ============================================================
   PORTAL PILL NAV -- for preparer/client roles
   ============================================================ */
.portal-pill-nav {
    width: 100%;
    background: var(--twlcrm-portal-nav-bg, #111);
    border-bottom: 3px solid var(--twlcrm-accent, #d6a84f);
    position: sticky;
    top: 0;
    z-index: 100;
}
.portal-pill-nav__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.portal-pill-nav__inner::-webkit-scrollbar { display: none; }
.portal-pill-nav__brand img {
    max-height: 32px;
    max-width: 100px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 8px;
}
.portal-pill-nav__links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.portal-pill-nav__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .02em;
    transition: background .13s, border-color .13s, color .13s;
    min-height: 34px;
}
.portal-pill-nav__btn:hover,
.portal-pill-nav__btn.is-active {
    background: var(--twlcrm-accent, #d6a84f);
    border-color: var(--twlcrm-accent, #d6a84f);
    color: #111;
}

/* ============================================================
   PREPARER DASHBOARD -- Notification Alert
   ============================================================ */
.tmp-preparer-notif-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border: 1px solid color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
    border-left: 4px solid var(--tmp-primary,#1f4f8f);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tmp-heading,#172033);
    font-size: .85rem;
    margin-bottom: 12px;
    transition: background .13s;
}
.tmp-preparer-notif-alert:hover {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
}
.tmp-preparer-notif-alert__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tmp-primary,#1f4f8f);
    flex-shrink: 0;
    animation: tmp-pulse 1.5s infinite;
}
@keyframes tmp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
}
.tmp-preparer-notif-alert__arrow {
    margin-left: auto;
    color: var(--tmp-primary,#1f4f8f);
    font-weight: 800;
}

/* Payment method picker (preparer dashboard) */
.tmp-payment-method-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tmp-payment-method-pill {
    cursor: pointer;
}
.tmp-payment-method-pill input { display: none; }
.tmp-payment-method-pill span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--tmp-muted,#667085);
    background: var(--tmp-bg,#f5f7fb);
    transition: all .13s;
}
.tmp-payment-method-pill:hover span,
.tmp-payment-method-pill.is-selected span,
.tmp-payment-method-pill input:checked + span {
    border-color: var(--tmp-primary,#1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
    color: var(--tmp-primary,#1f4f8f);
}

/* ============================================================
   PLAN MANAGEMENT -- Pricing Grid
   ============================================================ */
.tmp-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.tmp-plan-card {
    background: var(--tmp-surface,#fff);
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow .15s, border-color .15s;
}
.tmp-plan-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); border-color: var(--plan-color,#1f4f8f); }
.tmp-plan-card.is-current { border-color: var(--plan-color,#1f4f8f); border-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-color,#1f4f8f) 12%, white); }

.tmp-plan-card__badge {
    background: var(--plan-color,#1f4f8f);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 12px;
    text-align: center;
}
.tmp-plan-card__header {
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-plan-card__header h3 { margin: 0 0 10px; font-size: 1rem; color: var(--plan-color,#1f4f8f); }
.tmp-plan-card__price { display: flex; align-items: baseline; gap: 3px; }
.tmp-plan-card__amount { font-size: 2rem; font-weight: 800; color: var(--tmp-heading,#172033); }
.tmp-plan-card__period { font-size: .82rem; color: var(--tmp-muted,#667085); }
.tmp-plan-card__setup { font-size: .75rem; color: var(--tmp-muted,#667085); margin: 6px 0 0; }

.tmp-plan-card__features {
    list-style: none;
    padding: 14px 20px;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tmp-plan-card__features li { font-size: .82rem; color: var(--tmp-text,#172033); }
.tmp-plan-card__action { padding: 14px 20px 18px; }
.tmp-plan-card__action .tmp-button { justify-content: center; font-size: .85rem; }

/* ============================================================
   Firm Branding Variable Bridge
   Keeps every portal surface tied to the firm's saved colors.
   ============================================================ */
body.twlcrm-crm-page,
body.twlcrm-crm-page .site-main,
body.twlcrm-crm-page .portal-layout,
body.twlcrm-crm-page .portal-content {
    background: var(--tmp-dark-bg, var(--tmp-portal-canvas, #050505));
    color: var(--tmp-dark-text, #ffffff);
}

body:not(.twlcrm-crm-page),
.tmp-crm:not(.tmp-client-dashboard):not(.tmp-preparer-dashboard):not(.tmp-firm-dashboard):not(.tmp-tax-return):not(.tmp-flow-page) {
    background-color: var(--tmp-light-bg, var(--tmp-bg, #f5f7fb));
}

.tmp-client-dashboard,
.tmp-preparer-dashboard,
.tmp-firm-dashboard,
.tmp-tax-return,
.tmp-flow-page {
    background: var(--tmp-dark-bg, var(--tmp-portal-canvas, #050505));
    color: var(--tmp-dark-text, #ffffff);
}

.pdnav,
.portal-pill-nav,
.portal-dropdown-nav,
.portal-sidebar,
.portal-mobile-bar,
.portal-topbar,
.portal-topbar--firm {
    background: var(--tmp-dark-nav, var(--tmp-portal-nav-bg, #111111)) !important;
    color: var(--tmp-dark-text, var(--tmp-portal-nav-text, #ffffff));
}

.pdnav__item--link,
.pdnav__toggle,
.portal-pill-nav__btn,
.portal-dropdown-nav__link,
.portal-dropdown-nav__toggle,
.portal-sidebar__link,
.portal-sidebar__group-toggle,
.portal-topbar__nav a,
.portal-firm-nav__link,
.portal-firm-nav__toggle {
    color: var(--tmp-dark-text, var(--tmp-portal-nav-text, #ffffff));
}

.pdnav__dropdown,
.portal-dropdown-nav__menu,
.portal-firm-nav__dropdown,
.portal-sidebar__submenu {
    background: var(--tmp-dark-card, var(--tmp-dark-nav, #111111));
    color: var(--tmp-dark-text, #ffffff);
}

.tmp-crm .tmp-card,
.tmp-crm .tmp-stat-card,
.tmp-crm .tmp-dashboard-card,
.tmp-crm .tmp-panel,
.tmp-crm .tmp-section,
.tmp-crm .tmp-form-card,
.tmp-crm .tmp-modal,
.tmp-crm .tmp-tab-panel,
.tmp-crm table,
.tmp-client-profile table,
.tmp-client-documents table,
.tmp-signature-inline-card,
.tmp-bank-consent-card {
    background: var(--tmp-light-card, var(--tmp-surface, #ffffff));
    color: var(--tmp-light-text, var(--tmp-text, #172033));
    border-color: var(--tmp-border, #dce3ee);
}
/* Section band must always use the portal canvas, never the card surface */
.tmp-crm .tmp-section-band {
    background: var(--tmp-portal-canvas, #050505) !important;
    color: var(--tmp-section-header-text, #ffffff) !important;
}

.tmp-crm input,
.tmp-crm select,
.tmp-crm textarea,
.tmp-client-profile input,
.tmp-client-profile select,
.tmp-client-profile textarea,
.tmp-client-documents input,
.tmp-client-documents select,
.tmp-client-documents textarea {
    background: var(--tmp-input-bg, var(--tmp-light-card, #ffffff));
    color: var(--tmp-light-text, var(--tmp-text, #172033));
    border-color: var(--tmp-input-border, var(--tmp-border, #dce3ee));
}

.tmp-crm th,
.tmp-client-profile th,
.tmp-client-documents th {
    background: var(--tmp-table-header-bg, color-mix(in srgb, var(--tmp-primary-color, #1f4f8f) 7%, var(--tmp-light-card, #ffffff)));
    color: var(--tmp-light-heading, var(--tmp-heading, #172033));
}

.tmp-crm h1,
.tmp-crm h2,
.tmp-crm h3,
.tmp-client-profile h1,
.tmp-client-profile h2,
.tmp-client-documents h2,
.tmp-client-documents h3 {
    color: var(--tmp-light-heading, var(--tmp-heading, #172033));
}

.tmp-client-dashboard > .tmp-portal-hero,
.tmp-preparer-dashboard > .tmp-portal-hero,
.tmp-firm-dashboard > .tmp-portal-hero,
.tmp-tax-return > .tmp-portal-hero,
.tmp-flow-page > .tmp-portal-hero,
.tmp-client-dashboard > .tmp-portal-hero h1,
.tmp-client-dashboard > .tmp-portal-hero h2,
.tmp-client-dashboard > .tmp-portal-hero p,
.tmp-preparer-dashboard > .tmp-portal-hero h1,
.tmp-preparer-dashboard > .tmp-portal-hero h2,
.tmp-preparer-dashboard > .tmp-portal-hero p,
.tmp-firm-dashboard > .tmp-portal-hero h1,
.tmp-firm-dashboard > .tmp-portal-hero h2,
.tmp-firm-dashboard > .tmp-portal-hero p,
.tmp-tax-return > .tmp-portal-hero h1,
.tmp-tax-return > .tmp-portal-hero h2,
.tmp-tax-return > .tmp-portal-hero p,
.tmp-flow-page > .tmp-portal-hero h1,
.tmp-flow-page > .tmp-portal-hero h2,
.tmp-flow-page > .tmp-portal-hero p {
    color: var(--tmp-dark-heading, var(--tmp-dark-text, #ffffff));
}

/* Operations dashboard redesign */
.tmp-ops-dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
}

.tmp-ops-hero {
    min-height: 225px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
    align-items: center;
    gap: 18px;
    padding: 22px;
    border-radius: 18px;
    background: var(--tmp-card-bg, #fff);
    border: 1px solid var(--tmp-border, #d0d7e2);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.tmp-ops-hero__copy h1 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    color: var(--tmp-heading, #061a3a);
}

.tmp-ops-hero__copy p {
    max-width: 720px;
    margin: 0;
    color: var(--tmp-text, #53627a);
    font-size: 17px;
}

.tmp-ops-logo {
    display: block;
    max-width: 150px;
    max-height: 58px;
    object-fit: contain;
    margin-bottom: 8px;
}

.tmp-ops-metrics,
.tmp-ops-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tmp-ops-metrics > div,
.tmp-ops-summary > div {
    background: var(--tmp-bg, #f6f8fc);
    border: 1px solid var(--tmp-border, #d0d7e2);
    border-radius: 14px;
    padding: 14px;
}

.tmp-ops-metrics span,
.tmp-ops-summary span {
    display: block;
    color: var(--tmp-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tmp-ops-metrics strong,
.tmp-ops-summary strong {
    display: block;
    margin-top: 6px;
    color: var(--tmp-heading, #061a3a);
    font-size: 28px;
    line-height: 1.1;
}

.tmp-ops-two-col,
.tmp-ops-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tmp-ops-panel {
    background: var(--tmp-card-bg, #fff);
    border: 1px solid var(--tmp-border, #d0d7e2);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.tmp-ops-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tmp-ops-panel__head h2 {
    margin: 0;
    color: var(--tmp-heading, #061a3a);
    font-size: 21px;
}

.tmp-ops-panel__head a {
    color: var(--tmp-primary-color, #1f4f8f);
    font-weight: 800;
    text-decoration: none;
}

.tmp-ops-task-list,
.tmp-ops-announcements {
    display: grid;
    gap: 10px;
}

.tmp-ops-task-list a,
.tmp-ops-announcements > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px;
    border-radius: 12px;
    background: var(--tmp-bg, #f6f8fc);
    border: 1px solid var(--tmp-border, #d0d7e2);
    color: var(--tmp-text, #53627a);
    text-decoration: none;
}

.tmp-ops-task-list strong {
    color: var(--tmp-heading, #061a3a);
    font-size: 22px;
    min-width: 34px;
    text-align: right;
}

.tmp-ops-announcements > div {
    display: block;
}

.tmp-ops-announcements strong {
    display: block;
    color: var(--tmp-heading, #061a3a);
}

.tmp-ops-announcements span {
    display: block;
    margin-top: 3px;
    color: var(--tmp-text, #53627a);
}

.tmp-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    border-radius: 999px;
    padding: 5px 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.tmp-priority-high { background: #dc2626; }
.tmp-priority-med { background: #b45309; }
.tmp-priority-low { background: #2563eb; }

.tmp-ops-action-grid,
.tmp-ops-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 12px;
}

.tmp-ops-action {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    border-radius: 14px;
    background: var(--tmp-bg, #f6f8fc);
    border: 1px solid var(--tmp-border, #d0d7e2);
    color: var(--tmp-heading, #061a3a);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.tmp-ops-action:hover {
    transform: translateY(-2px);
    border-color: var(--tmp-primary-color, #1f4f8f);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
}

.tmp-ops-action__mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tmp-primary-color, #1f4f8f);
    color: var(--tmp-button-text, #fff);
    font-weight: 900;
}

.tmp-ops-action strong,
.tmp-ops-action small {
    display: block;
}

.tmp-ops-action small {
    margin-top: 2px;
    color: var(--tmp-muted, #667085);
    font-size: 12px;
}

.tmp-ops-pipeline {
    display: grid;
    grid-template-columns: repeat(13, minmax(116px, 1fr));
    gap: 0;
    overflow-x: auto;
    padding: 4px 0 10px;
}

.tmp-ops-stage {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 88px;
    padding: 12px 22px 12px 14px;
    background: var(--tmp-bg, #f6f8fc);
    border: 1px solid var(--tmp-border, #d0d7e2);
    color: var(--tmp-heading, #061a3a);
    text-decoration: none;
}

.tmp-ops-stage:first-child {
    border-radius: 14px 0 0 14px;
}

.tmp-ops-stage:last-child {
    border-radius: 0 14px 14px 0;
}

.tmp-ops-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 20px;
    height: 20px;
    background: inherit;
    border-top: 1px solid var(--tmp-border, #d0d7e2);
    border-right: 1px solid var(--tmp-border, #d0d7e2);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
}

.tmp-ops-stage__count {
    color: var(--tmp-primary-color, #1f4f8f);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.tmp-ops-stage__label {
    margin-top: 6px;
    color: var(--tmp-text, #53627a);
    font-size: 12px;
    font-weight: 800;
}

.tmp-ops-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.tmp-ops-copy-field {
    width: 100%;
    margin-top: 12px;
    border-radius: 10px;
    border: 1px solid var(--tmp-border, #d0d7e2);
    background: var(--tmp-bg, #f6f8fc);
    color: var(--tmp-text, #53627a);
    padding: 11px 12px;
}

@media (max-width: 900px) {
    .tmp-ops-hero,
    .tmp-ops-two-col,
    .tmp-ops-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .tmp-ops-hero {
        padding: 16px;
    }

    .tmp-ops-metrics,
    .tmp-ops-summary {
        grid-template-columns: 1fr;
    }

    .tmp-ops-panel {
        padding: 14px;
    }
}

/* Premium member workspace dashboard */
.tmp-member-workspace {
    --tmp-workspace-bg: var(--tmp-bg, #f8f4ef);
    --tmp-workspace-card: var(--tmp-card-bg, #ffffff);
    --tmp-workspace-red: var(--tmp-primary-color, #b5121b);
    --tmp-workspace-gold: var(--tmp-accent-color, #d4a734);
    --tmp-workspace-text: var(--tmp-text, #253043);
    --tmp-workspace-heading: var(--tmp-heading, #111827);
    --tmp-workspace-border: color-mix(in srgb, var(--tmp-border, #e1d6c7) 80%, transparent);
    background:
        radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--tmp-workspace-gold) 14%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--tmp-workspace-bg) 90%, #fff), var(--tmp-workspace-bg));
    border-radius: 24px;
    padding: 22px;
}

.tmp-portal-workspace-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    padding: 10px 4px 18px;
    scrollbar-width: thin;
}

.tmp-portal-workspace-nav a {
    flex: 0 0 auto;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--tmp-workspace-card);
    border: 1px solid var(--tmp-workspace-border);
    color: var(--tmp-workspace-heading);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.tmp-portal-workspace-nav a:first-child {
    background: var(--tmp-workspace-gold);
    color: #141414;
    border-color: transparent;
}

.tmp-member-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: stretch;
    padding: 28px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-workspace-red) 12%, transparent), transparent 54%),
        linear-gradient(135deg, var(--tmp-workspace-card), color-mix(in srgb, var(--tmp-workspace-gold) 8%, var(--tmp-workspace-card)));
    border: 1px solid var(--tmp-workspace-border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
}

.tmp-member-welcome__identity h1 {
    margin: 4px 0 12px;
    color: var(--tmp-workspace-heading);
    font-size: clamp(32px, 5vw, 54px);
    line-height: .98;
    letter-spacing: 0;
}

.tmp-member-welcome__identity p:not(.tmp-page-kicker) {
    max-width: 760px;
    margin: 0;
    color: var(--tmp-workspace-text);
    font-size: 18px;
    line-height: 1.55;
}

.tmp-member-logo {
    display: block;
    max-width: 160px;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}

.tmp-member-focus {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    min-height: 200px;
    padding: 24px;
    border-radius: 22px;
    background: var(--tmp-workspace-red);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.tmp-member-focus span,
.tmp-member-focus small {
    color: rgba(255,255,255,.82);
    font-weight: 800;
}

.tmp-member-focus strong {
    color: #fff;
    font-size: 48px;
    line-height: 1;
}

.tmp-member-focus .tmp-button {
    margin-top: 10px;
    background: #fff;
    color: var(--tmp-workspace-red);
    border-color: #fff;
}

.tmp-progress-center,
.tmp-member-section {
    background: var(--tmp-workspace-card);
    border: 1px solid var(--tmp-workspace-border);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
}

.tmp-progress-center__head,
.tmp-member-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.tmp-progress-center h2,
.tmp-member-section h2,
.tmp-feature-card h2 {
    margin: 0;
    color: var(--tmp-workspace-heading);
    font-size: 28px;
}

.tmp-progress-center__head strong {
    color: var(--tmp-workspace-red);
    font-size: 22px;
}

.tmp-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tmp-workspace-gold) 18%, #fff);
}

.tmp-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tmp-workspace-gold), var(--tmp-workspace-red));
}

.tmp-progress-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.tmp-progress-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--tmp-workspace-bg) 64%, #fff);
    border: 1px solid var(--tmp-workspace-border);
    color: var(--tmp-workspace-heading);
    font-weight: 800;
    text-decoration: none;
}

.tmp-progress-list a span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid var(--tmp-workspace-gold);
    background: #fff;
}

.tmp-progress-list a.is-complete span {
    background: var(--tmp-workspace-gold);
    box-shadow: inset 0 0 0 5px #fff;
}

.tmp-member-section__head a {
    color: var(--tmp-workspace-red);
    font-weight: 900;
    text-decoration: none;
}

.tmp-member-workspace .tmp-ops-action-grid,
.tmp-member-workspace .tmp-ops-resource-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tmp-member-workspace .tmp-ops-action {
    min-height: 92px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-workspace-red) 7%, #fff), #fff);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.tmp-member-workspace .tmp-ops-action__mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--tmp-workspace-red);
    color: #fff;
}

.tmp-member-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tmp-priority-feed,
.tmp-announcement-feed {
    display: grid;
    gap: 12px;
}

.tmp-priority-feed a,
.tmp-announcement-feed article {
    display: block;
    padding: 18px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--tmp-workspace-bg) 62%, #fff);
    border-left: 5px solid var(--tmp-workspace-gold);
    color: var(--tmp-workspace-text);
    text-decoration: none;
}

.tmp-priority-feed span,
.tmp-announcement-feed small {
    display: block;
    margin-bottom: 6px;
    color: var(--tmp-workspace-red);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tmp-priority-feed strong,
.tmp-announcement-feed strong {
    display: block;
    color: var(--tmp-workspace-heading);
    font-size: 18px;
}

.tmp-announcement-feed p {
    margin: 6px 0 10px;
    color: var(--tmp-workspace-text);
}

.tmp-production-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
}

.tmp-ops-snapshot {
    display: grid;
    gap: 8px;
    min-height: 110px;
    align-content: center;
    padding: 18px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--tmp-workspace-red) 6%, #fff);
    color: var(--tmp-workspace-heading);
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--tmp-workspace-border);
}

.tmp-ops-snapshot span {
    color: var(--tmp-workspace-text);
    font-weight: 900;
}

.tmp-ops-snapshot strong {
    color: var(--tmp-workspace-red);
    font-size: 40px;
    line-height: 1;
}

.tmp-feature-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-workspace-gold) 13%, #fff), #fff);
}

.tmp-feature-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.tmp-feature-stats div {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--tmp-workspace-border);
}

.tmp-feature-stats span {
    display: block;
    color: var(--tmp-workspace-text);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tmp-feature-stats strong {
    display: block;
    margin-top: 6px;
    color: var(--tmp-workspace-heading);
    font-size: 20px;
}

.tmp-member-workspace .tmp-ops-copy-field {
    border-radius: 16px;
    background: #fff;
    border-color: var(--tmp-workspace-border);
}

@media (max-width: 900px) {
    .tmp-member-welcome,
    .tmp-member-two-col {
        grid-template-columns: 1fr;
    }

    .tmp-progress-list,
    .tmp-feature-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .tmp-member-workspace {
        padding: 14px;
        border-radius: 18px;
    }

    .tmp-member-welcome,
    .tmp-progress-center,
    .tmp-member-section {
        padding: 18px;
        border-radius: 20px;
    }
}

/* ============================================================
   FIRM & PREPARER DASHBOARD -- Shared Components
   Uses the same base classes as client dashboard for consistency
   ============================================================ */

/* Priority list -- used in both dashboards */
.tmp-priority-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.tmp-priority-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface, #ffffff) !important;
    text-decoration: none;
    color: var(--tmp-heading, #172033) !important;
    font-size: .88rem;
    transition: background .12s, border-color .12s;
}
.tmp-priority-item:hover {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border-color: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
}
.tmp-priority-item__tag {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tmp-muted, #667085);
    white-space: nowrap;
    min-width: 80px;
}
.tmp-priority-item strong { font-size: .88rem; }

/* Overview stat rows inside flow cards */
.tmp-overview-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    font-size: .88rem;
    color: var(--tmp-heading, #172033);
}
.tmp-overview-stat:last-child { border-bottom: none; }
.tmp-overview-stat span { color: var(--tmp-muted, #667085) !important; }
.tmp-overview-stat strong { font-weight: 700; color: var(--tmp-heading, #172033) !important; }

/* Notification alert bar */
.tmp-notif-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border: 1px solid color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
    border-left: 4px solid var(--tmp-primary, #1f4f8f);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tmp-heading, #172033);
    font-size: .88rem;
    margin: 0 0 4px;
    transition: background .12s;
}
.tmp-notif-alert:hover { background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white); }
.tmp-notif-alert__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    flex-shrink: 0;
    animation: tmp-pulse 1.5s infinite;
}
@keyframes tmp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
}

/* Firm dashboard production snapshot -- clickable status steps */
.tmp-firm-dashboard .tmp-status-step,
.tmp-preparer-dashboard .tmp-status-step {
    text-decoration: none;
    color: inherit;
}
.tmp-firm-dashboard .tmp-status-step:hover,
.tmp-preparer-dashboard .tmp-status-step:hover {
    transform: translateY(-2px);
}

/* ============================================================
   MESSAGES -- Type choice (SMS vs In-portal)
   ============================================================ */
.tmp-msg-type-choice {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tmp-msg-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-bg,#f5f7fb);
    color: var(--tmp-muted,#667085);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
    transition: all .13s;
}
.tmp-msg-type-btn.is-active,
.tmp-msg-type-btn:hover {
    border-color: var(--tmp-primary,#1f4f8f);
    background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white);
    color: var(--tmp-primary,#1f4f8f);
}

/* ============================================================
   PDNAV -- Remove icon gap, ensure text-only buttons look clean
   ============================================================ */
.pdnav__toggle:empty + .pdnav__caret { margin-left: 0; }
.pdnav__toggle svg.pdnav__caret { margin-left: 4px; }


/* ============================================================
   FIRM BODY SECTION -- Replaces tmp-firm-page-content
   Full-width dark canvas with centered white content inside
   ============================================================ */
.tmp-firm-body-section {
    width: 100%;
    background: var(--tmp-portal-canvas, var(--tmp-canvas-bg, #111111));
    padding: clamp(24px, 4vw, 48px) 0 60px;
    color: var(--tmp-font-dark-bg, #ffffff);
}
.tmp-firm-body-section > * {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
}
/* White content cards inside the dark section look correct */
.tmp-firm-body-section .tmp-flow-card,
.tmp-firm-body-section .tmp-card,
.tmp-firm-body-section form,
.tmp-firm-body-section .tmp-list-tools,
.tmp-firm-body-section table,
.tmp-firm-body-section .tmp-table-wrap,
.tmp-firm-body-section .tmp-pagination {
    color: var(--tmp-heading, #172033);
}
.tmp-firm-body-section .tmp-flow-card *,
.tmp-firm-body-section .tmp-card * {
    color: inherit;
}
/* Ensure headings inside dark section are light */
.tmp-firm-body-section > h1,
.tmp-firm-body-section > h2,
.tmp-firm-body-section > h3,
.tmp-firm-body-section > p {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* ============================================================
   PAGE-INTRO full-width centering fix
   ============================================================ */
.tmp-firm-page .tmp-page-intro,
.tmp-manage-clients .tmp-page-intro,
.tmp-add-client .tmp-page-intro,
.tmp-manage-preparers .tmp-page-intro {
    width: 100%;
    background: var(--tmp-surface, #ffffff);
    padding: clamp(24px, 4vw, 44px) 20px;
    text-align: center;
}
.tmp-firm-page .tmp-page-intro__inner,
.tmp-manage-clients .tmp-page-intro__inner,
.tmp-add-client .tmp-page-intro__inner,
.tmp-manage-preparers .tmp-page-intro__inner {
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================================
   FIRM INNER PAGES -- add hero spacing when hero added dynamically  
   ============================================================ */
.tmp-firm-inner-page {
    width: 100%;
}
.tmp-firm-inner-page .tmp-portal-hero--image-only {
    display: block;
    width: 100%;
    height: calc(100vw * var(--tmp-hero-ratio, 0.25));
    max-height: 340px;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}


/* ============================================================
   FIRM DASHBOARD -- Center quick links and production snapshot
   ============================================================ */
.tmp-firm-dashboard .tmp-client-link-grid {
    justify-content: center !important;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.tmp-firm-dashboard .tmp-dashboard-section {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
}
.tmp-firm-dashboard .tmp-status-tracker {
    width: 100%;
    display: flex;
    justify-content: center;
}
.tmp-firm-dashboard .tmp-status-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.tmp-firm-dashboard .tmp-dashboard-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}
@media (max-width: 760px) {
    .tmp-firm-dashboard .tmp-dashboard-split { grid-template-columns: 1fr; }
}

/* Firm Settings list inside flow-card -- clean link rows */
.tmp-firm-dashboard .tmp-priority-item:not([href]) {
    cursor: default;
}

/* ============================================================
   FLOW CARD -- Force light theme inside dark canvas
   ============================================================ */
.tmp-client-experience .tmp-flow-card,
.tmp-firm-dashboard .tmp-flow-card {
    background: var(--tmp-surface, #ffffff) !important;
    border: 1px solid var(--tmp-border, #dce3ee) !important;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-client-experience .tmp-flow-card h3,
.tmp-firm-dashboard .tmp-flow-card h3 {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-client-experience .tmp-flow-card strong,
.tmp-firm-dashboard .tmp-flow-card strong {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-client-experience .tmp-flow-card span,
.tmp-firm-dashboard .tmp-flow-card span {
    color: var(--tmp-muted, #667085) !important;
}
/* Override for status pills and tags that need their own colors */
.tmp-client-experience .tmp-flow-card .tmp-status-pill,
.tmp-client-experience .tmp-flow-card .tmp-priority-item__tag {
    color: inherit !important;
}

.tmp-firm-dash-inner {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 40px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) 0 60px;
}

/* ============================================================
   PRIORITY ITEMS & FIRM SETTINGS LINKS -- force white bg in cards
   ============================================================ */
.tmp-flow-card .tmp-priority-item,
.tmp-flow-card a.tmp-priority-item {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-flow-card .tmp-priority-item:hover {
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 6%, white) !important;
}
.tmp-flow-card .tmp-priority-item strong {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-flow-card .tmp-priority-item .tmp-priority-item__tag {
    color: var(--tmp-muted, #667085) !important;
}

/* ============================================================
   MESSAGES -- Full 2-panel inbox layout
   ============================================================ */
.tmp-messages-outer {
    width: 100%;
    min-height: calc(100vh - 300px);
    background: #ffffff !important;
}
.tmp-messages-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: calc(100vh - 300px);
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid #dce3ee;
    background: #ffffff !important;
}
@media (max-width: 680px) {
    .tmp-messages-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.tmp-messages-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #dce3ee;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    position: sticky;
    top: 60px;
}
.tmp-messages-compose-btn {
    margin: 14px;
    width: calc(100% - 28px);
    text-align: center;
    justify-content: center;
    font-size: .85rem;
}
.tmp-thread-list {
    flex: 1 1 auto;
    overflow-y: auto;
}
.tmp-thread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #dce3ee;
    text-decoration: none;
    color: #172033 !important;
    transition: background .12s;
    cursor: pointer;
    background: #ffffff !important;
}
.tmp-thread-item:hover { background: #f5f7fb !important; }
.tmp-thread-item.is-active {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 8%, white);
    border-left: 3px solid var(--tmp-primary, #1f4f8f);
}
.tmp-thread-item__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tmp-thread-item__body { flex: 1 1 auto; min-width: 0; }
.tmp-thread-item__name {
    font-size: .88rem;
    font-weight: 700;
    color: #172033 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tmp-thread-unread-badge {
    background: var(--tmp-primary, #1f4f8f);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}
.tmp-thread-item__role { font-size: .72rem; color: var(--tmp-muted, #667085); }
.tmp-thread-item__time { font-size: .7rem; color: var(--tmp-muted, #667085); white-space: nowrap; margin-left: auto; }
.tmp-messages-empty-hint {
    padding: 20px 14px;
    font-size: .84rem;
    color: #667085 !important;
    text-align: center;
    background: #f5f7fb !important;
}

/* Main area */
.tmp-messages-main {
    background: #f5f7fb !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.tmp-messages-compose {
    background: #ffffff !important;
    padding: clamp(20px, 3vw, 32px);
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
    border-radius: 12px;
    border: 1px solid #dce3ee;
}
.tmp-messages-compose h3 {
    margin: 0 0 16px;
    color: #172033 !important;
    font-size: 1.1rem;
}

/* Thread view */
.tmp-thread-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 280px);
}
.tmp-thread-view__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #ffffff !important;
    border-bottom: 1px solid #dce3ee;
    position: sticky;
    top: 0;
    z-index: 10;
}
.tmp-thread-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tmp-thread-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 420px);
    min-height: 200px;
    background: #f5f7fb !important;
}
.tmp-message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.5;
}
.tmp-message-bubble--sent {
    background: var(--tmp-primary, #1f4f8f);
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.tmp-message-bubble--received {
    background: var(--tmp-surface, #ffffff);
    color: var(--tmp-heading, #172033);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-message-bubble__meta {
    font-size: .7rem;
    opacity: .7;
    margin-top: 4px;
    display: block;
}
.tmp-thread-reply {
    padding: 14px 20px;
    background: var(--tmp-surface, #ffffff);
    border-top: 1px solid var(--tmp-border, #dce3ee);
    display: flex;
    gap: 10px;
    align-items: flex-end;
    position: sticky;
    bottom: 0;
}
.tmp-thread-reply textarea {
    flex: 1 1 auto;
    min-height: 60px;
    resize: vertical;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .9rem;
    font-family: inherit;
}
.tmp-thread-reply textarea:focus {
    outline: none;
    border-color: var(--tmp-primary, #1f4f8f);
}

/* No-thread placeholder */
.tmp-messages-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--tmp-muted, #667085);
    text-align: center;
    gap: 12px;
}
.tmp-messages-placeholder svg { opacity: .3; }

/* ============================================================
   EMAIL METHOD PICKER -- SuiteDash-style card list
   ============================================================ */
.tmp-email-method-card {
    display: block;
    border: 2px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .13s, background .13s;
    overflow: hidden;
    background: var(--tmp-surface, #fff);
}
.tmp-email-method-card:hover { border-color: var(--tmp-primary, #1f4f8f); }
.tmp-email-method-card.is-active {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 4%, white);
}
.tmp-email-method-card__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}
.tmp-email-method-card__icon { font-size: 1.4rem; flex-shrink: 0; }
.tmp-email-method-card__body { flex: 1 1 auto; }
.tmp-email-method-card__body strong { font-size: .92rem; color: var(--tmp-heading, #172033); }
.tmp-email-method-card__body p { margin: 3px 0 0; font-size: .8rem; color: var(--tmp-muted, #667085); }
.tmp-email-method-card__check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--tmp-border, #dce3ee);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.tmp-email-method-card.is-active .tmp-email-method-card__check {
    background: var(--tmp-primary, #1f4f8f);
    border-color: var(--tmp-primary, #1f4f8f);
}
.tmp-email-method-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-left: 6px;
    vertical-align: middle;
}
.tmp-smtp-inline {
    padding: 14px 16px 16px;
    background: var(--tmp-bg, #f5f7fb);
    border-top: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-smtp-hint {
    font-size: 12px;
    color: var(--tmp-muted, #667085);
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #fff8e1;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
}


/* ============================================================
   HERO IMAGE -- GLOBAL OVERLAY REMOVAL
   Ensures firm banner images show clean with no dark gradient
   overlay on ANY inner portal page. Placed last so it wins.
   ============================================================ */
.tmp-portal-hero--image-only,
.tmp-portal-hero--image-only::before,
[class*="tmp-"] > .tmp-portal-hero--image-only {
    background-image: var(--tmp-hero-image, none) !important;
    background: var(--tmp-hero-image, none) center center / cover no-repeat !important;
    background-color: var(--tmp-primary-dark) !important;
}

/* ============================================================
   CANVAS COLOR -- GLOBAL FIX
   All dark canvas sections use the firm's portal canvas color.
   This overrides any hardcoded fallbacks.
   ============================================================ */
.tmp-client-experience,
.tmp-firm-body-section,
.tmp-client-experience.tmp-firm-page-body-wrap,
.tmp-firm-page > .tmp-client-experience,
.tmp-manage-clients > .tmp-firm-body-section,
.tmp-manage-preparers > .tmp-firm-body-section,
.tmp-add-client > .tmp-firm-body-section,
.tmp-next-phase-page .tmp-client-experience,
.tmp-firm-inner-page .tmp-client-experience {
    background: var(--tmp-portal-canvas, #050505) !important;
}

/* Content inside canvas sections -- cards always use surface color */
.tmp-firm-body-section .tmp-flow-card,
.tmp-firm-body-section .tmp-card,
.tmp-firm-body-section .tmp-table-wrap,
.tmp-firm-body-section .tmp-list-tools,
.tmp-client-experience .tmp-flow-card,
.tmp-client-experience .tmp-card,
.tmp-next-phase-content .tmp-flow-card {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}

/* Text directly on canvas (not inside cards) stays readable */
.tmp-firm-body-section > *:not(.tmp-flow-card):not(.tmp-card):not(.tmp-table-wrap):not(form):not(.tmp-list-tools):not(.tmp-pagination):not(.tmp-filter-notice):not(.tmp-list-summary),
.tmp-client-experience > .tmp-section-band {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* ============================================================
   APPOINTMENT CENTER -- text visibility on dark canvas
   ============================================================ */
.tmp-payment-method-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tmp-payment-method-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    cursor: pointer;
    background: var(--tmp-surface, #ffffff);
    color: var(--tmp-heading, #172033) !important;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.tmp-payment-method-pill input[type="radio"] {
    display: none;
}
.tmp-payment-method-pill span {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-payment-method-pill:hover {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 6%, white);
}
.tmp-payment-method-pill.is-selected {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 10%, white);
    color: var(--tmp-primary, #1f4f8f) !important;
}
.tmp-payment-method-pill.is-selected span {
    color: var(--tmp-primary, #1f4f8f) !important;
}

/* Appointment calendar grid -- ensure text is always visible */
.tmp-flow-card .tmp-fc-subnav__link,
.tmp-flow-card .tmp-fc-subnav__link--active {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-flow-card .tmp-fc-subnav__link--active {
    background: var(--tmp-primary, #1f4f8f) !important;
    color: #fff !important;
}

/* Appointment availability day rows on dark canvas */
.tmp-firm-body-section .tmp-apt-day-row,
.tmp-client-experience .tmp-apt-day-row {
    background: var(--tmp-surface, #fff) !important;
    color: var(--tmp-heading, #172033) !important;
}

/* Appointment center card content always light bg */
.tmp-appointment-center .tmp-flow-card,
.tmp-appointment-center .tmp-card,
[class*="tmp-appointment"] .tmp-flow-card {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}
[class*="tmp-appointment"] .tmp-flow-card * {
    color: var(--tmp-heading, #172033);
}
[class*="tmp-appointment"] .tmp-flow-card input,
[class*="tmp-appointment"] .tmp-flow-card select,
[class*="tmp-appointment"] .tmp-flow-card textarea {
    color: var(--tmp-heading, #172033) !important;
    background: var(--tmp-surface, #fff) !important;
}

/* Availability day blocks -- dark bg override */
.tmp-firm-body-section > div > div[style*="background:var(--tmp-bg"],
.tmp-client-experience > div > div[style*="background:var(--tmp-bg"] {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-firm-body-section input[type="time"],
.tmp-firm-body-section input[type="date"],
.tmp-firm-body-section input[type="text"],
.tmp-firm-body-section input[type="email"],
.tmp-firm-body-section select {
    color: var(--tmp-heading, #172033) !important;
    background: var(--tmp-surface, #fff) !important;
}

/* ============================================================
   AVAILABILITY DAY ROWS -- always white surface, dark text
   regardless of firm canvas color
   ============================================================ */
.tmp-flow-card input[type="time"],
.tmp-flow-card input[type="date"],
.tmp-flow-card input[type="number"],
.tmp-flow-card input[type="text"],
.tmp-flow-card input[type="email"],
.tmp-flow-card select,
.tmp-flow-card textarea,
.tmp-flow-card label,
.tmp-flow-card strong,
.tmp-flow-card p,
.tmp-flow-card span:not(.tmp-button):not(.tmp-status-pill) {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-flow-card input[type="time"],
.tmp-flow-card input[type="date"] {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid var(--tmp-border, #dce3ee) !important;
    padding: 5px 8px;
    border-radius: 6px;
}
.tmp-flow-card input[type="checkbox"] {
    accent-color: var(--tmp-primary, #1f4f8f);
}

/* Firm body section inputs */
.tmp-firm-body-section .tmp-flow-card input,
.tmp-firm-body-section .tmp-flow-card select,
.tmp-firm-body-section .tmp-flow-card textarea {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid #dce3ee !important;
}

/* Preparer payment pills always visible */
.tmp-payment-method-picker label.tmp-payment-method-pill {
    background: #ffffff !important;
    color: #172033 !important;
    border: 2px solid #dce3ee;
}
.tmp-payment-method-picker label.tmp-payment-method-pill span {
    color: #172033 !important;
}
.tmp-payment-method-picker label.tmp-payment-method-pill.is-selected {
    border-color: var(--tmp-primary, #1f4f8f) !important;
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 10%, white) !important;
}
.tmp-payment-method-picker label.tmp-payment-method-pill.is-selected span {
    color: var(--tmp-primary, #1f4f8f) !important;
}

/* ============================================================
   APPOINTMENT CENTER -- comprehensive color fix
   All content inside the appointment tabs must be readable
   regardless of firm canvas color
   ============================================================ */

/* Tab nav buttons */
.tmp-fc-subnav__link {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
    border: 1px solid var(--tmp-border, #dce3ee) !important;
}
.tmp-fc-subnav__link:hover,
.tmp-fc-subnav__link:focus,
.tmp-fc-subnav__link--active,
.tmp-fc-subnav__link.tmp-fc-subnav__link--active {
    background: var(--tmp-primary, #1f4f8f) !important;
    color: #ffffff !important;
    border-color: var(--tmp-primary, #1f4f8f) !important;
}

/* My Schedule sub-tabs */
.tmp-firm-body-section a[style*="background:var(--tmp-primary"] {
    color: #ffffff !important;
}

/* Calendar grid */
.tmp-firm-body-section .tmp-flow-card,
.tmp-firm-body-section .tmp-card,
.tmp-next-phase-page .tmp-flow-card,
.tmp-next-phase-page .tmp-card {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-next-phase-page .tmp-flow-card *,
.tmp-next-phase-page .tmp-card *,
.tmp-firm-body-section .tmp-flow-card *,
.tmp-firm-body-section .tmp-card * {
    color: var(--tmp-heading, #172033);
}
.tmp-next-phase-page .tmp-flow-card h2,
.tmp-next-phase-page .tmp-flow-card h3,
.tmp-next-phase-page .tmp-flow-card h4,
.tmp-firm-body-section .tmp-flow-card h2,
.tmp-firm-body-section .tmp-flow-card h3,
.tmp-firm-body-section .tmp-flow-card h4 {
    color: var(--tmp-primary, #1f4f8f) !important;
}

/* Calendar day cells */
.tmp-next-phase-page [style*="background:var(--tmp-surface"],
.tmp-firm-body-section [style*="background:var(--tmp-surface"] {
    color: var(--tmp-heading, #172033) !important;
}

/* Availability day rows */
.tmp-firm-body-section [style*="background:var(--tmp-surface,#fff);border:1px solid var(--tmp-border"],
.tmp-firm-body-section [style*="background:var(--tmp-surface, #fff)"] {
    color: var(--tmp-heading, #172033) !important;
}

/* All inputs inside appointment pages */
.tmp-next-phase-page input[type="time"],
.tmp-next-phase-page input[type="date"],
.tmp-next-phase-page input[type="text"],
.tmp-next-phase-page input[type="number"],
.tmp-next-phase-page input[type="email"],
.tmp-next-phase-page input[type="color"],
.tmp-next-phase-page input[type="url"],
.tmp-next-phase-page select,
.tmp-next-phase-page textarea,
.tmp-firm-body-section input[type="time"],
.tmp-firm-body-section input[type="date"],
.tmp-firm-body-section input[type="text"],
.tmp-firm-body-section input[type="number"],
.tmp-firm-body-section input[type="email"],
.tmp-firm-body-section input[type="color"],
.tmp-firm-body-section input[type="url"],
.tmp-firm-body-section select,
.tmp-firm-body-section textarea {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid #dce3ee !important;
}

/* Labels and text directly on dark canvas (outside cards) */
.tmp-firm-body-section > div > h2,
.tmp-firm-body-section > div > h3,
.tmp-firm-body-section > div > p,
.tmp-firm-body-section > div > label {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* Table text inside appointment pages */
.tmp-next-phase-page .tmp-table-wrap table,
.tmp-next-phase-page .tmp-table-wrap th,
.tmp-next-phase-page .tmp-table-wrap td,
.tmp-firm-body-section .tmp-table-wrap th,
.tmp-firm-body-section .tmp-table-wrap td {
    color: var(--tmp-heading, #172033) !important;
    background: var(--tmp-surface, #fff) !important;
}
.tmp-next-phase-page .tmp-table-wrap thead th,
.tmp-firm-body-section .tmp-table-wrap thead th {
    background: var(--tmp-bg, #f5f7fb) !important;
    color: var(--tmp-heading, #172033) !important;
}

/* Notice/info boxes */
.tmp-firm-body-section [style*="background:color-mix"] {
    color: var(--tmp-heading, #172033) !important;
}

/* My Availability day row label text */
.tmp-firm-body-section strong,
.tmp-firm-body-section label {
    color: var(--tmp-heading, #172033) !important;
}

/* Appointment type booking cards in client portal */
.tmp-apt-type-card {
    display: block;
    text-decoration: none;
    background: var(--tmp-surface, #ffffff);
    border: 2px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s;
    color: var(--tmp-heading, #172033);
}
.tmp-apt-type-card:hover {
    border-color: var(--tmp-primary, #1f4f8f);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tmp-apt-type-card strong {
    color: var(--tmp-heading, #172033) !important;
}

/* ============================================================
   TRANSACTION CENTER -- hover color uses firm primary
   ============================================================ */
.tmp-table-wrap tbody tr:hover td {
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 6%, white) !important;
}
.tmp-table-wrap tbody tr:hover td,
.tmp-table-wrap tbody tr:hover td * {
    color: var(--tmp-heading, #172033) !important;
}
.tmp-table-wrap a {
    color: var(--tmp-primary, #1f4f8f);
}
.tmp-table-wrap a:hover {
    color: var(--tmp-primary-dark, #163a6e);
}

/* =====================================================================
   STANDALONE SHELL LAYER -- chrome the plugin gets from WordPress/theme
   (app header/nav/user-menu, auth+install+kickoff screens, pdnav, footer,
   flash, and standalone-only helper classes). Component styling above is the
   plugin's tmp-crm-frontend.css verbatim.
   ===================================================================== */

.tmp-public-body{
    display: grid;
    min-height: 100vh;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(31, 79, 143, 0.16), transparent 34%),
        linear-gradient(315deg, rgba(214, 168, 79, 0.16), transparent 32%),
        #f4f7fb;
}

.tmp-login-screen,
.tmp-install-screen{
    width: min(100%, 960px);
    padding: 24px;
}

.tmp-public-wide{
    width: min(100%, 1120px);
}

.tmp-login-panel,
.tmp-install-panel{
    width: min(100%, 720px);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: var(--tmp-shadow);
}

.tmp-login-brand,
.tmp-brand{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--tmp-ink);
    text-decoration: none;
}

.tmp-brand-mark{
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    background: var(--tmp-blue);
    color: #fff;
    font-weight: 800;
}

.tmp-login-brand strong,
.tmp-brand strong{
    display: block;
    line-height: 1.1;
}

.tmp-login-brand small,
.tmp-brand small,
.tmp-user-menu small{
    display: block;
    color: var(--tmp-muted);
    font-size: 12px;
}

.tmp-button-primary{
    border-color: var(--tmp-blue);
    background: var(--tmp-blue);
    color: #fff;
}

.tmp-alert-error{
    border-color: #efb3bf;
    color: var(--tmp-danger);
    background: #fff4f6;
}

.tmp-alert-success{
    border-color: #a9ddb9;
    color: var(--tmp-success);
    background: #f0fff4;
}

.tmp-small{
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-check{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.tmp-check input{
    width: auto;
    min-height: 0;
}

.tmp-check-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tmp-app-body{
    background: var(--tmp-bg);
}

.tmp-shell-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px clamp(18px, 4vw, 42px);
    border-bottom: 1px solid var(--tmp-border);
    /* Firm-branded top bar: background follows the firm's card colour. */
    background: var(--tmp-surface, #ffffff);
    color: var(--tmp-heading, #172033);
}
.tmp-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.tmp-brand-logo{ max-height:44px; width:auto; display:block; }

.tmp-main-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tmp-main-nav a{
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--tmp-muted);
    font-weight: 800;
    text-decoration: none;
}

.tmp-main-nav a.is-active,
.tmp-main-nav a:hover{
    background: #eef3f9;
    color: var(--tmp-blue-dark);
}

.tmp-main-nav a.is-pending{
    opacity: 0.72;
}

.tmp-user-menu{
    display: grid;
    justify-items: end;
    gap: 2px;
    color: var(--tmp-ink);
    font-weight: 800;
}

.tmp-user-menu a{
    font-size: 13px;
    font-weight: 800;
}

.tmp-shell-main{
    width: min(1240px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 34px 0 56px;
}

.tmp-page-heading{
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-end;
    margin-bottom: 24px;
}

.tmp-page-heading h1{
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
}

.tmp-page-heading p{
    margin: 8px 0 0;
    max-width: 720px;
    color: var(--tmp-muted);
}

.tmp-kicker{
    margin: 0 0 8px;
    color: var(--tmp-blue);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tmp-stat-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.tmp-panel-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tmp-big-number{
    margin: 0;
    color: var(--tmp-blue-dark);
    font-size: 46px;
    font-weight: 900;
}

.tmp-section-gap{
    margin-top: 22px;
}

.tmp-check-list{
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--tmp-muted);
}

.tmp-badge{
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef3f9;
    color: var(--tmp-blue-dark);
    font-size: 12px;
    font-weight: 900;
}

.tmp-badge-done{
    background: #effaf2;
    color: var(--tmp-success);
}

.tmp-message-card{
    margin-bottom: 12px;
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-message-card div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.tmp-message-card span{
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-message-card p{
    margin: 0;
    color: var(--tmp-ink);
    line-height: 1.55;
}

.tmp-message-card .tmp-form{
    margin-top: 14px;
}

.tmp-compact-form{
    padding-top: 12px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-kickoff-screen{
    width: min(100vw, 100%);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background-color: var(--tmp-intake-bg, #f4f7fb);
    /* v0.85.6: no light overlay — saved background colors/images show full strength */
    background-image: var(--tmp-intake-bg-image, none);
    background-position: center;
    background-size: cover;
}

.tmp-kickoff-panel{
    width: min(100%, 760px);
    background: var(--tmp-intake-card, #fff);
}

.tmp-kickoff-panel h1{
    margin: 18px 0 8px;
    color: var(--tmp-intake-secondary, var(--tmp-blue-dark));
}

.tmp-kickoff-panel label{
    color: var(--tmp-intake-label, var(--tmp-ink));
}

.tmp-kickoff-panel .tmp-button-primary{
    border-color: var(--tmp-intake-primary, var(--tmp-blue));
    background: var(--tmp-intake-primary, var(--tmp-blue));
}

.tmp-kickoff-brand{
    margin-bottom: 10px;
}

.tmp-kickoff-logo,
.tmp-kickoff-header{
    margin-bottom: 18px;
}

.tmp-kickoff-logo img,
.tmp-kickoff-header img{
    height: auto;
    border-radius: 6px;
}

.tmp-kickoff-header img{
    display: inline-block;
}

.tmp-align-left{
    text-align: left;
}

.tmp-align-center{
    text-align: center;
}

.tmp-align-right{
    text-align: right;
}

.tmp-align-full img{
    display: block;
    width: 100%;
}

.tmp-kickoff-headline{
    color: var(--tmp-intake-primary, var(--tmp-blue));
    font-weight: 800;
}

.tmp-kickoff-more{
    padding: 14px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #f8fafd;
}

.tmp-kickoff-more summary{
    color: var(--tmp-blue-dark);
    cursor: pointer;
    font-weight: 800;
}

.tmp-kickoff-more .tmp-form-grid{
    margin-top: 14px;
}

.tmp-docs-stat-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tmp-docs-stat-grid article{
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(22, 40, 72, 0.07);
}

.tmp-docs-stat-grid span{
    display: block;
    color: var(--tmp-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tmp-docs-stat-grid strong{
    display: block;
    margin-top: 8px;
    color: var(--tmp-blue-dark);
    font-size: 28px;
}

.tmp-requested-documents{
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(22, 40, 72, 0.07);
}

.tmp-requested-documents h3{
    margin: 0;
    color: var(--tmp-blue-dark);
}

.tmp-task-add-form{
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fbfcff;
}

.tmp-messages-inbox,
.tmp-message-conversation,
.tmp-message-bubble-list{
    display: grid;
    gap: 16px;
}

.tmp-message-start-card{
    margin-bottom: 6px;
}

.tmp-message-thread-item strong,
.tmp-message-conversation-heading h2{
    color: var(--tmp-blue-dark);
}

.tmp-message-thread-item span,
.tmp-message-thread-item p,
.tmp-message-conversation-heading span,
.tmp-message-bubble header span{
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-message-conversation-heading{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.tmp-message-conversation-heading h2{
    margin: 4px 0;
}

.tmp-card-list{
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.tmp-card-list li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f7;
}

.tmp-card-list span{
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-card-list p{
    flex: 1 0 100%;
    margin: 0;
    color: var(--tmp-muted);
    line-height: 1.5;
}

.tmp-detail-list{
    display: grid;
    margin: 0;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    overflow: hidden;
}

.tmp-detail-list div{
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    min-height: 42px;
    border-bottom: 1px solid var(--tmp-border);
}

.tmp-detail-list div:last-child{
    border-bottom: 0;
}

.tmp-detail-list dt,
.tmp-detail-list dd{
    margin: 0;
    padding: 10px 12px;
}

.tmp-detail-list dt{
    background: #f8fafd;
    color: var(--tmp-blue-dark);
    font-weight: 900;
}

.tmp-detail-list dd{
    color: var(--tmp-ink);
}

.tmp-profile-upload-form{
    margin-top: 0;
}

.tmp-tax-bottom-actions{
    padding-top: 18px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-dependent-list{
    display: grid;
    gap: 16px;
}

@media (max-width: 920px) {
    .tmp-shell-header {
        grid-template-columns: 1fr;
    }

    .tmp-user-menu {
        justify-items: start;
    }

    .tmp-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tmp-panel-grid,
    .tmp-form-grid,
    .tmp-check-grid,
    .tmp-inline-form,
    .tmp-dashboard-split,
    .tmp-docs-stat-grid,
    .tmp-tax-layout,
    .tmp-tax-progress,
    .tmp-progress-summary {
        grid-template-columns: 1fr;
    }

    .tmp-document-request-item,
    .tmp-client-task-card,
    .tmp-client-invoice-card,
    .tmp-message-thread-item,
    .tmp-message-conversation-heading,
    .tmp-message-bubble header {
        align-items: stretch;
        flex-direction: column;
    }

    .tmp-inline-upload {
        justify-content: stretch;
    }

    .tmp-message-bubble {
        width: 100%;
    }

    .tmp-manage-panel__body {
        position: static;
        width: min(100%, 720px);
    }

    .tmp-manage-split {
        grid-template-columns: 1fr;
    }

    .tmp-page-heading {
        display: grid;
        align-items: start;
    }

    .tmp-tax-steps {
        position: static;
    }

    .tmp-detail-list div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .tmp-stat-grid {
        grid-template-columns: 1fr;
    }

    .tmp-shell-main {
        width: min(100vw - 20px, 1240px);
        padding-top: 22px;
    }

    .tmp-client-welcome {
        width: 100%;
        margin-top: -72px;
    }

    .tmp-page-intro {
        width: 100%;
        margin-top: -72px;
    }

    .tmp-client-welcome h1 {
        font-size: 34px;
    }

    .tmp-review-card {
        display: grid;
    }
}

.tmp-flow-contact{align-self:start;}

/* ============================================================
   Theme portal navigation (pdnav) -- ported from white-label-crm-portal-theme
   Grouped mega-menu bar with dropdowns (phase65)
   ============================================================ */
.pdnav{
    width: 100%;
    background: var(--tmp-nav-bg, #111);
    border-bottom: 3px solid var(--tmp-gold, #d6a84f);
    position: sticky;
    top: 0;
    z-index: 200;
}

.pdnav__bar{
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 8px;
    min-height: 48px;
    flex-wrap: wrap;
}

/* Shared item styles */
.pdnav__item{ position: relative; }

.pdnav__item--link,
.pdnav__toggle{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    min-height: 48px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    cursor: pointer;
    font-family: inherit;
    transition: color .12s, border-color .12s, background .12s;
}

.pdnav__item--link:hover,
.pdnav__toggle:hover,
.pdnav__item--group.pdnav--open .pdnav__toggle,
.pdnav__item--link.is-active,
.pdnav__item--group.is-active .pdnav__toggle{
    color: var(--tmp-gold, #d6a84f);
    border-bottom-color: var(--tmp-gold, #d6a84f);
}

.pdnav__item--logout{
    opacity: .6;
    font-weight: 600;
}

.pdnav__item--logout:hover{ opacity: 1; }

.pdnav__caret{
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    transition: transform .18s;
    opacity: .7;
}

.pdnav--open .pdnav__caret{ transform: rotate(180deg); opacity: 1; }

/* Dropdown panel */
.pdnav__dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.1);
    border-top: 2px solid var(--tmp-gold, #d6a84f);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    padding: 6px;
    z-index: 300;
}

.pdnav--open .pdnav__dropdown{ display: flex; flex-direction: column; }

.pdnav__dropdown-item{
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .1s, color .1s;
}

.pdnav__dropdown-item:hover{ background: rgba(255,255,255,.1); color: #fff; }

.pdnav__dropdown-item.is-active{
    background: var(--tmp-gold, #d6a84f);
    color: #111;
    font-weight: 750;
}

@media (max-width: 900px) {
    .pdnav__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pdnav__bar::-webkit-scrollbar { display: none; }
    .pdnav__item--link, .pdnav__toggle { padding: 0 10px; font-size: .75rem; min-height: 44px; }
    .pdnav__dropdown {
        position: fixed;
        top: 47px;
        left: 6px;
        right: 6px;
        min-width: 0;
        max-height: 55vh;
        overflow-y: auto;
    }
}

/* Text color utilities */
.tmp-text-success{ color: var(--tmp-success, #059669); }

.tmp-text-danger{ color: var(--tmp-danger, #dc2626); }

.tmp-check-inline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.tmp-check-inline input{
    width: auto;
}

/* =====================================================================
   STANDALONE -> PLUGIN CLASS ALIASES
   The standalone pages use a few class names that differ from the plugin's
   (e.g. .tmp-panel where the plugin uses .tmp-card). These aliases give the
   standalone class names the plugin's exact visual definitions so pages match
   without renaming markup across every file.
   ===================================================================== */

/* .tmp-panel == plugin .tmp-card */
.tmp-panel,
.tmp-crm .tmp-panel,
.tmp-client-profile .tmp-panel {
    background: var(--tmp-surface);
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(20, 35, 60, .06);
    margin-bottom: 16px;
}
.tmp-panel h2 { margin-top: 0; color: var(--tmp-heading); }

/* Quick-link / tool tiles use the firm ACCENT colour (per branding), built
   with the plugin's own tile gradient formula but keyed off --tmp-accent. */
.tmp-client-link-card,
.tmp-tool-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-accent) 88%, #000), color-mix(in srgb, var(--tmp-accent) 68%, var(--tmp-section-accent)));
    border: 1px solid color-mix(in srgb, var(--tmp-accent) 40%, transparent);
}

/* Dashboards / tax return / flow pages are full-bleed with the dark portal
   canvas (they break out of the centered .tmp-shell-main container). Their
   inner content re-centers via .tmp-firm-dash-inner / .tmp-dashboard-section. */
.tmp-preparer-dashboard,
.tmp-client-dashboard,
.tmp-firm-dashboard,
.tmp-tax-return,
.tmp-flow-page {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.tmp-shell-main:has(> .tmp-preparer-dashboard),
.tmp-shell-main:has(> .tmp-client-dashboard),
.tmp-shell-main:has(> .tmp-firm-dashboard),
.tmp-shell-main:has(> .tmp-tax-return),
.tmp-shell-main:has(> .tmp-flow-page) {
    padding-top: 0;
}

/* Fallback flat nav (when pdnav isn't used) as a full-width dark bar under the brand header. */
.tmp-main-nav{
    display: block;
    background: var(--tmp-portal-nav-bg, #111111);
    border-bottom: 2px solid var(--tmp-section-accent, var(--tmp-accent, #d6a84f));
}
.tmp-main-nav__inner{
    width: min(1240px, calc(100vw - 32px));
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 clamp(18px, 4vw, 42px);
}
.tmp-main-nav a{
    padding: 12px 14px;
    color: var(--tmp-portal-nav-text, #ffffff);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.tmp-main-nav a.is-active{ color: var(--tmp-accent, #d6a84f); box-shadow: inset 0 -3px 0 var(--tmp-accent, #d6a84f); }

/* ============================================================
   v0.79.9 parity fixes (preparer dashboard + nav)
   ============================================================ */

/* 1. Preparer dashboard: center the My Client Snapshot flow
      (mirrors the firm-dashboard treatment; the 13-col grid was
      built for the client tracker and left-aligned the 7 stages). */
.tmp-preparer-dashboard .tmp-status-tracker {
    width: 100%;
    display: flex;
    justify-content: center;
}
.tmp-preparer-dashboard .tmp-status-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

/* 2. Quick-link tiles: label text always follows the firm's
      Primary Button Text colour (white by default). Placed last so
      no earlier rule can grey it out. */
.tmp-client-link-card,
.tmp-client-link-card strong,
.tmp-client-link-card .tmp-client-link-icon,
.tmp-tool-card,
.tmp-tool-card strong,
.tmp-tool-card span {
    color: var(--tmp-button-text, #ffffff) !important;
}

/* 4. Main menu stays pinned while the page scrolls (all dashboards). */
.pdnav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 500;
}
.tmp-main-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 500;
}

/* ============================================================
   v0.80.0 fixes
   ============================================================ */

/* 6. Pages that render the hero as a direct child of <main> (invoice
      requests, text message center, release requests, etc.) were missing
      the image-only reset (the old selector list only matched heroes
      inside a div). Apply the same full-bleed image-only treatment. */
.tmp-shell-main > .tmp-portal-hero--image-only {
    display: block !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 13.25 / 4.8;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--tmp-hero-image, none) center center / cover no-repeat !important;
    background-color: var(--tmp-primary-dark) !important;
    box-shadow: none !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    align-items: unset !important;
    /* full-bleed out of the centered shell container */
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
}

/* 3. Kill the sliver of horizontal scroll created by 100vw full-bleed
      sections next to the vertical scrollbar (content was poking past
      the right edge of the page). */
html, body { overflow-x: clip; }

/* 3b. IRS TC Lookup: give the search card breathing room below the intro. */
.tmp-irs-tc-page .tmp-firm-body-section { padding-top: 28px !important; }

/* 5. Appointment Center tab buttons: real spacing between tabs. */
.tmp-fc-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tmp-fc-subnav__link { padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; }

/* 7. Forms that put the input inside the label (invoice requests, etc.):
      stack the caption above the control instead of flowing inline. */
.tmp-form-grid label,
.tmp-form > label {
    display: grid;
    gap: 6px;
    align-content: start;
    font-weight: 600;
}
.tmp-form-grid label > input,
.tmp-form-grid label > select,
.tmp-form-grid label > textarea,
.tmp-form > label > input,
.tmp-form > label > select,
.tmp-form > label > textarea {
    width: 100%;
    box-sizing: border-box;
}
.tmp-form-grid label.tmp-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tmp-form .tmp-button { margin-top: 14px; }

/* ============================================================
   v0.81.0 — SuiteDash-style collapsible left sidebar (sdnav)
   ============================================================ */
:root {
    --sdnav-w: 256px;
    --sdnav-w-collapsed: 64px;
}

.sdnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 800;
    display: flex;
    flex-direction: column;
    width: var(--sdnav-w);
    background: var(--tmp-portal-nav-bg, var(--tmp-nav-bg, #111));
    color: var(--tmp-portal-nav-text, #fff);
    border-right: 3px solid var(--tmp-gold, var(--tmp-accent, #d6a84f));
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .18s ease;
    scrollbar-width: thin;
}
body.sdnav-collapsed .sdnav { width: var(--sdnav-w-collapsed); }

.sdnav__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    min-height: 64px;
}
.sdnav__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    color: var(--tmp-button-text, #fff);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
}
.sdnav__user { min-width: 0; line-height: 1.25; }
.sdnav__user strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdnav__user small { font-size: 11px; opacity: .65; }
.sdnav__collapse {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    opacity: .75;
}
.sdnav__collapse:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

.sdnav__menu { flex: 1; padding: 10px 0; }
.sdnav__foot { padding: 8px 0 14px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }

.sdnav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 18px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
}
.sdnav__item:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.sdnav__item.is-active,
.sdnav__grp.is-active > .sdnav__grp-toggle {
    background: var(--tmp-primary, #1f4f8f);
    color: var(--tmp-button-text, #fff);
}
.sdnav__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 18px;
}
.sdnav__icon svg { width: 18px; height: 18px; }
.sdnav__label { overflow: hidden; text-overflow: ellipsis; }
.sdnav__caret { margin-left: auto; flex-shrink: 0; transition: transform .15s; opacity: .6; }
.sdnav__grp.is-open > .sdnav__grp-toggle .sdnav__caret { transform: rotate(90deg); }

.sdnav__sub { display: none; padding: 4px 0 6px; background: color-mix(in srgb, #000 25%, transparent); }
.sdnav__grp.is-open > .sdnav__sub { display: block; }
.sdnav__sub-item {
    display: block;
    padding: 8px 18px 8px 50px;
    color: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .85;
}
.sdnav__sub-item:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; }
.sdnav__sub-item.is-active { opacity: 1; color: var(--tmp-gold, var(--tmp-accent, #d6a84f)); font-weight: 700; }

/* Collapsed state: icon rail */
body.sdnav-collapsed .sdnav__label,
body.sdnav-collapsed .sdnav__user,
body.sdnav-collapsed .sdnav__caret,
body.sdnav-collapsed .sdnav__sub { display: none; }
body.sdnav-collapsed .sdnav__head { flex-direction: column; gap: 8px; padding: 12px 8px; }
body.sdnav-collapsed .sdnav__collapse { margin-left: 0; }
body.sdnav-collapsed .sdnav__item { justify-content: center; padding: 12px 0; }

/* Main column sits to the right of the sidebar */
body.tmp-has-sidebar .tmp-layout-main {
    margin-left: var(--sdnav-w);
    transition: margin-left .18s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.tmp-has-sidebar.sdnav-collapsed .tmp-layout-main { margin-left: var(--sdnav-w-collapsed); }
body.tmp-has-sidebar .tmp-shell-main { flex: 1; }

/* Full-bleed sections were sized against the viewport (100vw). Inside the
   sidebar layout the main column IS the canvas, so they simply fill it. */
body.tmp-has-sidebar .tmp-preparer-dashboard,
body.tmp-has-sidebar .tmp-client-dashboard,
body.tmp-has-sidebar .tmp-firm-dashboard,
body.tmp-has-sidebar .tmp-tax-return,
body.tmp-has-sidebar .tmp-flow-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.tmp-has-sidebar .tmp-shell-main > .tmp-portal-hero--image-only {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
body.tmp-has-sidebar .tmp-shell-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}
/* Non-flow (plain) pages keep a comfortable centered container */
body.tmp-has-sidebar .tmp-shell-main > *:not(.tmp-flow-page):not(.tmp-preparer-dashboard):not(.tmp-client-dashboard):not(.tmp-firm-dashboard):not(.tmp-tax-return):not(.tmp-portal-hero):not(.tmp-alert) {
    width: min(1240px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}
body.tmp-has-sidebar .tmp-shell-main > .tmp-alert {
    width: min(1240px, calc(100% - 32px));
    margin: 12px auto;
}

/* Old top nav bars are gone when the sidebar is active */
body.tmp-has-sidebar .pdnav,
body.tmp-has-sidebar .tmp-main-nav { display: none !important; }

/* Mobile: off-canvas sidebar with header hamburger */
.sdnav-mobile-toggle { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 4px; }
@media (max-width: 900px) {
    .sdnav { transform: translateX(-100%); transition: transform .2s ease; width: var(--sdnav-w) !important; }
    body.sdnav-open .sdnav { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
    body.tmp-has-sidebar .tmp-layout-main { margin-left: 0 !important; }
    .sdnav-mobile-toggle { display: inline-flex; }
    body.sdnav-collapsed .sdnav__label, body.sdnav-collapsed .sdnav__user { display: block; }
    body.sdnav-collapsed .sdnav__caret { display: inline; }
    body.sdnav-collapsed .sdnav__sub { display: none; }
    body.sdnav-collapsed .sdnav__grp.is-open > .sdnav__sub { display: block; }
}

/* ============================================================
   v0.81.1 — sidebar scrollbar hidden + fixed top bar
   ============================================================ */

/* Sidebar scrolls but shows no scrollbar (SuiteDash style) */
.sdnav {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* old Edge/IE */
}
.sdnav::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome/Safari */

/* Top brand bar stays pinned while the page scrolls */
body.tmp-has-sidebar .tmp-shell-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 700;
}

/* ============================================================
   v0.81.2 — all portal pages (.tmp-crm) span the full main column;
   only plain non-portal content stays in a centered container.
   ============================================================ */
body.tmp-has-sidebar .tmp-shell-main > .tmp-crm,
body.tmp-has-sidebar .tmp-shell-main > .tmp-portal-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   v0.82.0 — sidebar layout: content sizes to the main column,
   not the viewport (fixes cut-off pages on smaller screens)
   ============================================================ */
body.tmp-has-sidebar {
    /* Every "width: min(var(--tmp-content-width), calc(100vw - N))" rule now
       resolves to the main column width instead of the viewport width. */
    --tmp-content-width: 100%;
}
/* The two rules that centered with viewport math get plain padding instead. */
body.tmp-has-sidebar .tmp-tax-layout { padding: 0 16px 58px; }
body.tmp-has-sidebar .tmp-tax-progress { padding: 16px; }
/* Belt & braces: nothing inside a portal page may exceed its container. */
body.tmp-has-sidebar .tmp-crm { overflow-x: clip; }

/* ============================================================
   v0.82.0 — top-bar notification bell
   ============================================================ */
.tmp-topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--tmp-heading, #172033);
    text-decoration: none !important;
}
.tmp-topbar-bell:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--tmp-primary, #1f4f8f); }
.tmp-topbar-bell svg { width: 22px; height: 22px; }
.tmp-topbar-bell__badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

/* ============================================================
   v0.82.0 — sidebar layout: hardcoded viewport widths become
   column-relative so nothing overflows the main area.
   ============================================================ */
body.tmp-has-sidebar .tmp-firm-page-body {
    width: min(1272px, calc(100% - 32px)) !important;
}
body.tmp-has-sidebar .tmp-client-dashboard .tmp-quick-panel,
body.tmp-has-sidebar .tmp-preparer-dashboard .tmp-quick-panel,
body.tmp-has-sidebar .tmp-firm-dashboard .tmp-quick-panel {
    width: min(1240px, calc(100% - 32px)) !important;
}
body.tmp-has-sidebar .tmp-messages-inbox,
body.tmp-has-sidebar .tmp-state-refund-page .tmp-state-grid {
    width: min(var(--tmp-readable-width, 1240px), calc(100% - 32px)) !important;
}
body.tmp-has-sidebar .tmp-manage-panel { max-width: min(720px, calc(100% - 32px)) !important; }
body.tmp-has-sidebar .tmp-manage-panel__body { width: min(680px, calc(100% - 32px)) !important; }
body.tmp-has-sidebar .tmp-workflow-automations-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-reports-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-signature-templates-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-intake-settings-page .tmp-firm-page-content {
    width: min(1100px, calc(100% - 32px)) !important;
}
body.tmp-has-sidebar .tmp-firm-page-content { width: min(1272px, calc(100% - 32px)) !important; }
body.tmp-has-sidebar .tmp-next-phase-content { width: min(1272px, calc(100% - 32px)) !important; }
body.tmp-has-sidebar .tmp-doc-requests-wrap { width: min(1272px, calc(100% - 32px)) !important; }

/* v0.82.1 — the width variable is (re)declared on .tmp-crm itself, so the
   sidebar override must land at the same scope to win. */
body.tmp-has-sidebar .tmp-crm,
body.tmp-has-sidebar .tmp-client-profile,
body.tmp-has-sidebar .tmp-client-documents {
    --tmp-content-width: 100%;
}

/* v0.83.4 — client cards: values were inheriting white text on the dark
   canvas pages; pin readable colours inside the white card. */
.tmp-client-card { color: #172033; }
.tmp-client-card .tmp-client-card__row span:last-child { color: var(--tmp-heading, #172033); }
.tmp-client-card .tmp-client-card__id { color: var(--tmp-muted, #667085); }

/* ============================================================
   v0.84.9 — body gutter: page content gets breathing room on both
   sides instead of running edge-to-edge. Header images, page-title
   bands, and intro/hero sections intentionally stay full width.
   ============================================================ */
body.tmp-has-sidebar { --tmp-gutter: clamp(18px, 3vw, 44px); }

/* Containers that sat flush against the column edges get side padding.
   (.tmp-client-experience = dashboards, .tmp-firm-body-section = list pages) */
body.tmp-has-sidebar .tmp-client-experience,
body.tmp-has-sidebar .tmp-firm-body-section {
    padding-left: var(--tmp-gutter) !important;
    padding-right: var(--tmp-gutter) !important;
    box-sizing: border-box;
}

/* Width-constrained page bodies widen their old 16px side gap to the gutter. */
body.tmp-has-sidebar .tmp-firm-page-body,
body.tmp-has-sidebar .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-next-phase-content,
body.tmp-has-sidebar .tmp-doc-requests-wrap {
    width: min(1272px, calc(100% - var(--tmp-gutter) * 2)) !important;
}
body.tmp-has-sidebar .tmp-workflow-automations-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-reports-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-signature-templates-page .tmp-firm-page-content,
body.tmp-has-sidebar .tmp-intake-settings-page .tmp-firm-page-content {
    width: min(1100px, calc(100% - var(--tmp-gutter) * 2)) !important;
}
body.tmp-has-sidebar .tmp-client-dashboard .tmp-quick-panel,
body.tmp-has-sidebar .tmp-preparer-dashboard .tmp-quick-panel,
body.tmp-has-sidebar .tmp-firm-dashboard .tmp-quick-panel {
    width: min(1240px, calc(100% - var(--tmp-gutter) * 2)) !important;
}
body.tmp-has-sidebar .tmp-messages-inbox,
body.tmp-has-sidebar .tmp-state-refund-page .tmp-state-grid {
    width: min(var(--tmp-readable-width, 1240px), calc(100% - var(--tmp-gutter) * 2)) !important;
}
body.tmp-has-sidebar .tmp-tax-layout { padding: 0 var(--tmp-gutter) 58px !important; }

/* Don't double-pad: inner containers inside an already-padded section
   fill it instead of subtracting their own viewport margins. */
body.tmp-has-sidebar .tmp-firm-body-section .tmp-firm-page-body,
body.tmp-has-sidebar .tmp-client-experience .tmp-firm-page-body {
    width: min(1272px, 100%) !important;
}

/* v0.85.2 — Firm Admin permission toggles: a broad label rule was flattening
   the switch layout; pin the plugin's flex pill + sized track. */
.tmp-perm-toggle,
.tmp-firm-body-section .tmp-perm-toggle,
.tmp-flow-card .tmp-perm-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}
.tmp-perm-toggle .tmp-perm-track { display: inline-block !important; }

/* ── v0.85.3 Financial Center (plugin tmp_fc_styles parity) ─────────────── */
.tmp-fc-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 28px;padding:0;}
.tmp-fc-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:0 0 24px;}
.tmp-fc-kpi{background:var(--tmp-surface,#fff);border:1px solid var(--tmp-border,#dce3ee);border-radius:8px;padding:18px 16px;text-align:center;display:flex;flex-direction:column;gap:6px;}
.tmp-fc-kpi__value{font-size:22px;font-weight:700;color:var(--tmp-primary,#1f4f8f);}
.tmp-fc-kpi__label{font-size:12px;color:var(--tmp-muted,#667085);}
.tmp-fc-filter-input{padding:7px 10px;border:1px solid var(--tmp-border,#dce3ee);border-radius:6px;font-size:13px;background:var(--tmp-surface,#fff);color:var(--tmp-text,#333);}
.tmp-fc-action-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.tmp-fc-reports-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:640px){.tmp-fc-reports-grid{grid-template-columns:1fr;}}
/* Headings placed directly on the firm page body (dark canvas) stay readable */
.tmp-firm-page-body > h1,
.tmp-firm-page-body > h2,
.tmp-firm-page-body > h3,
.tmp-firm-page-body > div > h2 {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* ── v0.85.4 kickoff intake editor colors on the public form ────────────── */
.tmp-kickoff-screen .tmp-form button[type="submit"],
.tmp-kickoff-screen .tmp-button {
    background: var(--tmp-intake-button-bg, var(--tmp-intake-primary, #1f4f8f));
    color: var(--tmp-intake-button-text, #ffffff);
    border-color: var(--tmp-intake-button-bg, var(--tmp-intake-primary, #1f4f8f));
}
.tmp-kickoff-screen .tmp-kickoff-panel { color: var(--tmp-intake-text, #172033); }

/* ── v0.85.7 branded page footer (all pages) ────────────────────────────── */
.tmp-portal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding: 20px clamp(20px, 5vw, 64px);
    background: var(--tmp-primary, #1f4f8f);
    color: #ffffff;
    font-size: 14px;
}
.tmp-portal-footer span { color: #ffffff; }

/* ── v0.85.7 flash messages float as toasts near the action ─────────────── */
.tmp-toast-stack {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(560px, calc(100vw - 40px));
}
.tmp-toast-stack .tmp-alert {
    margin: 0 !important;
    box-shadow: 0 12px 34px rgba(9, 25, 48, 0.28);
    border-radius: 12px;
    animation: tmpToastIn .25s ease-out;
    cursor: pointer;
}
.tmp-toast-stack .tmp-alert.tmp-toast-hide {
    opacity: 0;
    transition: opacity .4s ease;
}
@keyframes tmpToastIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── v0.85.8 public intake top bar (plugin page header parity) ──────────── */
.tmp-public-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(18px, 4vw, 48px);
    background: #ffffff;
    border-bottom: 3px solid var(--tmp-intake-accent, var(--tmp-accent, #d6a84f));
    box-shadow: 0 1px 0 var(--tmp-intake-primary, var(--tmp-primary, #1f4f8f));
}
.tmp-public-topbar__brand { display: flex; align-items: center; gap: 12px; }
.tmp-public-topbar__brand img { height: 42px; width: auto; }
.tmp-public-topbar__brand strong { color: var(--tmp-primary, #1f4f8f); font-size: 17px; }
.tmp-public-topbar__login { color: var(--tmp-primary, #1f4f8f); font-weight: 700; text-decoration: none; }
.tmp-public-topbar__login:hover { text-decoration: underline; }
body.tmp-public-body { margin: 0; }

/* ── v0.85.9 footer fills the page width but never covers the menu ──────── */
.tmp-portal-footer {
    width: 100%;
    box-sizing: border-box;
}
/* v0.85.8: no default body margin — footer and page run edge to edge */
body { margin: 0; }

/* v0.85.8: the kickoff intake page is a full-width document flow, not the
   centered login grid — topbar, colored page, and footer run edge to edge. */
body.tmp-public-body:has(.tmp-intake-page) { display: block; place-items: unset; }
.tmp-public-topbar { width: 100%; box-sizing: border-box; }
.tmp-intake-page { width: 100%; box-sizing: border-box; }
body.tmp-public-body .tmp-portal-footer { margin-top: 0; }

/* ============================================================
   v0.87.0 — Client portal spacing fixes
   The dashboard section widths were computed from 100vw, which
   ignores the sidebar and left the content pressed against the
   edges. Use the section's own width instead and add comfortable
   side padding on every client page body.
   ============================================================ */
.tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-announcement-list,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-status-tracker,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-dashboard-split,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-promo-band,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-review-card {
    width: min(var(--tmp-content-width, 1272px), calc(100% - clamp(40px, 6vw, 112px)));
}

/* Comfortable body padding on client inner pages (invoices, appointments,
   documents, tax library). Inner content keeps its own centered max-width. */
.tmp-client-dashboard .tmp-firm-body-section,
.tmp-client-dashboard .tmp-client-body-section,
.tmp-client-invoices-page .tmp-firm-body-section,
.tmp-client-appointments-page .tmp-firm-body-section,
.tmp-client-documents-page .tmp-firm-body-section,
.tmp-client-documents-page .tmp-client-body-section {
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: clamp(20px, 4vw, 64px);
}

/* Center the Quick Links and Refund & IRS Tools cards on the client dashboard.
   Flex + centered wrapping keeps every row (including the last partial one)
   centered on the page. */
.tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid > .tmp-client-link-card,
.tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid > .tmp-tool-card {
    flex: 0 1 216px;
    min-width: 180px;
}

@media (max-width: 700px) {
    .tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid > .tmp-client-link-card,
    .tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid > .tmp-tool-card {
        flex: 1 1 100%;
    }
}

/* ============================================================
   v0.88.5 — Support page body padding
   The generic .tmp-flow-page > .tmp-flow-grid rule sizes with 100vw,
   which ignores the sidebar and lets the support cards run to the
   page edges. Constrain + centre using 100% of the content column so
   the body gets even side padding.
   ============================================================ */
.tmp-support-page > .tmp-flow-grid {
    width: min(var(--tmp-content-width, 1272px), calc(100% - clamp(32px, 6vw, 96px)));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 24px;
}