/* =====================================================================
   PageHeader — the one header every BackOffice page uses
   Ships with the CH.BowlingCRM.UI.Framework library; consumers link
   _content/CH.BowlingCRM.UI.Framework/css/page-header.css and supply the
   --bo-* theme tokens. Compact single line: icon · Title | subtitle …,
   an optional description underneath and actions on the right.
   ===================================================================== */

.bo-page-header {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bo-border);
}

.bo-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    width: 100%;
}

.bo-page-header-titles {
    min-width: 0;
}

/* One line: icon · Title | subtitle | subtitle (wraps on narrow screens). */
.bo-page-header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--bo-text);
}

    .bo-page-header-title .bo-page-header-icon {
        font-size: 1.25rem;
    }

.bo-page-header-sep {
    color: var(--bo-border-strong);
    font-weight: 300;
}

.bo-page-header-sub {
    font-weight: 400;
    color: var(--bo-text);
}

    /* A clickable subtitle reads as part of the title, not as a bright link; it underlines on hover. */
    .bo-page-header-sub.mud-link {
        font-size: inherit;
        line-height: inherit;
        color: var(--bo-text);
    }

        .bo-page-header-sub.mud-link:hover,
        .bo-page-header-sub.mud-link:focus-visible {
            color: var(--bo-primary);
        }

.bo-page-header-description {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--bo-text-muted);
}

.bo-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

/* The title takes focus after navigation (FocusOnNavigate) so screen readers start at the page; no ring for that. */
.bo-page-header-title:focus {
    outline: none;
}