valtech-components 4.0.1013 → 4.0.1014

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.1013';
+const VERSION = '4.0.1014';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -8881,7 +8881,7 @@ class DisplayComponent {
         {{ getDisplayContent() }}
       </p>
     </ion-text>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisplayComponent, decorators: [{
             type: Component,
@@ -8891,7 +8891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         {{ getDisplayContent() }}
       </p>
     </ion-text>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -38144,6 +38144,9 @@ class FormComponent {
         @for (s of props.sections; track s.name) {
           <div class="section">
             <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
+            @if (s.subtitle) {
+              <p class="section-subtitle">{{ s.subtitle }}</p>
+            }
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
                 @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
@@ -38360,6 +38363,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         @for (s of props.sections; track s.name) {
           <div class="section">
             <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
+            @if (s.subtitle) {
+              <p class="section-subtitle">{{ s.subtitle }}</p>
+            }
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
                 @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
@@ -39127,6 +39133,7 @@ class FormSchemaBuilderService {
             const section = sectionsById.get(key) ??
                 {
                     name: def.sectionLabel || '',
+                    subtitle: def.sectionSubtitle || '',
                     order: def.sectionOrder ?? 0,
                     fields: [],
                 };
@@ -39213,6 +39220,7 @@ class FormSchemaBuilderService {
             options: this.normalizeOptions(field.options),
             sectionId: field.sectionId,
             sectionLabel: field.sectionLabel?.trim() ?? '',
+            sectionSubtitle: field.sectionSubtitle?.trim() ?? '',
             sectionOrder: field.sectionOrder,
             step: field.step,
             unitLabel: field.unitLabel,
@@ -40604,6 +40612,7 @@ class FieldSchemaEditorComponent {
         this.selectedPresetId = signal('');
         /** Se refresca con cada cambio de tipo — `needsOptions` no puede leer el control directo. */
         this.currentType = signal('TEXT');
+        this.currentSectionId = '';
         /** Una vez que se toca el token a mano (o se edita un campo ya guardado) deja de derivarse del label. */
         this.nameLocked = false;
         this.name = '';
@@ -40659,6 +40668,7 @@ class FieldSchemaEditorComponent {
         const initial = this.props.field;
         if (initial) {
             this.fieldId = initial.id;
+            this.currentSectionId = initial.sectionId ?? '';
             this.nameLocked = true;
             this.name = initial.name;
             this.labelControl.setValue(initial.label ?? '');
@@ -40746,6 +40756,7 @@ class FieldSchemaEditorComponent {
             placeholderText: (this.placeholderControl.value || '').trim(),
             hintText: (this.hintControl.value || '').trim(),
             type: this.coerceType(this.typeControl.value),
+            sectionId: this.currentSectionId,
             required: this.requiredControl.value,
             sectionLabel: (this.sectionControl.value || '').trim(),
             options: this.needsOptions() ? this.options().map((option, index) => ({ ...option, order: index })) : undefined,
@@ -41342,6 +41353,9 @@ const SURVEY_QUESTION_TYPES = [
 
 const SURVEY_BUILDER_I18N = {
     es: {
+        surveyNameLabel: 'Nombre interno',
+        surveyNamePlaceholder: 'Ej: encuesta-ventas-entrada',
+        noSurveyName: 'Ponle un nombre interno a la encuesta',
         titleLabel: 'Título',
         titlePlaceholder: 'Ej: ¿Qué te pareció el evento?',
         subtitleLabel: 'Subtítulo',
@@ -41365,8 +41379,10 @@ const SURVEY_BUILDER_I18N = {
         successImageLabel: 'Imagen de cierre',
         successImagePlaceholder: 'URL de la imagen que se muestra al terminar',
         questionsLabel: 'Preguntas',
+        sectionQuestionsLabel: 'Sin sección',
         questionLabelPlaceholder: 'Escribe la pregunta',
         addQuestion: 'Agregar pregunta',
+        addQuestionToSection: 'Agregar aquí',
         removeQuestion: 'Quitar pregunta',
         editQuestion: 'Editar pregunta',
         duplicateQuestion: 'Duplicar pregunta',
@@ -41384,6 +41400,8 @@ const SURVEY_BUILDER_I18N = {
         loadError: 'No pudimos cargar la encuesta para editar.',
         stepStart: 'Inicio',
         stepQuestions: 'Preguntas',
+        sectionSubtitleLabel: 'Subtítulo',
+        sectionSubtitlePlaceholder: 'Escribe un subtítulo para esta sección',
         stepClose: 'Cierre',
         stepReview: 'Revisar',
         wizardStepsLabel: 'Pasos para crear la encuesta',
@@ -41401,6 +41419,9 @@ const SURVEY_BUILDER_I18N = {
         reviewDefaultClose: 'Cierre por defecto',
     },
     en: {
+        surveyNameLabel: 'Internal name',
+        surveyNamePlaceholder: 'E.g: event-feedback',
+        noSurveyName: 'Give the survey an internal name',
         titleLabel: 'Title',
         titlePlaceholder: 'E.g: How was the event?',
         subtitleLabel: 'Subtitle',
@@ -41424,8 +41445,10 @@ const SURVEY_BUILDER_I18N = {
         successImageLabel: 'Closing image',
         successImagePlaceholder: 'Image URL shown after submit',
         questionsLabel: 'Questions',
+        sectionQuestionsLabel: 'No section',
         questionLabelPlaceholder: 'Write the question',
         addQuestion: 'Add question',
+        addQuestionToSection: 'Add here',
         removeQuestion: 'Remove question',
         editQuestion: 'Edit question',
         duplicateQuestion: 'Duplicate question',
@@ -41443,6 +41466,8 @@ const SURVEY_BUILDER_I18N = {
         loadError: "We couldn't load the survey to edit.",
         stepStart: 'Start',
         stepQuestions: 'Questions',
+        sectionSubtitleLabel: 'Subtitle',
+        sectionSubtitlePlaceholder: 'Add a subtitle for this section',
         stepClose: 'Close',
         stepReview: 'Review',
         wizardStepsLabel: 'Survey builder steps',
@@ -41606,6 +41631,44 @@ let rowUid = 0;
  * `val-survey-response` sabe renderizar, no a lo que el editor sabe editar.
  */
 class SurveyBuilderComponent {
+    groupQuestions(rows) {
+        const groups = [];
+        const index = new Map();
+        rows.forEach(question => {
+            const section = (question.sectionLabel ?? '').trim();
+            const sectionKey = question.sectionId || (section ? this.formBuilder.toToken(section) : '__default__');
+            const label = section;
+            let position = index.get(sectionKey);
+            if (position == null) {
+                position = groups.length;
+                index.set(sectionKey, position);
+                groups.push({ id: sectionKey, label, rows: [] });
+            }
+            groups[position].rows.push(question);
+        });
+        if (!groups.length) {
+            const defaultId = '__default__';
+            groups.push({ id: defaultId, label: '', rows: [] });
+        }
+        return groups;
+    }
+    normalizeSectionId(sectionId) {
+        return (sectionId ?? '').trim() || '__default__';
+    }
+    questionGroupById(sectionId) {
+        return this.questionGroups().find(group => group.id === sectionId);
+    }
+    sectionSubtitleControl(sectionId) {
+        const normalized = this.normalizeSectionId(sectionId);
+        if (!this.sectionSubtitleControls[normalized]) {
+            const control = new FormControl(this.sectionSubtitles()[normalized] ?? '', { nonNullable: true });
+            control.valueChanges.subscribe(value => {
+                this.sectionSubtitles.update(values => ({ ...values, [normalized]: value }));
+            });
+            this.sectionSubtitleControls[normalized] = control;
+        }
+        return this.sectionSubtitleControls[normalized];
+    }
     constructor() {
         this.props = {};
         this.saved = new EventEmitter();
@@ -41621,6 +41684,7 @@ class SurveyBuilderComponent {
         this.formBuilder = inject(RequestFormBuilderService);
         this.errors = inject(ValtechErrorService);
         this.modals = inject(ModalService);
+        this.surveyNameControl = new FormControl('', { nonNullable: true });
         this.titleControl = new FormControl('', { nonNullable: true });
         this.subtitleControl = new FormControl('', { nonNullable: true });
         this.headerImageControl = new FormControl('', { nonNullable: true });
@@ -41633,12 +41697,20 @@ class SurveyBuilderComponent {
         this.validationError = signal('');
         this.saving = signal(false);
         this.uploadingImage = signal('');
-        this.wizardSteps = [
-            { id: 'start', labelKey: 'stepStart' },
-            { id: 'questions', labelKey: 'stepQuestions' },
-            { id: 'close', labelKey: 'stepClose' },
-            { id: 'review', labelKey: 'stepReview' },
-        ];
+        this.sectionSubtitles = signal({});
+        this.sectionSubtitleControls = {};
+        this.questionGroups = computed(() => this.groupQuestions(this.questions()));
+        this.wizardSteps = computed(() => {
+            const groups = this.questionGroups();
+            const steps = [{ id: 'start', label: this.t('stepStart') }];
+            groups.forEach((group, index) => {
+                const sectionLabel = group.label || `${this.t('sectionQuestionsLabel')} ${index + 1}`;
+                steps.push({ id: `section-${group.id}`, label: `${index + 1}. ${sectionLabel}` });
+            });
+            steps.push({ id: 'close', label: this.t('stepClose') });
+            steps.push({ id: 'review', label: this.t('stepReview') });
+            return steps;
+        });
         this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
         this.maxImageBytes = 10 * 1024 * 1024;
         if (!this.i18n.hasNamespace(NAMESPACE$1)) {
@@ -41657,14 +41729,15 @@ class SurveyBuilderComponent {
     async ngOnInit() {
         // Sembrado directo: la app ya tenía la encuesta, no hace falta leerla.
         if (this.props.initial) {
-            this.hydrate(this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions, this.props.initial.presentation);
+            this.hydrate(this.props.initial.name, this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions, this.props.initial.presentation);
             return;
         }
         if (!this.props.typeId)
             return;
         try {
             const cfg = await firstValueFrom(this.requests.getRequestType(this.props.typeId));
-            this.hydrate(cfg.label, cfg.subtitle ?? '', cfg.fieldSchema, cfg.presentation);
+            const metadataName = typeof cfg.metadata?.['name'] === 'string' ? cfg.metadata['name'] : '';
+            this.hydrate(metadataName || cfg.label, cfg.label, cfg.subtitle ?? '', cfg.fieldSchema, cfg.presentation);
         }
         catch (err) {
             this.errors.handle(err, {
@@ -41708,7 +41781,7 @@ class SurveyBuilderComponent {
     nextStep() {
         if (!this.validateWizardStep(this.wizardStep()))
             return;
-        this.wizardStep.update(step => Math.min(step + 1, this.wizardSteps.length - 1));
+        this.wizardStep.update(step => Math.min(step + 1, this.wizardSteps().length - 1));
     }
     previousStep() {
         this.validationError.set('');
@@ -41751,6 +41824,18 @@ class SurveyBuilderComponent {
             state: this.saving() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         };
     }
+    closeStep() {
+        return Math.max(this.wizardSteps().length - 2, 0);
+    }
+    reviewStep() {
+        return Math.max(this.wizardSteps().length - 1, 0);
+    }
+    sectionStepIndex(sectionIndex) {
+        return sectionIndex + 1;
+    }
+    showCurrentSectionQuestionStep() {
+        return this.isWizard() && this.wizardStep() >= 1 && this.wizardStep() < this.reviewStep();
+    }
     interpolate(template, values) {
         return Object.entries(values).reduce((text, [key, value]) => text.replaceAll(`{${key}}`, String(value)), template);
     }
@@ -41771,7 +41856,16 @@ class SurveyBuilderComponent {
             icon: { name: icon, slot: 'icon-only' },
         };
     }
-    addQuestion() {
+    addQuestionAriaLabel(sectionLabel) {
+        const section = (sectionLabel ?? '').trim();
+        if (!section) {
+            return this.t('addQuestionToSection');
+        }
+        return `${this.t('addQuestionToSection')} (${section})`;
+    }
+    addQuestion(sectionId) {
+        const normalizedSectionId = this.normalizeSectionId(sectionId);
+        const targetGroup = this.questionGroupById(normalizedSectionId);
         const row = {
             id: `row-${rowUid++}`,
             name: '',
@@ -41780,12 +41874,45 @@ class SurveyBuilderComponent {
             hintText: '',
             type: this.questionTypes()[0],
             required: true,
+            sectionId: normalizedSectionId,
+            sectionLabel: targetGroup?.label || undefined,
         };
-        this.questions.update(rows => [...rows, row]);
+        this.questions.update(rows => {
+            const next = [...rows];
+            const insertionIndex = this.nextQuestionIndexForSection(next, normalizedSectionId);
+            next.splice(insertionIndex, 0, row);
+            return next;
+        });
         // Una pregunta recién agregada está vacía: abrirla es el único paso
         // siguiente posible, y dejarla cerrada la haría ver como una fila rota.
         this.editingId.set(row.id);
     }
+    rowGlobalIndex(sectionId, groupRowIndex) {
+        const normalized = this.normalizeSectionId(sectionId);
+        let index = 0;
+        for (const row of this.questions()) {
+            if (this.normalizeSectionId(row.sectionId) === normalized) {
+                if (groupRowIndex === 0)
+                    return index;
+                groupRowIndex -= 1;
+            }
+            index += 1;
+        }
+        return Math.min(index - 1, 0);
+    }
+    nextQuestionIndexForSection(rows, sectionId) {
+        const normalized = this.normalizeSectionId(sectionId);
+        if (!rows.length)
+            return 0;
+        if (!normalized)
+            return rows.length;
+        for (let i = rows.length - 1; i >= 0; i -= 1) {
+            if (this.normalizeSectionId(rows[i].sectionId) === normalized) {
+                return i + 1;
+            }
+        }
+        return rows.length;
+    }
     toggleEdit(row) {
         this.editingId.update(current => (current === row.id ? '' : row.id));
     }
@@ -41828,20 +41955,28 @@ class SurveyBuilderComponent {
      * paso obligatorio que no se veía por ningún lado.
      */
     draftQuestion(field) {
-        this.questions.update(rows => rows.map(r => (r.id === field.id ? { ...r, ...field } : r)));
+        this.questions.update(rows => rows.map(r => (r.id === field.id ? this.withResolvedSection({ ...r, ...field }) : r)));
         if (this.validationError())
             this.validationError.set('');
     }
     applyQuestion(field) {
         this.questions.update(rows => rows.map(r => r.id === field.id
             ? {
-                ...field,
+                ...this.withResolvedSection(field),
                 name: this.formBuilder.uniqueFieldName(field.name || field.label, rows.filter(o => o.id !== r.id)),
             }
             : r));
         this.editingId.set('');
         this.validationError.set('');
     }
+    withResolvedSection(field) {
+        const label = (field.sectionLabel ?? '').trim();
+        const id = this.normalizeSectionId(field.sectionId);
+        if (id !== '__default__' || !label) {
+            return { ...field, sectionId: id, sectionLabel: label || undefined };
+        }
+        return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
+    }
     async onPresentationFileSelected(slot, event) {
         const input = event.target;
         const file = input.files?.[0];
@@ -41901,9 +42036,10 @@ class SurveyBuilderComponent {
                 label: row.label.trim(),
                 type: row.type,
                 required: row.required,
-                sectionId: row.sectionLabel ? this.formBuilder.toToken(row.sectionLabel) : undefined,
+                sectionId: row.sectionId,
                 sectionLabel: row.sectionLabel,
-                sectionOrder: this.sectionOrderFor(row.sectionLabel, rows),
+                sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(row.sectionId)] ?? '',
+                sectionOrder: this.sectionOrderFor(row.sectionId, rows),
                 placeholderText: row.placeholderText,
                 hintText: row.hintText,
                 options: row.options,
@@ -41913,7 +42049,13 @@ class SurveyBuilderComponent {
         const presentation = this.presentationPayload();
         // La app guarda: acá solo se valida y se entrega lo escrito.
         if (this.props.persist === false) {
-            this.draft.emit({ label: title, subtitle, presentation, questions: fieldSchema });
+            this.draft.emit({
+                name: this.surveyNameControl.value.trim() || title,
+                label: title,
+                subtitle,
+                presentation,
+                questions: fieldSchema,
+            });
             return;
         }
         this.saving.set(true);
@@ -41924,6 +42066,7 @@ class SurveyBuilderComponent {
         // endpoint (`persist: false`) y arma el id con la entidad adentro.
         const typeId = this.props.typeId ?? `${this.props.typePrefix ?? DEFAULT_TYPE_PREFIX}:${this.formBuilder.toToken(title)}`;
         const payload = {
+            name: this.surveyNameControl.value.trim() || title,
             label: title,
             subtitle,
             presentation,
@@ -41951,14 +42094,23 @@ class SurveyBuilderComponent {
             });
         }
     }
-    hydrate(label, subtitle, questions, presentation) {
+    hydrate(name, label, subtitle, questions, presentation) {
+        this.surveyNameControl.setValue(name ?? '');
         this.titleControl.setValue(label ?? '');
         this.subtitleControl.setValue(subtitle ?? '');
         this.headerImageControl.setValue(presentation?.headerImageUrl ?? '');
         this.successTitleControl.setValue(presentation?.successTitle || this.defaultSuccessTitle());
         this.successMessageControl.setValue(presentation?.successMessage || this.defaultSuccessMessage());
         this.successImageControl.setValue(presentation?.successImageUrl ?? '');
-        this.questions.set([...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f)));
+        const rows = [...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f));
+        const subtitles = {};
+        rows.forEach(row => {
+            const id = this.normalizeSectionId(row.sectionId);
+            if (row.sectionSubtitle && subtitles[id] === undefined)
+                subtitles[id] = row.sectionSubtitle;
+        });
+        this.sectionSubtitles.set(subtitles);
+        this.questions.set(rows);
     }
     presentationPayload() {
         const presentation = {
@@ -41978,6 +42130,13 @@ class SurveyBuilderComponent {
     validateWizardStep(step) {
         this.validationError.set('');
         if (step === 0) {
+            if (!this.isWizard())
+                return true;
+            if (!this.surveyNameControl.value.trim()) {
+                this.surveyNameControl.markAsTouched();
+                this.validationError.set(this.t('noSurveyName'));
+                return false;
+            }
             if (!this.titleControl.value.trim()) {
                 this.titleControl.markAsTouched();
                 this.validationError.set(this.t('noTitle'));
@@ -42013,7 +42172,9 @@ class SurveyBuilderComponent {
             hintText: f.hintText ?? '',
             type: f.type,
             required: !!f.required,
+            sectionId: f.sectionId,
             sectionLabel: f.sectionLabel ?? '',
+            sectionSubtitle: f.sectionSubtitle ?? '',
             sectionOrder: f.sectionOrder,
             options: f.options,
         };
@@ -42037,7 +42198,7 @@ class SurveyBuilderComponent {
         };
     }
     async openPreview() {
-        await this.modals.open({
+        await this.modals.openAdaptive({
             component: SurveyPreviewModalComponent,
             componentProps: {
                 modalTitle: this.t('previewTitle'),
@@ -42053,26 +42214,25 @@ class SurveyBuilderComponent {
                     order: index,
                     name: question.name || this.formBuilder.toToken(question.label),
                     typeLabel: this.typeLabel(question.type),
-                    sectionId: question.sectionLabel ? this.formBuilder.toToken(question.sectionLabel) : undefined,
-                    sectionOrder: this.sectionOrderFor(question.sectionLabel, this.questions()),
+                    sectionId: this.normalizeSectionId(question.sectionId),
+                    sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(question.sectionId)] ?? '',
+                    sectionOrder: this.sectionOrderFor(question.sectionId, this.questions()),
                 })),
             },
-            size: 'medium',
-        });
+        }, 'wide');
     }
-    sectionOrderFor(sectionLabel, rows) {
-        const label = sectionLabel?.trim();
-        if (!label)
-            return undefined;
-        const labels = [...new Set(rows.map(row => row.sectionLabel?.trim()).filter(Boolean))];
-        return labels.indexOf(label);
+    sectionOrderFor(sectionId, rows) {
+        const id = this.normalizeSectionId(sectionId);
+        const sectionIds = [...new Set(rows.map(row => this.normalizeSectionId(row.sectionId)).filter(Boolean))];
+        const index = sectionIds.indexOf(id);
+        return index >= 0 ? index : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyBuilderComponent, isStandalone: true, selector: "val-survey-builder", inputs: { props: "props" }, outputs: { saved: "saved", draft: "draft" }, ngImport: i0, template: `
     <div class="survey-builder">
       @if (isWizard()) {
         <nav class="survey-builder__steps" [attr.aria-label]="t('wizardStepsLabel')">
-          @for (step of wizardSteps; track step.id; let i = $index) {
+          @for (step of wizardSteps(); track step.id; let i = $index) {
             <button
               type="button"
               class="survey-builder__step"
@@ -42081,7 +42241,7 @@ class SurveyBuilderComponent {
               (click)="goToStep(i)"
             >
               <span>{{ i + 1 }}</span>
-              {{ t(step.labelKey) }}
+              {{ step.label }}
             </button>
           }
         </nav>
@@ -42098,6 +42258,9 @@ class SurveyBuilderComponent {
 
       @if (showWizardSection(0)) {
         <section class="survey-builder__section">
+          <val-form-field [label]="t('surveyNameLabel')">
+            <val-text-input [props]="{ control: surveyNameControl, placeholder: t('surveyNamePlaceholder') }" />
+          </val-form-field>
           <val-form-field [label]="t('titleLabel')">
             <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
           </val-form-field>
@@ -42223,7 +42386,7 @@ class SurveyBuilderComponent {
         </div>
       }
 
-      @if (showWizardSection(2)) {
+      @if (showWizardSection(closeStep())) {
         <section class="survey-builder__section">
           <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
           <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42270,7 +42433,7 @@ class SurveyBuilderComponent {
         </section>
       }
 
-      @if (showWizardSection(1)) {
+      @if (showCurrentSectionQuestionStep()) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -42278,68 +42441,113 @@ class SurveyBuilderComponent {
           <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
         }
 
-        @for (row of questions(); track row.id; let i = $index; let first = $first; let last = $last) {
-          <div class="survey-builder__row">
-            <div class="survey-builder__row-head">
-              <div class="survey-builder__row-text">
-                <strong>{{ row.label || t('untitledQuestion') }}</strong>
-                <span>
-                  {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
-                </span>
-              </div>
-              <div class="survey-builder__row-actions">
-                <val-button
-                  [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
-                  (onClick)="move(i, -1)"
-                />
-                <val-button
-                  [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
-                  (onClick)="move(i, 1)"
-                />
-                <val-button
-                  [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
-                  (onClick)="duplicate(row)"
-                />
-                <val-button
-                  [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
-                  (onClick)="toggleEdit(row)"
-                />
-                <val-button
-                  [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
-                  (onClick)="removeQuestion(row)"
-                />
+        @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
+          @if (wizardStep() === sectionStepIndex(sectionIndex)) {
+          <section class="survey-builder__question-section">
+            <div class="survey-builder__section-head">
+              <div>
+                <strong>{{ group.label || t('sectionQuestionsLabel') }}</strong>
+                <div class="survey-builder__section-subtitle">
+                  <val-form-field [label]="t('sectionSubtitleLabel')">
+                    <val-text-input
+                      [props]="{
+                        control: sectionSubtitleControl(group.id),
+                        placeholder: t('sectionSubtitlePlaceholder'),
+                      }"
+                    />
+                  </val-form-field>
+                </div>
               </div>
+              <val-button
+                [props]="{
+                  token: 'survey-builder-add-question-' + group.id,
+                  text: t('addQuestionToSection'),
+                  color: 'dark',
+                  fill: 'outline',
+                  shape: 'round',
+                  size: 'small',
+                  type: 'button',
+                  state: 'ENABLED',
+                  icon: { name: 'add-outline', slot: 'start' },
+                }"
+                (onClick)="addQuestion(group.id)"
+              />
             </div>
 
-            @if (editingId() === row.id) {
-              <div class="survey-builder__row-editor">
-                <val-field-schema-editor
-                  #editor
-                  [props]="editorProps(row)"
-                  (changed)="draftQuestion($event)"
-                  (save)="applyQuestion($event)"
-                />
-                <div class="survey-builder__row-editor-actions">
-                  <val-button
-                    [props]="{
-                      token: 'q-done-' + row.id,
-                      text: t('doneEditing'),
-                      color: 'dark',
-                      fill: 'solid',
-                      shape: 'round',
-                      size: 'default',
-                      type: 'button',
-                      state: 'ENABLED',
-                    }"
-                    (onClick)="editor.submit()"
-                  />
+            @for (row of group.rows; track row.id; let i = $index; let first = $first; let last = $last) {
+              @let globalIndex = rowGlobalIndex(group.id, i);
+              <div class="survey-builder__row">
+                <div class="survey-builder__row-head">
+                  <div class="survey-builder__row-text">
+                    <strong>{{ row.label || t('untitledQuestion') }}</strong>
+                    <span>
+                      {{
+                        typeLabel(row.type) +
+                        (row.required ? ' · ' + t('requiredTag') : '') +
+                        (row.sectionLabel ? ' · ' + row.sectionLabel : '')
+                      }}
+                    </span>
+                  </div>
+                  <div class="survey-builder__row-actions">
+                    <val-button
+                      [props]="iconAction('q-add-' + row.id, 'add-outline', addQuestionAriaLabel(row.sectionLabel), false)"
+                      (onClick)="addQuestion(row.sectionId || group.id)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
+                      (onClick)="move(globalIndex, -1)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
+                      (onClick)="move(globalIndex, 1)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
+                      (onClick)="duplicate(row)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
+                      (onClick)="toggleEdit(row)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
+                      (onClick)="removeQuestion(row)"
+                    />
+                  </div>
                 </div>
+
+                @if (editingId() === row.id) {
+                  <div class="survey-builder__row-editor">
+                    <val-field-schema-editor
+                      #editor
+                      [props]="editorProps(row)"
+                      (changed)="draftQuestion($event)"
+                      (save)="applyQuestion($event)"
+                    />
+                    <div class="survey-builder__row-editor-actions">
+                      <val-button
+                        [props]="{
+                          token: 'q-done-' + row.id,
+                          text: t('doneEditing'),
+                          color: 'dark',
+                          fill: 'solid',
+                          shape: 'round',
+                          size: 'default',
+                          type: 'button',
+                          state: 'ENABLED',
+                        }"
+                        (onClick)="editor.submit()"
+                      />
+                    </div>
+                  </div>
+                }
               </div>
             }
-          </div>
+          </section>
+          }
         }
 
-        <val-button
+      <val-button
           [props]="{
             token: 'survey-builder-add-question',
             text: t('addQuestion'),
@@ -42351,12 +42559,12 @@ class SurveyBuilderComponent {
             state: 'ENABLED',
             icon: { name: 'add-outline', slot: 'start' },
           }"
-          (onClick)="addQuestion()"
+          (onClick)="addQuestion(questionGroups()[0]?.id)"
         />
       </div>
       }
 
-      @if (showWizardSection(3)) {
+      @if (showWizardSection(reviewStep())) {
         <section class="survey-builder__review">
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42379,7 +42587,7 @@ class SurveyBuilderComponent {
           @if (wizardStep() > 0) {
             <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
           }
-          @if (wizardStep() < wizardSteps.length - 1) {
+          @if (wizardStep() < wizardSteps().length - 1) {
             <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
           } @else {
             <val-button [props]="saveProps()" (onClick)="save()" />
@@ -42389,7 +42597,7 @@ class SurveyBuilderComponent {
         <val-button [props]="saveProps()" (onClick)="save()" />
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
             type: Component,
@@ -42406,7 +42614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div class="survey-builder">
       @if (isWizard()) {
         <nav class="survey-builder__steps" [attr.aria-label]="t('wizardStepsLabel')">
-          @for (step of wizardSteps; track step.id; let i = $index) {
+          @for (step of wizardSteps(); track step.id; let i = $index) {
             <button
               type="button"
               class="survey-builder__step"
@@ -42415,7 +42623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               (click)="goToStep(i)"
             >
               <span>{{ i + 1 }}</span>
-              {{ t(step.labelKey) }}
+              {{ step.label }}
             </button>
           }
         </nav>
@@ -42432,6 +42640,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       @if (showWizardSection(0)) {
         <section class="survey-builder__section">
+          <val-form-field [label]="t('surveyNameLabel')">
+            <val-text-input [props]="{ control: surveyNameControl, placeholder: t('surveyNamePlaceholder') }" />
+          </val-form-field>
           <val-form-field [label]="t('titleLabel')">
             <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
           </val-form-field>
@@ -42557,7 +42768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
 
-      @if (showWizardSection(2)) {
+      @if (showWizardSection(closeStep())) {
         <section class="survey-builder__section">
           <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
           <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42604,7 +42815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </section>
       }
 
-      @if (showWizardSection(1)) {
+      @if (showCurrentSectionQuestionStep()) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -42612,68 +42823,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
         }
 
-        @for (row of questions(); track row.id; let i = $index; let first = $first; let last = $last) {
-          <div class="survey-builder__row">
-            <div class="survey-builder__row-head">
-              <div class="survey-builder__row-text">
-                <strong>{{ row.label || t('untitledQuestion') }}</strong>
-                <span>
-                  {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
-                </span>
-              </div>
-              <div class="survey-builder__row-actions">
-                <val-button
-                  [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
-                  (onClick)="move(i, -1)"
-                />
-                <val-button
-                  [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
-                  (onClick)="move(i, 1)"
-                />
-                <val-button
-                  [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
-                  (onClick)="duplicate(row)"
-                />
-                <val-button
-                  [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
-                  (onClick)="toggleEdit(row)"
-                />
-                <val-button
-                  [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
-                  (onClick)="removeQuestion(row)"
-                />
+        @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
+          @if (wizardStep() === sectionStepIndex(sectionIndex)) {
+          <section class="survey-builder__question-section">
+            <div class="survey-builder__section-head">
+              <div>
+                <strong>{{ group.label || t('sectionQuestionsLabel') }}</strong>
+                <div class="survey-builder__section-subtitle">
+                  <val-form-field [label]="t('sectionSubtitleLabel')">
+                    <val-text-input
+                      [props]="{
+                        control: sectionSubtitleControl(group.id),
+                        placeholder: t('sectionSubtitlePlaceholder'),
+                      }"
+                    />
+                  </val-form-field>
+                </div>
               </div>
+              <val-button
+                [props]="{
+                  token: 'survey-builder-add-question-' + group.id,
+                  text: t('addQuestionToSection'),
+                  color: 'dark',
+                  fill: 'outline',
+                  shape: 'round',
+                  size: 'small',
+                  type: 'button',
+                  state: 'ENABLED',
+                  icon: { name: 'add-outline', slot: 'start' },
+                }"
+                (onClick)="addQuestion(group.id)"
+              />
             </div>
 
-            @if (editingId() === row.id) {
-              <div class="survey-builder__row-editor">
-                <val-field-schema-editor
-                  #editor
-                  [props]="editorProps(row)"
-                  (changed)="draftQuestion($event)"
-                  (save)="applyQuestion($event)"
-                />
-                <div class="survey-builder__row-editor-actions">
-                  <val-button
-                    [props]="{
-                      token: 'q-done-' + row.id,
-                      text: t('doneEditing'),
-                      color: 'dark',
-                      fill: 'solid',
-                      shape: 'round',
-                      size: 'default',
-                      type: 'button',
-                      state: 'ENABLED',
-                    }"
-                    (onClick)="editor.submit()"
-                  />
+            @for (row of group.rows; track row.id; let i = $index; let first = $first; let last = $last) {
+              @let globalIndex = rowGlobalIndex(group.id, i);
+              <div class="survey-builder__row">
+                <div class="survey-builder__row-head">
+                  <div class="survey-builder__row-text">
+                    <strong>{{ row.label || t('untitledQuestion') }}</strong>
+                    <span>
+                      {{
+                        typeLabel(row.type) +
+                        (row.required ? ' · ' + t('requiredTag') : '') +
+                        (row.sectionLabel ? ' · ' + row.sectionLabel : '')
+                      }}
+                    </span>
+                  </div>
+                  <div class="survey-builder__row-actions">
+                    <val-button
+                      [props]="iconAction('q-add-' + row.id, 'add-outline', addQuestionAriaLabel(row.sectionLabel), false)"
+                      (onClick)="addQuestion(row.sectionId || group.id)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
+                      (onClick)="move(globalIndex, -1)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
+                      (onClick)="move(globalIndex, 1)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
+                      (onClick)="duplicate(row)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
+                      (onClick)="toggleEdit(row)"
+                    />
+                    <val-button
+                      [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
+                      (onClick)="removeQuestion(row)"
+                    />
+                  </div>
                 </div>
+
+                @if (editingId() === row.id) {
+                  <div class="survey-builder__row-editor">
+                    <val-field-schema-editor
+                      #editor
+                      [props]="editorProps(row)"
+                      (changed)="draftQuestion($event)"
+                      (save)="applyQuestion($event)"
+                    />
+                    <div class="survey-builder__row-editor-actions">
+                      <val-button
+                        [props]="{
+                          token: 'q-done-' + row.id,
+                          text: t('doneEditing'),
+                          color: 'dark',
+                          fill: 'solid',
+                          shape: 'round',
+                          size: 'default',
+                          type: 'button',
+                          state: 'ENABLED',
+                        }"
+                        (onClick)="editor.submit()"
+                      />
+                    </div>
+                  </div>
+                }
               </div>
             }
-          </div>
+          </section>
+          }
         }
 
-        <val-button
+      <val-button
           [props]="{
             token: 'survey-builder-add-question',
             text: t('addQuestion'),
@@ -42685,12 +42941,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             state: 'ENABLED',
             icon: { name: 'add-outline', slot: 'start' },
           }"
-          (onClick)="addQuestion()"
+          (onClick)="addQuestion(questionGroups()[0]?.id)"
         />
       </div>
       }
 
-      @if (showWizardSection(3)) {
+      @if (showWizardSection(reviewStep())) {
         <section class="survey-builder__review">
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42713,7 +42969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           @if (wizardStep() > 0) {
             <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
           }
-          @if (wizardStep() < wizardSteps.length - 1) {
+          @if (wizardStep() < wizardSteps().length - 1) {
             <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
           } @else {
             <val-button [props]="saveProps()" (onClick)="save()" />
@@ -42723,7 +42979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <val-button [props]="saveProps()" (onClick)="save()" />
       }
     </div>
-  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
+  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], saved: [{
@@ -51175,6 +51431,39 @@ class DataTableComponent {
     get visibleColumns() {
         return this._visibleColumns;
     }
+    get mobileCardLayout() {
+        return this.props.mobileCardLayout || {};
+    }
+    get mobileCardLayoutActive() {
+        return Object.keys(this.mobileCardLayout).length > 0;
+    }
+    get mobileCardPrimaryColumns() {
+        return this.mobileCardLayout.primary ? this.resolveMobileCardColumns(this.mobileCardLayout.primary) : [];
+    }
+    get mobileCardSecondaryColumns() {
+        return this.mobileCardLayout.secondary ? this.resolveMobileCardColumns(this.mobileCardLayout.secondary) : [];
+    }
+    get mobileCardMetaColumns() {
+        return this.resolveMobileCardColumns(this.mobileCardLayout.meta);
+    }
+    get mobileCardStatusColumns() {
+        return this.resolveMobileCardColumns(this.mobileCardLayout.status);
+    }
+    get mobileCardAdditionalColumns() {
+        if (this.mobileCardLayoutActive && this.mobileCardLayout.showUnmappedColumns === false) {
+            return [];
+        }
+        const mapped = new Set([
+            ...this.mobileCardPrimaryColumns.map(c => c.key),
+            ...this.mobileCardSecondaryColumns.map(c => c.key),
+            ...this.mobileCardMetaColumns.map(c => c.key),
+            ...this.mobileCardStatusColumns.map(c => c.key),
+        ]);
+        if (mapped.size === 0) {
+            return this.visibleColumns;
+        }
+        return this.visibleColumns.filter(column => !mapped.has(column.key));
+    }
     get totalColumns() {
         let count = this.visibleColumns.length;
         if (this.props.showSelectionColumn)
@@ -51276,6 +51565,21 @@ class DataTableComponent {
             return 'none';
         return this.currentSort.direction === 'asc' ? 'ascending' : 'descending';
     }
+    getMobileCardFieldAriaLabel(column, row) {
+        const value = this.getCellValue(row, column);
+        const textValue = value === null || value === undefined ? '' : `${value}`;
+        return textValue ? `${column.label}: ${textValue}` : column.label;
+    }
+    resolveMobileCardColumns(keys) {
+        if (!keys)
+            return [];
+        const orderedKeys = Array.isArray(keys) ? keys : [keys];
+        const columnByKey = new Map(this.visibleColumns.map(column => [column.key, column]));
+        return orderedKeys
+            .map(key => columnByKey.get(key))
+            .filter((column) => Boolean(column))
+            .filter((column, index, list) => list.findIndex(c => c.key === column.key) === index);
+    }
     getRowNumber(index) {
         const start = this.props.rowNumberStart ?? 1;
         if (this.props.pagination) {
@@ -51662,22 +51966,139 @@ class DataTableComponent {
 
                   <!-- Card body with fields -->
                   <div class="card-body">
-                    @for (column of visibleColumns; track column.key) {
-                      <div class="card-field">
-                        <span class="card-field__label">{{ column.label }}</span>
-                        <span class="card-field__value">
-                          @if (column.cellTemplate) {
-                            <ng-container
-                              *ngTemplateOutlet="
-                                column.cellTemplate;
-                                context: { row, column, value: getCellValue(row, column) }
-                              "
-                            ></ng-container>
-                          } @else {
-                            {{ getFormattedValue(row, column) }}
-                          }
-                        </span>
-                      </div>
+                    @if (mobileCardLayoutActive) {
+                      @if (mobileCardPrimaryColumns.length) {
+                        @for (column of mobileCardPrimaryColumns; track column.key) {
+                          <div
+                            class="card-field card-field--primary"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardSecondaryColumns.length) {
+                        @for (column of mobileCardSecondaryColumns; track column.key) {
+                          <div
+                            class="card-field card-field--secondary"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardMetaColumns.length) {
+                        @for (column of mobileCardMetaColumns; track column.key) {
+                          <div
+                            class="card-field card-field--meta"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardStatusColumns.length) {
+                        @for (column of mobileCardStatusColumns; track column.key) {
+                          <div
+                            class="card-field card-field--status"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardAdditionalColumns.length) {
+                        @for (column of mobileCardAdditionalColumns; track column.key) {
+                          <div
+                            class="card-field card-field--meta"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+                    } @else {
+                      @for (column of visibleColumns; track column.key) {
+                        <div class="card-field">
+                          <span class="card-field__label">{{ column.label }}</span>
+                          <span class="card-field__value">
+                            @if (column.cellTemplate) {
+                              <ng-container
+                                *ngTemplateOutlet="
+                                  column.cellTemplate;
+                                  context: { row, column, value: getCellValue(row, column) }
+                                "
+                              ></ng-container>
+                            } @else {
+                              {{ getFormattedValue(row, column) }}
+                            }
+                          </span>
+                        </div>
+                      }
                     }
                   </div>
 
@@ -51766,7 +52187,7 @@ class DataTableComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-selection ion-checkbox,.card-selection input[type=radio]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-field--primary .card-field__label{color:var(--dt-text-primary)}.card-field--primary .card-field__value{font-size:1rem;font-weight:600}.card-field--secondary .card-field__label,.card-field--status .card-field__label{color:var(--dt-text-muted)}.card-field--status .card-field__value{font-size:.8125rem;font-weight:600}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -52021,22 +52442,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
                   <!-- Card body with fields -->
                   <div class="card-body">
-                    @for (column of visibleColumns; track column.key) {
-                      <div class="card-field">
-                        <span class="card-field__label">{{ column.label }}</span>
-                        <span class="card-field__value">
-                          @if (column.cellTemplate) {
-                            <ng-container
-                              *ngTemplateOutlet="
-                                column.cellTemplate;
-                                context: { row, column, value: getCellValue(row, column) }
-                              "
-                            ></ng-container>
-                          } @else {
-                            {{ getFormattedValue(row, column) }}
-                          }
-                        </span>
-                      </div>
+                    @if (mobileCardLayoutActive) {
+                      @if (mobileCardPrimaryColumns.length) {
+                        @for (column of mobileCardPrimaryColumns; track column.key) {
+                          <div
+                            class="card-field card-field--primary"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardSecondaryColumns.length) {
+                        @for (column of mobileCardSecondaryColumns; track column.key) {
+                          <div
+                            class="card-field card-field--secondary"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardMetaColumns.length) {
+                        @for (column of mobileCardMetaColumns; track column.key) {
+                          <div
+                            class="card-field card-field--meta"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardStatusColumns.length) {
+                        @for (column of mobileCardStatusColumns; track column.key) {
+                          <div
+                            class="card-field card-field--status"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+
+                      @if (mobileCardAdditionalColumns.length) {
+                        @for (column of mobileCardAdditionalColumns; track column.key) {
+                          <div
+                            class="card-field card-field--meta"
+                            [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
+                          >
+                            <span class="card-field__label">{{ column.label }}</span>
+                            <span class="card-field__value">
+                              @if (column.cellTemplate) {
+                                <ng-container
+                                  *ngTemplateOutlet="
+                                    column.cellTemplate;
+                                    context: { row, column, value: getCellValue(row, column) }
+                                  "
+                                ></ng-container>
+                              } @else {
+                                {{ getFormattedValue(row, column) }}
+                              }
+                            </span>
+                          </div>
+                        }
+                      }
+                    } @else {
+                      @for (column of visibleColumns; track column.key) {
+                        <div class="card-field">
+                          <span class="card-field__label">{{ column.label }}</span>
+                          <span class="card-field__value">
+                            @if (column.cellTemplate) {
+                              <ng-container
+                                *ngTemplateOutlet="
+                                  column.cellTemplate;
+                                  context: { row, column, value: getCellValue(row, column) }
+                                "
+                              ></ng-container>
+                            } @else {
+                              {{ getFormattedValue(row, column) }}
+                            }
+                          </span>
+                        </div>
+                      }
                     }
                   </div>
 
@@ -52125,7 +52663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
     </div>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-selection ion-checkbox,.card-selection input[type=radio]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-field--primary .card-field__label{color:var(--dt-text-primary)}.card-field--primary .card-field__value{font-size:1rem;font-weight:600}.card-field--secondary .card-field__label,.card-field--status .card-field__label{color:var(--dt-text-muted)}.card-field--status .card-field__value{font-size:.8125rem;font-weight:600}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], rowClick: [{