// Lumina form field shared styles
// Provides the common rounded-input pattern used by Lookup, DatePicker, TimePicker
// and the toggle switch used by CheckBox in Lumina mode.

// --- Shared form field mixin (rounded input with floating label) ---

.FormField--lumina() {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.FormField__label--lumina() {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; // TODO: Figma specifies 3 lines; clamped to 1 for now -- confirm with UX
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--slds-g-font-scale-1); // 14px
    font-weight: var(--slds-g-font-weight-4);
    font-family: var(--slds-g-font-family);
    color: var(--slds-g-color-on-surface-2);
    line-height: 18px; // TODO: no matching SLDS token (nearest: --slds-g-font-line-height-2 = 1.25 / --slds-g-font-line-height-3 = 1.375) -- confirm with UX
    letter-spacing: -0.196px; // TODO: no matching SLDS token -- confirm with UX
    font-feature-settings: 'liga' off, 'clig' off;
    margin-bottom: var(--slds-g-spacing-1);
    padding: 0;
    text-align: left;
    flex: none;
}

.FormField__inputWrapper--lumina() {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
    border-radius: var(--slds-g-radius-border-3);
    background-color: var(--slds-g-color-surface-container-1);
    padding: 0 var(--slds-g-spacing-3);
    height: 40px; // TODO: no matching SLDS sizing token (jumps 32px->48px) -- confirm with UX
    box-sizing: border-box;
}

.FormField__input--lumina() {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--slds-g-font-scale-2);
    font-weight: var(--slds-g-font-weight-4);
    font-family: var(--slds-g-font-family);
    color: var(--slds-g-color-on-surface-2);
    line-height: normal;
    letter-spacing: -0.4px; // TODO: no matching SLDS token -- confirm with UX
    font-feature-settings: 'liga' off, 'clig' off;
    padding: 0;
    margin: 0;
    min-width: 0;

    &::placeholder {
        font: inherit;
        color: var(--slds-g-color-palette-neutral-50); // Figma: #747474; token is #757575 -- close match
    }

    &:read-only {
        cursor: pointer;
    }
}

.FormField__iconMask--lumina() {
    background-color: var(--slds-g-color-palette-neutral-50); // Figma: #747474 (--Icon-Default); token is #757575 -- close match
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.FormField__icon--lumina() {
    flex-shrink: 0;
    margin-left: auto;
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);

    // When the class is directly on SvgIconMask (no touch wrapper needed)
    &.SvgIconMask {
        .FormField__iconMask--lumina();
    }
    // When the class is on a wrapper div with SvgIconMask as child (tappable icons)
    // Wrapper gets a 40px touch target; icon stays 24px centered inside.
    &:not(.SvgIconMask) {
        width: 40px; // TODO: no matching SLDS sizing token (jumps 32->48) -- confirm with UX
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: calc(-1 * var(--slds-g-spacing-2)); // offset extra width so icon visually aligns with field edge

        > .SvgIconMask {
            width: var(--slds-g-sizing-6);
            height: var(--slds-g-sizing-6);
            .FormField__iconMask--lumina();
        }
    }
}

// Disabled state — token-based color replacement (no opacity).
.FormField--lumina--disabled() {
    pointer-events: none;
    opacity: 1;

    > [class$="__label--lumina"] {
        color: var(--slds-g-color-disabled-1);
    }

    > [class$="__inputWrapper--lumina"] {
        background: var(--slds-g-color-disabled-container-2);
        border-color: var(--slds-g-color-border-disabled-1);
    }

    input, textarea {
        color: var(--slds-g-color-on-disabled-2);
        -webkit-text-fill-color: var(--slds-g-color-on-disabled-2);
        -webkit-opacity: 1;
        opacity: 1;

        &::placeholder {
            font: inherit;
            color: var(--slds-g-color-on-disabled-2);
        }
    }

    .SvgIconMask {
        background-color: var(--slds-g-color-on-disabled-2);
    }
}

