/*
 * BusinessManager flat application page headers.
 * Keeps page identity, breadcrumbs, icons and actions without placing the
 * header inside a card. Content cards/panels remain unchanged.
 */

/* Flat header surface used by entity CRUD, reports and configuration pages. */
.bm-page > .bm-page-header,
.bm-page.customer-page > .bm-page-header,
.bm-page.employee-page > .bm-page-header,
.operations-crud-page > .operations-page-header,
.report-page > .bm-page-header,
.configuration-page-header {
    position: relative;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bm-page.customer-page > .bm-page-header::after,
.bm-page.employee-page > .bm-page-header::after,
.operations-crud-page > .operations-page-header::after,
.report-page > .bm-page-header::after,
.configuration-page-header::after {
    display: none;
    content: none;
}

/* Keep the same compact icon language and Customer palette everywhere. */
.customer-title-icon,
.employee-title-icon,
.operations-title-icon,
.report-title-icon,
.configuration-title-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    font-size: 1.25rem;
}

.customer-title-icon {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

.employee-title-icon {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

.operations-title-icon {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

.report-title-icon {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

.configuration-title-icon {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

.customer-title-icon-danger,
.employee-title-icon-danger,
.operations-title-icon-danger,
.configuration-title-icon-danger {
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
}

.customer-title-icon-profile,
.employee-title-icon-profile {
    color: var(--customer-brand, #2563eb);
    background: rgba(37, 99, 235, .09);
}

/* Cleaner hierarchy: breadcrumb, small section label, title, supporting copy. */
.bm-page-header .bm-breadcrumb,
.configuration-page-header .bm-breadcrumb {
    margin-bottom: .85rem;
}

.bm-page-header .bm-page-kicker,
.configuration-page-header .bm-page-kicker {
    margin-bottom: .3rem;
    letter-spacing: .08em;
}

.bm-page-header .bm-page-description,
.configuration-page-header .bm-page-description {
    max-width: 780px;
}

/* Actions stay visually separate from the title rather than floating in a card. */
.bm-page-header .bm-page-actions .btn,
.configuration-page-header .bm-page-actions .btn {
    min-height: 44px;
    border-radius: 11px;
    box-shadow: none;
}

.customer-page .customer-primary-action,
.operations-crud-page .operations-primary-action {
    min-height: 44px;
    box-shadow: none;
}

/* Configuration pages use the same lockup as the entity modules. */
.configuration-title-lockup {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 1rem;
}

.configuration-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.configuration-page-header .bm-page-header-main {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .bm-page > .bm-page-header,
    .operations-crud-page > .operations-page-header,
    .report-page > .bm-page-header,
    .configuration-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bm-page-header .bm-page-actions,
    .configuration-page-header .bm-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/*
 * Unified CRUD hero treatment.
 * Matches the Dashboard Layouts header card across the primary management
 * modules while preserving each view's existing breadcrumbs, actions,
 * permissions, status badges and contextual-help component.
 */
.customer-page > .bm-page-header,
.employee-page > .bm-page-header,
.estimate-page > .bm-page-header,
.work-order-page > .bm-page-header,
.bm-schedule-page > .bm-page-header,
.invoice-page > .bm-page-header,
.payment-page > .bm-page-header ,
.services-page > .bm-page-header  {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}

.customer-page > .bm-page-header::after,
.employee-page > .bm-page-header::after,
.estimate-page > .bm-page-header::after,
.work-order-page > .bm-page-header::after,
.bm-schedule-page > .bm-page-header::after,
.invoice-page > .bm-page-header::after,
.payment-page > .bm-page-header::after ,
.services-page > .bm-page-header::after  {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    top: -130px;
    right: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.customer-page > .bm-page-header > *,
.employee-page > .bm-page-header > *,
.estimate-page > .bm-page-header > *,
.work-order-page > .bm-page-header > *,
.bm-schedule-page > .bm-page-header > *,
.invoice-page > .bm-page-header > *,
.payment-page > .bm-page-header > * ,
.services-page > .bm-page-header > *  {
    position: relative;
    z-index: 1;
}

.customer-page > .bm-page-header .bm-page-header-main,
.employee-page > .bm-page-header .bm-page-header-main,
.estimate-page > .bm-page-header .bm-page-header-main,
.work-order-page > .bm-page-header .bm-page-header-main,
.bm-schedule-page > .bm-page-header .bm-page-header-main,
.invoice-page > .bm-page-header .bm-page-header-main,
.payment-page > .bm-page-header .bm-page-header-main ,
.services-page > .bm-page-header .bm-page-header-main  {
    min-width: 0;
    flex: 1 1 auto;
}

.customer-page > .bm-page-header .bm-page-title,
.employee-page > .bm-page-header .bm-page-title,
.estimate-page > .bm-page-header .bm-page-title,
.work-order-page > .bm-page-header .bm-page-title,
.bm-schedule-page > .bm-page-header .bm-page-title,
.invoice-page > .bm-page-header .bm-page-title,
.payment-page > .bm-page-header .bm-page-title ,
.services-page > .bm-page-header .bm-page-title  {
    margin: .25rem 0 .45rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

.customer-page > .bm-page-header .bm-page-kicker,
.employee-page > .bm-page-header .bm-page-kicker,
.estimate-page > .bm-page-header .bm-page-kicker,
.work-order-page > .bm-page-header .bm-page-kicker,
.bm-schedule-page > .bm-page-header .bm-page-kicker,
.invoice-page > .bm-page-header .bm-page-kicker,
.payment-page > .bm-page-header .bm-page-kicker ,
.services-page > .bm-page-header .bm-page-kicker  {
    color: #dbeafe !important;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.customer-page > .bm-page-header .bm-page-description,
.employee-page > .bm-page-header .bm-page-description,
.estimate-page > .bm-page-header .bm-page-description,
.work-order-page > .bm-page-header .bm-page-description,
.bm-schedule-page > .bm-page-header .bm-page-description,
.invoice-page > .bm-page-header .bm-page-description,
.payment-page > .bm-page-header .bm-page-description,
.services-page > .bm-page-header .bm-page-description,
.customer-page > .bm-page-header p,
.employee-page > .bm-page-header p,
.estimate-page > .bm-page-header p,
.work-order-page > .bm-page-header p,
.bm-schedule-page > .bm-page-header p,
.invoice-page > .bm-page-header p,
.payment-page > .bm-page-header p ,
.services-page > .bm-page-header p  {
    max-width: 780px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
}

.customer-page > .bm-page-header .bm-breadcrumb,
.employee-page > .bm-page-header .bm-breadcrumb,
.estimate-page > .bm-page-header .bm-breadcrumb,
.work-order-page > .bm-page-header .bm-breadcrumb,
.bm-schedule-page > .bm-page-header .bm-breadcrumb,
.invoice-page > .bm-page-header .bm-breadcrumb,
.payment-page > .bm-page-header .bm-breadcrumb ,
.services-page > .bm-page-header .bm-breadcrumb  {
    margin: 0 0 .8rem;
}

.customer-page > .bm-page-header .bm-breadcrumb li,
.customer-page > .bm-page-header .bm-breadcrumb a,
.customer-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.employee-page > .bm-page-header .bm-breadcrumb li,
.employee-page > .bm-page-header .bm-breadcrumb a,
.employee-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.estimate-page > .bm-page-header .bm-breadcrumb li,
.estimate-page > .bm-page-header .bm-breadcrumb a,
.estimate-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.work-order-page > .bm-page-header .bm-breadcrumb li,
.work-order-page > .bm-page-header .bm-breadcrumb a,
.work-order-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.bm-schedule-page > .bm-page-header .bm-breadcrumb li,
.bm-schedule-page > .bm-page-header .bm-breadcrumb a,
.bm-schedule-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.invoice-page > .bm-page-header .bm-breadcrumb li,
.invoice-page > .bm-page-header .bm-breadcrumb a,
.invoice-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.payment-page > .bm-page-header .bm-breadcrumb li,
.services-page > .bm-page-header .bm-breadcrumb li,
.payment-page > .bm-page-header .bm-breadcrumb a,
.services-page > .bm-page-header .bm-breadcrumb a,
.payment-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator ,
.services-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator  {
    color: rgba(255, 255, 255, .76) !important;
}

.customer-page > .bm-page-header .bm-page-actions,
.employee-page > .bm-page-header .bm-page-actions,
.estimate-page > .bm-page-header .bm-page-actions,
.work-order-page > .bm-page-header .bm-page-actions,
.bm-schedule-page > .bm-page-header .bm-page-actions,
.invoice-page > .bm-page-header .bm-page-actions,
.payment-page > .bm-page-header .bm-page-actions ,
.services-page > .bm-page-header .bm-page-actions  {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.customer-page > .bm-page-header .bm-page-actions .btn,
.employee-page > .bm-page-header .bm-page-actions .btn,
.estimate-page > .bm-page-header .bm-page-actions .btn,
.work-order-page > .bm-page-header .bm-page-actions .btn,
.bm-schedule-page > .bm-page-header .bm-page-actions .btn,
.invoice-page > .bm-page-header .bm-page-actions .btn,
.payment-page > .bm-page-header .bm-page-actions .btn ,
.services-page > .bm-page-header .bm-page-actions .btn  {
    min-height: 44px;
    border-color: rgba(255, 255, 255, .6);
    border-radius: 11px;
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.customer-page > .bm-page-header .bm-page-actions .btn:hover,
.employee-page > .bm-page-header .bm-page-actions .btn:hover,
.estimate-page > .bm-page-header .bm-page-actions .btn:hover,
.work-order-page > .bm-page-header .bm-page-actions .btn:hover,
.bm-schedule-page > .bm-page-header .bm-page-actions .btn:hover,
.invoice-page > .bm-page-header .bm-page-actions .btn:hover,
.payment-page > .bm-page-header .bm-page-actions .btn:hover ,
.services-page > .bm-page-header .bm-page-actions .btn:hover  {
    color: #1e40af;
    border-color: #fff;
    background: #eff6ff;
}

/* Keep status badges readable when they are displayed alongside a CRUD title. */
.customer-page > .bm-page-header .bm-badge,
.employee-page > .bm-page-header .bm-badge,
.estimate-page > .bm-page-header .bm-badge,
.work-order-page > .bm-page-header .bm-badge,
.bm-schedule-page > .bm-page-header .bm-badge,
.invoice-page > .bm-page-header .bm-badge,
.payment-page > .bm-page-header .bm-badge ,
.services-page > .bm-page-header .bm-badge  {
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .1);
}

@media (max-width: 991.98px) {
    .customer-page > .bm-page-header,
    .employee-page > .bm-page-header,
    .estimate-page > .bm-page-header,
    .work-order-page > .bm-page-header,
    .bm-schedule-page > .bm-page-header,
    .invoice-page > .bm-page-header,
    .payment-page > .bm-page-header ,
    .services-page > .bm-page-header  {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.6rem;
    }

    .customer-page > .bm-page-header .bm-page-actions,
    .employee-page > .bm-page-header .bm-page-actions,
    .estimate-page > .bm-page-header .bm-page-actions,
    .work-order-page > .bm-page-header .bm-page-actions,
    .bm-schedule-page > .bm-page-header .bm-page-actions,
    .invoice-page > .bm-page-header .bm-page-actions,
    .payment-page > .bm-page-header .bm-page-actions ,
    .services-page > .bm-page-header .bm-page-actions  {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .customer-page > .bm-page-header,
    .employee-page > .bm-page-header,
    .estimate-page > .bm-page-header,
    .work-order-page > .bm-page-header,
    .bm-schedule-page > .bm-page-header,
    .invoice-page > .bm-page-header,
    .payment-page > .bm-page-header ,
    .services-page > .bm-page-header  {
        padding: 1.35rem;
        border-radius: 18px;
    }

    .customer-page > .bm-page-header .bm-page-actions > *,
    .employee-page > .bm-page-header .bm-page-actions > *,
    .estimate-page > .bm-page-header .bm-page-actions > *,
    .work-order-page > .bm-page-header .bm-page-actions > *,
    .bm-schedule-page > .bm-page-header .bm-page-actions > *,
    .invoice-page > .bm-page-header .bm-page-actions > *,
    .payment-page > .bm-page-header .bm-page-actions > * ,
    .services-page > .bm-page-header .bm-page-actions > *  {
        flex: 1 1 100%;
        width: 100%;
    }

    .customer-page > .bm-page-header .bm-page-actions .btn,
    .employee-page > .bm-page-header .bm-page-actions .btn,
    .estimate-page > .bm-page-header .bm-page-actions .btn,
    .work-order-page > .bm-page-header .bm-page-actions .btn,
    .bm-schedule-page > .bm-page-header .bm-page-actions .btn,
    .invoice-page > .bm-page-header .bm-page-actions .btn,
    .payment-page > .bm-page-header .bm-page-actions .btn ,
    .services-page > .bm-page-header .bm-page-actions .btn  {
        width: 100%;
        justify-content: center;
    }
}


/*
 * Customer and employee hero correction.
 * These selectors intentionally match the specificity of the earlier flat
 * header reset so the gradient cannot be replaced by transparent backgrounds.
 */
.bm-page.customer-page > .bm-page-header,
.bm-page.employee-page > .bm-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}

.bm-page.customer-page > .bm-page-header::after,
.bm-page.employee-page > .bm-page-header::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    top: -130px;
    right: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.bm-page.customer-page > .bm-page-header > *,
.bm-page.employee-page > .bm-page-header > * {
    position: relative;
    z-index: 1;
}

.bm-page.customer-page > .bm-page-header .customer-title-icon,
.bm-page.employee-page > .bm-page-header .employee-title-icon {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
}

.bm-page.customer-page > .bm-page-header .bm-page-title,
.bm-page.employee-page > .bm-page-header .bm-page-title,
.bm-page.customer-page > .bm-page-header .bm-page-kicker,
.bm-page.employee-page > .bm-page-header .bm-page-kicker,
.bm-page.customer-page > .bm-page-header .bm-page-description,
.bm-page.employee-page > .bm-page-header .bm-page-description {
    color: #fff !important;
}

.bm-page.customer-page > .bm-page-header .bm-page-kicker,
.bm-page.employee-page > .bm-page-header .bm-page-kicker {
    color: #dbeafe !important;
}

.bm-page.customer-page > .bm-page-header .bm-page-description,
.bm-page.employee-page > .bm-page-header .bm-page-description {
    color: rgba(255, 255, 255, .88) !important;
}

.bm-page.customer-page > .bm-page-header .bm-breadcrumb,
.bm-page.customer-page > .bm-page-header .bm-breadcrumb a,
.bm-page.customer-page > .bm-page-header .bm-breadcrumb li,
.bm-page.customer-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.bm-page.employee-page > .bm-page-header .bm-breadcrumb,
.bm-page.employee-page > .bm-page-header .bm-breadcrumb a,
.bm-page.employee-page > .bm-page-header .bm-breadcrumb li,
.bm-page.employee-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator {
    color: rgba(255, 255, 255, .78) !important;
}

.bm-page.customer-page > .bm-page-header .bm-page-actions .btn,
.bm-page.employee-page > .bm-page-header .bm-page-actions .btn {
    min-height: 44px;
    border-color: rgba(255, 255, 255, .6);
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.bm-page.customer-page > .bm-page-header .bm-page-actions .btn:hover,
.bm-page.employee-page > .bm-page-header .bm-page-actions .btn:hover {
    color: #1e40af;
    border-color: #fff;
    background: #eff6ff;
}

@media (max-width: 991.98px) {
    .bm-page.customer-page > .bm-page-header,
    .bm-page.employee-page > .bm-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.6rem;
    }

    .bm-page.customer-page > .bm-page-header .bm-page-actions,
    .bm-page.employee-page > .bm-page-header .bm-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .bm-page.customer-page > .bm-page-header,
    .bm-page.employee-page > .bm-page-header {
        padding: 1.35rem;
        border-radius: 18px;
    }

    .bm-page.customer-page > .bm-page-header .bm-page-actions > *,
    .bm-page.employee-page > .bm-page-header .bm-page-actions > * {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Standard business-facing hero shared by management and administration CRUD pages. */
.business-facing-hero,
.configuration-page-header.business-facing-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 190px;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}

.business-facing-hero::after,
.configuration-page-header.business-facing-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 300px;
    height: 300px;
    right: -95px;
    top: -145px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.business-facing-hero > *,
.configuration-page-header.business-facing-hero > * { position: relative; z-index: 1; }
.business-facing-hero h1,
.business-facing-hero .bm-page-title { color: #fff !important; }
.business-facing-hero p,
.business-facing-hero .bm-page-description { color: rgba(255, 255, 255, .88) !important; }
.business-facing-hero .bm-page-kicker,
.business-facing-hero .configuration-hero-kicker { color: #dbeafe !important; }

/* Keep breadcrumbs readable on every shared blue business-facing hero. */
.business-facing-hero .bm-breadcrumb,
.business-facing-hero .bm-breadcrumb li,
.business-facing-hero .bm-breadcrumb a,
.business-facing-hero .bm-breadcrumb .bm-breadcrumb-separator,
.configuration-page-header.business-facing-hero .bm-breadcrumb,
.configuration-page-header.business-facing-hero .bm-breadcrumb li,
.configuration-page-header.business-facing-hero .bm-breadcrumb a,
.configuration-page-header.business-facing-hero .bm-breadcrumb .bm-breadcrumb-separator {
    color: #fff !important;
}

.business-facing-hero .bm-breadcrumb a:hover,
.configuration-page-header.business-facing-hero .bm-breadcrumb a:hover {
    color: #fff !important;
    text-decoration: underline;
}
.business-facing-hero .configuration-title-icon {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
}
.business-facing-hero .bm-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.business-facing-hero .bm-page-actions .btn,
.business-facing-hero .configuration-hero-action {
    border-color: rgba(255, 255, 255, .6);
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.business-facing-hero .bm-page-actions .btn:hover,
.business-facing-hero .configuration-hero-action:hover {
    color: #1e40af;
    border-color: #fff;
    background: #eff6ff;
}
@media (max-width: 767.98px) {
    .business-facing-hero,
    .configuration-page-header.business-facing-hero {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        padding: 1.45rem;
    }
    .business-facing-hero .bm-page-actions { width: 100%; justify-content: stretch; }
    .business-facing-hero .bm-page-actions .btn,
    .business-facing-hero .configuration-hero-action { width: 100%; }
}

/* Help Center uses the same business-facing hero standard. */
.help-page .help-center-hero {
    width: 100%;
}
.help-page .help-center-hero h1 {
    max-width: 100%;
}
.help-page .help-article-page-hero p {
    max-width: 72rem;
}
@media (max-width: 767.98px) {
    .help-page .help-center-hero .configuration-hero-action {
        width: 100%;
        justify-content: center;
    }
}

/* Customer Messages uses the same authoritative business-facing hero palette. */
.configuration-dashboard-hero.business-facing-hero.customer-messages-hero,
.configuration-page-header.business-facing-hero.customer-messages-hero {
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%) !important;
    background-color: #2563eb !important;
}

/* Release B: keep Recurring Services visually aligned with Work Orders and Services. */
.recurring-services-page > .bm-page-header {
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    color: #fff;
}
.recurring-services-page > .bm-page-header .bm-page-title,
.recurring-services-page > .bm-page-header .bm-page-kicker,
.recurring-services-page > .bm-page-header .bm-page-description,
.recurring-services-page > .bm-page-header .bm-breadcrumb,
.recurring-services-page > .bm-page-header .bm-breadcrumb a { color: #fff; }

/* Expense category management uses the same entity hero language as other CRUD modules. */
.expense-categories-page > .bm-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}

.expense-categories-page > .bm-page-header::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    top: -130px;
    right: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.expense-categories-page > .bm-page-header > * {
    position: relative;
    z-index: 1;
}

.expense-categories-page > .bm-page-header .bm-page-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.expense-categories-page > .bm-page-header .operations-title-icon {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
}

.expense-categories-page > .bm-page-header .bm-page-title {
    margin: .25rem 0 .45rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

.expense-categories-page > .bm-page-header .bm-page-kicker {
    color: #dbeafe !important;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.expense-categories-page > .bm-page-header .bm-page-description,
.expense-categories-page > .bm-page-header p {
    max-width: 780px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
}

.expense-categories-page > .bm-page-header .bm-breadcrumb {
    margin: 0 0 .8rem;
}

.expense-categories-page > .bm-page-header .bm-breadcrumb,
.expense-categories-page > .bm-page-header .bm-breadcrumb li,
.expense-categories-page > .bm-page-header .bm-breadcrumb a,
.expense-categories-page > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator {
    color: rgba(255, 255, 255, .76) !important;
}

.expense-categories-page > .bm-page-header .bm-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.expense-categories-page > .bm-page-header .bm-page-actions .btn {
    min-height: 44px;
    border-color: rgba(255, 255, 255, .6);
    border-radius: 11px;
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.expense-categories-page > .bm-page-header .bm-page-actions .btn:hover {
    color: #1e40af;
    border-color: #fff;
    background: #eff6ff;
}

@media (max-width: 991.98px) {
    .expense-categories-page > .bm-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.6rem;
    }

    .expense-categories-page > .bm-page-header .bm-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .expense-categories-page > .bm-page-header {
        padding: 1.35rem;
        border-radius: 18px;
    }

    .expense-categories-page > .bm-page-header .bm-page-actions > *,
    .expense-categories-page > .bm-page-header .bm-page-actions .btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
}

/*
 * Expense management hero alignment.
 * Keep Expenses, Recurring Expenses, Vendors / Payees and Expense Categories
 * visually identical to the Recurring Services hero treatment.
 */
:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(125deg, #1d4ed8 0%, #2563eb 52%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    top: -130px;
    right: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header > * {
    position: relative;
    z-index: 1;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .operations-title-icon {
    color: var(--ops-module-color, #2563eb);
    border: 1px solid rgba(255, 255, 255, .72);
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-title {
    margin: .25rem 0 .45rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-kicker {
    color: #dbeafe !important;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-description,
:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header p {
    max-width: 780px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-breadcrumb {
    margin: 0 0 .8rem;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-breadcrumb,
:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-breadcrumb li,
:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-breadcrumb a,
:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-breadcrumb .bm-breadcrumb-separator {
    color: rgba(255, 255, 255, .76) !important;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions .btn {
    min-height: 44px;
    border-color: rgba(255, 255, 255, .6);
    border-radius: 11px;
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

:is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions .btn:hover {
    color: #1e40af;
    border-color: #fff;
    background: #eff6ff;
}

@media (max-width: 991.98px) {
    :is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.6rem;
    }

    :is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    :is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header {
        padding: 1.35rem;
        border-radius: 18px;
    }

    :is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions > *,
    :is(.expense-page, .recurring-expenses-page, .vendors-page, .expense-categories-page) > .bm-page-header .bm-page-actions .btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
}