/*
 * Shared form-control interaction layer.
 * Loaded after scoped page styles so every input/select receives one calm,
 * tenant-aware focus treatment instead of stacked native, MudBlazor and page rings.
 */

:root {
    --portal-control-focus-border: var(--tenant-focus-ring, #315f86);
    --portal-control-focus-ring: 0 0 0 3px var(--tenant-focus-ring, #315f86);
}

/* The visual focus indication is drawn on the complete field, not the inner input slot. */
:where(.portal-page, .portal-auth, .mud-dialog-container)
    :is(input, textarea, select, .mud-select-input):is(:focus, :focus-visible) {
    outline: none !important;
    outline-offset: 0 !important;
}

/*
 * MudBlazor composes a select from several nested elements.  Drawing the focus
 * ring on every one of those elements creates the doubled rounded border and
 * the square fieldset glow.  Keep the visual surface on the outlined input
 * only; the fieldset is responsible for the single one-pixel border.
 */
:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined {
    transform: none !important;
    background: var(--color-surface) !important;
    box-shadow: none !important;
}

:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined
    .mud-input-outlined-border {
    box-shadow: none !important;
}

/* The input/select slot is content only. It must not paint a second capsule
   or a different surface inside the outlined control. */
:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined
    :is(.mud-input-slot, .mud-select-input, .mud-select) {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
}

:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined
    :is(.mud-input-slot, .mud-select-input, .mud-select):is(:focus, :focus-visible, :focus-within) {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined:is(:focus-within, .mud-input-focused):not(.mud-input-error) {
    transform: none !important;
    background: var(--color-surface) !important;
    box-shadow: var(--portal-control-focus-ring) !important;
}

:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined:is(:focus-within, .mud-input-focused):not(.mud-input-error)
    .mud-input-outlined-border,
:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input-outlined.mud-input-focused:not(.mud-input-error)
    .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--portal-control-focus-border) !important;
    box-shadow: none !important;
}

/* Native page controls keep the same single-ring language. */
:where(.portal-page, .portal-auth, .mud-dialog-container)
    :is(input, textarea, select):not(.mud-input-slot):not(.mud-select-input):not([aria-invalid="true"])
    :is(:focus, :focus-visible) {
    border-color: var(--portal-control-focus-border) !important;
    box-shadow: var(--portal-control-focus-ring) !important;
}

/* Error state remains purposeful and is never recoloured as a normal focus. */
:where(.portal-page, .portal-auth, .mud-dialog-container)
    .mud-input.mud-input-outlined.mud-input-error:is(:focus-within, .mud-input-focused) {
    transform: none !important;
}

@media (prefers-contrast: more) {
    :root {
        --portal-control-focus-border: var(--tenant-focus-ring, #315f86);
        --portal-control-focus-ring: 0 0 0 4px var(--tenant-focus-ring, #315f86);
    }
}