/* ============================================
   ChoiceControl Styles
   ============================================
   All CSS that is referenced ONLY by ChoiceControl.razor lives here.
   Loaded as a separate global stylesheet (NOT Blazor-isolated) because
   most rules pierce into FluentUI web components (fluent-select,
   fluent-checkbox, fluent-radio, fluent-option, fluent-text-field,
   fluent-combobox, fluent-button) via descendant selectors and
   ::part() pseudo-elements. CSS isolation cannot reach these elements
   — they are emitted by child Blazor components and do not receive
   the parent component's [b-xxx] scope attribute. */

/* ============================================
   Per-Option Compound Content (Radio & Checkbox Items)
   ============================================
   Structured content for individual choice options rendered by
   ChoiceControl.BuildOptionContent(). Supports inline-left image
   alongside a stacked label + description. Used inside
   FluentRadio and FluentCheckbox child content. */

/* ----- Option Content Wrapper -----
   Uses CSS Grid so left/right per-option images align vertically
   across all rows regardless of label/description width.
   Explicit grid-column placement on children ensures correct
   positioning even when some options omit one image side.
   width: 100% fills the shadow DOM's label part so all grids
   share the same width — right images align vertically.
   RTL-safe: CSS Grid respects document direction automatically. */
.sc-ui-option-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* ----- Option Label Stack (text + description) ----- */
.sc-ui-option-label {
    grid-column: 2;
    display: flex;
    flex-direction: column;
}

    /* Primary label text: bold to match control-level compound-label-text weight,
   maintaining the label → description visual hierarchy in radio and checkbox
   contexts. Dropdown options inherit their styling from fluent-option instead. */
    .sc-ui-option-label > span:first-child {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.3;
    }

/* Prevent descender clipping inside fluent-option's overflow: hidden box.
   Only dropdown options need this — radio/checkbox content flows naturally. */
fluent-option .sc-ui-option-label {
    padding-bottom: 1px;
}

    fluent-option .sc-ui-option-label > span:first-child {
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
    }

fluent-option .sc-ui-compound-label-description {
    font-size: inherit;
    line-height: inherit;
}

fluent-option:has(.sc-ui-option-content) {
    height: auto;
    overflow: visible;
    padding-block: 4px;
    /* Stretch each option to the listbox width so the inner .sc-ui-option-content
       grid (width: 100%, columns: auto 1fr auto) actually has slack in its 1fr
       middle column — pushing right-edge images to the same x-coordinate across
       rows with varying label/description text lengths. Without this the option
       collapses to intrinsic content width and right images cluster against the
       description. The listbox above already uses max-content + min-width:100%,
       so 100% here resolves to "as wide as the widest option" — perfect alignment. */
    width: 100%;
    box-sizing: border-box;
}

    /* Ensure the option's shadow DOM content slot also stretches — the slotted
   .sc-ui-option-content grid binds to this part. Without it the part wrapper
   keeps its default intrinsic sizing and width:100% on the slotted element
   resolves to that intrinsic width, undoing the host stretch above. */
    fluent-option:has(.sc-ui-option-content)::part(content) {
        width: 100%;
    }

/* CSS-only description for dropdown options: the span has no text content
   (so textContent stays clean for the collapsed trigger display), but
   the data-text attribute is rendered via ::after as visible description.
   Inherits font-weight/size/opacity from .sc-ui-compound-label-description.
   The base .sc-ui-compound-label-description rule lives in sc-ui.css; this
   ::after qualifier is choice-only because only BuildOptionContent emits
   the data-text attribute (descriptionViaCss=true path). */
.sc-ui-compound-label-description[data-text]::after {
    content: attr(data-text);
}

/* ----- Per-Option Image -----
   Identical semantics to .sc-ui-control-image: developer controls
   size via the image/SVG/icon they supply — no min/max constraints.
   Supports path-based images, inline SVGs, and Fluent Icons uniformly. */