// --- Lookup --lumina ---

.Lookup--lumina {
    .FormField--lumina();

    .Lookup__label--lumina {
        .FormField__label--lumina();
    }

    .Lookup__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    input.Lookup__input--lumina {
        .FormField__input--lumina();
        background-image: none;
    }

    .Lookup__icon--lumina {
        .FormField__icon--lumina();
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }
}

// --- DatePicker --lumina ---

.DatePicker--lumina {
    .FormField--lumina();

    .DatePicker__label--lumina {
        .FormField__label--lumina();
    }

    .DatePicker__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    // getDatePicker() wraps <input> in a <div> with the same class; the div needs
    // flex expansion so the input/wrapper fills the available row width.
    div.DatePicker__input--lumina {
        flex: 1 0 0;
        min-width: 0;
    }

    input.DatePicker__input--lumina {
        .FormField__input--lumina();
    }

    .DatePicker__icon--lumina {
        .FormField__icon--lumina();
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }
}

// --- TimePicker --lumina ---

.TimePicker--lumina {
    .FormField--lumina();

    .TimePicker__label--lumina {
        .FormField__label--lumina();
    }

    .TimePicker__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    // getTimePicker() wraps <input> in a <div> with the same class; the div needs
    // flex expansion so the input/wrapper fills the available row width.
    div.TimePicker__input--lumina {
        flex: 1 0 0;
        min-width: 0;
    }

    input.TimePicker__input--lumina {
        .FormField__input--lumina();
    }

    .TimePicker__icon--lumina {
        .FormField__icon--lumina();
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }
}

// --- InputAreaMultiLine --lumina ---

.InputAreaMultiLine--lumina {
    .FormField--lumina();

    .InputAreaMultiLine__label--lumina {
        .FormField__label--lumina();
    }

    // Wrapper overrides shared mixin: no fixed height (textarea grows with rows),
    // min-height keeps single-row instances consistent with 40px single-line fields
    .InputAreaMultiLine__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
        height: auto;
        min-height: 40px; // TODO: no matching SLDS sizing token -- confirm with UX
        align-items: flex-start;
        padding-top: var(--slds-g-spacing-2);
        padding-bottom: var(--slds-g-spacing-2);
    }

    textarea.InputAreaMultiLine__input--lumina {
        .FormField__input--lumina();
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        text-overflow: unset;
        overflow: visible;
        resize: none;
        overflow-y: auto;
        line-height: 1.4; // readable line-height for multi-line content
    }

    // Container's height matches line 1's rendered height (same 1.4 * font-scale-2
    // as the textarea rule below) and centers the icon's 40px touch target
    // inside it, letting the touch target overflow above/below on purpose --
    // the visible icon ends up centered on line 1 regardless of touch-target size.
    .InputAreaMultiLine__clearIconContainer--lumina {
        align-self: flex-start;
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(1.4 * var(--slds-g-font-scale-2));
        overflow: visible;
    }

    .InputAreaMultiLine__clearIcon--lumina {
        .FormField__icon--lumina();
        cursor: pointer;
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }

    &.InputAreaMultiLine--borderless {
        padding: var(--slds-g-spacing-5);
        background: var(--slds-g-color-surface-container-1);
        border-radius: var(--slds-g-radius-border-3);
        box-sizing: border-box;

        > .InputAreaMultiLine__inputWrapper--lumina {
            border: none;
            background: transparent;
            padding: 0;
            gap: var(--slds-g-spacing-4);
            border-radius: var(--slds-g-radius-border-2);
            min-height: 0;
        }

        textarea.InputAreaMultiLine__input--lumina {
            font-size: var(--slds-g-font-scale-1);
            line-height: 18px;
            color: var(--slds-g-color-on-surface-2);
        }

        .InputAreaMultiLine__clearIconContainer--lumina {
            height: 18px; // matches this variant's textarea line-height by selector .textarea.InputAreaMultiLine__input--lumina
        }

        .InputAreaMultiLine__clearIcon--lumina {
            width: var(--slds-g-sizing-6);
            height: var(--slds-g-sizing-6);
            margin: 0;
            > .SvgIconMask {
                width: var(--slds-g-sizing-6);
                height: var(--slds-g-sizing-6);
            }
        }

        &:has(.InputAreaMultiLine__clearIconContainer--lumina) {
            padding-right: var(--slds-g-spacing-4);
        }
    }

    &.InputAreaMultiLine--fillParent {
        flex: 1 1 auto;
        height: 100%;

        > .InputAreaMultiLine__inputWrapper--lumina {
            flex: 1 1 auto;
            height: 100%;
            min-height: 0;
        }

        textarea.InputAreaMultiLine__input--lumina {
            height: 100%;
        }
    }
}

