/*
 * BusinessManager authoritative page-header standard.
 *
 * Visual flow:
 *   Operational pages: Header -> Summary -> Filters -> Results
 *   Reports:           Header -> Report context/tools -> Summary -> Filters -> Results
 *   Details:           Header -> Summary -> Details / Additional information
 *
 * This stylesheet is deliberately loaded AFTER reports.css and page-headers.css
 * so future visual changes can be made centrally without editing every module.
 */

:root {
    --bm-header-start: #3157d5;
    --bm-header-mid: #4169e1;
    --bm-header-end: #5146d9;
    --bm-header-radius: 22px;
    --bm-header-shadow: 0 16px 34px rgba(49, 87, 213, .16);
    --bm-header-border: rgba(67, 97, 238, .28);
    --bm-header-padding-x: 1.8rem;
    --bm-header-padding-y: 1.55rem;
    --bm-header-gap: 1.5rem;
    --bm-header-icon-size: 52px;
    --bm-header-action-height: 44px;
}

/* ---------------------------------------------------------
   One authoritative hero surface for business-facing pages.
   --------------------------------------------------------- */
.bm-page.customer-page > .bm-page-header,
.bm-page.employee-page > .bm-page-header,
.bm-page.services-page > .bm-page-header,
.bm-page.recurring-services-page > .bm-page-header,
.bm-page.estimate-page > .bm-page-header,
.bm-page.work-order-page > .bm-page-header,
.bm-page.bm-schedule-page > .bm-page-header,
.bm-page.invoice-page > .bm-page-header,
.bm-page.payment-page > .bm-page-header,
.bm-page.expense-page > .bm-page-header,
.bm-page.purchase-order-page > .bm-page-header,
.bm-page.recurring-expenses-page > .bm-page-header,
.bm-page.vendors-page > .bm-page-header,
.bm-page.expense-categories-page > .bm-page-header,
.bm-page.report-page > .bm-page-header,
.business-facing-hero,
.configuration-page-header.business-facing-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    display: flex;
    align-items: center !important;
    justify-content: space-between;
    gap: var(--bm-header-gap);
    min-height: 0;
    margin-bottom: 1.5rem;
    padding: var(--bm-header-padding-y) var(--bm-header-padding-x) !important;
    border: 1px solid var(--bm-header-border) !important;
    border-radius: var(--bm-header-radius) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.11), transparent 28%),
        linear-gradient(125deg,
            var(--bm-header-start) 0%,
            var(--bm-header-mid) 52%,
            var(--bm-header-end) 100%) !important;
    box-shadow: var(--bm-header-shadow) !important;
}

/* Shared decorative accent. */
.bm-page.customer-page > .bm-page-header::after,
.bm-page.employee-page > .bm-page-header::after,
.bm-page.services-page > .bm-page-header::after,
.bm-page.recurring-services-page > .bm-page-header::after,
.bm-page.estimate-page > .bm-page-header::after,
.bm-page.work-order-page > .bm-page-header::after,
.bm-page.bm-schedule-page > .bm-page-header::after,
.bm-page.invoice-page > .bm-page-header::after,
.bm-page.payment-page > .bm-page-header::after,
.bm-page.expense-page > .bm-page-header::after,
.bm-page.purchase-order-page > .bm-page-header::after,
.bm-page.recurring-expenses-page > .bm-page-header::after,
.bm-page.vendors-page > .bm-page-header::after,
.bm-page.expense-categories-page > .bm-page-header::after,
.bm-page.report-page > .bm-page-header::after,
.business-facing-hero::after,
.configuration-page-header.business-facing-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 0;
    width: 270px;
    height: 270px;
    top: -145px;
    right: -82px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09) !important;
    pointer-events: none;
}

.bm-page > .bm-page-header > *,
.business-facing-hero > *,
.configuration-page-header.business-facing-hero > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   Information hierarchy.
   --------------------------------------------------------- */
