/* ===========================================
   CollectionControl - inline summary + action buttons
   Vertically centers content and gives the summary the
   same horizontal inset as Fluent inputs so it lines up
   with sibling controls inside grid cells.
   =========================================== */

.collection-component {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 28px;
    padding: 0;
    box-sizing: border-box;
}

/* Natural width: the "..." button follows the text; long text shrinks and shows an ellipsis. */
.collection-summary {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Root: the box (and any label) sits vertically centered in whatever height the host gives it. */
.sc-ui-boolean-control {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-inline: calc(var(--design-unit) * 2px);
    gap: calc(var(--design-unit) * 2px);
}

/* No visible label: the box alone is centered horizontally. Direction-neutral, so RTL needs nothing extra. */
.sc-ui-boolean-no-label {
    justify-content: center;
}

/* Visible label: the pair starts at the reading edge (left in LTR, right in RTL). */
.sc-ui-boolean-with-label {
    justify-content: flex-start;
}

/* ----- Custom tag editor (CustomTagControl / ChoiceDefinitionComponent / ChoiceValueAllowableComponent) ----- */
.sc-ui-dialog-resizable {
    resize: both;
    overflow: auto;
}

/* Dialog whose initial shape is wider than tall; used by editors with label / field / flag columns. */
.sc-ui-dialog-landscape {
    width: min(840px, calc(100vw - 32px));
}

.sc-ui-editor-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.sc-ui-editor-header-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

/* A titled block of the editor; every block after the first is separated by a divider. */
.sc-ui-editor-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

    .sc-ui-editor-section:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.sc-ui-editor-section-title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

/* Section title on the start side, a related action button (e.g. Add) on the end side. */
.sc-ui-editor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

    .sc-ui-editor-section-header > .sc-ui-editor-section-title {
        margin: 0;
    }

/* Vertical list of field rows. */
.sc-ui-editor-fields {
    display: grid;
    gap: 16px;
}

/* One field row: fixed label column | field | optional trailing flag (e.g. "All languages"). */
.sc-ui-editor-field-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
}

.sc-ui-editor-field-label {
    padding-top: 6px;
    line-height: 20px;
}

/* Field with no trailing flag: it spans the field and flag columns. */
.sc-ui-editor-field-row > .sc-ui-editor-field-span {
    grid-column: 2 / 4;
}

.sc-ui-editor-field-row > fluent-checkbox {
    padding-top: 4px;
    white-space: nowrap;
}

/* Stacked flags under the field column (first grid column stays empty). */
.sc-ui-editor-field-stack {
    display: grid;
    gap: 8px;
}

