principal-dashboard-lib-v2 0.0.37 → 0.0.39

package/bundles/principal-dashboard-lib-v2.umd.js

@@ -902,6 +902,9 @@
         userSelectedDate: [{ type: i0.Output }]
     };
 
+    // Generated by scripts/lib-version.js from the library's package.json. Do not edit by hand.
+    var LIB_VERSION = '0.0.39';
+
     var ChartheaderComponent = /** @class */ (function () {
         function ChartheaderComponent(pdService) {
             this.pdService = pdService;
@@ -913,7 +916,8 @@
             this.isInsights = false;
         }
         ChartheaderComponent.prototype.ngOnInit = function () {
-            this.libVersion = "0.0.37";
+            // set from the library's package.json by scripts/lib-version.js
+            this.libVersion = LIB_VERSION;
             // this.myIcon = document.getElementById('myIconImg');
             // this.changeChatType() 
         };
@@ -3542,7 +3546,8 @@
                 var first = this.currentTimeFrameUserArray[0] || {};
                 return [
                     { label: 'Subject', value: first.subject || '—', icon: 'subject', tone: 'lime' },
-                    { label: 'Room', value: first.roomName || first.room || '—', sub: first.roomName ? first.room : '', icon: 'room', tone: 'sand' },
+                    // room name when it has one, otherwise the IP
+                    { label: 'Room', value: first.roomName || first.room || '—', icon: 'room', tone: 'sand' },
                     { label: 'Start', value: first.startTime || '—', icon: 'start', tone: 'sky' },
                     { label: 'End', value: first.endtime || '—', icon: 'end', tone: 'sky' },
                     { label: 'Total time', value: first.totalDuration || '—', icon: 'clock', tone: 'mint' },
@@ -4258,6 +4263,34 @@
                 return match[1];
             return label.split(/\s+/).filter(function (w) { return w; }).map(function (w) { return w.charAt(0).toUpperCase(); }).join('').slice(0, 4);
         };
+        Object.defineProperty(InsightsComponent.prototype, "activityNote", {
+            // ---------- notes under charts: one takeaway from today's data
+            get: function () {
+                if (!this.hourly.length)
+                    return '';
+                var peak = this.hourly.reduce(function (a, b) { return (b.value > a.value ? b : a); });
+                var quiet = this.hourly.reduce(function (a, b) { return (b.value < a.value ? b : a); });
+                return "Busiest at " + peak.label + " with " + peak.value + " teachers in class; quietest at " + quiet.label + " with " + quiet.value + ".";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(InsightsComponent.prototype, "chaptersNote", {
+            get: function () {
+                var top = this.chapters[0];
+                return top ? "Most used: " + top.label + (top.sub ? ' (' + top.sub + ')' : '') + ", " + top.display + "." : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(InsightsComponent.prototype, "subjectNote", {
+            get: function () {
+                var top = this.subjectDonut.segments.find(function (s) { return s.label !== 'Other'; });
+                return top ? top.label + " took the largest share of teaching time today (" + top.percent + "%, " + top.display + ")." : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
         // every number inside a value ("42 / 77", "48h 53m") rises from 0 together
         InsightsComponent.prototype.countUp = function () {
             var _this = this;
@@ -4488,8 +4521,8 @@
     InsightsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-insights',
-                    template: "<div class=\"in-page\">\n  <!-- title and headline numbers stay in view while the cards below scroll -->\n  <div class=\"in-sticky\">\n    <div class=\"in-heading\">\n      <div class=\"in-heading-text\">{{ schoolName }}<span *ngIf=\"schoolName && dayLabel\"> \u00B7 </span>{{ dayLabel }}</div>\n      <button\n        type=\"button\"\n        class=\"in-pdf-btn\"\n        *ngIf=\"hasSessions\"\n        data-html2canvas-ignore=\"true\"\n        [disabled]=\"isExporting\"\n        (click)=\"downloadPdf()\"\n      >{{ isExporting ? 'Preparing PDF\u2026' : 'Download PDF' }}</button>\n    </div>\n\n    <div class=\"in-kpis\" *ngIf=\"hasSessions\">\n      <div class=\"in-kpi in-anim\" *ngFor=\"let kpi of kpis; let i = index; let last = last\" [class.in-kpi-accent]=\"last\" [style.animation-delay.ms]=\"i * 60\">\n        <span class=\"in-kpi-icon\">\n          <svg viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M2.5 7.5l5-5M3.5 2.5h4v4\" /></svg>\n        </span>\n        <div class=\"in-kpi-label\">{{ kpi.label }}</div>\n        <div class=\"in-kpi-value\">{{ kpi.shown || kpi.value }}</div>\n        <div class=\"in-kpi-hint\">{{ kpi.hint }}</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"in-empty\" *ngIf=\"!hasSessions\">No usage was recorded on this day.</div>\n\n  <ng-container *ngIf=\"hasSessions\">\n\n    <!-- primary: what to act on, and who is using the system -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"120\" class=\"in-anim in-card in-wide in-primary\">\n        <div class=\"in-card-title\">Needs Attention</div>\n        <div class=\"in-card-sub\">Who and what to follow up on today</div>\n        <div class=\"in-attention\">\n          <div class=\"in-attention-item in-anim-row\" *ngFor=\"let a of attention; let i = index\" [style.animation-delay.ms]=\"300 + i * 80\">\n            <div class=\"in-attention-value\" [class.in-zero]=\"a.value === 0\">{{ a.shown != null ? a.shown : a.value }}</div>\n            <div>\n              <div class=\"in-attention-label\">\n                <span class=\"in-inline-icon\" [ngSwitch]=\"a.icon\" aria-hidden=\"true\">\n                  <svg *ngSwitchCase=\"'teacher'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n                  <svg *ngSwitchCase=\"'room'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n                  <svg *ngSwitchCase=\"'clock'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 7v5l3 2\" /></svg>\n                  <svg *ngSwitchCase=\"'book'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z\" /><path d=\"M4 19a2 2 0 0 1 2-2h13\" /></svg>\n                </span>\n                {{ a.label }}\n              </div>\n              <div class=\"in-muted\">{{ a.hint }}</div>\n            </div>\n          </div>\n        </div>\n        <!-- who to follow up: big tiles that shrink to slim bars when the lists open below (accordion) -->\n        <div class=\"in-follow\" [class.in-follow-compact]=\"detailsOpen\">\n          <button type=\"button\" class=\"in-follow-tile in-follow-teachers\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[0]?.shown != null ? attention[0].shown : inactiveTeachers.length }}</span>\n            <span class=\"in-follow-label-big\">Teachers Not Active</span>\n            <span class=\"in-muted\">of {{ eligibleCount }} eligible teachers</span>\n            <span class=\"in-avatars\" *ngIf=\"inactiveTeachers.length\">\n              <span class=\"in-avatar\" *ngFor=\"let name of inactiveTeachers.slice(0, 7)\" [title]=\"name\">{{ initials(name) }}</span>\n              <span class=\"in-avatar in-avatar-more\" *ngIf=\"inactiveTeachers.length > 7\">+{{ inactiveTeachers.length - 7 }}</span>\n            </span>\n          </button>\n          <button type=\"button\" class=\"in-follow-tile in-follow-rooms\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[1]?.shown != null ? attention[1].shown : idleRooms.length }}</span>\n            <span class=\"in-follow-label-big\">Classrooms Not Used</span>\n            <span class=\"in-muted\">of {{ classroomCount }} installed classrooms</span>\n            <span class=\"in-room-chips\" *ngIf=\"idleRooms.length\">\n              <span class=\"in-room-chip\" *ngFor=\"let room of idleRooms.slice(0, 6)\">{{ room }}</span>\n              <span class=\"in-room-chip in-avatar-more\" *ngIf=\"idleRooms.length > 6\">+{{ idleRooms.length - 6 }}</span>\n            </span>\n          </button>\n        </div>\n        <div class=\"in-follow-details\" id=\"in-follow-details\" *ngIf=\"detailsOpen\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n        <div class=\"in-follow-foot\" data-html2canvas-ignore=\"true\">\n          <button type=\"button\" class=\"in-link-btn\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            {{ detailsOpen ? 'Hide details' : 'Show details' }}\n            <span class=\"in-link-chevron\" [class.in-link-chevron-up]=\"detailsOpen\" aria-hidden=\"true\"></span>\n          </button>\n        </div>\n        <!-- the PDF can't open a modal, so it prints the full lists here instead -->\n        <div class=\"in-print-only\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"180\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Active Teachers</div>\n        <div class=\"in-card-sub\">Time in class, overlapping sessions counted once</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: topTeachers, color: '#8BC34A' }\"></ng-container>\n      </section>\n    </div>\n\n    <!-- supporting detail -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"240\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Activity Through the Day</div>\n        <div class=\"in-card-sub\">Number of teachers in a session during each hour</div>\n        <div class=\"in-hours\">\n          <div class=\"in-hour\" *ngFor=\"let h of hourly; let i = index\" [title]=\"h.label + ': ' + h.value + ' teachers'\">\n            <div class=\"in-hour-value\">\n              <svg class=\"in-hour-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n              {{ h.value }}\n            </div>\n            <div class=\"in-hour-track\">\n              <div class=\"in-hour-bar\" [class.in-peak]=\"h.peak\" [style.height.%]=\"h.percent\" [style.background-color]=\"h.color\" [style.animation-delay.ms]=\"250 + i * 50\"></div>\n            </div>\n            <div class=\"in-hour-label\">{{ h.label }}</div>\n          </div>\n        </div>\n        <div class=\"in-util-legend\">\n          <span class=\"in-muted\">Low</span>\n          <span class=\"in-util-scale\"></span>\n          <span class=\"in-muted\">High</span>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"300\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Used Chapters</div>\n        <div class=\"in-card-sub\">Chapters and their topics used today</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: chapters, color: '#f4a98a' }\"></ng-container>\n      </section>\n      <section [style.animation-delay.ms]=\"360\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Content Utilisation</div>\n        <div class=\"in-card-sub\">What teachers used in class</div>\n        <div class=\"in-stack\">\n          <div\n            class=\"in-stack-part\"\n            *ngFor=\"let c of contentMix; let i = index\"\n            [style.animation-delay.ms]=\"300 + i * 60\"\n            [style.width.%]=\"c.percent\"\n            [style.background-color]=\"c.color\"\n            [title]=\"c.label + ': ' + c.display\"\n          ></div>\n        </div>\n        <div class=\"in-legend\">\n          <div class=\"in-legend-item\" *ngFor=\"let c of contentMix\">\n            <span class=\"in-dot\" [style.background-color]=\"c.color\"></span>\n            <span class=\"in-legend-label\">{{ c.label }}</span>\n            <span class=\"in-legend-value\">{{ c.display }}</span>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- what was taught, and where -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"420\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Subject</div>\n        <div class=\"in-card-sub\">Share of session time by subject</div>\n        <div class=\"in-donut-wrap\">\n          <svg class=\"in-donut\" viewBox=\"0 0 140 140\" role=\"img\" aria-label=\"Time by subject\">\n            <circle cx=\"70\" cy=\"70\" [attr.r]=\"donutRadius\" class=\"in-donut-track\"></circle>\n            <circle\n              *ngFor=\"let s of subjectDonut.segments; let i = index\"\n              class=\"in-donut-seg\"\n              cx=\"70\"\n              cy=\"70\"\n              [attr.r]=\"donutRadius\"\n              [attr.stroke]=\"s.color\"\n              [attr.stroke-dasharray]=\"s.dash\"\n              [attr.stroke-dashoffset]=\"s.offset\"\n              [style.animation-delay.ms]=\"300 + i * 90\"\n            >\n              <title>{{ s.label }}: {{ s.display }} ({{ s.percent }}%)</title>\n            </circle>\n          </svg>\n          <div class=\"in-donut-center\">\n            <div class=\"in-donut-total\">{{ subjectDonut.total }}</div>\n            <div class=\"in-muted\" title=\"Session time where content was used\">with content</div>\n          </div>\n        </div>\n        <div class=\"in-legend in-legend-compact\">\n          <div class=\"in-legend-item\" *ngFor=\"let s of subjectDonut.segments\">\n            <span class=\"in-dot\" [style.background-color]=\"s.color\"></span>\n            <span class=\"in-legend-label\" [title]=\"s.label\">{{ s.label }}</span>\n            <span class=\"in-legend-value\">{{ s.percent }}%</span>\n          </div>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"480\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Classroom Usage</div>\n        <div class=\"in-card-sub\">Each classroom's utilisation by time</div>\n        <div class=\"in-tiles\">\n          <div\n            class=\"in-tile\"\n            *ngFor=\"let r of roomTiles; let i = index\"\n            [class.in-tile-idle]=\"r.idle\"\n            [class.in-tile-dark]=\"r.dark\"\n            [style.grid-column]=\"'span ' + r.span\"\n            [style.background-color]=\"r.shade\"\n            [style.animation-delay.ms]=\"300 + i * 15\"\n            [title]=\"r.label + ': ' + r.display\"\n          >\n            <span class=\"in-tile-name\">\n              <svg class=\"in-tile-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8\" /></svg>{{ r.label }}\n            </span>\n            <span class=\"in-tile-value\">{{ r.share }}%</span>\n          </div>\n        </div>\n        <div class=\"in-tiles-legend\">\n          <span class=\"in-tile in-tile-key in-tile-idle\"></span><span class=\"in-muted\">0% / not used</span>\n          <span class=\"in-scale\"></span><span class=\"in-muted\">Low \u2192 high utilisation</span>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"540\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Class</div>\n        <div class=\"in-card-sub\">Session time per class</div>\n        <div class=\"in-columns\">\n          <div class=\"in-column\" *ngFor=\"let g of gradeColumns; let i = index\" [title]=\"g.label + ': ' + g.display\">\n            <div class=\"in-column-track\">\n              <div class=\"in-column-bar\" [style.height.%]=\"g.percent\" [style.animation-delay.ms]=\"300 + i * 50\"></div>\n            </div>\n            <div class=\"in-column-label\">{{ g.short }}</div>\n          </div>\n        </div>\n        <div class=\"in-columns-caption\">Class</div>\n        <div class=\"in-column-top\" *ngIf=\"gradeColumns.length\">\n          <span class=\"in-muted\">Most time</span>\n          <ng-container *ngFor=\"let g of gradeColumns\">\n            <strong *ngIf=\"g.percent === 100\">{{ g.label }} \u00B7 {{ g.display }}</strong>\n          </ng-container>\n        </div>\n      </section>\n    </div>\n  </ng-container>\n\n</div>\n\n<ng-template #followLists>\n  <div class=\"in-follow-cols\">\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Teachers Not Active <span class=\"in-count\">{{ inactiveTeachers.length }}</span></div>\n      <ul class=\"in-name-list\" *ngIf=\"inactiveTeachers.length\">\n        <li *ngFor=\"let name of inactiveTeachers\">{{ name }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"inactiveTeachers.length === 0\">Every eligible teacher used the system today.</span>\n    </div>\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Classrooms Not Used <span class=\"in-count\">{{ idleRooms.length }}</span></div>\n      <ul class=\"in-name-list in-room-list\" *ngIf=\"idleRooms.length\">\n        <li *ngFor=\"let room of idleRooms\">{{ room }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"idleRooms.length === 0\">Every classroom was used today.</span>\n    </div>\n  </div>\n</ng-template>\n\n<!-- each section passes its own bar colour so neighbouring cards are easy to tell apart -->\n<ng-template #bars let-items let-color=\"color\">\n  <div class=\"in-bars\">\n    <div class=\"in-muted\" *ngIf=\"items.length === 0\">No data</div>\n    <div class=\"in-bar-row\" *ngFor=\"let item of items; let i = index\">\n      <div class=\"in-bar-head\">\n        <span class=\"in-bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n        <span class=\"in-bar-value\">{{ item.display }}</span>\n      </div>\n      <div class=\"in-bar-sub\" *ngIf=\"item.sub\">{{ item.sub }}</div>\n      <div class=\"in-bar-track\"><div class=\"in-bar-fill\" [style.width.%]=\"item.percent\" [style.background-color]=\"color\" [style.animation-delay.ms]=\"300 + i * 60\"></div></div>\n    </div>\n  </div>\n</ng-template>\n",
-                    styles: ["@import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap\");.in-page{font-family:Poppins,Segoe UI,Arial,sans-serif;font-size:13px;color:#1e2437;padding:0 20px 24px;box-sizing:border-box;text-align:left;overflow-y:auto;background:#eef2f9}.in-sticky{position:sticky;top:0;z-index:2;margin:0 -20px 16px;padding:16px 20px;background:#eef2f9;box-shadow:0 6px 12px -10px rgba(30,36,55,.25)}.in-heading{position:relative;margin-bottom:14px;min-height:34px;display:flex;align-items:center;justify-content:center}.in-heading-text{font-size:17px;font-weight:600;color:#1e2437;text-align:center;padding:0 150px}.in-pdf-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);height:34px;padding:0 16px;border:none;border-radius:10px;background:#5b84ec;color:#fff;font:500 13px Poppins,Segoe UI,Arial,sans-serif;cursor:pointer;box-shadow:0 4px 10px rgba(91,132,236,.22)}.in-pdf-btn:hover:not([disabled]){background:#406fe9}.in-pdf-btn[disabled]{cursor:progress;background:#b3c6f5;box-shadow:none}.in-page.in-exporting{height:auto!important;overflow:visible}.in-page.in-exporting *,.in-page.in-exporting :after,.in-page.in-exporting :before{-webkit-animation:none!important;animation:none!important}.in-page.in-exporting .in-sticky{position:static;box-shadow:none}.in-page.in-exporting .in-chips{max-height:none;overflow:visible}.in-page.in-exporting .in-print-only{display:block}.in-page.in-exporting .in-follow-details{display:none}.in-card-sub,.in-muted{font-size:12px;color:#8a93a6}.in-empty{padding:40px;text-align:center;color:#8a93a6}.in-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.in-kpi{position:relative;min-width:0;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(30,36,55,.06);color:#1e2437;box-sizing:border-box}.in-kpi.in-kpi-accent{background:#5b84ec;color:#fff}.in-kpi.in-kpi-accent .in-kpi-hint,.in-kpi.in-kpi-accent .in-kpi-label{color:hsla(0,0%,100%,.85)}.in-kpi.in-kpi-accent .in-kpi-icon{border-color:#fff;color:#fff}.in-kpi-icon{position:absolute;top:12px;right:12px;width:20px;height:20px;border:2px solid #1e2437;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#1e2437}.in-kpi-icon svg{width:10px;height:10px}.in-kpi-label{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:500;color:rgba(30,36,55,.75)}.in-kpi-value{white-space:nowrap;font-size:22px;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}.in-kpi-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:rgba(30,36,55,.7)}.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.in-grid+.in-grid{margin-top:16px}.in-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(30,36,55,.06);padding:18px 20px;min-width:0;box-sizing:border-box}.in-card,.in-wide{display:flex;flex-direction:column}.in-wide{grid-column:span 2}.in-card-title{font-size:16px;font-weight:600;color:#1e2437}.in-card-sub{margin:2px 0 16px}.in-count{display:inline-block;min-width:22px;padding:0 8px;margin-left:6px;border-radius:11px;background:#fff6de;color:#a46b00;font-size:12px;font-weight:600;text-align:center;line-height:22px;vertical-align:middle}.in-hours{flex:1 1 auto;display:flex;align-items:stretch;gap:4px;min-height:200px;max-height:320px}.in-hour{flex:1 1 0;flex-direction:column;min-width:0}.in-hour,.in-hour-value{display:flex;align-items:center}.in-hour-value{gap:3px;font-size:12px;font-weight:600;color:#1e2437;margin-bottom:6px;white-space:nowrap}.in-hour-icon{width:12px;height:12px;color:#8a93a6;flex:0 0 auto}.in-hour-track{flex:1 1 auto;max-width:44px;display:flex;align-items:flex-end;background:#f1f4f9;overflow:hidden}.in-hour-bar,.in-hour-track{width:100%;border-radius:999px}.in-hour-bar{min-height:6px;background:#fbe0a0}.in-util-legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.in-util-scale{width:90px;height:8px;border-radius:999px;background:linear-gradient(90deg,#f38e86,#f5c447,#92c15c)}.in-hour-label{margin-top:8px;font-size:10px;color:#8a93a6;white-space:nowrap}.in-bars{display:flex;flex-direction:column;gap:12px}.in-bar-head{display:flex;justify-content:space-between;gap:12px}.in-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.in-bar-value{flex:0 0 auto;color:#1e2437;font-weight:600;font-variant-numeric:tabular-nums}.in-bar-sub{font-size:11px;color:#8a93a6}.in-bar-track{height:8px;margin-top:6px;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-bar-fill{height:100%;border-radius:999px;background:#5b84ec}.in-donut-wrap{position:relative;width:150px;height:150px;margin:0 auto 14px}.in-donut{width:100%;height:100%;transform:rotate(-90deg)}.in-donut circle{fill:none;stroke-width:18}.in-donut-track{stroke:#f1f4f9}.in-donut-seg{stroke-linecap:butt;transition:stroke-width .15s;-webkit-animation:in-draw 1s cubic-bezier(.22,1,.36,1) both;animation:in-draw 1s cubic-bezier(.22,1,.36,1) both}.in-donut-seg:hover{stroke-width:22}@-webkit-keyframes in-draw{0%{stroke-dasharray:0 400}}@keyframes in-draw{0%{stroke-dasharray:0 400}}.in-donut-center{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.in-donut-total{font-size:18px;font-weight:700}.in-legend-compact{gap:6px}.in-legend-compact .in-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.in-columns{flex:1 1 auto;display:flex;align-items:stretch;gap:5px;min-height:180px;max-height:340px}.in-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}.in-column-track{flex:1 1 auto;width:100%;max-width:22px;display:flex;align-items:flex-end;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-column-bar{width:100%;min-height:4px;border-radius:999px;background:#f3cb6c;-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}.in-column:hover .in-column-bar{background:#f0be46}.in-column-label{margin-top:6px;font-size:11px;font-weight:500;color:#8a93a6;white-space:nowrap}.in-columns-caption{text-align:center;font-size:11px;color:#8a93a6;margin-top:2px}.in-column-top{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff6de;display:flex;justify-content:space-between;gap:8px;font-size:12px}.in-tiles{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}.in-tile{height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#162b57;cursor:default;-webkit-animation:in-pop .4s ease-out both;animation:in-pop .4s ease-out both;transition:transform .12s}.in-tile:hover{transform:scale(1.06)}.in-tile.in-tile-dark{color:#fff}.in-tile.in-tile-idle{background:#f4f7fd;border:2px solid #162b57;color:#162b57}@-webkit-keyframes in-pop{0%{opacity:0;transform:scale(.7)}}@keyframes in-pop{0%{opacity:0;transform:scale(.7)}}.in-tile-icon{width:13px;height:13px;margin-right:4px;vertical-align:-1px}.in-tile-name{max-width:100%;padding:0 4px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}.in-tile-value{font-size:12px;font-weight:500;opacity:.85}.in-tiles-legend{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}.in-tiles-legend .in-tile-key{width:14px;height:14px;border-radius:4px;-webkit-animation:none;animation:none}.in-scale{width:46px;height:10px;margin-left:8px;border-radius:999px;background:linear-gradient(90deg,#eaf1fb,#162b57)}.in-primary .in-attention{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.in-primary .in-attention-item{gap:14px;padding:12px 14px}.in-primary .in-attention-value{flex:0 0 42px;height:42px;line-height:42px;border-radius:10px;background:#ef6a3a;color:#fff;font-size:16px}.in-primary .in-attention-value.in-zero{background:#8bc34a;color:#fff}.in-primary .in-attention-label{display:flex;align-items:center;gap:6px;font-size:14px}.in-primary .in-attention-item .in-muted{font-size:12px;margin-top:2px}.in-inline-icon{display:inline-flex;color:#ef6a3a}.in-inline-icon svg{width:16px;height:16px}.in-follow{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.in-follow-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:18px 20px;border:none;border-radius:32px;font:inherit;color:inherit;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s}.in-follow-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(30,36,55,.08)}.in-follow-teachers{background:#eaf0fd}.in-follow-teachers .in-follow-icon{color:#5b84ec}.in-follow-rooms{background:#eaf0fd}.in-follow-rooms .in-follow-icon{color:#5b84ec}.in-follow-icon{margin-bottom:6px;display:flex;align-items:center;justify-content:center}.in-follow-icon svg{width:40px;height:40px}.in-follow-number{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.in-follow-tile>.in-muted{font-size:15px;color:#1e2437}.in-follow-label-big{font-size:18px;font-weight:600}.in-avatars{flex-wrap:wrap;margin-top:12px;padding-left:8px}.in-avatar,.in-avatars{display:flex;justify-content:center}.in-avatar{width:34px;height:34px;margin-left:-6px;border-radius:50%;border:1.5px solid #5b84ec;background:#fff;color:#3f5fae;font-size:11px;font-weight:600;align-items:center;box-sizing:border-box}.in-avatar-more{background:#5b84ec;color:#fff}.in-room-chips{flex-wrap:wrap;gap:6px;margin-top:12px}.in-room-chip,.in-room-chips{display:flex;justify-content:center}.in-room-chip{min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1.5px solid #5b84ec;background:#fff;color:#5b84ec;font-size:12px;font-weight:600;align-items:center;box-sizing:border-box}.in-room-chip.in-avatar-more{background:#5b84ec;color:#fff}.in-follow-foot{display:flex;justify-content:flex-end;margin-top:10px}.in-link-btn{border:none;background:transparent;padding:6px 4px;font:600 13px Poppins,Segoe UI,Arial,sans-serif;color:#5b84ec;cursor:pointer}.in-link-btn:hover{text-decoration:underline}.in-print-only{display:none;margin-top:16px}.in-follow-compact{flex:none}.in-follow-compact .in-follow-tile{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 16px;text-align:left}.in-follow-compact .in-follow-icon{margin:0}.in-follow-compact .in-follow-icon svg{width:24px;height:24px}.in-follow-compact .in-follow-number{font-size:22px}.in-follow-compact .in-avatars,.in-follow-compact .in-follow-tile>.in-muted,.in-follow-compact .in-room-chips{display:none}.in-follow-details{flex:none;margin-top:12px;padding:14px 16px;border:1px solid #eef1f6;border-radius:12px;-webkit-animation:in-rise .3s ease-out both;animation:in-rise .3s ease-out both}.in-link-chevron{display:inline-block;width:6px;height:6px;margin-left:6px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px);transition:transform .2s}.in-link-chevron.in-link-chevron-up{transform:rotate(-135deg) translateY(-1px)}.in-follow-cols{display:grid;grid-template-columns:3fr 1fr;gap:24px}.in-follow-col{min-width:0}.in-follow-col+.in-follow-col{border-left:1px solid #e3e8f0;padding-left:24px}.in-follow-label{font-size:13px;font-weight:600;margin:2px 0 10px}.in-name-list{margin:0;padding:0;list-style:none;-moz-column-width:160px;column-width:160px;-moz-column-gap:20px;column-gap:20px}.in-name-list li{position:relative;padding:3px 0 3px 14px;-moz-column-break-inside:avoid;break-inside:avoid;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-name-list li:before{content:\"\";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#a9bffa}.in-room-list li:before{background:#fbe0a0}.in-attention{display:flex;flex-direction:column;gap:10px}.in-attention-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#f7f9fc}.in-attention-value{flex:0 0 44px;height:40px;line-height:40px;text-align:center;border-radius:10px;background:#fbe0a0;color:#1e2437;font-size:16px;font-weight:700}.in-attention-value.in-zero{background:#eaf0fd;color:#5b84ec}.in-attention-label{font-weight:600}.in-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#f1f4f9;margin-bottom:16px}.in-stack-part{height:100%;box-shadow:inset -2px 0 0 #fff}.in-legend{display:flex;flex-direction:column;gap:8px}.in-legend-item{display:flex;align-items:center;gap:10px}.in-dot{flex:0 0 auto;width:10px;height:10px;border-radius:3px}.in-legend-label{flex:1 1 auto}.in-legend-value{font-weight:600;color:#1e2437;font-variant-numeric:tabular-nums}.in-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:230px;overflow:auto}.in-chip{padding:5px 12px;border-radius:999px;background:#eaf0fd;color:#3f5fae;font-size:12px;font-weight:500}@-webkit-keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@-webkit-keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@-webkit-keyframes in-grow-width{0%{width:0}}@keyframes in-grow-width{0%{width:0}}@-webkit-keyframes in-grow-height{0%{height:0}}@keyframes in-grow-height{0%{height:0}}.in-anim{-webkit-animation:in-rise .5s cubic-bezier(.22,1,.36,1) both;animation:in-rise .5s cubic-bezier(.22,1,.36,1) both}.in-anim-row{-webkit-animation:in-fade-right .45s ease-out both;animation:in-fade-right .45s ease-out both}.in-bar-fill,.in-stack-part{-webkit-animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both;animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both}.in-hour-bar{-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}@media (prefers-reduced-motion:reduce){.in-anim,.in-anim-row,.in-bar-fill,.in-column-bar,.in-donut-seg,.in-hour-bar,.in-stack-part,.in-tile{-webkit-animation:none;animation:none}}@media (max-width:900px){.in-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1100px){.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid>.in-card:last-child:nth-child(odd),.in-wide+.in-card{grid-column:span 2}}@media (max-width:760px){.in-heading-text{padding:0;text-align:left;flex:1 1 auto}.in-pdf-btn{position:static;transform:none}.in-grid>.in-card:last-child:nth-child(odd),.in-wide,.in-wide+.in-card{grid-column:auto}.in-follow,.in-follow-cols,.in-primary .in-attention{grid-template-columns:1fr}.in-follow-col+.in-follow-col{border-left:none;padding-left:0;border-top:1px solid #e3e8f0;padding-top:16px}.in-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid{grid-template-columns:1fr}}"]
+                    template: "<div class=\"in-page\">\n  <!-- title and headline numbers stay in view while the cards below scroll -->\n  <div class=\"in-sticky\">\n    <div class=\"in-heading\">\n      <div class=\"in-heading-text\">{{ schoolName }}<span *ngIf=\"schoolName && dayLabel\"> \u00B7 </span>{{ dayLabel }}</div>\n      <button\n        type=\"button\"\n        class=\"in-pdf-btn\"\n        *ngIf=\"hasSessions\"\n        data-html2canvas-ignore=\"true\"\n        [disabled]=\"isExporting\"\n        (click)=\"downloadPdf()\"\n      >{{ isExporting ? 'Preparing PDF\u2026' : 'Download PDF' }}</button>\n    </div>\n\n    <div class=\"in-kpis\" *ngIf=\"hasSessions\">\n      <div class=\"in-kpi in-anim\" *ngFor=\"let kpi of kpis; let i = index; let last = last\" [class.in-kpi-accent]=\"last\" [style.animation-delay.ms]=\"i * 60\">\n        <span class=\"in-kpi-icon\">\n          <svg viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M2.5 7.5l5-5M3.5 2.5h4v4\" /></svg>\n        </span>\n        <div class=\"in-kpi-label\">{{ kpi.label }}</div>\n        <div class=\"in-kpi-value\">{{ kpi.shown || kpi.value }}</div>\n        <div class=\"in-kpi-hint\">{{ kpi.hint }}</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"in-empty\" *ngIf=\"!hasSessions\">No usage was recorded on this day.</div>\n\n  <ng-container *ngIf=\"hasSessions\">\n\n    <!-- primary: what to act on, and who is using the system -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"120\" class=\"in-anim in-card in-wide in-primary\">\n        <div class=\"in-card-title\">Needs Attention</div>\n        <div class=\"in-card-sub\">Who and what to follow up on today</div>\n        <div class=\"in-attention\">\n          <div class=\"in-attention-item in-anim-row\" *ngFor=\"let a of attention; let i = index\" [style.animation-delay.ms]=\"300 + i * 80\">\n            <div class=\"in-attention-value\" [class.in-zero]=\"a.value === 0\">{{ a.shown != null ? a.shown : a.value }}</div>\n            <div>\n              <div class=\"in-attention-label\">\n                <span class=\"in-inline-icon\" [ngSwitch]=\"a.icon\" aria-hidden=\"true\">\n                  <svg *ngSwitchCase=\"'teacher'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n                  <svg *ngSwitchCase=\"'room'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n                  <svg *ngSwitchCase=\"'clock'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 7v5l3 2\" /></svg>\n                  <svg *ngSwitchCase=\"'book'\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z\" /><path d=\"M4 19a2 2 0 0 1 2-2h13\" /></svg>\n                </span>\n                {{ a.label }}\n              </div>\n              <div class=\"in-muted\">{{ a.hint }}</div>\n            </div>\n          </div>\n        </div>\n        <!-- who to follow up: big tiles that shrink to slim bars when the lists open below (accordion) -->\n        <div class=\"in-follow\" [class.in-follow-compact]=\"detailsOpen\">\n          <button type=\"button\" class=\"in-follow-tile in-follow-teachers\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[0]?.shown != null ? attention[0].shown : inactiveTeachers.length }}</span>\n            <span class=\"in-follow-label-big\">Teachers Not Active</span>\n            <span class=\"in-muted\">of {{ eligibleCount }} eligible teachers</span>\n            <span class=\"in-avatars\" *ngIf=\"inactiveTeachers.length\">\n              <span class=\"in-avatar\" *ngFor=\"let name of inactiveTeachers.slice(0, 7)\" [title]=\"name\">{{ initials(name) }}</span>\n              <span class=\"in-avatar in-avatar-more\" *ngIf=\"inactiveTeachers.length > 7\">+{{ inactiveTeachers.length - 7 }}</span>\n            </span>\n          </button>\n          <button type=\"button\" class=\"in-follow-tile in-follow-rooms\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            <span class=\"in-follow-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 9h6\" /></svg>\n            </span>\n            <span class=\"in-follow-number\">{{ attention[1]?.shown != null ? attention[1].shown : idleRooms.length }}</span>\n            <span class=\"in-follow-label-big\">Classrooms Not Used</span>\n            <span class=\"in-muted\">of {{ classroomCount }} installed classrooms</span>\n            <span class=\"in-room-chips\" *ngIf=\"idleRooms.length\">\n              <span class=\"in-room-chip\" *ngFor=\"let room of idleRooms.slice(0, 6)\">{{ room }}</span>\n              <span class=\"in-room-chip in-avatar-more\" *ngIf=\"idleRooms.length > 6\">+{{ idleRooms.length - 6 }}</span>\n            </span>\n          </button>\n        </div>\n        <div class=\"in-follow-details\" id=\"in-follow-details\" *ngIf=\"detailsOpen\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n        <div class=\"in-follow-foot\" data-html2canvas-ignore=\"true\">\n          <button type=\"button\" class=\"in-link-btn\" [attr.aria-expanded]=\"detailsOpen\" aria-controls=\"in-follow-details\" (click)=\"detailsOpen = !detailsOpen\">\n            {{ detailsOpen ? 'Hide details' : 'Show details' }}\n            <span class=\"in-link-chevron\" [class.in-link-chevron-up]=\"detailsOpen\" aria-hidden=\"true\"></span>\n          </button>\n        </div>\n        <!-- the PDF can't open a modal, so it prints the full lists here instead -->\n        <div class=\"in-print-only\">\n          <ng-container *ngTemplateOutlet=\"followLists\"></ng-container>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"180\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Active Teachers</div>\n        <div class=\"in-card-sub\">Time in class, overlapping sessions counted once</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: topTeachers, color: '#8BC34A' }\"></ng-container>\n      </section>\n    </div>\n\n    <!-- supporting detail -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"240\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Activity Through the Day</div>\n        <div class=\"in-card-sub\">Number of teachers in a session during each hour</div>\n        <div class=\"in-hours\">\n          <div class=\"in-hour\" *ngFor=\"let h of hourly; let i = index\" [title]=\"h.label + ': ' + h.value + ' teachers'\">\n            <div class=\"in-hour-value\">\n              <svg class=\"in-hour-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\" /></svg>\n              {{ h.value }}\n            </div>\n            <div class=\"in-hour-track\">\n              <div class=\"in-hour-bar\" [class.in-peak]=\"h.peak\" [style.height.%]=\"h.percent\" [style.background-color]=\"h.color\" [style.animation-delay.ms]=\"250 + i * 50\"></div>\n            </div>\n            <div class=\"in-hour-label\">{{ h.label }}</div>\n          </div>\n        </div>\n        <div class=\"in-util-legend\">\n          <span class=\"in-muted\">Low</span>\n          <span class=\"in-util-scale\"></span>\n          <span class=\"in-muted\">High</span>\n        </div>\n        <div class=\"in-card-note\">\n          <svg class=\"in-note-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5M12 8h.01\" /></svg>\n          <div>\n            <div class=\"in-note-insight\" *ngIf=\"activityNote\">{{ activityNote }}</div>\n            <div>Each column counts the teachers who were in a session at any point in that hour. Colour runs from red (quiet) to green (busiest hour).</div>\n          </div>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"300\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Most Used Chapters</div>\n        <div class=\"in-card-sub\">Chapters and their topics used today</div>\n        <ng-container *ngTemplateOutlet=\"bars; context: { $implicit: chapters, color: '#f4a98a' }\"></ng-container>\n        <div class=\"in-card-note\">\n          <svg class=\"in-note-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5M12 8h.01\" /></svg>\n          <div>\n            <div class=\"in-note-insight\" *ngIf=\"chaptersNote\">{{ chaptersNote }}</div>\n            <div>Counts how many times each chapter, or a topic inside it, was opened in class today. Bars are relative to the most used chapter.</div>\n          </div>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"360\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Content Utilisation</div>\n        <div class=\"in-card-sub\">What teachers used in class</div>\n        <div class=\"in-stack\">\n          <div\n            class=\"in-stack-part\"\n            *ngFor=\"let c of contentMix; let i = index\"\n            [style.animation-delay.ms]=\"300 + i * 60\"\n            [style.width.%]=\"c.percent\"\n            [style.background-color]=\"c.color\"\n            [title]=\"c.label + ': ' + c.display\"\n          ></div>\n        </div>\n        <div class=\"in-legend\">\n          <div class=\"in-legend-item\" *ngFor=\"let c of contentMix\">\n            <span class=\"in-dot\" [style.background-color]=\"c.color\"></span>\n            <span class=\"in-legend-label\">{{ c.label }}</span>\n            <span class=\"in-legend-value\">{{ c.display }}</span>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- what was taught, and where -->\n    <div class=\"in-grid\">\n      <section [style.animation-delay.ms]=\"420\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Subject</div>\n        <div class=\"in-card-sub\">Share of session time by subject</div>\n        <div class=\"in-donut-wrap\">\n          <svg class=\"in-donut\" viewBox=\"0 0 140 140\" role=\"img\" aria-label=\"Time by subject\">\n            <circle cx=\"70\" cy=\"70\" [attr.r]=\"donutRadius\" class=\"in-donut-track\"></circle>\n            <circle\n              *ngFor=\"let s of subjectDonut.segments; let i = index\"\n              class=\"in-donut-seg\"\n              cx=\"70\"\n              cy=\"70\"\n              [attr.r]=\"donutRadius\"\n              [attr.stroke]=\"s.color\"\n              [attr.stroke-dasharray]=\"s.dash\"\n              [attr.stroke-dashoffset]=\"s.offset\"\n              [style.animation-delay.ms]=\"300 + i * 90\"\n            >\n              <title>{{ s.label }}: {{ s.display }} ({{ s.percent }}%)</title>\n            </circle>\n          </svg>\n          <div class=\"in-donut-center\">\n            <div class=\"in-donut-total\">{{ subjectDonut.total }}</div>\n            <div class=\"in-muted\" title=\"Session time where content was used\">with content</div>\n          </div>\n        </div>\n        <div class=\"in-legend in-legend-compact\">\n          <div class=\"in-legend-item\" *ngFor=\"let s of subjectDonut.segments\">\n            <span class=\"in-dot\" [style.background-color]=\"s.color\"></span>\n            <span class=\"in-legend-label\" [title]=\"s.label\">{{ s.label }}</span>\n            <span class=\"in-legend-value\">{{ s.percent }}%</span>\n          </div>\n        </div>\n        <div class=\"in-card-note\">\n          <svg class=\"in-note-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5M12 8h.01\" /></svg>\n          <div>\n            <div class=\"in-note-insight\" *ngIf=\"subjectNote\">{{ subjectNote }}</div>\n            <div>Each session's time is split equally across the subjects opened in it. Sessions where nothing was opened have no subject, so this total is lower than Teaching Time.</div>\n          </div>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"480\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Classroom Usage</div>\n        <div class=\"in-card-sub\">Each classroom's utilisation by time</div>\n        <div class=\"in-tiles\">\n          <div\n            class=\"in-tile\"\n            *ngFor=\"let r of roomTiles; let i = index\"\n            [class.in-tile-idle]=\"r.idle\"\n            [class.in-tile-dark]=\"r.dark\"\n            [style.grid-column]=\"'span ' + r.span\"\n            [style.background-color]=\"r.shade\"\n            [style.animation-delay.ms]=\"300 + i * 15\"\n            [title]=\"r.label + ': ' + r.display\"\n          >\n            <span class=\"in-tile-name\">\n              <svg class=\"in-tile-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8\" /></svg>{{ r.label }}\n            </span>\n            <span class=\"in-tile-value\">{{ r.share }}%</span>\n          </div>\n        </div>\n        <div class=\"in-tiles-legend\">\n          <span class=\"in-tile in-tile-key in-tile-idle\"></span><span class=\"in-muted\">0% / not used</span>\n          <span class=\"in-scale\"></span><span class=\"in-muted\">Low \u2192 high utilisation</span>\n        </div>\n      </section>\n      <section [style.animation-delay.ms]=\"540\" class=\"in-anim in-card\">\n        <div class=\"in-card-title\">Time by Class</div>\n        <div class=\"in-card-sub\">Session time per class</div>\n        <div class=\"in-columns\">\n          <div class=\"in-column\" *ngFor=\"let g of gradeColumns; let i = index\" [title]=\"g.label + ': ' + g.display\">\n            <div class=\"in-column-track\">\n              <div class=\"in-column-bar\" [style.height.%]=\"g.percent\" [style.animation-delay.ms]=\"300 + i * 50\"></div>\n            </div>\n            <div class=\"in-column-label\">{{ g.short }}</div>\n          </div>\n        </div>\n        <div class=\"in-columns-caption\">Class</div>\n        <div class=\"in-column-top\" *ngIf=\"gradeColumns.length\">\n          <span class=\"in-muted\">Most time</span>\n          <ng-container *ngFor=\"let g of gradeColumns\">\n            <strong *ngIf=\"g.percent === 100\">{{ g.label }} \u00B7 {{ g.display }}</strong>\n          </ng-container>\n        </div>\n      </section>\n    </div>\n  </ng-container>\n\n</div>\n\n<ng-template #followLists>\n  <div class=\"in-follow-cols\">\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Teachers Not Active <span class=\"in-count\">{{ inactiveTeachers.length }}</span></div>\n      <ul class=\"in-name-list\" *ngIf=\"inactiveTeachers.length\">\n        <li *ngFor=\"let name of inactiveTeachers\">{{ name }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"inactiveTeachers.length === 0\">Every eligible teacher used the system today.</span>\n    </div>\n    <div class=\"in-follow-col\">\n      <div class=\"in-follow-label\">Classrooms Not Used <span class=\"in-count\">{{ idleRooms.length }}</span></div>\n      <ul class=\"in-name-list in-room-list\" *ngIf=\"idleRooms.length\">\n        <li *ngFor=\"let room of idleRooms\">{{ room }}</li>\n      </ul>\n      <span class=\"in-muted\" *ngIf=\"idleRooms.length === 0\">Every classroom was used today.</span>\n    </div>\n  </div>\n</ng-template>\n\n<!-- each section passes its own bar colour so neighbouring cards are easy to tell apart -->\n<ng-template #bars let-items let-color=\"color\">\n  <div class=\"in-bars\">\n    <div class=\"in-muted\" *ngIf=\"items.length === 0\">No data</div>\n    <div class=\"in-bar-row\" *ngFor=\"let item of items; let i = index\">\n      <div class=\"in-bar-head\">\n        <span class=\"in-bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n        <span class=\"in-bar-value\">{{ item.display }}</span>\n      </div>\n      <div class=\"in-bar-sub\" *ngIf=\"item.sub\">{{ item.sub }}</div>\n      <div class=\"in-bar-track\"><div class=\"in-bar-fill\" [style.width.%]=\"item.percent\" [style.background-color]=\"color\" [style.animation-delay.ms]=\"300 + i * 60\"></div></div>\n    </div>\n  </div>\n</ng-template>\n",
+                    styles: ["@import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap\");.in-page{font-family:Poppins,Segoe UI,Arial,sans-serif;font-size:13px;color:#1e2437;padding:0 20px 24px;box-sizing:border-box;text-align:left;overflow-y:auto;background:#eef2f9}.in-sticky{position:sticky;top:0;z-index:2;margin:0 -20px 16px;padding:16px 20px;background:#eef2f9;box-shadow:0 6px 12px -10px rgba(30,36,55,.25)}.in-heading{position:relative;margin-bottom:14px;min-height:34px;display:flex;align-items:center;justify-content:center}.in-heading-text{font-size:17px;font-weight:600;color:#1e2437;text-align:center;padding:0 150px}.in-pdf-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);height:34px;padding:0 16px;border:none;border-radius:10px;background:#5b84ec;color:#fff;font:500 13px Poppins,Segoe UI,Arial,sans-serif;cursor:pointer;box-shadow:0 4px 10px rgba(91,132,236,.22)}.in-pdf-btn:hover:not([disabled]){background:#406fe9}.in-pdf-btn[disabled]{cursor:progress;background:#b3c6f5;box-shadow:none}.in-page.in-exporting{height:auto!important;overflow:visible}.in-page.in-exporting *,.in-page.in-exporting :after,.in-page.in-exporting :before{-webkit-animation:none!important;animation:none!important}.in-page.in-exporting .in-sticky{position:static;box-shadow:none}.in-page.in-exporting .in-chips{max-height:none;overflow:visible}.in-page.in-exporting .in-print-only{display:block}.in-page.in-exporting .in-follow-details{display:none}.in-card-sub,.in-muted{font-size:12px;color:#8a93a6}.in-empty{padding:40px;text-align:center;color:#8a93a6}.in-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.in-kpi{position:relative;min-width:0;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(30,36,55,.06);color:#1e2437;box-sizing:border-box}.in-kpi.in-kpi-accent{background:#5b84ec;color:#fff}.in-kpi.in-kpi-accent .in-kpi-hint,.in-kpi.in-kpi-accent .in-kpi-label{color:hsla(0,0%,100%,.85)}.in-kpi.in-kpi-accent .in-kpi-icon{border-color:#fff;color:#fff}.in-kpi-icon{position:absolute;top:12px;right:12px;width:20px;height:20px;border:2px solid #1e2437;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#1e2437}.in-kpi-icon svg{width:10px;height:10px}.in-kpi-label{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:500;color:rgba(30,36,55,.75)}.in-kpi-value{white-space:nowrap;font-size:22px;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}.in-kpi-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:rgba(30,36,55,.7)}.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.in-grid+.in-grid{margin-top:16px}.in-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(30,36,55,.06);padding:18px 20px;min-width:0;box-sizing:border-box}.in-card,.in-wide{display:flex;flex-direction:column}.in-wide{grid-column:span 2}.in-card-note{margin-top:auto;padding-top:14px;border-top:1px solid #eef1f6;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:#8a93a6}.in-note-icon{flex:0 0 auto;width:15px;height:15px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.in-note-insight{color:#1e2437;font-weight:500;margin-bottom:2px}.in-card-title{font-size:16px;font-weight:600;color:#1e2437}.in-card-sub{margin:2px 0 16px}.in-count{display:inline-block;min-width:22px;padding:0 8px;margin-left:6px;border-radius:11px;background:#fff6de;color:#a46b00;font-size:12px;font-weight:600;text-align:center;line-height:22px;vertical-align:middle}.in-hours{flex:1 1 auto;display:flex;align-items:stretch;gap:4px;min-height:200px;max-height:320px}.in-hour{flex:1 1 0;flex-direction:column;min-width:0}.in-hour,.in-hour-value{display:flex;align-items:center}.in-hour-value{gap:3px;font-size:12px;font-weight:600;color:#1e2437;margin-bottom:6px;white-space:nowrap}.in-hour-icon{width:12px;height:12px;color:#8a93a6;flex:0 0 auto}.in-hour-track{flex:1 1 auto;max-width:44px;display:flex;align-items:flex-end;background:#f1f4f9;overflow:hidden}.in-hour-bar,.in-hour-track{width:100%;border-radius:999px}.in-hour-bar{min-height:6px;background:#fbe0a0}.in-util-legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.in-util-scale{width:90px;height:8px;border-radius:999px;background:linear-gradient(90deg,#f38e86,#f5c447,#92c15c)}.in-hour-label{margin-top:8px;font-size:10px;color:#8a93a6;white-space:nowrap}.in-bars{display:flex;flex-direction:column;gap:12px}.in-bar-head{display:flex;justify-content:space-between;gap:12px}.in-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.in-bar-value{flex:0 0 auto;color:#1e2437;font-weight:600;font-variant-numeric:tabular-nums}.in-bar-sub{font-size:11px;color:#8a93a6}.in-bar-track{height:8px;margin-top:6px;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-bar-fill{height:100%;border-radius:999px;background:#5b84ec}.in-donut-wrap{position:relative;width:150px;height:150px;margin:0 auto 14px}.in-donut{width:100%;height:100%;transform:rotate(-90deg)}.in-donut circle{fill:none;stroke-width:18}.in-donut-track{stroke:#f1f4f9}.in-donut-seg{stroke-linecap:butt;transition:stroke-width .15s;-webkit-animation:in-draw 1s cubic-bezier(.22,1,.36,1) both;animation:in-draw 1s cubic-bezier(.22,1,.36,1) both}.in-donut-seg:hover{stroke-width:22}@-webkit-keyframes in-draw{0%{stroke-dasharray:0 400}}@keyframes in-draw{0%{stroke-dasharray:0 400}}.in-donut-center{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.in-donut-total{font-size:18px;font-weight:700}.in-legend-compact{gap:6px}.in-legend-compact .in-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.in-columns{flex:1 1 auto;display:flex;align-items:stretch;gap:5px;min-height:180px;max-height:340px}.in-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}.in-column-track{flex:1 1 auto;width:100%;max-width:22px;display:flex;align-items:flex-end;background:#f1f4f9;border-radius:999px;overflow:hidden}.in-column-bar{width:100%;min-height:4px;border-radius:999px;background:#f3cb6c;-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}.in-column:hover .in-column-bar{background:#f0be46}.in-column-label{margin-top:6px;font-size:11px;font-weight:500;color:#8a93a6;white-space:nowrap}.in-columns-caption{text-align:center;font-size:11px;color:#8a93a6;margin-top:2px}.in-column-top{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff6de;display:flex;justify-content:space-between;gap:8px;font-size:12px}.in-tiles{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}.in-tile{height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#162b57;cursor:default;-webkit-animation:in-pop .4s ease-out both;animation:in-pop .4s ease-out both;transition:transform .12s}.in-tile:hover{transform:scale(1.06)}.in-tile.in-tile-dark{color:#fff}.in-tile.in-tile-idle{background:#f4f7fd;border:2px solid #162b57;color:#162b57}@-webkit-keyframes in-pop{0%{opacity:0;transform:scale(.7)}}@keyframes in-pop{0%{opacity:0;transform:scale(.7)}}.in-tile-icon{width:13px;height:13px;margin-right:4px;vertical-align:-1px}.in-tile-name{max-width:100%;padding:0 4px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}.in-tile-value{font-size:12px;font-weight:500;opacity:.85}.in-tiles-legend{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}.in-tiles-legend .in-tile-key{width:14px;height:14px;border-radius:4px;-webkit-animation:none;animation:none}.in-scale{width:46px;height:10px;margin-left:8px;border-radius:999px;background:linear-gradient(90deg,#eaf1fb,#162b57)}.in-primary .in-attention{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.in-primary .in-attention-item{gap:14px;padding:12px 14px}.in-primary .in-attention-value{flex:0 0 42px;height:42px;line-height:42px;border-radius:10px;background:#ef6a3a;color:#fff;font-size:16px}.in-primary .in-attention-value.in-zero{background:#8bc34a;color:#fff}.in-primary .in-attention-label{display:flex;align-items:center;gap:6px;font-size:14px}.in-primary .in-attention-item .in-muted{font-size:12px;margin-top:2px}.in-inline-icon{display:inline-flex;color:#ef6a3a}.in-inline-icon svg{width:16px;height:16px}.in-follow{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.in-follow-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:18px 20px;border:none;border-radius:32px;font:inherit;color:inherit;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s}.in-follow-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(30,36,55,.08)}.in-follow-teachers{background:#eaf0fd}.in-follow-teachers .in-follow-icon{color:#5b84ec}.in-follow-rooms{background:#eaf0fd}.in-follow-rooms .in-follow-icon{color:#5b84ec}.in-follow-icon{margin-bottom:6px;display:flex;align-items:center;justify-content:center}.in-follow-icon svg{width:40px;height:40px}.in-follow-number{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.in-follow-tile>.in-muted{font-size:15px;color:#1e2437}.in-follow-label-big{font-size:18px;font-weight:600}.in-avatars{flex-wrap:wrap;margin-top:12px;padding-left:8px}.in-avatar,.in-avatars{display:flex;justify-content:center}.in-avatar{width:34px;height:34px;margin-left:-6px;border-radius:50%;border:1.5px solid #5b84ec;background:#fff;color:#3f5fae;font-size:11px;font-weight:600;align-items:center;box-sizing:border-box}.in-avatar-more{background:#5b84ec;color:#fff}.in-room-chips{flex-wrap:wrap;gap:6px;margin-top:12px}.in-room-chip,.in-room-chips{display:flex;justify-content:center}.in-room-chip{min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1.5px solid #5b84ec;background:#fff;color:#5b84ec;font-size:12px;font-weight:600;align-items:center;box-sizing:border-box}.in-room-chip.in-avatar-more{background:#5b84ec;color:#fff}.in-follow-foot{display:flex;justify-content:flex-end;margin-top:10px}.in-link-btn{border:none;background:transparent;padding:6px 4px;font:600 13px Poppins,Segoe UI,Arial,sans-serif;color:#5b84ec;cursor:pointer}.in-link-btn:hover{text-decoration:underline}.in-print-only{display:none;margin-top:16px}.in-follow-compact{flex:none}.in-follow-compact .in-follow-tile{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 16px;text-align:left}.in-follow-compact .in-follow-icon{margin:0}.in-follow-compact .in-follow-icon svg{width:24px;height:24px}.in-follow-compact .in-follow-number{font-size:22px}.in-follow-compact .in-avatars,.in-follow-compact .in-follow-tile>.in-muted,.in-follow-compact .in-room-chips{display:none}.in-follow-details{flex:none;margin-top:12px;padding:14px 16px;border:1px solid #eef1f6;border-radius:12px;-webkit-animation:in-rise .3s ease-out both;animation:in-rise .3s ease-out both}.in-link-chevron{display:inline-block;width:6px;height:6px;margin-left:6px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px);transition:transform .2s}.in-link-chevron.in-link-chevron-up{transform:rotate(-135deg) translateY(-1px)}.in-follow-cols{display:grid;grid-template-columns:3fr 1fr;gap:24px}.in-follow-col{min-width:0}.in-follow-col+.in-follow-col{border-left:1px solid #e3e8f0;padding-left:24px}.in-follow-label{font-size:13px;font-weight:600;margin:2px 0 10px}.in-name-list{margin:0;padding:0;list-style:none;-moz-column-width:160px;column-width:160px;-moz-column-gap:20px;column-gap:20px}.in-name-list li{position:relative;padding:3px 0 3px 14px;-moz-column-break-inside:avoid;break-inside:avoid;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-name-list li:before{content:\"\";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#a9bffa}.in-room-list li:before{background:#fbe0a0}.in-attention{display:flex;flex-direction:column;gap:10px}.in-attention-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#f7f9fc}.in-attention-value{flex:0 0 44px;height:40px;line-height:40px;text-align:center;border-radius:10px;background:#fbe0a0;color:#1e2437;font-size:16px;font-weight:700}.in-attention-value.in-zero{background:#eaf0fd;color:#5b84ec}.in-attention-label{font-weight:600}.in-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#f1f4f9;margin-bottom:16px}.in-stack-part{height:100%;box-shadow:inset -2px 0 0 #fff}.in-legend{display:flex;flex-direction:column;gap:8px}.in-legend-item{display:flex;align-items:center;gap:10px}.in-dot{flex:0 0 auto;width:10px;height:10px;border-radius:3px}.in-legend-label{flex:1 1 auto}.in-legend-value{font-weight:600;color:#1e2437;font-variant-numeric:tabular-nums}.in-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:230px;overflow:auto}.in-chip{padding:5px 12px;border-radius:999px;background:#eaf0fd;color:#3f5fae;font-size:12px;font-weight:500}@-webkit-keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@keyframes in-rise{0%{opacity:0;transform:translateY(14px)}}@-webkit-keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@keyframes in-fade-right{0%{opacity:0;transform:translateX(-10px)}}@-webkit-keyframes in-grow-width{0%{width:0}}@keyframes in-grow-width{0%{width:0}}@-webkit-keyframes in-grow-height{0%{height:0}}@keyframes in-grow-height{0%{height:0}}.in-anim{-webkit-animation:in-rise .5s cubic-bezier(.22,1,.36,1) both;animation:in-rise .5s cubic-bezier(.22,1,.36,1) both}.in-anim-row{-webkit-animation:in-fade-right .45s ease-out both;animation:in-fade-right .45s ease-out both}.in-bar-fill,.in-stack-part{-webkit-animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both;animation:in-grow-width .9s cubic-bezier(.22,1,.36,1) both}.in-hour-bar{-webkit-animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both;animation:in-grow-height .8s cubic-bezier(.22,1,.36,1) both}@media (prefers-reduced-motion:reduce){.in-anim,.in-anim-row,.in-bar-fill,.in-column-bar,.in-donut-seg,.in-hour-bar,.in-stack-part,.in-tile{-webkit-animation:none;animation:none}}@media (max-width:900px){.in-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1100px){.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid>.in-card:last-child:nth-child(odd),.in-wide+.in-card{grid-column:span 2}}@media (max-width:760px){.in-heading-text{padding:0;text-align:left;flex:1 1 auto}.in-pdf-btn{position:static;transform:none}.in-grid>.in-card:last-child:nth-child(odd),.in-wide,.in-wide+.in-card{grid-column:auto}.in-follow,.in-follow-cols,.in-primary .in-attention{grid-template-columns:1fr}.in-follow-col+.in-follow-col{border-left:none;padding-left:0;border-top:1px solid #e3e8f0;padding-top:16px}.in-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.in-grid{grid-template-columns:1fr}}"]
                 },] }
     ];
     InsightsComponent.ctorParameters = function () { return [