@layer infine.components {
/* ===========================================================
   The band beneath the module tabs, and the scope control in it
   Every module draws this band. Connect puts its view pills in
   the row beside the control; the other three carry the control
   alone.
   =========================================================== */

/* Full-width container with the 2px green strip (matches Figma node 71:236);
   the inner row keeps the horizontal padding so nothing runs flush to the
   viewport edge. */
.module-band-wrap {
    width: 100%;
    border-bottom: 2px solid var(--infine-green-lite-fade);
    background-color: var(--infine-green-lite-fade2);
}

.module-band {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    padding: 10px var(--mantine-spacing-xl);
    height: 64px;
}

/* The control grows to its longest option, measured by a hidden copy of that
   option in the same grid cell (module_band.cljs). The minimum keeps the width
   every reader has had so far; only somebody offered one office per company
   reaches past it. Past the maximum the name is cut off, and the full one is
   in the control's title. Connect's band shrinks it further where its pills
   would otherwise run under the retailer card (connect-nav.css). */
.scope-select-sizer {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 296px;
    max-width: 440px;
}

.scope-select-sizer > * { grid-area: 1 / 1; }

.scope-select-sizer-text {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    white-space: nowrap;
    /* The input's own padding — a third of its height on the left, the chevron's section on the right —
       and its borders, plus headroom. Mantine sets the height only on the input itself, out of reach here,
       so this repeats its `sm` value. */
    --scope-select-height: calc(2.25rem * var(--mantine-scale));
    padding-inline: calc(var(--scope-select-height) / 3)
                    calc(var(--scope-select-height) + var(--mantine-spacing-xs));
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: var(--mantine-font-size-sm);
}

.scope-select input { text-overflow: ellipsis; }

/* The scope control sits on a coloured band and opens over the page body,
   so it needs to lift further off the background than a dropdown inside a form.
   Mantine portals the dropdown to the document body, out of reach of any
   ancestor selector, so the class is put on it through the Select's Styles API
   (`:classNames {:dropdown …}` in module_band.cljs). The `.mantine-Select-dropdown`
   half of the selector is there for specificity: the default `-sm` shadow is set
   on that class in connect-mantine-form.css, which is in this same layer and
   loads later, so a lone class would lose the tie. */
.mantine-Select-dropdown.scope-select-dropdown {
    box-shadow: var(--mantine-shadow-lg);
}
}