@layer infine.components {
/* =============================================================
   RC supplier drill-in — secondary header (supplier name on its
   own row + a lined tab bar) and back-toolbar shown below the
   main title bar whenever a category manager has opened a single
   supplier from the roster.

   The supplier name uses the same display treatment as the
   `.connect-product-header h2` used inside the supplier's own
   views, so the drill-in feels like a natural continuation of
   that surface.
   ============================================================= */

.connect-drilldown-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mantine-spacing-md);
    /* Body content padding lines up with the rest of the Connect surface.
       Page edges use --mantine-spacing-xl on both sides — the bottom rule
       is rendered by an inner pseudo so it shares the same inset and
       doesn't run all the way to the viewport edges. */
    padding: 0 var(--mantine-spacing-xl);
    /* Sits close under the main title bar — the drill-in surface reads
       as a continuation of the breadcrumb above without a wide gap. */
    margin-top: var(--mantine-spacing-md);
    box-sizing: border-box;
    position: relative;
}

/* Bottom rule anchored to the page's standard content margins (matches the
   inner padding above) instead of stretching edge-to-edge. The tabs sit on
   top of this rule and the active tab "breaks" it via a matching-coloured
   bottom edge. */
.connect-drilldown-header::after {
    content: "";
    position: absolute;
    left: var(--mantine-spacing-xl);
    right: var(--mantine-spacing-xl);
    bottom: 0;
    height: 2px;
    background: var(--infine-blue);
}

/* Left — supplier name + subtitle, matching .connect-product-header h2. */
.connect-drilldown-header__name {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-size: 32px;
    line-height: 40px;
    margin: 0;
    /* Space between the title text and the navy rule at the baseline. */
    padding: 0 0 var(--mantine-spacing-sm) 0;
    min-width: 0;
    font-weight: 400;
}

.connect-drilldown-header__primary {
    font-weight: 800;
}

.connect-drilldown-header__secondary {
    font-weight: 400;
    margin-left: 0.4em;
}

/* Right — Mantine UI header-tabs style: folder tabs sitting on the
   header's bottom rule. Inactive tabs read as plain text with a calm
   hover; the active tab carries an outlined box whose transparent
   bottom edge "breaks" the rule, so it visually attaches to the page
   surface below. Pattern mirrors ui.mantine.dev/component/header-tabs. */
.connect-drilldown-tabs {
    flex-shrink: 0;
    /* No offset — tabs align flush to the header's bottom edge so
       their side borders end exactly on the rule (the active tab
       masks the rule at its x-range via a white bottom border). */
    /* Inset from the right edge so the header's bottom rule continues
       a few px past the last tab — the line shouldn't terminate
       flush with the tab. */
    padding-right: var(--mantine-spacing-md);
    position: relative;
    z-index: 1;
}

.connect-drilldown-tabs .mantine-Tabs-list {
    /* Header's pseudo-rule is the only baseline; suppress Mantine's
       own underline and the gap between tabs so they butt up like
       folder tabs. */
    border-bottom: none;
    gap: 2px;
}

.connect-drilldown-tabs .mantine-Tabs-list::before {
    display: none;
}

.connect-drilldown-tabs .mantine-Tabs-tab {
    font-family: var(--mantine-font-family-headings);
    font-weight: 500;
    font-size: var(--mantine-font-size-md);
    height: 42px;
    color: var(--mantine-color-gray-7);
    background-color: transparent;
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0 18px;
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease;
}

.connect-drilldown-tabs .mantine-Tabs-tab:hover {
    color: var(--infine-blue);
    background-color: var(--infine-blue-bg);
}

.connect-drilldown-tabs .mantine-Tabs-tab[data-active="true"] {
    color: var(--infine-blue);
    background-color: white;
    border-color: var(--infine-blue);
    /* White bottom border masks the 2px header rule exactly at the
       tab's x-range — side borders end on the rule (don't continue
       past it), and the rule looks "broken" by the active tab. */
    border-bottom-color: white;
}

.connect-drilldown-tabs .mantine-Tabs-tab[data-active="true"]:hover {
    background-color: white;
}

.connect-drilldown-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-md);
    /* Reserve a stable height so the row doesn't jump when the
       Single product / Product grid toggle appears (products view
       only). Sized to match a Mantine SegmentedControl `md`. */
    min-height: 56px;
    /* Generous top inset so the Single/Grid toggle (and any future
       toolbar control) keeps its distance from the tab row above —
       the tabs should read as their own band, not as one element
       crowded against the toolbar. */
    padding: var(--mantine-spacing-xl) var(--mantine-spacing-xl)
             var(--mantine-spacing-sm);
    color: var(--infine-blue);
    box-sizing: border-box;
}

.connect-drilldown-toolbar__right {
    margin-left: auto;
    flex-shrink: 0;
}
}