.bm-page-header .bm-page-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.bm-page-header .bm-page-title,
.business-facing-hero .bm-page-title {
    margin: .18rem 0 .35rem;
    color: #fff !important;
    font-size: clamp(1.85rem, 2.7vw, 2.55rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.bm-page-header .bm-page-kicker,
.business-facing-hero .bm-page-kicker,
.business-facing-hero .configuration-hero-kicker {
    display: block;
    margin-bottom: .25rem;
    color: #dbeafe !important;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bm-page-header .bm-page-description,
.bm-page-header > .report-title-wrap p,
.bm-page-header p,
.business-facing-hero .bm-page-description,
.business-facing-hero p {
    max-width: 800px;
    margin-bottom: 0;
    color: rgba(255,255,255,.90) !important;
    line-height: 1.55;
}

/* Breadcrumbs are always readable on the hero. */
.bm-page-header .bm-breadcrumb,
.bm-page-header .bm-breadcrumb li,
.bm-page-header .bm-breadcrumb a,
.bm-page-header .bm-breadcrumb .bm-breadcrumb-separator,
.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 {
    color: rgba(255,255,255,.84) !important;
}

.bm-page-header .bm-breadcrumb {
    margin: 0 0 .7rem;
}

.bm-page-header .bm-breadcrumb a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------
   Shared icon treatment.
   --------------------------------------------------------- */
.bm-page-header .customer-title-icon,
.bm-page-header .employee-title-icon,
.bm-page-header .operations-title-icon,
.bm-page-header .report-title-icon,
.business-facing-hero .configuration-title-icon,
.business-facing-hero .operations-title-icon {
    display: inline-flex !important;
    width: var(--bm-header-icon-size) !important;
    height: var(--bm-header-icon-size) !important;
    flex: 0 0 var(--bm-header-icon-size) !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: 1.3rem;
}

/* Existing lockups remain valid; only their visual language is centralized. */
.customer-title-lockup,
.employee-title-lockup,
.operations-title-lockup,
.report-title-wrap,
.configuration-title-lockup {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

/* ---------------------------------------------------------
   Header actions.
   One treatment for Help/Create/Edit/Back/report actions.
   --------------------------------------------------------- */
.bm-page-header .bm-page-actions,
.business-facing-hero .bm-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.bm-page-header .bm-page-actions .btn,
.bm-page-header > .btn,
.business-facing-hero .bm-page-actions .btn,
.business-facing-hero .configuration-hero-action {
    min-height: var(--bm-header-action-height);
    padding-inline: 1rem;
    border-color: rgba(255,255,255,.62) !important;
    border-radius: 11px !important;
    color: #1d4ed8 !important;
    background: #fff !important;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(15,23,42,.11) !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.bm-page-header .bm-page-actions .btn:hover,
.bm-page-header > .btn:hover,
.business-facing-hero .bm-page-actions .btn:hover,
.business-facing-hero .configuration-hero-action:hover {
    transform: translateY(-1px);
    border-color: #fff !important;
    color: #1e40af !important;
    background: #eff6ff !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.15) !important;
}

.bm-page-header .bm-page-actions .btn:focus-visible,
.business-facing-hero .bm-page-actions .btn:focus-visible {
    outline: 3px solid rgba(255,255,255,.60);
    outline-offset: 2px;
}

/* Status chips remain readable when placed beside a page title. */
.bm-page-header .bm-badge {
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 4px 12px rgba(15,23,42,.10);
}

/* ---------------------------------------------------------
   Reports use the same hero, but keep their report-specific
   context and tools directly beneath the hero when present.
   --------------------------------------------------------- */
.report-page > .bm-page-header {
    margin-bottom: 1rem;
}

.report-page > .bm-page-header .report-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.1rem;
    margin-top: .5rem;
    color: rgba(255,255,255,.80) !important;
    font-size: .82rem;
}

.report-page > .bm-page-header .report-header-meta,
.report-page > .bm-page-header .report-header-meta * {
    color: rgba(255,255,255,.80) !important;
}

/* Toolbars/context cards following a report hero are visually attached to
   the report workflow rather than competing with the page identity. */
.report-page > .bm-page-header + .report-toolbar,
.report-page > .bm-page-header + .report-context-toolbar {
    margin: -.15rem 0 1rem;
}

.report-page .report-toolbar {
    min-height: 44px;
}

/* ---------------------------------------------------------
   Responsive behavior.
   Desktop = compact hero, tablet = stacked actions,
   phone = full-width touch targets.
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .bm-page.customer-page > .bm-page-header,
    .bm-page.employee-page > .bm-page-header,
    .bm-page.services-page > .bm-page-header,
    .bm-page.recurring-services-page > .bm-page-header,
    .bm-page.estimate-page > .bm-page-header,
    .bm-page.work-order-page > .bm-page-header,
    .bm-page.bm-schedule-page > .bm-page-header,
    .bm-page.invoice-page > .bm-page-header,
    .bm-page.payment-page > .bm-page-header,
    .bm-page.expense-page > .bm-page-header,
    .bm-page.purchase-order-page > .bm-page-header,
    .bm-page.recurring-expenses-page > .bm-page-header,
    .bm-page.vendors-page > .bm-page-header,
    .bm-page.expense-categories-page > .bm-page-header,
    .bm-page.report-page > .bm-page-header,
    .business-facing-hero,
    .configuration-page-header.business-facing-hero {
        align-items: flex-start !important;
        flex-direction: column;
        padding: 1.4rem !important;
    }

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

@media (max-width: 575.98px) {
    :root {
        --bm-header-icon-size: 46px;
    }

    .bm-page.customer-page > .bm-page-header,
    .bm-page.employee-page > .bm-page-header,
    .bm-page.services-page > .bm-page-header,
    .bm-page.recurring-services-page > .bm-page-header,
    .bm-page.estimate-page > .bm-page-header,
    .bm-page.work-order-page > .bm-page-header,
    .bm-page.bm-schedule-page > .bm-page-header,
    .bm-page.invoice-page > .bm-page-header,
    .bm-page.payment-page > .bm-page-header,
    .bm-page.expense-page > .bm-page-header,
    .bm-page.purchase-order-page > .bm-page-header,
    .bm-page.recurring-expenses-page > .bm-page-header,
    .bm-page.vendors-page > .bm-page-header,
    .bm-page.expense-categories-page > .bm-page-header,
    .bm-page.report-page > .bm-page-header,
    .business-facing-hero,
    .configuration-page-header.business-facing-hero {
        padding: 1.2rem !important;
        border-radius: 18px !important;
    }

    .customer-title-lockup,
    .employee-title-lockup,
    .operations-title-lockup,
    .report-title-wrap,
    .configuration-title-lockup {
        align-items: flex-start;
    }

    .bm-page-header .bm-page-actions > *,
    .business-facing-hero .bm-page-actions > * {
        flex: 1 1 100%;
        width: 100%;
    }

    .bm-page-header .bm-page-actions .btn,
    .bm-page-header > .btn,
    .business-facing-hero .bm-page-actions .btn,
    .business-facing-hero .configuration-hero-action {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .bm-page-header .bm-page-title {
        font-size: clamp(1.7rem, 8vw, 2.15rem);
    }
}

/* Print reports without the gradient while preserving report content. */
@media print {
    .report-page > .bm-page-header {
        color: #000 !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .report-page > .bm-page-header::after {
        display: none !important;
    }

    .report-page > .bm-page-header .bm-page-title,
    .report-page > .bm-page-header .bm-page-kicker,
    .report-page > .bm-page-header p,
    .report-page > .bm-page-header .report-header-meta,
    .report-page > .bm-page-header .report-header-meta * {
        color: #000 !important;
    }
}


/* =========================================================
   CONTEXTUAL HELP BUTTON STANDARD
   Match the Activity / Audit Log treatment everywhere.
   ========================================================= */
.bm-contextual-help-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: var(--bm-header-action-height, 44px);
    padding: .65rem 1rem !important;
    border: 1px solid rgba(67, 97, 238, .38) !important;
    border-radius: 11px !important;
    color: #3157d5 !important;
    background: rgba(255,255,255,.96) !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15,23,42,.08) !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        color .16s ease,
        background-color .16s ease !important;
}

.bm-contextual-help-link > i {
    margin-right: 0 !important;
    font-size: 1rem;
}

.bm-contextual-help-link:hover,
.bm-contextual-help-link:focus {
    transform: translateY(-1px);
    border-color: #3157d5 !important;
    color: #1e40af !important;
    background: #eff6ff !important;
    box-shadow: 0 9px 20px rgba(15,23,42,.13) !important;
}

.bm-contextual-help-link:focus-visible {
    outline: 3px solid rgba(49,87,213,.24) !important;
    outline-offset: 2px;
}

/* Hero/header version: the Activity / Audit Log look. */
.bm-page-header .bm-contextual-help-link,
.business-facing-hero .bm-contextual-help-link,
.configuration-dashboard-hero .bm-contextual-help-link {
    border-color: rgba(255,255,255,.58) !important;
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
}

.bm-page-header .bm-contextual-help-link:hover,
.bm-page-header .bm-contextual-help-link:focus,
.business-facing-hero .bm-contextual-help-link:hover,
.business-facing-hero .bm-contextual-help-link:focus,
.configuration-dashboard-hero .bm-contextual-help-link:hover,
.configuration-dashboard-hero .bm-contextual-help-link:focus {
    transform: translateY(-1px);
    border-color: #fff !important;
    color: #1d4ed8 !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
}

.bm-page-header .bm-contextual-help-link:focus-visible,
.business-facing-hero .bm-contextual-help-link:focus-visible,
.configuration-dashboard-hero .bm-contextual-help-link:focus-visible {
    outline: 3px solid rgba(255,255,255,.62) !important;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .bm-contextual-help-link {
        min-height: 46px;
        width: 100%;
    }
}








/* =========================================================
   AUTHORITATIVE HEADER HELP BUTTON STANDARD
   Canonical UI: transparent/translucent Help button.
   IMPORTANT: selectors intentionally outrank the generic
   white-filled header action rule:
       .bm-page-header .bm-page-actions .btn
   Help must remain the exception on every header card.
   ========================================================= */

/* Help is always the first/leftmost header action. */
.bm-contextual-help-link {
    order: -100;
}

/* Highest-specificity default-state selectors.
   The .btn.bm-contextual-help-link combination is intentional. */
.bm-page-header .bm-page-actions .btn.bm-contextual-help-link,
.bm-page-header > .btn.bm-contextual-help-link,
.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link,
.business-facing-hero > .btn.bm-contextual-help-link,
.configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link,
.configuration-dashboard-hero > .btn.bm-contextual-help-link,
.configuration-page-header.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link,
.configuration-page-header.business-facing-hero > .btn.bm-contextual-help-link,
.report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    min-height: var(--bm-header-action-height, 44px) !important;
    padding: .65rem 1rem !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    background-color: rgba(255,255,255,.08) !important;
    background-image: none !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* The icon follows the same treatment on every header family. */
.bm-page-header .bm-page-actions .btn.bm-contextual-help-link > i,
.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link > i,
.configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link > i,
.report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link > i {
    margin-right: 0 !important;
    color: currentColor !important;
    font-size: 1rem !important;
}

/* Hover/focus intentionally becomes white filled. */
.bm-page-header .bm-page-actions .btn.bm-contextual-help-link:hover,
.bm-page-header .bm-page-actions .btn.bm-contextual-help-link:focus,
.bm-page-header > .btn.bm-contextual-help-link:hover,
.bm-page-header > .btn.bm-contextual-help-link:focus,
.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link:hover,
.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link:focus,
.configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link:hover,
.configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link:focus,
.configuration-page-header.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link:hover,
.configuration-page-header.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link:focus,
.report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link:hover,
.report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link:focus {
    transform: translateY(-1px) !important;
    border-color: #fff !important;
    color: #1d4ed8 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
}

.bm-page-header .bm-page-actions .btn.bm-contextual-help-link:focus-visible,
.business-facing-hero .bm-page-actions .btn.bm-contextual-help-link:focus-visible,
.configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link:focus-visible,
.report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link:focus-visible {
    outline: 3px solid rgba(255,255,255,.62) !important;
    outline-offset: 2px !important;
}

/* Neutralize Bootstrap variables as an additional guard.
   The actual visible state is still enforced by the selectors above. */
.btn.bm-contextual-help-link {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255,255,255,.58);
    --bs-btn-hover-color: #1d4ed8;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #1d4ed8;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

/* Mobile keeps the same appearance and a full-width touch target. */
@media (max-width: 575.98px) {
    .bm-page-header .bm-page-actions .btn.bm-contextual-help-link,
    .business-facing-hero .bm-page-actions .btn.bm-contextual-help-link,
    .configuration-dashboard-hero .bm-page-actions .btn.bm-contextual-help-link,
    .report-page .bm-page-header .bm-page-actions .btn.bm-contextual-help-link {
        min-height: 46px !important;
        width: 100% !important;
    }
}


/* =========================================================
   AUTHENTICATED TOPBAR GEOMETRY STANDARD

   _Topbar.cshtml is the shared authenticated shell header used
   across business-facing pages. Keep its three regions stable:
     page context | global search | account/actions

   Page titles are allowed to truncate inside the left region;
   they must never push the search or account pill toward/out of
   the viewport. The right edge spacing therefore comes from the
   shared shell, not page-specific controller styles.
   ========================================================= */
@media (min-width: 1200px) {
    .app-shell .app-main > .app-topbar {
        display: grid;
        grid-template-columns: minmax(180px, 220px) minmax(160px, 1fr) auto;
        column-gap: clamp(.75rem, 1.4vw, 1.5rem);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: clamp(1.25rem, 2vw, 2rem);
        box-sizing: border-box;
    }

    .app-shell .app-topbar > .topbar-left {
        width: 100%;
        min-width: 0;
        max-width: 220px;
        overflow: hidden;
    }

    .app-shell .app-topbar .topbar-page-context {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .app-shell .app-topbar .topbar-page-title,
    .app-shell .app-topbar .topbar-section-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell .app-topbar > .global-search {
        width: 100%;
        min-width: 0;
        max-width: 640px;
        margin: 0;
        justify-self: center;
    }

    .app-shell .app-topbar > .topbar-right {
        min-width: 0;
        max-width: 100%;
        justify-self: end;
        justify-content: flex-end;
    }

    .app-shell .app-topbar .topbar-user {
        min-width: 0;
        max-width: min(320px, 28vw);
    }

    .app-shell .app-topbar .topbar-user-button {
        max-width: 100%;
    }
}

/* 1200-1399px is a real desktop layout but has less horizontal
   room after the 260px sidebar. Preserve the exact same geometry
   and right-edge gutter by yielding search/title space first. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-shell .app-main > .app-topbar {
        grid-template-columns: minmax(145px, 190px) minmax(110px, 1fr) auto;
        column-gap: .65rem;
        padding-inline: 1.25rem;
    }

    .app-shell .app-topbar > .topbar-left {
        max-width: 190px;
    }

    .app-shell .app-topbar > .global-search {
        max-width: 460px;
    }

    .app-shell .app-topbar .topbar-user {
        max-width: 240px;
    }

    .app-shell .app-topbar .topbar-user-subtitle {
        display: none;
    }
}

/* =========================================================
   INVOICE DETAILS PAYMENT MENU OVERFLOW EXCEPTION

   header-standard.css is the authoritative business-facing hero stylesheet
   and intentionally clips ordinary hero contents with overflow:hidden.
   Invoice Details is the one business hero that owns a Bootstrap payment
   dropdown which must extend below the hero on desktop. Keep this exception
   here (after the shared rule) so the loaded-later !important standard does
   not clip the menu. The decorative ::after halo is disabled for this hero;
   the standard radial background accent remains inside the rounded surface.
   ========================================================= */
.bm-page.invoice-page > .bm-page-header.invoice-details-hero {
    overflow: visible !important;
    z-index: 20;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero::after {
    content: none !important;
    display: none !important;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions {
    position: relative;
    z-index: 30;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .dropdown-menu {
    z-index: 1090;
}

/* Invoice-specific payment dropdown: anchor to the START of Collect Payment,
   not its end. Limit its intrinsic width so long payment descriptions cannot
   push the desktop menu outside the viewport; let every label wrap. */
.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .invoice-details-payment-menu {
    width: 21rem;
    min-width: 0;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .invoice-details-payment-menu .dropdown-item {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .invoice-details-payment-menu .dropdown-item span {
    min-width: 0;
    white-space: normal;
}

@media (max-width: 575.98px) {
    .bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .invoice-details-payment-dropdown {
        width: 100%;
    }

    .bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions .invoice-details-payment-menu {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   INVOICE DETAILS — INDEPENDENT TITLE AND ACTION ROWS
   On medium/large screens the action cluster can be wider than the
   remaining title space. Use separate tracks (not flex siblings) to
   prevent the invoice number and buttons from touching or overlapping.
   Only Invoice/Details is affected; the dropdown must still escape the hero.
   ========================================================= */
.bm-page.invoice-page > .bm-page-header.invoice-details-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch !important;
    justify-content: stretch;
    row-gap: 1.1rem;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .bm-page-header-main {
    width: 100%;
    min-width: 0;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .operations-title-lockup {
    min-width: 0;
    align-items: center;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-heading {
    min-width: 0;
    max-width: 100%;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    row-gap: .35rem;
    min-width: 0;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-title-line .bm-page-title {
    min-width: 0;
    max-width: 100%;
    margin: .18rem 0 .35rem;
    overflow-wrap: anywhere;
}

.bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-header-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: .65rem;
}

@media (max-width: 575.98px) {
    .bm-page.invoice-page > .bm-page-header.invoice-details-hero .invoice-details-title-line .bm-page-title {
        font-size: clamp(1.65rem, 7vw, 2rem);
    }
}