#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.customer-results-panel {
    height: calc(100dvh - 20rem);
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.customer-results-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.customer-search-container {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: var(--rz-base-background-color, var(--rz-base-25));
    min-height: 75vh;
}

.customer-search-page {
    min-height: 75vh;
}

.customer-search-header-card {
    padding-top: 10px;
}

.customer-search-action-btn {
    border-radius: 4px;
}

.customer-search-surface-card {
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
}

.customer-search-search-card {
    padding-top: 3px;
    padding-bottom: 3px;
}

.customer-search-results-card {
    padding-top: 5px;
    padding-bottom: 5px;
}

.customer-search-section-icon {
    color: var(--rz-text-color);
    font-size: 24px;
}

.customer-search-section-title {
    color: var(--rz-text-color);
    font-weight: 600;
}

.customer-search-submit-btn {
    width: 100%;
    margin-top: 9px;
}

.customer-search-form-field .rz-form-field-label {
    color: var(--rz-text-secondary-color) !important;
    opacity: 1 !important;
}

.customer-search-form-field.rz-state-focused .rz-form-field-label,
.customer-search-form-field:focus-within .rz-form-field-label,
.customer-search-form-field .rz-state-focused .rz-form-field-label {
    color: var(--rz-text-color) !important;
    opacity: 1 !important;
}

.customer-search-result-item-card {
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    margin-bottom: 8px;
    padding: 10px;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.customer-search-result-item-card:hover {
    background-color: color-mix(in srgb, var(--rz-base-background-color) 86%, var(--rz-primary-lighter) 14%) !important;
    border-color: var(--rz-primary-light);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--rz-text-primary-color) 14%, transparent);
}

.customer-search-customer-name {
    color: var(--rz-text-color) !important;
}

.customer-search-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-on-primary);
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.customer-search-secondary-text {
    color: var(--rz-text-secondary-color);
}

.customer-search-secondary-text-spaced {
    margin-top: 0.5rem;
}

.customer-search-detail-card {
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    padding: 1rem;
    height: 100%;
}

.customer-search-contact-card {
    border-left: 3px solid var(--rz-info);
}

.customer-search-contact-header-icon {
    color: var(--rz-text-color);
    font-size: 18px;
}

.customer-search-contact-header-text {
    color: var(--rz-text-color);
    font-weight: 600;
}

.customer-search-address-card {
    border-left: 3px solid var(--rz-warning);
}

.customer-search-address-header-icon {
    color: var(--rz-text-color);
    font-size: 18px;
}

.customer-search-address-header-text {
    color: var(--rz-text-color);
    font-weight: 600;
}

.customer-search-opportunity-card {
    border-left: 3px solid var(--rz-primary);
}

.customer-search-contact-icon {
    color: var(--rz-text-color);
    font-size: 16px;
}

.customer-search-contact-icon-home {
    color: var(--rz-text-color);
}

.customer-search-contact-icon-mobile {
    color: var(--rz-text-color);
}

.customer-search-contact-icon-work {
    color: var(--rz-text-color);
}

.customer-search-contact-icon-email {
    color: var(--rz-text-color);
}

.customer-search-opportunity-actions-top {
    margin-bottom: 10px;
}

.customer-search-contact-action-btn {
    min-width: 32px !important;
}

.customer-search-profile-btn {
    min-width: 120px;
}

.customer-search-pagination-card {
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    text-align: center;
    padding: 1rem;
}

.customer-search-empty-state-card {
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    text-align: center;
    padding: 2rem;
}

