@layer infine.layout {
.mantine-AppShell-main {
    --app-shell-padding: 1rem;
    @media (min-width: 48rem) {
        --app-shell-padding: 1.25rem;
    }
    @media (min-width: 75rem) {
        --app-shell-padding: 3.75rem;
    }
}

.content {
    background: linear-gradient(180deg, #F8FAF5 0%, #FFF 10rem);
}

.infine-navlink {
    font-size: var(--mantine-font-size-xl);
    color: #1A73E8;
    padding: 8px var(--mantine-spacing-sm);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
        background-color: var(--mantine-primary-color-light-hover);
    }

    img {
        margin-inline-end: var(--mantine-spacing-sm);
    }
}

/* The single global header row: logomark · module tabs · user block.
   (Replaced the old two-strip layout — a 92px gradient logo/user row plus a
   separate 72px .mainNav tabs row.) */
.header-bar {
    height: 77px;
    padding: var(--infine-spacing-xxs) var(--mantine-spacing-xl);
    display: flex;
    align-items: center;
    /* Same four brand-fade stops as before, now at the Figma's 78° (was 89°).
       The fade tokens are opaque, so this gradient fully covers the row; the
       old `green-lite-fade2` under-layer it used to stack on was never visible
       and has been dropped. */
    background: linear-gradient(78deg,
        var(--infine-green-fade) 8.48%,
        var(--infine-green-lite-fade) 30.08%,
        var(--infine-yellow-fade) 87.49%,
        var(--infine-red-fade) 105.93%);
    /* Hairline that closes the header off from content. On Connect the
       2nd-level nav sits directly below and supplies its own boundary; on the
       other modules this is the only separator. */
    border-bottom: 1px solid var(--infine-green-lite-fade);
}

.header-main-tabs {
    .mantine-Tabs-list {
        color: var(--infine-green-dark);
        flex-wrap: nowrap;
    }

    /* Mantine draws a full-width list underline by default — drop it; each tab
       owns its own 5px bottom border instead. */
    .mantine-Tabs-list::before {
        border: 0px none;
    }

    .mantine-Tabs-tab {
        /* box-sizing is border-box, so the 5px border never changes the 77px
           row height or shifts the label between states — no padding-compensation
           needed (unlike the old variable-width border). */
        height: 77px;
        --tab-hover-color: transparent;
        padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
        color: var(--infine-green-dark);
        border-bottom: 5px solid transparent;

        &:hover {
            color: var(--infine-green-dark);
            border-bottom: 5px solid var(--infine-green-lite);
        }

        &[data-active],
        &[data-active]:hover {
            color: var(--infine-blue);
            border-bottom: 5px solid var(--infine-green-dark);
        }
    }

    .mantine-Tabs-tabLabel {
        font-family: "Raleway";
        font-weight: 700;
        font-size: var(--mantine-font-size-md);
    }
}

.evaluationNav {
    background-color: var(--infine-green-lite-fade2);
    padding: 10px var(--mantine-spacing-xl);

    .mantine-Tabs-list {
        color: var(--infine-blue);
        gap: 10px;
    }
    .mantine-Tabs-tab {
        padding: var(--infine-spacing-xxs) var(--mantine-spacing-sm);
    }
    .mantine-Tabs-tabLabel {
        font-family: "Raleway";
        font-weight: 400;
        font-size: var(--mantine-font-size-sm);
    }
}

#sticky-bar {
    /* Anchor below the sudo bar when one is present; resolves to 0 otherwise.
       The inline style on the element sets `position: sticky` but leaves
       `top` to CSS so this rule can react to the sudo bar's presence. */
    top: var(--sticky-anchor-top, 0);
    transition-property: background-color border-color;
    transition-duration: 0.8s;
    transition-timing-function: ease;
    background-color: white;
    /* Need an "invisible" border of same thickness or transition is wonky */
    border-bottom: 4px solid white;
    color: var(--infine-blue);

    .mantine-Select-root {
        flex-grow: 1;

        input {
            border: 1px solid var(--infine-blue-light-fade, #DAE5F1);
            background: #FCFDFE;
        }

        input::placeholder {
            color: var(--infine-blue);
        }
    }

    #gtin-search {
        flex-grow: 0;
        width: 14em;
    }
}

#sticky-bar.stuck {
    border-bottom: 4px solid var(--infine-blue);
    background-color: var(--infine-blue-bg);
    box-shadow: 0 7px 7px -5px rgba(0, 0, 0, 0.04), 0 10px 15px -5px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

#sticky-bar-inner {
    background-color: var(--infine-blue-bg);
    border-radius: 9px;
}

