@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;
}

/* Context-specific headings for the criteria report. Deliberately NOT the shared
   .h3/.h4 — the designer tuned these for this view (infine blue, weights/sizes
   per the Figma criteria-rows file). */
.criteria-summary-heading {
    font-family: var(--mantine-font-family-headings);
    font-size: 32px;
    line-height: 38px;
    font-weight: 800;
    color: var(--infine-blue);
}

.criteria-row-title {
    font-family: var(--mantine-font-family-headings);
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--infine-blue);
}

.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);
}

/* Light divider between a group's summary yes/no box and its per-criteria boxes.
   Deliberately lighter than the heavier group-heading divider (.criteria-divider,
   gray-6) so the summary box reads as a summary, not as one of the criteria. */
.criteria-summary-divider {
    height: 0;
    border-top: 1px dashed var(--mantine-color-gray-3);
}

/* The set-summary Yes/No box: a card lifted off the page by a colour-coded glow
   keyed to pass/fail (Figma criteria-rows). Applies at any size (the 64px and
   128px variants). */
.criteria-summary-box {
    border-radius: 9px;
    display: flex;
    place-items: center;
    justify-content: center;
}

.criteria-summary-box-pass {
    box-shadow:
        0 0 10px 0 rgb(from var(--infine-green-dark) r g b / 0.09),
        0 0 25px 0 rgb(from var(--infine-green-dark) r g b / 0.10),
        0 0 3px 0 rgb(from var(--infine-green-dark) r g b / 0.13);
}

.criteria-summary-box-fail {
    box-shadow:
        0 0 10px 0 rgb(from var(--infine-red) r g b / 0.09),
        0 0 25px 0 rgb(from var(--infine-red) r g b / 0.10),
        0 0 3px 0 rgb(from var(--infine-red) r g b / 0.13);
}

/* Status + reasoning cell (grid col 2): the per-criterion ✅/❌ box tucked over
   the left edge of a colour-coded "extension" that carries the reasoning, so the
   box reads as lifted off the extension to its right (Figma criteria-rows). */
.criteria-status {
    grid-column: 2;
    align-self: start;
    display: flex;
    align-items: stretch;
}

/* The ✅/❌ box: white card with a status-coloured border and a soft shadow
   offset to the right, overlapping the extension's rounded left edge. */
.criteria-status-box {
    flex: 0 0 36%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    background: var(--mantine-color-white);
    border: 1px solid transparent;
    border-radius: 9px;
    position: relative;
    z-index: 1;
    margin-right: -12px;
    filter: drop-shadow(7px 0 3.5px rgba(0, 0, 0, 0.04));
}

.criteria-status-box-pass { border-color: var(--infine-green-fade); }
.criteria-status-box-fail { border-color: var(--infine-red-fade); }
.criteria-status-box-na   { border-color: var(--mantine-color-gray-3); }

/* The reasoning extension: a colour-tinted panel filling the rest of the cell.
   Its content has its own padding and is not bound to the report grid. The extra
   left padding clears the overlapping status box. */
.criteria-extension {
    flex: 1;
    min-width: 0;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 9px;
    padding: 12px 16px 12px 24px;
    font-size: var(--mantine-font-size-sm);
    line-height: 1.25;
    color: var(--infine-text);
}

.criteria-extension-pass { background: var(--infine-green-bg); }
.criteria-extension-fail { background: var(--infine-red-bg); }

/* In a mixed-status value list (some datapoints pass, some fail — e.g. red meat
   from several origins) the failing datapoints are tinted red alongside their ❌
   marker; passing ones stay neutral with their ✅. */
.criteria-value-cell-fail {
    color: var(--infine-red-strong);
}

/* The value(s) the evaluation is based on: always break below the leading text,
   one value per row, with each value's data points aligned into columns.
   Borderless to start — separators can be added later if the rows need them. */
.criteria-explanation-table {
    display: grid;
    column-gap: 12px;
    row-gap: 2px;
    margin-top: 4px;
    align-items: center;
}

/* A single data point within a value row. Bold to start — likely to be tuned
   once the look settles. */
.criteria-value-cell {
    font-weight: 700;
}

/* The meets/fails SVG badge, scaled down to align with the value text. */
.criteria-value-marker {
    height: 1em;
    width: 1em;
    flex-shrink: 0;
}

/* Helper/guidance column (sheet col D), rightmost: guidance text. */
.criteria-helper {
    grid-column: 3;
    align-self: start;
    font-size: var(--mantine-font-size-sm);
    line-height: 1.25;
    color: var(--infine-gray);
}

/* Field-link: points back to the product's Connect single-item-form field.
   Inert for now (target not yet wired). Inherits the surrounding text colour
   (dark normally, red inside a failing explanation) — only the underline marks
   it as a link. */
.criteria-field-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Term-link: opens a popover (Mantine HoverCard) describing the term. Colour
   inherited like the field-link; the dotted underline distinguishes it. */
.criteria-term-link {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
}

.criteria-term-info {
    font-size: var(--mantine-font-size-sm);
    line-height: 1.4;
    color: var(--infine-text);
}

.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;
}
}