.customer-search-empty-state-icon {
    color: var(--rz-text-secondary-color);
    font-size: 48px;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

:root {
    font-size: var(--rz-root-font-size);
    --rz-white: #ffffff;
    --rz-black: #000000;
    /* Page header gradient — separate from primary so buttons/links are unaffected */
    --app-header-gradient-start: #0c8ca4;
    --app-header-gradient-end: #076b80;
    --app-header-gradient-angle: 175deg;
    --rz-base: #dadfe2;
    --rz-base-50: #ffffff;
    --rz-base-100: #f6f7fa;
    --rz-base-200: #e9edf0;
    --rz-base-300: #dadfe2;
    --rz-base-400: #c1c9cb;
    --rz-base-500: #616c75;
    --rz-base-600: #5e696e;
    --rz-base-700: #545e61;
    --rz-base-800: #3a474d;
    --rz-base-900: #28363c;
    --rz-base-light: #e9edf0;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #5e696e;
    --rz-base-darker: #28363c;
    --rz-primary: #08697d;
    --rz-primary-light: #267b8d;
    --rz-primary-lighter: rgba(8, 105, 125, 0.16);
    --rz-primary-dark: #076173;
    --rz-primary-darker: #064f5e;
    --rz-secondary: #53666a;
    --rz-secondary-light: #68787c;
    --rz-secondary-lighter: rgba(83, 102, 106, 0.2);
    --rz-secondary-dark: #4c5e62;
    --rz-secondary-darker: #3e4d50;
    --rz-info: #00619e;
    --rz-info-light: #297aae;
    --rz-info-lighter: rgba(0, 97, 158, 0.2);
    --rz-info-dark: #005185;
    --rz-info-darker: #004977;
    --rz-success: #006b15;
    --rz-success-light: #29833a;
    --rz-success-lighter: rgba(0, 107, 21, 0.16);
    --rz-success-dark: #005a12;
    --rz-success-darker: #005010;
    --rz-warning: #ffab2e;
    --rz-warning-light: #ffb84f;
    --rz-warning-lighter: rgba(255, 171, 46, 0.2);
    --rz-warning-dark: #d69027;
    --rz-warning-darker: #bf8023;
    --rz-danger: #bd0039;
    --rz-danger-light: #c82959;
    --rz-danger-lighter: rgba(189, 0, 57, 0.2);
    --rz-danger-dark: #9f0030;
    --rz-danger-darker: #8e002b;
    --rz-on-base: #28363c;
    --rz-on-base-light: #28363c;
    --rz-on-base-lighter: #28363c;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #08697d;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-lighter: #53666a;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #ffffff;
    --rz-on-info-lighter: #00619e;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #ffffff;
    --rz-on-success-lighter: #006b15;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    --rz-on-warning: #000000;
    --rz-on-warning-light: #000000;
    --rz-on-warning-lighter: #ffab2e;
    --rz-on-warning-dark: #000000;
    --rz-on-warning-darker: #000000;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-lighter: #bd0039;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;
    --rz-link-color: #297aae;
    --rz-link-hover-color: #005185;
    --rz-selectbar-border:;
    --rz-selectbar-selected-border:;
    --rz-selectbar-focus-outline:;
    --rz-selectbar-button-focus-outline:;
}


/* ===================================================================
   LOGIN PAGE
   =================================================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #064f5e 0%, #08697d 40%, #267b8d 70%, #3a9fb5 100%);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(0,0,0,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Card */
.login-card {
    position: relative;
    z-index: 1;
    display: flex;
    width: 900px;
    max-width: 95vw;
    min-height: 520px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.12);
    animation: loginCardFadeIn 0.6s ease-out;
}

@keyframes loginCardFadeIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand panel (left) */
.login-brand-panel {
    flex: 0 0 38%;
    background: linear-gradient(160deg, var(--rz-primary) 0%, var(--rz-primary-darker) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    top: -80px;
    right: -80px;
}

.login-brand-panel::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    bottom: -60px;
    left: -60px;
}

.login-brand-logo {
    width: 85%;
    max-width: 260px;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.login-brand-tagline {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    max-width: 240px;
    margin: 0;
}

/* Form panel (right) */
.login-form-panel {
    flex: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.75rem;
    animation: loginFormSlideIn 0.6s ease-out 0.15s both;
}

@keyframes loginFormSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-eyebrow {
    margin-bottom: 0.35rem !important;
    color: #5b6a70 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.login-welcome-text {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #1a2b33 !important;
    margin-bottom: 0.35rem !important;
    font-family: var(--app-font) !important;
}

.login-welcome-sub {
    font-size: 0.9rem !important;
    color: #6b7c85 !important;
    margin-bottom: 2rem !important;
}

/* Form fields */
.login-form-group {
    margin-bottom: 1.25rem;
}

.login-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #3a474d;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrapper .login-input-icon {
    position: absolute;
    left: 12px;
    font-size: 20px !important;
    color: #9aabae;
    pointer-events: none;
    transition: color 0.2s;
    z-index: 1;
}

.login-input-wrapper:focus-within .login-input-icon {
    color: var(--rz-primary);
}

.login-form-input {
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 2.75rem;
    font-size: 0.95rem;
    font-family: var(--app-font);
    border: 2px solid #e0e7ea;
    border-radius: var(--app-border-radius) !important;
    background: #f8fafb;
    color: #1a2b33;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.login-form-input:focus {
    border-color: var(--rz-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(8, 105, 125, 0.12);
}

.login-form-input.login-pw-input {
    padding-right: 2.75rem;
}

/* Password toggle */
.login-password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9aabae;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    z-index: 1;
}

.login-password-toggle:hover {
    color: var(--rz-primary);
    background-color: rgba(8, 105, 125, 0.08);
}

.login-password-toggle:focus-visible {
    outline: 2px solid rgba(8, 105, 125, 0.35);
    outline-offset: 1px;
}

.login-password-toggle .rzi,
.login-password-toggle .material-icons {
    font-size: 20px !important;
}

/* Extras row */
.login-form-extras {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
}

.login-forgot-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #d8e2e6;
    background: #f8fafb;
    color: var(--rz-primary) !important;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.login-forgot-link:hover {
    color: var(--rz-primary-dark) !important;
    border-color: #b8d0d7;
    background: #f2f7f8;
}

.login-forgot-link:focus-visible {
    outline: 2px solid rgba(8, 105, 125, 0.3);
    outline-offset: 1px;
}

/* Submit button */
.login-submit-btn {
    width: 100%;
    min-height: 44px;
    padding: 0.85rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: var(--app-font) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-darker) 100%) !important;
    border: none !important;
    border-radius: var(--app-border-radius) !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    letter-spacing: 0.3px;
    justify-content: center;
}

.login-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(8, 105, 125, 0.35) !important;
}

.login-submit-btn:active {
    transform: translateY(0) !important;
}

