PageSourceSearch

https://insightspod.io/help

html insightspod.io collected 2026-09-24 14:22:54 UTC 167,810 bytes, 3,042 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <title>Knowledge Base & Documentation | Insights for Podio</title>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="icon" href="https://insightspod.io/images/favicon.ico">
8    <meta name="description"
9          content="Comprehensive technical documentation, architecture guides, Podio Workflow Automation (GlobiFlow) debugging, dependency mapping, and change history versioning for Insights for Podio."/>
10    <meta name="keywords"
11          content="Podio Documentation, Insights for Podio, Podio Workflow Automation, GlobiFlow Split Diff, Podio Versioning, Change History, Calculation Errors, Podio Dependency Graph, Workspace Topology Map, Workflow Tokens"/>
12
13    <!-- Fonts & Icons -->
14    <link rel="preconnect" href="https://fonts.googleapis.com">
15    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
17    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
18    <link href="https://insightspod.io/admin/css/bootstrap.min.css" rel="stylesheet">
19
20    
20<script src="https://insightspod.io/js/jquery-2.2.4.min.js"></script>
20
21    
21<script src="https://insightspod.io/admin/js/bootstrap.min.js"></script>
21
22
23    <style>
24        :root {
25            --brand-primary: #0284c7;
26            --brand-primary-hover: #0369a1;
27            --brand-royal: #2563eb;
28            --brand-gradient: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
29            --hero-bg: #f8fafc;
30            --surface-card: #ffffff;
31            --text-heading: #0f172a;
32            --text-body: #334155;
33            --text-muted: #64748b;
34            --border-light: #e2e8f0;
35            --border-subtle: #cbd5e1;
36            --radius-lg: 16px;
37            --radius-md: 12px;
38            --radius-sm: 8px;
39            --shadow-subtle: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
40            --shadow-card: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
41            --shadow-glow: 0 12px 32px -4px rgba(2, 132, 199, 0.25);
42            --font-code: 'JetBrains Mono', monospace;
43        }
44
45        body {
46            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
47            color: var(--text-body);
48            background-color: #f8fafc;
49            line-height: 1.7;
50            padding-top: 72px;
51        }
52
53        /* Fixed Navigation Header */
54        .navbar-wrapper.cbp-af-header {
55            position: fixed !important;
56            top: 0 !important;
57            left: 0 !important;
58            right: 0 !important;
59            height: 72px !important;
60            padding: 0 !important;
61            margin: 0 !important;
62            z-index: 1000 !important;
63            background: rgba(255, 255, 255, 0.98) !important;
64            backdrop-filter: blur(16px) !important;
65            -webkit-backdrop-filter: blur(16px) !important;
66            border-bottom: 1px solid #e2e8f0 !important;
67            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
68            display: flex !important;
69            align-items: center !important;
70        }
71
72        .navbar-wrapper .container {
73            max-width: 1320px !important;
74            width: 100% !important;
75            margin: 0 auto !important;
76            padding: 0 24px !important;
77        }
78
79        .navbar-wrapper .navbar {
80            margin: 0 !important;
81            padding: 0 !important;
82            border: none !important;
83            background: transparent !important;
84            display: flex !important;
85            align-items: center !important;
86            justify-content: space-between !important;
87            width: 100% !important;
88            height: 72px !important;
89        }
90
91        .navbar-header {
92            display: flex !important;
93            align-items: center !important;
94            float: none !important;
95            height: 100% !important;
96            margin: 0 !important;
97            gap: 16px !important;
98        }
99
100        .navbar-brand {
101            font-family: 'Plus Jakarta Sans', sans-serif !important;
102            font-weight: 800 !important;
103            font-size: 22px !important;
104            color: #0f172a !important;
105            letter-spacing: -0.6px !important;
106            padding: 0 !important;
107            margin: 0 !important;
108            height: auto !important;
109            line-height: 1 !important;
110            display: flex !important;
111            align-items: center !important;
112            gap: 8px !important;
113            float: none !important;
114            text-decoration: none !important;
115        }
116
117        .brand-text-insights {
118            color: #0f172a;
119            font-weight: 800;
120        }
121
122        .brand-text-podio {
123            background: var(--brand-gradient);
124            -webkit-background-clip: text;
125            -webkit-text-fill-color: transparent;
126            font-weight: 800;
127        }
128
129        .navbar-nav {
130            display: flex !important;
131            align-items: center !important;
132            float: none !important;
133            margin: 0 !important;
134            padding: 0 !important;
135            gap: 8px !important;
136            list-style: none !important;
137        }
138
139        .navbar-nav > li > a {
140            color: #475569 !important;
141            font-weight: 700 !important;
142            font-size: 13px !important;
143            text-transform: uppercase !important;
144            letter-spacing: 0.5px !important;
145            padding: 8px 14px !important;
146            border-radius: 8px !important;
147            transition: all 0.2s ease !important;
148            text-decoration: none !important;
149        }
150
151        .navbar-nav > li > a:hover,
152        .navbar-nav > li.active > a {
153            color: var(--brand-primary) !important;
154            background: rgba(2, 132, 199, 0.08) !important;
155        }
156
157        .navbar-nav > li > a.login-btn-nav {
158            background: var(--brand-gradient) !important;
159            color: #ffffff !important;
160            box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
161            padding: 0 20px !important;
162            height: 40px !important;
163            display: inline-flex !important;
164            align-items: center !important;
165            justify-content: center !important;
166        }
167
168        /* Hero Knowledge Base Search */
169        .kb-hero {
170            background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
171            border-bottom: 1px solid var(--border-light);
172            padding: 60px 0 50px 0;
173            text-align: center;
174            position: relative;
175        }
176
177        .kb-hero-badge {
178            display: inline-flex;
179            align-items: center;
180            gap: 8px;
181            background: rgba(2, 132, 199, 0.1);
182            color: #0369a1;
183            font-weight: 700;
184            font-size: 12px;
185            text-transform: uppercase;
186            letter-spacing: 1px;
187            padding: 6px 14px;
188            border-radius: 9999px;
189            margin-bottom: 16px;
190            border: 1px solid rgba(2, 132, 199, 0.2);
191        }
192
193        .kb-hero-title {
194            font-size: 40px;
195            font-weight: 800;
196            color: var(--text-heading);
197            letter-spacing: -0.8px;
198            margin-bottom: 12px;
199            line-height: 1.2;
200        }
201
202        .kb-hero-subtitle {
203            font-size: 16px;
204            color: var(--text-muted);
205            max-width: 720px;
206            margin: 0 auto 32px auto;
207        }
208
209        .kb-search-container {
210            max-width: 680px;
211            margin: 0 auto;
212            position: relative;
213        }
214
215        .kb-search-input-wrapper {
216            position: relative;
217            background: #ffffff;
218            border-radius: 14px;
219            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.8);
220            display: flex;
221            align-items: center;
222            padding: 4px 8px;
223            transition: all 0.25s ease;
224        }
225
226        .kb-search-input-wrapper:focus-within {
227            box-shadow: 0 12px 35px rgba(2, 132, 199, 0.15), 0 0 0 2px var(--brand-primary);
228            border-color: transparent;
229        }
230
231        .kb-search-icon {
232            color: #94a3b8;
233            font-size: 18px;
234            margin-left: 14px;
235            margin-right: 12px;
236        }
237
238        .kb-search-input {
239            border: none;
240            outline: none;
241            background: transparent;
242            font-size: 16px;
243            width: 100%;
244            padding: 12px 4px;
245            color: var(--text-heading);
246            font-family: inherit;
247        }
248
249        .kb-search-clear {
250            display: none;
251            background: #f1f5f9;
252            border: none;
253            border-radius: 50%;
254            width: 28px;
255            height: 28px;
256            color: #64748b;
257            cursor: pointer;
258            align-items: center;
259            justify-content: center;
260            font-size: 12px;
261            margin-right: 8px;
262        }
263
264        .kb-search-badge {
265            background: #f1f5f9;
266            border: 1px solid #e2e8f0;
267            border-radius: 6px;
268            font-size: 11px;
269            font-weight: 700;
270            color: #64748b;
271            padding: 4px 8px;
272            margin-right: 6px;
273            white-space: nowrap;
274        }
275
276        /* Live Instant Search Dropdown */
277        .kb-search-dropdown {
278            display: none;
279            position: absolute;
280            top: calc(100% + 8px);
281            left: 0;
282            right: 0;
283            background: #ffffff;
284            border: 1px solid #cbd5e1;
285            border-radius: 12px;
286            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
287            max-height: 380px;
288            overflow-y: auto;
289            z-index: 1000;
290            text-align: left;
291            padding: 8px 0;
292        }
293
294        .kb-search-count-header {
295            padding: 8px 16px;
296            font-size: 11px;
297            font-weight: 700;
298            text-transform: uppercase;
299            letter-spacing: 0.5px;
300            color: #64748b;
301            background: #f8fafc;
302            border-bottom: 1px solid #f1f5f9;
303        }
304
305        .kb-search-result-item {
306            display: flex;
307            align-items: flex-start;
308            gap: 12px;
309            padding: 10px 16px;
310            text-decoration: none !important;
311            color: #1e293b;
312            border-bottom: 1px solid #f1f5f9;
313            transition: background 0.15s ease;
314            cursor: pointer;
315        }
316
317        .kb-search-result-item:last-child {
318            border-bottom: none;
319        }
320
321        .kb-search-result-item:hover,
322        .kb-search-result-item.selected {
323            background: #f0f9ff;
324        }
325
326        .kb-search-result-icon {
327            width: 30px;
328            height: 30px;
329            border-radius: 6px;
330            background: #e0f2fe;
331            color: #0284c7;
332            display: flex;
333            align-items: center;
334            justify-content: center;
335            font-size: 13px;
336            flex-shrink: 0;
337            margin-top: 2px;
338        }
339
340        .kb-search-result-content {
341            flex: 1;
342            min-width: 0;
343        }
344
345        .kb-search-result-badge {
346            font-size: 10.5px;
347            font-weight: 700;
348            text-transform: uppercase;
349            color: #0284c7;
350            letter-spacing: 0.5px;
351            margin-bottom: 2px;
352        }
353
354        .kb-search-result-title {
355            font-size: 13.5px;
356            font-weight: 700;
357            color: #0f172a;
358            line-height: 1.3;
359        }
360
361        .kb-search-result-snippet {
362            font-size: 12px;
363            color: #64748b;
364            margin-top: 2px;
365            white-space: nowrap;
366            overflow: hidden;
367            text-overflow: ellipsis;
368        }
369
370        .kb-search-highlight {
371            background: #fef08a;
372            color: #854d0e;
373            font-weight: 700;
374            padding: 0 2px;
375            border-radius: 2px;
376        }
377
378        .kb-search-no-results {
379            padding: 24px 16px;
380            text-align: center;
381            color: #64748b;
382            font-size: 13.5px;
383        }
384
385        .kb-search-tags {
386            margin-top: 16px;
387            display: flex;
388            align-items: center;
389            justify-content: center;
390            flex-wrap: wrap;
391            gap: 8px;
392            font-size: 13px;
393        }
394
395        .kb-search-tags-label {
396            color: var(--text-muted);
397            font-weight: 600;
398        }
399
400        .kb-tag-pill {
401            background: #ffffff;
402            border: 1px solid #e2e8f0;
403            color: #334155;
404            padding: 4px 12px;
405            border-radius: 9999px;
406            font-size: 12px;
407            font-weight: 600;
408            cursor: pointer;
409            transition: all 0.2s ease;
410            text-decoration: none;
411        }
412
413        .kb-tag-pill:hover {
414            border-color: var(--brand-primary);
415            color: var(--brand-primary);
416            background: #f0f9ff;
417        }
418
419        /* 8 Category Cards Grid */
420        .kb-categories-section {
421            padding: 48px 0 24px 0;
422        }
423
424        .kb-section-header {
425            text-align: center;
426            margin-bottom: 36px;
427        }
428
429        .kb-section-title {
430            font-size: 26px;
431            font-weight: 800;
432            color: var(--text-heading);
433            letter-spacing: -0.5px;
434            margin-bottom: 8px;
435        }
436
437        .kb-section-desc {
438            color: var(--text-muted);
439            font-size: 15px;
440        }
441
442        .kb-cards-grid {
443            display: grid;
444            grid-template-columns: repeat(4, 1fr);
445            gap: 24px;
446            margin-bottom: 40px;
447        }
448
449        @media (max-width: 1200px) {
450            .kb-cards-grid {
451                grid-template-columns: repeat(2, 1fr);
452            }
453        }
454
455        @media (max-width: 768px) {
456            .kb-cards-grid {
457                grid-template-columns: 1fr;
458            }
459        }
460
461        .kb-card {
462            background: #ffffff;
463            border: 1px solid var(--border-light);
464            border-radius: var(--radius-lg);
465            padding: 24px;
466            box-shadow: var(--shadow-subtle);
467            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
468            display: flex;
469            flex-direction: column;
470            position: relative;
471        }
472
473        .kb-card:hover {
474            transform: translateY(-4px);
475            box-shadow: var(--shadow-card);
476            border-color: #cbd5e1;
477        }
478
479        .kb-card-icon-wrapper {
480            width: 48px;
481            height: 48px;
482            border-radius: 12px;
483            display: flex;
484            align-items: center;
485            justify-content: center;
486            font-size: 22px;
487            margin-bottom: 16px;
488        }
489
490        .icon-blue { background: #e0f2fe; color: #0284c7; }
491        .icon-indigo { background: #e0e7ff; color: #4f46e5; }
492        .icon-purple { background: #f3e8ff; color: #9333ea; }
493        .icon-amber { background: #fef3c7; color: #d97706; }
494        .icon-emerald { background: #d1fae5; color: #059669; }
495        .icon-cyan { background: #cffafe; color: #0891b2; }
496        .icon-rose { background: #ffe4e6; color: #e11d48; }
497        .icon-teal { background: #ccfbf1; color: #0d9488; }
498
499        .kb-card-title {
500            font-size: 18px;
501            font-weight: 800;
502            color: var(--text-heading);
503            margin-bottom: 8px;
504            letter-spacing: -0.3px;
505        }
506
507        .kb-card-desc {
508            font-size: 13px;
509            color: var(--text-muted);
510            margin-bottom: 18px;
511            line-height: 1.5;
512        }
513
514        .kb-card-links {
515            list-style: none;
516            padding: 0;
517            margin: 0 0 16px 0;
518            flex-grow: 1;
519        }
520
521        .kb-card-links li {
522            margin-bottom: 10px;
523        }
524
525        .kb-card-links a {
526            color: #334155;
527            font-size: 13px;
528            font-weight: 600;
529            text-decoration: none;
530            display: flex;
531            align-items: flex-start;
532            gap: 8px;
533            transition: color 0.15s ease;
534            line-height: 1.4;
535        }
536
537        .kb-card-links a i {
538            color: #94a3b8;
539            font-size: 11px;
540            margin-top: 4px;
541            transition: transform 0.15s ease;
542        }
543
544        .kb-card-links a:hover {
545            color: var(--brand-primary);
546        }
547
548        .kb-card-links a:hover i {
549            color: var(--brand-primary);
550            transform: translateX(2px);
551        }
552
553        .kb-card-footer {
554            border-top: 1px solid #f1f5f9;
555            padding-top: 14px;
556            margin-top: auto;
557        }
558
559        .kb-card-footer a {
560            color: var(--brand-primary);
561            font-weight: 700;
562            font-size: 13px;
563            text-decoration: none;
564            display: inline-flex;
565            align-items: center;
566            gap: 6px;
567            transition: gap 0.2s ease;
568        }
569
570        .kb-card-footer a:hover {
571            color: var(--brand-primary-hover);
572            gap: 10px;
573        }
574
575        /* 3-Column Detailed Reading Hub Section */
576        .kb-reader-section {
577            padding: 32px 0 64px 0;
578            border-top: 1px solid var(--border-light);
579            background: #ffffff;
580        }
581
582        .kb-reader-layout {
583            display: grid;
584            grid-template-columns: 280px 1fr;
585            gap: 40px;
586   
586         position: relative;
587        }
588
589        @media (max-width: 991px) {
590            .kb-reader-layout {
591                grid-template-columns: 1fr;
592            }
593            .kb-sidebar-nav {
594                display: none;
595            }
596        }
597
598        /* Sticky Left Sidebar Navigation */
599        .kb-sidebar-nav {
600            position: sticky;
601            top: 96px;
602            max-height: calc(100vh - 120px);
603            overflow-y: auto;
604            padding-right: 12px;
605        }
606
607        .kb-sidebar-nav::-webkit-scrollbar {
608            width: 4px;
609        }
610
611        .kb-sidebar-nav::-webkit-scrollbar-thumb {
612            background: #cbd5e1;
613            border-radius: 4px;
614        }
615
616        .kb-sidebar-heading {
617            display: flex;
618            align-items: center;
619            justify-content: space-between;
620            font-size: 11.5px;
621            font-weight: 800;
622            text-transform: uppercase;
623            letter-spacing: 0.8px;
624            color: #64748b;
625            padding: 4px 6px 12px 6px;
626            margin-bottom: 12px;
627            border-bottom: 1px solid #f1f5f9;
628        }
629
630        .kb-sidebar-heading-title {
631            display: flex;
632            align-items: center;
633            gap: 7px;
634            color: #475569;
635        }
636
637        .kb-sidebar-heading-badge {
638            background: #f0f9ff;
639            color: var(--brand-primary);
640            font-size: 10.5px;
641            font-weight: 800;
642            padding: 2px 8px;
643            border-radius: 12px;
644            border: 1px solid #bae6fd;
645        }
646
647        .kb-sidebar-group {
648            margin-bottom: 20px;
649        }
650
651        .kb-sidebar-group.single-item {
652            margin-bottom: 14px;
653        }
654
655        .kb-sidebar-group-title {
656            font-size: 14px;
657            font-weight: 700;
658            color: var(--text-heading);
659            margin-bottom: 8px;
660            display: flex;
661            align-items: center;
662            gap: 8px;
663        }
664
665        .kb-sidebar-main-link {
666            color: var(--text-heading) !important;
667            text-decoration: none;
668            display: flex;
669            align-items: center;
670            gap: 10px;
671            width: 100%;
672            padding: 8px 12px;
673            border-radius: 8px;
674            font-weight: 600;
675            font-size: 14px;
676            border-left: 3px solid transparent;
677            transition: all 0.2s ease;
678        }
679
680        .kb-sidebar-main-link:hover {
681            color: var(--brand-primary) !important;
682            background: #f8fafc;
683        }
684
685        .kb-sidebar-main-link.active {
686            color: var(--brand-primary) !important;
687            background: #f0f9ff;
688            font-weight: 700;
689            border-left: 3px solid var(--brand-primary);
690            box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
691        }
692
693        .kb-sidebar-links {
694            list-style: none;
695            padding-left: 12px;
696            margin: 0;
697            border-left: 2px solid #e2e8f0;
698        }
699
700        .kb-sidebar-links li {
701            margin-bottom: 6px;
702        }
703
704        .kb-sidebar-links a {
705            color: #475569;
706            font-size: 13px;
707            font-weight: 500;
708            text-decoration: none;
709            display: block;
710            padding: 4px 8px;
711            border-radius: 6px;
712            transition: all 0.15s ease;
713        }
714
715        .kb-sidebar-links a:hover,
716        .kb-sidebar-links a.active {
717            color: var(--brand-primary);
718            background: #f0f9ff;
719            font-weight: 700;
720        }
721
722        /* Main Content Article Body */
723        .kb-article-content {
724            max-width: 100%;
725        }
726
727        .kb-article-block {
728            margin-bottom: 72px;
729            padding-bottom: 56px;
730            border-bottom: 1px solid #f1f5f9;
731        }
732
733        .kb-article-block:last-child {
734            border-bottom: none;
735            margin-bottom: 0;
736        }
737
738        .kb-article-category-badge {
739            display: inline-flex;
740            align-items: center;
741            gap: 6px;
742            font-size: 12px;
743            font-weight: 700;
744            text-transform: uppercase;
745            letter-spacing: 0.8px;
746            color: var(--brand-primary);
747            margin-bottom: 8px;
748        }
749
750        .kb-article-title {
751            font-size: 30px;
752            font-weight: 800;
753            color: var(--text-heading);
754            letter-spacing: -0.6px;
755            margin-bottom: 16px;
756            line-height: 1.3;
757        }
758
759        .kb-article-lead {
760            font-size: 16px;
761            color: #475569;
762            margin-bottom: 24px;
763            line-height: 1.7;
764        }
765
766        .kb-h3 {
767            font-size: 21px;
768            font-weight: 800;
769            color: var(--text-heading);
770            margin-top: 52px;
771            margin-bottom: 16px;
772            letter-spacing: -0.4px;
773            border-left: 3.5px solid var(--brand-primary);
774            padding-left: 12px;
775        }
776
777        .kb-article-lead + .kb-h3,
778        .kb-article-block > .kb-h3:first-of-type {
779            margin-top: 24px;
780        }
781
782        .kb-h4 {
783            font-size: 16px;
784            font-weight: 700;
785            color: var(--text-heading);
786            margin-top: 28px;
787            margin-bottom: 12px;
788        }
789
790        /* Alert Callouts */
791        .kb-callout {
792            border-radius: var(--radius-md);
793            padding: 18px 22px;
794            margin: 24px 0;
795            border-left: 4px solid;
796            font-size: 14px;
797            line-height: 1.65;
798        }
799
800        .kb-callout-tip {
801            background: #f0fdf4;
802            border-color: #22c55e;
803            color: #166534;
804        }
805
806        .kb-callout-warning {
807            background: #fffbeb;
808            border-color: #f59e0b;
809            color: #92400e;
810        }
811
812        .kb-callout-info {
813            background: #f0f9ff;
814            border-color: #0284c7;
815            color: #075985;
816        }
817
818        .kb-callout-danger {
819            background: #fef2f2;
820            border-color: #ef4444;
821            color: #991b1b;
822        }
823
824        .kb-callout-title {
825            font-weight: 800;
826            margin-bottom: 6px;
827            display: flex;
828            align-items: center;
829            gap: 8px;
830        }
831
832        /* Step Guide Component */
833        .kb-steps-list {
834            margin: 24px 0;
835            padding: 0;
836            list-style: none;
837        }
838
839        .kb-step-item {
840            position: relative;
841            padding-left: 48px;
842            margin-bottom: 26px;
843        }
844
845        .kb-step-number {
846            position: absolute;
847            left: 0;
848            top: 0;
849            width: 32px;
850            height: 32px;
851            background: var(--brand-primary);
852            color: #ffffff;
853            border-radius: 50%;
854            display: flex;
855            align-items: center;
856            justify-content: center;
857            font-weight: 800;
858            font-size: 14px;
859            box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
860        }
861
862        .kb-step-title {
863            font-size: 17px;
864            font-weight: 700;
865            color: var(--text-heading);
866            margin-bottom: 6px;
867        }
868
869        .kb-step-desc {
870            color: #475569;
871            font-size: 14px;
872            line-height: 1.65;
873        }
874
875        /* Visual Feature Highlights / Mockups */
876        .kb-mockup-card {
877            background: #0f172a;
878            border-radius: var(--radius-md);
879            padding: 22px;
880            color: #e2e8f0;
881            margin: 24px 0;
882            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
883        }
884
885        .kb-mockup-header {
886            display: flex;
887            align-items: center;
888            justify-content: space-between;
889            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
890            padding-bottom: 12px;
891            margin-bottom: 16px;
892        }
893
894        .kb-mockup-dots {
895            display: flex;
896            gap: 6px;
897        }
898
899        .kb-mockup-dot {
900            width: 10px;
901            height: 10px;
902            border-radius: 50%;
903        }
904
905        .kb-mockup-dot.red { background: #ef4444; }
906        .kb-mockup-dot.yellow { background: #f59e0b; }
907        .kb-mockup-dot.green { background: #10b981; }
908
909        .kb-mockup-title {
910            font-size: 12px;
911            font-family: var(--font-code);
912            color: #94a3b8;
913        }
914
915        /* Real Screenshot Preview Cards */
916        .kb-screenshot-card {
917            background: #ffffff;
918            border: 1px solid var(--border-color);
919            border-radius: var(--radius-md);
920            margin: 24px 0;
921            overflow: hidden;
922            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
923            transition: transform 0.2s ease, box-shadow 0.2s ease;
924        }
925
926        .kb-screenshot-card:hover {
927            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
928        }
929
930        .kb-screenshot-header {
931            background: #f8fafc;
932            border-bottom: 1px solid var(--border-color);
933            padding: 10px 16px;
934            display: flex;
935            align-items: center;
936            justify-content: space-between;
937        }
938
939        .kb-screenshot-title {
940            font-size: 13px;
941            font-weight: 600;
942            color: #475569;
943            display: flex;
944            align-items: center;
945            gap: 8px;
946        }
947
948        .kb-screenshot-body {
949            background: #f8fafc;
950            padding: 0;
951            display: flex;
952            align-items: center;
953            justify-content: center;
954            overflow: hidden;
955        }
956
957        .kb-screenshot-img {
958            width: 100%;
959            height: auto;
960            display: block;
961            border-bottom-left-radius: var(--radius-md);
962            border-bottom-right-radius: var(--radius-md);
963        }
964
965        .kb-code-box {
966            background: #1e293b;
967            border-radius: 8px;
968            padding: 14px;
969            font-family: var(--font-code);
970            font-size: 13px;
971            color: #38bdf8;
972            overflow-x: auto;
973            border: 1px solid rgba(255, 255, 255, 0.05);
974            margin: 12px 0;
975            line-height: 1.6;
976            white-space: pre-wrap;
977        }
978
979        /* UI Feature Showcase Table */
980        .kb-table {
981            width: 100%;
982            border-collapse: collapse;
983            margin: 24px 0;
984            font-size: 14px;
985        }
986
987        .kb-table th {
988            background: #f8fafc;
989            color: var(--text-heading);
990            font-weight: 700;
991            padding: 14px 18px;
992            border-bottom: 2px solid #e2e8f0;
993            text-align: left;
994        }
995
996        .kb-table td {
997            padding: 14px 18px;
998            border-bottom: 1px solid #f1f5f9;
999            color: #475569;
1000            vertical-align: top;
1001        }
1002
1003        .kb-table tr:hover td {
1004            background: #f8fafc;
1005        }
1006
1007        .badge-error {
1008            background: #fee2e2;
1009            color: #b91c1c;
1010            font-weight: 700;
1011            font-size: 11px;
1012            padding: 4px 8px;
1013            border-radius: 6px;
1014            display: inline-block;
1015        }
1016
1017        .badge-success {
1018            background: #dcfce7;
1019            color: #15803d;
1020            font-weight: 700;
1021            font-size: 11px;
1022            padding: 4px 8px;
1023            border-radius: 6px;
1024            display: inline-block;
1025        }
1026
1027        .badge-info {
1028            background: #e0f2fe;
1029            color: #0369a1;
1030            font-weight: 700;
1031            font-size: 11px;
1032            padding: 4px 8px;
1033            border-radius: 6px;
1034            display: inline-block;
1035        }
1036
1037        .badge-warning {
1038            background: #fef3c7;
1039            color: #b45309;
1040            font-weight: 700;
1041            font-size: 11px;
1042            padding: 4px 8px;
1043            border-radius: 6px;
1044            display: inline-block;
1045        }
1046
1047        /* Responsive Grid & Scenario Cards (Fixes float snagging) */
1048        .kb-grid-2 {
1049            display: grid;
1050            grid-template-columns: repeat(2, 1fr);
1051            gap: 16px;
1052            margin-bottom: 24px;
1053        }
1054
1055        .kb-grid-3 {
1056            display: grid;
1057            grid-template-columns: repeat(3, 1fr);
1058            gap: 16px;
1059            margin-bottom: 24px;
1060        }
1061
1062        @media (max-width: 991px) {
1063            .kb-grid-3 {
1064                grid-template-columns: 1fr;
1065            }
1066        }
1067
1068        @media (max-width: 767px) {
1069            .kb-grid-2 {
1070                grid-template-columns: 1fr;
1071            }
1072        }
1073
1074        .kb-scenario-card {
1075            background: #f8fafc;
1076            border: 1px solid var(--border-light);
1077            border-radius: 8px;
1078            padding: 16px;
1079            height: 100%;
1080            display: flex;
1081            flex-direction: column;
1082        }
1083
1084        .kb-scenario-card-title {
1085            font-weight: 800;
1086            font-size: 14px;
1087            margin-bottom: 8px;
1088            display: flex;
1089            align-items: center;
1090            gap: 6px;
1091        }
1092
1093        .kb-scenario-card-desc {
1094            font-size: 13px;
1095            color: #64748b;
1096            margin: 0;
1097            line-height: 1.6;
1098            flex-grow: 1;
1099        }
1100
1101        /* Real-World Example cards: two-panel "what happened / how Insights helped" story */
1102        .kb-case-study {
1103            border: 1px solid var(--border-light);
1104            border-radius: var(--radius-lg);
1105            overflow: hidden;
1106            margin: 28px 0;
1107            box-shadow: var(--shadow-subtle);
1108        }
1109
1110        .kb-case-study-header {
1111            background: var(--brand-gradient);
1112            color: #ffffff;
1113            padding: 13px 20px;
1114            font-weight: 800;
1115            font-size: 13px;
1116            display: flex;
1117            align-items: center;
1118            gap: 8px;
1119        }
1120
1121        .kb-case-study-body {
1122            display: grid;
1123            grid-template-columns: 1fr 1fr;
1124        }
1125
1126        @media (max-width: 767px) {
1127            .kb-case-study-body {
1128                grid-template-columns: 1fr;
1129            }
1130        }
1131
1132        .kb-case-study-panel {
1133            padding: 20px 22px;
1134        }
1135
1136        .kb-case-study-panel + .kb-case-study-panel {
1137            border-left: 1px solid var(--border-light);
1138        }
1139
1140        @media (max-width: 767px) {
1141            .kb-case-study-panel + .kb-case-study-panel {
1142                border-left: none;
1143                border-top: 1px solid var(--border-light);
1144            }
1145        }
1146
1147        .kb-case-study-situation {
1148            background: #fffbeb;
1149        }
1150
1151        .kb-case-study-solution {
1152            background: #f0fdf4;
1153        }
1154
1155        .kb-case-study-label {
1156            font-size: 11px;
1157            font-weight: 800;
1158            text-transform: uppercase;
1159            letter-spacing: 0.6px;
1160            margin-bottom: 10px;
1161            display: flex;
1162            align-items: center;
1163            gap: 6px;
1164        }
1165
1166        .kb-case-study-situation .kb-case-study-label {
1167            color: #92400e;
1168        }
1169
1170        .kb-case-study-solution .kb-case-study-label {
1171            color: #166534;
1172        }
1173
1174        .kb-case-study-text {
1175            font-size: 13.5px;
1176            line-height: 1.65;
1177            color: #334155;
1178            margin: 0;
1179        }
1180
1181        /* Architecture Support Banner Section (Before FAQ) */
1182        .kb-support-cta-section {
1183            padding: 20px 0 60px 0;
1184            background: #ffffff;
1185        }
1186
1187        .kb-support-cta-box {
1188            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0369a1 100%);
1189            border-radius: var(--radius-lg);
1190            padding: 36px 40px;
1191            color: #ffffff;
1192            box-shadow: 0 20px 40px -15px rgba(2, 132, 199, 0.25);
1193            position: relative;
1194            overflow: hidden;
1195            border: 1px solid rgba(255, 255, 255, 0.1);
1196        }
1197
1198        .kb-support-cta-box::before {
1199            content: '';
1200            position: absolute;
1201            top: -50%;
1202            right: -10%;
1203            width: 350px;
1204            height: 350px;
1205            background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0) 70%);
1206            border-radius: 50%;
1207            pointer-ev
1207ents: none;
1208        }
1209
1210        .kb-support-cta-badge {
1211            display: inline-flex;
1212            align-items: center;
1213            gap: 6px;
1214            background: rgba(56, 189, 248, 0.15);
1215            border: 1px solid rgba(56, 189, 248, 0.3);
1216            color: #38bdf8;
1217            font-size: 12px;
1218            font-weight: 700;
1219            padding: 4px 12px;
1220            border-radius: 20px;
1221            margin-bottom: 14px;
1222            text-transform: uppercase;
1223            letter-spacing: 0.5px;
1224        }
1225
1226        .kb-support-cta-heading {
1227            font-size: 24px;
1228            font-weight: 800;
1229            color: #ffffff;
1230            margin-bottom: 10px;
1231            letter-spacing: -0.5px;
1232            line-height: 1.3;
1233        }
1234
1235        .kb-support-cta-text {
1236            font-size: 14px;
1237            color: #cbd5e1;
1238            line-height: 1.6;
1239            margin: 0;
1240            max-width: 680px;
1241        }
1242
1243        .kb-btn-support-cta {
1244            background: #ffffff;
1245            color: #0284c7 !important;
1246            font-weight: 800;
1247            font-size: 14px;
1248            padding: 14px 24px;
1249            border-radius: 10px;
1250            display: inline-flex;
1251            align-items: center;
1252            gap: 10px;
1253            text-decoration: none !important;
1254            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
1255            transition: all 0.2s ease;
1256            white-space: nowrap;
1257        }
1258
1259        .kb-btn-support-cta:hover {
1260            background: #f0f9ff;
1261            color: #0369a1 !important;
1262            transform: translateY(-2px);
1263            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
1264        }
1265
1266        .kb-btn-ticket:hover {
1267            transform: translateY(-2px);
1268            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
1269        }
1270
1271        /* FAQ Accordion Section */
1272        .kb-faq-section {
1273            padding: 64px 0;
1274            background: #f8fafc;
1275            border-top: 1px solid var(--border-light);
1276        }
1277
1278        .kb-faq-container {
1279            max-width: 900px;
1280            margin: 0 auto;
1281        }
1282
1283        .kb-faq-item {
1284            background: #ffffff;
1285            border: 1px solid var(--border-light);
1286            border-radius: var(--radius-md);
1287            margin-bottom: 16px;
1288            overflow: hidden;
1289            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
1290            transition: border-color 0.2s ease;
1291        }
1292
1293        .kb-faq-item:hover {
1294            border-color: #cbd5e1;
1295        }
1296
1297        .kb-faq-question {
1298            padding: 20px 24px;
1299            font-size: 16px;
1300            font-weight: 700;
1301            color: var(--text-heading);
1302            cursor: pointer;
1303            display: flex;
1304            align-items: center;
1305            justify-content: space-between;
1306            user-select: none;
1307        }
1308
1309        .kb-faq-question i {
1310            color: #94a3b8;
1311            transition: transform 0.25s ease;
1312            font-size: 14px;
1313        }
1314
1315        .kb-faq-item.active .kb-faq-question i {
1316            transform: rotate(180deg);
1317            color: var(--brand-primary);
1318        }
1319
1320        .kb-faq-answer {
1321            padding: 0 24px 22px 24px;
1322            font-size: 14.5px;
1323            color: #475569;
1324            line-height: 1.7;
1325            display: none;
1326            border-top: 1px solid #f8fafc;
1327        }
1328
1329        /* Modern Footer */
1330        .footer-modern {
1331            background: #090d16;
1332            color: #94a3b8;
1333            padding: 60px 0 30px 0;
1334            border-top: 1px solid rgba(255, 255, 255, 0.08);
1335            font-size: 14px;
1336        }
1337
1338        .footer-brand {
1339            font-size: 20px;
1340            font-weight: 800;
1341            color: #ffffff;
1342            margin-bottom: 12px;
1343        }
1344
1345        .footer-links a {
1346            color: #94a3b8;
1347            margin-right: 20px;
1348            text-decoration: none;
1349            transition: color 0.2s ease;
1350        }
1351
1352        .footer-links a:hover {
1353            color: #ffffff;
1354        }
1355    </style>
1356</head>
1357<body>
1358
1359<!-- Fixed Navigation Header -->
1360<div class='navbar-wrapper cbp-af-header'>
1361    <div class='container'>
1362        <div class='navbar' role='navigation'>
1363            <div class='navbar-header'>
1364                <a class='navbar-brand' href='https://insightspod.io'>
1365                    <i class="fa-solid fa-cubes-stacked" style="color: #0284c7; font-size: 22px;"></i>
1366                    <span class="brand-text-insights">Insights</span>
1367                    <span class="brand-text-podio">for Podio</span>
1368                </a>
1369            </div>
1370            <div>
1371                <ul class='navbar-nav pull-right'>
1372                    <li><a href='https://insightspod.io/#features'><i class="fa-solid fa-diagram-project me-1"></i> Features</a></li>
1373                    <li><a href="https://insightspod.io/#globiflow"><i class="fa-solid fa-bolt me-1"></i> Workflow Insights</a></li>
1374                    <li><a href='https://insightspod.io/#pricing'><i class="fa-solid fa-tag me-1"></i> Pricing</a></li>
1375                    <li class="active"><a href='https://insightspod.io/help'><i class="fa-solid fa-circle-question me-1"></i> Help Center</a></li>
1376                                            <li><a class='login-btn-nav' href='https://podio.com/oauth/authorize?response_type=code&amp;client_id=insights-for-podio-2id8b6&amp;redirect_uri=https://insightspod.io/welcome&amp;scope='><i class="fa-solid fa-right-to-bracket me-1"></i> &nbsp; Login</a></li>
1377                                    </ul>
1378            </div>
1379        </div>
1380    </div>
1381</div>
1382
1383<!-- Hero Search Section (Snov.io Model) -->
1384<section class="kb-hero">
1385    <div class="container">
1386        <div class="kb-hero-badge">
1387            <i class="fa-solid fa-book-bookmark"></i> Knowledge Base & Engineering Documentation
1388        </div>
1389        <h1 class="kb-hero-title">How can we help you with Podio today?</h1>
1390        <p class="kb-hero-subtitle">
1391            Deep technical guides, Podio Workflow Automation (GlobiFlow) step-level debugging, calculation dependency resolution, and workspace change versioning.
1392        </p>
1393
1394        <div class="kb-search-container">
1395            <div class="kb-search-input-wrapper">
1396                <i class="fa-solid fa-magnifying-glass kb-search-icon"></i>
1397                <input type="text" id="kbSearchInput" class="kb-search-input" placeholder="Search documentation, calculation formulas, workflow tokens, or version history..." autocomplete="off">
1398                <button type="button" id="kbSearchClear" class="kb-search-clear"><i class="fa-solid fa-xmark"></i></button>
1399                <span class="kb-search-badge hidden-xs">Ctrl + K</span>
1400                
1401                <!-- Live Instant Search Dropdown -->
1402                <div id="kbSearchDropdown" class="kb-search-dropdown"></div>
1403            </div>
1404            <div class="kb-search-tags">
1405                <span class="kb-search-tags-label">Popular topics:</span>
1406                <a href="#art-calculation-inspector" class="kb-tag-pill">Calculation Inspector</a>
1407                <a href="#art-split-diff" class="kb-tag-pill">Workflow Automation Split Diff</a>
1408                <a href="#art-org-versioning" class="kb-tag-pill">Change History &amp; Versioning</a>
1409                <a href="#art-deleted-fields" class="kb-tag-pill">Deleted Fields in Calcs</a>
1410                <a href="#art-broken-tokens" class="kb-tag-pill">Workflow Error Fixes</a>
1411                <a href="#art-health-score" class="kb-tag-pill">Error Diagnostic Checks</a>
1412                <a href="#art-forward-graph" class="kb-tag-pill">Dependency Graphs</a>
1413                <a href="#art-backward-graph" class="kb-tag-pill">Impact Analysis Graph</a>
1414                <a href="#art-excel-export" class="kb-tag-pill">Schema Excel Export</a>
1415            </div>
1416        </div>
1417    </div>
1418</section>
1419
1420<!-- Snov.io-Style 8 Category Cards Grid -->
1421<section class="kb-categories-section">
1422    <div class="container">
1423        <div class="kb-section-header">
1424            <h2 class="kb-section-title">Explore by Knowledge Pillar</h2>
1425            <p class="kb-section-desc">Select a category below to jump directly into detailed walkthroughs, error diagnostics, and checklists.</p>
1426        </div>
1427
1428        <div class="kb-cards-grid" id="kbCardsGrid">
1429
1430            <!-- Card 1: Getting Started & Workspace Setup -->
1431            <div class="kb-card" data-keywords="oauth login sync refresh error check organization workspace access setup pull analyze structure">
1432                <div class="kb-card-icon-wrapper icon-blue">
1433                    <i class="fa-solid fa-rocket"></i>
1434                </div>
1435                <h3 class="kb-card-title">Getting Started &amp; Setup</h3>
1436                <p class="kb-card-desc">Authenticate your account, pull your organization structure, and start analyzing apps, calculations, and workflows.</p>
1437                <ul class="kb-card-links">
1438                    <li><a href="#art-getting-started"><i class="fa-solid fa-chevron-right"></i> Pulling Organization Structure &amp; Apps</a></li>
1439                    <li><a href="#art-workspace-sync"><i class="fa-solid fa-chevron-right"></i> Multi-Org Switching &amp; Refreshing</a></li>
1440                    <li><a href="#art-refresh-emails"><i class="fa-solid fa-chevron-right"></i> Refresh-Completion Audit Emails</a></li>
1441                </ul>
1442                <div class="kb-card-footer">
1443                    <a href="#cat-getting-started">View guide <i class="fa-solid fa-arrow-right"></i></a>
1444                </div>
1445            </div>
1446
1447            <!-- Card 2: Dashboard Error Checks -->
1448            <div class="kb-card" data-keywords="error dashboard calculation deleted renamed 100 fields ast syntax views depth too deep audit counts">
1449                <div class="kb-card-icon-wrapper icon-rose">
1450                    <i class="fa-solid fa-triangle-exclamation"></i>
1451                </div>
1452                <h3 class="kb-card-title">Dashboard Error Checks</h3>
1453                <p class="kb-card-desc">Workspace-wide error diagnostic summary, renamed field alerts, saved views, and 100-field limit checks.</p>
1454                <ul class="kb-card-links">
1455                    <li><a href="#art-health-score"><i class="fa-solid fa-chevron-right"></i> Error Diagnostic Summary &amp; Audit Counts</a></li>
1456                    <li><a href="#art-renamed-fields"><i class="fa-solid fa-chevron-right"></i> Renamed Fields &amp; Integration Breaks</a></li>
1457                    <li><a href="#art-saved-views"><i class="fa-solid fa-chevron-right"></i> Saved Views &amp;
1457 Relational App Depth</a></li>
1458                    <li><a href="#art-100-fields"><i class="fa-solid fa-chevron-right"></i> Field Limit Best Practice &amp; Performance</a></li>
1459                </ul>
1460                <div class="kb-card-footer">
1461                    <a href="#cat-dashboard-errors">View error checks <i class="fa-solid fa-arrow-right"></i></a>
1462                </div>
1463            </div>
1464
1465            <!-- Card 3: Calculation Field Inspector -->
1466            <div class="kb-card" data-keywords="calculation formula deleted field script reference incoming outgoing depth too deep javascript">
1467                <div class="kb-card-icon-wrapper icon-cyan">
1468                    <i class="fa-solid fa-calculator"></i>
1469                </div>
1470                <h3 class="kb-card-title">Calculation &amp; Formula Inspector</h3>
1471                <p class="kb-card-desc">JavaScript formula syntax parsing, deleted field tokens, incoming/outgoing reference mapping, and depth limits.</p>
1472                <ul class="kb-card-links">
1473                    <li><a href="#art-deleted-fields"><i class="fa-solid fa-chevron-right"></i> Deleted Fields in Calculations (The "Silent Bug")</a></li>
1474                    <li><a href="#art-calculation-inspector"><i class="fa-solid fa-chevron-right"></i> Relational Reference Breakdown (In/Out)</a></li>
1475                    <li><a href="#art-too-deep-error"><i class="fa-solid fa-chevron-right"></i> Calculation "Too Deep" (&gt;10 Depth Error)</a></li>
1476                </ul>
1477                <div class="kb-card-footer">
1478                    <a href="#cat-calculations">View calculations guide <i class="fa-solid fa-arrow-right"></i></a>
1479                </div>
1480            </div>
1481
1482            <!-- Card 4: Podio Workflow Automation Health -->
1483            <div class="kb-card" data-keywords="globiflow pwa workflow automation token pfref pfnew pfprev webhook date flow steps customprep updateitem createitem health error where used">
1484                <div class="kb-card-icon-wrapper icon-amber">
1485                    <i class="fa-solid fa-bolt"></i>
1486                </div>
1487                <h3 class="kb-card-title">Workflow Automation (GlobiFlow)</h3>
1488                <p class="kb-card-desc">Automatic workflow error detection, identifying missing target fields, and broken variable tokens.</p>
1489                <ul class="kb-card-links">
1490                    <li><a href="#cat-globiflow-health"><i class="fa-solid fa-chevron-right"></i> The 4 Most Common Causes of Step Errors</a></li>
1491                    <li><a href="#art-broken-tokens"><i class="fa-solid fa-chevron-right"></i> Step-by-Step Guide: How to Fix a Broken Step</a></li>
1492                    <li><a href="#art-manual-flows"><i class="fa-solid fa-chevron-right"></i> Multi-App Trigger Trees &amp; Cascading Loops</a></li>
1493                </ul>
1494                <div class="kb-card-footer">
1495                    <a href="#cat-globiflow-health">View workflow guide <i class="fa-solid fa-arrow-right"></i></a>
1496                </div>
1497            </div>
1498
1499            <!-- Card 5: Change History & Diffs -->
1500            <div class="kb-card" data-keywords="version history split diff comparison timeline revision audit change snapshot diffing parameters">
1501                <div class="kb-card-icon-wrapper icon-purple">
1502                    <i class="fa-solid fa-code-compare"></i>
1503                </div>
1504                <h3 class="kb-card-title">Change History</h3>
1505                <p class="kb-card-desc">Complete version control for Podio: 4 snapshot levels, field timelines, and side-by-side Workflow Split Diffs.</p>
1506                <ul class="kb-card-links">
1507                    <li><a href="#art-org-versioning"><i class="fa-solid fa-chevron-right"></i> Why Version Control is Vital (No "Undo" in Podio)</a></li>
1508                    <li><a href="#art-snapshot-compare"><i class="fa-solid fa-chevron-right"></i> Snapshot Comparisons (Org &amp; Space Level)</a></li>
1509                    <li><a href="#art-app-versioning"><i class="fa-solid fa-chevron-right"></i> App Field Revision Timelines</a></li>
1510                    <li><a href="#art-split-diff"><i class="fa-solid fa-chevron-right"></i> Workflow Automation Split Diff Viewer</a></li>
1511                </ul>
1512                <div class="kb-card-footer">
1513                    <a href="#cat-change-history">View change history <i class="fa-solid fa-arrow-right"></i></a>
1514                </div>
1515            </div>
1516
1517            <!-- Card 6: Dependency Graphs -->
1518            <div class="kb-card" data-keywords="graph dependency forward backward impact analysis hierarchy relationship architecture safe delete">
1519                <div class="kb-card-icon-wrapper icon-emerald">
1520                    <i class="fa-solid fa-diagram-project"></i>
1521                </div>
1522                <h3 class="kb-card-title">Dependency Graphs</h3>
1523                <p class="kb-card-desc">Interactive visual maps of forward calculation dependencies and backward impact analysis.</p>
1524                <ul class="kb-card-links">
1525                    <li><a href="#art-forward-graph"><i class="fa-solid fa-chevron-right"></i> Forward Calculation Dependency Graph</a></li>
1526                    <li><a href="#art-backward-graph"><i class="fa-solid fa-chevron-right"></i> Backward Impact Analysis ("Safe-to-Delete")</a></li>
1527                    <li><a href="#art-relational-graph"><i class="fa-solid fa-chevron-right"></i> App-to-App Relational Connections</a></li>
1528                </ul>
1529                <div class="kb-card-footer">
1530                    <a href="#cat-dependency-graphs">View all graphs <i class="fa-solid fa-arrow-right"></i></a>
1531                </div>
1532            </div>
1533
1534            <!-- Card 7: Documentation & Exports -->
1535            <div class="kb-card" data-keywords="excel export documentation notes backup audit depth report workbook sheets">
1536                <div class="kb-card-icon-wrapper icon-teal">
1537                    <i class="fa-solid fa-file-excel"></i>
1538                </div>
1539                <h3 class="kb-card-title">Documentation &amp; Exports</h3>
1540                <p class="kb-card-desc">In-app developer notes and downloadable Excel schema documentation exports.</p>
1541                <ul class="kb-card-links">
1542                    <li><a href="#art-inapp-notes"><i class="fa-solid fa-chevron-right"></i> In-App Architectural Developer Notes</a></li>
1543                    <li><a href="#art-excel-export"><i class="fa-solid fa-chevron-right"></i> App Schema Documentation Export (Excel)</a></li>
1544                </ul>
1545                <div class="kb-card-footer">
1546                    <a href="#cat-documentation-exports">View export guides <i class="fa-solid fa-arrow-right"></i></a>
1547                </div>
1548            </div>
1549
1550            <!-- Card 8: Chrome Extension -->
1551            <div class="kb-card" data-keywords="chrome extension podio pwa sidebar fields formula debug overlay where used template modify">
1552                <div class="kb-card-icon-wrapper icon-indigo">
1553                    <i class="fa-solid fa-puzzle-piece"></i>
1554                </div>
1555                <h3 class="kb-card-title">Chrome Extension</h3>
1556                <p class="kb-card-desc">In-Podio "Modify Template" inspector (app errors, inbound/outbound references) and workflow debugging.</p>
1557                <ul class="kb-card-links">
1558                    <li><a href="#art-chrome-setup"><i class="fa-solid fa-chevron-right"></i> Installing the Chrome Extension</a></li>
1559                    <li><a href="#art-chrome-features"><i class="fa-solid fa-chevron-right"></i> "Modify Template" App &amp; Field Inspector</a></li>
1560                    <li><a href="#art-chrome-globiflow"><i class="fa-solid fa-chevron-right"></i> Workflow In-Editor Error Detection</a></li>
1561                </ul>
1562                <div class="kb-card-footer">
1563                    <a href="#cat-chrome-extension">View extension guide <i class="fa-solid fa-arrow-right"></i></a>
1564                </div>
1565            </div>
1566
1567        </div>
1568    </div>
1569</section>
1570
1571<!-- 2-Column Detailed Reading Hub Section -->
1572<section class="kb-reader-section">
1573    <div class="container">
1574        <div class="kb-reader-layout">
1575
1576            <!-- Sticky Left Sidebar (Clean Single Menu Items, No Submenus) -->
1577            <aside class="kb-sidebar-nav">
1578                <div class="kb-sidebar-heading">
1579                    <span class="kb-sidebar-heading-title">
1580                        <i class="fa-solid fa-compass" style="color: var(--brand-primary); font-size: 13px;"></i> Knowledge Topics
1581                    </span>
1582                    <span class="kb-sidebar-heading-badge">8 Guides</span>
1583                </div>
1584
1585                <!-- 1. Getting Started -->
1586                <div class="kb-sidebar-group single-item">
1587                    <div class="kb-sidebar-group-title">
1588                        <a href="#cat-getting-started" class="kb-sidebar-main-link"><i class="fa-solid fa-rocket text-primary"></i> Getting Started</a>
1589                    </div>
1590                </div>
1591
1592                <!-- 2. Dashboard Error Checks -->
1593                <div class="kb-sidebar-group single-item">
1594                    <div class="kb-sidebar-group-title">
1595                        <a href="#cat-dashboard-errors" class="kb-sidebar-main-link"><i class="fa-solid fa-triangle-exclamation text-danger"></i> Dashboard Error Checks</a>
1596                    </div>
1597                </div>
1598
1599                <!-- 3. Calculation Field Inspector -->
1600                <div class="kb-sidebar-group single-item">
1601                    <div class="kb-sidebar-group-title">
1602                        <a href="#cat-calculations" class="kb-sidebar-main-link"><i class="fa-solid fa-calculator text-cyan"></i> Calculation Inspector</a>
1603                    </div>
1604                </div>
1605
1606                <!-- 4. Workflow Automation (GlobiFlow) -->
1607                <div class="kb-sidebar-group single-item">
1608                    <div class="kb-sidebar-group-title">
1609                        <a href="#cat-globiflow-health" class="kb-sidebar-main-link"><i class="fa-solid fa-bolt text-warning"></i> Workflow Automation (GlobiFlow)</a>
1610                    </div>
1611                </div>
1612
1613                <!-- 5. Change History -->
1614                <div class="kb-sidebar-group single-item">
1615                    <div class="kb-sidebar-group-title">
1616                        <a href="#cat-change-history" class="kb-sidebar-main-link"><i class="fa-solid fa-code-compare text-info"></i> Change History</a>
1617                    </div>
1618                </div>
1619
1620                <!-- 6. Dependency Graphs -->
1621                <div class="kb-sidebar-group single-item">
1622                    <div class="kb-sidebar-group-title">
1623                        <a href="#cat-dependency-graphs" class="kb-sidebar-main-link"><i class="fa-solid fa-diagram-project text-success"></i> Dependency Graphs</a>
1624                    </div>
1625                </div>
1626
1627                <!-- 7. Documentation & Exports -->
1628                <div class="kb-sidebar-group single-item">
1629                    <div class="kb-sidebar-group-title">
1630                        <a href="#cat-documentation-exports" class="kb-sidebar-main-link"><i class="fa-solid fa-file-excel text-teal"></i> Documentation &amp; Exports</a>
1631                    </div>
1632                </div>
1633
1634                <!-- 8. Chrome Extension -->
1635                <div class="kb-sidebar-group single-item">
1636                    <div class="kb-sidebar-group-title">
1637                        <a href="#cat-chrome-extension" class="kb-sidebar-main-link"><i class="fa-solid fa-puzzle-piece text-indigo"></i> Chrome Extension</a>
1638                    </div>
1639                </div>
1640            </aside>
1641
1642            <!-- Main Article Content Body -->
1643            <main class="kb-article-content">
1644
1645                <!-- 1. Deep Dive: Getting Started & Workspace Setup -->
1646                <article class="kb-article-block" id="cat-getting-started">
1647                    <span class="kb-article-category-badge"><i class="fa-solid fa-rocket"></i> Getting Started &amp; Workspace Setup</span>
1648                    <h2 class="kb-article-title" id="art-getting-started">Pulling Organization Structure &amp; Starting Architecture Analysis</h2>
1649                    <p class="kb-article-lead">
1650                        Once you authenticate your Podio account, Insights automatically discovers all the Organizations and Workspaces you have access to. With a single click, you can pull your entire organization structure and immediately begin deep architectural analysis.
1651                    </p>
1652
1653                    <h3 class="kb-h3">How Organization Structure Analysis Works</h3>
1654                    <p>
1655                        When you synchronize an organization or workspace, Insights ingests your complete system blueprint:
1656                    </p>
1657                    <ul>
1658                        <li><strong>Automated Schema Discovery:</strong> Insights pulls all Apps, Fields, Settings, and Relationship connections across your workspaces.</li>
1659                        <li><strong>Calculation &amp; Formula Parsing:</strong> Ingests every JavaScript calculation formula to detect broken field references, missing tokens, and mathematical errors.</li>
1660                        <li><strong>Workflow Automation Blueprinting:</strong> Downloads and maps all automated workflows, action steps, triggers, and notification templates in Podio Workflow Automation (GlobiFlow).</li>
1661                        <li><strong>Instant Baseline Version Snapshot:</strong> Captures an immutable snapshot of your entire structure so you can track all future changes and compare revisions over time.</li>
1662                        <li><strong>Zero Item Data Storage:</strong>
1662 Insights only analyzes and versions your system architecture and formulas — your confidential client and item records remain strictly inside Podio.</li>
1663                    </ul>
1664
1665                    <h3 class="kb-h3" id="art-workspace-sync">Multi-Organization Switching &amp; On-Demand Refresh</h3>
1666                    <p>
1667                        If you manage multiple internal business units or external client accounts, you can switch between organizations seamlessly using the top organization dropdown. Whenever your team modifies an app or edits a workflow in Podio, click <strong>"Refresh Organization + Workflows"</strong> (or the Space Refresh button) to pull the latest changes, refresh diagnostic error counts, and inspect version diffs.
1668                    </p>
1669
1670                    <h3 class="kb-h3" id="art-refresh-emails">Automated Refresh-Completion Audit Emails</h3>
1671                    <p>
1672                        Whenever an organization or space refresh finishes, Insights automatically dispatches a comprehensive <strong>Refresh Completion Audit Email</strong> directly to your inbox. This ensures you are immediately notified of system health status and version changes without having to manually monitor the refresh progress in your browser.
1673                    </p>
1674
1675                    <div class="kb-mockup-card">
1676                        <div class="kb-mockup-header">
1677                            <div class="kb-mockup-dots">
1678                                <span class="kb-mockup-dot green"></span>
1679                            </div>
1680                            <span class="kb-mockup-title">Refresh Completion Email &bull; "Your Podio Refresh is Complete"</span>
1681                        </div>
1682                        <div style="background: #0f172a; border-radius: 6px; padding: 14px; color: #f8fafc; font-size: 12.5px; line-height: 1.6;">
1683                            <div style="font-weight: 700; color: #38bdf8; margin-bottom: 8px;">
1684                                <i class="fa-solid fa-envelope-circle-check"></i> Audit Report Summary for Organization: "Solar Operations Hub"
1685                            </div>
1686                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; background: #1e293b; padding: 10px; border-radius: 6px; text-align: center;">
1687                                <div><span style="color: #94a3b8; font-size: 11px;">WORKSPACES</span><br><strong style="font-size: 15px; color: #ffffff;">8</strong></div>
1688                                <div><span style="color: #94a3b8; font-size: 11px;">APPS AUDITED</span><br><strong style="font-size: 15px; color: #ffffff;">42</strong></div>
1689                                <div><span style="color: #94a3b8; font-size: 11px;">WORKFLOWS</span><br><strong style="font-size: 15px; color: #ffffff;">189</strong></div>
1690                            </div>
1691                            <div style="color: #cbd5e1; margin-top: 8px;">
1692                                &bull; <strong style="color: #4ade80;">Snapshot Status:</strong> Version #4 captured (New Snapshot with schema changes)<br>
1693                                &bull; <strong style="color: #f87171;">Health Issues Detected:</strong> 2 critical calculation errors &bull; 1 workflow broken step<br>
1694                                &bull; <strong style="color: #38bdf8;">Quick Action:</strong> Direct one-click buttons to open Health Details or inspect Split Diffs in Change History.
1695                            </div>
1696                        </div>
1697                    </div>
1698
1699                    <div class="kb-grid-2">
1700                        <div class="kb-scenario-card">
1701                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-bell"></i> What is Included in the Audit Email?</div>
1702                            <p class="kb-scenario-card-desc">
1703                                <strong>1. Snapshot Version:</strong> Informs you whether new changes were detected (e.g. Version #4) or if the schema was already up to date.<br>
1704                                <strong>2. System Scope:</strong> Total counts of audited Workspaces, Apps, and Workflows.<br>
1705                                <strong>3. Error Diagnostic Breakdown:</strong> Summarizes detected calculation formula errors, workflow step errors, renamed fields, and 100-field limits.<br>
1706                                <strong>4. Workflow Automation Access Notice:</strong> Flags if Podio Workflow Automation (GlobiFlow) permissions need to be reconnected.
1707                            </p>
1708                        </div>
1709
1710                        <div class="kb-scenario-card">
1711                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-arrow-up-right-from-square"></i> Direct Dashboard Jump Links</div>
1712                            <p class="kb-scenario-card-desc">
1713                                Every refresh completion email includes direct action links to <strong>"View Health &amp; App Details"</strong> and <strong>"View Change History"</strong>, letting you jump straight into the exact workspace report with a single click.
1714                            </p>
1715                        </div>
1716                    </div>
1717                </article>
1718
1719                <!-- 2. Deep Dive: Dashboard Error Checks -->
1720                <article class="kb-article-block" id="cat-dashboard-errors">
1721                    <span class="kb-article-category-badge"><i class="fa-solid fa-triangle-exclamation"></i> Architecture &amp; Schema Diagnostics</span>
1722                    <h2 class="kb-article-title" id="art-health-score">Workspace Error Diagnostics &amp; Schema Health Checks</h2>
1723                    <p class="kb-article-lead">
1724                        The Insights Dashboard automatically audits your entire workspace schema, calculation formulas, field configurations, and relational connections. The system categorizes and counts all detected issues across your apps and workflows so you can quickly resolve hidden failure points before they break production.
1725                    </p>
1726
1727                    <div class="kb-screenshot-card">
1728                        <div class="kb-screenshot-header">
1729                            <div class="kb-mockup-dots">
1730                                <span class="kb-mockup-dot red"></span>
1731                                <span class="kb-mockup-dot yellow"></span>
1732                                <span class="kb-mockup-dot green"></span>
1733                            </div>
1734                            <span class="kb-screenshot-title"><i class="fa-solid fa-gauge-high text-primary"></i> Live Organization Error Diagnostics &amp; Health Dashboard</span>
1735                        </div>
1736                        <div class="kb-screenshot-body">
1737                            <img src="https://insightspod.io/images/dashboard.png" alt="Insights for Podio Dashboard Overview" class="kb-screenshot-img">
1738                        </div>
1739                    </div>
1740
1741                    <h3 class="kb-h3">Summary of All Dashboard Error Checks</h3>
1742                    <table class="kb-table">
1743                        <thead>
1744                            <tr>
1745                                <th>Diagnostic Check</th>
1746                                <th>Severity Level</th>
1747                                <th>Real-World Risk &amp; Why It Matters</th>
1748                                <th>How Insights Protects You</th>
1749                            </tr>
1750                        </thead>
1751                        <tbody>
1752                            <tr>
1753                                <td><strong>Deleted Field in Calculation</strong></td>
1754                                <td><span class="badge-error">Critical</span></td>
1755                                <td>Calculations produce <code>null</code>, <code>NaN</code>, or calculation error boxes because a referenced field was deleted from Podio.</td>
1756                                <td>Formula parser scans JavaScript calculation syntax and flags exact deleted Field IDs in red.</td>
1757                            </tr>
1758                            <tr>
1759                                <td><strong>Broken Workflow Automations (GlobiFlow)</strong></td>
1760                                <td><span class="badge-error">Critical</span></td>
1761                                <td>Automated emails, task assignments, or status updates fail to execute, causing customer delays and lost leads.</td>
1762                                <td>Audits all 20+ workflow action step functions and highlights missing app links or unbound variables in red.</td>
1763                            </tr>
1764                            <tr>
1765                                <td><strong>Renamed Field Labels</strong></td>
1766                                <td><span class="badge-warning">Warning</span></td>
1767                                <td>External integrations (Zapier, Make, custom APIs) or legacy calculation formulas referencing old labels suddenly fail.</td>
1768                                <td>Tracks historical label modifications and displays original vs current names.</td>
1769                            </tr>
1770                            <tr>
1771                                <td><strong>Calculation "Too Deep" (&gt;10 Levels)</strong></td>
1772                                <td><span class="badge-error">Critical</span></td>
1773                                <td>Calculation chains exceeding Podio's strict 10-level limit freeze and fail to compute values across connected apps.</td>
1774                                <td>Dependency engine traces calculation trees and alerts when depth approaches or exceeds 10 levels.</td>
1775                            </tr>
1776                            <tr>
1777                                <td><strong>Apps Exceeding 100 Fields</strong></td>
1778                                <td><span class="badge-warning">Warning</span></td>
1779                                <td>Slow browser rendering, sluggish item editing, calculation timeouts, and mobile app launch crashes.</td>
1780                                <td>Alerts administrators when apps approach or cross Podio's recommended 100-field ceiling.</td>
1781                            </tr>
1782                            <tr>
1783                                <td><strong>
1783Deep Relational App Chains</strong></td>
1784                                <td><span class="badge-info">Advisory</span></td>
1785                                <td>Chained relationships nested 4+ levels deep create slow database filtering and report calculation lag.</td>
1786                                <td>Computes <strong>App Depth</strong> hierarchy (Level 0 Root to Level 3+ Chained) and flags over-nested apps.</td>
1787                            </tr>
1788                        </tbody>
1789                    </table>
1790
1791                    <h3 class="kb-h3" id="art-renamed-fields">Renamed Fields: Workflow Automation Filter Breaks &amp; Integration Failures</h3>
1792                    <p>
1793                        Renaming a field in Podio (e.g. changing <em>"Deal Stage"</em> to <em>"Pipeline Status"</em> or <em>"Assigned Rep"</em> to <em>"Closer"</em>) seems minor, but it frequently introduces subtle, hard-to-diagnose problems across your workflows and external integrations:
1794                    </p>
1795
1796                    <div class="kb-grid-3">
1797                        <div class="kb-scenario-card">
1798                            <div class="kb-scenario-card-title" style="color: #d97706;"><i class="fa-solid fa-filter-circle-xmark"></i> 1. Workflow Filters &amp; Triggers Break</div>
1799                            <p class="kb-scenario-card-desc">
1800                                Flows that use filter conditions (such as <code>fieldChanged</code>, <code>fieldValueMatch</code>, or custom PHP filters in <code>customPrep</code>) can fail to trigger or evaluate conditions incorrectly when referenced field labels change, leading to silent workflow skips.
1801                            </p>
1802                        </div>
1803                        <div class="kb-scenario-card">
1804                            <div class="kb-scenario-card-title" style="color: #d97706;"><i class="fa-solid fa-code"></i> 2. Calculation Formula Ambiguity ("Ghost Labels")</div>
1805                            <p class="kb-scenario-card-desc">
1806                                Podio calculation editors often retain the old label in the formula text (e.g. <code>@[Old Name]</code>). When a teammate reads the formula later, they search the app for "Old Name", find nothing, and cannot identify which live field is actually driving the calculation.
1807                            </p>
1808                        </div>
1809                        <div class="kb-scenario-card">
1810                            <div class="kb-scenario-card-title" style="color: #d97706;"><i class="fa-solid fa-plug-circle-xmark"></i> 3. Webhook &amp; Integration Failures</div>
1811                            <p class="kb-scenario-card-desc">
1812                                External integrations (Zapier, Make, custom webhook handlers) that map payloads by field label fail to parse incoming data when labels are changed without updating the external endpoints.
1813                            </p>
1814                        </div>
1815                    </div>
1816
1817                    <div class="kb-callout kb-callout-tip">
1818                        <div class="kb-callout-title"><i class="fa-solid fa-shield-halved"></i> How Insights Resolves Renamed Field Ambiguity</div>
1819                        Insights tracks the entire label change history for every field. When inspecting calculation formulas and workflow steps, the formula parser resolves the underlying Podio Field ID to its <strong>current live label</strong>, displaying both the original and current names so your team never loses track of data lineage.
1820                    </div>
1821
1822                    <h3 class="kb-h3" id="art-saved-views">Saved Views &amp; Relational App Depth</h3>
1823                    <p>
1824                        Insights analyzes how your apps interconnect across workspaces and calculates <strong>Relational App Depth</strong>:
1825                    </p>
1826                    <ul>
1827                        <li><strong>Level 0 (Root Apps):</strong> Independent foundational apps (e.g. Company Settings, User Directory).</li>
1828                        <li><strong>Level 1 (Direct Children):</strong> Apps directly linked to root apps (e.g. Contacts linked to Companies).</li>
1829                        <li><strong>Level 2+ (Chained Apps):</strong> Nested transactional apps (e.g. Invoices &rarr; Deals &rarr; Contacts &rarr; Companies). Insights warns when depth exceeds 4 levels, as deep relational chains slow down Podio view filtering.</li>
1830                    </ul>
1831
1832                    <h3 class="kb-h3" id="art-100-fields">Podio Best Practice for Field Limit &amp; Performance Guidelines</h3>
1833                    <p>
1834                        Podio officially recommends keeping every app under <strong>100 fields</strong>. As an app approaches or exceeds this threshold, performance degrades:
1835                    <div class="kb-grid-2">
1836                        <div class="kb-scenario-card">
1837                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-layer-group"></i> 1. Saved View Integrity</div>
1838                            <p class="kb-scenario-card-desc">
1839                                Saved views in Podio that filter or sort by fields that were subsequently deleted or renamed silently break, showing empty tables or wrong counts. Insights audits view criteria to flag corrupted view filters.
1840                            </p>
1841                        </div>
1842                        <div class="kb-scenario-card">
1843                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-sitemap"></i>
1843 2. Relational App Nesting Depth</div>
1844                            <p class="kb-scenario-card-desc">
1845                                Calculates the nesting depth of your relational hierarchy from <strong>Level 0 (Root apps)</strong> down to <strong>Level 3+ (Deeply nested child apps)</strong> so you can simplify overly complex multi-app chains.
1846                            </p>
1847                        </div>
1848                    </div>
1849
1850                    <h3 class="kb-h3" id="art-100-fields">Podio 100-Field Limit &amp; Performance Ceilings</h3>
1851                    <p>
1852                        Citrix Podio officially recommends keeping the number of fields per app under <strong>100 fields</strong>. Apps exceeding this threshold suffer from slow rendering, delayed formula execution, and higher risk of timeout errors on item saves. Insights highlights apps approaching or exceeding 100 fields so you can safely modularize your architecture.
1853                    </p>
1854                </article>
1855
1856                <!-- 3. Deep Dive: Calculation & Formula Inspector -->
1857                <article class="kb-article-block" id="cat-calculations">
1858                    <span class="kb-article-category-badge"><i class="fa-solid fa-calculator"></i> Calculation &amp; Formula Inspector</span>
1859                    <h2 class="kb-article-title" id="art-calc-ast">Calculation &amp; Formula Inspector</h2>
1860                    <p class="kb-article-lead">
1861                        Podio calculation fields execute client-side JavaScript across related apps. When fields are deleted, renamed, or nested too deeply, formulas silently break. Insights parses every formula syntax tree and provides granular relational reference mapping.
1862                    </p>
1863
1864                    <h3 class="kb-h3" id="art-deleted-fields">Deleted Fields in Calculations &amp; Automations (The "Silent Bug")</h3>
1865                    <p>
1866                        In Podio, deleting a field does <strong>not</strong> cascade or warn you about dependent formulas or automations. When a field is removed, it triggers silent failures across multiple workspaces:
1867                    </p>
1868
1869                    <div class="kb-grid-3">
1870                        <div class="kb-scenario-card">
1871                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-calculator"></i> 1. Silent Calculation Failures</div>
1872                            <p class="kb-scenario-card-desc">
1873                                Calculations referencing the deleted field return <code>null</code> or <code>NaN</code>. The formula keeps an orphaned field token (e.g. <code>item_field_29559573</code>), preventing formulas and rollups from computing correctly.
1874                            </p>
1875                        </div>
1876                        <div class="kb-scenario-card">
1877                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-bolt-lightning"></i> 2. Workflow Action &amp; Filter Drops</div>
1878                            <p class="kb-scenario-card-desc">
1879                                Automations attempting to update, read, or filter on the deleted field continue running but skip writing data. Automated task creations, email triggers, or status updates fail without sending any error alert.
1880                            </p>
1881                        </div>
1882                        <div class="kb-scenario-card">
1883                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-network-wired"></i> 3. Multi-App Cascade Breaks</div>
1884                            <p class="kb-scenario-card-desc">
1885                                Deleting a field in a child app (e.g. "Invoice Amount") breaks rollup calculations in the parent "Accounts" app, which in turn corrupts executive summary KPIs across connected workspaces.
1886                            </p>
1887                        </div>
1888                    </div>
1889
1890                    <div class="kb-mockup-card">
1891                        <div class="kb-mockup-header">
1892                            <div class="kb-mockup-dots">
1893                                <span class="kb-mockup-dot red"></span>
1894                                <span class="kb-mockup-dot yellow"></span>
1895                                <span class="kb-mockup-dot green"></span>
1896                            </div>
1897                            <span class="kb-mockup-title">Calculation Formula Analysis &bull; Field #1948271 ("Net Profit Margin")</span>
1898                        </div>
1899                        <div class="kb-code-box">
1900// Line 1: Healthy Reference
1901var revenue = @[Total Revenue]; 
1902
1903// Line 2: CRITICAL ERROR DETECTED BY INSIGHTS
1904// The field "Cost of Goods Sold" (Field ID #29559573) was deleted from Podio!
1905var cogs = @[Cost of Goods Sold](item_field_29559573); 
1906
1907// Result: Variable 'cogs' is undefined -> calculation fails silently!
1908var profit = revenue - cogs;
1909profit > 0 ? (profit / revenue) * 100 : 0;
1910                        </div>
1911                        <div style="color: #ef4444; font-weight: 700; font-size: 13px; margin-top: 8px;">
1912                            <i class="fa-solid fa-triangle-exclamation"></i> Error Flag: Referenced Field ID #29559573 does not exist in App Schema.
1913                        </div>
1914                    </div>
1915
1916                    <div class="kb-callout kb-callout-tip">
1917                        <div class="kb-callout-title"><i class="fa-solid fa-shield-halved"></i> How Insights Protects Against Deleted Field Errors</div>
1918                        Before deleting any field in Podio, check its <strong>Backward Dependency Graph</strong> in Insights. The graph traces every formula and workflow consuming data from that field. If a field has already been deleted, Insights formula scanner flags the exact line and uses historical snapshots to identify the deleted field's original name and purpose.
1919                    </div>
1920
1921                    <div class="kb-case-study">
1922                        <div class="kb-case-study-header"><i class="fa-solid fa-book-open"></i> Real Example: How One of Our Users Caught a Silent Calculation Break</div>
1923                        <div class="kb-case-study-body">
1924                            <div class="kb-case-study-panel kb-case-study-situation">
1925                                <div class="kb-case-study-label"><i class="fa-solid fa-triangle-exclamation"></i> What Happened</div>
1926                                <p class="kb-case-study-text">
1927                                    While cleaning up an old app, one of our users deleted a field they believed was no longer in use. Podio gave no warning that a calculation elsewhere still referenced it &mdash; the formula kept running, but quietly started returning blank values instead of an error.
1928                                </p>
1929                            </div>
1930                            <div class="kb-case-study-panel kb-case-study-solution">
1931                                <div class="kb-case-study-label"><i class="fa-solid fa-check"></i> How Insights Helped</div>
1932                                <p class="kb-case-study-text">
1933                                    On the next refresh, Insights flagged the exact calculation and field ID that no longer resolved. Because the deleted field's original name and configuration were still in Insights' history, they could restore the correct reference before anyone downstream noticed the numbers were wrong.
1934                                </p>
1935                            </div>
1936                        </div>
1937                    </div>
1938
1939                    <h3 class="kb-h3" id="art-calculation-inspector">Calculation Field Inspector &amp; Relational Reference Breakdown</h3>
1940                    <p>
1941                        In complex Podio calculations, formulas frequently reference fields across related apps (such as <code>@All of...</code>, <code>@Sum of...</code>, <code>@Max of...</code>, or <code>@Min of...</code>). Often, developers and administrators are not sure which foreign app a specific field is coming from or what type of incoming/outgoing relationship is connecting them.
1942                    </p>
1943                    <p>
1944                        Insights provides a complete, granular reference breakdown for every calculation field in your app:
1945                    </p>
1946
1947                    <div class="kb-mockup-card">
1948                        <div class="kb-mockup-header" style="justify-content: space-between;">
1949                            <div style="display: flex; align-items: center; gap: 8px;">
1950                                <span class="kb-mockup-dot green"></span>
1951                                <span class="kb-mockup-title">Calculation Inspector &bull; Field: "Total Hours Report" (Calculation)</span>
1952                            </div>
1953                            <div style="display: flex; gap: 8px;">
1954                                <span style="background: #0284c7; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;"><i class="fa-solid fa-diagram-project"></i> View Graph</span>
1955                                <span style="background: #334155; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;"><i class="fa-solid fa-pen-to-square"></i> Edit Notes</span>
1956                            </div>
1957                        </div>
1958
1959                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px;">
1960                            <div>
1961                                <div style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px;">Formula JavaScript Script:</div>
1962                                <div style="background: #0b1120; border: 1px solid #1e293b; border-radius: 6px; padding: 10px; font-family: var(--font-code); font-size: 12px; color: #38bdf8; line-height: 1.6; height: 160px; overflow-y: auto;">
1963                                    var dur = @All of JSON-Duration &amp; Date;<br>
1964                                    var cHourArrs = {};<br>
1965                                    var cShowTotBudHrs = 0;<br>
1966                                    var cShowTotHrs = 0;<br>
1967                                    var cDiff = 0;<br>
1968                                    var displayMSG = '';<br>
1969                                    var cData = '';<br>
1970                                    // Iterates through durations &amp; builds report
1971                                </div>
1972                            </div>
1973
1974                            <div>
1975                                <div style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px;">Relational Reference Breakdown:</div>
1976                                <table style="width: 100%; font-size: 12px; border-collapse: collapse; background: #0b1120; border-radius: 6px; overflow: hidden; border: 1px solid #1e293b;">
1977                                    <tr style="border-bottom: 1px solid #1e293b;">
1978                                        <td style="padding: 6px 8px; color: #94a3b8; font-weight: 600; width: 45%;">Reference Field</td>
1979                                        <td style="padding: 6px 8px; color: #38bdf8; font-family: var(--font-code);">@All of JSON-Duration &amp; Date</td>
1980                                    </tr>
1981                                    <tr style="border-bottom: 1px solid #1e293b;">
1982                                        <td style="padding: 6px 8px; color: #94a3b8; font-weight: 600;">Relationship Type</td>
1983                                        <td style="padding: 6px 8px; color: #4ade80; font-weight: 700;">Incoming</td>
1984                                    </tr>
1985                                    <tr style="border-bottom: 1px solid #1e293b;">
1986                                        <td style="padding: 6px 8px; color: #94a3b8; font-weight: 600;">Connection App</td>
1987                                        <td style="padding: 6px 8px; color: #ffffff; font-weight: 600;">Tasks</td>
1988                                    </tr>
1989                                    <tr style="border-bottom: 1px solid #1e293b;">
1990                                        <td style="padding: 6px 8px; color: #94a3b8; font-weight: 600;">App Connection Field Orig Label</td>
1991                                        <td style="padding: 6px 8px; color: #cbd5e1; font-family: var(--font-code);">@Assigned To</td>
1992                                    </tr>
1993                                    <tr>
1994                                        <td style="padding: 6px 8px; color: #94a3b8; font-weight: 600;">Ref Field Orig Label</td>
1995                                        <td style="padding: 6px 8px; color: #cbd5e1; font-family: var(--font-code);">@JSON-Duration &amp; Date</td>
1996                                    </tr>
1997                                </table>
1998                            </div>
1999                        </div>
2000                    </div>
2001
2002                    <div class="kb-grid-2" style="margin-bottom: 24px;">
2003                        <div class="kb-scenario-card">
2004                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-arrows-split-up-and-left"></i> Incoming vs. Outgoing Relationships</div>
2005                            <p class="kb-scenario-card-desc">
2006                                Insights clearly identifies whether a calculation pulls from a child app pointing back to this item (<strong>Incoming</strong>, e.g. Time Entries linked to a Project) or from a parent app this item references (<strong>Outgoing</strong>, e.g. a Project linking to a Client).
2007                            </p>
2008                        </div>
2009
2010                        <div class="kb-scenario-card">
2011                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-diagram-project"></i> Direct Graph &amp; Notes Access</div>
2012                            <p class="kb-scenario-card-desc">
2013                                From each calculation detail row, click <strong>"View Graph"</strong> to trace full multi-hop calculation trees, or click <strong>"Edit Notes"</strong>
2013 to leave persistent architectural documentation for your team.
2014                            </p>
2015                        </div>
2016                    </div>
2017
2018                    <h3 class="kb-h3" id="art-too-deep-error">Calculation "Too Deep" Error &amp; 10-Level Depth Limit</h3>
2019                    <p>
2020                        Podio enforces a hard restriction: <strong>JavaScript calculation formulas cannot exceed a nested depth of 10 levels</strong>. When calculation fields reference values across a chain of related apps (e.g. App A &rarr; App B &rarr; App C &rarr; ...), reaching 11 levels triggers Podio's <em>"Too Deep"</em> error, halting calculation workers and leaving fields blank.
2021                    </p>
2022                    <p>
2023                        Insights tracks how deeply nested each calculation formula's dependency chain runs. Formulas that pull from other calculations across a long chain of related apps can get hard to reason about — and in practice, very deep chains are where Podio calculations are most likely to silently break or return unexpected values. Insights flags any formula whose chain exceeds 10 levels deep so you can spot these before they cause problems.
2024                    </p>
2025
2026                    <div class="kb-mockup-card">
2027                        <div class="kb-mockup-header">
2028                            <div class="kb-mockup-dots">
2029                                <span class="kb-mockup-dot red"></span>
2030                                <span class="kb-mockup-dot yellow"></span>
2031                                <span class="kb-mockup-dot green"></span>
2032                            </div>
2033                            <span class="kb-mockup-title">Calculation Chain Depth Analyzer &bull; Depth Limit Violation Detected</span>
2034                        </div>
2035                        <div style="font-family: var(--font-code); font-size: 12px; color: #cbd5e1; line-height: 1.8; padding: 4px 0;">
2036                            <span style="color: #38bdf8;">[Depth 1]</span> Invoices: <code>@[Deal Commission]</code><br>
2037                            &ensp;&boxur;&boxh; <span style="color: #38bdf8;">[Depth 2]</span> Deals: <code>@[Closer Rate]</code><br>
2038                            &ensp;&ensp;&boxur;&boxh; <span style="color: #38bdf8;">[Depth 3]</span> Closers: <code>@[Rep Tier Payout]</code><br>
2039                            &ensp;&ensp;&ensp;&boxur;&boxh; <span style="color: #38bdf8;">[Depth 4]</span> Tiers: <code>@[Quota Multiplier]</code><br>
2040                            &ensp;&ensp;&ensp;&ensp;&boxur;&boxh; <span style="color: #cbd5e1;">... 6 Intermediate Related App Lookups ...</span><br>
2041                            &ensp;&ensp;&ensp;&ensp;&ensp;&boxur;&boxh; <span style="color: #f87171; font-weight: 700;">[Depth 11 - CRITICAL ERROR]</span> Company Settings: <code>@[Fiscal Target]</code> (Exceeds Podio's 10-Depth Maximum)
2042                        </div>
2043                        <div style="color: #ef4444; font-weight: 700; font-size: 13px; margin-top: 8px;">
2044                            <i class="fa-solid fa-triangle-exclamation"></i> Error Flag: Calculation depth is 11 levels. Podio stops executing at depth 10, causing downstream formulas to fail or return null.
2045                        </div>
2046                    </div>
2047
2048                    <div class="kb-grid-2">
2049                        <div class="kb-scenario-card">
2050                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-circle-exclamation"></i> How Depth Errors Damage Reporting</div>
2051                            <p class="kb-scenario-card-desc">
2052                                When the 10-level calculation limit is reached, Podio silently freezes the formula output. Summary reports, financial summaries, and deal commission rollups display outdated or zero values.
2053                            </p>
2054                        </div>
2055                        <div class="kb-scenario-card">
2056                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-wrench"></i> How to Resolve Depth Violations</div>
2057                            <p class="kb-scenario-card-desc">
2058                                Shorten calculation chains by offloading intermediate computations to Podio Workflow Automation (writing static values) or linking downstream apps directly to root apps instead of chaining multi-hop relationships.
2059                            </p>
2060                        </div>
2061                    </div>
2062                </article>
2063
2064                <!-- 4. Deep Dive: Workflow Automation Health -->
2065                <article class="kb-article-block" id="cat-globiflow-health">
2066                    <span class="kb-article-category-badge"><i class="fa-solid fa-bolt"></i> Workflow Automation Diagnostics</span>
2067                    <h2 class="kb-article-title" id="art-broken-tokens">Workflow Automation (GlobiFlow): Error Detection &amp; Resolution</h2>
2068                    <p class="kb-article-lead">
2069                        Podio Workflow Automation (commonly known as GlobiFlow) runs your critical business automations. However, when app fields are edited, flows are duplicated, or relationships change, workflows can fail silently without sending any alert. Insights continuously parses and validates all your workflows in the background.
2070                    </p>
2071
2072                    <h3 class="kb-h3">The 4 Most Common Causes of Workflow Failure</h3>
2073                    <div class="kb-grid-2">
2074                        <div class="kb-scenario-card">
2075                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-link-slash"></i> 1. Unbound App Relationship Links</div>
2076                            <p class="kb-scenario-card-desc">
2077                                When you copy a flow between workspaces or re-create an app relationship field, Workflow Automation often drops the variable binding, turning the blue variable pill into raw unlinked text. The workflow cannot find the related item and skips the action.
2078                            </p>
2079                        </div>
2080                        <div class="kb-scenario-card">
2081                            <div class="kb-scenario-card-title" style="color: #dc2626;"><i class="fa-solid fa-trash-can"></i> 2. Deleted Target Fields</div>
2082                            <p class="kb-scenario-card-desc">
2083                                A workflow step attempts to update or read a field in another app, but a colleague has deleted that field in Podio. The workflow continues to run but fails to write data, causing empty records.
2084                            </p>
2085                        </div>
2086                        <div class="kb-scenario-card">
2087                            <div class="kb-scenario-card-title" style="color: #d97706;"><i class="fa-solid fa-list-check"></i> 3. Category Option Mismatch</div>
2088                            <p class="kb-scenario-card-desc">
2089                                A workflow assigns a category status using calculation mode (e.g. <code>"In Progress"</code>), but the category option in Podio was renamed to <code>"Active - In Progress"</code>. Workflow Automation cannot find the matching option and leaves the field blank.
2090                            </p>
2091                        </div>
2092                        <div class="kb-scenario-card">
2093                            <div class="kb-scenario-card-title" style="color: #d97706;"><i class="fa-solid fa-arrows-rotate"></i> 4. Cascading Trigger Loops</div>
2094                            <p class="kb-scenario-card-desc">
2095                                Flow A triggers on item update and updates App B, which in turn triggers Flow B that updates App A. This creates an infinite loop that burns through your monthly workflow execution quota in minutes.
2096                            </p>
2097                        </div>
2098                    </div>
2099
2100                    <h3 class="kb-h3">Step-by-Step Guide: How to Fix a Broken Workflow Step</h3>
2101                    <ul class="kb-steps-list">
2102                        <li class="kb-step-item">
2103                            <div class="kb-step-number">1</div>
2104                            <div class="kb-step-title">Locate the Flagged Workflow in Insights</div>
2105                            <div class="kb-step-desc">Open the <strong>Workflow Automation</strong> tab in your workspace. Flows with broken steps are highlighted with a red warning badge, showing the exact step number and failure reason.</div>
2106                        </li>
2107                        <li class="kb-step-item">
2108                            <div class="kb-step-number">2</div>
2109                            <div class="kb-step-title">Open the Workflow in Podio Workflow Automation (GlobiFlow)</div>
2110                            <div class="kb-step-desc">Log into Workflow Automation and navigate to the corresponding App and Flow name.</div>
2111                        </li>
2112                        <li class="kb-step-item">
2113                            <div class="kb-step-number">3</div>
2114                            <div class="kb-step-title">Re-Select the Variable or Field</div>
2115                            <div class="kb-step-desc">Click on the broken field in the action step. If it is an App Relationship or variable, re-select the blue variable token from the dropdown until the pill is restored.</div>
2116                        </li>
2117                        <li class="kb-step-item">
2118                            <div class="kb-step-number">4</div>
2119                            <div class="kb-step-title">Save &amp; Refresh in Insights</div>
2120                            <div class="kb-step-desc">Click Save in Workflow Automation, then click <strong>"Refresh Organization + Workflows"</strong> (or the Space Refresh button) in Insights. The red warning badge will clear, confirming the workflow is healthy.</div>
2121                        </li>
2122                    </ul>
2123
2124                    <div class="kb-case-study">
2125                        <div class="kb-case-study-header"><i class="fa-solid fa-book-open"></i> Real Example: How One of Our Users Caught an Automation That Stopped Writing Data</div>
2126                        <div class="kb-case-study-body">
2127                            <div class="kb-case-study-panel kb-case-study-situation">
2128                                <div class="kb-case-study-label"><i class="fa-solid fa-triangle-exclamation"></i> What Happened</div>
2129                                <p class="kb-case-study-text">
2130                                    One of our users rebuilt an app relationship field in Podio without realizing it also reset the field binding inside a workflow step that had been updating client records for months. The flow kept "running" on every trigger &mdash; it just wasn't writing anything anymore.
2131                                </p>
2132                            </div>
2133                            <div class="kb-case-study-panel kb-case-study-solution">
2134                                <div class="kb-case-study-label"><i class="fa-solid fa-check"></i> How Insights Helped</div>
2135                                <p class="kb-case-study-text">
2136                                    On the next refresh, Insights flagged the step as broken with the specific reason &mdash; an unresolved field reference. The user reopened that same step in Workflow Automation (GlobiFlow), re-selected the field, and confirmed the warning cleared on the next check, before any more records went unfilled.
2137                                </p>
2138                            </div>
2139                        </div>
2140                    </div>
2141
2142                    <h3 class="kb-h3" id="art-manual-flows">Manual Flow Caller &amp; Trigger Trees</h3>
2143                    <p>
2144                        In native Podio Workflow Automation (GlobiFlow), there is <strong>no way to see which other workflows are triggering a manual flow</strong>. If you are modifying, pausing, or deleting a manual flow, you have zero native visibility into which automated flows across your workspaces depen
2144d on it.
2145                    </p>
2146                    <p>
2147                        Insights eliminates this blind spot by scanning all workflows across your organizations and mapping complete <strong>Manual Flow Caller &amp; Trigger Trees</strong>. For any manual flow, Insights immediately displays the full list of upstream workflows that call it (via <code>triggerSelf</code>, <code>triggerCollected</code>, or webhook relays), allowing you to safely refactor business logic without breaking downstream dependencies.
2148                    </p>
2149
2150                    <div class="kb-mockup-card">
2151                        <div class="kb-mockup-header">
2152                            <div class="kb-mockup-dots">
2153                                <span class="kb-mockup-dot green"></span>
2154                            </div>
2155                            <span class="kb-mockup-title">Manual Flow Caller Tree &bull; Target Flow: "Calculate Commission &amp; Rep Payout"</span>
2156                        </div>
2157                        <div style="font-family: var(--font-code); font-size: 13px; color: #38bdf8; line-height: 1.8;">
2158                            <strong>Upstream Caller Workflows Calling This Flow:</strong><br>
2159                            &bull; <span style="color: #cbd5e1;">Flow #3784885:</span> "3. SOLO Contract Signed Data Received" (App: Solo API Data)<br>
2160                            &bull; <span style="color: #cbd5e1;">Flow #4331630:</span> "7b. Aurora Contract Signed Data Received" (App: Aurora API Data)<br>
2161                            &bull; <span style="color: #cbd5e1;">Flow #3864389:</span> "Rep Match &amp; Sync Profile" (App: Commission Records)<br>
2162                            &bull; <span style="color: #4190659;">Flow #4190659:</span> "Attach Related Closer Profile" (App: A-C-C)
2163                        </div>
2164                    </div>
2165
2166                    <p>
2167                        <strong>Live Caller Visibility in Workflow Automation via Chrome Extension:</strong><br>
2168                        When using the <strong>Insights Chrome Extension</strong>, you don't even need to switch back to the Insights dashboard. Whenever you open any workflow inside the Podio Workflow Automation UI, the extension automatically injects a live caller panel directly into the workflow editor — listing all parent flows that trigger the current workflow with direct one-click jump links.
2169                    </p>
2170
2171                    <h3 class="kb-h3" id="art-workflow-access">Granting Workflow Insights Access (Service User vs. Credentials)</h3>
2172                    <p>
2173                        To allow Insights to automatically download, validate, and track revisions for your GlobiFlow workflows, Insights requires read-only API access to your Podio Workflow Automation account. You can connect access using either of two methods:
2174                    </p>
2175
2176                    <div class="kb-grid-2" style="margin-bottom: 20px;">
2177                        <div class="kb-scenario-card" style="border-top: 3px solid #0284c7;">
2178                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-user-shield"></i> Option 1: Free Service User (Recommended)</div>
2179                            <p class="kb-scenario-card-desc">
2180                                Invite the user <code>[email protected]</code> to your Podio workspaces as an <strong>Admin Service User</strong>, and add them as an additional user in your Podio Workflows.
2181                            </p>
2182                            <div style="margin-top: 10px; font-size: 12px; color: #16a34a; font-weight: 700;">
2183                                <i class="fa-solid fa-circle-check"></i> 100% Free &bull; Exempt from Podio user billing.
2184                            </div>
2185                        </div>
2186
2187                        <div class="kb-scenario-card" style="border-top: 3px solid #0284c7;">
2188                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-key"></i> Option 2: Dedicated Service Credentials</div>
2189                            <p class="kb-scenario-card-desc">
2190                                If you manage dozens of workspaces and prefer not to invite a user manually to each one, you can provide dedicated Podio user credentials in your Account Settings. Credentials are encrypted and used solely by the automated background sync.
2191                            </p>
2192                            <div style="margin-top: 10px; font-size: 12px; color: #64748b;">
2193                                <i class="fa-solid fa-lock"></i> AES-256 Encrypted &bull; Removable anytime.
2194                            </div>
2195                        </div>
2196                    </div>
2197
2198                    <div class="kb-callout kb-callout-tip">
2199                        <div class="kb-callout-title"><i class="fa-solid fa-book-open"></i> Full Step-by-Step Setup Guide</div>
2200                        For detailed instructions with screenshots on configuring service users in Podio and GlobiFlow, visit our dedicated process guide: <a href="https://insightspod.io/workflow-automation-access" target="_blank" style="font-weight: 700; color: #0284c7; text-decoration: underline;">Workflow Insights Access Guide <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 11px;"></i></a>.
2201                    </div>
2202                </article>
2203
2204                <!-- 4. Deep Dive: Change History & Versioning -->
2205                <article class="kb-article-block" id="cat-change-history">
2206                    <span class="kb-article-category-badge"><i class="fa-solid fa-code-compare"></i> Versioning &amp; Change History Engine</span>
2207                    <h2 class="kb-article-title" id="art-org-versioning">Change History: Version Control &amp; Split Diffs for Podio</h2>
2208                    <p class="kb-article-lead">
2209                        Podio and Workflow Automation (GlobiFlow) do not provide native version control, revision history, or an "Undo" button. If a teammate or consultant accidentally modifies a complex calculation, changes a category option, or deletes a workflow step, recovering the previous setup is impossible without version snapshots.
2210                    </p>
2211
2212                    <h3 class="kb-h3" id="art-snapshot-levels">The 4 Levels of Change Tracking in Insights</h3>
2213                    <table class="kb-table">
2214                        <thead>
2215                            <tr>
2216                                <th>Version Snapshot Level</th>
2217                                <th>What is Captured During Each Sync</th>
2218                                <th>How Changes are Detected &amp; Displayed</th>
2219                            </tr>
2220                        </thead>
2221                        <tbody>
2222                            <tr>
2223                                <td><strong>1. Organization Level</strong></td>
2224                                <td>New spaces created, spaces deleted, total apps, and organization-wide field count trends.</td>
2225                                <td>High-level architectural audit showing workspace growth and structural modifications.</td>
2226                            </tr>
2227                            <tr>
2228                                <td><strong>2. Space Level</strong></td>
2229                                <td>Apps added or removed from a workspace, member changes, and total item count movements.</td>
2230                                <td>Workspace-level change log with timestamped snapshot comparisons.</td>
2231                            </tr>
2232                            <tr>
2233                                <td><strong>3. App &amp; Field Level</strong></td>
2234                                <td>Fields added, deleted, renamed, field type modifications, formula updates, and required settings.</td>
2235                                <td>Field-by-field chronological timeline showing exact formula and property diffs.</td>
2236                            </tr>
2237                            <tr>
2238                                <td><strong>4. Workflow Automation Level</strong></td>
2239                                <td>Added steps, deleted steps, modified filter conditions, changed email templates, and variable adjustments in Podio Workflow Automation (GlobiFlow).</td>
2240                                <td>Rendered in the interactive <strong>Split Diff Viewer</strong> with synchronized side-by-side comparison.</td>
2241                            </tr>
2242                        </tbody>
2243                    </table>
2244
2245                    <h3 class="kb-h3" id="art-snapshot-compare">Comparing Snapshots at Org &amp; Space Level (Git for Podio)</h3>
2246                    <p>
2247                        Just like <strong>Git version control</strong> tracks code changes for software developers, Insights provides an instant, one-glance comparison between any two historical snapshots:
2248                    </p>
2249                    <ul>
2250                        <li><strong>Organization Level Comparison:</strong> In one glance, see high-level architectural changes across your entire account — new workspaces created, deleted spaces, and organization-wide app growth between sync dates.</li>
2251                        <li><strong>Space Level Comparison:</strong> Quickly inspect which apps were added, modified, or removed from a workspace, and track schema evolution without manually comparing apps one by one.</li>
2252                    </ul>
2253                    <p>
2254                        Simply select any two snapshot dates from the comparison dropdown to view an automated summary of all structural additions, modifications, and deletions.
2255                    </p>
2256
2257                    <div class="kb-mockup-card">
2258                        <div class="kb-mockup-header">
2259                            <div class="kb-mockup-dots">
2260                                <span class="kb-mockup-dot red"></span>
2261                                <span class="kb-mockup-dot yellow"></span>
2262                                <span class="kb-mockup-dot green"></span>
2263                            </div>
2264                            <span class="kb-mockup-title">Workspace Snapshot Comparison &bull; Aug 18 (Snapshot #13) vs Aug 24 (Snapshot #14)</span>
2265                        </div>
2266                        <div style="font-size: 13px; color: #cbd5e1; line-height: 1.8;">
2267                            <div style="border-left: 2px solid #38bdf8; padding-left: 12px;">
2268                                <div style="font-weight: 700; color: #ffffff; margin-bottom: 6px;"><i class="fa-solid fa-code-compare text-primary"></i> 3 Architectural Changes Detected in "Sales Operations" Space:</div>
2269                                <div style="color: #4ade80;"><i class="fa-solid fa-plus"></i> Added App: <code>Pipeline Opportunities</code> (18 Fields, 2 Calculation Formulas)</div>
2270                                <div style="color: #facc15;"><i class="fa-solid fa-pen"></i> Modified App: <code>Commission Records</code> (+1 Field Added, 1 Formula Updated)</div>
2271                                <div style="color: #f87171;"><i class="fa-solid fa-trash"></i> Deleted App: <code>Archived 2023 Leads</code> (App #28471920 removed from Podio)</div>
2272                            </div>
2273                        </div>
2274                    </div>
2275
2276                    <h3 class="kb-h3" id="art-app-versioning">App Field Revision Timelines</h3>
2277                    <p>
2278                        When inspecting any application in Insights, navigate to the <strong>Change History</strong> tab. The system presents a chronological timeline of every schema modification made to that app:
2279                    </p>
2280                    <div class="kb-screenshot-card">
2281                        <div class="kb-screenshot-header">
2282                            <div class="kb-mockup-dots">
2283                                <span class="kb-mockup-dot red"></span>
2284                                <span class="kb-mockup-dot yellow"></span>
2285                                <span class="kb-mockup-dot green"></span>
2286                            </div>
2287                            <span class="kb-screenshot-title"><i class="fa-solid fa-clock-rotate-left text-primary"></i> App Change History &bull; Field Modification &amp; Formula Revision Timeline</span>
2288                        </div>
2289                        <div class="kb-screenshot-body">
2290                            <img src="https://insightspod.io/images/change-history-app.png" alt="App Change History Timeline" class="kb-screenshot-img">
2291                        </div>
2292                    </div>
2293
2294                    <h3 class="kb-h3" id="art-split-diff">Using the Workflow Automation (GlobiFlow) Split Diff Viewer</h3>
2295                    <p>
2296                        The Split Diff Viewer allows you to select any two historical revisions of a workflow and see a side-by-side comparison with color-coded change highlights:
2297                    </p>
2298
2299                    <div class="kb-screenshot-card">
2300                        <div class="kb-screenshot-header">
2301                            <div class="kb-mockup-dots">
2302                                <span class="kb-mockup-dot red"></span>
2303                                <span class="kb-mockup-dot yellow"></span>
2304                                <span class="kb-mockup-dot green"></span>
2305                            </div>
2306                            <span class="kb-screenshot-title"><i class="fa-solid fa-code-compare text-primary"></i> Workflow Automation Split Diff Viewer &bull; Side-by-Side Version Comparison</span>
2307                        </div>
2308                        <div class="kb-screenshot-body">
2309                            <img src="https://insightspod.io/images/change-history-flow.png" alt="Workflow Automation Split Diff Viewer" class="kb-screenshot-img">
2310                        </div>
2311                    </div>
2312
2313                    <h3 class="kb-h3" id="art-diff-highlighting">Understanding the Color Highlights</h3>
2314                    <p style="color: var(--text-muted); font-size: 14px; margin-bottom: 16px;">
2315                        The Split Diff Viewer uses three color codes to highlight structural differences at a glance:
2316                    </p>
2317                    <div class="kb-grid-3" style="margin-bottom: 24px;">
2318                        <div style="background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 14px 16px;">
2319                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
2320                                <span style="background: #0284c7; color: #ffffff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase;">Added</span>
2321                                <span style="font-weight: 700; color: #0369a1; font-size: 13px;">Blue Highlight</span>
2322                            </div>
2323                            <div style="font-size: 13px; color: #0c4a6e; line-height: 1.5;">
2324                                A newly added workflow step, field, or configuration block.
2325                            </div>
2326                        </div>
2327
2328                        <div style="background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 16px;">
2329                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
2330                                <span style="background: #ea580c; color: #ffffff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase;">Modified</span>
2331                                <span style="font-weight: 700; color: #c2410c; font-size: 13px;">Orange Highlight</span>
2332                            </div>
2333                            <div style="font-size: 13px; color: #7c2d12; line-height: 1.5;">
2334                                An existing step or field whose formulas, parameters, or options were updated.
2335                            </div>
2336                        </div>
2337
2338                        <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 14px 16px;">
2339                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
2340                                <span style="background: #dc2626; color: #ffffff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase;">Deleted</span>
2341                                <span style="font-weight: 700; color: #b91c1c; font-size: 13px;">Red Highlight</span>
2342                            </div>
2343                            <div style="font-size: 13px; color: #7f1d1d; line-height: 1.5;">
2344                                An action step, filter condition, or field that was removed.
2345                            </div>
2346                        </div>
2347                    </div>
2348
2349                    <div class="kb-case-study">
2350                        <div class="kb-case-study-header"><i class="fa-solid fa-book-open"></i> Real Example: How One of Our Users Recovered an Accidental Edit</div>
2351                        <div class="kb-case-study-body">
2352                            <div class="kb-case-study-panel kb-case-study-situation">
2353                                <div class="kb-case-study-label"><i class="fa-solid fa-triangle-exclamation"></i> What Happened</div>
2354                                <p class="kb-case-study-text">
2355                                    A teammate on one of our users' accounts edited a calculation step in a core workflow late on a Friday, then couldn't remember exactly what the step looked like before the change. Podio and Workflow Automation have no built-in undo for this.
2356                                </p>
2357                            </div>
2358                            <div class="kb-case-study-panel kb-case-study-solution">
2359                                <div class="kb-case-study-label"><i class="fa-solid fa-check"></i> How Insights Helped</div>
2360                                <p class="kb-case-study-text">
2361                                    They opened the flow's version history in Insights and compared Thursday's snapshot against Friday's. The Split view showed the modified step in orange with the previous configuration right next to the new one, so they could copy the original values straight back into Workflow Automation (GlobiFlow).
2362                                </p>
2363                            </div>
2364                        </div>
2365                    </div>
2366                </article>
2367
2368                <!-- 5. Deep Dive: Dependency Graphs -->
2369                <article class="kb-article-block" id="cat-dependency-graphs">
2370                    <span class="kb-article-category-badge"><i class="fa-solid fa-diagram-project"></i> Interactive Visualizers &amp; Dependencies</span>
2371                    <h2 class="kb-article-title" id="art-forward-graph">Dependency Graphs: Forward Data Flows &amp; "Safe-to-Delete" Checks</h2>
2372                    <p class="kb-article-lead">
2373                        In Podio, calculation formulas and automations frequently span 4 or 5 different apps. Deleting or modifying a single field without knowing what depends on it can cause broken calculations and failed workflows across connected apps.
2374                    </p>
2375
2376                    <div class="kb-screenshot-card">
2377                        <div class="kb-screenshot-header">
2378                            <div class="kb-mockup-dots">
2379                                <span class="kb-mockup-dot red"></span>
2380                                <span class="kb-mockup-dot yellow"></span>
2381                                <span class="kb-mockup-dot green"></span>
2382                            </div>
2383                            <span class="kb-screenshot-title"><i class="fa-solid fa-diagram-project text-primary"></i> Interactive Field &amp; App Relational Dependency Graph</span>
2384                        </div>
2385                        <div class="kb-screenshot-body">
2386                            <img src="https://insightspod.io/images/fieldGraph.png" alt="Field Dependency Graph Map" class="kb-screenshot-img">
2387                        </div>
2388                    </div>
2389
2390                    <h3 class="kb-h3" id="art-backward-graph">Backward Impact Analysis ("Safe-to-Delete" Pre-Flight Check)</h3>
2391                    <p>
2392                        Before deleting or repurposing any field in Podio, check its <strong>Backward Dependency Graph</strong> in Insights. The graph traces every downstream calculation, rollup, and workflow that consumes data from this field.
2393                    </p>
2394
2395                    <div class="kb-callout kb-callout-warning">
2396                        <div class="kb-callout-title"><i class="fa-solid fa-triangle-exclamation"></i> Pre-Flight Check Rule</div>
2397                        If the Backward Graph shows any outgoing connections to other fields or workflows, do NOT delete the field in Podio until you have updated or removed those dependent calculations and flows first.
2398                    </div>
2399
2400                    <div class="kb-case-study">
2401                        <div class="kb-case-study-header"><i class="fa-solid fa-book-open"></i> Real Example: How One of Our Users Avoided a Cleanup Mistake</div>
2402                        <div class="kb-case-study-body">
2403                            <div class="kb-case-study-panel kb-case-study-situation">
2404                                <div class="kb-case-study-label"><i class="fa-solid fa-triangle-exclamation"></i> What Happened</div>
2405                                <p class="kb-case-study-text">
2406                                    Before archiving a set of fields that looked unused in an old Contacts app, one of our users wanted to be sure nothing else in the workspace still depended on them.
2407                                </p>
2408                            </div>
2409                            <div class="kb-case-study-panel kb-case-study-solution">
2410                                <div class="kb-case-study-label"><i class="fa-solid fa-check"></i> How Insights Helped</div>
2411                                <p class="kb-case-study-text">
2412                                    Checking each field's Backward Dependency Graph first, they found a couple of them still fed calculations in a connected Deals app. They updated those calculations before touching Podio, instead of finding out after the fact from a broken report.
2413                                </p>
2414                            </div>
2415                        </div>
2416                    </div>
2417
2418                    <h3 class="kb-h3">Forward Calculation Dependency Graph</h3>
2419                    <p>
2420                        The <strong>Forward Dependency Graph</strong> maps all upstream source fields feeding into the current calculation. It displays the origin of raw inputs (dates, numbers, currency values, relationship fields) and illustrates how data propagates into the computed formula.
2421                    </p>
2422
2423                    <h3 class="kb-h3" id="art-relational-graph">App-to-App Relational Connections</h3>
2424                    <p>
2425                        Visualizes how applications link together across workspaces via Podio App Relationship fields, providing clear visibility into relational hierarchies and cross-app workflows.
2426                    </p>
2427                </article>
2428
2429                <!-- 6. Deep Dive: Documentation & Advanced Excel Exports -->
2430                <article class="kb-article-block" id="cat-documentation-exports">
2431                    <span class="kb-article-category-badge"><i class="fa-solid fa-file-excel"></i> Architecture Documentation &amp; Exports</span>
2432                    <h2 class="kb-article-title" id="art-inapp-notes">In-App Architecture Documentation &amp; App Schema Excel Export</h2>
2433                    <p class="kb-article-lead">
2434                        Keeping documentation up to date is essential when managing complex Podio workspaces. Insights allows you to annotate fields with developer notes and export complete application schema documentation to Excel with a single click.
2435                    </p>
2436
2437                    <h3 class="kb-h3">In-App Architectural Developer Notes</h3>
2438                    <p>
2439                        Add developer documentation notes directly to fields and apps inside Insights. Explain <em>why</em> a calculation formula was constructed in a specific way or document business rules for future developers, administrators, and consultants.
2440                    </p>
2441
2442                    <h3 class="kb-h3" id="art-excel-export">App Schema Excel Documentation Export</h3>
2443                    <p>
2444                        Insights generates comprehensive Excel documentation workbooks for any application, providing a complete technical data dictionary for audits, compliance, and client handoffs:
2445                    </p>
2446
2447                    <table class="kb-table">
2448                        <thead>
2449                            <tr>
2450                                <th>Exported Column / Property</th>
2451                                <th>Description &amp; Data Captured</th>
2452                            </tr>
2453                        </thead>
2454                        <tbody>
2455                            <tr>
2456                                <td><strong>Field ID &amp; External ID</strong></td>
2457                                <td>Podio internal identifiers and API keys for developer integration.</td>
2458                            </tr>
2459                            <tr>
2460                                <td><strong>Field Label &amp; Type</strong></td>
2461                                <td>Display name and Podio field type (Text, Number, Date, Calculation, Category, App Relationship, etc.).</td>
2462                            </tr>
2463                            <tr>
2464                                <td><strong>Status &amp; Required Flag</strong></td>
2465                                <td>Active/deleted status and whether the field is required on item creation.</td>
2466                            </tr>
2467                            <tr>
2468                                <td><strong>Calculation Formula Script</strong></td>
2469                                <td>Full JavaScript formula text for calculation fields.</td>
2470                            </tr>
2471                            <tr>
2472                                <td><strong>Used in Other Apps</strong></td>
2473                                <td>Cross-app references indicating which foreign applications pull data from this field.</td>
2474                            </tr>
2475                            <tr>
2476                                <td><strong>Used in Workflow Automation Flag</strong></td>
2477                                <td>Indicates whether this field is referenced inside automated workflows in Podio Workflow Automation (GlobiFlow).</td>
2478                            </tr>
2479                            <tr>
2480                                <td><strong>Referenced Apps</strong></td>
2481                                <td>Target apps connected via App Relationship fields.</td>
2482                            </tr>
2483                            <tr>
2484                                <td><strong>Developer Notes</strong></td>
2485                                <td>Custom in-app architectural documentation notes attached to the field.</td>
2486                            </tr>
2487                        </tbody>
2488                    </table>
2489                </article>
2490
2491                <!-- 7. Deep Dive: Chrome Extension -->
2492                <article class="kb-article-block" id="cat-chrome-extension">
2493                    <span class="kb-article-category-badge"><i class="fa-solid fa-puzzle-piece"></i> Chrome Extension</span>
2494                    <h2 class="kb-article-title" id="art-chrome-setup">Insights Chrome Extension: Live In-Podio Schema &amp; Dependency Inspector</h2>
2495                    <p class="kb-article-lead">
2496                        Access Insights for Podio directly inside your browser while managing your Podio platform. The extension embeds interactive inspection badges right inside Podio's <strong>"Modify Template"</strong> builder.
2497                    </p>
2498
2499                    <h3 class="kb-h3">How to Install &amp; Connect</h3>
2500                    <ul class="kb-steps-list">
2501                        <li class="kb-step-item">
2502                            <div class="kb-step-number">1</div>
2503                            <div class="kb-step-title">Install from Chrome Web Store</div>
2504                            <div class="kb-step-desc">
2505                                Add the Insights for Podio extension to your Google Chrome browser directly from the Chrome Web Store:
2506                                <div style="margin-top: 10px;">
2507                                    <a href="https://chrome.google.com/webstore/detail/insights-for-podio/namejbgghdedbdcchflmocfhckelenok?utm_source=chrome-ntp-icon" target="_blank" rel="noopener noreferrer">
2508                                        <img src="https://insightspod.io/images/chrome-web_b.png" alt="Available in Chrome Web Store" style="max-height: 46px; width: auto; border-radius: 6px;">
2509                                    </a>
2510                                </div>
2511                            </div>
2512                        </li>
2513                        <li class="kb-step-item">
2514                            <div class="kb-step-number">2</div>
2515                            <div class="kb-step-title">Sign In with Your Insights Account</div>
2516                            <div class="kb-step-desc">Click the Insights icon in your Chrome toolbar and log in with your credentials to automatically connect your synchronized workspaces.</div>
2517                        </li>
2518                    </ul>
2519
2520                    <h3 class="kb-h3" id="art-chrome-features">Live Inspection &amp; Quick Action Toolbar in Podio</h3>
2521                    <p>
2522                        The extension embeds interactive quick-action buttons directly into standard Podio App views as well as inspection overlays in the <strong>"Modify Template"</strong> builder:
2523                    </p>
2524
2525                    <!-- Screenshot 1: App List Header Actions -->
2526                    <div class="kb-screenshot-card">
2527                        <div class="kb-screenshot-header">
2528                            <div class="kb-mockup-dots">
2529                                <span class="kb-mockup-dot red"></span>
2530                                <span class="kb-mockup-dot yellow"></span>
2531                                <span class="kb-mockup-dot green"></span>
2532                            </div>
2533                            <span class="kb-screenshot-title"><i class="fa-solid fa-layer-group text-primary"></i> Podio App Header &bull; Direct "Check Insights" &amp; "View App Change History" Actions</span>
2534                        </div>
2535                        <div class="kb-screenshot-body">
2536                            <img src="https://insightspod.io/images/chrome-app-list.png" alt="Podio App List Navigation Bar" class="kb-screenshot-img">
2537                        </div>
2538                    </div>
2539
2540                    <div class="kb-grid-2" style="margin-bottom: 24px;">
2541                        <div class="kb-scenario-card">
2542                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-clock-rotate-left"></i> App Architecture &amp; Change History</div>
2543                            <p class="kb-scenario-card-desc">
2544                                Inspect app-level health and jump to revision diffs directly from Podio:
2545                            </p>
2546                            <ul style="font-size: 13px; color: var(--text-muted); padding-left: 18px; margin-top: 8px; line-height: 1.6;">
2547                                <li><strong>App List Action Bar:</strong> Click <em>"Check Insights"</em> or <em>"View App Change History"</em> right from the top navigation bar of any Podio app view.</li>
2548                                <li><strong>Template Builder History:</strong> Open full schema version diffs directly via the <em>"App Change History"</em> button in Modify Template mode.</li>
2549                                <li><strong>Real-Time Error Alerts:</strong> Highlights if the app has active calculation or formula errors (e.g. <em>
2549"This app has 1 error(s)"</em>).</li>
2550                                <li><strong>Referenced &amp; Dependent Apps:</strong> Instantly view inbound and outbound relational app connections.</li>
2551                            </ul>
2552                        </div>
2553
2554                        <div class="kb-scenario-card">
2555                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-diagram-project"></i> Field &amp; Workflow Dependency Peeking</div>
2556                            <p class="kb-scenario-card-desc">
2557                                Click the Insights icon next to any individual field in the template builder to inspect:
2558                            </p>
2559                            <ul style="font-size: 13px; color: var(--text-muted); padding-left: 18px; margin-top: 8px; line-height: 1.6;">
2560                                <li><strong>Linked Apps:</strong> Target relationship app connections for the selected field.</li>
2561                                <li><strong>Dependent Fields:</strong> Exact list of fields in other apps that depend on this field.</li>
2562                                <li><strong>Triggered GlobiFlow Flows:</strong> See which automated workflows are triggered by or reference the field.</li>
2563                                <li><strong>Safe Editing:</strong> Verify dependencies before deleting or renaming fields without leaving Podio.</li>
2564                            </ul>
2565                        </div>
2566                    </div>
2567
2568                    <!-- Side-by-side screenshots for Modify Template Sidebars/Popups -->
2569                    <div class="kb-grid-2" style="margin-bottom: 24px;">
2570                        <div class="kb-screenshot-card" style="margin: 0;">
2571                            <div class="kb-screenshot-header">
2572                                <div class="kb-mockup-dots">
2573                                    <span class="kb-mockup-dot red"></span>
2574                                    <span class="kb-mockup-dot yellow"></span>
2575                                    <span class="kb-mockup-dot green"></span>
2576                                </div>
2577                                <span class="kb-screenshot-title">Modify Template Change History</span>
2578                            </div>
2579                            <div class="kb-screenshot-body" style="padding: 16px; background: #ffffff; min-height: 240px; display: flex; align-items: center; justify-content: center;">
2580                                <img src="https://insightspod.io/images/chrome-app-changes-history.png" alt="Modify Template Change History Button" style="max-height: 320px; width: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);">
2581                            </div>
2582                        </div>
2583
2584                        <div class="kb-screenshot-card" style="margin: 0;">
2585                            <div class="kb-screenshot-header">
2586                                <div class="kb-mockup-dots">
2587                                    <span class="kb-mockup-dot red"></span>
2588                                    <span class="kb-mockup-dot yellow"></span>
2589                                    <span class="kb-mockup-dot green"></span>
2590                                </div>
2591                                <span class="kb-screenshot-title">Field Dependency Popover</span>
2592                            </div>
2593                            <div class="kb-screenshot-body" style="padding: 16px; background: #ffffff; min-height: 240px; display: flex; align-items: center; justify-content: center;">
2594                                <img src="https://insightspod.io/images/chrome1.png" alt="Modify Template Field Dependency Popover" style="max-height: 320px; width: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);">
2595                            </div>
2596                        </div>
2597                    </div>
2598
2599                    <!-- Full-width Template Editor & Workflow Triggers Overview -->
2600                    <div class="kb-screenshot-card">
2601                        <div class="kb-screenshot-header">
2602                            <div class="kb-mockup-dots">
2603                                <span class="kb-mockup-dot red"></span>
2604                                <span class="kb-mockup-dot yellow"></span>
2605                                <span class="kb-mockup-dot green"></span>
2606                            </div>
2607                            <span class="kb-screenshot-title"><i class="fa-solid fa-screwdriver-wrench text-primary"></i> Podio App Template Editor &bull; In-Editor Field &amp; GlobiFlow Triggers Inspector</span>
2608                        </div>
2609                        <div class="kb-screenshot-body">
2610                            <img src="https://insightspod.io/images/chrome3.png" alt="Podio App Template Editor with Field & GlobiFlow Triggers Popover" class="kb-screenshot-img">
2611                        </div>
2612                    </div>
2613
2614                    <h3 class="kb-h3" id="art-chrome-globiflow">Live Workflow Inspection &amp; Navigation in Workflow Automation (GlobiFlow)</h3>
2615                    <p>
2616                        The extension also operates seamlessly inside Podio Workflow Automation (GlobiFlow):
2617                    </p>
2618
2619                    <div class="kb-grid-2" style="margin-bottom: 24px;">
2620                        <div class="kb-scenario-card">
2621                            <div class="kb-scenario-card-title" style="color: #ea580c;"><i class="fa-solid fa-bolt"></i> In-Editor Workflow Error Detection</div>
2622                            <p class="kb-scenario-card-desc">
2623                                When opening any workflow in Workflow Automation (GlobiFlow), the extension automatically inspects step configurations and highlights if the flow contains broken tokens, missing target fields, or configuration errors directly inside the workflow builder.
2624                            </p>
2625                        </div>
2626
2627                        <div class="kb-scenario-card">
2628                            <div class="kb-scenario-card-title" style="color: #0284c7;"><i class="fa-solid fa-arrow-up-right-from-square"></i> Manual Flow Callers &amp; Fast Navigation</div>
2629                            <p class="kb-scenario-card-desc">
2630                                When viewing a manual flow in Workflow Automation (GlobiFlow), the extension reveals all parent flows triggering it and flags if any caller has errors. Plus, enjoy fast one-click jump links to open connected apps, view workflow change history, and jump directly into caller workflows.
2631                            </p>
2632                        </div>
2633                    </div>
2634
2635                    <!-- Screenshot: GlobiFlow Manual Flow Triggering -->
2636                    <div class="kb-screenshot-card">
2637                        <div class="kb-screenshot-header">
2638                            <div class="kb-mockup-dots">
2639                                <span class="kb-mockup-dot red"></span>
2640                                <span class="kb-mockup-dot yellow"></span>
2641                                <span class="kb-mockup-dot green"></span>
2642                            </div>
2643                            <span class="kb-screenshot-title"><i class="fa-solid fa-diagram-project text-primary"></i> GlobiFlow Manual Flows &bull; Live Upstream Caller Tree &amp; Direct Jump Links</span>
2644                        </div>
2645                        <div class="kb-screenshot-body">
2646                            <img src="https://insightspod.io/images/chrome-manual-flow-triggering.png" alt="GlobiFlow Manual Flow Caller List" class="kb-screenshot-img">
2647                        </div>
2648                    </div>
2649                </article>
2650
2651            </main>
2652
2653        </div>
2654    </div>
2655</section>
2656
2657<!-- Architecture Partner Audit Support Section (Before FAQ) -->
2658<section class="kb-support-cta-section">
2659    <div class="container">
2660        <div class="kb-support-cta-box">
2661            <div class="row align-items-center">
2662                <div class="col-md-8 col-sm-12">
2663                    <div class="kb-support-cta-content">
2664                        <div class="kb-support-cta-badge">
2665                            <i class="fa-solid fa-certificate"></i> Authorized Podio Implementation Partners
2666                        </div>
2667                        <h2 class="kb-support-cta-heading">Need Help Auditing or Optimizing Your Podio Architecture?</h2>
2668                        <p class="kb-support-cta-text">
2669                            Whether you need assistance resolving complex calculation loops, refactoring multi-app workflows, or performing an in-depth enterprise schema health audit, our certified Podio engineers are here to help.
2670                        </p>
2671                    </div>
2672                </div>
2673                <div class="col-md-4 col-sm-12 text-right text-xs-left" style="margin-top: 15px;">
2674                    <a href="https://insightspod.io/ticket/create-ticket" class="kb-btn-support-cta">
2675                        <i class="fa-solid fa-headset"></i> Open a Support Ticket <i class="fa-solid fa-arrow-right"></i>
2676                    </a>
2677                </div>
2678            </div>
2679        </div>
2680    </div>
2681</section>
2682
2683<!-- Interactive FAQ Accordion Section -->
2684<section class="kb-faq-section" id="faq">
2685    <div class="container">
2686        <div class="kb-section-header">
2687            <h2 class="kb-section-title">Frequently Asked Questions</h2>
2688            <p class="kb-section-desc">Quick answers to common questions about Podio architecture, workflow debugging, and version control.</p>
2689        </div>
2690
2691        <div class="kb-faq-container">
2692
2693            <div class="kb-faq-item">
2694                <div class="kb-faq-question">
2695                    <span>How does Insights capture change history and version snapshots?</span>
2696                    <i class="fa-solid fa-chevron-down"></i>
2697                </div>
2698                <div class="kb-faq-answer">
2699                    Whenever an organization or space is synchronized, Insights serializes full JSON schemas of your applications, fields, and Podio Workflow Automation (GlobiFlow) XML definitions into timestamped revision records. The change engine computes structural deltas across versions to highlight added fields, deleted fields, modified formula calculations, and workflow step additions/deletions.
2700                </div>
2701            </div>
2702
2703            <div class="kb-faq-item">
2704                <div class="kb-faq-question">
2705                    <span>Why does the Diagnostic Dashboard show errors when my Podio apps seem to work?</span>
2706                    <i class="fa-solid fa-chevron-down"></i>
2707                </div>
2708                <div class="kb-faq-answer">
2709                    Podio often fails silently when JavaScript calculation formulas or Workflow Automation (GlobiFlow) automations reference deleted fields or broken relationship tokens. While your app interface looks fine, calculations may return <code>null</code> and automations may fail to trigger actions. Insights scans every formula and XML step to surface these hidden failures before data corruption occurs.
2710                </div>
2711            </div>
2712
2713            <div class="kb-faq-item">
2714                <div class="kb-faq-question">
2715                    <span>What is the difference between Forward and Backward Dependency Graphs?</span>
2716                    <i class="fa-solid fa-chevron-down"></i>
2717                </div>
2718                <div class="kb-faq-answer">
2719                    The <strong>Forward Graph</strong> maps the upstream source fields feeding into the current calculation formula. The <strong>Backward Graph (Impact Analysis)</strong> shows what other calculations, workflows, and apps will break if you modify or delete this field. Always check the Backward Graph before deleting any field in Podio.
2720                </div>
2721            </div>
2722
2723            <div class="kb-faq-item">
2724                <div class="kb-faq-question">
2725                    <span>How does the Workflow Automation (GlobiFlow) Split Diff Viewer work?</span>
2726                    <i class="fa-solid fa-chevron-down"></i>
2727                </div>
2728                <div class="kb-faq-answer">
2729                    The Split Diff Viewer compares any two historical revisions of a workflow side-by-side. It parses the underlying XML and displays steps in chronological sequence, color-coding added steps in blue, updated/modified parameters in orange, and deleted steps in red.
2730                </div>
2731            </div>
2732
2733            <div class="kb-faq-item">
2734                <div class="kb-faq-question">
2735                    <span>How does Insights identify errors in calculations and workflows?</span>
2736                    <i class="fa-solid fa-chevron-down"></i>
2737                </div>
2738                <div class="kb-faq-answer">
2739                    Insights parses all JavaScript calculation formulas to detect references to deleted fields, renamed labels, and calculation depth exceeding 10 levels. For Podio Workflow Automation (GlobiFlow), Insights parses the workflow XML definitions to verify target app relationships, field tokens, category options, and webhook parameters.
2740                </div>
2741            </div>
2742
2743            <div class="kb-faq-item">
2744                <div class="kb-faq-question">
2745                    <span>What is included in the App Schema Excel Export?</span>
2746                    <i class="fa-solid fa-chevron-down"></i>
2747                </div>
2748                <div class="kb-faq-answer">
2749                    The Excel Export generates a complete technical data dictionary for your application, including: Field IDs, External IDs, Field Labels, Field Types, Status, Required Settings, Calculation Formula Scripts, Used in Other Apps indicators, Used in Workflow Automation flags, Connected Apps, and custom in-app Developer Notes.
2750                </div>
2751            </div>
2752
2753            <div class="kb-faq-item">
2754                <div class="kb-faq-question">
2755                    <span>If I have a large organization and refreshing takes time, will I get notified when it is done?</span>
2756                    <i class="fa-solid fa-chevron-down"></i>
2757                </div>
2758                <div class="kb-faq-answer">
2759                    <strong>Yes, absolutely.</strong> For large organizations with dozens of workspaces, hundreds of apps, and extensive Workflow Automation (GlobiFlow) workflows, full background synchronization can take several minutes. You do not need to keep the browser tab open or wait on the screen. As soon as the refresh completes, Insights automatically sends you a comprehensive <strong>"Podio Refresh is Complete"</strong> audit email. The email confirms your new snapshot version (or up-to-date status), details total audited workspaces/apps/workflows, breaks down any detected calculation or automation errors, and provides direct one-click buttons to jump straight into your updated Health Dashboard and Change History.
2760                </div>
2761            </div>
2762
2763            <div class="kb-faq-item">
2764                <div class="kb-faq-question">
2765                    <span>How do I grant Insights access to analyze my Podio Workflow Automations (GlobiFlow)?</span>
2766                    <i class="fa-solid fa-chevron-down"></i>
2767                </div>
2768                <div class="kb-faq-answer">
2769                    To audit workflows, detect broken step tokens, and generate Split Diffs, Insights needs access to your Podio Workflow Automation account. You have two options:
2770                    <ol style="margin-top: 8px; padding-left: 20px; line-height: 1.7;">
2771                        <li><strong>Option 1 (Recommended):</strong> Invite <code>[email protected]</code> as a free <strong>Admin Service User</strong> to your Podio workspaces and as an additional user inside GlobiFlow. This account is exempt from Podio billing and costs you nothing.</li>
2772                        <li><strong>Option 2:</strong> Provide dedicated service account credentials in your <strong>Account Settings</strong>, which are securely encrypted and used exclusively by the automated background sync worker.</li>
2773                    </ol>
2774                    For complete step-by-step setup instructions with screenshots, please see our <a href="https://insightspod.io/workflow-automation-access" target="_blank" style="color: var(--brand-primary); font-weight: 700; text-decoration: underline;">Workflow Insights Access Guide <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 11px;"></i></a>.
2775                </div>
2776            </div>
2777
2778        </div>
2779    </div>
2780</section>
2781
2782<!-- Modern Footer -->
2783<footer class='footer-modern'>
2784    <div class='container'>
2785        <div class='row'>
2786            <div class='col-sm-7' style="margin-bottom: 20px;">
2787                <div class='footer-brand'>
2788                    <i class="fa-solid fa-cubes-stacked text-primary" style="color: #0284c7;"></i> Insights for Podio
2789                </div>
2790                <p style="color: #64748b; font-size: 13px; margin-bottom: 16px;">
2791                    &copy; 2026 Insights for Podio. All rights reserved.<br>
2792                    "Progress Podio" is a registered trademark of Progress Software Group, Inc.
2793                </p>
2794                <div class="footer-links">
2795                    <a href="https://insightspod.io/terms-and-condition">Terms of Service</a>
2796                    <a href="https://insightspod.io/privacy-policy">Privacy Policy</a>
2797                    <a href="https://insightspod.io/help">Help Center</a>
2798                    <a href="https://insightspod.io/ticket">Support Tickets</a>
2799                </div>
2800            </div>
2801            <div class='col-sm-5 text-right text-xs-left'>
2802                <h4 style="color: #ffffff; font-weight: 700; margin-bottom: 8px;">Built by <a href="https://www.lucentasolutions.com" target="_blank" style="color: #38bdf8; text-decoration: none;">Lucenta Solutions</a></h4>
2803                <p style="color: #64748b; font-size: 13px;">Trusted Experts in Podio | Low Code Platforms | Custom Software | AI & Integrations</p>
2804            </div>
2805        </div>
2806    </div>
2807</footer>
2808
2809<!-- Interactive Search & Navigation JavaScript -->
2810<script>
2811$(document).ready(function() {
2812    // 1. FAQ Accordion Toggle
2813    $('.kb-faq-question').on('click', function() {
2814        var $item = $(this).closest('.kb-faq-item');
2815        $item.toggleClass('active');
2816        $item.find('.kb-faq-answer').slideToggle(200);
2817    });
2818
2819    // 2. Real-Time Client-Side Search Engine with Instant Dropdown
2820    var $searchInput = $('#kbSearchInput');
2821    var $searchClear = $('#kbSearchClear');
2822    var $searchDropdown = $('#kbSearchDropdown');
2823    var $cards = $('#kbCardsGrid .kb-card');
2824    var $faqs = $('.kb-faq-item');
2825
2826    var searchIndex = [
2827        { title: "Refresh-Completion Audit Emails & Notifications", category: "Getting Started", anchor: "#art-refresh-emails", icon: "fa-envelope-circle-check", snippet: "Automated audit emails sent on refresh completion with error breakdowns and version numbers.", keywords: "refresh email notification completion audit report email error summary snapshot" },
2828        { title: "Deleted Fields in Calculations (The 'Silent Bug')", category: "Calculation Inspector", anchor: "#art-deleted-fields", icon: "fa-calculator", snippet: "How deleted fields cause silent formula breaks and how the formula scanner catches them.", keywords: "deleted field calculation formula silent bug null NaN formula broke remove" },
2829        { title: "Calculation Field Inspector & Relational Breakdown", category: "Calculation Inspector", anchor: "#art-calculation-inspector", icon: "fa-calculator", snippet: "Formula script and incoming/outgoing relational reference breakdown.", keywords: "calculation formula script reference incoming outgoing tasks notes graph" },
2830        { title: "Calculation 'Too Deep' Error (>10 Depth Limit)", category: "Calculation Inspector", anchor: "#art-too-deep-error", icon: "fa-triangle-exclamation", snippet: "10-level nested calculation chain limits in Podio and resolution steps.", keywords: "too deep 10 depth nested calculation limit ceiling freeze chain" },
2831        { title: "Renamed Fields: Workflow Filter Breaks & Ambiguity", category: "Dashboard Diagnostics", anchor: "#art-renamed-fields", icon: "fa-triangle-exclamation", snippet: "How renamed fields break flow filters, webhooks, and create ghost labels.", keywords: "renamed field label globiflow filter workflow zapier webhook ghost label ambiguity" },
2832        { title: "Error Diagnostic Summary & Audit Counts", category: "Dashboard Diagnostics", anchor: "#art-health-score", icon: "fa-triangle-exclamation", snippet: "Workspace-wide error audit status, critical errors, and diagnostic metrics.", keywords: "error dashboard diagnostic health audit counts status category issues" },
2833        { title: "Saved Views & Relational App Depth", category: "Dashboard Diagnostics", anchor: "#art-saved-views", icon: "fa-layer-group", snippet: "Root vs. child apps, relational nesting depth (Level 0 to Level 3+).", keywords: "saved views relational app depth root child level 0 1 2 3 filter" },
2834        { title: "100-Field Limit Best Practice & Performance", category: "Dashboard Diagnostics", anchor: "#art-100-fields", icon: "fa-gauge-high", snippet: "Podio recommended 100-field app limits and modularization tips.", keywords: "100 fields field limit performance speed slow modularization podio recommendation" },
2835        { title: "The 4 Most Common Causes of Workflow Errors", category: "Workflow Automation", anchor: "#cat-globiflow-health", icon: "fa-bolt", snippet: "Unbound links, missing fields, category mismatch, and broken tokens in Podio Workflow Automation (GlobiFlow).", keywords: "globiflow pwa workflow automation error step broken token variable pfref pfnew pfprev" },
2836        { title: "Step-by-Step Guide: How to Fix a Broken Workflow Step", category: "Workflow Automation", anchor: "#art-broken-tokens", icon: "fa-wrench", snippet: "Fixing workflow steps marked with red error borders in Insights.", keywords: "broken step fix red error border edit flow where used globiflow pwa" },
2837        { title: "Multi-App Trigger Trees & Cascading Loops", category: "Workflow Automation", anchor: "#art-manual-flows", icon: "fa-network-wired", snippet: "Tracing manual flows, triggerSelf, triggerCollected, and loop prevention.", keywords: "manual flow caller tree triggerself triggercollected webhook parent flow dependencies globiflow" },
2838        { title: "Why Version Control is Vital (No 'Undo' in Podio)", category: "Change History", anch
2838or: "#art-org-versioning", icon: "fa-code-compare", snippet: "Git-style change history tracking across Org, Space, App, and Fields.", keywords: "version control change history undo snapshot revision timeline git for podio" },
2839        { title: "Snapshot Comparisons (Org & Space Level)", category: "Change History", anchor: "#art-snapshot-compare", icon: "fa-code-compare", snippet: "Compare any two points in time with visual schema difference indicators.", keywords: "snapshot comparison compare org space baseline timestamp audit" },
2840        { title: "App Field Revision Timelines", category: "Change History", anchor: "#art-app-versioning", icon: "fa-clock-rotate-left", snippet: "Detailed field modification timeline with who changed what and when.", keywords: "app field timeline revision history parameter modified added deleted" },
2841        { title: "Workflow Automation (GlobiFlow) Split Diff Viewer", category: "Change History", anchor: "#art-split-diff", icon: "fa-code-compare", snippet: "Visual XML step diffs with blue (added), orange (modified), and red (deleted).", keywords: "split diff side by side comparison color highlights blue orange red globiflow workflow" },
2842        { title: "Forward Calculation Dependency Graph", category: "Dependency Graphs", anchor: "#art-forward-graph", icon: "fa-diagram-project", snippet: "Interactive visual map of all fields feeding into a calculation.", keywords: "forward dependency graph calculation input upstream data flow visualizer" },
2843        { title: "Backward Impact Analysis ('Safe-to-Delete')", category: "Dependency Graphs", anchor: "#art-backward-graph", icon: "fa-shield-halved", snippet: "Impact analysis showing all downstream calculations and flows.", keywords: "backward impact analysis safe to delete pre flight check downstream cleanup" },
2844        { title: "App-to-App Relational Connections", category: "Dependency Graphs", anchor: "#art-relational-graph", icon: "fa-network-wired", snippet: "Workspace relational graph showing connections across apps.", keywords: "app relational connections links foreign relationship fields map" },
2845        { title: "In-App Architectural Developer Notes", category: "Documentation & Exports", anchor: "#art-inapp-notes", icon: "fa-pen-to-square", snippet: "Preserve developer context with notes visible in graphs and Excel.", keywords: "developer notes documentation annotations architecture field notes" },
2846        { title: "App Schema Documentation Export (Excel)", category: "Documentation & Exports", anchor: "#art-excel-export", icon: "fa-file-excel", snippet: "Download comprehensive Excel workbook data dictionaries for apps.", keywords: "excel export schema data dictionary download spreadsheet backup" },
2847        { title: "Installing the Chrome Extension", category: "Chrome Extension", anchor: "#art-chrome-setup", icon: "fa-puzzle-piece", snippet: "One-click Chrome Web Store setup with session authentication.", keywords: "chrome extension install chrome web store authentication login" },
2848        { title: "In-Podio 'Modify Template' App & Field Inspector", category: "Chrome Extension", anchor: "#art-chrome-features", icon: "fa-puzzle-piece", snippet: "App errors, inbound/outbound references, and field where-used flags.", keywords: "modify template chrome extension podio sidebar dependent fields linked apps errors" },
2849        { title: "Workflow Insights Access & Permissions Setup", category: "Workflow Automation", anchor: "#art-workflow-access", icon: "fa-key", snippet: "How to grant Insights access to workflows via free service user or account credentials.", keywords: "access permissions grant service user credentials insights-access connect globiflow pwa" },
2850        { title: "Workflow In-Editor Error Detection & Navigation", category: "Chrome Extension", anchor: "#art-chrome-globiflow", icon: "fa-bolt", snippet: "In-editor step error detection and manual flow caller trees in Podio Workflow Automation (GlobiFlow).", keywords: "globiflow workflow automation editor chrome extension in-editor errors caller panel navigation" }
2851    ];
2852
2853    function highlightText(text, q) {
2854        if (!q) return text;
2855        var regex = new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
2856        return text.replace(regex, '<span class="kb-search-highlight">$1</span>');
2857    }
2858
2859    $searchInput.on('keyup input', function(e) {
2860        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === 'Escape') {
2861            return;
2862        }
2863
2864        var query = $(this).val().toLowerCase().trim();
2865
2866        if (query.length > 0) {
2867            $searchClear.css('display', 'inline-flex');
2868
2869            // 1. Search Index Matching for Instant Dropdown
2870            var matches = searchIndex.filter(function(item) {
2871                var haystack = (item.title + ' ' + item.category + ' ' + item.keywords + ' ' + item.snippet).toLowerCase();
2872                return haystack.indexOf(query) !== -1;
2873            });
2874
2875            if (matches.length > 0) {
2876                var html = '<div class="kb-search-count-header">Found ' + matches.length + ' matching guide' + (matches.length > 1 ? 's' : '') + '</div>';
2877                matches.forEach(function(item) {
2878                    html += '<a href="' + item.anchor + '" class="kb-search-result-item">' +
2879                        '<div class="kb-search-result-icon"><i class="fa-solid ' + item.icon + '"></i></div>' +
2880                        '<div class="kb-search-result-content">' +
2881                            '<div class="kb-search-result-badge">' + item.category + '</div>' +
2882                            '<div class="kb-search-result-title">' + highlightText(item.title, query) + '</div>' +
2883                            '<div class="kb-search-result-snippet">' + highlightText(item.snippet, query) + '</div>' +
2884                        '</div>' +
2885                        '<i class="fa-solid fa-arrow-right" style="color: #cbd5e1; font-size: 11px; margin-top: 8px;"></i>' +
2886                    '</a>';
2887                });
2888                $searchDropdown.html(html).fadeIn(150);
2889            } else {
2890                $searchDropdown.html('<div class="kb-search-no-results"><i class="fa-solid fa-circle-question" style="font-size: 24px; color: #94a3b8; margin-bottom: 8px; display: block;"></i>No guides found for "<strong>' + $('<div>').text(query).html() + '</strong>"<div style="font-size: 12px; color: #94a3b8; margin-top: 4px;">Try searching for <em>tokens</em>, <em>delete</em>, <em>calculation</em>, <em>diff</em>, or <em>depth</em>.</div></div>').fadeIn(150);
2891            }
2892
2893            // 2. Filter Category Cards
2894            $cards.each(function() {
2895                var cardText = $(this).text().toLowerCase() + ' ' + $(this).data('keywords');
2896                if (cardText.indexOf(query) !== -1) {
2897                    $(this).show();
2898                } else {
2899                    $(this).hide();
2900                }
2901            });
2902
2903            // 3. Filter FAQs
2904            $faqs.each(function() {
2905                var faqText = $(this).text().toLowerCase();
2906                if (faqText.indexOf(query) !== -1) {
2907                    $(this).show();
2908                    $(this).addClass('active');
2909                    $(this).find('.kb-faq-answer').show();
2910                } else {
2911                    $(this).hide();
2912                }
2913            });
2914        } else {
2915            $searchClear.hide();
2916            $searchDropdown.hide();
2917            $cards.show();
2918            $faqs.show();
2919            $faqs.removeClass('active');
2920            $faqs.find('.kb-faq-answer').hide();
2921        }
2922    });
2923
2924    // Keyboard navigation in search dropdown
2925    $searchInput.on('keydown', function(e) {
2926        var $items = $searchDropdown.find('.kb-search-result-item');
2927        var $selected = $items.filter('.selected');
2928
2929        if (e.key === 'ArrowDown') {
2930            e.preventDefault();
2931            if (!$selected.length || $selected.is(':last-child')) {
2932                $items.removeClass('selected').first().addClass('selected');
2933            } else {
2934                $selected.removeClass('selected').next().addClass('selected');
2935            }
2936        } else if (e.key === 'ArrowUp') {
2937            e.preventDefault();
2938            if (!$selected.length || $selected.is(':first-child')) {
2939                $items.removeClass('selected').last().addClass('selected');
2940            } else {
2941                $selected.removeClass('selected').prev().addClass('selected');
2942            }
2943        } else if (e.key === 'Enter') {
2944            if ($selected.length) {
2945                e.preventDefault();
2946                $selected[0].click();
2947            }
2948        } else if (e.key === 'Escape') {
2949            $searchDropdown.fadeOut(100);
2950        }
2951    });
2952
2953    // Click on Dropdown Item
2954    $(document).on('click', '.kb-search-result-item', function(e) {
2955        $searchDropdown.hide();
2956        var targetId = $(this).attr('href');
2957        var target = $(targetId);
2958        if (target.length) {
2959            e.preventDefault();
2960            $('html, body').stop().animate({
2961                scrollTop: target.offset().top - 90
2962            }, 400);
2963        }
2964    });
2965
2966    // Close Dropdown when clicking outside
2967    $(document).on('click', function(e) {
2968        if (!$(e.target).closest('.kb-search-container').length) {
2969            $searchDropdown.fadeOut(100);
2970        }
2971    });
2972
2973    $searchClear.on('click', function() {
2974        $searchInput.val('').trigger('input').focus();
2975        $searchDropdown.hide();
2976    });
2977
2978    // 3. Keyboard Shortcut (Ctrl+K / Cmd+K)
2979    $(document).on('keydown', function(e) {
2980        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
2981            e.preventDefault();
2982            $searchInput.focus().select();
2983            $('html, body').animate({
2984                scrollTop: $('.kb-hero').offset().top - 80
2985            }, 300);
2986        }
2987    });
2988
2989    // 4. Smooth Anchor Scrolling with Header Offset
2990    $('a[href^="#"]').on('click', function(e) {
2991        var target = $(this.getAttribute('href'));
2992        if (target.length && !$(this).hasClass('kb-search-result-item')) {
2993            e.preventDefault();
2994            $('html, body').stop().animate({
2995                scrollTop: target.offset().top - 90
2996            }, 400);
2997        }
2998    });
2999
3000    // 5. ScrollSpy for Sticky Left Sidebar Navigation
3001    var $articleBlocks = $('.kb-article-block');
3002    var $sidebarLinks = $('.kb-sidebar-main-link');
3003
3004    function updateScrollSpy() {
3005        var scrollPos = $(window).scrollTop() + 140; // Offset for sticky navbar & header
3006        var activeFound = false;
3007
3008        $articleBlocks.each(function() {
3009            var $block = $(this);
3010            var top = $block.offset().top;
3011            var bottom = top + $block.outerHeight();
3012            var blockId = $block.attr('id');
3013
3014            if (scrollPos >= top && scrollPos < bottom) {
3015                $sidebarLinks.removeClass('active');
3016                $('.kb-sidebar-main-link[href="#' + blockId + '"]').addClass('active');
3017                activeFound = true;
3018                return false; // Stop checking once active block is identified
3019            }
3020        });
3021
3022        // Edge case: when user is near the very top, highlight Getting Started
3023        if (!activeFound && $articleBlocks.length) {
3024            var firstTop = $articleBlocks.first().offset().top;
3025            if (scrollPos < firstTop) {
3026                $sidebarLinks.removeClass('active');
3027                $sidebarLinks.first().addClass('active');
3028            }
3029        }
3030    }
3031
3032    $(window).on('scroll resize', function() {
3033        requestAnimationFrame(updateScrollSpy);
3034    });
3035
3036    // Initial check on page load
3037    updateScrollSpy();
3038});
3039</script>
3039
3040
3041</body>
3042</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.