/* ============================================
   Cell Content Propagation (GridComponent, CollectionControl rows)
   ============================================
   AutoControl and other components render error/dialog placeholder
   divs as siblings of the actual content div inside a cell. display:contents
   removes them from layout without hiding future error content. The remaining
   content div fills the cell via flex:1. Deeper wrappers propagate width/height
   to the actual control. Global because Blazor CSS isolation prevents scoped
   host styles from reaching child component DOM. */

/* A content cell: hosts one control that fills it. */
.sc-ui-cell {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

    /* Remove placeholder divs from flex layout so the content div
   is the sole flex participant and gets all available space. */
    .sc-ui-cell div[id$="-error-placeholder"],
    .sc-ui-cell div[id$="-dialog-placeholder"] {
        display: contents;
    }

    /* Content div fills the cell. The start padding is the common gutter so no control sits flush
   against the cell border; the trailing padding is the gutter the column drag handle occupies,
   so the control's own trailing edge (scrollbar, dropdown arrow) stays reachable. */
    .sc-ui-cell > div:not([id$="-placeholder"]):not(.sc-ui-row-manager) {
        flex: 1;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-inline-start: 4px;
        padding-inline-end: 4px;
        box-sizing: border-box;
    }

    /* Inner content div (e.g. TextControl wrapper) fills its parent */
    .sc-ui-cell > div:not([id$="-placeholder"]) > div:not([id$="-placeholder"]) {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

/* ============================================
   RowManagerComponent
   ============================================ */

/* Host cell for a RowManagerComponent: one horizontal line of command buttons. */
.sc-ui-row-manager-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 148px;
    overflow: hidden;
}

/* Root of the component: contributes no box of its own, so its buttons lay out as
   direct children of the hosting cell with that cell's flex rules. */
.sc-ui-row-manager {
    display: contents;
}

/* Keeps the buttons aligned when a row lacks an expand/collapse toggle or an add button. */
.sc-ui-row-manager-placeholder {
    display: inline-block;
    width: 32px;
}

/* ============================================
   List rows (GridComponent, CollectionControl string list)
   ============================================
   One bordered box holding a header row and one CSS Grid row per item; the column
   template is set inline by the host. Both hosts use the same cell classes so a row
   manager cell plus content cells read identically. */
.sc-ui-list-rows {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--layer-corner-radius);
}

/* Scrolling variant: takes the host's height and scrolls its rows (Virtualize needs this). */
.sc-ui-list-rows-fill {
    overflow: auto;
    height: inherit;
    max-height: inherit;
}

/* Shrink-to-content variant instead of full width. */
.sc-ui-list-rows-inline {
    display: inline-flex;
    width: auto;
}

/* Locked header: the header row sticks to the top of the scrolling box while data rows scroll
   beneath it. Needs the fill variant so the box itself is the scroll container. */
.sc-ui-list-rows-lock-header > .sc-ui-list-header-row {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Each row is its own CSS Grid; the column template is set inline by the host. The row is the
   positioning context for its bottom drag handle, so it must be at least as wide as its
   tracks: once dragged columns outgrow the scrolling box, the row would otherwise stay at
   the box width and the handle would stop short of the far columns. */
.sc-ui-list-row {
    display: grid;
    position: relative;
    min-width: max-content;
}

/* Default data-row heights (a dragged row carries its own inline height instead). A host raises
   the multi-line default by setting --sc-ui-list-row-multi-line-height on the grid or an ancestor. */
.sc-ui-list-rows-single-line > .sc-ui-list-row:not(:first-child) {
    height: 32px;
}

.sc-ui-list-rows-multi-line > .sc-ui-list-row:not(:first-child) {
    height: var(--sc-ui-list-row-multi-line-height, 52px);
}

.sc-ui-list-header-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    font-weight: 600;
    font-size: var(--type-ramp-minus-1-font-size);
}

/* Sort button at the end of a header cell: fixed square so it never grows the header row. */
.sc-ui-list-header-sort-button {
    width: 24px;
    min-width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-inline-start: 4px;
}

.sc-ui-list-header-text {
    white-space: nowrap;
}

.sc-ui-list-cell {
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-rest);
    min-height: 28px;
    min-width: 0;
}

.sc-ui-list-cell-readonly,
.sc-ui-list-cell-empty {
    background: var(--neutral-fill-secondary-rest);
}

/* Read-only string list (CollectionControl): one recessed cell holding plain bulleted items.
   Grows to fill the remaining height of the list box but never shrinks below its content,
   so the fill always covers every item. Logical padding keeps the bullets on the start
   side under RTL. */
.sc-ui-list-readonly-items {
    display: block;
    flex: 1 0 auto;
    margin: 0;
    padding-block: 4px;
    padding-inline-start: 24px;
    padding-inline-end: 6px;
    list-style: disc;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
}