// --- SelectionBox --lumina ---

.SelectionBox--lumina {
    .FormField--lumina();

    .SelectionBox__label--lumina {
        .FormField__label--lumina();
    }

    .SelectionBox__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    input.SelectionBox__input--lumina {
        .FormField__input--lumina();
        background-image: none;
    }

    .SelectionBox__icon--lumina {
        .FormField__icon--lumina();
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }
}

// --- PositionControl --lumina ---
// Bordered rounded field matching the sibling SelectionBox operator dropdown.
// The legacy PositionControl markup floats an input + expand arrow; the Lumina
// branch (PositionControl.renderLumina) renders the shared FormField wrapper instead.

.PositionControl--lumina {
    .FormField--lumina();

    .PositionControl__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    input.PositionControl__input--lumina {
        .FormField__input--lumina();
        background-image: none;
    }

    .PositionControl__icon--lumina {
        .FormField__icon--lumina();
    }

    .PositionControl__clearIcon--lumina {
        cursor: pointer;
    }
}

// --- SelectionBox flyout dropdown --lumina ---
// TODO: Confirm dropdown styling with UX (border-radius, shadow, row height, selected-row
//       highlight, checkmark indicator for selected item)

.FlyOut .SelectionBoxFlyout--lumina {
    padding: 0;
    border-radius: var(--slds-g-radius-border-2);
    overflow: hidden;
    background: var(--slds-g-color-surface-container-1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20), 0 0 2px rgba(0, 0, 0, 0.12);
    max-height: 248px; // cap at ~6 visible items (6 × 40px row + 8px vertical padding)

    .FillerTop,
    .FillerBottom {
        display: none;
    }

    .ScrollableContent {
        padding: var(--slds-g-spacing-1) 0;
    }

    .SelectionBoxFlyout__row--lumina {
        display: flex;
        align-items: center;
        height: 40px; // Figma spec; same as form field input height -- TODO: no matching SLDS sizing token
        padding: 0 var(--slds-g-spacing-3);
        gap: var(--slds-g-spacing-2);
        align-self: stretch;
        background: var(--slds-g-color-surface-container-1);
        box-sizing: border-box;
        cursor: pointer;
    }

    .SelectionBoxFlyout__row--lumina.SelectionBoxFlyout__row--selected {
        background: var(--slds-g-color-brand-base-95); // align with GuidedFlow active step
        // Text keeps standard color; only highlight + check icon indicate selection

        .SelectionBoxFlyout__rowCheck--lumina.SvgIconMask {
            background-color: var(--slds-g-color-accent-2);
        }
    }

    .SelectionBoxFlyout__rowText--lumina {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        flex: 1 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--slds-g-font-scale-1); // 14px
        font-weight: var(--slds-g-font-weight-4);
        font-family: var(--slds-g-font-family);
        color: var(--slds-g-color-on-surface-2);
        font-feature-settings: 'liga' off, 'clig' off;
        line-height: 19px; // Figma: 135.714% -- TODO: no matching line-height token
    }

    .SelectionBoxFlyout__rowCheck--lumina.SvgIconMask {
        flex-shrink: 0;
        display: block;
        width: 16px;
        height: 16px;
        aspect-ratio: 1/1;
        background-color: var(--slds-g-color-on-surface-1);
    }
}

