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

/* Sized to the longest option, "Reitan Convenience — all countries": that
   label measures 237px, and the input's own padding (12 left + 34 right for
   the chevron) takes 46, so anything under 283px truncates it. 296 clears it
   with enough headroom that a slightly wider label — or a font tweak — does
   not silently start clipping again. */
.scope-select { width: 296px; }

/* 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);
}
}