/* Copyright */
.login-copyright {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

/* Alert overrides for login */
.login-form-panel .rz-alert {
    margin-bottom: 1rem;
    border-radius: var(--app-border-radius) !important;
    border: 1px solid #dce6ea;
    background-color: #ffffff;
}

/* Mobile responsive */
@media (max-width: 700px) {
    .login-card {
        flex-direction: column;
        min-height: 0;
        width: 100%;
        max-width: 420px;
    }

    .login-brand-panel {
        flex: 0 0 auto;
        padding: 2rem 1.5rem 1.5rem;
    }

    .login-brand-logo {
        max-width: 180px;
    }

    .login-brand-tagline {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .login-form-panel {
        padding: 2rem 1.5rem;
    }

    .login-welcome-text {
        font-size: 1.35rem !important;
    }
}


/* ===================================================================
   FORM / ADD / EDIT PAGE CONTAINERS
   Replaces per-page container classes and style blocks.
   =================================================================== */

/* Page wrapper for form/dialog pages — no min-height, let dialog size naturally */
.ignite-form-page {
    padding: 0.25rem;
    background-color: var(--rz-base-25);
}

/* Form page title area — replaces gradient header card on Add/Edit pages */
.ignite-form-header-card {
    background: none !important;
    border: 1px solid var(--rz-base-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 0;
}

/* Override white text and opacity set by inline styles and header classes */
.ignite-form-header-card,
.ignite-form-header-card * {
    color: var(--rz-text-color) !important;
    opacity: 1 !important;
}

/* ===================================================================
   FORM CONTEXT / INTENT CARDS
   Replaces ignite-form-header-card on all Add/Edit pages.
   A = context card (known subject)
   B = intent card (new entity, no subject yet)
   C = context card (edit existing — shows loaded record)
   =================================================================== */

.ignite-context-card {
    border-left: 4px solid var(--rz-primary);
    padding: 0.75rem 1rem !important;
}

/* Entity type accent colors */
.ignite-context-customer    { border-left-color: var(--rz-success); }
.ignite-context-employee    { border-left-color: var(--rz-info); }
.ignite-context-opportunity { border-left-color: var(--rz-primary); }
.ignite-context-vehicle     { border-left-color: var(--rz-warning); }
.ignite-context-service     { border-left-color: var(--rz-secondary); }
.ignite-context-admin       { border-left-color: var(--rz-base-500); }

/* Avatar circle */
.ignite-context-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.ignite-avatar-customer    { background: linear-gradient(135deg, var(--rz-success) 0%, var(--rz-success-dark) 100%); }
.ignite-avatar-employee    { background: linear-gradient(135deg, var(--rz-info) 0%, var(--rz-info-dark) 100%); }
.ignite-avatar-opportunity { background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-darker) 100%); }
.ignite-avatar-vehicle     { background: linear-gradient(135deg, var(--rz-warning) 0%, var(--rz-warning-dark) 100%); }
.ignite-avatar-service     { background: linear-gradient(135deg, var(--rz-secondary) 0%, var(--rz-secondary-darker) 100%); }
.ignite-avatar-admin       { background: linear-gradient(135deg, var(--rz-base-500) 0%, var(--rz-base-700) 100%); }

/* Context card text hierarchy */
.ignite-context-label {
    margin: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color) !important;
}

.ignite-context-name {
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--rz-text-color) !important;
}

.ignite-context-sub {
    margin: 0 !important;
    color: var(--rz-text-secondary-color) !important;
    font-size: 0.82rem !important;
}

/* ===================================================================
   STANDARD PAGE HEADER POLICY
   Enforces the approved gradient card treatment across pages.
   =================================================================== */
.ignite-standard-header-card,
.profile-header-card,
.customer-header-card,
.add-customer-header-card,
.add-customer-mobile-header-card,
.edit-customer-header-card,
.edit-customer-vehicle-header-card,
.customer-timeline-header-card,
.customer-search-mobile-header-card,
.duplicate-customers-header-card,
.prospect-listing-header-card,
.customer-vehicle-interest-header-card,
.sales-calendar-header-card,
.opportunity-sales-header-card,
.customer-wanted-search-header-card,
.campaign-categories-header-card,
.campaigns-header-card,
.message-snippets-header-card,
.add-schedule-campaign-header-card,
.ai-prospecting-header-card,
.bdc-commissions-header-card,
.bdc-commissions-display-header-card,
.pams-mcs-header-card,
.pams-parts-header-card,
.pams-services-header-card,
.service-intakes-header-card,
.service-statuses-header-card,
.rz-card[style*="background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%); color: white; margin-bottom: 0;"] {
    background: linear-gradient(var(--app-header-gradient-angle), var(--app-header-gradient-start) 0%, var(--app-header-gradient-end) 100%) !important;
    color: white;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.ignite-standard-header-card::before,
.profile-header-card::before,
.customer-header-card::before,
.add-customer-header-card::before,
.add-customer-mobile-header-card::before,
.edit-customer-header-card::before,
.edit-customer-vehicle-header-card::before,
.customer-timeline-header-card::before,
.customer-search-mobile-header-card::before,
.duplicate-customers-header-card::before,
.prospect-listing-header-card::before,
.customer-vehicle-interest-header-card::before,
.sales-calendar-header-card::before,
.opportunity-sales-header-card::before,
.customer-wanted-search-header-card::before,
.campaign-categories-header-card::before,
.campaigns-header-card::before,
.message-snippets-header-card::before,
.add-schedule-campaign-header-card::before,
.ai-prospecting-header-card::before,
.bdc-commissions-header-card::before,
.bdc-commissions-display-header-card::before,
.pams-mcs-header-card::before,
.pams-parts-header-card::before,
.pams-services-header-card::before,
.service-intakes-header-card::before,
.service-statuses-header-card::before,
.rz-card[style*="background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%); color: white; margin-bottom: 0;"]::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    top: -40px;
    right: -30px;
    pointer-events: none;
}

