@layer infine.components {
/* Polished input chrome for the single-unit Connect forms (Company & Product).
   Scoped to .connect-field-section so the product-list search bar and other
   inputs elsewhere on the page keep Mantine defaults.

   bg-color is transparent at all times: the `.mantine-Input-wrapper` carries
   the visible bg (blue-bg-tint at rest, yellow wash when required-empty, red
   on error) — see the required-empty section above for the full rationale. */
.connect-field-section .mantine-Input-input {
    border: 1px solid var(--infine-blue-light-fade);
    background-color: transparent;
    color: var(--infine-text);
}

.connect-field-section .mantine-Input-input:hover:not(:focus):not(:focus-within):not([data-disabled]):not(:disabled) {
    border-color: var(--infine-blue-light);
}

.connect-field-section .mantine-Input-input:focus,
.connect-field-section .mantine-Input-input:focus-within {
    outline: none;
    border-color: var(--infine-blue-bright);
    background-color: transparent;
    box-shadow: 0 0 0 3px rgb(from var(--infine-blue-bright) r g b / 0.12);
}

.connect-field-section .mantine-Input-input[data-disabled],
.connect-field-section .mantine-Input-input:disabled {
    box-shadow: none;
}

/* MultiSelect chips inside the form fields. The default Mantine pill
   (gray ~#F1F3F5) lost contrast against the new blue-tint input bg;
   reuse the same blue-light-fade we already use for filter pills in
   the Insight sticky toolbar so the language stays consistent. */
.connect-field-section .mantine-MultiSelect-pill,
.connect-field-section .mantine-Pill-root {
    background: var(--infine-blue-light-fade);
    color: var(--infine-blue);
}

/* X / clear buttons sitting inside an input or a pill. Drop the white
   hover/idle bg so the button reads on whatever bg it's currently
   sitting on; soft Infine-blue wash on hover keeps the affordance.
   Mantine sets `background: var(--input-bg)` as INLINE style on the
   InputClearButton, so we need `!important` to win the cascade. */
.connect-field-section .mantine-InputClearButton-root,
.connect-field-section .mantine-CloseButton-root,
.connect-field-section .mantine-Pill-remove {
    background: transparent !important;
}
.connect-field-section .mantine-InputClearButton-root:hover,
.connect-field-section .mantine-CloseButton-root:hover,
.connect-field-section .mantine-Pill-remove:hover {
    background: rgb(from var(--infine-blue) r g b / 0.08) !important;
}

/* Checkbox & Radio chrome: match the resting input field — blue-fade
   border on a tinted bg when unchecked. When checked, Mantine's primary
   fill takes over so the white checkmark sits on a brand-blue ground. */
.connect-field-section .mantine-Checkbox-input:not(:checked),
.connect-field-section .mantine-Radio-radio:not(:checked) {
    border-color: var(--infine-blue-light-fade);
    background-color: var(--infine-blue-bg-tint);
}
.connect-field-section .mantine-Checkbox-input:not(:checked):hover,
.connect-field-section .mantine-Radio-radio:not(:checked):hover {
    border-color: var(--infine-blue-light);
}
/* Checked: solid Infine blue ground so the white checkmark reads. We don't
   rely on Mantine's [data-checked] cascade because direct-rendered checkboxes
   (see ui.cljs render-field-input :checkbox-group) don't always pick it up. */
.connect-field-section .mantine-Checkbox-input:checked,
.connect-field-section .mantine-Radio-radio:checked {
    background-color: var(--infine-blue-bright);
    border-color: var(--infine-blue-bright);
}

/* Dropdown menus opened from Select / MultiSelect / Combobox. Mantine
   portals the dropdown outside .connect-field-section so we can't
   scope by ancestor — apply globally. The shades stay inside the
   Infine palette, so this is also a gentle rebrand of any other
   Mantine dropdown elsewhere in the app. */
.mantine-Select-dropdown,
.mantine-MultiSelect-dropdown {
    background: var(--infine-blue-bg-tint);
    border: 1px solid var(--infine-blue-light-fade);
}

/* Hovered or keyboard-active option (not the currently selected one) */
.mantine-Select-option[data-combobox-active]:not([data-checked]),
.mantine-MultiSelect-option[data-combobox-active]:not([data-checked]),
.mantine-Select-option:hover:not([data-checked]),
.mantine-MultiSelect-option:hover:not([data-checked]) {
    background: var(--infine-blue-light-fade);
    color: var(--infine-blue);
}

/* Currently selected option — solid Infine blue, white text */
.mantine-Select-option[data-checked],
.mantine-MultiSelect-option[data-checked] {
    background: var(--infine-blue-bright);
    color: white;
}

/* Round every option into a discrete chip and add a small vertical gap
   so consecutive selected rows don't read as one continuous block. */
.mantine-Select-option,
.mantine-MultiSelect-option {
    margin-block: 2px;
    border-radius: 6px;
}

/* Mantine's option-checkmark SVG defaults to opacity 0.4 and only goes
   fully opaque on `[data-combobox-selected]`, but our selected options
   carry `[data-checked]` instead — so the check rendered as a faded
   light blue against the bright-blue bg. Force full opacity here. */
.mantine-Select-option[data-checked] svg,
.mantine-MultiSelect-option[data-checked] svg {
    opacity: 1;
}
}