pg_reports 0.2.1 → 0.2.3

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,1146 @@
1
+ <style>
2
+ /* Documentation Section */
3
+ .documentation-section {
4
+ background: var(--bg-card);
5
+ border: 1px solid var(--border-color);
6
+ border-radius: 12px;
7
+ margin-bottom: 0.75rem;
8
+ overflow: hidden;
9
+ }
10
+
11
+ .documentation-toggle {
12
+ display: flex;
13
+ align-items: center;
14
+ gap: 0.75rem;
15
+ padding: 1rem 1.25rem;
16
+ cursor: pointer;
17
+ user-select: none;
18
+ color: var(--text-secondary);
19
+ font-weight: 500;
20
+ transition: all 0.15s;
21
+ }
22
+
23
+ .documentation-toggle:hover {
24
+ background: var(--bg-tertiary);
25
+ color: var(--text-primary);
26
+ }
27
+
28
+ .documentation-section[open] .documentation-toggle {
29
+ border-bottom: 1px solid var(--border-color);
30
+ background: var(--bg-tertiary);
31
+ }
32
+
33
+ .toggle-icon {
34
+ font-size: 0.75rem;
35
+ transition: transform 0.2s;
36
+ }
37
+
38
+ .documentation-section[open] .toggle-icon {
39
+ transform: rotate(90deg);
40
+ }
41
+
42
+ .documentation-content {
43
+ padding: 1.25rem;
44
+ display: grid;
45
+ gap: 1.25rem;
46
+ }
47
+
48
+ .doc-block h4 {
49
+ font-size: 0.875rem;
50
+ font-weight: 600;
51
+ color: var(--accent-purple);
52
+ margin-bottom: 0.5rem;
53
+ text-transform: uppercase;
54
+ letter-spacing: 0.03em;
55
+ }
56
+
57
+ .doc-block p {
58
+ color: var(--text-secondary);
59
+ line-height: 1.7;
60
+ font-size: 0.9rem;
61
+ }
62
+
63
+ .nuances-list {
64
+ list-style: none;
65
+ padding: 0;
66
+ margin: 0;
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 0.5rem;
70
+ }
71
+
72
+ .nuances-list li {
73
+ position: relative;
74
+ padding-left: 1.5rem;
75
+ color: var(--text-secondary);
76
+ font-size: 0.875rem;
77
+ line-height: 1.6;
78
+ }
79
+
80
+ .nuances-list li::before {
81
+ content: '→';
82
+ position: absolute;
83
+ left: 0;
84
+ color: var(--accent-amber);
85
+ }
86
+
87
+ .thresholds-block {
88
+ background: var(--bg-tertiary);
89
+ padding: 1rem;
90
+ border-radius: 8px;
91
+ }
92
+
93
+ .thresholds-grid {
94
+ display: flex;
95
+ flex-direction: column;
96
+ gap: 0.5rem;
97
+ }
98
+
99
+ .threshold-item {
100
+ display: flex;
101
+ align-items: center;
102
+ gap: 1rem;
103
+ flex-wrap: wrap;
104
+ font-size: 0.8rem;
105
+ font-family: 'JetBrains Mono', monospace;
106
+ }
107
+
108
+ .threshold-field {
109
+ color: var(--text-primary);
110
+ font-weight: 500;
111
+ min-width: 120px;
112
+ }
113
+
114
+ .threshold-warning {
115
+ color: var(--accent-amber);
116
+ }
117
+
118
+ .threshold-critical {
119
+ color: var(--accent-rose);
120
+ }
121
+
122
+ .threshold-note {
123
+ color: var(--text-muted);
124
+ font-size: 0.75rem;
125
+ font-style: italic;
126
+ }
127
+
128
+ /* Dropdown */
129
+ .dropdown {
130
+ position: relative;
131
+ display: inline-block;
132
+ }
133
+
134
+ .dropdown-menu {
135
+ display: none;
136
+ position: absolute;
137
+ top: 100%;
138
+ left: 0;
139
+ margin-top: 4px;
140
+ background: var(--bg-card);
141
+ border: 1px solid var(--border-color);
142
+ border-radius: 10px;
143
+ min-width: 160px;
144
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
145
+ z-index: 100;
146
+ overflow: hidden;
147
+ }
148
+
149
+ .dropdown-menu.show {
150
+ display: block;
151
+ }
152
+
153
+ .dropdown-menu a {
154
+ display: block;
155
+ padding: 0.75rem 1rem;
156
+ color: var(--text-secondary);
157
+ text-decoration: none;
158
+ font-size: 0.875rem;
159
+ transition: all 0.15s;
160
+ }
161
+
162
+ .dropdown-menu a:hover {
163
+ background: var(--bg-tertiary);
164
+ color: var(--text-primary);
165
+ }
166
+
167
+ .dropdown-menu a:not(:last-child) {
168
+ border-bottom: 1px solid var(--border-color);
169
+ }
170
+
171
+ /* Clickable rows */
172
+ .results-table tbody tr.data-row {
173
+ cursor: pointer;
174
+ transition: all 0.15s;
175
+ }
176
+
177
+ .results-table tbody tr.data-row:hover {
178
+ background: var(--bg-secondary);
179
+ }
180
+
181
+ .results-table tbody tr.data-row.expanded {
182
+ background: var(--bg-tertiary);
183
+ }
184
+
185
+ .results-table tbody tr.data-row td:first-child::before {
186
+ content: '▸';
187
+ display: inline-block;
188
+ margin-right: 0.5rem;
189
+ color: var(--text-muted);
190
+ transition: transform 0.2s;
191
+ }
192
+
193
+ .results-table tbody tr.data-row.expanded td:first-child::before {
194
+ content: '▾';
195
+ color: var(--accent-purple);
196
+ }
197
+
198
+ /* Problem row highlighting */
199
+ .results-table tbody tr.data-row.warning-row {
200
+ background: rgba(245, 158, 11, 0.08);
201
+ border-left: 3px solid var(--accent-amber);
202
+ }
203
+
204
+ .results-table tbody tr.data-row.warning-row:hover {
205
+ background: rgba(245, 158, 11, 0.12);
206
+ }
207
+
208
+ .results-table tbody tr.data-row.critical-row {
209
+ background: rgba(244, 63, 94, 0.08);
210
+ border-left: 3px solid var(--accent-rose);
211
+ }
212
+
213
+ .results-table tbody tr.data-row.critical-row:hover {
214
+ background: rgba(244, 63, 94, 0.12);
215
+ }
216
+
217
+ /* Problem indicator in row */
218
+ .problem-indicator {
219
+ display: inline-flex;
220
+ align-items: center;
221
+ gap: 0.25rem;
222
+ margin-left: 0.5rem;
223
+ padding: 0.125rem 0.375rem;
224
+ border-radius: 4px;
225
+ font-size: 0.65rem;
226
+ font-weight: 600;
227
+ cursor: pointer;
228
+ transition: all 0.15s;
229
+ }
230
+
231
+ .problem-indicator.warning {
232
+ background: rgba(245, 158, 11, 0.2);
233
+ color: var(--accent-amber);
234
+ }
235
+
236
+ .problem-indicator.warning:hover {
237
+ background: rgba(245, 158, 11, 0.35);
238
+ }
239
+
240
+ .problem-indicator.critical {
241
+ background: rgba(244, 63, 94, 0.2);
242
+ color: var(--accent-rose);
243
+ }
244
+
245
+ .problem-indicator.critical:hover {
246
+ background: rgba(244, 63, 94, 0.35);
247
+ }
248
+
249
+ /* Problem Modal */
250
+ .problem-modal {
251
+ position: fixed;
252
+ inset: 0;
253
+ background: rgba(0, 0, 0, 0.7);
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ z-index: 1000;
258
+ backdrop-filter: blur(4px);
259
+ }
260
+
261
+ .problem-modal-content {
262
+ background: var(--bg-card);
263
+ border: 1px solid var(--border-color);
264
+ border-radius: 16px;
265
+ max-width: 600px;
266
+ width: 90%;
267
+ max-height: 80vh;
268
+ overflow: auto;
269
+ }
270
+
271
+ .problem-modal-header {
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: space-between;
275
+ padding: 1.25rem 1.5rem;
276
+ border-bottom: 1px solid var(--border-color);
277
+ background: rgba(244, 63, 94, 0.1);
278
+ }
279
+
280
+ .problem-modal-header h3 {
281
+ font-size: 1.125rem;
282
+ font-weight: 600;
283
+ color: var(--accent-rose);
284
+ }
285
+
286
+ .problem-modal-body {
287
+ padding: 1.5rem;
288
+ }
289
+
290
+ .problem-details {
291
+ display: flex;
292
+ flex-direction: column;
293
+ gap: 1rem;
294
+ }
295
+
296
+ .problem-field {
297
+ display: flex;
298
+ flex-direction: column;
299
+ gap: 0.375rem;
300
+ }
301
+
302
+ .problem-field-label {
303
+ font-size: 0.75rem;
304
+ font-weight: 600;
305
+ color: var(--text-muted);
306
+ text-transform: uppercase;
307
+ }
308
+
309
+ .problem-field-value {
310
+ font-family: 'JetBrains Mono', monospace;
311
+ font-size: 0.9rem;
312
+ padding: 0.75rem;
313
+ background: var(--bg-tertiary);
314
+ border-radius: 8px;
315
+ }
316
+
317
+ .problem-field-value.critical {
318
+ color: var(--accent-rose);
319
+ border-left: 3px solid var(--accent-rose);
320
+ }
321
+
322
+ .problem-field-value.warning {
323
+ color: var(--accent-amber);
324
+ border-left: 3px solid var(--accent-amber);
325
+ }
326
+
327
+ .problem-explanation {
328
+ padding: 1rem;
329
+ background: var(--bg-tertiary);
330
+ border-radius: 8px;
331
+ color: var(--text-secondary);
332
+ line-height: 1.6;
333
+ }
334
+
335
+ .problem-explanation h4 {
336
+ color: var(--text-primary);
337
+ margin-bottom: 0.5rem;
338
+ font-size: 0.875rem;
339
+ }
340
+
341
+ /* Expanded row detail */
342
+ .results-table tbody tr.detail-row {
343
+ display: none;
344
+ }
345
+
346
+ .results-table tbody tr.detail-row.show {
347
+ display: table-row;
348
+ }
349
+
350
+ .results-table tbody tr.detail-row td {
351
+ padding: 0;
352
+ background: var(--bg-primary);
353
+ border-bottom: 2px solid var(--accent-purple);
354
+ }
355
+
356
+ .row-detail {
357
+ padding: 1.25rem;
358
+ display: grid;
359
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
360
+ gap: 1rem;
361
+ }
362
+
363
+ .row-detail-item {
364
+ display: flex;
365
+ flex-direction: column;
366
+ gap: 0.375rem;
367
+ }
368
+
369
+ .row-detail-item.full-width {
370
+ grid-column: 1 / -1;
371
+ }
372
+
373
+ .row-detail-label {
374
+ font-size: 0.7rem;
375
+ font-weight: 600;
376
+ color: var(--text-muted);
377
+ text-transform: uppercase;
378
+ letter-spacing: 0.05em;
379
+ }
380
+
381
+ .row-detail-value {
382
+ padding: 0.75rem 1rem;
383
+ background: var(--bg-card);
384
+ border: 1px solid var(--border-color);
385
+ border-radius: 8px;
386
+ font-family: 'JetBrains Mono', monospace;
387
+ font-size: 0.8rem;
388
+ color: var(--text-primary);
389
+ white-space: pre-wrap;
390
+ word-break: break-word;
391
+ max-height: 200px;
392
+ overflow-y: auto;
393
+ }
394
+
395
+ .row-detail-value.query {
396
+ color: var(--accent-green);
397
+ max-height: 300px;
398
+ }
399
+
400
+ .row-detail-value.number {
401
+ color: var(--accent-blue);
402
+ }
403
+
404
+ .row-detail-value.source {
405
+ color: var(--accent-amber);
406
+ font-size: 0.75rem;
407
+ }
408
+
409
+ .row-detail-value.problem-warning {
410
+ border-color: var(--accent-amber);
411
+ background: rgba(245, 158, 11, 0.1);
412
+ }
413
+
414
+ .row-detail-value.problem-critical {
415
+ border-color: var(--accent-rose);
416
+ background: rgba(244, 63, 94, 0.1);
417
+ }
418
+
419
+ /* Source location badge in table */
420
+ .source-badge {
421
+ display: inline-block;
422
+ padding: 0.25rem 0.5rem;
423
+ background: rgba(245, 158, 11, 0.15);
424
+ border: 1px solid rgba(245, 158, 11, 0.3);
425
+ border-radius: 6px;
426
+ font-family: 'JetBrains Mono', monospace;
427
+ font-size: 0.7rem;
428
+ color: var(--accent-amber);
429
+ white-space: nowrap;
430
+ max-width: 200px;
431
+ overflow: hidden;
432
+ text-overflow: ellipsis;
433
+ text-decoration: none;
434
+ transition: all 0.15s;
435
+ }
436
+
437
+ .source-badge:hover {
438
+ background: rgba(245, 158, 11, 0.25);
439
+ border-color: rgba(245, 158, 11, 0.5);
440
+ }
441
+
442
+ .source-badge.clickable {
443
+ cursor: pointer;
444
+ }
445
+
446
+ .source-badge.clickable::after {
447
+ content: ' ↗';
448
+ opacity: 0.7;
449
+ }
450
+
451
+ .source-badge.empty {
452
+ background: var(--bg-tertiary);
453
+ border-color: var(--border-color);
454
+ color: var(--text-muted);
455
+ font-style: italic;
456
+ }
457
+
458
+ /* Copy button */
459
+ .copy-btn {
460
+ align-self: flex-start;
461
+ margin-top: 0.375rem;
462
+ padding: 0.25rem 0.625rem;
463
+ background: var(--bg-tertiary);
464
+ border: 1px solid var(--border-color);
465
+ border-radius: 6px;
466
+ color: var(--text-muted);
467
+ font-size: 0.7rem;
468
+ cursor: pointer;
469
+ transition: all 0.15s;
470
+ }
471
+
472
+ .copy-btn:hover {
473
+ background: var(--accent-purple);
474
+ border-color: var(--accent-purple);
475
+ color: white;
476
+ }
477
+
478
+ /* Row hint */
479
+ .row-hint {
480
+ display: inline-block;
481
+ margin-left: 0.5rem;
482
+ padding: 0.125rem 0.5rem;
483
+ background: var(--bg-tertiary);
484
+ border-radius: 4px;
485
+ font-size: 0.7rem;
486
+ color: var(--text-muted);
487
+ }
488
+
489
+ /* IDE Link dropdown */
490
+ .ide-dropdown {
491
+ display: inline-block;
492
+ }
493
+
494
+ .ide-dropdown-menu {
495
+ display: none;
496
+ position: fixed;
497
+ background: var(--bg-card);
498
+ border: 1px solid var(--border-color);
499
+ border-radius: 8px;
500
+ min-width: 140px;
501
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
502
+ z-index: 10000;
503
+ }
504
+
505
+ .ide-dropdown-menu.show {
506
+ display: block;
507
+ }
508
+
509
+ .ide-dropdown-menu a {
510
+ display: block;
511
+ padding: 0.5rem 0.75rem;
512
+ color: var(--text-secondary);
513
+ text-decoration: none;
514
+ font-size: 0.75rem;
515
+ transition: all 0.15s;
516
+ }
517
+
518
+ .ide-dropdown-menu a:hover {
519
+ background: var(--bg-tertiary);
520
+ color: var(--text-primary);
521
+ }
522
+
523
+ /* Top scrollbar */
524
+ .top-scroll-wrapper {
525
+ overflow-x: auto;
526
+ overflow-y: hidden;
527
+ height: 12px;
528
+ background: var(--bg-tertiary);
529
+ border-bottom: 1px solid var(--border-color);
530
+ }
531
+
532
+ .top-scroll-content {
533
+ height: 1px;
534
+ }
535
+
536
+ /* Sortable column headers */
537
+ .results-table th.sortable {
538
+ cursor: pointer;
539
+ user-select: none;
540
+ transition: background 0.15s;
541
+ }
542
+
543
+ .results-table th.sortable:hover {
544
+ background: var(--bg-secondary);
545
+ }
546
+
547
+ .results-table th .sort-indicator {
548
+ display: inline-block;
549
+ margin-left: 0.375rem;
550
+ opacity: 0.3;
551
+ font-size: 0.65rem;
552
+ transition: opacity 0.15s;
553
+ }
554
+
555
+ .results-table th.sortable:hover .sort-indicator {
556
+ opacity: 0.6;
557
+ }
558
+
559
+ .results-table th.sorted .sort-indicator {
560
+ opacity: 1;
561
+ color: var(--accent-purple);
562
+ }
563
+
564
+ .results-table th.sorted {
565
+ background: var(--bg-secondary);
566
+ }
567
+
568
+ /* IDE Settings */
569
+ .btn-icon {
570
+ width: 40px;
571
+ padding: 0;
572
+ background: var(--bg-tertiary);
573
+ border: 1px solid var(--border-color);
574
+ }
575
+
576
+ .btn-icon:hover {
577
+ background: var(--bg-secondary);
578
+ }
579
+
580
+ .settings-label {
581
+ color: var(--text-secondary);
582
+ margin-bottom: 1rem;
583
+ font-size: 0.9rem;
584
+ }
585
+
586
+ .ide-options {
587
+ display: flex;
588
+ flex-direction: column;
589
+ gap: 0.5rem;
590
+ }
591
+
592
+ .ide-option {
593
+ display: flex;
594
+ align-items: center;
595
+ gap: 0.75rem;
596
+ padding: 0.75rem 1rem;
597
+ background: var(--bg-tertiary);
598
+ border: 1px solid var(--border-color);
599
+ border-radius: 8px;
600
+ cursor: pointer;
601
+ transition: all 0.15s;
602
+ }
603
+
604
+ .ide-option:hover {
605
+ background: var(--bg-secondary);
606
+ border-color: var(--accent-purple);
607
+ }
608
+
609
+ .ide-option:has(input:checked) {
610
+ background: rgba(157, 140, 214, 0.15);
611
+ border-color: var(--accent-purple);
612
+ }
613
+
614
+ .ide-option input[type="radio"] {
615
+ accent-color: var(--accent-purple);
616
+ }
617
+
618
+ .ide-option span {
619
+ color: var(--text-secondary);
620
+ font-size: 0.875rem;
621
+ }
622
+
623
+ .ide-option:has(input:checked) span {
624
+ color: var(--text-primary);
625
+ }
626
+
627
+ .modal-small {
628
+ max-width: 360px;
629
+ }
630
+
631
+ /* Button variants */
632
+ .btn.btn-small {
633
+ padding: 0.5rem 1rem;
634
+ height: auto;
635
+ font-size: 0.8rem;
636
+ }
637
+
638
+ .btn.btn-muted {
639
+ background: var(--bg-tertiary);
640
+ border-color: var(--accent-rose);
641
+ color: var(--text-secondary);
642
+ }
643
+
644
+ .btn.btn-muted:hover {
645
+ background: var(--bg-card);
646
+ color: var(--text-primary);
647
+ }
648
+
649
+ /* Saved Records Section */
650
+ .saved-records-section {
651
+ background: var(--bg-card);
652
+ border: 1px solid var(--accent-purple);
653
+ border-radius: 12px;
654
+ margin-bottom: 1rem;
655
+ overflow: hidden;
656
+ }
657
+
658
+ .saved-records-header {
659
+ display: flex;
660
+ align-items: center;
661
+ justify-content: space-between;
662
+ padding: 0.75rem 1rem;
663
+ background: rgba(157, 140, 214, 0.1);
664
+ border-bottom: 1px solid var(--border-color);
665
+ }
666
+
667
+ .saved-records-title {
668
+ font-weight: 600;
669
+ color: var(--accent-purple);
670
+ font-size: 0.9rem;
671
+ }
672
+
673
+ .saved-records-list {
674
+ padding: 0.75rem;
675
+ display: flex;
676
+ flex-direction: column;
677
+ gap: 0.5rem;
678
+ max-height: 400px;
679
+ overflow-y: auto;
680
+ }
681
+
682
+ .saved-record-card {
683
+ background: var(--bg-tertiary);
684
+ border: 1px solid var(--border-color);
685
+ border-radius: 8px;
686
+ padding: 0.75rem;
687
+ position: relative;
688
+ cursor: pointer;
689
+ transition: all 0.15s;
690
+ }
691
+
692
+ .saved-record-card:hover {
693
+ border-color: var(--accent-purple);
694
+ background: var(--bg-secondary);
695
+ }
696
+
697
+ .saved-record-card.expanded {
698
+ background: var(--bg-card);
699
+ border-color: var(--accent-purple);
700
+ }
701
+
702
+ .saved-record-header {
703
+ display: flex;
704
+ align-items: center;
705
+ justify-content: space-between;
706
+ margin-bottom: 0.5rem;
707
+ }
708
+
709
+ .saved-record-time {
710
+ font-size: 0.7rem;
711
+ color: var(--text-muted);
712
+ font-family: 'JetBrains Mono', monospace;
713
+ }
714
+
715
+ .saved-record-remove {
716
+ width: 24px;
717
+ height: 24px;
718
+ padding: 0;
719
+ background: transparent;
720
+ border: 1px solid transparent;
721
+ border-radius: 4px;
722
+ color: var(--text-muted);
723
+ font-size: 1rem;
724
+ cursor: pointer;
725
+ transition: all 0.15s;
726
+ }
727
+
728
+ .saved-record-remove:hover {
729
+ background: var(--accent-rose);
730
+ border-color: var(--accent-rose);
731
+ color: white;
732
+ }
733
+
734
+ .saved-record-data {
735
+ display: grid;
736
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
737
+ gap: 0.5rem;
738
+ font-size: 0.75rem;
739
+ }
740
+
741
+ .saved-record-field {
742
+ display: flex;
743
+ flex-direction: column;
744
+ gap: 0.125rem;
745
+ }
746
+
747
+ .saved-record-field-name {
748
+ color: var(--text-muted);
749
+ font-size: 0.65rem;
750
+ text-transform: uppercase;
751
+ }
752
+
753
+ .saved-record-field-value {
754
+ color: var(--text-primary);
755
+ font-family: 'JetBrains Mono', monospace;
756
+ white-space: nowrap;
757
+ overflow: hidden;
758
+ text-overflow: ellipsis;
759
+ }
760
+
761
+ .saved-record-field-value.highlight {
762
+ color: var(--accent-green);
763
+ font-weight: 600;
764
+ }
765
+
766
+ .saved-record-query {
767
+ grid-column: 1 / -1;
768
+ margin-top: 0.5rem;
769
+ padding: 0.75rem;
770
+ background: var(--bg-primary);
771
+ border: 1px solid var(--border-color);
772
+ border-radius: 6px;
773
+ font-family: 'JetBrains Mono', monospace;
774
+ font-size: 0.75rem;
775
+ color: var(--accent-green);
776
+ white-space: pre-wrap;
777
+ word-break: break-word;
778
+ max-height: 150px;
779
+ overflow-y: auto;
780
+ }
781
+
782
+ .saved-record-expand-hint {
783
+ font-size: 0.65rem;
784
+ color: var(--text-muted);
785
+ margin-left: auto;
786
+ }
787
+
788
+ .saved-record-card.expanded .saved-record-expand-hint {
789
+ display: none;
790
+ }
791
+
792
+ .saved-record-detail {
793
+ display: none;
794
+ grid-column: 1 / -1;
795
+ margin-top: 0.75rem;
796
+ padding-top: 0.75rem;
797
+ border-top: 1px solid var(--border-color);
798
+ }
799
+
800
+ .saved-record-card.expanded .saved-record-detail {
801
+ display: block;
802
+ }
803
+
804
+ .saved-record-detail-grid {
805
+ display: grid;
806
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
807
+ gap: 0.75rem;
808
+ }
809
+
810
+ .saved-record-detail-item {
811
+ display: flex;
812
+ flex-direction: column;
813
+ gap: 0.25rem;
814
+ }
815
+
816
+ .saved-record-detail-item.full-width {
817
+ grid-column: 1 / -1;
818
+ }
819
+
820
+ .saved-record-detail-label {
821
+ font-size: 0.65rem;
822
+ color: var(--text-muted);
823
+ text-transform: uppercase;
824
+ }
825
+
826
+ .saved-record-detail-value {
827
+ padding: 0.5rem;
828
+ background: var(--bg-primary);
829
+ border: 1px solid var(--border-color);
830
+ border-radius: 6px;
831
+ font-family: 'JetBrains Mono', monospace;
832
+ font-size: 0.75rem;
833
+ color: var(--text-primary);
834
+ }
835
+
836
+ .saved-record-detail-value.query {
837
+ color: var(--accent-green);
838
+ white-space: pre-wrap;
839
+ word-break: break-word;
840
+ max-height: 200px;
841
+ overflow-y: auto;
842
+ }
843
+
844
+ .saved-record-detail-value.number {
845
+ color: var(--accent-blue);
846
+ }
847
+
848
+ /* Save button in detail row */
849
+ .detail-actions {
850
+ grid-column: 1 / -1;
851
+ display: flex;
852
+ gap: 0.5rem;
853
+ padding-top: 0.75rem;
854
+ border-top: 1px solid var(--border-color);
855
+ margin-top: 0.5rem;
856
+ }
857
+
858
+ .btn-save {
859
+ padding: 0.375rem 0.75rem;
860
+ background: var(--bg-tertiary);
861
+ border: 1px solid var(--accent-purple);
862
+ border-radius: 6px;
863
+ color: var(--accent-purple);
864
+ font-size: 0.75rem;
865
+ cursor: pointer;
866
+ transition: all 0.15s;
867
+ }
868
+
869
+ .btn-save:hover {
870
+ background: var(--accent-purple);
871
+ color: white;
872
+ }
873
+
874
+ .btn-save.saved {
875
+ background: var(--accent-purple);
876
+ color: white;
877
+ }
878
+
879
+ .btn-save.saved:hover {
880
+ background: var(--accent-rose);
881
+ border-color: var(--accent-rose);
882
+ }
883
+
884
+ .btn-explain {
885
+ padding: 0.375rem 0.75rem;
886
+ background: var(--bg-tertiary);
887
+ border: 1px solid var(--accent-blue);
888
+ border-radius: 6px;
889
+ color: var(--accent-blue);
890
+ font-size: 0.75rem;
891
+ cursor: pointer;
892
+ transition: all 0.15s;
893
+ }
894
+
895
+ .btn-explain:hover {
896
+ background: var(--accent-blue);
897
+ color: white;
898
+ }
899
+
900
+ .btn-migration {
901
+ padding: 0.375rem 0.75rem;
902
+ background: var(--bg-tertiary);
903
+ border: 1px solid var(--accent-amber);
904
+ border-radius: 6px;
905
+ color: var(--accent-amber);
906
+ font-size: 0.75rem;
907
+ cursor: pointer;
908
+ transition: all 0.15s;
909
+ }
910
+
911
+ .btn-migration:hover {
912
+ background: var(--accent-amber);
913
+ color: var(--bg-primary);
914
+ }
915
+
916
+ /* EXPLAIN Modal */
917
+ .modal-wide {
918
+ max-width: 900px;
919
+ }
920
+
921
+ .explain-result {
922
+ font-family: 'JetBrains Mono', monospace;
923
+ font-size: 0.8rem;
924
+ background: var(--bg-primary);
925
+ border: 1px solid var(--border-color);
926
+ border-radius: 8px;
927
+ padding: 1rem;
928
+ white-space: pre-wrap;
929
+ overflow-x: auto;
930
+ max-height: 500px;
931
+ overflow-y: auto;
932
+ color: var(--accent-green);
933
+ line-height: 1.5;
934
+ }
935
+
936
+ .explain-stats {
937
+ display: grid;
938
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
939
+ gap: 0.75rem;
940
+ margin-bottom: 1rem;
941
+ padding: 1rem;
942
+ background: var(--bg-tertiary);
943
+ border-radius: 8px;
944
+ }
945
+
946
+ .explain-stat {
947
+ display: flex;
948
+ flex-direction: column;
949
+ gap: 0.25rem;
950
+ }
951
+
952
+ .explain-stat-label {
953
+ font-size: 0.7rem;
954
+ color: var(--text-muted);
955
+ text-transform: uppercase;
956
+ }
957
+
958
+ .explain-stat-value {
959
+ font-family: 'JetBrains Mono', monospace;
960
+ font-size: 0.9rem;
961
+ color: var(--accent-blue);
962
+ font-weight: 600;
963
+ }
964
+
965
+ /* Query Analyzer Modal */
966
+ .explain-query-section {
967
+ margin-bottom: 1rem;
968
+ }
969
+
970
+ .explain-label {
971
+ display: block;
972
+ font-size: 0.75rem;
973
+ font-weight: 600;
974
+ color: var(--text-muted);
975
+ text-transform: uppercase;
976
+ margin-bottom: 0.5rem;
977
+ }
978
+
979
+ .explain-query {
980
+ font-family: 'JetBrains Mono', monospace;
981
+ font-size: 0.8rem;
982
+ background: var(--bg-primary);
983
+ border: 1px solid var(--border-color);
984
+ border-radius: 8px;
985
+ padding: 1rem;
986
+ color: var(--accent-green);
987
+ white-space: pre-wrap;
988
+ word-break: break-word;
989
+ max-height: 200px;
990
+ overflow-y: auto;
991
+ margin: 0;
992
+ }
993
+
994
+ .explain-query .query-param {
995
+ color: var(--accent-rose);
996
+ background: rgba(217, 112, 132, 0.15);
997
+ padding: 0.1rem 0.3rem;
998
+ border-radius: 3px;
999
+ font-weight: 600;
1000
+ }
1001
+
1002
+ .explain-params-section {
1003
+ margin-bottom: 1rem;
1004
+ padding: 1rem;
1005
+ background: var(--bg-tertiary);
1006
+ border-radius: 8px;
1007
+ }
1008
+
1009
+ .explain-params-grid {
1010
+ display: grid;
1011
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
1012
+ gap: 0.75rem;
1013
+ }
1014
+
1015
+ .param-input-group {
1016
+ display: flex;
1017
+ flex-direction: column;
1018
+ gap: 0.25rem;
1019
+ }
1020
+
1021
+ .param-input-label {
1022
+ font-size: 0.7rem;
1023
+ color: var(--accent-blue);
1024
+ font-family: 'JetBrains Mono', monospace;
1025
+ }
1026
+
1027
+ .param-input {
1028
+ padding: 0.5rem 0.75rem;
1029
+ background: var(--bg-primary);
1030
+ border: 1px solid var(--border-color);
1031
+ border-radius: 6px;
1032
+ color: var(--text-primary);
1033
+ font-family: 'JetBrains Mono', monospace;
1034
+ font-size: 0.8rem;
1035
+ transition: all 0.15s;
1036
+ }
1037
+
1038
+ .param-input:focus {
1039
+ outline: none;
1040
+ border-color: var(--accent-blue);
1041
+ box-shadow: 0 0 0 2px rgba(107, 159, 232, 0.2);
1042
+ }
1043
+
1044
+ .param-input::placeholder {
1045
+ color: var(--text-muted);
1046
+ font-style: italic;
1047
+ }
1048
+
1049
+ .explain-actions {
1050
+ display: flex;
1051
+ gap: 0.75rem;
1052
+ margin-bottom: 1rem;
1053
+ }
1054
+
1055
+ .explain-actions .btn {
1056
+ flex: 1;
1057
+ }
1058
+
1059
+ /* Query Results Table */
1060
+ .query-results-wrapper {
1061
+ margin-top: 1rem;
1062
+ max-height: 400px;
1063
+ overflow: auto;
1064
+ border: 1px solid var(--border-color);
1065
+ border-radius: 8px;
1066
+ }
1067
+
1068
+ .query-results-table {
1069
+ width: 100%;
1070
+ border-collapse: collapse;
1071
+ font-family: 'JetBrains Mono', monospace;
1072
+ font-size: 0.75rem;
1073
+ }
1074
+
1075
+ .query-results-table th {
1076
+ position: sticky;
1077
+ top: 0;
1078
+ padding: 0.75rem;
1079
+ text-align: left;
1080
+ background: var(--bg-tertiary);
1081
+ color: var(--text-muted);
1082
+ font-weight: 500;
1083
+ text-transform: uppercase;
1084
+ font-size: 0.65rem;
1085
+ letter-spacing: 0.05em;
1086
+ border-bottom: 1px solid var(--border-color);
1087
+ }
1088
+
1089
+ .query-results-table td {
1090
+ padding: 0.5rem 0.75rem;
1091
+ border-bottom: 1px solid var(--border-color);
1092
+ color: var(--text-secondary);
1093
+ max-width: 300px;
1094
+ overflow: hidden;
1095
+ text-overflow: ellipsis;
1096
+ white-space: nowrap;
1097
+ }
1098
+
1099
+ .query-results-table tr:hover td {
1100
+ background: var(--bg-tertiary);
1101
+ color: var(--text-primary);
1102
+ }
1103
+
1104
+ .query-results-info {
1105
+ display: flex;
1106
+ align-items: center;
1107
+ justify-content: space-between;
1108
+ padding: 0.75rem 1rem;
1109
+ background: var(--bg-tertiary);
1110
+ border-radius: 8px;
1111
+ margin-top: 1rem;
1112
+ font-size: 0.8rem;
1113
+ color: var(--text-secondary);
1114
+ }
1115
+
1116
+ .query-results-info .count {
1117
+ color: var(--accent-blue);
1118
+ font-weight: 600;
1119
+ }
1120
+
1121
+ .query-results-info .time {
1122
+ color: var(--accent-green);
1123
+ font-weight: 600;
1124
+ }
1125
+
1126
+ /* Migration Modal */
1127
+ .migration-code {
1128
+ font-family: 'JetBrains Mono', monospace;
1129
+ font-size: 0.8rem;
1130
+ background: var(--bg-primary);
1131
+ border: 1px solid var(--border-color);
1132
+ border-radius: 8px;
1133
+ padding: 1rem;
1134
+ white-space: pre;
1135
+ overflow-x: auto;
1136
+ color: var(--accent-green);
1137
+ line-height: 1.5;
1138
+ margin-bottom: 1rem;
1139
+ }
1140
+
1141
+ .migration-actions {
1142
+ display: flex;
1143
+ gap: 0.75rem;
1144
+ justify-content: flex-end;
1145
+ }
1146
+ </style>