.intersection-nav {
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: ease;
    text-decoration: none;

    color: var(--infine-blue);
    &.highlight {
        color: var(--infine-blue-bright);
    }
}

button.chevron {
    transition-property: rotate;
    transition-duration: 0.5s;

    &.closed {
        rotate: -90deg;
    }
}

.small-criteria-box:nth-child(odd) {
    grid-column: 3;
}

.small-criteria-box:nth-child(even) {
    grid-column: 4;
}

.catalogue-product {
    margin-left: auto;
    /* Fixed width across every module (Evaluation / CO2 / Index Catalogue·
       Product switch and Connect's Single·Grid switch) so the control reads as
       one consistent, deliberate element — a wider toggle is also harder to
       miss. Inside Connect this token is remapped to the right-hand rail width
       (incl. the ≤1280 narrowing) so the switch joins the logo/column rail;
       see connect-single-grid.css. */
    width: var(--catalogue-toggle-width, 320px);

    &.mantine-SegmentedControl-root {
        background-color: var(--infine-blue-light-fade);
        height: 56px;
        padding: 8px;
    }

    .mantine-SegmentedControl-control {
        span {
            font-size: 14px;
            font-weight: 700;
            font-family: var(--mantine-font-family-headings);
        }

        .mantine-SegmentedControl-label {
            height: 40px;
            /* mantine uses 4px padding, and line height needs to match inner size or text won't center */
            line-height: 32px;
            font-size: 14px;
            color: var(--infine-blue);
        }
        &[data-active] {
            .mantine-SegmentedControl-label {
                color: white;
            }
        }
    }

    .mantine-SegmentedControl-indicator {
        --sc-color: var(--infine-blue);
    }
}

#product-table-button {
    font-family: "Raleway";
    font-weight: 700;
}

.h1 {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-size: 40px;
    line-height: 48px;
    font-weight: 300;
}

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

.h3 {
    font-family: var(--mantine-font-family-headings);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.h4 {
    font-family: var(--mantine-font-family-headings);
    font-size: var(--mantine-font-size-xl);
    font-weight: 500;
    line-height: 24px;
}

.footer {
    color: var(--mantine-color-gray-6);
    font-size: 14px;
}

.criteria-title-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--mantine-spacing-xs);
    align-items: center;
}

.criteria-divider {
    grid-column: 2 / 4;
    grid-row: 1;
    height: 0;
    border-top: 1px solid var(--mantine-color-gray-6);
}

.expand-collapse {
    grid-column: 3;
    grid-row: 1;
    z-index: 1;
    display: flex;
    gap: 8px;

    div {
        margin-right: var(--mantine-spacing-xl);
        padding: 0 var(--mantine-spacing-sm);
        opacity: 0;
        background: white;
        transition: opacity 0.3s ease;
        font-size: var(--mantine-font-size-xs);
    }
}

.criteria-title:hover .expand-collapse div {
    opacity: 1;
}

.product-table-row {
    cursor: pointer;
}

.product-table-row:hover td {
    background-color: #DAE5F1 !important;
}

/* Positioning anchor for pseudo-element shadows on sticky first column.
   thead th is intentionally NOT listed here — Mantine sets position: sticky on th cells,
   which is required so Chrome promotes them above tbody border painting (border-collapse
   renders borders in a separate pass that paints over position: relative cells). */
.product-table td:first-child,
.product-table th:first-child {
    position: relative;
}

/* thead: shift 1px above viewport edge to cover the gap where the table's outer top border
   (owned by <table>, scrolls away under border-collapse) used to be. Solid background seals
   any micro-gaps between cells. */
.product-table thead {
    top: -1px !important;
    background-color: var(--infine-blue-bg-dark);
}

/* Per-row sticky top offsets are set via inline styles in ClojureScript (group-th-style
   carries top: -1px for the group header row; col-title-top drives the column-title row).
   Mantine's default top: 0 on th cells is overridden there. */


/* Solid background matching row stripes — prevents content bleeding through sticky cells */
.product-table td:first-child {
    background-color: white;
}
.product-table tbody tr:nth-child(odd) td:first-child {
    background-color: var(--table-striped-color, #f8f9fa);
}

/* Horizontal shadow on first-column data cells (right edge, on scroll) */
.product-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 10px;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.04), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Horizontal shadow on first-column header — ::before frees up ::after for vertical */
.product-table th:first-child::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 10px;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.04), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

/* Vertical shadow below sticky header (bottom header row only, on vertical scroll) */
.product-table thead tr:last-child th::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 10px;
    transform: translateY(100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-table--scrolled td:first-child::after,
.product-table--scrolled th:first-child::before {
    opacity: 1;
}

.product-table--scrolled-y thead tr:last-child th::after {
    opacity: 1;
}
}