.page-header-card {
    background: linear-gradient(var(--app-header-gradient-angle), var(--app-header-gradient-start) 0%, var(--app-header-gradient-end) 100%);
    color: white;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.page-header-card::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    top: -40px;
    right: -30px;
    pointer-events: none;
}

.ignite-standard-header-card::after,
.profile-header-card::after,
.customer-header-card::after,
.add-customer-header-card::after,
.add-customer-mobile-header-card::after,
.edit-customer-header-card::after,
.edit-customer-vehicle-header-card::after,
.customer-timeline-header-card::after,
.customer-search-mobile-header-card::after,
.duplicate-customers-header-card::after,
.prospect-listing-header-card::after,
.customer-vehicle-interest-header-card::after,
.sales-calendar-header-card::after,
.opportunity-sales-header-card::after,
.customer-wanted-search-header-card::after,
.campaign-categories-header-card::after,
.campaigns-header-card::after,
.message-snippets-header-card::after,
.add-schedule-campaign-header-card::after,
.ai-prospecting-header-card::after,
.bdc-commissions-header-card::after,
.bdc-commissions-display-header-card::after,
.pams-mcs-header-card::after,
.pams-parts-header-card::after,
.pams-services-header-card::after,
.service-intakes-header-card::after,
.service-statuses-header-card::after,
.page-header-card::after,
.rz-card[style*="background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%); color: white; margin-bottom: 0;"]::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    bottom: -70px;
    left: -60px;
    pointer-events: none;
}

/* Service Intakes — wrap tab strip on narrow screens */
.service-intakes-tabs ul[role=tablist] {
    flex-wrap: wrap;
}

.ignite-header-actions-row {
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.ignite-header-badge-column {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ignite-header-button-column {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ignite-header-button-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ignite-header-button-group .rz-button,
.ignite-header-button-group .rz-splitbutton {
    margin: 0;
}

/* Global touch-target floor — all Radzen buttons must be at least 44×44px */
.rz-button {
    min-height: 44px !important;
    min-width: 44px !important;
    border-radius: 4px !important;
}

/* Sub-control buttons inside these components must not inherit the 44px touch-target floor */
.rz-numeric .rz-button,
.rz-pager .rz-button,
.rz-paginator .rz-button,
.rz-datepicker .rz-button,
.rz-calendar .rz-button,
.rz-password .rz-button,
.rz-dropdown .rz-button,
.rz-autocomplete .rz-button {
    min-height: unset !important;
    min-width: unset !important;
    border-radius: 0 !important;
}

/* Header actions: size and shape only — colors are now semantic per button/badge style */
.rz-card[class*="header-card"] .rz-button,
.rz-card[class*="header-card"] .action-button,
.page-header-card .rz-button,
.page-header-card .action-button {
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px !important;
}

.rz-card[class*="header-card"] .rz-splitbutton,
.page-header-card .rz-splitbutton {
    border-radius: 4px !important;
    overflow: hidden;
}

@media (max-width: 768px) {
    .ignite-header-button-group {
        justify-content: flex-end;
    }
}

/* ============================================================
   End Modern Text Messaging UI
   ============================================================ */

/* Global Radzen dialog background */
.rz-dialog,
.rz-dialog .rz-dialog-content,
.rz-dialog-side-content,
.rz-dialog-side-content .rz-dialog-content {
    background-color: #b7dee6 !important;
}

/* Keep dialog header/title bar white for contrast */
.rz-dialog .rz-dialog-titlebar,
.rz-dialog-side .rz-dialog-titlebar {
    background-color: #ffffff !important;
}

/* Filter row - pill-style buttons */
.tm-filter-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8px;
}

.tm-filter-btn.rz-button {
    border-radius: 20px !important;
    font-size: 13px !important;
    padding: 4px 14px !important;
    min-height: 30px !important;
}

.tm-filter-active.rz-button {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}

/* Search wrapper with inline icon */
.tm-search-wrapper {
    position: relative;
    margin: 6px 0;
}

.tm-search-wrapper .material-icons {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rz-text-tertiary-color);
    font-size: 18px;
    pointer-events: none;
    z-index: 1;
}

.tm-search-wrapper .rz-textbox {
    border-radius: 20px !important;
    padding-left: 34px !important;
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-border-color) !important;
}

.tm-search-input {
    width: 100%;
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
}