.sc-ui-editor-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-ui-editor-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
}

    /* The field takes the remaining width; the Same-in-all-languages checkbox keeps its own. */
    .sc-ui-editor-row > .sc-ui-editor-full-width {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Checkboxes and buttons on an editor row keep their natural width and never wrap their caption. */
    .sc-ui-editor-row > fluent-checkbox,
    .sc-ui-editor-row > fluent-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

.sc-ui-editor-full-width {
    width: 100%;
}

/* Table-like list: a bordered box holding a header row and one row (plus optional details) per item. */
.sc-ui-editor-table {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    overflow: hidden;
}

/* Shared column grid for header, option rows and expanded details:
   actions (expand, move, remove) | default | text field | all-languages flag. */
.sc-ui-editor-table-header,
.sc-ui-editor-table-row,
.sc-ui-editor-table-details-row {
    display: grid;
    grid-template-columns: 136px 64px minmax(0, 1fr) 116px;
    align-items: center;
}

.sc-ui-editor-table-header {
    min-height: 36px;
    background: var(--neutral-layer-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.sc-ui-editor-table-row {
    min-height: 48px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.sc-ui-editor-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 7px 8px;
    box-sizing: border-box;
}

    .sc-ui-editor-cell > .sc-ui-editor-full-width {
        flex: 1 1 auto;
        min-width: 0;
    }

.sc-ui-editor-cell-center {
    justify-content: center;
}

/* Secondary text inside a table cell (e.g. the "No default" row caption). */
.sc-ui-editor-hint {
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

/* Expanded per-row details: a stack of details rows on a tinted band, indented a little
   past the collapsed row's leading edge. */
.sc-ui-editor-table-details {
    display: grid;
    gap: 6px;
    padding: 6px 0 14px;
    padding-inline-start: 48px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

/* Details row: field | all-languages flag (same trailing column width as the table rows). */
.sc-ui-editor-table-details-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    align-items: end;
}

.sc-ui-editor-field-with-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

    .sc-ui-editor-field-with-caption > span {
        font-size: 12px;
        line-height: 16px;
        color: var(--neutral-foreground-hint);
    }

/* Short numeric fields keep a fixed width instead of stretching. */
.sc-ui-editor-field-narrow {
    width: 120px;
    flex: 0 0 auto;
}

/* Several fields side by side inside one details cell. */
.sc-ui-editor-cell-inline {
    gap: 16px;
    align-items: flex-end;
}

/* An expanded table row group (row + details) is outlined so it reads as one unit. */
.sc-ui-editor-table-row-expanded {
    outline: 1px solid var(--error, var(--sc-color-error));
    outline-offset: -1px;
}

/* ----- AI tuning (AiTuningComponent) ----- */

/* The end-side header content is pushed to the far end of the header row (right in LTR, left in RTL). */
.collapsible-section-header-custom-end {
    margin-inline-start: auto;
}

/* Run metrics and the Run action sit at the end of the header row (right in LTR, left in RTL). */
.sc-ui-tuning-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
    font-size: 12px;
    white-space: nowrap;
}

.sc-ui-tuning-header-meta-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sc-ui-tuning-header-guid {
    font-family: Consolas, 'Courier New', monospace;
    color: var(--neutral-foreground-hint);
}

/* Tuning page action bar stays visible below the site header while the list scrolls;
   its inline "top" is set at runtime to the measured site header height. */
.sc-ui-tuning-page-bar-sticky {
    position: sticky;
    z-index: 9;
    padding-block: 4px;
    background-color: var(--neutral-layer-1, #fff);
}

/* Two panes side by side inside a SplitterComponent; the divider between them is draggable. */
.sc-ui-tuning-panes {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.sc-ui-tuning-pane {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
}

    /* Children keep their natural height; TextControl's own height: 100% must not stretch
       to fill the pane, which is as tall as the taller sibling pane. The second selector
       out-specifies .sc-ui-text-control in sc-ui-text.css. */
    .sc-ui-tuning-pane > *,
    .sc-ui-tuning-pane > .sc-ui-text-control {
        flex: 0 0 auto;
        height: auto;
    }

    /* The pane title's own bottom margin is replaced by the pane's flex gap. */
    .sc-ui-tuning-pane > .sc-ui-editor-section-title {
        margin: 0;
    }

/* Model | Industry | Workflow | Function on one row above both panes: Model gets the
   widest track; each cell's control stretches to fill its track. */
.sc-ui-tuning-identity-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
}

.sc-ui-tuning-identity-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Run and Commit side by side; each action shares the cell width evenly. */
.sc-ui-tuning-actions-cell {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

    .sc-ui-tuning-actions-cell > div {
        flex: 1 1 0;
    }

.sc-ui-tuning-identity-cell > div,
.sc-ui-tuning-identity-cell fluent-text-field {
    width: 100%;
}

/* Vertical stack of inner cards or fields. */
.sc-ui-tuning-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Read-only list rendering (GridComponent / CollectionControl). Indent per level is 4ch;
   GridComponent pads its first column by the same amount per missing level so columns align.
   The container is the scroll box: vertical when its host bounds its height, horizontal when
   lines do not wrap (no DisplayFlagsEnum.WrapText) and are wider than the box.
   The font size is the page base size regardless of a host's compact density variant. */
.sc-ui-readonly-list-container {
    font-size: var(--type-ramp-base-font-size);
    line-height: 1.6;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

    .sc-ui-readonly-list-container .sc-ui-readonly-list {
        margin: 0;
        padding-inline-start: 4ch;
    }

    .sc-ui-readonly-list-container .sc-ui-readonly-list-header {
        padding-inline-start: 4ch;
        padding-block-end: 2px;
        margin-block-end: 4px;
        font-weight: inherit;
        border-bottom: 1px solid var(--neutral-stroke-rest);
    }

.sc-ui-readonly-list-style-none .sc-ui-readonly-list {
    list-style-type: none;
}

.sc-ui-readonly-list-style-bullets .sc-ui-readonly-list {
    list-style-type: disc;
}

.sc-ui-readonly-list-style-numbers .sc-ui-readonly-list {
    list-style-type: decimal;
}

.sc-ui-readonly-list-style-hyphens .sc-ui-readonly-list {
    list-style-type: "- ";
}

.sc-ui-readonly-list-container .sc-ui-readonly-list.sc-ui-readonly-list-no-markers {
    list-style-type: none;
}

/* The item is the positioning context for its toggle. */
.sc-ui-readonly-list-item {
    position: relative;
}

/* No wrapping: an item stays on one line, marker and text together; the container scrolls horizontally. */
.sc-ui-readonly-list-nowrap .sc-ui-readonly-list-item,
.sc-ui-readonly-list-nowrap .sc-ui-readonly-list-header {
    white-space: nowrap;
}

/* Wrapping: long text continues on the next line, aligned under the text start. */
.sc-ui-readonly-list-wrap .sc-ui-readonly-list-text,
.sc-ui-readonly-list-wrap .sc-ui-readonly-list-header {
    overflow-wrap: anywhere;
}

/* Column-aligned variant: used when the header row renders or when more than one column is joined
   with the separator, so lines share one monospace grid. A single column without a header is plain
   HTML text in the page font. */
.sc-ui-readonly-grid {
    font-family: "Courier New", Courier, monospace;
    color: var(--neutral-foreground-rest);
}

    /* Only the cell text and the header keep their spaces; the list markup itself must collapse
   whitespace, otherwise the line breaks between the toggle, text and nested list become real lines. */
    .sc-ui-readonly-grid .sc-ui-readonly-list-text,
    .sc-ui-readonly-grid .sc-ui-readonly-list-header {
        white-space: pre;
    }

    .sc-ui-readonly-grid.sc-ui-readonly-list-wrap .sc-ui-readonly-list-text,
    .sc-ui-readonly-grid.sc-ui-readonly-list-wrap .sc-ui-readonly-list-header {
        white-space: pre-wrap;
    }

/* The toggle takes no room in the line: it sits in the indent before the marker, so the text
   starts right after the marker. Unmarked lists place it in the indent just before the text. */
.sc-ui-readonly-toggle {
    position: absolute;
    top: 0;
    inset-inline-start: -2ch;
    width: 2ch;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font: inherit;
    line-height: inherit;
    color: var(--accent-fill-rest);
    text-align: start;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    transform-origin: 0.5ch 50%;
}

/* With markers, the toggle steps over the marker so it sits before it. */
.sc-ui-readonly-list-style-bullets .sc-ui-readonly-toggle,
.sc-ui-readonly-list-style-hyphens .sc-ui-readonly-toggle {
    inset-inline-start: -4ch;
}

/* Number markers ("1." to "99.") are wider than bullets/hyphens; keep a gap between the toggle and the number. */
.sc-ui-readonly-list-style-numbers .sc-ui-readonly-toggle {
    inset-inline-start: -6ch;
}

/* Room for the top-level toggle in numbered lists; the header and rows shift together, so columns stay aligned. */
.sc-ui-readonly-list-container.sc-ui-readonly-list-style-numbers {
    padding-inline-start: 2ch;
}

/* Top-level items without markers have nothing to step over; the toggle sits just before the text. */
.sc-ui-readonly-list-no-markers > .sc-ui-readonly-list-item > .sc-ui-readonly-toggle {
    inset-inline-start: -2ch;
}

.sc-ui-readonly-toggle:hover {
    color: var(--accent-fill-hover);
}

.sc-ui-readonly-toggle:focus-visible {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.sc-ui-readonly-toggle-expanded {
    transform: rotate(90deg);
}

[dir="rtl"] .sc-ui-readonly-toggle:not(.sc-ui-readonly-toggle-expanded) {
    transform: scaleX(-1);
}

/*--------- Usage meter (progress bar + trailing label, optional Register action) --------*/

.sc-ui-usage-meter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sc-ui-usage-meter-register-row {
    display: flex;
}

/* Row direction follows the document direction, so the label lands at the end:
   right in LTR, left in RTL. */
.sc-ui-usage-meter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sc-ui-usage-meter-progress {
    flex: 1 1 auto;
    min-width: 0;
}

.sc-ui-usage-meter-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.75rem;
}

.sc-ui-usage-meter-register-row {
    display: flex;
    align-items: stretch;
}

/* Compact, full-width Register action: overrides the Fluent button's default
   height token so the header stays low. */
.sc-ui-usage-meter-register-button {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 24px;
    --height-number: 6;
}