// --- InputArea --lumina ---

.InputArea--lumina {
    .FormField--lumina();

    .InputArea__label--lumina {
        .FormField__label--lumina();
    }

    .InputArea__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
    }

    input.InputArea__input--lumina {
        .FormField__input--lumina();
    }

    // Clear icon: same size/color as other field icons; tappable, only shown when field has content
    .InputArea__clearIcon--lumina {
        .FormField__icon--lumina();
        cursor: pointer;
    }

    &.DisabledControl {
        .FormField--lumina--disabled();
    }
}

// --- CheckBox --lumina (toggle switch) ---

.CheckBox--lumina {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;

    .CheckBox__label--lumina {
        .FormField__label--lumina();
        flex: 1;       // override mixin's flex: none -- label must fill row to push toggle right
        margin-bottom: 0; // override mixin's margin-bottom -- no stacked input below in horizontal layout
    }

    .CheckBox__toggle--lumina {
        position: relative;
        width: 62px; // TODO: no matching SLDS sizing token -- confirm with UX
        height: var(--slds-g-sizing-9); // 32px
        box-sizing: border-box;
        flex-shrink: 0;
        border: none;
        border-radius: 16px; // rx=16 on 32px height = pill shape per Figma SVG export
        background: var(--slds-g-color-palette-neutral-60);
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0.5px 2px 0 rgba(0, 0, 0, 0.50) inset, 2px 2px 5px 0 rgba(0, 0, 0, 0.10) inset;
        cursor: pointer;
        transition: background-color 200ms ease;

        // Check icon: absolute-positioned 8px from left, vertically centered; hidden when unchecked
        .CheckBox__checkIcon--lumina {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            aspect-ratio: 1 / 1;
            background-color: var(--slds-g-color-on-accent-1);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            display: none;
        }

        // Thumb: absolute-positioned 2px from left when unchecked (mirrors 2px from right when checked)
        .CheckBox__thumb--lumina {
            position: absolute;
            top: 2px;
            left: 2px;
            width: var(--slds-g-sizing-8); // 28px
            height: var(--slds-g-sizing-8); // 28px
            border-radius: var(--slds-g-radius-border-circle);
            background-color: var(--slds-g-color-on-accent-1);
            transition: left 200ms ease;
        }

        // Checked: blue track, thumb 2px from right (left=32px), check icon visible
        &.CheckBox__toggle--checked {
            background: var(--slds-g-color-accent-1);

            .CheckBox__thumb--lumina {
                left: 32px; // 62px - 2px - 28px = 32px
            }

            .CheckBox__checkIcon--lumina {
                display: block;
            }
        }

        // Neutral / nullable state: lighter track, thumb centered
        // TODO: tri-state visual pending UX team confirmation
        &.CheckBox__toggle--neutral {
            background: var(--slds-g-color-palette-neutral-65);

            .CheckBox__thumb--lumina {
                left: 17px; // (62px - 28px) / 2 = 17px
            }
        }
    }

    &.DisabledControl {
        pointer-events: none;

        > .CheckBox__label--lumina {
            color: var(--slds-g-color-disabled-1);
        }

        .CheckBox__toggle--lumina {
            background: var(--slds-g-color-disabled-container-2);
            outline: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-disabled-1);
            outline-offset: calc(-1 * var(--slds-g-sizing-border-1));
            box-shadow: none;
            cursor: default;

            .CheckBox__thumb--lumina {
                background-color: var(--slds-g-color-disabled-1);
            }

            .CheckBox__checkIcon--lumina {
                background-color: var(--slds-g-color-on-disabled-2);
            }

            // Checked disabled: same gray track, keep thumb right + check icon visible
            &.CheckBox__toggle--checked {
                background: var(--slds-g-color-disabled-container-2);
            }

            // Neutral disabled: same gray track, centered thumb, no check icon
            // TODO: confirm neutral-disabled visual with UX
            &.CheckBox__toggle--neutral {
                background: var(--slds-g-color-disabled-container-2);
            }
        }
    }
}