.sc-ui-option-image {
    flex-shrink: 0;
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Vertical centering handled by grid align-items: center on .sc-ui-option-content */
}

/* Path-based images: native size, never enlarge */
img.sc-ui-option-image {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Inline SVG containers: size to content */
span.sc-ui-option-image {
    width: fit-content;
    height: fit-content;
}

/* Let inline SVGs use their declared width/height attributes. */
.sc-ui-option-image svg {
    display: block;
}

/* Explicit grid column placement for left/right option images */
.sc-ui-option-image-left {
    grid-column: 1;
}

.sc-ui-option-image-right {
    grid-column: 3;
}

/* ============================================
   Choice List Option Alignment
   ============================================
   Ensures checkbox/radio items stretch to the full container width
   so per-option grids share the same width — left/right images align
   vertically across all rows regardless of label/description length.
   align-items: center vertically centers the checkbox/radio indicator
   with compound label content (label + description), placing the
   indicator in the whitespace between them.
   width: 100% stretches both FluentStack and FluentRadioGroup to fill
   the choice control body, so both MultiSelect and RadioGroup render
   identically.
   ::part(label) stretches the shadow DOM's label wrapper so the
   slotted option-content grid fills the available width after the
   indicator. ::part(positioning-region) gives FluentRadioGroup's
   internal container the same flex-column stretch layout as FluentStack.
   RTL-safe: CSS Grid and Flexbox respect document direction. */

/* Fill the choice list container to the body width.
   Both FluentStack and FluentRadioGroup stretch to match the
   label+images header above via the body's width: 100% rule. */
.sc-ui-choice-list {
    width: 100%;
}

    .sc-ui-choice-list > fluent-checkbox,
    .sc-ui-choice-list > fluent-radio,
    .sc-ui-choice-list > .sc-ui-custom-option-row,
    .sc-ui-choice-list > .sc-ui-custom-input-row {
        align-self: stretch;
        align-items: center;
    }

        .sc-ui-choice-list > fluent-checkbox::part(label),
        .sc-ui-choice-list > fluent-radio::part(label) {
            flex: 1;
            min-width: 0;
            margin-inline-end: 0;
        }

fluent-radio-group.sc-ui-choice-list::part(positioning-region) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Custom input row for SingleSelectWithCustomInput / MultiSelectWithCustomInput.
   Horizontal layout for the text field + Add button. */
.sc-ui-custom-input-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

    .sc-ui-custom-input-row > fluent-text-field {
        flex: 1;
        min-width: 0;
    }

/* Custom option row for MultiSelectWithCustomInput.
   Simple flex row: checkbox fills available space, remove button
   sits in normal document flow beside it. No absolute positioning. */
.sc-ui-custom-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sc-ui-custom-option-row > fluent-checkbox {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

        /* Stretch the shadow DOM's label part so the slotted .sc-ui-option-content
       grid fills the remaining width after the checkbox indicator. */
        .sc-ui-custom-option-row > fluent-checkbox::part(label) {
            flex: 1;
            min-width: 0;
            margin-inline-end: 0;
        }

/* ============================================
   SingleSelectWithCustomInput Layout
   ============================================
   2-column grid: column 1 holds the dropdown and custom text field
   at the same width; column 2 holds the remove/add buttons, vertically
   aligned. Explicit grid-row on each child prevents auto-placement
   surprises when the conditional remove button is absent.
   width: fit-content prevents the grid from stretching to container
   width — the select renders at its natural intrinsic width.
   Completely independent of MultiSelect/RadioGroup layout classes. */
.sc-ui-single-custom-layout {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
    align-items: center;
    width: fit-content;
}

    .sc-ui-single-custom-layout > fluent-select {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .sc-ui-single-custom-layout > fluent-text-field {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .sc-ui-single-custom-layout > .sc-ui-single-custom-btn-remove {
        grid-column: 2;
        grid-row: 1;
    }

    .sc-ui-single-custom-layout > .sc-ui-single-custom-btn-add {
        grid-column: 2;
        grid-row: 2;
    }

/* ============================================
   ChoiceControl Shrink-Wrap
   ============================================
   Makes the ChoiceControl outer div shrink to its content width
   so label-level images (ImageIdLeft / ImageIdRight) align at the
   control's logical boundary edges — not at the far right of the
   parent container. The checkbox/radio body (.sc-ui-choice-list)
   already uses max-width: fit-content, so the widest child
   determines the control boundary. The label stretches to match
   via flex column align-items: stretch (default), and the text-stack
   expands (flex: 1) pushing images to the left/right edges.
   The dropdown variants (SingleSelect, TypeAhead) also shrink to
   their intrinsic width. */

.sc-ui-choice-control {
    width: fit-content;
    gap: 8px;
}

    /* Expand the label text-stack inside choice controls so images push
       to the left/right edges of the shrink-wrapped control boundary. */
    .sc-ui-choice-control .sc-ui-label-text-stack {
        flex: 1;
    }

    /* Zero out direct-child label margins inside choice controls —
       gap on the parent provides uniform spacing between label area,
       body, and footer regardless of image-wrapper presence. */
    .sc-ui-choice-control > .sc-ui-control-label {
        margin-bottom: 0;
        margin-top: 0;
    }

/* ============================================
   Choice Control Body Stretch
   ============================================
   Make dropdown-type controls (fluent-select, fluent-combobox,
   fluent-radio-group) and the SingleSelectWithCustomInput grid
   stretch to fill the choice-control body width, aligning with
   the label+images header above. The root .sc-ui-choice-control
   is width: fit-content, so the body inherits the width of the
   widest sibling (the label+images row). Explicit width: 100%
   on children is needed because custom elements default to
   intrinsic sizing.*/

#choice-control-body {
    display: flex;
    flex-direction: column;
}

    #choice-control-body > fluent-select,
    #choice-control-body > fluent-combobox,
    #choice-control-body > fluent-radio-group,
    #choice-control-body > fluent-text-field {
        width: 100%;
        min-width: 0;
    }

    #choice-control-body fluent-select::part(listbox) {
        width: max-content;
        min-width: 100%;
    }

    /* Override fit-content so the SingleSelectWithCustomInput grid
       stretches. Switch first column to 1fr so the select and
       text-field fill the available row. */
    #choice-control-body > .sc-ui-single-custom-layout {
        width: 100%;
        grid-template-columns: 1fr auto;
    }