.tm-search-input::placeholder {
    color: var(--rz-text-tertiary-color) !important;
    opacity: 1;
}

/* Customer card - contact-list style */
.tm-customer-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    margin: 2px 0;
    cursor: pointer;
    color: var(--rz-text-color);
}

.tm-customer-meta {
    flex: 1;
    min-width: 0;
}

.tm-customer-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.tm-customer-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.tm-customer-date {
    font-size: 11px;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.packet-test-page {
    width: 8.5in;
    min-height: 11in;
    margin: 0 auto;
    padding: 0.2in;
    box-sizing: border-box;
    background: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    break-after: page;
    page-break-after: always;
}

.packet-test-page:last-child {
    break-after: auto;
    page-break-after: auto;
}

.packet-test-page__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.packet-test-page--4-square {
    position: relative;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

.four-square-report {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    font-family: "Arial", sans-serif;
    font-size: 0.88rem;
    line-height: 1.25;
    color: #000000;
}

.four-square-report__header {
    padding-top: 0.15rem;
}

.four-square-report__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    min-height: 45px;
}

.four-square-report__logo-shell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.four-square-report__logo {
    display: block;
    height: 45px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.four-square-report__field--source {
    flex: 1 1 auto;
    text-align: left;
    padding-top: 0.15rem;
    margin-left: 180px;
}

.four-square-report__line {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
    margin-bottom: 0.22rem;
}

.four-square-report__inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    white-space: nowrap;
}

.four-square-report__inline-field--full {
    width: 100%;
}

.four-square-report__meta-grid,
.four-square-report__client-grid,
.four-square-report__vehicle-grid {
    display: grid;
    gap: 0.3rem 0.75rem;
}

.four-square-report__meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.four-square-report__client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-square-report__vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.four-square-report__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.four-square-report__section {
    border: 1px solid #000000;
    padding: 0.45rem 0.5rem;
    background: #ffffff;
}

.four-square-report__section--disclosure {
    min-height: 4.2rem;
}

.four-square-report__section-title {
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #000000;
    padding-bottom: 0.2rem;
    margin-bottom: 0.3rem;
    letter-spacing: 0.02em;
}

.four-square-report__field {
    min-width: 0;
}

.four-square-report__field--wide {
    grid-column: span 2;
}

.four-square-report__label {
    font-weight: 700;
    margin-right: 0.2rem;
}

.four-square-report__value {
    word-break: break-word;
}

.four-square-report__choice-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.four-square-report__choice-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.four-square-report__choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid #000000;
    font-weight: 600;
}

.four-square-report__choice.is-selected {
    background: #d9d9d9;
}

.four-square-report__trade-rating {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.four-square-report__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.four-square-report__option {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid #000000;
    font-weight: 600;
}

.four-square-report__summary-value {
    min-height: 4rem;
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.four-square-report__footnote {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.four-square-report__disclosure {
    margin: 0;
    font-size: 0.83rem;
}

.four-square-report__signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

.four-square-report__signature {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.four-square-report__signature-label {
    font-weight: 700;
    white-space: nowrap;
}

.four-square-report__signature-line {
    flex: 1;
    border-bottom: 1px solid #000000;
    min-height: 1.2rem;
}

.packet-test-page__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.packet-test-page__detail {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.packet-print-shell {
    margin: 0 auto;
    padding: 0;
}

@media print {
    @page {
        margin: 0;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .packet-print-shell--internal {
        margin: 0 !important;
        padding: 0 !important;
    }

    .packet-print-shell--internal .rz-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .packet-test-page {
        margin: 0;
    }
}

.tm-customer-employee {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-customer-preview {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread indicator dot */
.tm-unread-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--rz-primary);
    flex-shrink: 0;
}

/* Avatar circle */
.tm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-info));
    color: var(--rz-on-primary);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
}

.tm-avatar.tm-avatar-md {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

/* Contact bar (replaces plain message-header) */
.tm-contact-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--rz-base-background-color, var(--rz-base-50));
    border-bottom: 1px solid var(--rz-border-color);
    flex-shrink: 0;
}

.tm-contact-details {
    flex: 1;
    min-width: 0;
}

.tm-contact-name {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rz-text-color);
}

.tm-contact-phone {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.tm-contact-action-button.rz-button {
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    margin-left: 4px;
}

.tm-channel-selector {
    padding: 8px 12px;
    border-bottom: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color, var(--rz-base-50));
}

.tm-department-filter {
    padding: 4px 12px 0;
    background: var(--rz-base-background-color, var(--rz-base-50));
}

.tm-full-width {
    width: 100%;
}

.tm-rounded-field {
    border-radius: 8px;
}

/* Date separator between message groups */
.tm-date-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
    color: var(--rz-text-tertiary-color);
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
}

.tm-date-separator::before,
.tm-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rz-border-color);
}

/* Message rows */
.tm-message-row {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    margin-bottom: 6px;
}

.tm-message-row.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.tm-message-row.received {
    align-self: flex-start;
    align-items: flex-start;
}

/* Bubbles */
.tm-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    word-wrap: break-word;
    font-size: 15px;
    line-height: 1.4;
}

.tm-bubble.sent {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    border-bottom-right-radius: 4px;
}