// --- Merger --lumina ---

.Merger--lumina {
    display: flex;
    flex-direction: column;
    width: 100%;

    .Merger__label--lumina {
        .FormField__label--lumina();
    }

    .Merger__row--lumina {
        display: flex;
        flex-direction: row;
        gap: var(--slds-g-spacing-4); // 16px between the two children
        align-items: flex-start; // top-align in case children differ in height
        width: 100%;

        @media @phone {
            gap: var(--slds-g-spacing-3); // 12px
            align-items: center;
        }

        > div {
            min-width: 0; // Allow flex children to shrink below content size
            overflow: hidden;
        }
    }

    // TODO: confirm Merger disabled label behavior with UX
    &.DisabledControl {
        opacity: 1; // override global .DisabledControl opacity; children handle their own disabled visuals
        > .Merger__label--lumina {
            color: var(--slds-g-color-disabled-1);
        }
    }
}

// --- Stepper --lumina ---
// Full-width rounded container with center-clustered controls: [  −  input  +  ]
// In wide containers (dialog), controls group in the center; in narrow contexts (list cell),
// they naturally fill the space. Button icons use brand-blue fill per Figma mock.

.Stepper--lumina {
    .FormField--lumina();

    .Stepper__label--lumina {
        .FormField__label--lumina();
    }

    .Stepper__inputWrapper--lumina {
        .FormField__inputWrapper--lumina();
        justify-content: center;
        gap: var(--slds-g-spacing-2); // 8px between buttons and input

        input.InputArea__input--lumina {
            .FormField__input--lumina();
            text-align: center;
            flex: 0 1 100px; // center-clustered: shrink in narrow contexts, cap at 100px in wide ones
            min-width: 2ch; // prevent value from collapsing in narrow list cells
        }
    }

    .Stepper__btn--lumina {
        flex-shrink: 0;
        width: 40px; // TODO: no matching SLDS sizing token (jumps 32->48) -- confirm with UX
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        > .SvgIconMask {
            width: var(--slds-g-sizing-6);  // 24px
            height: var(--slds-g-sizing-6); // 24px
            // Figma specifies --slds-g-color-info-base-50; no matching token in our set.
            // --slds-g-color-accent-1 (= brand-base-50, Electric Blue 50) is the closest semantic match
            // ("Emphasis color for large text and icon fills") -- confirm with UX
            background-color: var(--slds-g-color-accent-1);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
        }
    }

    // TODO: confirm stepper disabled icon treatment (grayed out vs hidden) with UX
    &.DisabledControl {
        .FormField--lumina--disabled();

        .Stepper__btn--lumina {
            cursor: default;

            > .SvgIconMask {
                background-color: var(--slds-g-color-on-disabled-1);
            }
        }
    }
}

// --- GroupElement --lumina ---
// Layout variants: --stacked (default, label above input) and --display (read-only detail view)

.GroupElementHeader--lumina {
    font-size: var(--slds-g-font-scale-2);
    font-weight: var(--slds-g-font-weight-6);
    font-family: var(--slds-g-font-family);
    color: var(--slds-g-color-on-surface-3);
    margin-bottom: var(--slds-g-spacing-2);
    padding: 0;
}

.GroupElement.GroupElement--lumina {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--slds-g-spacing-4);
    background: transparent;

    @media @phone {
        gap: var(--slds-g-spacing-3);
    }
}

