/* Forms.Rendering shared styles — applies only within FormBuilder-rendered forms (.fb-form-shell). */

/* MudBlazor's default "*" required indicator inherits the label's text color, which renders as
   near-black/gray rather than a clearly visible red. Make it red so required fields stand out. */
.fb-form-shell .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: var(--mud-palette-error);
}

.fb-form-shell .fb-text-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wave chrome round 4 — classic FormDialog.razor structure: header hosted in the MudDialog title
   (host renders <FormHeader> there, FormShell RenderHeader=false), single scrolling field pane
   (DialogLayout=true), no sticky header/sidebar, no MudBlazor ripple inside FormBuilder chrome.
   See wave-chrome-round4-spec.md for the full DOM/flex-chain rationale. */

/* Dialog host: kill the outer dialog scroller and make the content a non-scrolling flex column. */
.mud-dialog:has(.fb-dialog-content) { overflow-y: hidden; }
.fb-dialog-title { padding: 0 !important; }                 /* header paper spans the full dialog width */
.fb-dialog-content { padding: 8px 24px 16px !important; display: flex; flex-direction: column; overflow: hidden !important; min-height: 0; }
/* Body: sidebar column + ONE scrolling field pane (classic FormDialog structure). */
.fb-form-shell--dialog { display: flex; flex-direction: row; gap: 16px; flex: 1 1 auto; min-height: 0; height: 75vh; }
.mud-dialog-fullscreen .fb-form-shell--dialog { height: auto; }   /* fullscreen: fill remaining dialog height via flex */
.fb-form-shell--dialog .fb-form-sidebar-col { flex: 0 0 16rem; min-width: 0; overflow-y: auto; }
.fb-form-shell--dialog .fb-form-content-col { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding-right: 4px; will-change: scroll-position; }
/* No MudBlazor click ripple inside FormBuilder chrome (belt-and-braces; controls also set Ripple=false). */
.fb-form-shell .mud-ripple-effect, .fb-dialog-title .mud-ripple-effect { display: none !important; }
@media (max-width: 960px) { .fb-form-shell--dialog { flex-direction: column; height: auto; } .fb-form-shell--dialog .fb-form-sidebar-col { flex: 0 0 auto; overflow: visible; } }

/* Wave 1 quick win #3 — phrase picker (TextFieldRenderer / TextAreaFieldRenderer), modeled on
   LabPortalen.Commons' PhraseHost.razor.css. The field sits in the flex-grow column and the
   icon+popover trigger sits beside it, so the picker never resizes the field itself. */
.fb-phrase-host {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.fb-phrase-host__field {
    flex: 1 1 auto;
    min-width: 0;
}

/* position:relative so MudPopover anchors to the icon rather than to the dialog/page.
   The padding lines the icon up with the first line of the field. */
.fb-phrase-host__picker {
    position: relative;
    flex: 0 0 auto;
    padding-top: 8px;
}

.fb-phrase-picker {
    display: flex;
    flex-direction: column;
}

.fb-phrase-picker__empty {
    padding: 8px 4px 4px 4px;
}

.fb-phrase-picker__list {
    max-height: 280px;
    overflow: auto;
    margin-top: 8px;
}

.fb-phrase-picker__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

    .fb-phrase-picker__row:hover,
    .fb-phrase-picker__row--active {
        background-color: var(--mud-palette-action-default-hover);
    }

.fb-phrase-picker__shortcut {
    font-weight: 600;
}

.fb-phrase-picker__text {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wave 1 quick win #5 — CheckboxGroup / RadioGroup column + spacing layout. */
.fb-option-group {
    display: grid;
    grid-template-columns: repeat(var(--fb-option-columns, 1), minmax(0, 1fr));
}

.fb-option-group--compact {
    row-gap: 0;
    column-gap: 8px;
}

.fb-option-group--normal {
    row-gap: 2px;
    column-gap: 16px;
}

.fb-option-group--relaxed {
    row-gap: 12px;
    column-gap: 24px;
}