.tm-bubble.received {
    background: var(--rz-base-100);
    color: var(--rz-on-base);
    border: 1px solid var(--rz-border-color);
    border-bottom-left-radius: 4px;
}

/* Department/AI number label inside bubble */
.tm-from-number {
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 3px;
}

/* Bubble metadata (timestamp / sender name) */
.tm-bubble-meta {
    font-size: 11px;
    color: var(--rz-text-tertiary-color);
    margin-top: 3px;
    padding: 0 4px;
}

.tm-bubble-meta-sent {
    text-align: right;
}

/* Image bubbles */
.tm-bubble-img,
.tm-bubble-img-recv {
    margin-bottom: 4px;
    border-radius: 12px;
    overflow: hidden;
}

.tm-msg-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    display: block;
    margin-left: auto;
}

.tm-img-fallback {
    display: none;
    background: var(--rz-base-background-color, var(--rz-base-50));
    border: 2px dashed var(--rz-border-color);
    padding: 20px;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-size: 13px;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 160px;
}

.tm-image-fallback-icon {
    font-size: 24px;
}

.tm-image-fallback-meta {
    font-size: 11px;
}

.tm-message-text,
.tm-history-body,
.tm-call-notes,
.tm-translated-text {
    white-space: pre-wrap;
}

.tm-translate-action {
    margin-top: 6px;
}

.tm-translate-button.rz-button {
    min-width: 0 !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: var(--rz-primary) !important;
}

.tm-translated-text {
    margin-top: 4px;
    font-size: 14px;
    color: var(--rz-info);
}

.tm-loading-panel {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.tm-history-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: inherit;
}

.tm-history-body {
    font-size: 13px;
}

.tm-call-status {
    font-size: 12px;
}

.tm-call-notes {
    font-size: 13px;
    margin-top: 4px;
}

/* Compose bar */
.tm-compose-bar {
    padding: 8px 12px;
    background: var(--rz-base-background-color, var(--rz-base-50));
    border-top: 1px solid var(--rz-border-color);
    flex-shrink: 0;
}

.tm-compose-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
}

.tm-compose-actions .rz-button {
    color: var(--rz-text-secondary-color) !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

.tm-compose-actions .rz-button:hover {
    background: var(--rz-base-100) !important;
    color: var(--rz-primary) !important;
}

/* Input wrapper - pill containing textarea + emoji */
.tm-compose-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.tm-input-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: var(--rz-base-background-color, var(--rz-base-50));
    border-radius: 20px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--rz-border-color);
    min-height: 40px;
}

.tm-input-wrapper .rz-textarea {
    border: none !important;
    outline: none !important;
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    resize: none !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    max-height: 120px;
    color: var(--rz-text-color) !important;
}

.tm-input-wrapper .rz-textarea::placeholder {
    color: var(--rz-text-tertiary-color) !important;
    opacity: 1;
}

.tm-compose-textarea {
    width: 100%;
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
}

.tm-input-wrapper textarea,
.tm-input-wrapper .rz-inputtext {
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
}

/* Speech-to-text mic button */
.tm-mic-btn.rz-button {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Send button */
.tm-send-btn.rz-button {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Text messaging layout parity (legacy) */
.text-messaging-container {
    height: calc(100vh - var(--header-height, 64px) - 10px);
    width: 100%;
    overflow: hidden;
}

.text-messaging-grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    height: 100%;
    grid-gap: 0.5rem;
    overflow: hidden;
}

.text-messaging-grid2 {
    display: grid;
    grid-template-columns: 70% 30%;
    height: 100%;
    grid-gap: 0.5rem;
}

.customer-list-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.search-area {
    padding: 0.5rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.filter-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.customer-grid-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tm-customer-grid {
    height: 100%;
    --rz-grid-header-background-color: var(--rz-base-background-color, var(--rz-base-50));
    --rz-grid-header-color: var(--rz-text-color);
}

.tm-customer-grid,
.tm-customer-grid .rz-data-grid,
.tm-customer-grid .rz-datatable,
.tm-customer-grid .rz-datatable-wrapper,
.tm-customer-grid .rz-datatable-scrollable-wrapper {
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
}

.tm-customer-grid .rz-datatable-scrollable-header,
.tm-customer-grid .rz-datatable-header,
.tm-customer-grid .rz-grid-table thead,
.tm-customer-grid .rz-grid-table thead tr,
.tm-customer-grid .rz-grid-table thead th,
.tm-customer-grid .rz-grid-table thead th .rz-column-title,
.tm-customer-grid .rz-grid-table thead th .rz-cell-data,
.tm-customer-grid thead,
.tm-customer-grid thead tr,
.tm-customer-grid thead th,
.tm-customer-grid .rz-datatable-thead > tr > th,
.tm-customer-grid .rz-datatable-thead th,
.tm-customer-grid .rz-column-title,
.tm-customer-grid .rz-paginator,
.tm-customer-grid .rz-pager {
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    background-color: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-border-color) !important;
}

.tm-customer-grid .rz-datatable-data > tr,
.tm-customer-grid .rz-datatable-data > tr > td {
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-border-color) !important;
}