/* Independent image wrapper pattern: expand the label inside the
   image-position wrapper so images push to the control boundary
   edges — matching the visual of the includeImages approach. */
.sc-ui-choice-control .sc-ui-image-horizontal > .sc-ui-control-label {
    flex: 1;
}

/* ============================================
   Choice Custom Action Buttons (Add / Remove)
   ============================================
   Inside FluentCard, FAST's layer-aware stealth fill calculates a
   non-transparent rest background from the card's background token,
   creating a visible white rectangle around the icon. Override to
   transparent. Force exact 24×24 touch target with no padding so
   the icon sits at the button's edges.
   !important is required because shadow DOM internal styles override
   external ::part() rules at normal cascade priority. */
.sc-ui-custom-option-row > fluent-button[appearance="stealth"],
.sc-ui-custom-input-row > fluent-button[appearance="stealth"],
.sc-ui-single-custom-layout > fluent-button[appearance="stealth"] {
    --neutral-fill-stealth-rest: transparent;
    width: 24px;
    height: 24px;
    min-height: 24px;
    min-width: 24px;
    max-width: 24px;
    max-height: 24px;
    padding: 0 !important;
    flex-shrink: 0;
}

    .sc-ui-custom-option-row > fluent-button[appearance="stealth"]::part(control),
    .sc-ui-custom-input-row > fluent-button[appearance="stealth"]::part(control),
    .sc-ui-single-custom-layout > fluent-button[appearance="stealth"]::part(control) {
        background: transparent !important;
        padding: 0 !important;
    }