@mahe_pkm/buzl-capi 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1130 @@
1
+ /* BUZL - CAPI Suite Theme Stylesheet */
2
+ :root {
3
+ --bg: #0B0F19;
4
+ --surface: #111827;
5
+ --surface-card: #151F32;
6
+ --surface-hover: #1E293B;
7
+ --border: #243247;
8
+ --border-subtle: #1E293B;
9
+ --border-focus: #3B5FF5;
10
+ --text: #F8FAFC;
11
+ --text-muted: #94A3B8;
12
+ --text-dim: #64748B;
13
+ --brand-blue: #3B5FF5;
14
+ --brand-blue-hover: #2B4DD8;
15
+ --brand-blue-glow: rgba(59, 95, 245, 0.25);
16
+ --accent-amber: #F59E0B;
17
+ --accent-amber-hover: #D97706;
18
+ --accent-amber-glow: rgba(245, 158, 11, 0.2);
19
+ --ice-blue: #93ADFD;
20
+ --success: #10B981;
21
+ --success-bg: rgba(16, 185, 129, 0.12);
22
+ --danger: #EF4444;
23
+ --danger-bg: rgba(239, 68, 68, 0.12);
24
+ --danger-hover: #DC2626;
25
+ --radius: 10px;
26
+ --radius-sm: 6px;
27
+ --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
28
+ --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
29
+ }
30
+
31
+ * {
32
+ box-sizing: border-box;
33
+ margin: 0;
34
+ padding: 0;
35
+ }
36
+
37
+ body {
38
+ background-color: var(--bg);
39
+ color: var(--text);
40
+ font-family: var(--font);
41
+ line-height: 1.5;
42
+ min-height: 100vh;
43
+ padding: 20px 24px;
44
+ }
45
+
46
+ .app-container {
47
+ max-width: 1400px;
48
+ margin: 0 auto;
49
+ }
50
+
51
+ /* ==========================================================================
52
+ Header & Official Buzl Branding
53
+ ========================================================================== */
54
+ .header {
55
+ margin-bottom: 16px;
56
+ padding-bottom: 16px;
57
+ border-bottom: 1px solid var(--border);
58
+ }
59
+
60
+ .header-content {
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ flex-wrap: wrap;
65
+ gap: 16px;
66
+ }
67
+
68
+ .brand {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 14px;
72
+ }
73
+
74
+ .brand-code-badge {
75
+ background: #0F172A;
76
+ border: 1.5px solid var(--brand-blue);
77
+ box-shadow: 0 0 14px var(--brand-blue-glow);
78
+ padding: 8px 14px;
79
+ border-radius: var(--radius-sm);
80
+ font-family: var(--font-mono);
81
+ font-weight: 800;
82
+ font-size: 18px;
83
+ letter-spacing: 1px;
84
+ display: flex;
85
+ align-items: center;
86
+ gap: 6px;
87
+ }
88
+
89
+ .brand-code-badge .brand-logo-svg {
90
+ width: 22px;
91
+ height: 22px;
92
+ color: var(--brand-blue);
93
+ flex-shrink: 0;
94
+ margin-right: 4px;
95
+ }
96
+
97
+ .brand-code-badge .code-buzl {
98
+ color: var(--brand-blue);
99
+ }
100
+
101
+ .brand-code-badge .code-divider {
102
+ color: var(--text-dim);
103
+ }
104
+
105
+ .brand-code-badge .code-capi {
106
+ color: var(--accent-amber);
107
+ }
108
+
109
+ .brand-titles h1 {
110
+ font-size: 18px;
111
+ font-weight: 700;
112
+ letter-spacing: -0.3px;
113
+ color: #FFFFFF;
114
+ }
115
+
116
+ .brand-headline {
117
+ display: flex;
118
+ align-items: center;
119
+ gap: 10px;
120
+ }
121
+
122
+ .version-badge {
123
+ font-family: var(--font-mono);
124
+ font-size: 11px;
125
+ background: rgba(59, 95, 245, 0.15);
126
+ color: var(--ice-blue);
127
+ border: 1px solid rgba(59, 95, 245, 0.3);
128
+ padding: 1px 6px;
129
+ border-radius: 4px;
130
+ font-weight: 600;
131
+ }
132
+
133
+ .subtitle {
134
+ color: var(--text-muted);
135
+ font-size: 12.5px;
136
+ }
137
+
138
+ .header-actions {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 8px;
142
+ flex-wrap: wrap;
143
+ }
144
+
145
+ /* ==========================================================================
146
+ Buttons & Badges
147
+ ========================================================================== */
148
+ .btn {
149
+ font-family: var(--font);
150
+ font-size: 13px;
151
+ font-weight: 600;
152
+ padding: 8px 14px;
153
+ border-radius: var(--radius-sm);
154
+ border: 1px solid transparent;
155
+ cursor: pointer;
156
+ transition: all 0.15s ease-in-out;
157
+ display: inline-flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ gap: 6px;
161
+ }
162
+
163
+ .btn-primary {
164
+ background: var(--brand-blue);
165
+ color: #FFFFFF;
166
+ box-shadow: 0 2px 8px var(--brand-blue-glow);
167
+ }
168
+
169
+ .btn-primary:hover:not(:disabled) {
170
+ background: var(--brand-blue-hover);
171
+ box-shadow: 0 4px 12px var(--brand-blue-glow);
172
+ }
173
+
174
+ .btn-secondary {
175
+ background: var(--surface);
176
+ color: var(--text);
177
+ border-color: var(--border);
178
+ }
179
+
180
+ .btn-secondary:hover:not(:disabled) {
181
+ background: var(--surface-hover);
182
+ border-color: var(--text-muted);
183
+ }
184
+
185
+ .btn-outline {
186
+ background: transparent;
187
+ color: var(--text);
188
+ border-color: var(--border);
189
+ }
190
+
191
+ .btn-outline:hover:not(:disabled) {
192
+ background: var(--surface-hover);
193
+ border-color: var(--brand-blue);
194
+ }
195
+
196
+ .btn-danger {
197
+ background: var(--danger);
198
+ color: #FFFFFF;
199
+ }
200
+
201
+ .btn-danger:hover:not(:disabled) {
202
+ background: var(--danger-hover);
203
+ }
204
+
205
+ .btn-danger-outline {
206
+ background: transparent;
207
+ color: var(--danger);
208
+ border-color: rgba(239, 68, 68, 0.3);
209
+ }
210
+
211
+ .btn-danger-outline:hover:not(:disabled) {
212
+ background: var(--danger-bg);
213
+ border-color: var(--danger);
214
+ }
215
+
216
+ .btn-xs {
217
+ font-size: 11px;
218
+ padding: 2px 7px;
219
+ border-radius: 4px;
220
+ }
221
+
222
+ .btn-sm {
223
+ font-size: 12px;
224
+ padding: 4px 10px;
225
+ }
226
+
227
+ .btn-large {
228
+ font-size: 14.5px;
229
+ padding: 12px 20px;
230
+ width: 100%;
231
+ }
232
+
233
+ .btn:disabled {
234
+ opacity: 0.6;
235
+ cursor: not-allowed;
236
+ }
237
+
238
+ .btn-remove-service {
239
+ background: rgba(239, 68, 68, 0.12);
240
+ color: #F87171;
241
+ border: 1px solid rgba(239, 68, 68, 0.3);
242
+ font-weight: 600;
243
+ transition: all 0.15s ease;
244
+ }
245
+
246
+ .btn-remove-service:hover {
247
+ background: var(--danger);
248
+ color: #FFFFFF;
249
+ border-color: var(--danger);
250
+ }
251
+
252
+ .badge {
253
+ font-size: 11.5px;
254
+ font-weight: 600;
255
+ padding: 3px 8px;
256
+ border-radius: 4px;
257
+ display: inline-flex;
258
+ align-items: center;
259
+ gap: 4px;
260
+ }
261
+
262
+ .badge-info {
263
+ background: rgba(59, 95, 245, 0.15);
264
+ color: var(--ice-blue);
265
+ border: 1px solid rgba(59, 95, 245, 0.3);
266
+ }
267
+
268
+ .badge-success {
269
+ background: var(--success-bg);
270
+ color: #34D399;
271
+ border: 1px solid rgba(16, 185, 129, 0.3);
272
+ }
273
+
274
+ .badge-danger {
275
+ background: var(--danger-bg);
276
+ color: #F87171;
277
+ border: 1px solid rgba(239, 68, 68, 0.3);
278
+ }
279
+
280
+ .badge-neutral {
281
+ background: #1E293B;
282
+ color: var(--text-muted);
283
+ border: 1px solid var(--border);
284
+ }
285
+
286
+ /* Vector Icon Utilities */
287
+ .icon-sm {
288
+ width: 14px;
289
+ height: 14px;
290
+ stroke: currentColor;
291
+ vertical-align: middle;
292
+ flex-shrink: 0;
293
+ }
294
+
295
+ .icon-xs {
296
+ width: 12px;
297
+ height: 12px;
298
+ stroke: currentColor;
299
+ vertical-align: middle;
300
+ flex-shrink: 0;
301
+ }
302
+
303
+ .icon-spin {
304
+ animation: spin 1s linear infinite;
305
+ }
306
+
307
+ @keyframes spin {
308
+ 100% { transform: rotate(360deg); }
309
+ }
310
+
311
+ /* Precision Status Dots (Replacing Emojis) */
312
+ .status-dot {
313
+ width: 7px;
314
+ height: 7px;
315
+ border-radius: 50%;
316
+ display: inline-block;
317
+ flex-shrink: 0;
318
+ }
319
+
320
+ .dot-active {
321
+ background-color: var(--success);
322
+ box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
323
+ }
324
+
325
+ .dot-inactive {
326
+ background-color: var(--text-dim);
327
+ }
328
+
329
+ /* ==========================================================================
330
+ Live Status Bar & Service Matrix
331
+ ========================================================================== */
332
+ .live-state-bar {
333
+ background: var(--surface);
334
+ border: 1px solid var(--border);
335
+ border-radius: var(--radius);
336
+ padding: 12px 16px;
337
+ margin-bottom: 20px;
338
+ }
339
+
340
+ .live-state-header {
341
+ display: flex;
342
+ justify-content: space-between;
343
+ align-items: center;
344
+ flex-wrap: wrap;
345
+ gap: 10px;
346
+ padding-bottom: 10px;
347
+ border-bottom: 1px solid var(--border-subtle);
348
+ }
349
+
350
+ .live-title-group {
351
+ display: flex;
352
+ align-items: center;
353
+ gap: 8px;
354
+ font-size: 12px;
355
+ }
356
+
357
+ .live-pulse {
358
+ width: 9px;
359
+ height: 9px;
360
+ background-color: var(--success);
361
+ border-radius: 50%;
362
+ box-shadow: 0 0 8px var(--success);
363
+ display: inline-block;
364
+ animation: pulse 2s infinite;
365
+ }
366
+
367
+ @keyframes pulse {
368
+ 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
369
+ 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
370
+ 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
371
+ }
372
+
373
+ .live-title {
374
+ font-weight: 700;
375
+ letter-spacing: 0.5px;
376
+ color: var(--accent-amber);
377
+ }
378
+
379
+ .live-state-path {
380
+ font-family: var(--font-mono);
381
+ color: var(--ice-blue);
382
+ background: rgba(15, 23, 42, 0.6);
383
+ padding: 2px 6px;
384
+ border-radius: 4px;
385
+ }
386
+
387
+ .live-meta-badges {
388
+ display: flex;
389
+ align-items: center;
390
+ gap: 8px;
391
+ }
392
+
393
+ .live-matrix-container {
394
+ display: flex;
395
+ align-items: center;
396
+ gap: 12px;
397
+ margin-top: 10px;
398
+ flex-wrap: wrap;
399
+ }
400
+
401
+ .matrix-label {
402
+ font-size: 11px;
403
+ font-weight: 700;
404
+ letter-spacing: 0.5px;
405
+ color: var(--text-dim);
406
+ }
407
+
408
+ .live-state-chips {
409
+ display: flex;
410
+ gap: 8px;
411
+ flex-wrap: wrap;
412
+ align-items: center;
413
+ }
414
+
415
+ .chip {
416
+ font-size: 11.5px;
417
+ padding: 4px 9px;
418
+ border-radius: 6px;
419
+ font-weight: 500;
420
+ display: inline-flex;
421
+ align-items: center;
422
+ gap: 6px;
423
+ background: var(--surface-card);
424
+ border: 1px solid var(--border);
425
+ transition: all 0.15s ease;
426
+ }
427
+
428
+ .chip-active {
429
+ background: rgba(16, 185, 129, 0.08);
430
+ border-color: rgba(16, 185, 129, 0.35);
431
+ color: #E2E8F0;
432
+ }
433
+
434
+ .chip-inactive {
435
+ background: rgba(15, 23, 42, 0.4);
436
+ border-color: var(--border-subtle);
437
+ color: var(--text-dim);
438
+ }
439
+
440
+ .chip-remove-btn {
441
+ color: #F87171;
442
+ background: none;
443
+ border: none;
444
+ cursor: pointer;
445
+ padding: 0 2px;
446
+ font-size: 12px;
447
+ display: inline-flex;
448
+ align-items: center;
449
+ transition: color 0.15s;
450
+ }
451
+
452
+ .chip-remove-btn:hover {
453
+ color: #EF4444;
454
+ }
455
+
456
+ /* ==========================================================================
457
+ Main Grid Layout
458
+ ========================================================================== */
459
+ .main-grid {
460
+ display: grid;
461
+ grid-template-columns: 1.18fr 0.82fr;
462
+ gap: 20px;
463
+ align-items: start;
464
+ }
465
+
466
+ @media (max-width: 1024px) {
467
+ .main-grid {
468
+ grid-template-columns: 1fr;
469
+ }
470
+ }
471
+
472
+ .panel-header {
473
+ margin-bottom: 12px;
474
+ }
475
+
476
+ .panel-header h2 {
477
+ font-size: 15px;
478
+ font-weight: 700;
479
+ color: #FFFFFF;
480
+ }
481
+
482
+ .panel-sub {
483
+ font-size: 12px;
484
+ color: var(--text-muted);
485
+ }
486
+
487
+ /* ==========================================================================
488
+ Services Grid (Compact 2-Column Desktop Grid)
489
+ ========================================================================== */
490
+ .services-grid {
491
+ display: grid;
492
+ grid-template-columns: 1fr 1fr;
493
+ gap: 12px;
494
+ margin-bottom: 16px;
495
+ }
496
+
497
+ @media (max-width: 768px) {
498
+ .services-grid {
499
+ grid-template-columns: 1fr;
500
+ }
501
+ }
502
+
503
+ /* Cards */
504
+ .card {
505
+ background-color: var(--surface);
506
+ border: 1px solid var(--border);
507
+ border-radius: var(--radius);
508
+ overflow: hidden;
509
+ margin-bottom: 14px;
510
+ box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
511
+ }
512
+
513
+ .card:last-child {
514
+ margin-bottom: 0;
515
+ }
516
+
517
+ .service-card {
518
+ margin-bottom: 0;
519
+ background: var(--surface-card);
520
+ }
521
+
522
+ .card-header {
523
+ display: flex;
524
+ justify-content: space-between;
525
+ align-items: center;
526
+ padding: 12px 14px;
527
+ border-bottom: 1px solid var(--border-subtle);
528
+ background-color: rgba(255, 255, 255, 0.015);
529
+ }
530
+
531
+ .card-title {
532
+ display: flex;
533
+ align-items: center;
534
+ gap: 10px;
535
+ }
536
+
537
+ .card-icon-badge {
538
+ width: 32px;
539
+ height: 32px;
540
+ border-radius: 8px;
541
+ display: inline-flex;
542
+ align-items: center;
543
+ justify-content: center;
544
+ flex-shrink: 0;
545
+ transition: all 0.2s ease;
546
+ }
547
+
548
+ .card-icon-badge .brand-icon {
549
+ width: 18px;
550
+ height: 18px;
551
+ display: block;
552
+ }
553
+
554
+ .badge-gtm {
555
+ background: rgba(66, 133, 244, 0.12);
556
+ border: 1px solid rgba(66, 133, 244, 0.28);
557
+ }
558
+
559
+ .badge-meta {
560
+ background: rgba(0, 129, 251, 0.12);
561
+ border: 1px solid rgba(0, 129, 251, 0.28);
562
+ }
563
+
564
+ .badge-buzl {
565
+ background: rgba(59, 95, 245, 0.14);
566
+ border: 1px solid rgba(59, 95, 245, 0.32);
567
+ color: var(--brand-blue);
568
+ }
569
+
570
+ .badge-sheets {
571
+ background: rgba(15, 157, 88, 0.12);
572
+ border: 1px solid rgba(15, 157, 88, 0.28);
573
+ }
574
+
575
+ .badge-zoho {
576
+ background: rgba(229, 57, 53, 0.10);
577
+ border: 1px solid rgba(229, 57, 53, 0.25);
578
+ }
579
+
580
+ .badge-whatsapp {
581
+ background: rgba(37, 211, 102, 0.12);
582
+ border: 1px solid rgba(37, 211, 102, 0.28);
583
+ }
584
+
585
+ .badge-forms {
586
+ background: rgba(59, 95, 245, 0.12);
587
+ border: 1px solid rgba(59, 95, 245, 0.25);
588
+ color: var(--ice-blue);
589
+ }
590
+
591
+ .badge-quick {
592
+ background: rgba(245, 158, 11, 0.12);
593
+ border: 1px solid rgba(245, 158, 11, 0.28);
594
+ color: var(--accent-amber);
595
+ }
596
+
597
+ .badge-verify {
598
+ background: rgba(16, 185, 129, 0.12);
599
+ border: 1px solid rgba(16, 185, 129, 0.28);
600
+ color: var(--success);
601
+ }
602
+
603
+ .card-title h3 {
604
+ font-size: 13.5px;
605
+ font-weight: 600;
606
+ color: #FFFFFF;
607
+ }
608
+
609
+ .card-header-actions {
610
+ display: flex;
611
+ align-items: center;
612
+ gap: 8px;
613
+ }
614
+
615
+ .card-body {
616
+ padding: 14px;
617
+ }
618
+
619
+ /* ==========================================================================
620
+ Form Controls
621
+ ========================================================================== */
622
+ .form-group {
623
+ margin-bottom: 11px;
624
+ }
625
+
626
+ .form-group:last-child {
627
+ margin-bottom: 0;
628
+ }
629
+
630
+ .form-row {
631
+ display: grid;
632
+ grid-template-columns: 1fr 1fr;
633
+ gap: 10px;
634
+ }
635
+
636
+ .label-row {
637
+ display: flex;
638
+ justify-content: space-between;
639
+ align-items: center;
640
+ margin-bottom: 4px;
641
+ }
642
+
643
+ label {
644
+ display: block;
645
+ font-size: 12px;
646
+ font-weight: 500;
647
+ color: var(--text-muted);
648
+ margin-bottom: 4px;
649
+ }
650
+
651
+ .req {
652
+ color: var(--danger);
653
+ font-weight: bold;
654
+ }
655
+
656
+ input[type="text"],
657
+ input[type="url"],
658
+ input[type="password"],
659
+ select {
660
+ width: 100%;
661
+ padding: 8px 10px;
662
+ background-color: #0F172A;
663
+ border: 1px solid var(--border);
664
+ border-radius: var(--radius-sm);
665
+ color: var(--text);
666
+ font-family: var(--font);
667
+ font-size: 12.5px;
668
+ transition: all 0.15s ease;
669
+ }
670
+
671
+ input[type="text"]:focus,
672
+ input[type="url"]:focus,
673
+ input[type="password"]:focus,
674
+ select:focus {
675
+ outline: none;
676
+ border-color: var(--border-focus);
677
+ box-shadow: 0 0 0 3px var(--brand-blue-glow);
678
+ }
679
+
680
+ .helper-text {
681
+ font-size: 11px;
682
+ color: var(--text-dim);
683
+ margin-top: 4px;
684
+ line-height: 1.4;
685
+ display: block;
686
+ }
687
+
688
+ .checkbox-group label {
689
+ display: flex;
690
+ align-items: flex-start;
691
+ gap: 7px;
692
+ font-size: 11.5px;
693
+ color: var(--text-muted);
694
+ cursor: pointer;
695
+ }
696
+
697
+ .checkbox-group input[type="checkbox"] {
698
+ margin-top: 2px;
699
+ }
700
+
701
+ .link-btn {
702
+ font-size: 11.5px;
703
+ color: var(--brand-blue);
704
+ text-decoration: none;
705
+ font-weight: 600;
706
+ }
707
+
708
+ .link-btn:hover {
709
+ text-decoration: underline;
710
+ color: var(--ice-blue);
711
+ }
712
+
713
+ /* Switch Toggle */
714
+ .switch {
715
+ position: relative;
716
+ display: inline-block;
717
+ width: 36px;
718
+ height: 20px;
719
+ }
720
+
721
+ .switch input {
722
+ opacity: 0;
723
+ width: 0;
724
+ height: 0;
725
+ }
726
+
727
+ .slider {
728
+ position: absolute;
729
+ cursor: pointer;
730
+ top: 0; left: 0; right: 0; bottom: 0;
731
+ background-color: #334155;
732
+ transition: .2s;
733
+ border-radius: 20px;
734
+ }
735
+
736
+ .slider:before {
737
+ position: absolute;
738
+ content: "";
739
+ height: 14px;
740
+ width: 14px;
741
+ left: 3px;
742
+ bottom: 3px;
743
+ background-color: white;
744
+ transition: .2s;
745
+ border-radius: 50%;
746
+ }
747
+
748
+ input:checked + .slider {
749
+ background-color: var(--brand-blue);
750
+ box-shadow: 0 0 8px var(--brand-blue-glow);
751
+ }
752
+
753
+ input:checked + .slider:before {
754
+ transform: translateX(16px);
755
+ }
756
+
757
+ /* ==========================================================================
758
+ Sheet Preview Drawer (Collapsible & Clean)
759
+ ========================================================================== */
760
+ .sheet-preview-drawer {
761
+ margin-top: 10px;
762
+ border: 1px solid var(--border-subtle);
763
+ border-radius: var(--radius-sm);
764
+ background: rgba(15, 23, 42, 0.4);
765
+ }
766
+
767
+ .drawer-summary {
768
+ padding: 8px 10px;
769
+ font-size: 12px;
770
+ font-weight: 600;
771
+ color: var(--ice-blue);
772
+ cursor: pointer;
773
+ display: flex;
774
+ justify-content: space-between;
775
+ align-items: center;
776
+ list-style: none;
777
+ user-select: none;
778
+ }
779
+
780
+ .drawer-summary::-webkit-details-marker {
781
+ display: none;
782
+ }
783
+
784
+ .drawer-summary:hover {
785
+ background: rgba(255, 255, 255, 0.02);
786
+ }
787
+
788
+ .drawer-content {
789
+ padding: 10px;
790
+ border-top: 1px solid var(--border-subtle);
791
+ }
792
+
793
+ .column-hierarchy-preview {
794
+ display: flex;
795
+ flex-wrap: wrap;
796
+ gap: 5px;
797
+ }
798
+
799
+ .col-pill {
800
+ font-size: 11px;
801
+ padding: 3px 7px;
802
+ border-radius: 4px;
803
+ font-weight: 500;
804
+ font-family: var(--font-mono);
805
+ }
806
+
807
+ .col-pill-contact { background: #1e3a5f; color: #93c5fd; border: 1px solid #2563eb; }
808
+ .col-pill-dynamic { background: #3b1d54; color: #d8b4fe; border: 1px solid #9333ea; }
809
+ .col-pill-crm { background: #3f2c1d; color: #fdba74; border: 1px solid #ea580c; }
810
+ .col-pill-attrib { background: #1e293b; color: #94a3b8; border: 1px solid #475569; }
811
+
812
+ .dynamic-fields-checklist {
813
+ display: flex;
814
+ flex-wrap: wrap;
815
+ gap: 6px;
816
+ }
817
+
818
+ .field-checkbox-item {
819
+ display: inline-flex;
820
+ align-items: center;
821
+ gap: 6px;
822
+ background: #0F172A;
823
+ padding: 4px 8px;
824
+ border-radius: 4px;
825
+ border: 1px solid var(--border);
826
+ font-size: 11px;
827
+ color: #E2E8F0;
828
+ }
829
+
830
+ .crm-tabs-preview {
831
+ display: flex;
832
+ flex-wrap: wrap;
833
+ gap: 5px;
834
+ }
835
+
836
+ .tab-pill {
837
+ font-size: 10.5px;
838
+ padding: 2px 6px;
839
+ border-radius: 4px;
840
+ font-weight: 600;
841
+ }
842
+
843
+ .tab-pill-master { background: #1e3a5f; color: #60a5fa; }
844
+ .tab-pill-new { background: #064e3b; color: #34d399; }
845
+ .tab-pill-contacted { background: #451a03; color: #fbbf24; }
846
+ .tab-pill-qualified { background: #312e81; color: #a5b4fc; }
847
+ .tab-pill-converted { background: #3730a3; color: #c7d2fe; }
848
+ .tab-pill-spam { background: #450a0a; color: #f87171; }
849
+ .tab-pill-test { background: #1f2937; color: #9ca3af; }
850
+
851
+ /* ==========================================================================
852
+ Discovered Forms List & Individual Testing Runner
853
+ ========================================================================== */
854
+ .individual-forms-list {
855
+ display: flex;
856
+ flex-direction: column;
857
+ gap: 10px;
858
+ }
859
+
860
+ .form-item-card {
861
+ background: var(--surface-card);
862
+ border: 1px solid var(--border);
863
+ border-radius: var(--radius-sm);
864
+ padding: 10px;
865
+ }
866
+
867
+ .form-item-header {
868
+ display: flex;
869
+ justify-content: space-between;
870
+ align-items: center;
871
+ margin-bottom: 8px;
872
+ }
873
+
874
+ .form-selector-tag {
875
+ font-family: var(--font-mono);
876
+ font-size: 12px;
877
+ font-weight: 700;
878
+ color: var(--ice-blue);
879
+ background: rgba(59, 95, 245, 0.12);
880
+ padding: 2px 6px;
881
+ border-radius: 4px;
882
+ border: 1px solid rgba(59, 95, 245, 0.25);
883
+ }
884
+
885
+ .form-fields-grid {
886
+ display: grid;
887
+ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
888
+ gap: 6px;
889
+ margin-bottom: 8px;
890
+ }
891
+
892
+ .form-field-input-group label {
893
+ font-size: 10.5px;
894
+ color: var(--text-dim);
895
+ margin-bottom: 2px;
896
+ }
897
+
898
+ .form-field-input-group input {
899
+ padding: 5px 8px;
900
+ font-size: 11.5px;
901
+ }
902
+
903
+ .form-actions-row {
904
+ display: flex;
905
+ justify-content: space-between;
906
+ align-items: center;
907
+ gap: 8px;
908
+ }
909
+
910
+ /* ==========================================================================
911
+ Test Verification Console
912
+ ========================================================================== */
913
+ .test-console {
914
+ background-color: #070D18;
915
+ border: 1px solid var(--border);
916
+ border-radius: var(--radius-sm);
917
+ padding: 10px;
918
+ max-height: 220px;
919
+ overflow-y: auto;
920
+ font-family: var(--font-mono);
921
+ font-size: 11.5px;
922
+ }
923
+
924
+ .test-item {
925
+ display: flex;
926
+ gap: 8px;
927
+ padding: 4px 0;
928
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
929
+ }
930
+
931
+ .test-item:last-child {
932
+ border-bottom: none;
933
+ }
934
+
935
+ .test-icon.pass { color: var(--success); font-weight: bold; }
936
+ .test-icon.fail { color: var(--danger); font-weight: bold; }
937
+
938
+ .test-status-svg {
939
+ width: 14px;
940
+ height: 14px;
941
+ flex-shrink: 0;
942
+ margin-top: 2px;
943
+ }
944
+
945
+ .test-status-svg.pass {
946
+ color: var(--success);
947
+ stroke: var(--success);
948
+ }
949
+
950
+ .test-status-svg.fail {
951
+ color: var(--danger);
952
+ stroke: var(--danger);
953
+ }
954
+
955
+ .test-text {
956
+ flex: 1;
957
+ }
958
+
959
+ .test-detail {
960
+ color: var(--text-dim);
961
+ font-size: 10.5px;
962
+ }
963
+
964
+ /* Discovered Files List */
965
+ .discovered-files-card summary {
966
+ padding: 10px 14px;
967
+ }
968
+
969
+ .file-list {
970
+ list-style: none;
971
+ max-height: 140px;
972
+ overflow-y: auto;
973
+ }
974
+
975
+ .file-list li {
976
+ padding: 5px 8px;
977
+ border-bottom: 1px solid var(--border-subtle);
978
+ display: flex;
979
+ justify-content: space-between;
980
+ align-items: center;
981
+ font-size: 12px;
982
+ font-family: var(--font-mono);
983
+ }
984
+
985
+ .file-list li:last-child {
986
+ border-bottom: none;
987
+ }
988
+
989
+ /* Empty State */
990
+ .empty-state {
991
+ color: var(--text-dim);
992
+ font-size: 12px;
993
+ text-align: center;
994
+ padding: 16px 0;
995
+ }
996
+
997
+ /* Modals */
998
+ .modal {
999
+ position: fixed;
1000
+ top: 0; left: 0; right: 0; bottom: 0;
1001
+ display: flex;
1002
+ align-items: center;
1003
+ justify-content: center;
1004
+ z-index: 1000;
1005
+ }
1006
+
1007
+ .modal.hidden {
1008
+ display: none !important;
1009
+ }
1010
+
1011
+ .hidden {
1012
+ display: none !important;
1013
+ }
1014
+
1015
+ .modal-backdrop {
1016
+ position: absolute;
1017
+ top: 0; left: 0; right: 0; bottom: 0;
1018
+ background: rgba(3, 7, 18, 0.75);
1019
+ backdrop-filter: blur(4px);
1020
+ }
1021
+
1022
+ .modal-content {
1023
+ position: relative;
1024
+ background: var(--surface);
1025
+ border: 1px solid var(--border);
1026
+ border-radius: var(--radius);
1027
+ width: 90%;
1028
+ max-width: 600px;
1029
+ max-height: 85vh;
1030
+ overflow-y: auto;
1031
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
1032
+ z-index: 1001;
1033
+ }
1034
+
1035
+ .modal-large {
1036
+ max-width: 800px;
1037
+ }
1038
+
1039
+ .modal-small {
1040
+ max-width: 440px;
1041
+ }
1042
+
1043
+ .modal-header {
1044
+ padding: 14px 18px;
1045
+ border-bottom: 1px solid var(--border);
1046
+ display: flex;
1047
+ justify-content: space-between;
1048
+ align-items: center;
1049
+ }
1050
+
1051
+ .modal-header h3 {
1052
+ font-size: 15px;
1053
+ font-weight: 700;
1054
+ }
1055
+
1056
+ .modal-body {
1057
+ padding: 18px;
1058
+ }
1059
+
1060
+ .close-btn {
1061
+ background: none;
1062
+ border: none;
1063
+ color: var(--text-muted);
1064
+ font-size: 20px;
1065
+ cursor: pointer;
1066
+ }
1067
+
1068
+ .close-btn:hover {
1069
+ color: #FFFFFF;
1070
+ }
1071
+
1072
+ /* Backups Table */
1073
+ .backups-table-container {
1074
+ overflow-x: auto;
1075
+ }
1076
+
1077
+ .backups-table {
1078
+ width: 100%;
1079
+ border-collapse: collapse;
1080
+ font-size: 12px;
1081
+ }
1082
+
1083
+ .backups-table th, .backups-table td {
1084
+ padding: 8px 10px;
1085
+ border-bottom: 1px solid var(--border-subtle);
1086
+ text-align: left;
1087
+ }
1088
+
1089
+ .backups-table th {
1090
+ color: var(--text-dim);
1091
+ font-weight: 600;
1092
+ font-size: 11px;
1093
+ text-transform: uppercase;
1094
+ letter-spacing: 0.5px;
1095
+ }
1096
+
1097
+ /* Apps Script Code Modal */
1098
+ .code-container {
1099
+ position: relative;
1100
+ margin-top: 12px;
1101
+ }
1102
+
1103
+ .copy-btn {
1104
+ position: absolute;
1105
+ top: 8px; right: 8px;
1106
+ background: var(--surface-hover);
1107
+ border: 1px solid var(--border);
1108
+ color: var(--text);
1109
+ font-size: 11px;
1110
+ padding: 4px 8px;
1111
+ border-radius: 4px;
1112
+ cursor: pointer;
1113
+ }
1114
+
1115
+ .copy-btn:hover {
1116
+ background: var(--border);
1117
+ }
1118
+
1119
+ pre code {
1120
+ display: block;
1121
+ background: #070D18;
1122
+ border: 1px solid var(--border);
1123
+ border-radius: var(--radius-sm);
1124
+ padding: 12px;
1125
+ font-family: var(--font-mono);
1126
+ font-size: 11px;
1127
+ max-height: 350px;
1128
+ overflow-y: auto;
1129
+ color: #CBD5E1;
1130
+ }