.tm-customer-grid .rz-paginator .rz-paginator-element,
.tm-customer-grid .rz-pager .rz-paginator-element,
.tm-customer-grid .rz-paginator .rz-button,
.tm-customer-grid .rz-pager .rz-button {
    background: var(--rz-base-background-color, var(--rz-base-50)) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-border-color) !important;
}

.tm-customer-grid .rz-paginator .rz-state-active,
.tm-customer-grid .rz-pager .rz-state-active {
    background: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
    border-color: var(--rz-primary) !important;
}

.customer-card {
    padding: 0.5rem;
    border-radius: 0.5rem;
    position: relative;
    margin-bottom: 0.5rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-text-color) 10%, transparent);
}

.unread-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.customer-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.customer-name {
    font-weight: bold;
    font-size: 1rem;
}

.message-date {
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
}

.employee-name {
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.message-preview {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--rz-base-25);
    border-radius: 0.5rem;
    overflow: hidden;
}

.message-header {
    padding: 1rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border-bottom: 1px solid var(--rz-border-color);
}

.message-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: var(--rz-base-25);
}

.message-thread {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 4px 0;
}

.message-tools {
    padding: 0.5rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border-top: 1px solid var(--rz-border-color);
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.message-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.message-input {
    flex: 1;
    resize: none;
    border-radius: 1.5rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color, var(--rz-base-50));
    color: var(--rz-text-color);
}

.send-button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-selection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-secondary-color);
    font-size: 1.2rem;
}

.tools-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 1rem;
    padding: 0.5rem;
}

.customer-info {
    padding: 1rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border-radius: 0.5rem;
    border: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-text-color) 10%, transparent);
}

.customer-actions {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.communication-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.templates-section,
.reviews-section,
.inventory-section {
    padding: 1rem;
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border-radius: 0.5rem;
    border: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-text-color) 10%, transparent);
}

.templates-section h5,
.reviews-section h5,
.inventory-section h5 {
    color: var(--rz-text-color);
    margin-top: 0;
}

.template-type-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.template-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-color);
}

.review-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tm-review-button.rz-button {
    width: 100%;
    margin-bottom: 8px;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-border-color) !important;
}

.inventory-search {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.tm-inventory-search-field {
    flex: 1;
}

.tm-clear-button.rz-button {
    white-space: nowrap;
    min-height: 25px !important;
    min-width: 25px !important;
    position: relative;
    top: -5px;
}

.tm-nowrap-button {
    white-space: nowrap;
}

.inventory-results {
    height: 250px;
    overflow: hidden;
}

.tm-inventory-grid {
    height: 200px;
}

.inventory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-color);
}

.tm-inventory-media {
    max-height: 100px;
    max-width: 100%;
}

.tm-helper-text {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    margin-bottom: 8px;
}

.inventory-actions {
    display: flex;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .text-messaging-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .customer-list-column {
        height: 60vh;
    }

    .tools-column {
        height: auto;
    }
}

.credit-application-print-host {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.credit-application-print {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #111827;
}

.credit-application-print-page {
    width: 8.5in;
    min-height: 11in;
    padding: 0.3in 0.34in;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.1in;
}

.credit-application-print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25in;
    border-bottom: 2px solid #1f2937;
    padding-bottom: 0.12in;
}

.credit-application-print-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

.credit-application-print-subtitle,
.credit-application-print-meta {
    font-size: 10px;
    line-height: 1.25;
}

.credit-application-print-section {
    border: 1px solid #d1d5db;
    padding: 0.08in;
}

.credit-application-print-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.05in;
}

.credit-application-print-paragraph {
    font-size: 9px;
    line-height: 1.2;
    margin-bottom: 0.04in;
}

.credit-application-print-paragraph:last-child {
    margin-bottom: 0;
}

.credit-application-print-option-row {
    display: grid;
    grid-template-columns: 0.28in 1fr;
    gap: 0.08in;
    align-items: start;
    margin-bottom: 0.06in;
}

.credit-application-print-option-row:last-child {
    margin-bottom: 0;
}

.credit-application-print-option-check {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    padding-top: 0.01in;
}

.credit-application-print-grid {
    display: grid;
    gap: 0.06in;
}

.credit-application-print-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.credit-application-print-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.credit-application-print-grid-income {
    grid-template-columns: 1.1fr 1.9fr;
}

.credit-application-print-field {
    min-width: 0;
}

.credit-application-print-field-span-2 {
    grid-column: span 2;
}

.credit-application-print-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.02in;
}

.credit-application-print-value {
    min-height: 0.18in;
    border-bottom: 1px solid #111827;
    font-size: 9px;
    line-height: 1.2;
    padding: 0.01in 0.01in;
    white-space: pre-wrap;
    word-break: break-word;
}

.credit-application-print-frequency-value {
    display: flex;
    justify-content: space-between;
    gap: 0.08in;
    white-space: nowrap;
}

.credit-application-signature-block {
    margin-top: auto;
    padding-top: 0.12in;
}

.credit-application-signature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.35in minmax(0, 1fr) 1.35in;
    gap: 0.18in;
    margin-top: 0.16in;
    align-items: end;
}

.credit-application-signature-line,
.credit-application-signature-date {
    position: relative;
    min-height: 0.3in;
    border-bottom: 1px solid #111827;
}