.GroupElement.GroupElement--lumina--grid {
    display: grid;
    gap: var(--slds-g-spacing-5);
    width: 100%;

    @media @phone {
        gap: var(--slds-g-spacing-3);
    }
}

.GroupElement.GroupElement--lumina--compact.GroupElement--lumina--grid {
    gap: var(--slds-g-spacing-5);

    @media @phone {
        gap: var(--slds-g-spacing-3);
    }
}

// Inside Cards: compact GroupElements use tighter spacing — the Card chrome already
// provides the outer visual breathing room, so inner field gap can pack tighter.
.CardContainer--lumina .GroupElement.GroupElement--lumina--compact.GroupElement--lumina--grid {
    gap: var(--slds-g-spacing-3); // 8px — matches pre-grid compact behavior
}

.GroupElement.GroupElement--lumina--grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - var(--slds-g-spacing-5)) / 2)), 1fr));
}

.GroupElement.GroupElement--lumina--grid-1 {
    grid-template-columns: 1fr;
}

.GroupElement.GroupElement--lumina--grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.GroupElement__gridItem--lumina {
    min-width: 0;
    display: flex;
    flex-direction: column;

    > [class*="--lumina"] {
        flex: 1;
        justify-content: space-between;
    }
}

// Display layout: read-only detail view — label left, plain-text value right,
// no form chrome (borders, backgrounds, icons).
// Selectors target through .GroupElement__gridItem--lumina (always-on grid wrapper).
.GroupElement.GroupElement--lumina--display {
    gap: var(--slds-g-spacing-3); // 12px
    // No horizontal padding here — separators (header border-bottom and own border-bottom)
    // must span full card width. Horizontal inset is applied per-child below.
    padding-top: var(--slds-g-spacing-4);
    padding-bottom: var(--slds-g-spacing-4);
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);

    > .GroupElementHeader--lumina {
        font-size: var(--slds-g-font-scale-2); // 16px
        font-weight: var(--slds-g-font-weight-7);
        color: var(--slds-g-color-on-surface-2);
        padding: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4); // 16px left/right inset, 8px below text before border
        border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
        margin-bottom: var(--slds-g-spacing-1); // 4px + 12px gap := 16px — gap between title separator and first field
    }

    > .GroupElement__gridItem--lumina > [class*="--lumina"] {
        padding-left: var(--slds-g-spacing-4);  // 16px left/right inset matching title
        padding-right: var(--slds-g-spacing-4);
        flex-direction: row;
        align-items: baseline;
        gap: var(--slds-g-spacing-3);
        pointer-events: none;

        // Neutralise disabled styling — display fields use standard colors regardless
        &.DisabledControl {
            opacity: 1;
            pointer-events: none;

            [class$="__label--lumina"],
            input, textarea {
                color: var(--slds-g-color-on-surface-2);
                -webkit-text-fill-color: var(--slds-g-color-on-surface-2);
                -webkit-opacity: 1;
                opacity: 1;
            }
        }

        > [class$="__label--lumina"] {
            flex: 1;
            text-align: left;
            margin-bottom: 0;
        }

        > [class$="__inputWrapper--lumina"] {
            flex: 2;
            min-width: 0;
            border: none;
            background: transparent;
            padding: 0;
            height: auto;
            min-height: 0;
        }

        input, textarea {
            padding: 0;
            height: auto;
            min-height: 0;
        }

        .SvgIconMask,
        [class$="__clearIcon--lumina"],
        [class$="__icon--lumina"] {
            display: none;
        }
    }

    > .GroupElement__gridItem--lumina > .Merger--lumina > .Merger__row--lumina {
        flex: 3;
        min-width: 0;
    }

    // CheckBox: shrink toggle to match compact text row height
    > .GroupElement__gridItem--lumina > .CheckBox--lumina {
        align-items: center;
        justify-content: flex-start;
    }

    > .GroupElement__gridItem--lumina > .CheckBox--lumina > .CheckBox__label--lumina {
        flex: 0 0 ~"calc(40% - 4.8px)"; // match flex:2/flex:3 split accounting for gap
    }

    > .GroupElement__gridItem--lumina > .CheckBox--lumina > .CheckBox__toggle--lumina {
        box-shadow: none;
        flex: none;
        width: 39px;  // 62 * 0.625
        height: 20px; // 32 * 0.625 — aligns row height with other display fields
        border-radius: 10px;

        .CheckBox__thumb--lumina {
            width: 18px;  // 28 * 0.625
            height: 18px;
            top: 1px;  // (20 - 18) / 2
            left: 1px;
        }

        .CheckBox__checkIcon--lumina {
            width: 10px;
            height: 10px;
            left: 5px;
        }

        &.CheckBox__toggle--checked .CheckBox__thumb--lumina {
            left: 20px; // 39 - 1 - 18
        }

        &.CheckBox__toggle--neutral .CheckBox__thumb--lumina {
            left: 10px; // (39 - 18) / 2 ≈ 10
        }
    }
}

