tin-spa 20.14.21 → 20.14.22

package/fesm2022/tin-spa.mjs

@@ -1966,6 +1966,7 @@ class OfflineService {
             this.registered$.next(true);
         this.registerReads(config, entry);
         this.registerLookups(config.formConfig, entry);
+        this.registerButtonLookups(config.buttons, entry); // Added: the two-step-create dialog's form lives on a BUTTON, not on config.formConfig — see below
         this.startSync();
         return entry;
     }
@@ -2035,6 +2036,33 @@ class OfflineService {
                 this.registerLookups(field.detailsConfig.formConfig, entry, depth + 1);
         });
     }
+    // Added: the TWO-STEP CREATE gap. CLAUDE.md's documented pattern (Invoice, Sales/Purchase Order, Requisition,
+    // Production Recipe/Order, Trip, Rental, Bundle/Check Template, Checklist, Alloc Template — 12 entities) puts the
+    // real create form on `button.detailsConfig.formConfig`, NOT on `tableConfig.formConfig`. registerLookups only ever
+    // walked the latter, so those forms' selects were never in the read seam: the urls were fetched online and thrown
+    // away, and offline the dialog opened with every dropdown empty. Where a select is `required` that is not a
+    // degraded form, it is an UNSUBMITTABLE one — the write queue behind it was unreachable from the UI.
+    // (Observed, WS-1 trips/loads: opening Shift's trip-create dialog ONLINE cached vehicles/trailers/drivers — the
+    // three the TABLE form declares — and not triptemplates or allocTemplates, which only the BUTTON form declares.)
+    //
+    // ⚠️ BOUNDED DELIBERATELY, and the boundary is not arbitrary — it is "does anything else already register this?":
+    //  • BUTTON detailsConfig forms ARE walked. A dialog form is not a spa-table; nothing else ever registers it, so
+    //    if this does not, nothing does.
+    //  • detailsConfig.tableConfigs are NOT walked. A nested tab renders through <spa-table> (tabs.component.html),
+    //    so its TableComponent calls offline.register() itself and registers its own reads AND its own lookups under
+    //    its OWN entity, cacheLookups allowlist and cacheRows. Walking them here would re-register another entity's
+    //    lookups under THIS entity's allowlist — duplicate work, filtered by the wrong config.
+    //  • detailsConfig.buttons are NOT walked, and neither are column detailsConfigs: one level of button is what the
+    //    documented pattern needs, and each extra level multiplies the walk for configs that share dialogs anyway.
+    // Depth inside each form is unchanged — a button form enters registerLookups at depth 0, exactly like the table's
+    // own form, so its fields' quick-add ("Add New") forms still register and nothing deeper does.
+    // VOLUME: this only makes a url MATCHABLE; a cache entry is written solely when that url is actually fetched while
+    // online (handleOfflineRead), so a registered-but-never-opened dialog costs one Map entry and no storage. Buttons
+    // per table are single digits, and cacheLookups === false / an explicit allowlist still filter every url here.
+    registerButtonLookups(buttons, entry) {
+        buttons?.forEach(b => { if (b.detailsConfig?.formConfig)
+            this.registerLookups(b.detailsConfig.formConfig, entry); });
+    }
     // Added: CACHE KEY DECISION — a paged read is cached under its BASE url, i.e. with `skip`/`take` stripped,
     // NOT under the full url. The paging window is a view parameter over one resource, not a different resource:
     // keying by the full url would mint an unbounded number of IndexedDB entries (take varies per fetch — see
@@ -2190,7 +2218,24 @@ class OfflineService {
         this.meta.put({ key: 'sentinel', value: Date.now() }).catch(() => { });
         return db;
     }
+    // Added: never write an entry that can never be read back. matchRead() is the SOLE read path
+    // (datalib.service.ts CallApi), so a url it does not match is unreachable the moment it is stored — the write
+    // silently succeeds, consumes the origin's storage quota, and leaves the store LOOKING populated while the UI
+    // refuses the view. That is worse than not caching it: it lies to the next person who dumps the store.
+    // How it happened (observed on Shift's Loads grid, WS-1): tileClicked REPLACES config.loadAction wholesale, and
+    // TableComponent.cachePagedWindow() then writes under the swapped url stamped with the TABLE's entity. Three of
+    // the four Loads tiles are same-entity so registerReads registered them; the fourth is `invoices/outstanding/x`,
+    // a FOREIGN entity the same-entity guard deliberately skips — so it was written and could never be served, seen
+    // offline as the blocking 'No connection' modal sitting on top of its own unreachable cached rows.
+    // The fix is the SMALL one on purpose: making it matchable instead would mean this table registering an entity it
+    // does not own, under another entity's cacheLookups/cacheRows and with none of that entity's queue semantics —
+    // a cross-entity read-caching feature, not a bug fix, and the same crossing registerReads' guard already declined.
+    // Guard, not silent tidy: every legitimate writer still passes. handleOfflineRead only calls this after matchRead
+    // matched (and cacheKey() only strips paging, which matchRead's own base-url fallback already tolerates);
+    // cachePagedWindow/applyRealTimeData write the table's registered url, or a per-parent/tile url a prefix covers.
     putRead(url, entity, data, maxRows) {
+        if (!this.matchRead(url))
+            return Promise.resolve(null);
         this.ensureOpen();
         let stored = data;
         if (Array.isArray(data))
@@ -11638,11 +11683,11 @@ class SetupGuideComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SetupGuideComponent, isStandalone: false, selector: "spa-setup-guide", ngImport: i0, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ChecklistComponent, selector: "spa-checklist", inputs: ["config", "itemTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SetupGuideComponent, isStandalone: false, selector: "spa-setup-guide", ngImport: i0, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ChecklistComponent, selector: "spa-checklist", inputs: ["config", "itemTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupGuideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-setup-guide', standalone: false, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'spa-setup-guide', standalone: false, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}}\n"] }]
         }] });
 
 // Quiet Loading — perceived-progress engine (FSD D1).