.sc-ui-list-readonly-item {
    padding: 2px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* AiTuningComponent prompt list: fills its splitter pane. The collapsible section inside fills
   this box (its card uses height "fill"), and the read-only list in the section body is the scroll box. */
.sc-ui-tuning-prompt-list {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
}

    /* The section's root div fills the box; the error placeholder div rendered ahead of it must not. */
    .sc-ui-tuning-prompt-list > div:not([id$="-error-placeholder"]) {
        height: 100%;
    }

/* Column drag handle on the trailing edge of a header or data cell. */
.sc-ui-col-resize-handle {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}

/* Row drag handle along the bottom edge of a data row; absolute so it takes no grid cell. */
.sc-ui-row-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    cursor: row-resize;
    touch-action: none;
    z-index: 1;
}

/* Host of a far-edge width handle: the positioning context for .sc-ui-edge-resize-handle */
.sc-ui-resizable-host {
    position: relative;
}

/* Width drag handle along the inline-end edge of a whole control. */
.sc-ui-edge-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 5px;
    cursor: ew-resize;
    touch-action: none;
    z-index: 1;
}

    .sc-ui-col-resize-handle:hover,
    .sc-ui-col-resize-handle:active,
    .sc-ui-row-resize-handle:hover,
    .sc-ui-row-resize-handle:active,
    .sc-ui-edge-resize-handle:hover,
    .sc-ui-edge-resize-handle:active {
        background: var(--accent-fill-rest);
        opacity: 0.4;
        border-radius: 2px;
    }

/* The cell owns the border; the text area inside is drawn with no border, shadow or fill of
   its own so the two do not read as a double line. Same token baseline as TextControl. */