.credit-application-signature-line span,
.credit-application-signature-date span {
    position: absolute;
    left: 0;
    bottom: -0.22in;
    font-size: 9px;
}

.credit-application-print-page-compact {
    min-height: 10.3in;
}

.credit-application-print-section-tight {
    padding: 0.06in 0.07in;
}

.credit-application-print-party-grid,
.credit-application-print-reference-grid {
    display: grid;
    gap: 0.08in;
}

.credit-application-print-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.08in;
}

.credit-application-print-grid-tight {
    gap: 0.05in;
}

.credit-application-print-subsection {
    margin-top: 0.07in;
}

.credit-application-print-subsection-title,
.credit-application-print-reference-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.04in;
}

.credit-application-print-reference-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.08in;
}

.credit-application-print-reference-card {
    border: 1px solid #e5e7eb;
    padding: 0.05in;
}

.credit-application-print-page-break {
    break-before: page;
    page-break-before: always;
}

@media print {
    @page {
        size: Letter portrait;
        margin: 0.35in;
    }

    .credit-application-print-host {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .credit-application-print-page {
        min-height: 0;
        padding: 0.22in 0.24in;
        gap: 0.07in;
    }

    .credit-application-print-header {
        padding-bottom: 0.08in;
    }

    .credit-application-print-title {
        font-size: 15px;
    }

    .credit-application-print-subtitle,
    .credit-application-print-meta,
    .credit-application-print-paragraph {
        font-size: 8px;
        line-height: 1.1;
    }

    .credit-application-print-section,
    .credit-application-print-section-tight,
    .credit-application-print-reference-card {
        padding: 0.04in 0.05in;
    }

    .credit-application-print-section-title,
    .credit-application-print-subsection-title,
    .credit-application-print-reference-title {
        font-size: 8px;
        margin-bottom: 0.02in;
    }

    .credit-application-print-label {
        font-size: 6.5px;
        margin-bottom: 0.01in;
    }

    .credit-application-print-value {
        min-height: 0.12in;
        font-size: 7.5px;
        line-height: 1.05;
        padding: 0.005in;
    }

    .credit-application-print-subsection {
        margin-top: 0.04in;
    }

    .credit-application-print-party-grid,
    .credit-application-print-reference-grid,
    .credit-application-print-reference-list {
        display: block;
    }

    .credit-application-print-grid-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .credit-application-print-grid-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .credit-application-print-field-span-2 {
        grid-column: 1 / -1;
    }

    .credit-application-print-party-grid > .credit-application-print-section,
    .credit-application-print-reference-grid > .credit-application-print-section,
    .credit-application-print-reference-list > .credit-application-print-reference-card {
        margin-top: 0.05in;
    }

    .credit-application-print-party-grid > .credit-application-print-section:first-child,
    .credit-application-print-reference-grid > .credit-application-print-section:first-child,
    .credit-application-print-reference-list > .credit-application-print-reference-card:first-child {
        margin-top: 0;
    }

    .credit-application-print-option-grid,
    .credit-application-print-grid,
    .credit-application-signature-row {
        break-inside: auto;
        page-break-inside: auto;
    }

    .credit-application-signature-row {
        grid-template-columns: minmax(0, 1fr) 1in minmax(0, 1fr) 1in;
        gap: 0.12in;
        margin-top: 0.1in;
    }

    .credit-application-signature-line,
    .credit-application-signature-date {
        min-height: 0.22in;
    }

    .credit-application-signature-line span,
    .credit-application-signature-date span {
        bottom: -0.16in;
        font-size: 7.5px;
    }
}
.talon-phase3-response {
    min-height: 24rem;
    max-height: 40rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 1rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}
.ignite-video-dialog,
.ignite-public-video-page {
    width: 100%;
}

.ignite-public-video-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--rz-base-background-color, var(--rz-base-50));
}

.ignite-public-video-card {
    width: min(1120px, 100%);
}

.ignite-video-status-card,
.ignite-video-panel,
.ignite-video-link-card {
    background: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-border-color);
}

.ignite-video-title,
.ignite-video-panel-title {
    color: var(--rz-text-color);
    margin: 0;
}

.ignite-video-muted {
    color: var(--rz-text-secondary-color);
    margin: 0;
}

.ignite-video-panel {
    height: 100%;
}

.ignite-video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 220px;
    max-height: 45vh;
    overflow: hidden;
    border-radius: 8px;
    background: var(--rz-base-900, #111827);
    border: 1px solid var(--rz-border-color);
}

.ignite-video-stage-waiting {
    background: var(--rz-base-100);
}

.ignite-video-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ignite-video-playback-media {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    background: var(--rz-base-900, #111827);
    border-radius: 8px;
}

.ignite-video-waiting {
    position: absolute;
    inset: 0;
    min-height: 100%;
}

.ignite-video-link-text {
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
    font-family: var(--rz-font-family);
}

.ignite-video-actions .rz-button {
    min-height: 44px;
}

@media (max-width: 768px) {
    .ignite-public-video-page {
        align-items: flex-start;
        padding: 0.75rem;
    }

    .ignite-video-stage {
        min-height: 190px;
    }
}