@layer infine.components {
/* ===========================================================
   Title bar — one shared markup/style used by every Connect
   page (overview/company/products + roster + bulk-company).
   Variants differ only in icon glyph, primary/secondary text,
   and the optional trailing control on the right.
   =========================================================== */

.connect-title-bar {
    width: 100%;
    display: flex;
    /* Anchor the icon-circle next to the eyebrow + heading so that adding a
       backlink row inside the titles column doesn't drag the icon downward. */
    align-items: flex-start;
    gap: var(--mantine-spacing-xl);
    padding: 56px var(--mantine-spacing-xl) 24px var(--mantine-spacing-xl);
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    box-sizing: border-box;
}

.connect-title-bar__icon-circle {
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    background-color: var(--infine-blue-light-fade);
    margin-left: var(--mantine-spacing-sm);
    flex-shrink: 0;
}

.connect-title-bar__titles {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.connect-title-bar__eyebrow {
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--mantine-font-size-xs);
    line-height: 14px;
}

.connect-title-bar__eyebrow-tail {
    text-transform: none;
    font-style: italic;
}

.connect-title-bar__heading {
    display: flex;
    align-items: baseline;
    gap: var(--mantine-spacing-md);
    font-weight: 300;
    font-size: 40px;
    line-height: 48px;
    min-width: 0;
}

.connect-title-bar__primary {
    font-weight: 600;
    white-space: nowrap;
}

.connect-title-bar__divider {
    color: var(--mantine-color-gray-3);
    flex-shrink: 0;
}

.connect-title-bar__secondary {
    color: var(--infine-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.connect-title-bar__trailing {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.connect-title-bar__backlink {
    /* One-step-up backlink rendered as a tight sub-row directly under the
       heading. Negative left margin cancels Mantine's button padding so the
       chevron aligns with the eyebrow's left edge; near-zero top margin
       keeps the link visually anchored to the heading. */
    margin-top: 2px;
    margin-left: calc(-1 * var(--mantine-spacing-sm));
}
}