/* Generated from canonical BluUI Block styles. Do not edit this file. */

/* BluUI_Core → Badge — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-badge {
  box-sizing: border-box;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* Badge — display-only labels using the shared color Static Entity.
Use Chip when a label needs selection or removal behavior. */
.blu-badge {
  --blu-badge-background: var(--bluui-surface, #fff);
  --blu-badge-color: var(--bluui-text-muted, #64748b);
  --blu-badge-border: var(--bluui-border, #e2e8f0);
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--blu-badge-border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--blu-badge-background);
  color: var(--blu-badge-color);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.blu-badge .blu-badge__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Shared ComponentColor palette. Presets use Ant Design filled colors;
   statuses use solid colors. Primary/Secondary retain their existing roles. */
.blu-badge.blu-badge--default {
  --blu-badge-background: var(--bluui-color-default-solid);
  --blu-badge-color: var(--bluui-color-default-contrast);
  --blu-badge-border: var(--bluui-color-default-solid);
}
.blu-badge.blu-badge--primary {
  --blu-badge-background: var(--bluui-color-primary-solid);
  --blu-badge-color: var(--bluui-color-primary-contrast);
  --blu-badge-border: var(--bluui-color-primary-solid);
}
.blu-badge.blu-badge--secondary {
  --blu-badge-background: var(--bluui-color-secondary-soft);
  --blu-badge-color: var(--bluui-color-secondary-text);
  --blu-badge-border: var(--bluui-color-secondary-soft);
}
.blu-badge.blu-badge--success {
  --blu-badge-background: var(--bluui-color-success-solid);
  --blu-badge-color: var(--bluui-color-success-contrast);
  --blu-badge-border: var(--bluui-color-success-solid);
}
.blu-badge.blu-badge--processing {
  --blu-badge-background: var(--bluui-color-processing-solid);
  --blu-badge-color: var(--bluui-color-processing-contrast);
  --blu-badge-border: var(--bluui-color-processing-solid);
}
.blu-badge.blu-badge--warning {
  --blu-badge-background: var(--bluui-color-warning-solid);
  --blu-badge-color: var(--bluui-color-warning-contrast);
  --blu-badge-border: var(--bluui-color-warning-solid);
}
.blu-badge.blu-badge--error {
  --blu-badge-background: var(--bluui-color-error-solid);
  --blu-badge-color: var(--bluui-color-error-contrast);
  --blu-badge-border: var(--bluui-color-error-solid);
}
.blu-badge.blu-badge--danger {
  --blu-badge-background: var(--bluui-color-danger-solid);
  --blu-badge-color: var(--bluui-color-danger-contrast);
  --blu-badge-border: var(--bluui-color-danger-solid);
}
.blu-badge.blu-badge--magenta {
  --blu-badge-background: var(--bluui-color-magenta-soft);
  --blu-badge-color: var(--bluui-color-magenta-text);
  --blu-badge-border: var(--bluui-color-magenta-soft);
}
.blu-badge.blu-badge--red {
  --blu-badge-background: var(--bluui-color-red-soft);
  --blu-badge-color: var(--bluui-color-red-text);
  --blu-badge-border: var(--bluui-color-red-soft);
}
.blu-badge.blu-badge--volcano {
  --blu-badge-background: var(--bluui-color-volcano-soft);
  --blu-badge-color: var(--bluui-color-volcano-text);
  --blu-badge-border: var(--bluui-color-volcano-soft);
}
.blu-badge.blu-badge--orange {
  --blu-badge-background: var(--bluui-color-orange-soft);
  --blu-badge-color: var(--bluui-color-orange-text);
  --blu-badge-border: var(--bluui-color-orange-soft);
}
.blu-badge.blu-badge--gold {
  --blu-badge-background: var(--bluui-color-gold-soft);
  --blu-badge-color: var(--bluui-color-gold-text);
  --blu-badge-border: var(--bluui-color-gold-soft);
}
.blu-badge.blu-badge--lime {
  --blu-badge-background: var(--bluui-color-lime-soft);
  --blu-badge-color: var(--bluui-color-lime-text);
  --blu-badge-border: var(--bluui-color-lime-soft);
}
.blu-badge.blu-badge--green {
  --blu-badge-background: var(--bluui-color-green-soft);
  --blu-badge-color: var(--bluui-color-green-text);
  --blu-badge-border: var(--bluui-color-green-soft);
}
.blu-badge.blu-badge--cyan {
  --blu-badge-background: var(--bluui-color-cyan-soft);
  --blu-badge-color: var(--bluui-color-cyan-text);
  --blu-badge-border: var(--bluui-color-cyan-soft);
}
.blu-badge.blu-badge--blue {
  --blu-badge-background: var(--bluui-color-blue-soft);
  --blu-badge-color: var(--bluui-color-blue-text);
  --blu-badge-border: var(--bluui-color-blue-soft);
}
.blu-badge.blu-badge--geekblue {
  --blu-badge-background: var(--bluui-color-geekblue-soft);
  --blu-badge-color: var(--bluui-color-geekblue-text);
  --blu-badge-border: var(--bluui-color-geekblue-soft);
}
.blu-badge.blu-badge--purple {
  --blu-badge-background: var(--bluui-color-purple-soft);
  --blu-badge-color: var(--bluui-color-purple-text);
  --blu-badge-border: var(--bluui-color-purple-soft);
}



/* BluUI_Core → Breadcrumbs — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-breadcrumbs {
  box-sizing: border-box;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* Breadcrumbs — a wrapping path of links and the current-page label.
The native Block supplies the list/navigation semantics and click events. */
.blu-breadcrumbs {
  width: 100%;
}
.blu-breadcrumbs .blu-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.blu-breadcrumbs .blu-breadcrumbs__list > :is([data-container], .list-item, [data-block]) {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
}
.blu-breadcrumbs .blu-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.6;
}
.blu-breadcrumbs .blu-breadcrumbs__link {
  color: var(--bluui-primary, #4f46e5);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.blu-breadcrumbs .blu-breadcrumbs__link:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 3px;
}
.blu-breadcrumbs .blu-breadcrumbs__current {
  color: var(--bluui-text, #182230);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.blu-breadcrumbs .blu-breadcrumbs__separator {
  color: var(--bluui-text-muted, #64748b);
}
/* Only the optional BreadcrumbPreview container uses this class.
Normal browsers hide it; Service Studio displays the sample path. */
.blu-breadcrumbs.blu-breadcrumbs__preview {
  display: none;
  -servicestudio-display: flex;
  -servicestudio-align-items: center;
  -servicestudio-flex-wrap: wrap;
  -servicestudio-gap: 8px;
  -servicestudio-font-size: 12px;
  -servicestudio-line-height: 1.6;
}

/* The existing Items List owns the actual breadcrumb path. */
.blu-breadcrumbs.blu-breadcrumbs__live {
  -servicestudio-display: none;
}


/* BluUI_Core → Button → Style Sheet.
   Extracted from the published BluUITheme on 2026-10-09.
   Size selectors are strengthened for later OutSystems phone/tablet Theme rules;
   Default and Secondary use neutral surfaces matching Chip's palette.
   Keep the shared --blu-* DESIGN TOKENS in BluUITheme.
   Includes existing variants, sizes, loading spinner, focus, and preview. */

/* ============================================================
   BUTTON — BASE
   ============================================================ */

.blu-button.blu-button {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--blu-space-2);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border: 1px solid transparent;
    border-radius: var(--blu-radius-md);

    font-family: var(--blu-font-family);
    font-weight: var(--blu-font-weight-semibold);
    line-height: 1;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    box-shadow: none;

    transition:
        background-color var(--blu-transition-fast),
        border-color var(--blu-transition-fast),
        color var(--blu-transition-fast),
        box-shadow var(--blu-transition-fast),
        transform var(--blu-transition-fast);
}


/* ============================================================
   BUTTON — COLORS
   These only define variables.
   Variant rules below decide how they're displayed.
   ============================================================ */


/* Shared palette. Existing Button variants remain Filled, Outlined, Ghost.
   Named presets have a soft filled surface; status buttons have solid fills.
   Default and Secondary keep their neutral button appearance. */
.blu-button.blu-button--default {
    --blu-button-color: var(--bluui-color-default-text);
    --blu-button-hover: var(--bluui-color-default-text);
    --blu-button-active: var(--bluui-color-default-text);
    --blu-button-soft: var(--bluui-color-default-soft);
    --blu-button-soft-active: var(--bluui-color-default-border);
    --blu-button-fill: var(--bluui-color-default-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-default-text);
}

.blu-button.blu-button--primary {
    --blu-button-color: var(--bluui-color-primary-text);
    --blu-button-hover: var(--bluui-color-primary-text);
    --blu-button-active: var(--bluui-color-primary-text);
    --blu-button-soft: var(--bluui-color-primary-soft);
    --blu-button-soft-active: var(--bluui-color-primary-border);
    --blu-button-fill: var(--bluui-color-primary-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-primary-contrast);
}

.blu-button.blu-button--secondary {
    --blu-button-color: var(--bluui-color-secondary-text);
    --blu-button-hover: var(--bluui-color-secondary-text);
    --blu-button-active: var(--bluui-color-secondary-text);
    --blu-button-soft: var(--bluui-color-secondary-soft);
    --blu-button-soft-active: var(--bluui-color-secondary-border);
    --blu-button-fill: var(--bluui-color-secondary-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-secondary-text);
}

.blu-button.blu-button--success {
    --blu-button-color: var(--bluui-color-success-text);
    --blu-button-hover: var(--bluui-color-success-text);
    --blu-button-active: var(--bluui-color-success-text);
    --blu-button-soft: var(--bluui-color-success-soft);
    --blu-button-soft-active: var(--bluui-color-success-border);
    --blu-button-fill: var(--bluui-color-success-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-success-contrast);
}

.blu-button.blu-button--processing {
    --blu-button-color: var(--bluui-color-processing-text);
    --blu-button-hover: var(--bluui-color-processing-text);
    --blu-button-active: var(--bluui-color-processing-text);
    --blu-button-soft: var(--bluui-color-processing-soft);
    --blu-button-soft-active: var(--bluui-color-processing-border);
    --blu-button-fill: var(--bluui-color-processing-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-processing-contrast);
}

.blu-button.blu-button--warning {
    --blu-button-color: var(--bluui-color-warning-text);
    --blu-button-hover: var(--bluui-color-warning-text);
    --blu-button-active: var(--bluui-color-warning-text);
    --blu-button-soft: var(--bluui-color-warning-soft);
    --blu-button-soft-active: var(--bluui-color-warning-border);
    --blu-button-fill: var(--bluui-color-warning-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-warning-contrast);
}

.blu-button.blu-button--error {
    --blu-button-color: var(--bluui-color-error-text);
    --blu-button-hover: var(--bluui-color-error-text);
    --blu-button-active: var(--bluui-color-error-text);
    --blu-button-soft: var(--bluui-color-error-soft);
    --blu-button-soft-active: var(--bluui-color-error-border);
    --blu-button-fill: var(--bluui-color-error-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-error-contrast);
}

.blu-button.blu-button--danger {
    --blu-button-color: var(--bluui-color-danger-text);
    --blu-button-hover: var(--bluui-color-danger-text);
    --blu-button-active: var(--bluui-color-danger-text);
    --blu-button-soft: var(--bluui-color-danger-soft);
    --blu-button-soft-active: var(--bluui-color-danger-border);
    --blu-button-fill: var(--bluui-color-danger-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-danger-contrast);
}

.blu-button.blu-button--magenta {
    --blu-button-color: var(--bluui-color-magenta-text);
    --blu-button-hover: var(--bluui-color-magenta-text);
    --blu-button-active: var(--bluui-color-magenta-text);
    --blu-button-soft: var(--bluui-color-magenta-soft);
    --blu-button-soft-active: var(--bluui-color-magenta-border);
    --blu-button-fill: var(--bluui-color-magenta-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-magenta-text);
}

.blu-button.blu-button--red {
    --blu-button-color: var(--bluui-color-red-text);
    --blu-button-hover: var(--bluui-color-red-text);
    --blu-button-active: var(--bluui-color-red-text);
    --blu-button-soft: var(--bluui-color-red-soft);
    --blu-button-soft-active: var(--bluui-color-red-border);
    --blu-button-fill: var(--bluui-color-red-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-red-text);
}

.blu-button.blu-button--volcano {
    --blu-button-color: var(--bluui-color-volcano-text);
    --blu-button-hover: var(--bluui-color-volcano-text);
    --blu-button-active: var(--bluui-color-volcano-text);
    --blu-button-soft: var(--bluui-color-volcano-soft);
    --blu-button-soft-active: var(--bluui-color-volcano-border);
    --blu-button-fill: var(--bluui-color-volcano-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-volcano-text);
}

.blu-button.blu-button--orange {
    --blu-button-color: var(--bluui-color-orange-text);
    --blu-button-hover: var(--bluui-color-orange-text);
    --blu-button-active: var(--bluui-color-orange-text);
    --blu-button-soft: var(--bluui-color-orange-soft);
    --blu-button-soft-active: var(--bluui-color-orange-border);
    --blu-button-fill: var(--bluui-color-orange-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-orange-text);
}

.blu-button.blu-button--gold {
    --blu-button-color: var(--bluui-color-gold-text);
    --blu-button-hover: var(--bluui-color-gold-text);
    --blu-button-active: var(--bluui-color-gold-text);
    --blu-button-soft: var(--bluui-color-gold-soft);
    --blu-button-soft-active: var(--bluui-color-gold-border);
    --blu-button-fill: var(--bluui-color-gold-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-gold-text);
}

.blu-button.blu-button--lime {
    --blu-button-color: var(--bluui-color-lime-text);
    --blu-button-hover: var(--bluui-color-lime-text);
    --blu-button-active: var(--bluui-color-lime-text);
    --blu-button-soft: var(--bluui-color-lime-soft);
    --blu-button-soft-active: var(--bluui-color-lime-border);
    --blu-button-fill: var(--bluui-color-lime-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-lime-text);
}

.blu-button.blu-button--green {
    --blu-button-color: var(--bluui-color-green-text);
    --blu-button-hover: var(--bluui-color-green-text);
    --blu-button-active: var(--bluui-color-green-text);
    --blu-button-soft: var(--bluui-color-green-soft);
    --blu-button-soft-active: var(--bluui-color-green-border);
    --blu-button-fill: var(--bluui-color-green-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-green-text);
}

.blu-button.blu-button--cyan {
    --blu-button-color: var(--bluui-color-cyan-text);
    --blu-button-hover: var(--bluui-color-cyan-text);
    --blu-button-active: var(--bluui-color-cyan-text);
    --blu-button-soft: var(--bluui-color-cyan-soft);
    --blu-button-soft-active: var(--bluui-color-cyan-border);
    --blu-button-fill: var(--bluui-color-cyan-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-cyan-text);
}

.blu-button.blu-button--blue {
    --blu-button-color: var(--bluui-color-blue-text);
    --blu-button-hover: var(--bluui-color-blue-text);
    --blu-button-active: var(--bluui-color-blue-text);
    --blu-button-soft: var(--bluui-color-blue-soft);
    --blu-button-soft-active: var(--bluui-color-blue-border);
    --blu-button-fill: var(--bluui-color-blue-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-blue-text);
}

.blu-button.blu-button--geekblue {
    --blu-button-color: var(--bluui-color-geekblue-text);
    --blu-button-hover: var(--bluui-color-geekblue-text);
    --blu-button-active: var(--bluui-color-geekblue-text);
    --blu-button-soft: var(--bluui-color-geekblue-soft);
    --blu-button-soft-active: var(--bluui-color-geekblue-border);
    --blu-button-fill: var(--bluui-color-geekblue-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-geekblue-text);
}

.blu-button.blu-button--purple {
    --blu-button-color: var(--bluui-color-purple-text);
    --blu-button-hover: var(--bluui-color-purple-text);
    --blu-button-active: var(--bluui-color-purple-text);
    --blu-button-soft: var(--bluui-color-purple-soft);
    --blu-button-soft-active: var(--bluui-color-purple-border);
    --blu-button-fill: var(--bluui-color-purple-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-purple-text);
}

/* ============================================================
   BUTTON — FILLED
   Default/Secondary supply neutral fills. Other colors use their original
   solid color, hover, and pressed values through the fallbacks below.
   ============================================================ */

.blu-button.blu-button--filled {
    background-color: var(--blu-button-fill, var(--blu-button-color));
    border-color: var(--blu-button-fill-border, var(--blu-button-color));
    color: var(--blu-button-contrast);

    box-shadow: var(--blu-shadow-xs);
}

.blu-button.blu-button--filled:hover {
    background-color: var(--blu-button-fill-hover, var(--blu-button-hover));
    border-color: var(--blu-button-fill-border-hover, var(--blu-button-hover));
    color: var(--blu-button-contrast);
}

.blu-button.blu-button--filled:active {
    background-color: var(--blu-button-fill-active, var(--blu-button-active));
    border-color: var(--blu-button-fill-border-active, var(--blu-button-active));
    color: var(--blu-button-contrast);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — OUTLINED
   ============================================================ */

.blu-button.blu-button--outlined {
    background-color: transparent;
    border-color: var(--blu-button-color);
    color: var(--blu-button-color);

    box-shadow: none;
}

.blu-button.blu-button--outlined:hover {
    background-color: var(--blu-button-soft);
    border-color: var(--blu-button-hover);
    color: var(--blu-button-hover);
}

.blu-button.blu-button--outlined:active {
    background-color: var(--blu-button-soft-active);
    border-color: var(--blu-button-active);
    color: var(--blu-button-active);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — GHOST
   ============================================================ */

.blu-button.blu-button--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--blu-button-color);

    box-shadow: none;
}

.blu-button.blu-button--ghost:hover {
    background-color: var(--blu-button-soft);
    border-color: transparent;
    color: var(--blu-button-hover);
}

.blu-button.blu-button--ghost:active {
    background-color: var(--blu-button-soft-active);
    border-color: transparent;
    color: var(--blu-button-active);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — SIZES (specificity preserves sizes before Theme CSS)
   ============================================================ */

.blu-button.blu-button.blu-button--small {
    min-height: 32px;

    padding: 0 12px;

    font-size: var(--blu-font-size-sm);
}

.blu-button.blu-button.blu-button--medium {
    min-height: 40px;

    padding: 0 16px;

    font-size: var(--blu-font-size-md);
}

.blu-button.blu-button.blu-button--large {
    min-height: 48px;

    padding: 0 20px;

    font-size: var(--blu-font-size-lg);
}


/* ============================================================
   BUTTON — FULL WIDTH
   ============================================================ */

.blu-button.blu-button--full {
    width: 100%;
}


/* ============================================================
   BUTTON — FOCUS
   ============================================================ */

.blu-button.blu-button:focus {
    outline: none;
}

.blu-button.blu-button:focus-visible {
    outline: none;

    box-shadow: var(--blu-focus-ring);
}


/* ============================================================
   BUTTON — DISABLED
   ============================================================ */

.blu-button.blu-button:disabled,
.blu-button.blu-button--disabled {
    opacity: 0.48;

    cursor: not-allowed;
    pointer-events: none;

    box-shadow: none;
    transform: none;
}


/* ============================================================
   BUTTON — LOADING
   ============================================================ */

.blu-button.blu-button--loading {
    cursor: wait;
    pointer-events: none;
}

/*
   OutSystems may render the native button as disabled while loading.
   Don't fade the loading state.
*/

.blu-button.blu-button--loading:disabled {
    opacity: 1;
}


/* ============================================================
   BUTTON — SPINNER
   ============================================================ */

.blu-button__spinner {
    display: inline-block;

    width: 16px;
    height: 16px;

    box-sizing: border-box;

    flex: 0 0 16px;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    opacity: 0.85;

    animation: blu-spin 0.65s linear infinite;
}

.blu-button--small .blu-button__spinner {
    width: 14px;
    height: 14px;

    flex-basis: 14px;
}

.blu-button--large .blu-button__spinner {
    width: 18px;
    height: 18px;

    flex-basis: 18px;
}

@keyframes blu-spin {

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   BUTTON — CONTENT
   ============================================================ */

.blu-button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* ============================================================
   BUTTON — ICON
   ============================================================ */

.blu-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size: 1.1em;
    line-height: 1;
}

/* ============================================================
   BUTTON — PREVIEW
   ============================================================ */

.blu-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    min-width: 90px;

    padding: 0 16px;

    border-radius: 8px;

    background-color: var(--bluui-color-primary-solid, #4f46e5);
    color: var(--bluui-on-primary, #ffffff);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    font-weight: 600;
}


/* BluUI_Core → Card — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-card {
  box-sizing: border-box;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* Card — root surface, header/actions, body, and optional footer.
Keep overflow visible so embedded grid menus and popovers can extend outside. */
.blu-card {
  width: 100%;
  border: 1px solid var(--bluui-border, #e2e8f0);
  /* Fill the native Block wrapper when its parent layout stretches a row.
  With an auto-height parent, the Card keeps its natural content height.
  This behavior belongs to Card and applies outside the showcase too. */
  height: 100%;
  border-radius: var(--bluui-card-radius, 12px);
  background: var(--bluui-surface, #fff);
  box-shadow: 0 5px 15px rgb(36 51 73 / 2%);
  /* Grid popovers and other consumer overlays must not be clipped. */
  overflow: visible;
}
.blu-card .blu-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px 0;
}
.blu-card .blu-card__heading {
  width: auto;
  min-width: 0;
  flex: 1 1 200px;
}
.blu-card .blu-card__title {
  display: block;
  margin: 0;
  color: var(--bluui-text, #182230);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.blu-card .blu-card__description {
  display: block;
  margin-top: 4px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.blu-card .blu-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin-inline-start: auto;
}
.blu-card .blu-card__body {
  min-width: 0;
  padding: 20px 24px;
}
.blu-card.blu-card--flush > .blu-card__body {
  padding: 0;
}
.blu-card.blu-card--flush > .blu-card__header {
  padding-bottom: 18px;
}
.blu-card .blu-card__footer {
  min-width: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--bluui-border, #e2e8f0);
}
/* Placeholders and referenced Blocks may add wrapper elements. */
.blu-card__actions > :is([data-block], [data-container]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Smaller screens retain source order and reduce spacing. */
@media (max-width: 700px) {
  .blu-card .blu-card__header {
    padding: 18px 16px 0;
  }
  .blu-card .blu-card__body {
    padding: 18px 16px;
  }
  .blu-card.blu-card--flush > .blu-card__body {
    padding: 0;
  }
  .blu-card.blu-card--flush > .blu-card__header {
    padding-bottom: 14px;
  }
  .blu-card .blu-card__footer {
    padding: 14px 16px;
  }
}
/* Design canvas: make empty placeholders visible. */
.blu-card .blu-card__body {
  -servicestudio-min-height: 96px;
}
.blu-card .blu-card__actions {
  -servicestudio-min-width: 112px;
  -servicestudio-min-height: 32px;
}
.blu-card .blu-card__footer {
  -servicestudio-min-height: 48px;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Horizontal hierarchy columns with independent vertical scrolling. */
.blu-cascader{
  position:relative;
  width:100%;
  min-width:200px;
  color:var(--bluui-text)
}
.blu-cascader__trigger{
  width:100%;
  justify-content:flex-start;
  padding-right:48px;
  min-height:42px;
  font-weight:400;
  white-space:normal;
  text-align:left
}
.blu-cascader__trigger:after{
  content:"⌄";
  position:absolute;
  right:14px;
  font-size:17px
}
.blu-cascader>button:nth-child(2){
  position:absolute;
  right:34px;
  top:4px;
  min-height:32px;
  padding:2px 7px;
  border:0;
  background:transparent
}
.blu-cascader>button[hidden]{
  display:none
}
.blu-cascader__popup{
  position:absolute;
  z-index:60;
  top:calc(100% + 8px);
  left:0;
  background:var(--bluui-surface);
  border:1px solid var(--bluui-border);
  border-radius:12px;
  box-shadow:0 16px 42px #0002;
  max-width:min(760px,calc(100vw - 48px));
  overflow:hidden
}
.blu-cascader__popup[hidden]{
  display:none
}
.blu-cascader__columns{
  display:flex;
  max-width:100%;
  overflow-x:auto
}
.blu-cascader__column{
  flex:0 0 190px;
  max-height:300px;
  overflow-y:auto;
  padding:6px
}
.blu-cascader__column+.blu-cascader__column{
  border-left:1px solid var(--bluui-border)
}
.blu-cascader__row{
  display:flex;
  gap:2px
}
.blu-cascader__row>button:first-child{
  flex:1;
  min-width:0;
  text-align:left;
  justify-content:flex-start;
  white-space:normal
}
.blu-cascader__row>button{
  border:0;
  font-weight:400;
  background:transparent
}
.blu-cascader__row [aria-expanded=true],.blu-cascader__row [aria-pressed=true]{
  background:var(--bluui-color-primary-soft);
  color:var(--bluui-color-primary-text);
  font-weight:600
}
@media(max-width:600px){.blu-cascader__column{
  flex-basis:170px
}
.blu-cascader__popup{
  max-width:calc(100vw - 40px)
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-cascader-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluUI_Core → ChipGroup — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-chip-group {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* ChipGroup — wrap related chips without stretching them to full width.
Root padding leaves space for the selected/focus outlines. */
.blu-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px;
}

/* Set this class on ChipGroup's Content Placeholder. That element contains
the native Chip Block wrappers, so it must own the wrapping layout and gap.
Inherit alignment so a centered playground group stays centered. */
.blu-chip-group > .blu-chip-group__items {
  display: flex;
  flex-wrap: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  width: 100%;
  min-width: 0;
}

/* Each Chip's Block wrapper keeps its natural width. Scope these rules to
item wrappers so the Content Placeholder itself can still fill the group. */
.blu-chip-group > [data-block],
.blu-chip-group > [data-container]:not(.blu-chip-group__items),
.blu-chip-group > .blu-chip-group__items > :is([data-block], [data-container]) {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
}


/* BluUI_Core → Chip — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-chip {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* Chip — root and default color
The root wraps two sibling controls: selectable label and optional remove.
The default appearance is neutral; the modifier classes below map the
shared ComponentColor records to theme tokens. */
.blu-chip {
  --chip-bg: var(--bluui-secondary-soft, #f1f5f9);
  --chip-fg: var(--bluui-secondary-text, #334155);
  --chip-border: var(--bluui-border, #cbd5e1);
  display: inline-flex;
  align-items: stretch;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  vertical-align: middle;
}

/* Shared ComponentColor palette. Presets use Ant Design filled colors;
   statuses use solid colors. Primary/Secondary retain their existing roles. */
.blu-chip.blu-chip--default {
  --chip-bg: var(--bluui-color-default-solid);
  --chip-fg: var(--bluui-color-default-contrast);
  --chip-border: var(--bluui-color-default-solid);
}
.blu-chip.blu-chip--primary {
  --chip-bg: var(--bluui-color-primary-solid);
  --chip-fg: var(--bluui-color-primary-contrast);
  --chip-border: var(--bluui-color-primary-solid);
}
.blu-chip.blu-chip--secondary {
  --chip-bg: var(--bluui-color-secondary-soft);
  --chip-fg: var(--bluui-color-secondary-text);
  --chip-border: var(--bluui-color-secondary-soft);
}
.blu-chip.blu-chip--success {
  --chip-bg: var(--bluui-color-success-solid);
  --chip-fg: var(--bluui-color-success-contrast);
  --chip-border: var(--bluui-color-success-solid);
}
.blu-chip.blu-chip--processing {
  --chip-bg: var(--bluui-color-processing-solid);
  --chip-fg: var(--bluui-color-processing-contrast);
  --chip-border: var(--bluui-color-processing-solid);
}
.blu-chip.blu-chip--warning {
  --chip-bg: var(--bluui-color-warning-solid);
  --chip-fg: var(--bluui-color-warning-contrast);
  --chip-border: var(--bluui-color-warning-solid);
}
.blu-chip.blu-chip--error {
  --chip-bg: var(--bluui-color-error-solid);
  --chip-fg: var(--bluui-color-error-contrast);
  --chip-border: var(--bluui-color-error-solid);
}
.blu-chip.blu-chip--danger {
  --chip-bg: var(--bluui-color-danger-solid);
  --chip-fg: var(--bluui-color-danger-contrast);
  --chip-border: var(--bluui-color-danger-solid);
}
.blu-chip.blu-chip--magenta {
  --chip-bg: var(--bluui-color-magenta-soft);
  --chip-fg: var(--bluui-color-magenta-text);
  --chip-border: var(--bluui-color-magenta-soft);
}
.blu-chip.blu-chip--red {
  --chip-bg: var(--bluui-color-red-soft);
  --chip-fg: var(--bluui-color-red-text);
  --chip-border: var(--bluui-color-red-soft);
}
.blu-chip.blu-chip--volcano {
  --chip-bg: var(--bluui-color-volcano-soft);
  --chip-fg: var(--bluui-color-volcano-text);
  --chip-border: var(--bluui-color-volcano-soft);
}
.blu-chip.blu-chip--orange {
  --chip-bg: var(--bluui-color-orange-soft);
  --chip-fg: var(--bluui-color-orange-text);
  --chip-border: var(--bluui-color-orange-soft);
}
.blu-chip.blu-chip--gold {
  --chip-bg: var(--bluui-color-gold-soft);
  --chip-fg: var(--bluui-color-gold-text);
  --chip-border: var(--bluui-color-gold-soft);
}
.blu-chip.blu-chip--lime {
  --chip-bg: var(--bluui-color-lime-soft);
  --chip-fg: var(--bluui-color-lime-text);
  --chip-border: var(--bluui-color-lime-soft);
}
.blu-chip.blu-chip--green {
  --chip-bg: var(--bluui-color-green-soft);
  --chip-fg: var(--bluui-color-green-text);
  --chip-border: var(--bluui-color-green-soft);
}
.blu-chip.blu-chip--cyan {
  --chip-bg: var(--bluui-color-cyan-soft);
  --chip-fg: var(--bluui-color-cyan-text);
  --chip-border: var(--bluui-color-cyan-soft);
}
.blu-chip.blu-chip--blue {
  --chip-bg: var(--bluui-color-blue-soft);
  --chip-fg: var(--bluui-color-blue-text);
  --chip-border: var(--bluui-color-blue-soft);
}
.blu-chip.blu-chip--geekblue {
  --chip-bg: var(--bluui-color-geekblue-soft);
  --chip-fg: var(--bluui-color-geekblue-text);
  --chip-border: var(--bluui-color-geekblue-soft);
}
.blu-chip.blu-chip--purple {
  --chip-bg: var(--bluui-color-purple-soft);
  --chip-fg: var(--bluui-color-purple-text);
  --chip-border: var(--bluui-color-purple-soft);
}

/* State modifiers are independent of color. Selection adds an outline-like
ring; disabled styling accompanies native disabled controls and action guards. */
.blu-chip--selected {
  box-shadow: 0 0 0 2px var(--bluui-primary, #4f46e5);
}

.blu-chip--disabled {
  opacity: .55;
}

/* Internal native Buttons use chip sizing instead of the standard Button shape.
The repeated root class keeps these rules above later .phone .btn Theme rules.
Reset only these two scoped controls; preserve other BluUI Button styles. */
.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 36px;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: none;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The separate remove control retains a usable target even for a short label. */
.blu-chip.blu-chip .blu-chip__remove {
  min-width: 36px;
  padding: 6px 10px;
}

/* Nonselectable chips display this plain label beside the optional remove button. */
.blu-chip .blu-chip__label {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):disabled {
  cursor: default;
}

/* Keyboard focus stays visible on the specific control, independently of selection. */
.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 3px;
}

.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}


/* BluUI_Core → CommandPalette — owning Block stylesheet. */
/* Shared control primitives, scoped to this component's runtime host. */
.blu-command { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
.blu-command *, .blu-command *::before, .blu-command *::after { box-sizing: border-box; }
.blu-command [hidden] { display: none !important; }
.blu-command .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.blu-command .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
.blu-command .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
.blu-command .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
.blu-command .blu-control--quiet { border-color: transparent; background: transparent; }
.blu-command .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
.blu-command .blu-control:disabled { opacity: .5; cursor: default; }
.blu-command .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
.blu-command :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
.blu-command .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.blu-command .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
/* Native design canvas stand-in; runtime content stays in the empty host. */
.blu-command-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }

/* Native dialog supplies the top layer, focus containment, and inert backdrop. */
.blu-command__dialog { padding: 0; width: min(620px, calc(100vw - 32px)); max-height: min(650px, calc(100dvh - 48px)); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 14px; color: var(--bluui-text, #182230); box-shadow: 0 28px 90px #10182840; overflow: hidden; }
.blu-command__dialog::backdrop { background: var(--bluui-scrim, #18223066); backdrop-filter: blur(3px); }
.blu-command .blu-command__dialog > .blu-input { height: 60px; padding: 18px 20px; border: 0; border-radius: 0; border-bottom: 1px solid var(--bluui-border, #e6eaf1); font-size: 16px; }
.blu-command__list { list-style: none; margin: 0; padding: 10px; max-height: min(430px, calc(100dvh - 200px)); overflow: auto; }
.blu-command__group { padding: 12px 10px 6px; color: var(--bluui-text-muted, #667085); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.blu-command__option { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 12px; margin: 3px 0; border-radius: 8px; cursor: pointer; }
.blu-command__option[aria-selected="true"] { background: var(--bluui-primary-soft, #f0edff); color: var(--bluui-primary-text, #4338ca); }
.blu-command__option[aria-disabled="true"] { opacity: .45; cursor: default; }
.blu-command__copy { display: flex; flex-direction: column; }
.blu-command__copy small { color: var(--bluui-text-muted, #667085); font-size: 12px; }
.blu-command kbd { padding: 2px 6px; background: var(--bluui-surface-muted, #f5f6fa); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 4px; font: 11px ui-monospace, monospace; white-space: nowrap; }
.blu-command__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--bluui-border, #e6eaf1); color: var(--bluui-text-muted, #667085); font-size: 11px; }

/* Runtime validation messages sit beside the interactive root. */
.blu-command-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Real definition-list semantics, responsive columns and optional full-width values. */
.blu-descriptions{
  width:100%;
  color:var(--bluui-text)
}
.blu-descriptions>h3{
  font-size:17px;
  margin:0 0 16px
}
.blu-descriptions__grid{
  display:grid;
  grid-template-columns:repeat(var(--blu-description-columns,2),minmax(0,1fr));
  margin:0;
  gap:0
}
.blu-descriptions__item{
  grid-column:span var(--blu-description-span,1);
  padding:16px;
  min-width:0
}
.blu-descriptions__item dt{
  font-size:12px;
  font-weight:600;
  color:var(--bluui-text-muted);
  margin-bottom:7px
}
.blu-descriptions__item dd{
  margin:0;
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--blu-common-color)
}
.blu-descriptions__item dd button{
  margin-left:12px
}
.blu-descriptions--bordered{
  border:1px solid var(--bluui-border);
  border-radius:12px;
  overflow:hidden
}
.blu-descriptions--bordered .blu-descriptions__item{
  border-bottom:1px solid var(--bluui-border);
  background:var(--bluui-surface-muted)
}
@media(max-width:640px){.blu-descriptions__grid{
  grid-template-columns:minmax(0,1fr)
}
.blu-descriptions__item{
  grid-column:span 1
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-descriptions-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Top-layer overlay. Native Content and Footer widgets stay alive while closed. */
.blu-overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  border:0;
  margin:0;
  padding:24px;
  box-sizing:border-box;
  background:rgba(8,14,27,.52);
  backdrop-filter:blur(3px);
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bluui-text)
}
.blu-overlay[hidden]{
  display:none!important
}
.blu-overlay::backdrop{
  background:transparent
}
.blu-overlay__panel{
  width:min(560px,100%);
  max-height:calc(100dvh - 48px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--bluui-border);
  border-radius:18px;
  background:var(--bluui-surface);
  box-shadow:0 28px 90px #0005;
  outline:none;
  overflow:hidden
}
.blu-overlay[data-size=small] .blu-overlay__panel{
  width:min(400px,100%)
}
.blu-overlay[data-size=large] .blu-overlay__panel{
  width:min(800px,100%)
}
.blu-overlay__header{
  position:relative;
  padding:24px 64px 20px 24px;
  border-bottom:1px solid var(--bluui-border)
}
.blu-overlay__header h2{
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.02em;
  margin:0
}
.blu-overlay__description{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--bluui-text-muted)
}
.blu-overlay__description[hidden]{
  display:none
}
.blu-overlay__close{
  position:absolute;
  right:18px;
  top:20px;
  padding:0;
  width:34px;
  min-height:34px;
  font-size:23px;
  border:0;
  background:transparent
}
.blu-overlay__content{
  padding:24px;
  overflow:auto;
  min-height:0;
  line-height:1.6
}
.blu-overlay__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 24px;
  background:var(--bluui-surface-muted);
  border-top:1px solid var(--bluui-border)
}
.blu-overlay__footer[hidden]{
  display:none
}
.blu-overlay__actions{
  display:flex;
  gap:8px;
  margin-left:auto
}
.blu-overlay__actions[hidden]{
  display:none
}
/* Drawer variations share the same overlay and focus behavior. */
.blu-overlay--drawer{
  padding:0;
  justify-content:flex-end;
  align-items:stretch
}
.blu-overlay--drawer .blu-overlay__panel{
  max-height:100dvh;
  border-radius:18px 0 0 18px;
  width:min(480px,calc(100vw - 24px))
}
.blu-overlay--drawer .blu-overlay__content{
  flex:1
}
.blu-overlay--drawer[data-placement=left]{
  justify-content:flex-start
}
.blu-overlay--drawer[data-placement=left] .blu-overlay__panel{
  border-radius:0 18px 18px 0
}
.blu-overlay--drawer[data-placement=bottom]{
  align-items:flex-end;
  justify-content:center
}
.blu-overlay--drawer[data-placement=bottom] .blu-overlay__panel{
  width:100%;
  max-height:85dvh;
  border-radius:18px 18px 0 0
}
@media(max-width:600px){.blu-overlay{
  padding:12px
}
.blu-overlay--drawer{
  padding:0
}
.blu-overlay__panel{
  max-height:calc(100dvh - 24px)
}
.blu-overlay__header,.blu-overlay__content{
  padding:20px
}
.blu-overlay__header{
  padding-right:56px
}
.blu-overlay__footer{
  padding:14px 20px
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-drawer-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Illustration, copy and the optional native Actions slot form one empty state. */
.blu-empty-state{
  text-align:center;
  padding:32px 24px 16px;
  color:var(--bluui-text)
}
.blu-empty-state__art{
  width:76px;
  height:76px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  background:var(--bluui-surface-muted);
  border:1px solid var(--bluui-border);
  border-radius:22px;
  color:var(--bluui-text-muted);
  font-size:40px;
  font-weight:400
}
.blu-empty-state h3{
  margin:0 0 8px;
  font-size:18px
}
.blu-empty-state p{
  margin:0 auto;
  max-width:360px;
  color:var(--bluui-text-muted);
  font-size:14px;
  line-height:1.6
}
.blu-empty-state--compact{
  padding:16px
}
.blu-empty-state--compact .blu-empty-state__art{
  width:48px;
  height:48px;
  border-radius:14px;
  font-size:28px;
  margin-bottom:12px
}
.blu-empty-state--compact h3{
  font-size:15px
}
.blu-empty-state__actions{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:0 24px 24px
}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-empty-state-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluUI_Core → FilterBuilder — owning Block stylesheet. */
/* Shared control primitives, scoped to this component's runtime host. */
.blu-filter { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
.blu-filter *, .blu-filter *::before, .blu-filter *::after { box-sizing: border-box; }
.blu-filter [hidden] { display: none !important; }
.blu-filter .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.blu-filter .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
.blu-filter .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
.blu-filter .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
.blu-filter .blu-control--quiet { border-color: transparent; background: transparent; }
.blu-filter .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
.blu-filter .blu-control:disabled { opacity: .5; cursor: default; }
.blu-filter .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
.blu-filter :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
.blu-filter .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.blu-filter .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
/* Native design canvas stand-in; runtime content stays in the empty host. */
.blu-filter-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }

/* Nested groups carry their own outline and responsive rule rows. */
.blu-filter__group { margin: 0 0 12px; padding: 16px; min-width: 0; border: 1px solid var(--bluui-border, #dce3ed); border-left: 3px solid var(--bluui-primary-border, #a5a1f8); border-radius: 10px; background: var(--bluui-surface-muted, #fbfcff); }
.blu-filter__group legend { padding: 0 6px; color: var(--bluui-text-muted, #667085); font-size: 12px; font-weight: 600; }
.blu-filter__group .blu-filter__group { margin-top: 14px; background: var(--bluui-surface, white); }
.blu-filter__group-head, .blu-filter__commands, .blu-filter__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blu-filter__group-head { justify-content: space-between; margin-bottom: 16px; }
.blu-filter__group-head select { max-width: 200px; }
.blu-filter__rule { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.blu-filter__rule > .blu-input { flex: 1 1 145px; }
.blu-filter__commands { margin-top: 14px; }
.blu-filter__summary { background: var(--bluui-surface-muted, #f3f5f9); padding: 12px; border-radius: 8px; color: var(--bluui-text-muted, #475467); overflow-wrap: anywhere; }
.blu-filter__footer { justify-content: flex-end; border-top: 1px solid var(--bluui-border, #e9edf3); padding-top: 14px; }
.blu-filter fieldset:disabled { opacity: .6; }

/* Runtime validation messages sit beside the interactive root. */
.blu-filter-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }


/* Kanban surface, horizontal board scrolling, and independently scrolling lists.
   All card data is text; colors are restricted to BluUI semantic color names. */
.blu-kanban-block,.blu-kanban { width:100%; min-width:0; color:var(--bluui-text,#1c293b); }
.blu-kanban__toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.blu-kanban__summary { color:var(--bluui-text-muted, #62748d); font-size:13px; }
.blu-kanban__search,.blu-kanban__select { box-sizing:border-box; padding:9px 12px; border:1px solid var(--bluui-control-border, #cbd5e4); border-radius:8px; background:var(--bluui-surface, #fff); color:var(--bluui-text, #1c293b); font:inherit; min-height:40px; }
.blu-kanban__search { width:240px; max-width:100%; }
.blu-kanban__search[hidden] { display:none; }
.blu-kanban__board { display:flex; align-items:stretch; gap:16px; overflow:auto; padding:2px 2px 12px; height:520px; min-height:180px; scrollbar-gutter:stable; }
.blu-kanban__column { --kanban-accent:var(--bluui-surface-raised, #8b9bb3); flex:1 0 264px; max-width:420px; min-width:0; display:flex; flex-direction:column; border:1px solid var(--bluui-border, #e1e7f0); border-top:3px solid var(--kanban-accent); border-radius:10px; background:var(--bluui-surface-muted, #f4f6fa); }
.blu-kanban__column--default { --kanban-accent:var(--bluui-color-default-solid, #000000); }
.blu-kanban__column--primary { --kanban-accent:var(--bluui-color-primary-solid, #4f46e5); }
.blu-kanban__column--secondary { --kanban-accent:var(--bluui-color-secondary-solid, #475569); }
.blu-kanban__column--success { --kanban-accent:var(--bluui-color-success-solid, #52c41a); }
.blu-kanban__column--processing { --kanban-accent:var(--bluui-color-processing-solid, #1677ff); }
.blu-kanban__column--warning { --kanban-accent:var(--bluui-color-warning-solid, #faad14); }
.blu-kanban__column--error { --kanban-accent:var(--bluui-color-error-solid, #ff4d4f); }
.blu-kanban__column--danger { --kanban-accent:var(--bluui-color-danger-solid, #ff4d4f); }
.blu-kanban__column--magenta { --kanban-accent:var(--bluui-color-magenta-solid, #eb2f96); }
.blu-kanban__column--red { --kanban-accent:var(--bluui-color-red-solid, #f5222d); }
.blu-kanban__column--volcano { --kanban-accent:var(--bluui-color-volcano-solid, #fa541c); }
.blu-kanban__column--orange { --kanban-accent:var(--bluui-color-orange-solid, #fa8c16); }
.blu-kanban__column--gold { --kanban-accent:var(--bluui-color-gold-solid, #faad14); }
.blu-kanban__column--lime { --kanban-accent:var(--bluui-color-lime-solid, #a0d911); }
.blu-kanban__column--green { --kanban-accent:var(--bluui-color-green-solid, #52c41a); }
.blu-kanban__column--cyan { --kanban-accent:var(--bluui-color-cyan-solid, #13c2c2); }
.blu-kanban__column--blue { --kanban-accent:var(--bluui-color-blue-solid, #1677ff); }
.blu-kanban__column--geekblue { --kanban-accent:var(--bluui-color-geekblue-solid, #2f54eb); }
.blu-kanban__column--purple { --kanban-accent:var(--bluui-color-purple-solid, #722ed1); }
.blu-kanban__column-head { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:8px; padding:16px 14px 12px; }
.blu-kanban__column-head h3 { font:inherit; font-size:14px; font-weight:600; line-height:1.4; margin:0; }
.blu-kanban__count { font-size:11px; color:var(--bluui-text-muted, #60728b); background:var(--bluui-surface-muted, #e7ecf3); padding:3px 7px; border-radius:6px; white-space:nowrap; }
.blu-kanban__count.is-full { color:var(--bluui-warning-text, #915c0e); background:var(--bluui-warning-soft, #fff0cf); }
.blu-kanban__list { list-style:none; margin:0; padding:2px 12px 18px; overflow:auto; flex:1; min-height:90px; }
.blu-kanban__card { position:relative; background:var(--bluui-surface, #fff); padding:14px; margin:0 0 10px; border:1px solid var(--bluui-border, #dce3ee); border-radius:9px; box-shadow:0 2px 3px #1c293b04; overflow-wrap:anywhere; }
.blu-kanban__card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.blu-kanban__card-key { color:var(--bluui-text-muted, #8290a4); font:11px ui-monospace,monospace; }
.blu-kanban__tag { color:var(--bluui-primary-text, #5344bc); background:var(--bluui-primary-soft, #f0edff); border-radius:5px; padding:3px 7px; font-size:11px; }
.blu-kanban__drag { border:0; border-radius:5px; padding:3px 7px; background:transparent; color:var(--bluui-text-muted, #7b8ba4); font-size:20px; line-height:1; cursor:grab; touch-action:none; }
.blu-kanban__drag:hover { background:var(--bluui-surface-muted, #eef0ff); color:var(--bluui-primary-text, #4f46e5); }
.blu-kanban__title { display:block; padding:0; border:0; color:var(--bluui-text, #263247); background:transparent; text-align:left; font:inherit; font-size:14px; font-weight:600; line-height:1.5; cursor:pointer; }
.blu-kanban__description { font-size:12px; line-height:1.6; color:var(--bluui-text-muted, #687a93); margin:8px 0 12px; }
.blu-kanban__assignee { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--bluui-text-muted, #6a7990); margin-top:14px; }
.blu-kanban__avatar { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--bluui-surface-muted, #e8eef7); color:var(--bluui-text-muted, #5c6e87); font-size:9px; font-weight:600; }
.blu-kanban__empty { padding:24px 12px; text-align:center; font-size:13px; color:var(--bluui-text-muted, #7c8ba1); border:1px dashed var(--bluui-control-border, #d5deeb); border-radius:8px; }
.blu-kanban__card.is-disabled { opacity:.6; }
.blu-kanban button:disabled { cursor:default; }
.blu-kanban__drag:disabled { opacity:.4; }
.blu-kanban__column.is-disabled { opacity:.7; }
/* Shared pointer and keyboard move routes enforce identical column limits. */
.blu-kanban-block.is-dragging { user-select:none; cursor:grabbing; }
/* Lifted card follows the pointer above all scrolling panes. The source keeps
   its space, making the original position clear without shifting other cards. */
.blu-kanban__card.is-drag-source {
  opacity: .25;
  border-style: dashed;
  box-shadow: none;
}
.blu-kanban__drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  pointer-events: none;
  user-select: none;
  border-color: var(--bluui-primary, #4f46e5);
  box-shadow: 0 16px 36px #1c293b30, 0 3px 8px #1c293b1a;
  will-change: transform;
}
.blu-kanban__drag-preview * { pointer-events: none; }
.blu-kanban__list.is-drop-target { background:var(--bluui-primary-soft, #e9eaff); }
.blu-kanban__card.is-drop-before::before { content:""; position:absolute; top:-7px; left:0; right:0; height:3px; background:var(--bluui-color-primary-solid, #4f46e5); border-radius:3px; }
.blu-kanban__error { color:var(--bluui-danger-text, #b42318); background:var(--bluui-danger-soft, #fff1f1); padding:10px 14px; border-radius:8px; margin-top:12px; font-size:13px; }
.blu-kanban__error[hidden] { display:none; }
.blu-kanban__dialog { box-sizing:border-box; color:var(--bluui-text, #1c293b); border:1px solid var(--bluui-border, #dce3ef); border-radius:14px; padding:24px; width:420px; max-width:calc(100vw - 32px); box-shadow:0 24px 80px #1a244933; }
.blu-kanban__dialog::backdrop { background:var(--bluui-scrim, #10182866); }
.blu-kanban__dialog h3 { font-size:18px; margin:0 0 20px; }
.blu-kanban__dialog label { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; font-size:13px; font-weight:600; }
.blu-kanban__dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.blu-kanban__button { border:1px solid var(--bluui-control-border, #d2daea); padding:9px 16px; min-height:40px; border-radius:8px; background:var(--bluui-surface, #fff); color:var(--bluui-text, #34425b); font:600 13px/1.4 sans-serif; cursor:pointer; }
.blu-kanban__button--primary { background:var(--bluui-color-primary-solid, #4f46e5); border-color:var(--bluui-primary, #4f46e5); color:var(--bluui-on-primary, #fff); }
.blu-kanban button:focus-visible,.blu-kanban input:focus-visible,.blu-kanban select:focus-visible { outline:2px solid var(--bluui-primary, #4f46e5); outline-offset:3px; }
.blu-kanban__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Service Studio shows a useful preview; the runtime host replaces only itself. */
.blu-kanban-block .blu-component-preview { padding:24px; border:1px dashed var(--bluui-control-border, #bdc9df); border-radius:10px; color:var(--bluui-text-muted, #65748a); }
html:not(.os-inert) .blu-kanban-block:has(.blu-kanban) > .blu-component-preview { display:none; }

/* Bulk editing belongs to the Block: every consumer gets the same toolbar,
   draft markers, editor, and save feedback without adding page-level widgets. */
.blu-kanban [hidden] { display: none !important; }
.blu-kanban__toolbar .blu-kanban__summary { flex: 1; }
.blu-kanban__savebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--bluui-border, #dcd9ff);
  border-radius: 10px;
  background: var(--bluui-primary-soft, #f6f5ff);
}
.blu-kanban__changed-count { flex: 1; font-size: 13px; font-weight: 600; }
.blu-kanban__save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blu-kanban__save-actions .blu-kanban__button { min-width: 128px; }
.blu-kanban__save-feedback { flex-basis: 100%; font-size: 13px; color: var(--bluui-text, #35604b); }
.blu-kanban__save-feedback.is-error { color: var(--bluui-danger-text, #b42318); }
.blu-kanban__card.is-changed { border-color: var(--bluui-primary-border, #9c93f7); box-shadow: inset 3px 0 var(--bluui-color-primary-solid, #6555e8); }
.blu-kanban__change-label {
  display: block;
  margin-bottom: 8px;
  color: var(--bluui-primary-text, #5b45c5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Native dialog provides focus trapping, Escape dismissal, and focus return. */
.blu-kanban__editor { width: 520px; max-height: calc(100dvh - 32px); overflow: auto; }
.blu-kanban__editor h3 { margin-bottom: 8px; }
.blu-kanban__editor-hint { margin: 0 0 24px; color: var(--bluui-text-muted, #687a93); font-size: 13px; line-height: 1.6; }
.blu-kanban__editor .blu-kanban__select { width: 100%; min-width: 0; font-weight: 400; }
.blu-kanban__editor textarea { resize: vertical; }
.blu-kanban__editor-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blu-kanban__button:disabled { opacity: .55; }
.blu-kanban textarea:focus-visible { outline: 2px solid var(--bluui-primary, #4f46e5); outline-offset: 3px; }
@media (max-width: 540px) {
  .blu-kanban__editor-pair { grid-template-columns: 1fr; gap: 0; }
  .blu-kanban__save-actions { width: 100%; }
  .blu-kanban__save-actions .blu-kanban__button { flex: 1; }
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Top-layer overlay. Native Content and Footer widgets stay alive while closed. */
.blu-overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  border:0;
  margin:0;
  padding:24px;
  box-sizing:border-box;
  background:rgba(8,14,27,.52);
  backdrop-filter:blur(3px);
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bluui-text)
}
.blu-overlay[hidden]{
  display:none!important
}
.blu-overlay::backdrop{
  background:transparent
}
.blu-overlay__panel{
  width:min(560px,100%);
  max-height:calc(100dvh - 48px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--bluui-border);
  border-radius:18px;
  background:var(--bluui-surface);
  box-shadow:0 28px 90px #0005;
  outline:none;
  overflow:hidden
}
.blu-overlay[data-size=small] .blu-overlay__panel{
  width:min(400px,100%)
}
.blu-overlay[data-size=large] .blu-overlay__panel{
  width:min(800px,100%)
}
.blu-overlay__header{
  position:relative;
  padding:24px 64px 20px 24px;
  border-bottom:1px solid var(--bluui-border)
}
.blu-overlay__header h2{
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.02em;
  margin:0
}
.blu-overlay__description{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--bluui-text-muted)
}
.blu-overlay__description[hidden]{
  display:none
}
.blu-overlay__close{
  position:absolute;
  right:18px;
  top:20px;
  padding:0;
  width:34px;
  min-height:34px;
  font-size:23px;
  border:0;
  background:transparent
}
.blu-overlay__content{
  padding:24px;
  overflow:auto;
  min-height:0;
  line-height:1.6
}
.blu-overlay__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 24px;
  background:var(--bluui-surface-muted);
  border-top:1px solid var(--bluui-border)
}
.blu-overlay__footer[hidden]{
  display:none
}
.blu-overlay__actions{
  display:flex;
  gap:8px;
  margin-left:auto
}
.blu-overlay__actions[hidden]{
  display:none
}
/* Drawer variations share the same overlay and focus behavior. */
.blu-overlay--drawer{
  padding:0;
  justify-content:flex-end;
  align-items:stretch
}
.blu-overlay--drawer .blu-overlay__panel{
  max-height:100dvh;
  border-radius:18px 0 0 18px;
  width:min(480px,calc(100vw - 24px))
}
.blu-overlay--drawer .blu-overlay__content{
  flex:1
}
.blu-overlay--drawer[data-placement=left]{
  justify-content:flex-start
}
.blu-overlay--drawer[data-placement=left] .blu-overlay__panel{
  border-radius:0 18px 18px 0
}
.blu-overlay--drawer[data-placement=bottom]{
  align-items:flex-end;
  justify-content:center
}
.blu-overlay--drawer[data-placement=bottom] .blu-overlay__panel{
  width:100%;
  max-height:85dvh;
  border-radius:18px 18px 0 0
}
@media(max-width:600px){.blu-overlay{
  padding:12px
}
.blu-overlay--drawer{
  padding:0
}
.blu-overlay__panel{
  max-height:calc(100dvh - 24px)
}
.blu-overlay__header,.blu-overlay__content{
  padding:20px
}
.blu-overlay__header{
  padding-right:56px
}
.blu-overlay__footer{
  padding:14px 20px
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-modal-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluUI_Core → NavigationMenu — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Keep native List/Block wrappers from adding width, spacing, or a scrollbar.
The menu uses its containing panel or page scroll area. */
.blu-navigation-menu,
.blu-navigation-menu__list,
.blu-navigation-menu__row {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bluui-text, #334155);
  font: 13px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* The list order defines grouping. Every heading after the first gets room
above it; the rule also works with OutSystems' generated List wrappers. */
.blu-navigation-menu__group-title {
  display: block;
  margin: 26px 12px 10px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blu-navigation-menu__row--first .blu-navigation-menu__group-title {
  margin-top: 0;
}

/* Link and pending rows share geometry. Only available rows are interactive. */
.blu-navigation-menu .blu-navigation-menu__link,
.blu-navigation-menu .blu-navigation-menu__pending {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 3px 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--bluui-text, #334155);
  font: inherit;
  text-align: start;
}

/* Optional decorative icons share one size in links and pending rows.
The flexible label keeps text left-aligned and the Soon badge at the far edge.
Blank IconUrl creates no image, so text-only menus retain their spacing. */
.blu-navigation-menu__icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.blu-navigation-menu__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Override inherited link decoration in every interaction state, including
visited and focus. Keyboard focus keeps its separate visible outline below.
The label class also avoids a theme decorating the inner Expression. */
.blu-navigation-menu .blu-navigation-menu__link,
.blu-navigation-menu .blu-navigation-menu__link:link,
.blu-navigation-menu .blu-navigation-menu__link:visited,
.blu-navigation-menu .blu-navigation-menu__link:hover,
.blu-navigation-menu .blu-navigation-menu__link:focus,
.blu-navigation-menu .blu-navigation-menu__link:active,
.blu-navigation-menu .blu-navigation-menu__link .blu-navigation-menu__label {
  text-decoration: none;
}
.blu-navigation-menu .blu-navigation-menu__link {
  cursor: pointer;
}
.blu-navigation-menu .blu-navigation-menu__link:hover {
  background: var(--bluui-surface-muted, #f1f5f9);
  color: var(--bluui-primary, #4f46e5);
}
.blu-navigation-menu .blu-navigation-menu__link--active,
.blu-navigation-menu .blu-navigation-menu__link--active:hover {
  color: var(--bluui-primary, #4f46e5);
  background: var(--bluui-primary-light, #eef2ff);
  font-weight: 650;
  box-shadow: inset 3px 0 var(--bluui-primary, #4f46e5);
}
.blu-navigation-menu .blu-navigation-menu__link:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 2px;
}
.blu-navigation-menu .blu-navigation-menu__pending {
  color: var(--bluui-text-muted, #64748b);
}
.blu-navigation-menu__soon {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 5px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 9px;
}

/* A simple hint makes an empty data-driven Block visible in Service Studio. */
.blu-navigation-menu__preview {
  display: none;
  -servicestudio-display: block;
  -servicestudio-padding: 12px;
  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
  -servicestudio-color: var(--bluui-text-muted, #64748b);
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Fixed message stack. Only individual cards receive pointer events. */
.blu-notifications{
  position:fixed;
  z-index:1300;
  width:min(380px,calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
  color:var(--bluui-text)
}
.blu-notifications[data-placement=TopRight]{
  top:24px;
  right:24px
}
.blu-notifications[data-placement=TopLeft]{
  top:24px;
  left:24px
}
.blu-notifications[data-placement=BottomRight]{
  bottom:24px;
  right:24px
}
.blu-notifications[data-placement=BottomLeft]{
  bottom:24px;
  left:24px
}
.blu-notification{
  pointer-events:auto;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 26px;
  gap:12px;
  padding:18px;
  background:var(--bluui-surface);
  border:1px solid var(--bluui-border);
  border-radius:14px;
  box-shadow:0 12px 40px #0002;
  animation:blu-notice-enter .18s ease-out
}
.blu-notification__icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  font-weight:700;
  border-radius:50%;
  background:var(--blu-common-soft);
  color:var(--blu-common-color)
}
.blu-notification__copy strong{
  font-size:14px;
  line-height:1.5
}
.blu-notification__copy p{
  margin:5px 0 12px;
  color:var(--bluui-text-muted);
  font-size:13px;
  line-height:1.6
}
.blu-notification>button{
  align-self:start;
  border:0;
  min-height:26px;
  padding:0;
  font-size:21px;
  background:transparent
}
@keyframes blu-notice-enter{from{
  opacity:0;
  transform:translateY(-8px)
}to{
  opacity:1;
  transform:translateY(0)
}}
@media(prefers-reduced-motion:reduce){.blu-notification{
  animation:none
}}
@media(max-width:600px){.blu-notifications{
  right:16px!important;
  left:auto!important
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-notification-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluUI_Core → PageHeader — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-page-header {
  box-sizing: border-box;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* PageHeader — section label, title/description, and trailing action slot.
The responsive section below stacks these areas on smaller screens. */
.blu-page-header {
  width: 100%;
}
.blu-page-header .blu-page-header__breadcrumbs {
  margin-bottom: 14px;
}
.blu-page-header .blu-page-header__section {
  display: block;
  margin-bottom: 14px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}
.blu-page-header .blu-page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
}
.blu-page-header .blu-page-header__copy {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
}
.blu-page-header .blu-page-header__title {
  display: block;
  margin: 0;
  color: var(--bluui-text, #182230);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.blu-page-header .blu-page-header__description {
  display: block;
  margin-top: 10px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.blu-page-header .blu-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 45%;
  margin-inline-start: auto;
}
/* Placeholders and referenced Blocks may add wrapper elements. */
.blu-page-header__actions > :is([data-block], [data-container]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Smaller screens retain source order and reduce spacing. */
@media (max-width: 700px) {
  .blu-page-header .blu-page-header__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .blu-page-header .blu-page-header__copy {
    flex-basis: auto;
  }
  .blu-page-header .blu-page-header__actions {
    justify-content: flex-start;
    max-width: 100%;
    margin-inline-start: 0;
  }
}
/* Design canvas: reserve space for optional slots. */
.blu-page-header .blu-page-header__actions {
  -servicestudio-min-width: 112px;
  -servicestudio-min-height: 32px;
}
.blu-page-header .blu-page-header__breadcrumbs {
  -servicestudio-min-height: 28px;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Pagination wraps without squeezing the controls on narrow screens. */
.blu-pagination{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  width:100%;
  color:var(--bluui-text);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  padding:12px 0
}
.blu-pagination__range{
  color:var(--bluui-text-muted);
  margin-right:auto
}
.blu-pagination__pages{
  display:flex;
  align-items:center;
  gap:5px
}
.blu-pagination__pages .blu-common-button{
  min-width:36px;
  padding:7px 9px
}
.blu-pagination [aria-current=page]{
  color:var(--bluui-color-primary-text);
  background:var(--bluui-color-primary-soft);
  border-color:var(--bluui-color-primary-border)
}
.blu-pagination__size{
  display:flex;
  align-items:center;
  gap:8px
}
.blu-pagination select,.blu-pagination input{
  font:inherit;
  color:var(--bluui-text);
  background:var(--bluui-surface);
  border:1px solid var(--bluui-border);
  border-radius:8px;
  height:36px;
  padding:4px 8px;
  width:auto
}
.blu-pagination__jump{
  display:flex;
  gap:6px;
  margin:0
}
.blu-pagination__jump input{
  width:68px
}
.blu-pagination__current{
  padding:0 8px
}
@media(max-width:600px){.blu-pagination__range{
  width:100%
}
.blu-pagination{
  gap:10px
}
.blu-pagination__pages{
  gap:3px
}}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-pagination-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Preserve scan contrast: QR modules always use black on white. */
.blu-qr-code{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  color:var(--bluui-text)
}
.blu-qr-code__frame{
  position:relative;
  border:1px solid var(--bluui-border);
  border-radius:14px;
  padding:12px;
  background:#fff;
  line-height:0
}
.blu-qr-code__frame svg{
  max-width:100%;
  height:auto;
  display:block
}
.blu-qr-code__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center
}
.blu-qr-code__expired{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  line-height:1.4;
  background:rgba(255,255,255,.9);
  color:#182333;
  border-radius:14px
}
.blu-qr-code--expired svg{
  filter:blur(4px)
}
.blu-qr-code__loading{
  display:grid;
  place-items:center;
  width:192px;
  height:192px;
  background:var(--bluui-surface-muted);
  border-radius:14px;
  color:var(--bluui-text-muted);
  font-size:13px
}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-qr-code-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluGrid_Sample → Showcase → ShowcaseApiTable.
   Shared documentation presentation. Install on this Block only. */
.blu-api-block { width: 100%; min-width: 0; }
.blu-api-preview { padding: 24px; border: 1px solid var(--bluui-border, #dce4ef); border-radius: 12px; color: var(--bluui-text-muted, #64748b); }
.blu-api-host:not(:empty) + .blu-api-preview { display: none; }
.blu-api {
  --api-border: var(--bluui-border, #dfe6f0);
  --api-muted: var(--bluui-text-muted, #61718c);
  --api-ink: var(--bluui-text, #1c293e);
  --api-primary: var(--bluui-primary, #4f46e5);
  color: var(--api-ink); font-size: 13px; line-height: 1.55;
}
/* Heading, member search, and section shortcuts. */
.blu-api__heading { display: flex; gap: 24px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.blu-api__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--api-muted); }
.blu-api h2 { margin: 4px 0; font-size: 25px; letter-spacing: -.6px; font-weight: 700; }
.blu-api__intro { margin: 0; color: var(--api-muted); }
.blu-api__search { display: grid; gap: 5px; min-width: 250px; font-size: 11px; font-weight: 600; }
.blu-api__search input { width: 100%; height: 39px; border: 1px solid var(--api-border); border-radius: 8px; background: var(--bluui-surface, white); padding: 8px 12px; font: inherit; font-size: 13px; color: var(--api-ink); }
.blu-api__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--api-border); }
.blu-api__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 7px 12px; border: 1px solid var(--api-border); border-radius: 7px; background: var(--bluui-surface, white); color: var(--api-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.blu-api__button:hover { background: var(--bluui-surface-muted, #f5f6ff); border-color: var(--bluui-primary-border, #c8c5f8); }
.blu-api__button--primary { background: var(--api-primary); color: var(--bluui-on-primary, white); border-color: var(--api-primary); }
.blu-api__button--primary:hover { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
.blu-api__count { display: inline-flex; align-items: center; justify-content: center; background: var(--bluui-surface-muted, #eef0f6); color: var(--bluui-text-muted, #63718a); border-radius: 5px; padding: 1px 6px; font-size: 10px; line-height: 17px; font-weight: 600; }
.blu-api__search-status { padding: 10px 14px; background: var(--bluui-surface-muted, #eef0ff); border-radius: 8px; }
/* One grid owns the rows: neighboring cards stretch to the same height.
   Heights stay automatic so expanded details remain visible. */
.blu-api__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: stretch; }
.blu-api__layout > .blu-api__section { margin: 0; box-sizing: border-box; align-self: stretch; }
.blu-api__section { min-width: 0; background: var(--bluui-surface, white); border: 1px solid var(--api-border); border-radius: 12px; padding: 21px; scroll-margin-top: 20px; }
.blu-api__section-heading { display: flex; gap: 9px; align-items: center; }
.blu-api__section-heading h3 { margin: 0; font-size: 17px; font-weight: 650; }
.blu-api__hint { color: var(--api-muted); font-size: 12px; margin: 5px 0 18px; }
.blu-api__empty { color: var(--api-muted); padding: 12px 0; margin: 0; }
.blu-api__scroll { overflow-x: auto; max-width: 100%; border-radius: 6px; }
.blu-api__table { border-collapse: collapse; width: 100%; font-size: 12px; }
.blu-api__table th { text-align: left; padding: 10px; white-space: nowrap; background: var(--bluui-surface-muted, #f6f8fb); color: var(--api-muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .025em; }
.blu-api__table td { vertical-align: top; padding: 13px 10px; border-bottom: 1px solid var(--bluui-border, #edf0f5); overflow-wrap: anywhere; }
.blu-api__table tr:last-child td { border-bottom: none; }
.blu-api__table td:first-child { min-width: 120px; }
.blu-api__section--inputs .blu-api__table, .blu-api__section--actions .blu-api__table { min-width: 620px; }
.blu-api__table td:nth-child(2) { min-width: 100px; }
.blu-api__code { font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bluui-text, #364368); white-space: pre-wrap; overflow-wrap: anywhere; }
.blu-api__table td:first-child > .blu-api__code { font-weight: 650; }
.blu-api__type, .blu-api__type-link { color: var(--bluui-text-muted, #5966a3); background: var(--bluui-surface-muted, #f0f2fb); padding: 2px 6px; border-radius: 4px; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: normal; word-break: normal; }
.blu-api__type-link { border: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.blu-api__required { font-size: 11px; color: var(--api-muted); }
.blu-api__required.is-required { font-weight: 700; color: var(--bluui-warning-text, #9a4c15); }
.blu-api__owner { display: block; color: var(--api-muted); margin-top: 3px; font-size: 10px; }
.blu-api__description { min-width: 155px; }
/* Events and actions keep signatures visible and parameter details expandable. */
.blu-api__member { border: 1px solid var(--api-border); border-radius: 8px; margin-top: 10px; overflow: hidden; scroll-margin-top: 20px; }
.blu-api summary { padding: 12px; cursor: pointer; font-weight: 600; }
.blu-api summary::marker { color: var(--bluui-text-muted, #8994ad); }
.blu-api__member[open] > summary { background: var(--bluui-surface-muted, #f8f9fc); border-bottom: 1px solid var(--api-border); }
.blu-api__member-meta { display: inline-block; color: var(--api-muted); font-size: 10px; font-weight: 400; margin-left: 9px; }
.blu-api__member-description { margin: 12px; color: var(--api-muted); font-size: 12px; }
.blu-api__subheading { font-size: 11px; margin: 16px 12px 6px; text-transform: uppercase; color: var(--api-muted); }
.blu-api__slot { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bluui-border, #edf0f5); }
.blu-api__attribute-description { font-size: 11px; font-weight: 400; color: var(--api-muted); margin: 5px 0 0; }
.blu-api__structure .blu-api__table td { padding: 10px 8px; }
.blu-api__structure .blu-api__table td:first-child { min-width: 100px; }
.blu-api__structure .blu-api__table td:nth-child(2) { min-width: 70px; }
.blu-api__records { list-style: none; padding: 0 12px 12px; margin: 0; }
.blu-api__records li { padding: 5px 0; }
.blu-api__variable { border-top: 1px solid var(--bluui-border, #edf0f5); }
.blu-api__variable summary { padding: 11px 0; }
.blu-api__variable summary > span { float: right; margin-left: 10px; }
.blu-api__initial { display: grid; gap: 5px; margin: 12px; font-size: 11px; color: var(--api-muted); }
/* Copyable examples are actual sample expressions, with no duplicate live widget. */
.blu-api > .blu-api__section { margin-top: 22px; }
.blu-api__example-lead { font-size: 14px; max-width: 800px; }
.blu-api__example-grid { display: grid; gap: 18px; margin: 20px 0; align-items: stretch; }
.blu-api__example-grid > * { min-width: 0; margin-top: 0; align-self: stretch; }
.blu-api__example-handler { display: flex; }
.blu-api__example-handler > .blu-api__snippet { flex: 1; margin: 0; }
.blu-api__example-setup { margin-top: 18px; }
.blu-api__example-setup > .blu-api__variable { margin: 0 12px; }
.blu-api__snippet { margin: 12px; border: 1px solid var(--api-border); border-radius: 7px; overflow: hidden; }
.blu-api__snippet-bar { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 10px; background: var(--bluui-surface-muted, #f1f4fa); color: var(--bluui-text-muted, #60708d); font-size: 10px; }
.blu-api__snippet-bar .blu-api__button { padding: 3px 8px; min-height: 25px; font-size: 10px; }
.blu-api pre { padding: 14px; margin: 0; background: var(--bluui-surface-muted, #f8faff); font: 11px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bluui-text, #33476c); overflow: auto; max-height: 360px; white-space: pre; }
.blu-api__copy-field { width: 100%; min-height: 120px; }
.blu-api__last-event { margin: 18px 0 0; padding: 12px; border-radius: 7px; background: var(--bluui-surface-muted, #f1f7f7); color: var(--bluui-text, #32605b); font-size: 12px; overflow-wrap: anywhere; }
.blu-api [hidden] { display: none !important; }
.blu-api :is(button,input,summary,[tabindex]):focus-visible { outline: 2px solid var(--api-primary); outline-offset: 3px; }
@media (min-width: 1500px) {
  .blu-api__layout { grid-template-columns: minmax(0, 1.5fr) minmax(350px, 1fr); }
  /* An unpaired final card uses the whole row; never render an empty filler. */
  .blu-api__layout > .blu-api__section:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1050px) { .blu-api__example-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .blu-api__heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .blu-api__search { min-width: 0; }
  .blu-api__section { padding: 14px; }
  .blu-api__slot { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) { .blu-api * { scroll-behavior: auto; } }
/* Compatibility for older consumers still supplying Rows only. */
.blu-showcase__api-scroll { overflow: auto; max-width: 100%; }
.blu-showcase__api { min-width: 620px; }
.blu-showcase__api-row { display: grid; grid-template-columns: 1.1fr 1.2fr 2fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bluui-border, #e2e8f0); font-size: 12px; line-height: 1.6; }
.blu-showcase__api-row > * { min-width: 0; overflow-wrap: anywhere; }
.blu-showcase__api-rows { width: 100%; min-width: 0; margin: 0; padding: 0; }
.blu-showcase__api-row--header { font-weight: 650; color: var(--bluui-text-muted, #64748b); }


/* BluGrid_Sample → Showcase → ShowcaseEvents — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* LastEvent is announced separately with role=status. The full event history
stays readable as escaped text without announcing the entire history again.
The bounded log and API regions can be scrolled with keyboard focus. */
.blu-showcase__log-region {
  max-height: 220px;
  overflow: auto;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--showcase-border, var(--bluui-border, #e2e8f0));
  border-radius: 8px;
  background: var(--bluui-surface-muted, #f8fafc);
}
.blu-showcase__log {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
}

.blu-showcase__log-region:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 3px;
}

/* The latest event stays visible. The bounded history is expanded on demand. */
.blu-showcase-events {
  overflow: hidden;
  border: 1px solid var(--showcase-border, #e2e8f0);
  border-radius: 8px;
  background: var(--bluui-surface, #fff);
}
.blu-showcase-events__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
}
.blu-showcase-events__title { font-weight: 650; white-space: nowrap; }
.blu-showcase-events__count {
  flex: none;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bluui-surface-muted, #eef0ff);
  color: var(--bluui-primary, #4f46e5);
  text-align: center;
  font-size: 12px;
  font-weight: 650;
}
.blu-showcase-events__latest {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bluui-text-muted, #64748b);
  font-size: 12px;
}
.blu-showcase-events__bar .blu-showcase-events__toggle {
  flex: none;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--bluui-primary, #4f46e5);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.blu-showcase-events__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.blu-showcase-events__details { padding: 0 16px 16px; }
.blu-showcase-events__details--hidden { display: none; }
.blu-showcase-events__details .blu-showcase__log-region { margin-top: 8px; }
@media (max-width: 560px) {
  .blu-showcase-events__bar { gap: 8px; flex-wrap: wrap; }
  .blu-showcase-events__latest { order: 4; flex-basis: 100%; }
  .blu-showcase-events__toggle { margin-inline-start: auto !important; }
}


/* BluGrid_Sample → Showcase → ShowcaseExamples — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Example Cards sit in two columns. Each group has its own screen-owned state
so testing one example does not change an unrelated example. */
.blu-showcase__examples {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  min-width: 0;
}

/* Native Card wrappers stretch with their grid row. Card owns its surface. */
.blu-showcase__examples > [data-block] {
  min-width: 0;
  width: 100%;
}
@media (max-width: 760px) {
  .blu-showcase__examples {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* BluGrid_Sample → Showcase → ShowcaseLayout — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Application-header logo. Keep the existing GridDemo class names so a copied
logo needs no widget changes. The Layout header is outside .blu-showcase, so
these selectors deliberately do not require that page-content ancestor. */
.blu-demo-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}
.blu-demo-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: var(--bluui-primary, #4f46e5);
  color: var(--bluui-on-primary, #fff);
  font-size: 26px;
  font-weight: 750;
  line-height: 1;
}
.blu-demo-brand-name {
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}
.blu-demo-brand-caption {
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--bluui-border, #e2e8f0);
  color: var(--bluui-text-muted, #64748b);
  font-size: 12px;
  font-weight: 500;
}




/* This Block replaces the screen's outer application Layout. It is not
nested inside another Layout. The viewport root avoids extra page scrolling
from native inline Block wrappers. Flex leaves the body the remaining space,
without fixed header offsets or global body rules. */
.blu-showcase-shell {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
  background: var(--bluui-background, #f5f7fb);
  color: var(--bluui-text, #182230);
  font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}
.blu-showcase-shell *,
.blu-showcase-shell *::before,
.blu-showcase-shell *::after {
  box-sizing: border-box;
}
.blu-showcase-shell__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  min-height: 60px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--bluui-border, #e2e8f0);
  background: var(--bluui-surface, #fff);
}
.blu-showcase-shell__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  width: auto;
  color: var(--bluui-text-muted, #64748b);
  font-size: 12px;
}
.blu-showcase-shell__header-actions > [data-block] {
  width: auto;
}

/* min-height:0 lets both panes shrink below their content height. Each pane
then scrolls independently; scrolling the right side never moves the menu.
display:none removes closed navigation from keyboard and screen-reader use. */
.blu-showcase-shell__body {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  min-width: 0;
}
/* The slot allocates the grid column. BluUI_Core.Sidebar owns the panel,
padding, and scrollbar. Its generated Block wrapper must fill this slot. */
.blu-showcase-shell__sidebar-slot,
.blu-showcase-shell__sidebar-slot > [data-block] {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.blu-showcase-shell__sidebar-slot {
  overflow: hidden;
}
.blu-showcase-shell__main {
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.blu-showcase-shell__content,
.blu-showcase-shell__content > [data-block] {
  display: block;
  width: 100%;
  min-width: 0;
}
.blu-showcase-shell--closed > .blu-showcase-shell__body {
  grid-template-columns: minmax(0, 1fr);
}
.blu-showcase-shell--closed > .blu-showcase-shell__body > .blu-showcase-shell__sidebar-slot {
  display: none;
}

/* These are internal Layout controls. Page commands keep using BluUI Button.
The menu control remains in the header when the navigation is collapsed. */
.blu-showcase-shell .blu-showcase-shell__toggle,
.blu-showcase-shell .blu-showcase-shell__skip {
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 8px;
  background: var(--bluui-surface, #fff);
  color: var(--bluui-text, #182230);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.blu-showcase-shell .blu-showcase-shell__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.blu-showcase-shell .blu-showcase-shell__toggle::before {
  content: "";
  width: 15px;
  height: 12px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px,
  linear-gradient(currentColor, currentColor) 0 5px / 100% 2px,
  linear-gradient(currentColor, currentColor) 0 10px / 100% 2px;
  background-repeat: no-repeat;
}
.blu-showcase-shell__nav-title,
.blu-showcase-shell__group-title {
  display: block;
  margin: 0 12px 10px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blu-showcase-shell__nav-title {
  color: var(--bluui-text, #182230);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: 24px;
}
.blu-showcase-shell__group + .blu-showcase-shell__group {
  margin-top: 26px;
}
/* Compatibility for the earlier manual menu while switching to NavigationMenu.
Core's new menu uses blu-navigation-menu classes from NavigationMenu’s stylesheet. */
.blu-showcase-shell a.blu-showcase-shell__link,
.blu-showcase-shell a.blu-showcase-shell__link:link,
.blu-showcase-shell a.blu-showcase-shell__link:visited,
.blu-showcase-shell a.blu-showcase-shell__link:hover,
.blu-showcase-shell a.blu-showcase-shell__link:focus,
.blu-showcase-shell a.blu-showcase-shell__link:active,
.blu-showcase-shell a.blu-showcase-shell__link > span {
  text-decoration: none;
}
.blu-showcase-shell__link,
.blu-showcase-shell__pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 3px 0;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--bluui-text, #334155);
  font-size: 13px;
  text-decoration: none;
}
.blu-showcase-shell__link:hover {
  background: var(--bluui-surface-muted, #f1f5f9);
  color: var(--bluui-primary, #4f46e5);
  text-decoration: none;
}
.blu-showcase-shell__link--active,
.blu-showcase-shell__link--active:hover {
  color: var(--bluui-primary, #4f46e5);
  background: var(--bluui-primary-light, #eef2ff);
  font-weight: 650;
  box-shadow: inset 3px 0 var(--bluui-primary, #4f46e5);
}
.blu-showcase-shell__pending {
  color: var(--bluui-text-muted, #64748b);
}
.blu-showcase-shell__soon {
  flex: none;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 9px;
}
/* MenuFooter is a native Expression (span), so make it a block. Otherwise its
top border sits beneath the last link and looks like a BluGrid underline. */
.blu-showcase-shell__footer {
  display: block;
  margin: 28px 12px 0;
  padding-top: 16px;
  border-top: 1px solid var(--bluui-border, #e2e8f0);
  color: var(--bluui-text-muted, #64748b);
  font-size: 11px;
}
.blu-showcase-shell .blu-showcase-shell__toggle:focus-visible,
.blu-showcase-shell__link:focus-visible,
.blu-showcase-shell .blu-showcase-shell__skip:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 2px;
}
.blu-showcase-shell__main:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: -3px;
}
.blu-showcase-shell .blu-showcase-shell__skip {
  position: absolute;
  top: 8px;
  left: -10000px;
  z-index: 10;
}
.blu-showcase-shell .blu-showcase-shell__skip:focus {
  left: 12px;
}

/* A small-screen menu expands above the content without covering it or
creating a modal focus trap. The Layout initializes it closed below 960px.
A bounded menu slot leaves the content pane available while the menu opens. */
@media (max-width: 959px) {
  .blu-showcase-shell__header {
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px;
  }
  .blu-showcase-shell__body,
  .blu-showcase-shell--closed > .blu-showcase-shell__body {
    display: flex;
    flex-direction: column;
  }
  .blu-showcase-shell__sidebar-slot {
    flex: none;
    height: 40vh;
    height: 40dvh;
  }
  /* Orient the reusable panel's dividing edge for a stacked mobile Layout. */
  .blu-showcase-shell .blu-showcase-shell__sidebar {
    border-inline-end: 0;
    border-bottom: 1px solid var(--bluui-border, #e2e8f0);
  }
  .blu-showcase-shell__main {
    flex: 1;
  }
  .blu-showcase-shell__header .blu-demo-brand-caption {
    display: none;
  }
}
@media (max-width: 480px) {
  .blu-showcase-shell__header-actions .blu-showcase-shell__platform {
    display: none;
  }
}

/* Search belongs to the shared shell and filters the data-driven menu. */
.blu-showcase-shell__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 35vw);
  margin-inline-start: auto;
}
.blu-showcase-shell__search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 6px;
  background: var(--bluui-surface-muted, #f8fafc);
  font: inherit;
  font-size: 13px;
}
.blu-showcase-shell__search input:focus { outline: 2px solid var(--bluui-primary, #4f46e5); outline-offset: 1px; }
.blu-showcase-shell__search-hint { color: var(--bluui-text-muted, #64748b); font-size: 11px; white-space: nowrap; }
.blu-showcase-shell__search-empty { margin: 12px; color: var(--bluui-text-muted, #64748b); font-size: 12px; }
@media (max-width: 700px) {
  .blu-demo-brand-caption, .blu-showcase-shell__search-hint { display: none; }
  .blu-showcase-shell__header { gap: 10px; padding-inline: 12px; }
  .blu-showcase-shell__search { width: auto; flex: 1; }
  .blu-demo-brand-name { display: none; }
}

/* Shared appearance control: one preference for the entire showcase and its
   previews. Native select preserves keyboard and system accessibility. */
.blu-theme-control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--bluui-control-border, #cbd5e1);
  border-radius: 8px;
  background: var(--bluui-surface, #fff);
  color: var(--bluui-text, #182230);
}
.blu-theme-control select {
  width: auto;
  min-width: 72px;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.blu-theme-control select:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 2px;
}
.blu-theme-control option { background: var(--bluui-surface, #fff); color: var(--bluui-text, #182230); }


/* BluGrid_Sample → Showcase → ShowcasePage — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Scope page rules to the screen's root Container. Theme tokens keep the
showcase consistent with the Buttons, Cards, and Chips already in BluUI_Core. */
.blu-showcase {
  --showcase-border: var(--bluui-border, #e2e8f0);
  --showcase-muted: var(--bluui-text-muted, #64748b);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}
.blu-showcase__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding: 26px 28px 40px;
}
/* OutSystems may add a Block wrapper around every Card. Let those wrappers
shrink in grids; the actual Card continues to own its surface and padding. */
.blu-showcase__content > [data-block],
.blu-showcase__sections > [data-block] {
  min-width: 0;
  width: 100%;
}
/* Shared ShowcasePage's Content Placeholder owns spacing between its sections.
Keep a real layout box so native Block wrappers and accessibility semantics
remain intact. Consumers fill this slot without copying layout Containers. */
.blu-showcase__sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
}
.blu-showcase__header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
}
.blu-showcase__header-actions > [data-block] {
  width: auto;
}
.blu-showcase__commands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
}
.blu-showcase__commands > [data-block],
.blu-showcase__focus-target,
.blu-showcase__focus-target > [data-block] {
  width: auto;
}

.blu-showcase__subheading {
  display: block;
  margin: 16px 0 12px;
  font-size: 13px;
  font-weight: 600;
}
.blu-showcase__subheading:first-child {
  margin-top: 0;
}
.blu-showcase__note {
  display: block;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--showcase-muted, var(--bluui-text-muted, #64748b));
  overflow-wrap: anywhere;
}

/* Small-screen page gutters. */
@media (max-width: 760px) {
  .blu-showcase__content {
    padding: 24px 16px 36px;
  }
}

/* The Block owns navigation between its content slots. Hidden panels remain
   mounted so component state, pending edits, and event bindings survive tabs. */
.blu-showcase__tabs {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--showcase-border);
}
.blu-showcase__tabs .blu-showcase__tab {
  flex: none;
  min-height: 44px;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--showcase-muted);
  font: inherit;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}
.blu-showcase__tabs .blu-showcase__tab[aria-selected="true"] {
  border-bottom-color: var(--bluui-primary, #4f46e5);
  color: var(--bluui-primary, #4f46e5);
  font-weight: 650;
}
.blu-showcase__tab:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: -4px;
}
.blu-showcase__panel { min-width: 0; width: 100%; }
.blu-showcase__panel--hidden { display: none !important; }
.blu-showcase__events-slot:empty { display: none; }
/* Page commands are intentionally quiet; the component preview is unchanged. */
.blu-showcase__header-actions .blu-btn { min-height: 36px; }
@media (max-width: 760px) {
  .blu-showcase__tabs { gap: 6px; }
  .blu-showcase__tabs .blu-showcase__tab { padding-inline: 7px; font-size: 13px; }
}

/* Scenario controls select which live example is visible, preserving both states. */
.blu-showcase__scenario-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.blu-showcase__scenario-label { margin-inline-end: 4px; color: var(--showcase-muted); font-size: 12px; }
.blu-showcase__scenario-row .blu-showcase__scenario {
  min-height: 36px; margin: 0; padding: 7px 12px; border: 1px solid var(--showcase-border);
  border-radius: 6px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #182230); font: inherit; font-size: 13px; cursor: pointer;
}
.blu-showcase__scenario-row .blu-showcase__scenario[aria-pressed="true"] {
  border-color: var(--bluui-primary, #4f46e5); background: var(--bluui-surface-muted, #eef0ff); color: var(--bluui-primary, #4f46e5);
}
.blu-showcase__scenario:focus-visible { outline: 2px solid var(--bluui-primary, #4f46e5); outline-offset: 2px; }


/* BluGrid_Sample → Showcase → ShowcasePlayground — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Playground: preview first in DOM/keyboard order, property controls second.
A fixed minimum preview height keeps removing/restoring the chip from moving
the controls or the rest of the page. */
.blu-showcase__playground {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  gap: 0;
}
.blu-showcase__preview {
  min-width: 0;
}
.blu-showcase__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 200px;
  padding: 28px;
  border: 1px dashed var(--showcase-border, var(--bluui-border, #e2e8f0));
  border-radius: 10px;
  background: var(--bluui-surface-muted, #f8fafc);
}
/* Set this class on ShowcasePlayground's Preview Placeholder. O11 inserts a
   wrapper here; without an explicit width it shrinks to zero around an empty
   percentage-width Skeleton. Keep intrinsic-size controls centered as well. */
.blu-showcase__preview-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.blu-showcase__stage .blu-chip-group {
  justify-content: center;
}
.blu-showcase__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  min-width: 0;
}
.blu-showcase__field {
  min-width: 0;
}
.blu-showcase__field--wide {
  grid-column: 1 / -1;
}
.blu-showcase__field > label,
.blu-showcase__field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}
/* Preserve native theme styling; only constrain control width and sizing here. */
.blu-showcase__field input:not([type="checkbox"]),
.blu-showcase__field select {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}
.blu-showcase__check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.blu-showcase__check > label {
  margin: 0;
  font-weight: 400;
}

/* Native Button Group used for short, single-choice playground controls.
   The widget owns selection and keyboard behavior. Its inner div is the row;
   scope the treatment here so it can be reused by any showcase screen. */
.blu-showcase__controls .blu-showcase__button-group {
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 10px;
  background: var(--bluui-surface-muted, #f8fafc);
}
.blu-showcase__controls .blu-showcase__button-group > div {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.blu-showcase__controls .blu-showcase__button-group .button-group-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--bluui-text-muted, #64748b);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.blu-showcase__controls .blu-showcase__button-group .button-group-item:hover {
  background: var(--bluui-border, #e2e8f0);
  color: var(--bluui-text, #0f172a);
}
/* Keep the active option distinct during hover as well as after selection. */
.blu-showcase__controls .blu-showcase__button-group .button-group-item.button-group-selected-item {
  background: var(--blu-color-primary-600, var(--bluui-primary, #4f46e5));
  color: var(--bluui-on-primary, #fff);
  box-shadow: 0 1px 3px rgb(15 23 42 / 12%);
}
.blu-showcase__controls .blu-showcase__button-group .button-group-item:focus-visible {
  outline: 2px solid var(--blu-color-primary-600, var(--bluui-primary, #4f46e5));
  outline-offset: 2px;
}
.blu-showcase__controls .blu-showcase__button-group .button-group-item[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.blu-showcase__preview > .blu-showcase__commands {
  margin-top: 14px;
}

.blu-showcase__bindings {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
}
.blu-showcase__bindings {
  margin-top: 14px;
  color: var(--showcase-muted, var(--bluui-text-muted, #64748b));
}

/* The preview stays before the controls when the viewport narrows. */
@media (max-width: 760px) {
  .blu-showcase__playground {
    grid-template-columns: minmax(0, 1fr);
  }
  .blu-showcase__stage {
    min-height: 150px;
  }
}
@media (max-width: 420px) {
  .blu-showcase__controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A single workspace surface separates the live preview from its inspector.
   Core Card still owns the surface; this Block owns only the internal layout. */
.blu-showcase-workspace .blu-card__body { padding: 0; }
.blu-showcase-workspace .blu-showcase__preview { padding: 24px; }
.blu-showcase__inspector {
  min-width: 0;
  padding: 24px;
  border-inline-start: 1px solid var(--showcase-border, #e2e8f0);
  background: var(--bluui-surface, #fff);
}
.blu-showcase__inspector-title {
  display: block;
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 650;
}
.blu-showcase__workspace-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
}
.blu-showcase__workspace-actions > [data-block],
.blu-showcase__workspace-actions > [data-placeholder] { width: auto; }
.blu-showcase__workspace-actions .blu-showcase__inspector-toggle {
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--showcase-border, #e2e8f0);
  border-radius: 6px;
  background: var(--bluui-surface, #fff);
  color: var(--bluui-text, #182230);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.blu-showcase__inspector-toggle:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: 2px;
}
/* Collapsing controls keeps their values and removes them from the tab order. */
.blu-showcase-workspace--controls-closed .blu-showcase__inspector { display: none; }
.blu-showcase-workspace--controls-closed .blu-showcase__playground { grid-template-columns: minmax(0, 1fr); }
/* Tables and transfer panels get the full canvas with no nested preview frame. */
.blu-showcase-workspace--wide .blu-showcase__stage {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.blu-showcase-workspace--wide .blu-showcase__preview-slot { display: block; }
.blu-showcase__state-strip {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--showcase-border, #e2e8f0);
  border-radius: 6px;
  background: var(--bluui-surface-muted, #f8fafc);
}
.blu-showcase__state-strip .blu-showcase__bindings { margin-top: 0; }
@media (max-width: 1000px) {
  .blu-showcase__playground { grid-template-columns: minmax(0, 1fr); }
  .blu-showcase__inspector { border-inline-start: 0; border-top: 1px solid var(--showcase-border, #e2e8f0); }
  .blu-showcase__controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .blu-showcase-workspace .blu-showcase__preview, .blu-showcase__inspector { padding: 16px; }
  .blu-showcase__controls { grid-template-columns: minmax(0, 1fr); }
}

/* Workspace toolbar: compact, consistently separated from preview and inspector. */
.blu-card.blu-showcase-workspace > .blu-card__header { padding: 14px 20px; border-bottom: 1px solid var(--showcase-border, #e2e8f0); }
.blu-showcase__consumer-actions { display: flex; align-items: center; gap: 8px; width: auto; }
.blu-showcase__consumer-actions > [data-placeholder], .blu-showcase__consumer-actions > [data-block] { width: auto; }


/* BluUI_Core → Sidebar — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

/* Panel surface and scrolling belong to the component, including when it is
placed in an ordinary application without the showcase styles. */
.blu-sidebar {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 26px 16px;
  border-inline-end: 1px solid var(--bluui-border, #e2e8f0);
  background: var(--bluui-surface, #fff);
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
  /* Keep an empty Block understandable in the Service Studio design canvas. */
  -servicestudio-height: auto;
  -servicestudio-min-height: 160px;
  -servicestudio-overflow: visible;
}

/* Hide the panel and all its controls from pointer/keyboard access while closed.
No If widget is needed; consumer content remains mounted with its state. */
.blu-sidebar--closed {
  display: none;
  -servicestudio-display: block;
}

/* A real Placeholder box supports native Block wrappers and long content. */
.blu-sidebar__content,
.blu-sidebar__content > [data-block] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
}
.blu-sidebar:focus-visible {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: -3px;
}

/* Design-time hint only. Browsers keep it hidden even when Sidebar is open. */
.blu-sidebar__preview {
  display: none;
  -servicestudio-display: block;
  -servicestudio-padding: 12px;
  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
  -servicestudio-color: var(--bluui-text-muted, #64748b);
}


/* BluUI_Core → Skeleton — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-skeleton {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* Skeleton — decorative loading shapes
The native Block supplies width/height through its style Attribute. For Circle,
the Block uses HeightPixels for both dimensions to prevent an oval. */
.blu-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  -servicestudio-height: 16px;
  -servicestudio-min-width: 120px;
  -servicestudio-background-color: var(--bluui-skeleton-base, #e2e8f0);
  -servicestudio-border-radius: 4px;
  background: var(--bluui-skeleton-base, #e2e8f0);
}

.blu-skeleton--text {
  border-radius: 4px;
}

.blu-skeleton--rectangle {
  border-radius: 10px;
}

.blu-skeleton--circle {
  border-radius: 50%;
}

/* Optional shimmer sits inside the shape; it never changes layout dimensions. */
.blu-skeleton--animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--bluui-skeleton-shine, rgb(255 255 255 / 65%)), transparent);
  transform: translateX(-100%);
  animation: blu-skeleton-wave 1.6s ease-in-out infinite;
}

@keyframes blu-skeleton-wave {
  100% {
    transform: translateX(100%);
  }
}

/* Respect the user's motion preference even when IsAnimated is True.
The base shape remains visible when the animated overlay is removed. */
@media (prefers-reduced-motion: reduce) {
  .blu-skeleton--animated::after {
    animation: none;
    display: none;
  }
}


/* Visible default size only in the Service Studio canvas. */
.blu-skeleton {
  -servicestudio-width: 180px;
  -servicestudio-height: 20px;
}


/* Splitter owns pane sizing and divider interactions. Native Placeholder content
   stays mounted so resizing and collapsing preserve forms and component state. */
.blu-splitter { display:grid; grid-template-columns:minmax(0,35fr) 16px minmax(0,65fr); grid-template-rows:minmax(0,1fr); width:100%; height:360px; min-width:0; position:relative; border:1px solid var(--bluui-border,#dce3ef); border-radius:12px; overflow:hidden; background:var(--bluui-surface,#fff); }
.blu-splitter__primary,.blu-splitter__secondary { min-width:0; min-height:0; overflow:auto; padding:20px; }
.blu-splitter__primary { grid-column:1; grid-row:1; }
.blu-splitter__secondary { grid-column:3; grid-row:1; }
.blu-splitter__primary[hidden] { display:none; }
.blu-splitter__handle { grid-column:2; grid-row:1; position:relative; background:var(--bluui-surface-muted, #f1f4f9); min-width:0; min-height:0; }
.blu-splitter__separator { position:absolute; inset:0; cursor:col-resize; touch-action:none; }
.blu-splitter__separator::after { content:""; position:absolute; left:6px; top:calc(50% - 30px); width:4px; height:18px; border-radius:4px; background:var(--bluui-surface-raised, #9aa9c0); }
.blu-splitter__separator:hover { background:var(--bluui-primary-soft, #e5e7ff); }
.blu-splitter__separator:focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:-2px; }
.blu-splitter__separator[aria-disabled="true"] { cursor:default; opacity:.45; }
.blu-splitter__toggle { position:absolute; top:50%; left:0; padding:0; width:16px; height:30px; border:0; border-radius:4px; color:var(--bluui-primary-text, #4f46e5); background:var(--bluui-primary-soft, #e9eaff); cursor:pointer; font:600 15px/1 sans-serif; }
.blu-splitter__toggle:focus-visible { outline:2px solid var(--bluui-primary, #4f46e5); outline-offset:-2px; }
.blu-splitter__toggle[hidden] { display:none; }
.blu-splitter__toggle:disabled { cursor:default; opacity:.45; }
/* Vertical means top/bottom panels; the separator orientation follows that axis. */
.blu-splitter--vertical .blu-splitter__primary { grid-column:1; grid-row:1; }
.blu-splitter--vertical .blu-splitter__handle { grid-column:1; grid-row:2; }
.blu-splitter--vertical .blu-splitter__secondary { grid-column:1; grid-row:3; }
.blu-splitter--vertical .blu-splitter__separator { cursor:row-resize; }
.blu-splitter--vertical .blu-splitter__separator::after { top:6px; left:calc(50% - 30px); height:4px; width:18px; }
.blu-splitter--vertical .blu-splitter__toggle { top:0; left:50%; height:16px; width:30px; }
.blu-splitter__error { position:absolute; inset:auto 8px 8px; padding:10px; color:var(--bluui-danger-text, #b42318); background:var(--bluui-danger-soft, #fff1f1); border-radius:6px; font-size:13px; z-index:2; }
.blu-splitter__error[hidden],.blu-splitter__error:empty { display:none; }


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Metrics inherit surface from their containing Card. */
.blu-statistic{
  color:var(--bluui-text);
  padding:8px 0;
  min-width:0
}
.blu-statistic__label{
  font-size:13px;
  font-weight:500;
  color:var(--bluui-text-muted);
  margin-bottom:10px
}
.blu-statistic__value{
  display:flex;
  align-items:baseline;
  gap:5px;
  line-height:1.25;
  color:var(--blu-common-color);
  font-variant-numeric:tabular-nums;
  flex-wrap:wrap
}
.blu-statistic__value strong{
  font-size:36px;
  letter-spacing:-.04em;
  font-weight:650
}
.blu-statistic__affix{
  font-size:20px;
  font-weight:500
}
.blu-statistic__trend{
  font-size:13px;
  color:var(--bluui-text-muted);
  margin:10px 0 0
}
.blu-statistic__trend span{
  color:var(--blu-common-color);
  font-weight:700
}
.blu-statistic__loading{
  height:44px;
  width:160px;
  max-width:100%;
  border-radius:8px;
  background:var(--bluui-surface-muted)
}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-statistic-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Activity rail. The connector is decorative; the ordered DOM conveys sequence. */
.blu-timeline{
  width:100%;
  color:var(--bluui-text);
  padding:4px 0
}
.blu-timeline__item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:16px;
  position:relative;
  padding-bottom:30px
}
.blu-timeline__item:not(:last-child):before{
  content:"";
  position:absolute;
  left:13px;
  top:29px;
  bottom:2px;
  width:2px;
  background:var(--bluui-border)
}
.blu-timeline__marker{
  z-index:1;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--blu-common-soft);
  color:var(--blu-common-color);
  border:2px solid var(--blu-common-color);
  font-size:13px;
  font-weight:700
}
.blu-timeline__marker:empty:after{
  content:"";
  width:6px;
  height:6px;
  background:currentColor;
  border-radius:50%
}
.blu-timeline__copy h3{
  margin:1px 0 6px;
  font-size:15px;
  line-height:1.5
}
.blu-timeline__copy p{
  margin:0 0 10px;
  color:var(--bluui-text-muted);
  font-size:14px;
  white-space:pre-wrap
}
.blu-timeline__time{
  display:block;
  font-size:12px;
  color:var(--bluui-text-muted);
  margin-bottom:4px
}
.blu-timeline--compact .blu-timeline__item{
  padding-bottom:18px
}
.blu-timeline__item:last-child{
  padding-bottom:0
}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-timeline-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* Shared controls used by this Block. Colors resolve through BluUITheme. */
.blu-common-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--bluui-border,#dce3ed);
  border-radius:8px;
  background:var(--bluui-surface,#fff);
  color:var(--bluui-text,#182333);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  box-shadow:none
}
.blu-common-button:hover:not(:disabled){
  background:var(--bluui-surface-muted,#f4f6fa);
  border-color:var(--bluui-primary,#5144ed)
}
.blu-common-button--primary{
  background:var(--bluui-color-primary-solid,#5144ed);
  color:var(--bluui-color-primary-contrast,#fff);
  border-color:transparent
}
.blu-common-button--primary:hover:not(:disabled){
  background:var(--bluui-color-primary-solid,#5144ed);
  filter:brightness(.93)
}
.blu-common-button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
  outline:3px solid var(--bluui-color-primary-border,#b1a8ff);
  outline-offset:2px
}
.blu-common-muted{
  color:var(--bluui-text-muted,#68758b);
  font-size:14px
}
.blu-common-error{
  color:var(--bluui-color-error-text,#b42318);
  font-size:13px;
  margin:8px 0
}
.blu-common-error[hidden]{
  display:none!important
}

/* Top-layer focus dialog. The spotlight blocks clicks while explaining targets. */
.blu-tour{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  z-index:1400;
  overflow:hidden;
  color:var(--bluui-text)
}
.blu-tour[hidden]{
  display:none!important
}
.blu-tour::backdrop{
  background:transparent
}
.blu-tour--centered{
  background:rgba(8,14,27,.55)
}
.blu-tour__highlight{
  position:fixed;
  border:2px solid var(--bluui-primary,#5144ed);
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(8,14,27,.55);
  pointer-events:none
}
.blu-tour__highlight[hidden]{
  display:none
}
.blu-tour__panel{
  position:fixed;
  width:360px;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:24px;
  border:1px solid var(--bluui-border);
  border-radius:16px;
  background:var(--bluui-surface);
  box-shadow:0 24px 70px #0004;
  outline:none;
  box-sizing:border-box
}
.blu-tour__progress{
  color:var(--bluui-color-primary-text);
  font-size:12px;
  font-weight:700
}
.blu-tour__panel h2{
  font-size:20px;
  margin:10px 0 8px;
  line-height:1.4
}
.blu-tour__panel p{
  color:var(--bluui-text-muted);
  font-size:14px;
  line-height:1.65;
  margin:0 0 22px
}
.blu-tour__actions{
  display:flex;
  gap:8px;
  align-items:center
}
.blu-tour__actions>button:first-child{
  margin-right:auto;
  border:0;
  padding-left:0;
  background:transparent;
  font-size:12px
}

/* Hide the canvas-only caption once this instance has initialized. */
.blu-tour-block:has([data-blu-ready]) > .blu-component-preview {
  display: none;
}


/* BluUI_Core → TransferList — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-transfer {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* TransferList — native OutSystems panels and checkable rows
Desktop order: Available, bulk commands, Selected. The consumer owns the
selected keys; CSS does not decide whether an item can be moved. */
.blu-transfer {
  width: 100%;
  color: var(--bluui-text, #182230);
}

.blu-transfer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.blu-transfer__pane {
  min-width: 0;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 10px;
  background: var(--bluui-surface, #fff);
  overflow: hidden;
}

.blu-transfer__heading {
  display: block;
  padding: 14px 14px 8px;
  font-size: 14px;
  font-weight: 600;
}

.blu-transfer__search {
  padding: 0 12px 12px;
}

/* Constrain only search inputs within this component, leaving global form styles intact. */
.blu-transfer__search input {
  width: 100%;
  box-sizing: border-box;
}

/* Scroll bounded lists within a panel. This is a height limit, not virtualization. */
.blu-transfer__list {
  max-height: 320px;
  overflow-y: auto;
}

.blu-transfer .blu-transfer__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--bluui-border, #e2e8f0);
  min-width: 0;
}

/* Match the native Checkbox's disabled state; the helper also rejects moving locked items. */
.blu-transfer__row--disabled {
  opacity: .55;
}

.blu-transfer .blu-transfer__copy {
  width: auto;
  min-width: 0;
  flex: 1;
}

.blu-transfer__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.blu-transfer__description {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--bluui-text-muted, #64748b);
  overflow-wrap: anywhere;
}

/* Layout for existing BluUI Button Block instances. Their appearance continues
to come from the Button Block stylesheet. */
.blu-transfer .blu-transfer__commands {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: auto;
}

/* Keep the generated Button Block wrapper from filling an entire command column. */
.blu-transfer .blu-transfer__commands > [data-block] {
  width: auto;
}

/* Consumer-facing selection count and explanation of temporary checked states.
The guide assigns role=status to the corresponding native Expression. */
.blu-transfer__status {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--bluui-text-muted, #64748b);
}

/* Shared empty-state text for TreeView and the two TransferList panels. */
.blu-transfer__empty {
  padding: 12px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 13px;
}

/* Shared error message — the native Expression receives role=alert in the guide. */
.blu-transfer .blu-component-error {
  display: block;
  margin-top: 8px;
  color: var(--bluui-danger-text, #b42318);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Service Studio canvas previews
Ordinary browsers hide these static stand-ins. The -servicestudio-*
declarations expose them only in the design canvas. Put preview Containers
beside the live host/List, never inside a JavaScript-owned host. */
.blu-transfer .blu-component-preview {
  display: none;
  -servicestudio-display: block;
  -servicestudio-padding: 12px;
  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
  -servicestudio-border-radius: 8px;
}

.blu-transfer .blu-component-preview-line {
  display: block;
  padding: 5px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 13px;
}

/* Responsive layout — stack both panels in DOM order on narrow viewports.
Keep bulk commands together in a wrapping row between the panels. */
@media (max-width: 640px) {
  .blu-transfer__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .blu-transfer .blu-transfer__commands {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* BluUI_Core → TreeSelect — owning Block stylesheet. */
/* Shared control primitives, scoped to this component's runtime host. */
.blu-tree-select { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
.blu-tree-select *, .blu-tree-select *::before, .blu-tree-select *::after { box-sizing: border-box; }
.blu-tree-select [hidden] { display: none !important; }
.blu-tree-select .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.blu-tree-select .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
.blu-tree-select .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
.blu-tree-select .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
.blu-tree-select .blu-control--quiet { border-color: transparent; background: transparent; }
.blu-tree-select .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
.blu-tree-select .blu-control:disabled { opacity: .5; cursor: default; }
.blu-tree-select .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
.blu-tree-select :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
.blu-tree-select .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.blu-tree-select .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
/* Native design canvas stand-in; runtime content stays in the empty host. */
.blu-tree-select-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }

/* Anchored popup stays with its Block and has a bounded scrollable tree. */
.blu-tree-select { position: relative; }
.blu-tree-select .blu-tree-select__trigger { width: 100%; justify-content: space-between; min-height: 42px; font-weight: 400; }
.blu-tree-select__trigger::after { content: "⌄"; color: var(--bluui-text-muted, #667085); }
.blu-tree-select__tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.blu-tree-select__token { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--bluui-border, #dddafa); border-radius: 18px; padding: 1px 4px 1px 10px; font-size: 12px; background: var(--bluui-primary-soft, #f2f0ff); color: var(--bluui-primary-text, #4338ca); }
.blu-tree-select__token .blu-control { min-height: 24px; flex-basis: 24px; border: 0; border-radius: 50%; background: transparent; }
.blu-tree-select__popup { position: absolute; top: 46px; left: 0; right: 0; z-index: 30; padding: 10px; min-width: 220px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 10px; background: var(--bluui-surface, white); box-shadow: 0 12px 36px #14213d20; }
.blu-tree-select__tree, .blu-tree-select__branch { list-style: none; margin: 0; padding: 0; }
.blu-tree-select__tree { margin-top: 8px; max-height: 300px; overflow: auto; }
.blu-tree-select__branch { padding-inline-start: 20px; }
.blu-tree-select__item { outline: none; }
.blu-tree-select__row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px; border-radius: 6px; cursor: pointer; }
.blu-tree-select__chevron { flex: 0 0 16px; color: var(--bluui-text-muted, #667085); }
.blu-tree-select__check { width: 17px; height: 17px; border: 1px solid var(--bluui-control-border, #c8d1df); border-radius: 4px; display: grid; place-items: center; font-size: 12px; }
.blu-tree-select__row:hover { background: var(--bluui-surface-muted, #f3f5f9); }
.blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row, .blu-tree-select__item[aria-selected="true"] > .blu-tree-select__row { color: var(--bluui-primary-text, #4338ca); background: var(--bluui-primary-soft, #f0edff); }
.blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check, .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
.blu-tree-select__item:focus-visible > .blu-tree-select__row { outline: 2px solid var(--blu-widget-primary); outline-offset: -2px; }
.blu-tree-select__item[aria-disabled="true"] > .blu-tree-select__row { opacity: .45; cursor: default; }

/* Runtime validation messages sit beside the interactive root. */
.blu-tree-select-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }


/* BluUI_Core → TreeView — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-tree {
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* TreeView — styles for markup created inside the empty TreeHost.
BluUIRuntime owns roles, expanded/selected state, and keyboard navigation. */
.blu-tree {
  width: 100%;
  color: var(--bluui-text, #182230);
}

.blu-tree :is(.blu-tree__list, .blu-tree__group) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Indent each child group logically so the hierarchy also follows RTL direction. */
.blu-tree .blu-tree__group {
  padding-inline-start: 22px;
}

/* Keep collapsed groups hidden even when a surrounding theme styles list display. */
.blu-tree .blu-tree__group[hidden] {
  display: none;
}

/* Focus is painted on the row below, instead of outlining its entire subtree. */
.blu-tree .blu-tree__item {
  margin: 0;
  padding: 0;
  outline: none;
}

.blu-tree .blu-tree__row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 7px;
  box-sizing: border-box;
  cursor: pointer;
}

.blu-tree .blu-tree__toggle {
  flex: 0 0 24px;
  text-align: center;
}

.blu-tree .blu-tree__label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

/* Apply state styles only to this item's direct row; descendants have their own
selection, focus, and disabled state. Focus does not imply selection. */
.blu-tree .blu-tree__item[aria-selected="true"] > .blu-tree__row {
  background: var(--bluui-primary-soft, #eef2ff);
  color: var(--bluui-primary-text, #3730a3);
  font-weight: 600;
}

.blu-tree .blu-tree__item:focus-visible > .blu-tree__row {
  outline: 2px solid var(--bluui-primary, #4f46e5);
  outline-offset: -2px;
}

.blu-tree .blu-tree__item[aria-disabled="true"] > .blu-tree__row {
  opacity: .5;
  cursor: default;
}

.blu-tree .blu-tree__item[aria-disabled="false"] > .blu-tree__row:hover {
  background: var(--bluui-hover, #f1f5f9);
}

/* Shared empty-state text for TreeView and the two TransferList panels. */
.blu-tree__empty {
  padding: 12px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 13px;
}

/* Shared error message — the native Expression receives role=alert in the guide. */
.blu-tree .blu-component-error {
  display: block;
  margin-top: 8px;
  color: var(--bluui-danger-text, #b42318);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Service Studio canvas previews
Ordinary browsers hide these static stand-ins. The -servicestudio-*
declarations expose them only in the design canvas. Put preview Containers
beside the live host/List, never inside a JavaScript-owned host. */
.blu-tree .blu-component-preview {
  display: none;
  -servicestudio-display: block;
  -servicestudio-padding: 12px;
  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
  -servicestudio-border-radius: 8px;
}

.blu-tree .blu-component-preview-line {
  display: block;
  padding: 5px;
  color: var(--bluui-text-muted, #64748b);
  font-size: 13px;
}


/* BluUI_Core → UploadManager — owning Block stylesheet. */
/* Shared control primitives, scoped to this component's runtime host. */
.blu-upload { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
.blu-upload *, .blu-upload *::before, .blu-upload *::after { box-sizing: border-box; }
.blu-upload [hidden] { display: none !important; }
.blu-upload .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.blu-upload .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
.blu-upload .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
.blu-upload .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
.blu-upload .blu-control--quiet { border-color: transparent; background: transparent; }
.blu-upload .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
.blu-upload .blu-control:disabled { opacity: .5; cursor: default; }
.blu-upload .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
.blu-upload :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
.blu-upload .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.blu-upload .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
/* Native design canvas stand-in; runtime content stays in the empty host. */
.blu-upload-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }

/* Drop target, queue rows, and genuine network progress. */
.blu-upload__drop { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px dashed var(--bluui-control-border, #bac5d7); border-radius: 12px; padding: 26px 18px; background: var(--bluui-surface-muted, #fafbfe); transition: background .15s, border-color .15s; }
.blu-upload__drop.is-dragging { border-color: var(--blu-widget-primary); background: var(--bluui-primary-soft, #f0edff); }
.blu-upload__drop[aria-disabled="true"] { opacity: .5; }
.blu-upload__symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bluui-primary-soft, #efedff); color: var(--bluui-primary-text, #4f46e5); font-size: 24px; margin-bottom: 10px; }
.blu-upload__hint { color: var(--bluui-text-muted, #667085); font-size: 12px; margin: 6px 0 16px; }
.blu-upload__list { list-style: none; padding: 0; margin: 16px 0; }
.blu-upload__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bluui-border, #edf0f5); }
.blu-upload__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blu-upload__copy strong { overflow-wrap: anywhere; font-size: 13px; }
.blu-upload__copy small { color: var(--bluui-text-muted, #667085); font-size: 12px; }
.blu-upload__preview, .blu-upload__file-icon { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; border-radius: 8px; background: var(--bluui-primary-soft, #f0edff); }
.blu-upload__file-icon { display: grid; place-items: center; color: var(--bluui-primary-text, #4f46e5); font-size: 22px; }
.blu-upload__progress { width: 100%; height: 6px; margin: 8px 0 0; accent-color: var(--blu-widget-primary); }
.blu-upload__commands, .blu-upload__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.blu-upload__footer { padding-top: 12px; }
.blu-upload__footer > span { margin-right: auto; color: var(--bluui-text-muted, #667085); font-size: 12px; }
@media (max-width: 480px) { .blu-upload__row { flex-wrap: wrap; } .blu-upload__commands { margin-left: 54px; } }

/* Runtime validation messages sit beside the interactive root. */
.blu-upload-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }