/* 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;
}

/* 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: 0;
  order: 6;
  width: auto;
  color: var(--bluui-text-muted, #64748b);
  font-size: 12px;
}
.blu-showcase-shell__header-actions:empty { display: none; }
.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(280px, 27vw);
  margin-inline-start: auto;
  position: relative;
  flex: 0 1 280px;
  min-height: 38px;
  border: 1px solid var(--bluui-border, #e2e8f0);
  border-radius: 7px;
  background: var(--bluui-surface, #fff);
  padding: 0 9px 0 34px;
}
/* A decorative magnifier keeps the input's accessible name separate. */
.blu-showcase-shell__search::before {
  content: "";
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  background: currentColor;
  color: var(--bluui-text-muted, #64748b);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m15 15 5 5' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blu-showcase-shell__search > .input-search { flex: 1; min-width: 0; }
.blu-showcase-shell .blu-showcase-shell__search input.form-control {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
}
.blu-showcase-shell__search:focus-within { outline: 2px solid var(--bluui-primary, #4f46e5); outline-offset: 2px; }
.blu-showcase-shell .blu-showcase-shell__search input.form-control:focus { outline: none; box-shadow: none; }
.blu-showcase-shell__search-hint { color: var(--bluui-text-muted, #64748b); font-size: 10px; white-space: nowrap; border: 1px solid var(--bluui-border); border-radius: 4px; padding: 1px 4px; }
.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__header > .blu-showcase-shell__search { width: 100%; flex: 1 0 100%; order: 8; margin: 0; }
  .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); }

/* Top-level destinations. Screen templates has its own catalogue and menu. */
.blu-showcase-shell__sections {
  display: flex;
  align-items: center;
  gap: 24px;
  order: 3;
  width: auto;
  align-self: stretch;
  margin-inline-start: 16px;
}
.blu-showcase-shell__header > .blu-showcase-shell__search { order: 4; }
.blu-showcase-shell__header > .blu-showcase-shell__appearance { order: 5; }
.blu-showcase-shell__section {
  min-height: 38px;
  padding: 7px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--bluui-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.blu-showcase-shell__section:hover { color: var(--bluui-primary-text, #4f46e5); }
.blu-showcase-shell__section[aria-current="page"] {
  background: transparent;
  color: var(--bluui-primary-text, #4f46e5);
  border-bottom-color: var(--bluui-primary);
  font-weight: 600;
  box-shadow: none;
}
@media (max-width: 1100px) {
  .blu-showcase-shell__header .blu-demo-brand-caption { display: none; }
}
@media (max-width: 800px) {
  .blu-showcase-shell__header { flex-wrap: wrap; }
  .blu-showcase-shell__sections { order: 7; flex-basis: 100%; margin-inline-start: 0; }
  .blu-showcase-shell__section { flex: 1; }
}
@media (max-width: 700px) {
  .blu-showcase-shell__header > .blu-showcase-shell__search { order: 8; }
}

/* 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; flex-wrap: wrap; overflow-x: visible; }
  .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; }

/* 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 → 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 → 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); }

/* 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.
Theme-aware SVGs use the inherited color scheme without altering supplied artwork. */
.blu-navigation-menu__icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  color-scheme: inherit;
}
.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: #fff;
  background: #4f46e5;
  font-weight: 650;
  box-shadow: none;
}
.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);
}

/* Active icons stay legible on the filled selection surface. */
.blu-navigation-menu .blu-navigation-menu__link--active .blu-navigation-menu__icon { filter: brightness(0) invert(1); }

/* 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;
}

/* 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);
}