@layer infine.components {
/* Single product header.

   The thick top accent used to be a static `border-top: 7px solid navy`. It's
   now a 2-layer completion bar: a navy track (the original brand accent) plus
   a colored fill that grows from the left as the entity completes. Doing it
   this way keeps the visual mass of the header identical while making the
   accent informational. The bar spans the full header width — same in single
   product and in the company-data view — so the macro indicator no longer
   jumps around when navigating between templates that don't share the same
   chrome (the old donut + chevron buttons did jump).

   Completion ratio is set inline via `style="width: 93%"` on the fill node;
   color flips via inline `background-color` (green at complete, amber while
   in progress). Track + fill share border-radius 0 to read as one continuous
   bar across the card. */
.connect-product-header {
    display: flex;
    /* flex-end so the right-side percentage stack bottom-aligns with the
       title block's GTIN line (its lowest child). Puts the percentage's
       footnote on the same horizontal row as GTIN/VAT. */
    align-items: flex-end;
    gap: var(--mantine-spacing-md);
    margin-bottom: var(--mantine-spacing-md);
    padding-top: calc(var(--mantine-spacing-md) + 7px);
    position: relative;
    /* Matches the sticky sidebar's top offset so scrollIntoView lands the
       header at the same Y as the sidebar's top edge — the two columns'
       tops align after a product-switch click. */
    scroll-margin-top: var(--mantine-spacing-md);
}

.connect-product-header__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: color-mix(in srgb, var(--infine-blue) 18%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.connect-product-header__bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 280ms ease;
}

.connect-product-header h2 {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-weight: 800;
    font-size: 32px;
    line-height: 40px;
    margin: 0;
}

.connect-product-header .category-eyebrow {
    font-family: var(--mantine-font-family-headings);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mantine-color-gray-6);
    margin-bottom: 4px;
}

.connect-product-header .gtin {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--mantine-color-gray-6);
}

/* Red numbered error badge next to the title when the entity has any fields
   currently in error state. Mirrors the sidebar's `.connect-product-row-
   error-badge` shape (red pill with white count) so the two surfaces speak
   the same vocabulary. Red is reserved for validation errors in this surface,
   so the completion bar / percentage never use red and the two axes
   (completeness vs error presence) stay disambiguated. Rendered inside the
   <h2>; transform pulls it up so it sits against the cap-height instead of
   the typographic baseline. */
.connect-product-header__error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    margin-left: 14px;
    border-radius: 10px;
    font-family: var(--mantine-font-family-headings);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: white;
    background-color: var(--infine-red-bright);
    vertical-align: middle;
    transform: translateY(-3px);
    flex-shrink: 0;
}

.connect-product-header__sticky .connect-product-header__error-badge {
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    margin-left: 10px;
    font-size: 10px;
    border-radius: 8px;
    transform: translateY(-1px);
}

/* Right-side completeness stack — percentage on top, footnote below.
   The footnote ("of required fields filled") only appears on the inline
   header; the sticky compact keeps the bare percentage. With the parent
   header bottom-aligning, the stack's footnote ends up on the same row
   as the title block's GTIN/VAT line. */
.connect-product-header__pct-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Replaces the old donut: bare percentage in the headings font, color-coded
   by status. */
.connect-product-header__pct {
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    transition: color 280ms ease;
}

.connect-product-header__pct-note {
    font-family: var(--mantine-font-family-headings);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mantine-color-gray-6);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Sticky compact variant. The wrapper is height-0 + position:sticky so it
   takes no flow space when not visible — the inner panel slides in from
   above (translateY) once the inline header scrolls out of view (an
   IntersectionObserver in products-single toggles the `is-visible` class).

   Re-uses the inline header's bar + pct vocabulary; just smaller fonts and
   no category eyebrow / GTIN. The intent is to keep the macro indicator
   (title + completion) visible while the user is scrolled deep into the
   form — and to make the bar's progress animation visible from there too. */
.connect-product-header__sticky-wrapper {
    position: sticky;
    /* Stick flush with the chrome above (viewport top, or the sudo bar's
       bottom edge if one is present). The 12px breathing room between the
       chrome and the bar lives *inside* the panel as top-padding so the
       panel's white background covers it — without that, the form content
       below would scroll through the gap. */
    top: var(--sticky-anchor-top, 0);
    height: 0;
    z-index: 20;
    overflow: visible;
}

.connect-product-header__sticky {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-md);
    padding: 30px 0 20px;
    background: white;
    border-bottom: 1px solid color-mix(in srgb, var(--infine-blue) 10%, transparent);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease;
}

/* Compact bar sits 12px below the panel top edge — the gap above is the
   panel's own (white) padding, so form content scrolling underneath stays
   covered. */
.connect-product-header__sticky > .connect-product-header__bar {
    top: 12px;
}

.connect-product-header__sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.connect-product-header__sticky h2 {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-weight: 800;
    font-size: 22px;
    line-height: 28px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connect-product-header__sticky .connect-product-header__pct {
    font-size: 22px;
}
}