@blukavantui/community 0.0.0-stage → 1.1.0

package/dist/data.css

@@ -0,0 +1,876 @@
+/* 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;
+}
+
+/* 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-primary,#5144ed);
+  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-primary,#5144ed);
+  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;
+  flex-wrap:wrap;
+  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-control-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-primary,#5144ed);
+  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-primary,#5144ed);
+  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;
+}
+
+/* Expose the encoded text to people who cannot scan the image. */
+.blu-qr-code__value {
+  margin: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* 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-primary,#5144ed);
+  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;
+}
+
+/* BluUI_Core / Sparkline. SVG scales with the container; colors inherit the
+   shared palette. Values are always exposed through an accessible summary. */
+.blu-sparkline { min-width: 0; width: 100%; color: var(--bluui-text); }
+.blu-sparkline svg { display: block; width: 100%; height: var(--blu-sparkline-height, 64px); overflow: visible; }
+.blu-sparkline__line { fill: none; stroke: var(--blu-sparkline-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.blu-sparkline__area { fill: var(--blu-sparkline-color); opacity: .09; }
+.blu-sparkline__point { fill: var(--blu-sparkline-color); }
+.blu-sparkline__empty { margin: 0; min-height: var(--blu-sparkline-height, 64px); display: flex; align-items: center; color: var(--bluui-text-muted); }
+.blu-sparkline__data { margin-top: 8px; font-size: 13px; }
+.blu-sparkline__data summary { width: fit-content; padding: 6px 0; cursor: pointer; color: var(--bluui-color-primary-text); }
+.blu-sparkline__data table { border-collapse: collapse; width: 100%; margin-top: 8px; }
+.blu-sparkline__data :is(th,td) { padding: 6px 12px; border-bottom: 1px solid var(--bluui-border); text-align: start; }
+.blu-sparkline__data summary:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+
+/* Keep the native design preview in Service Studio only after initialization. */
+.blu-sparkline-block:has([data-blu-ready]) > .blu-component-preview { display: none; }
+
+/* Optional five-second glow. Only a decorative copy changes opacity; the
+   underlying line stays sharp and readable in every theme. No permanent loop. */
+.blu-sparkline__glow {
+  fill: none;
+  stroke: var(--blu-sparkline-color);
+  stroke-width: 5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  filter: blur(3px);
+  opacity: 0;
+  pointer-events: none;
+  animation: blu-sparkline-glow 5s ease-in-out 1 both;
+}
+@keyframes blu-sparkline-glow {
+  0%, 100% { opacity: 0; }
+  50% { opacity: .65; }
+}
+/* Respect the device preference and high-contrast rendering. */
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__glow { display: none; animation: none; }
+}
+
+/* Shared control rules are scoped into each owning Block at build time.
+   Colors inherit BluUITheme; no screen or theme stylesheet additions are needed. */
+.blu-dashboard-canvas { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,sans-serif); }
+.blu-dashboard-canvas *, .blu-dashboard-canvas *::before, .blu-dashboard-canvas *::after { box-sizing:border-box; }
+.blu-dashboard-canvas [hidden] { display:none !important; }
+.blu-dashboard-canvas .blu-platform__body { min-width:0; }
+.blu-dashboard-canvas .blu-platform__heading { margin:0 0 12px; font-size:18px; font-weight:650; line-height:1.4; }
+.blu-dashboard-canvas .blu-platform__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
+.blu-dashboard-canvas .blu-platform__toolbar > .blu-platform__heading { flex:1; margin:0; }
+.blu-dashboard-canvas .blu-platform__button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,sans-serif); cursor:pointer; text-decoration:none; }
+.blu-dashboard-canvas .blu-platform__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { color:var(--bluui-color-primary-text,#4338ca); border-color:var(--bluui-primary,#4f46e5); background:var(--bluui-color-primary-soft,#eef2ff); box-shadow:inset 0 0 0 1px var(--bluui-primary,#4f46e5); }
+.blu-dashboard-canvas .blu-platform__button--primary { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); }
+.blu-dashboard-canvas .blu-platform__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
+.blu-dashboard-canvas .blu-platform__button:disabled, .blu-dashboard-canvas .blu-platform__input:disabled { cursor:default; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text-muted,#5c6b80); border-color:var(--bluui-border,#e2e8f0); }
+.blu-dashboard-canvas :is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas .blu-platform__input { display:block; width:100%; min-width:0; min-height:38px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:7px; padding:8px 10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; }
+.blu-dashboard-canvas .blu-platform__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
+.blu-dashboard-canvas .blu-platform__field { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
+.blu-dashboard-canvas .blu-platform__label { font-size:12px; font-weight:600; }
+.blu-dashboard-canvas .blu-platform__muted { color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__error { display:block; color:var(--bluui-color-error-text,#a33133); font-size:13px; overflow-wrap:anywhere; }
+.blu-dashboard-canvas .blu-platform__success { color:var(--bluui-color-success-text,#2d6c0e); }
+.blu-dashboard-canvas .blu-platform__status { color:var(--bluui-text-muted,#5c6b80); margin:10px 0 0; font-size:13px; }
+.blu-dashboard-canvas .blu-platform__status:empty { margin:0; }
+.blu-dashboard-canvas .blu-platform__empty { border:1px dashed var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:28px 20px; text-align:center; margin:12px 0; }
+.blu-dashboard-canvas .blu-platform__empty p { color:var(--bluui-text-muted,#5c6b80); margin:6px 0 0; }
+.blu-dashboard-canvas .blu-platform__savebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin:0 0 16px; border:1px solid var(--bluui-color-primary-border,#c7d2fe); border-radius:10px; background:var(--bluui-color-primary-soft,#eef2ff); }
+.blu-dashboard-canvas .blu-platform__savebar > span { flex:1; min-width:100px; color:var(--bluui-color-primary-text,#4338ca); font-weight:600; }
+.blu-dashboard-canvas .blu-platform__count { border-radius:20px; padding:3px 8px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+@media (forced-colors:active) { .blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { outline:2px solid Highlight; } }
+
+/* Panels retain native content while order, spans and visibility change. */
+.blu-dashboard-canvas__grid { display:grid; grid-template-columns:repeat(var(--blu-dashboard-columns,12),minmax(0,1fr)); grid-auto-rows:var(--blu-dashboard-row,100px); grid-auto-flow:row; gap:16px; }
+.blu-dashboard-canvas__bridge { display:contents; }
+.blu-dashboard-canvas__panel { display:flex; flex-direction:column; grid-column:span var(--blu-dashboard-span,6); grid-row:span var(--blu-dashboard-rows,2); min-width:0; min-height:0; border:1px solid var(--bluui-border,#e2e8f0); border-radius:12px; background:var(--bluui-surface,#fff); box-shadow:0 2px 8px var(--bluui-shadow-color); }
+.blu-dashboard-canvas__panel-header { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--bluui-border,#e2e8f0); position:relative; }
+.blu-dashboard-canvas__panel-title { flex:1; font:600 14px/1.5 var(--blu-font-family,sans-serif); margin:0; }
+.blu-dashboard-panel__content { flex:1; min-height:0; min-width:0; overflow:auto; padding:16px; }
+.blu-dashboard-canvas__drag { touch-action:none; cursor:grab; font-size:21px; padding:4px 8px; }
+.blu-dashboard-canvas__settings > summary { cursor:pointer; font-size:12px; min-height:28px; display:flex; align-items:center; }
+.blu-dashboard-canvas__settings-body { position:absolute; z-index:30; top:calc(100% - 4px); right:8px; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:260px; max-width:calc(100vw - 40px); border:1px solid var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:14px; background:var(--bluui-surface-raised,#fff); box-shadow:var(--bluui-menu-shadow); }
+.blu-dashboard-canvas__drop { outline:3px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas__ghost { position:fixed; z-index:10000; max-height:240px; overflow:hidden; pointer-events:none; padding:16px; border:2px solid var(--bluui-primary,#4f46e5); border-radius:12px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); box-shadow:var(--bluui-menu-shadow); }
+@media(max-width:700px) { .blu-dashboard-canvas__grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; } .blu-dashboard-canvas__panel { grid-column:1; grid-row:auto; min-height:180px; } .blu-dashboard-panel__content { max-height:400px; } }
+
+/* A visible design-time caption is hidden after the runtime mounts. */
+.blu-dashboard-canvas-block > .blu-component-preview { padding:20px; border:1px dashed var(--bluui-border-strong); color:var(--bluui-text-muted); border-radius:10px; }
+
+/* Native content wrapper; DashboardCanvas owns layout and panel chrome. */
+.blu-dashboard-panel__content { min-width:0; min-height:0; }
+
+/* Community Form & Layout Essentials — local draft; no OutSystems UI selectors. */
+.blu-field,.blu-columns,.blu-table{box-sizing:border-box;min-width:0;color:var(--bluui-text,#182230);font-family:var(--blu-font-family,Inter,system-ui,sans-serif);font-size:14px}
+.blu-field *,.blu-columns *,.blu-table *{box-sizing:border-box}
+.blu-field [hidden],.blu-table [hidden]{display:none!important}
+.blu-field{--blu-field-height:42px;--blu-field-padding:12px;display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0;min-inline-size:0}
+.blu-field--small{--blu-field-height:34px;--blu-field-padding:9px;font-size:13px}.blu-field--large{--blu-field-height:50px;--blu-field-padding:15px;font-size:16px}
+.blu-field__label{font-weight:600;line-height:1.5;padding:0;margin:0 0 2px}.blu-field__body{min-width:0}
+.blu-field__help,.blu-choice__description,.blu-field__count{font-size:12px;color:var(--bluui-text-muted,#5c6b80);line-height:1.5}.blu-field__error{color:var(--bluui-color-error-text,#b42318);font-size:12px;line-height:1.5}.blu-field__count{text-align:end;margin-top:5px;font-variant-numeric:tabular-nums}
+.blu-text,.blu-textarea,.blu-select__trigger{border:1px solid var(--bluui-control-border,#7b8799);border-radius:var(--blu-radius-md,8px);background:var(--bluui-surface,#fff);color:inherit;transition:border-color .12s,box-shadow .12s}
+.blu-text{display:flex;align-items:center;gap:8px;min-height:var(--blu-field-height);padding:0 var(--blu-field-padding)}
+.blu-text__input{width:100%;min-width:0;border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;color:inherit;padding:9px 0!important;font:inherit;line-height:1.5;height:auto}
+.blu-text__input::placeholder,.blu-textarea::placeholder{color:var(--bluui-text-muted,#5c6b80);opacity:1}
+.blu-text:focus-within,.blu-textarea:focus-visible,.blu-select__trigger:focus-visible{border-color:var(--bluui-primary,#4f46e5);outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:2px}
+.blu-text__adornment{display:inline-flex;flex:none;gap:6px;align-items:center;color:var(--bluui-text-muted,#5c6b80);white-space:nowrap}.blu-text__adornment img{width:24px;height:24px;object-fit:contain;border-radius:4px}
+.blu-text__action{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:var(--bluui-primary,#4f46e5);font:inherit;font-size:12px;font-weight:600;min-width:26px;min-height:30px;cursor:pointer;white-space:nowrap;padding:3px}
+.blu-text__action:hover{background:var(--bluui-hover,#f0f2f7)}
+.blu-field button:focus-visible,.blu-table button:focus-visible,.blu-table__scroll:focus-visible{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-textarea{display:block;width:100%;min-height:var(--blu-field-height);padding:10px var(--blu-field-padding);font:inherit;line-height:1.6}
+.blu-field[data-invalid=true] .blu-text,.blu-field[data-invalid=true] .blu-textarea,.blu-field[data-invalid=true] .blu-select__trigger{border-color:var(--bluui-color-error-text,#b42318)}
+.blu-field[data-disabled=true]{opacity:.6}.blu-field input:disabled,.blu-field textarea:disabled,.blu-field button:disabled{cursor:not-allowed}
+.blu-field input[readonly],.blu-field textarea[readonly]{cursor:default}
+.blu-choice{display:flex;align-items:center;position:relative;gap:10px;min-height:32px;cursor:pointer;line-height:1.5}.blu-choice__input{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;opacity:0}
+.blu-choice__mark{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:19px;height:19px;border:1.5px solid var(--bluui-control-border,#7b8799);border-radius:5px;background:var(--bluui-surface,#fff);color:var(--bluui-on-primary,#fff)}
+.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:var(--bluui-primary,#4f46e5);border-color:var(--bluui-primary,#4f46e5)}
+.blu-choice--checkbox .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
+.blu-choice__input:indeterminate+.blu-choice__mark:after{content:'';width:9px;height:2px;background:currentColor;transform:none;border:0}
+.blu-choice__input:focus-visible+.blu-choice__mark{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-choice:has(input:disabled){opacity:.6;cursor:not-allowed}.blu-field[data-disabled=true] .blu-choice:has(input:disabled){opacity:1}
+.blu-choice--radio .blu-choice__mark{border-radius:50%}.blu-choice--radio .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
+.blu-choice--switch .blu-choice__mark{width:38px;height:22px;border-radius:20px;background:var(--bluui-control-border,#7b8799);padding:2px;justify-content:flex-start}
+.blu-choice--switch .blu-choice__mark:after{content:'';height:16px;width:16px;background:#fff;border-radius:50%;transition:transform .15s}
+.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{transform:translateX(14px)}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark{background:var(--bluui-primary,#4f46e5)}
+.blu-choice__state{margin-inline-start:auto;font-size:12px;color:var(--bluui-text-muted,#5c6b80)}.blu-choice__description{display:block}
+.blu-radio-group{display:flex;flex-direction:column;gap:10px}.blu-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:12px 24px}
+.blu-select{position:relative;display:flex;gap:5px}.blu-select__native{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}
+.blu-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:var(--blu-field-height);width:100%;padding:9px var(--blu-field-padding);font:inherit;text-align:start;cursor:pointer}
+.blu-select__trigger:after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);flex-shrink:0}.blu-select__trigger[data-placeholder=true]{color:var(--bluui-text-muted,#5c6b80)}
+.blu-select__popup{box-sizing:border-box;position:absolute;inset:calc(100% + 6px) 0 auto;z-index:1000;max-height:320px;overflow:auto;margin:0;padding:6px;border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:10px;background:var(--bluui-surface,#fff);box-shadow:var(--bluui-menu-shadow,0 10px 30px #17203326);color:var(--bluui-text,#182230);font:inherit}
+.blu-select__search{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--bluui-control-border,#7b8799);border-radius:6px;background:var(--bluui-surface,#fff);color:inherit;font:inherit;margin-bottom:5px;outline-offset:2px}
+.blu-select__option{padding:9px 10px;border-radius:5px;cursor:pointer;line-height:1.5}.blu-select__option[aria-selected=true]{font-weight:600;color:var(--bluui-primary,#4f46e5)}.blu-select__option[data-active=true]{background:var(--bluui-selected,#e9e6ff)}.blu-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}
+.blu-columns{display:grid;grid-template-columns:var(--blu-columns-tracks,1fr 1fr);gap:var(--blu-columns-gap,24px)}.blu-columns__column{min-width:0;display:flex;flex-direction:column;gap:20px}
+@media(max-width:479px){.blu-columns--stack-small{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:767px){.blu-columns--stack-medium{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:1023px){.blu-columns--stack-large{grid-template-columns:minmax(0,1fr)}}
+.blu-table{border:1px solid var(--bluui-border,#e2e8f0);border-radius:12px;background:var(--bluui-surface,#fff);overflow:hidden}
+.blu-table__scroll{overflow:auto}.blu-table table{width:100%;border-collapse:collapse;font:inherit;text-align:start}.blu-table caption{text-align:start;padding:18px;font-weight:600;font-size:15px}
+.blu-table th{font-size:12px;color:var(--bluui-text-muted,#5c6b80);background:var(--bluui-surface-muted,#f7f8fb);font-weight:600;white-space:nowrap}
+.blu-table th,.blu-table td{padding:14px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);line-height:1.5}
+.blu-table[data-density=Compact] th,.blu-table[data-density=Compact] td{padding:8px 12px}
+.blu-table[data-striped=true] tbody tr:nth-child(even){background:var(--bluui-surface-muted,#f7f8fb)}
+.blu-table__sort{font:inherit;font-weight:600;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:12px}
+.blu-table__empty{text-align:center!important;height:140px;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table__footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);font-size:12px;flex-wrap:wrap}.blu-table__footer>span{margin-inline-end:auto;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table-button{border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:6px;padding:6px 10px;background:var(--bluui-surface,#fff);font:inherit;font-size:12px;color:var(--bluui-text,#182230);cursor:pointer;min-height:30px;white-space:nowrap}.blu-table-button:hover{background:var(--bluui-hover,#f0f2f7)}.blu-table-button:disabled{opacity:.5;cursor:not-allowed}.blu-table__actions{display:flex;gap:6px}
+@media(prefers-reduced-motion:reduce){.blu-field *{transition:none!important}}
+@media(forced-colors:active){.blu-choice__mark{forced-color-adjust:none;border-color:ButtonText;background:Canvas;color:HighlightText}.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:Highlight;border-color:Highlight}.blu-select__option[data-active=true]{outline:2px solid Highlight}.blu-choice--switch .blu-choice__mark:after{background:ButtonText}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{background:HighlightText}}
+
+/* Equal height is row-scoped; stacked columns retain their content height. */
+.blu-columns.blu-columns--equal-height{align-items:stretch}
+.blu-columns--equal-height > .blu-columns__column > :only-child{flex:1 1 auto}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder]{display:flex;flex-direction:column}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder] > :only-child{flex:1 1 auto}