// Compact layout: stacked arrangement (label above input) with simplified read-only styling.
// Intended for permanently disabled (read-only) controls — as opposed to stacked, where
// disabled state is temporary and can be toggled by events/conditions.
// Disabled controls show a bottom border only, no background, and use standard colors
// instead of the dimmed disabled palette.
// Descendant selectors (no >) ensure controls at any nesting depth are covered
// (direct children, Merger children, etc.).
.GroupElement.GroupElement--lumina--compact {
    gap: var(--slds-g-spacing-3);

    .DisabledControl {
        opacity: 1;
        pointer-events: none;
    }

    input:disabled, textarea:disabled {
        -webkit-opacity: 1;
        opacity: 1;
    }

    [class*="--lumina"].DisabledControl {

        [class$="__label--lumina"],
        input, textarea {
            color: var(--slds-g-color-on-surface-2);
            -webkit-text-fill-color: var(--slds-g-color-on-surface-2);
        }

        > [class$="__inputWrapper--lumina"] {
            border: none;
            border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
            border-radius: 0;
            background: transparent;
            height: var(--slds-g-sizing-7);
            min-height: 0;
            padding-left: 0;
            padding-right: 0;
            padding-bottom: var(--slds-g-spacing-2);
        }

        .SvgIconMask,
        [class$="__clearIcon--lumina"],
        [class$="__icon--lumina"] {
            display: none;
        }
    }

    .InputAreaMultiLine--lumina.DisabledControl > .InputAreaMultiLine__inputWrapper--lumina {
        height: auto;
        min-height: 40px;
        max-height: none;
    }

    .CheckBox--lumina.DisabledControl > .CheckBox__label--lumina {
        color: var(--slds-g-color-on-surface-2);
    }

    .Merger--lumina.DisabledControl > .Merger__label--lumina {
        color: var(--slds-g-color-on-surface-2);
    }
}

// --- GroupedElementsArea --lumina ---

.GroupedElementsArea.GroupedElementsArea--lumina {
    gap: var(--slds-g-spacing-4);
    box-sizing: border-box;
    padding: var(--slds-g-spacing-4);

    @media @phone {
        // Hardcoded: falls between spacing-4 (16px) and spacing-5 (24px); no matching SLDS token.
        gap: 20px;
        padding: var(--slds-g-spacing-3);
    }

    // Display GroupElements bring their own per-row internal padding; avoid double-padding here.
    &:has(.GroupElement--lumina--display) {
        padding: 0;
    }

    // :has(--compact) carve-out from PR #2601 is still not restored here.
}

// FlyOut's ScrollableContainer already supplies edge padding — avoid double-padding
// when GroupedElementsArea is nested inside a FlyOut. Applies on all form factors.
.FlyOut .GroupedElementsArea.GroupedElementsArea--lumina {
    padding: 0;
}