.sc-ui-list-cell fluent-text-area {
    display: block;
    width: 100%;
    min-width: 0;
    --design-unit: 0;
    --stroke-width: 0;
    --neutral-stroke-rest: transparent;
    --neutral-stroke-hover: transparent;
    --neutral-stroke-active: transparent;
    --neutral-stroke-focus: transparent;
    --neutral-fill-input-rest: transparent;
    --neutral-fill-input-hover: transparent;
    --neutral-fill-input-active: transparent;
    --neutral-fill-input-focus: transparent;
}

    .sc-ui-list-cell fluent-text-area::part(root) {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .sc-ui-list-cell fluent-text-area::part(control) {
        padding: 2px 4px;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        resize: none;
        overflow-y: auto;
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }

/* A list row hosted in a splitter pane, or a plain row with a dragged height, fills its height; the
   text area fills the cell, including its shadow-DOM control, so dragging actually grows the text box. */
.sc-ui-splitter-pane > .sc-ui-list-row {
    height: 100%;
}

    .sc-ui-splitter-pane > .sc-ui-list-row .sc-ui-list-cell fluent-text-area,
    .sc-ui-list-row-sized .sc-ui-list-cell fluent-text-area {
        height: 100%;
        min-height: 100%;
    }

        .sc-ui-splitter-pane > .sc-ui-list-row .sc-ui-list-cell fluent-text-area::part(root),
        .sc-ui-splitter-pane > .sc-ui-list-row .sc-ui-list-cell fluent-text-area::part(control),
        .sc-ui-list-row-sized .sc-ui-list-cell fluent-text-area::part(root),
        .sc-ui-list-row-sized .sc-ui-list-cell fluent-text-area::part(control) {
            height: 100%;
            box-sizing: border-box;
        }

/* ============================================
   SplitterComponent
   ============================================
   N panes along one axis with a drag divider between each pair. Pane sizes are set
   inline (by JS during a drag, by the host from SizesParameter afterwards). */
.sc-ui-splitter {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.sc-ui-splitter-horizontal {
    flex-direction: row;
    align-items: stretch;
}

.sc-ui-splitter-vertical {
    flex-direction: column;
}

.sc-ui-splitter-pane {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Divider: a constant 5px drag hit area that overlaps its neighbours (negative margins) so it
   takes no visible room, with a centered line whose thickness comes from the size class. */
.sc-ui-splitter-divider {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    z-index: 1;
    --sc-splitter-line: 1px;
}

.sc-ui-splitter-divider-small {
    --sc-splitter-line: 1px;
}

.sc-ui-splitter-divider-medium {
    --sc-splitter-line: 2px;
}

.sc-ui-splitter-divider-large {
    --sc-splitter-line: 4px;
}

.sc-ui-splitter-divider-line {
    background: var(--neutral-stroke-rest);
}

.sc-ui-splitter-horizontal > .sc-ui-splitter-divider {
    width: 5px;
    margin-inline: -2px;
    cursor: col-resize;
}

    .sc-ui-splitter-horizontal > .sc-ui-splitter-divider > .sc-ui-splitter-divider-line {
        width: var(--sc-splitter-line);
        height: 100%;
    }

.sc-ui-splitter-vertical > .sc-ui-splitter-divider {
    height: 5px;
    margin-block: -2px;
    cursor: row-resize;
}

    /* The trailing divider has no pane below it to overlap; keep it inside the container. */
    .sc-ui-splitter-vertical > .sc-ui-splitter-divider:last-child {
        margin-block-end: 0;
    }

    .sc-ui-splitter-vertical > .sc-ui-splitter-divider > .sc-ui-splitter-divider-line {
        height: var(--sc-splitter-line);
        width: 100%;
    }

.sc-ui-splitter-divider:hover > .sc-ui-splitter-divider-line,
.sc-ui-splitter-divider:active > .sc-ui-splitter-divider-line {
    background: var(--accent-fill-rest);
}

/* Spaced variant: visible breathing room around each divider so stacked boxes read as
   separate items and the drag line sits in clear space between them. */
.sc-ui-splitter-spaced > .sc-ui-splitter-divider {
    height: 16px;
    margin-block: 0;
}

    .sc-ui-splitter-spaced > .sc-ui-splitter-divider > .sc-ui-splitter-divider-line {
        width: 40%;
        border-radius: 2px;
    }

.sc-ui-regex-error {
    color: var(--error);
    font-size: var(--type-ramp-minus-1-font-size, 0.85em);
    margin-top: 4px;
    display: block;
}

.sc-ui-control-error {
    color: var(--sc-color-error);
    font-size: small;
}

.sc-ui-control-error-stack {
    margin: 0.25rem 0 0 0;
    padding: 0.25rem 0.5rem;
    font-family: var(--monospace-font-family, Consolas, "Courier New", monospace);
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-inline-start: 2px solid var(--accent-fill-rest);
    white-space: pre-wrap;
}

/* Compact error envelope — keeps message + sanitized stack inside very small
   components (e.g., TextControl) without inflating their vertical footprint. */
.sc-ui-error-block {
    display: block;
    margin: 0;
    padding: 0 6px 0 0;
    line-height: 1.2;
    /* Never let unbroken text (tokens, file paths, generated type names) widen the block.
       No explicit width: the placeholder is rendered even when there is no error, and a
       sized empty block would become a full-width flex item inside row containers such as
       fluent-toolbar. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

    /* Empty placeholder (no error) must take no layout space at all. */
    .sc-ui-error-block:empty {
        display: none;
    }

    .sc-ui-error-block .sc-ui-control-error {
        display: block;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: var(--sc-color-error);
        font-size: small;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .sc-ui-error-block .sc-ui-control-error-stack {
        display: block;
        margin: 2px 0 0 0;
        padding: 2px 6px;
        font-family: var(--monospace-font-family, Consolas, "Courier New", monospace);
        font-size: 0.7rem;
        line-height: 1.15;
        color: var(--neutral-foreground-hint, #666);
        background: var(--neutral-fill-stealth-rest, rgba(0, 0, 0, 0.04));
        border-inline-start: 2px solid var(--sc-color-error);
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 6em; /* ~5 frames visible; rest scrolls */
        overflow-y: auto;
    }

.toolbar-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    border-radius: calc(var(--control-corner-radius) * 1px);
}

    .toolbar-settings-link:hover {
        background: var(--neutral-fill-stealth-hover);
    }

    .toolbar-settings-link:active {
        background: var(--neutral-fill-stealth-active);
    }

    .toolbar-settings-link:focus-visible {
        outline: var(--focus-stroke-width) solid var(--focus-stroke-outer);
        outline-offset: 1px;
    }

.culture-selector-details {
    position: relative;
    display: inline-block;
}

.culture-selector-summary {
    list-style: none; /* hide default disclosure triangle */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    color: var(--neutral-foreground-rest);
}

    .culture-selector-summary::-webkit-details-marker {
        display: none; /* Safari */
    }

    .culture-selector-summary:hover {
        background: var(--neutral-fill-stealth-hover);
    }

    .culture-selector-summary:focus-visible {
        outline: var(--focus-stroke-width) solid var(--focus-stroke-outer);
        outline-offset: 1px;
    }

.culture-selector-list {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 1000;
    margin: 4px 0 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--neutral-layer-floating);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    box-shadow: var(--elevation-shadow-flyout);
    min-width: 160px;
}

    .culture-selector-list a {
        display: block;
        padding: 6px 12px;
        color: var(--neutral-foreground-rest);
        text-decoration: none;
        white-space: nowrap;
    }

        .culture-selector-list a:hover {
            background: var(--neutral-fill-stealth-hover);
        }

        .culture-selector-list a:focus-visible {
            outline: var(--focus-stroke-width) solid var(--focus-stroke-outer);
            outline-offset: -2px;
        }