@atlashub/smartstack-cli 1.4.0 → 1.4.1

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.
Files changed (24) hide show
  1. package/.documentation/agents.html +916 -912
  2. package/.documentation/apex.html +1018 -1014
  3. package/.documentation/business-analyse.html +1501 -1074
  4. package/.documentation/commands.html +680 -676
  5. package/.documentation/css/styles.css +2168 -2030
  6. package/.documentation/efcore.html +2505 -2501
  7. package/.documentation/gitflow.html +2618 -2053
  8. package/.documentation/hooks.html +413 -409
  9. package/.documentation/index.html +323 -319
  10. package/.documentation/installation.html +462 -458
  11. package/.documentation/js/app.js +794 -794
  12. package/.documentation/ralph-loop.html +530 -0
  13. package/.documentation/test-web.html +513 -509
  14. package/README.md +52 -10
  15. package/dist/index.js +6 -6
  16. package/dist/index.js.map +1 -1
  17. package/package.json +1 -1
  18. package/templates/commands/create/agent.md +138 -0
  19. package/templates/commands/create/command.md +166 -0
  20. package/templates/commands/create/hook.md +234 -0
  21. package/templates/commands/create/plugin.md +329 -0
  22. package/templates/commands/create/project.md +507 -0
  23. package/templates/commands/create/skill.md +199 -0
  24. package/templates/commands/create.md +220 -0
package/.documentation/css/styles.css CHANGED
@@ -1,2030 +1,2168 @@
1
- /* ============================================
2
- CLAUDE TOOLS DOCUMENTATION - STYLES
3
- ============================================ */
4
-
5
- :root {
6
- /* Colors */
7
- --primary: #6366f1;
8
- --primary-dark: #4f46e5;
9
- --primary-light: #818cf8;
10
- --secondary: #f97316;
11
- --accent: #06b6d4;
12
-
13
- --bg-dark: #0f172a;
14
- --bg-card: #1e293b;
15
- --bg-hover: #334155;
16
- --bg-code: #0d1117;
17
-
18
- --text: #b8c4d1;
19
- --text-muted: #8a9bb0;
20
- --text-bright: #c8d0dc;
21
-
22
- --border: #334155;
23
- --border-light: #475569;
24
-
25
- --success: #22c55e;
26
- --warning: #eab308;
27
- --error: #ef4444;
28
- --info: #3b82f6;
29
-
30
- /* Sidebar */
31
- --sidebar-width: 280px;
32
- --sidebar-collapsed: 60px;
33
-
34
- /* Transitions */
35
- --transition-fast: 0.15s ease;
36
- --transition-normal: 0.3s ease;
37
- }
38
-
39
- * {
40
- margin: 0;
41
- padding: 0;
42
- box-sizing: border-box;
43
- }
44
-
45
- html {
46
- scroll-behavior: smooth;
47
- }
48
-
49
- body {
50
- font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
51
- background: var(--bg-dark);
52
- color: var(--text);
53
- line-height: 1.7;
54
- min-height: 100vh;
55
- }
56
-
57
- /* ============================================
58
- LAYOUT
59
- ============================================ */
60
-
61
- .app-container {
62
- display: flex;
63
- flex-direction: column;
64
- min-height: 100vh;
65
- }
66
-
67
- /* Unified Global Header */
68
- .global-header {
69
- background: var(--bg-card);
70
- border-bottom: 1px solid var(--border);
71
- height: 44px;
72
- display: flex;
73
- align-items: center;
74
- padding: 0 1rem;
75
- gap: 1rem;
76
- position: sticky;
77
- top: 0;
78
- z-index: 1001;
79
- box-sizing: border-box;
80
- }
81
-
82
- .global-header .logo {
83
- width: 26px;
84
- height: 26px;
85
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
86
- border-radius: 5px;
87
- display: flex;
88
- align-items: center;
89
- justify-content: center;
90
- font-weight: 700;
91
- font-size: 0.8rem;
92
- flex-shrink: 0;
93
- }
94
-
95
- .global-header .site-title {
96
- font-size: 0.95rem;
97
- font-weight: 600;
98
- white-space: nowrap;
99
- color: var(--text-bright);
100
- }
101
-
102
- .global-header .version-badge {
103
- background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
104
- color: white;
105
- font-size: 0.65rem;
106
- font-weight: 600;
107
- padding: 0.2rem 0.5rem;
108
- border-radius: 4px;
109
- white-space: nowrap;
110
- }
111
-
112
- .global-header .header-divider {
113
- width: 1px;
114
- height: 24px;
115
- background: var(--border);
116
- margin: 0 0.5rem;
117
- }
118
-
119
- .global-header .page-title {
120
- font-size: 0.95rem;
121
- font-weight: 600;
122
- color: var(--text-bright);
123
- white-space: nowrap;
124
- }
125
-
126
- .global-header .breadcrumb {
127
- display: flex;
128
- align-items: center;
129
- gap: 0.35rem;
130
- font-size: 0.75rem;
131
- color: var(--text-muted);
132
- }
133
-
134
- .global-header .breadcrumb a {
135
- color: var(--text-muted);
136
- text-decoration: none;
137
- transition: color var(--transition-fast);
138
- }
139
-
140
- .global-header .breadcrumb a:hover {
141
- color: var(--primary-light);
142
- }
143
-
144
- .global-header .breadcrumb-separator {
145
- color: var(--border-light);
146
- font-size: 0.65rem;
147
- }
148
-
149
- .global-header .breadcrumb-current {
150
- color: var(--primary-light);
151
- }
152
-
153
- .global-header .lang-select {
154
- background: var(--bg-dark);
155
- color: var(--text);
156
- border: 1px solid var(--border);
157
- border-radius: 6px;
158
- padding: 0.35rem 0.75rem;
159
- font-size: 0.8rem;
160
- font-weight: 500;
161
- cursor: pointer;
162
- outline: none;
163
- transition: all var(--transition-fast);
164
- margin-left: 1rem;
165
- }
166
-
167
- .global-header .lang-select:hover {
168
- border-color: var(--primary);
169
- }
170
-
171
- .global-header .lang-select:focus {
172
- border-color: var(--primary);
173
- box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
174
- }
175
-
176
- .global-header .lang-select option {
177
- background: var(--bg-dark);
178
- color: var(--text);
179
- padding: 0.5rem;
180
- }
181
-
182
- /* Header Search */
183
- .header-search {
184
- position: relative;
185
- margin-left: auto;
186
- margin-right: 1rem;
187
- }
188
-
189
- .search-input-wrapper {
190
- display: flex;
191
- align-items: center;
192
- background: var(--bg-dark);
193
- border: 1px solid var(--border);
194
- border-radius: 6px;
195
- padding: 0 0.5rem;
196
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
197
- }
198
-
199
- .search-input-wrapper:focus-within {
200
- border-color: var(--primary);
201
- box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
202
- }
203
-
204
- .search-icon {
205
- color: var(--text-muted);
206
- font-size: 0.9rem;
207
- margin-right: 0.5rem;
208
- }
209
-
210
- .search-input {
211
- background: transparent;
212
- border: none;
213
- color: var(--text);
214
- font-size: 0.85rem;
215
- padding: 0.4rem 0;
216
- width: 180px;
217
- outline: none;
218
- }
219
-
220
- .search-input::placeholder {
221
- color: var(--text-muted);
222
- }
223
-
224
- .search-shortcut {
225
- background: var(--bg-hover);
226
- color: var(--text-muted);
227
- font-size: 0.65rem;
228
- font-weight: 600;
229
- padding: 0.15rem 0.4rem;
230
- border-radius: 4px;
231
- margin-left: 0.5rem;
232
- white-space: nowrap;
233
- }
234
-
235
- /* Search Results Dropdown */
236
- .search-results {
237
- position: absolute;
238
- top: calc(100% + 8px);
239
- left: 0;
240
- right: 0;
241
- min-width: 320px;
242
- max-height: 400px;
243
- overflow-y: auto;
244
- background: var(--bg-dark);
245
- border: 1px solid var(--border);
246
- border-radius: 8px;
247
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
248
- z-index: 1002;
249
- display: none;
250
- }
251
-
252
- .search-results.visible {
253
- display: block;
254
- }
255
-
256
- .search-results-empty {
257
- padding: 1.5rem;
258
- text-align: center;
259
- color: var(--text-muted);
260
- font-size: 0.85rem;
261
- }
262
-
263
- .search-result-item {
264
- display: flex;
265
- align-items: flex-start;
266
- gap: 0.75rem;
267
- padding: 0.75rem 1rem;
268
- text-decoration: none;
269
- color: var(--text);
270
- transition: background var(--transition-fast);
271
- border-bottom: 1px solid var(--border);
272
- }
273
-
274
- .search-result-item:last-child {
275
- border-bottom: none;
276
- }
277
-
278
- .search-result-item:hover,
279
- .search-result-item.active {
280
- background: var(--bg-hover);
281
- }
282
-
283
- .search-result-icon {
284
- width: 28px;
285
- height: 28px;
286
- background: var(--bg-card);
287
- border-radius: 6px;
288
- display: flex;
289
- align-items: center;
290
- justify-content: center;
291
- font-size: 0.9rem;
292
- flex-shrink: 0;
293
- }
294
-
295
- .search-result-content {
296
- flex: 1;
297
- min-width: 0;
298
- }
299
-
300
- .search-result-title {
301
- font-weight: 500;
302
- font-size: 0.9rem;
303
- color: var(--text-bright);
304
- margin-bottom: 0.15rem;
305
- }
306
-
307
- .search-result-title mark {
308
- background: rgba(99, 102, 241, 0.3);
309
- color: var(--primary-light);
310
- padding: 0 0.15rem;
311
- border-radius: 2px;
312
- }
313
-
314
- .search-result-path {
315
- font-size: 0.75rem;
316
- color: var(--text-muted);
317
- white-space: nowrap;
318
- overflow: hidden;
319
- text-overflow: ellipsis;
320
- }
321
-
322
- .search-result-section {
323
- font-weight: 400;
324
- color: var(--text-muted);
325
- font-size: 0.85rem;
326
- }
327
-
328
- .search-result-section mark {
329
- background: rgba(99, 102, 241, 0.2);
330
- color: var(--primary-light);
331
- }
332
-
333
- .search-result-excerpt {
334
- font-size: 0.8rem;
335
- color: var(--text);
336
- line-height: 1.4;
337
- margin: 0.35rem 0;
338
- display: -webkit-box;
339
- -webkit-line-clamp: 2;
340
- -webkit-box-orient: vertical;
341
- overflow: hidden;
342
- }
343
-
344
- .search-result-excerpt mark {
345
- background: rgba(245, 158, 11, 0.3);
346
- color: var(--accent);
347
- padding: 0 0.1rem;
348
- border-radius: 2px;
349
- }
350
-
351
- /* Search results scrollbar */
352
- .search-results::-webkit-scrollbar {
353
- width: 6px;
354
- }
355
-
356
- .search-results::-webkit-scrollbar-track {
357
- background: var(--bg-dark);
358
- }
359
-
360
- .search-results::-webkit-scrollbar-thumb {
361
- background: var(--border);
362
- border-radius: 3px;
363
- }
364
-
365
- .search-results::-webkit-scrollbar-thumb:hover {
366
- background: var(--border-light);
367
- }
368
-
369
- /* Responsive search */
370
- @media (max-width: 1024px) {
371
- .header-search {
372
- display: none;
373
- }
374
- }
375
-
376
- @media (max-width: 768px) {
377
- .header-search {
378
- display: none;
379
- }
380
- }
381
-
382
- /* App Body - contains sidebar and main content */
383
- .app-body {
384
- display: flex;
385
- flex: 1;
386
- }
387
-
388
- /* Sidebar */
389
- .sidebar {
390
- width: var(--sidebar-width);
391
- background: var(--bg-card);
392
- position: fixed;
393
- top: 44px; /* Below global header */
394
- left: 0;
395
- height: calc(100vh - 44px);
396
- overflow-y: auto;
397
- transition: width var(--transition-normal), transform var(--transition-normal);
398
- z-index: 1000;
399
- display: flex;
400
- flex-direction: column;
401
- /* Hide scrollbar but keep functionality */
402
- scrollbar-width: none; /* Firefox */
403
- -ms-overflow-style: none; /* IE/Edge */
404
- }
405
-
406
- .sidebar::-webkit-scrollbar {
407
- display: none; /* Chrome/Safari/Opera */
408
- }
409
-
410
- .sidebar.collapsed {
411
- width: var(--sidebar-collapsed);
412
- }
413
-
414
- .sidebar.collapsed .nav-text,
415
- .sidebar.collapsed .sidebar-header h2,
416
- .sidebar.collapsed .sidebar-footer,
417
- .sidebar.collapsed .nav-section-title {
418
- opacity: 0;
419
- visibility: hidden;
420
- }
421
-
422
- /* Legacy sidebar-header styles removed - now using global-header */
423
-
424
- /* Sidebar toggle button - fixed position, always visible */
425
- .sidebar-toggle {
426
- position: fixed;
427
- top: calc(50% + 22px); /* Centered in sidebar area (below 44px header) */
428
- left: calc(var(--sidebar-width) - 1px);
429
- transform: translateY(-50%);
430
- width: 20px;
431
- height: 56px;
432
- background: var(--bg-card);
433
- border: 1px solid var(--border);
434
- border-left: none;
435
- border-radius: 0 8px 8px 0;
436
- cursor: pointer;
437
- display: flex;
438
- align-items: center;
439
- justify-content: center;
440
- color: var(--text-muted);
441
- font-size: 0.75rem;
442
- transition: left var(--transition-normal), background var(--transition-fast), color var(--transition-fast);
443
- z-index: 1001;
444
- padding: 0;
445
- }
446
-
447
- .sidebar-toggle:hover {
448
- background: var(--primary);
449
- color: white;
450
- border-color: var(--primary);
451
- }
452
-
453
- /* Move toggle when sidebar is collapsed - use descendant selector since button is inside sidebar */
454
- .sidebar.collapsed .sidebar-toggle {
455
- left: calc(var(--sidebar-collapsed) - 1px);
456
- }
457
-
458
- /* Toggle icon states */
459
- .sidebar-toggle .toggle-icon-collapse,
460
- .sidebar-toggle .toggle-icon-expand {
461
- display: flex;
462
- align-items: center;
463
- justify-content: center;
464
- }
465
-
466
- .sidebar-toggle .toggle-icon-expand {
467
- display: none;
468
- }
469
-
470
- .sidebar.collapsed .sidebar-toggle .toggle-icon-collapse {
471
- display: none;
472
- }
473
-
474
- .sidebar.collapsed .sidebar-toggle .toggle-icon-expand {
475
- display: flex;
476
- }
477
-
478
- /* Navigation */
479
- .sidebar-nav {
480
- flex: 1;
481
- padding: 0.5rem 0 1rem 0;
482
- overflow-y: auto;
483
- /* Hide scrollbar but keep functionality */
484
- scrollbar-width: none;
485
- -ms-overflow-style: none;
486
- }
487
-
488
- .sidebar-nav::-webkit-scrollbar {
489
- display: none;
490
- }
491
-
492
- .nav-section {
493
- margin-bottom: 1.5rem;
494
- }
495
-
496
- .nav-section-title {
497
- padding: 0.5rem 1.5rem;
498
- font-size: 0.7rem;
499
- font-weight: 600;
500
- text-transform: uppercase;
501
- letter-spacing: 0.1em;
502
- color: var(--text-muted);
503
- transition: opacity var(--transition-fast);
504
- }
505
-
506
- .nav-item {
507
- display: flex;
508
- align-items: center;
509
- gap: 0.75rem;
510
- padding: 0.625rem 1.5rem;
511
- color: var(--text-muted);
512
- text-decoration: none;
513
- transition: all var(--transition-fast);
514
- border-left: 3px solid transparent;
515
- }
516
-
517
- .nav-item:hover {
518
- background: var(--bg-hover);
519
- color: var(--text);
520
- }
521
-
522
- .nav-item.active {
523
- background: rgba(99, 102, 241, 0.1);
524
- color: var(--primary-light);
525
- border-left-color: var(--primary);
526
- }
527
-
528
- .nav-item .icon {
529
- width: 20px;
530
- height: 20px;
531
- display: flex;
532
- align-items: center;
533
- justify-content: center;
534
- flex-shrink: 0;
535
- }
536
-
537
- .nav-text {
538
- white-space: nowrap;
539
- transition: opacity var(--transition-fast);
540
- }
541
-
542
- /* Sidebar Footer */
543
- .sidebar-footer {
544
- padding: 1rem 1.5rem;
545
- border-top: 1px solid var(--border);
546
- transition: opacity var(--transition-fast);
547
- }
548
-
549
- .lang-switch {
550
- display: flex;
551
- background: var(--bg-dark);
552
- border-radius: 6px;
553
- padding: 3px;
554
- }
555
-
556
- .lang-btn {
557
- flex: 1;
558
- padding: 0.375rem 0.75rem;
559
- border: none;
560
- background: transparent;
561
- color: var(--text-muted);
562
- font-size: 0.8rem;
563
- font-weight: 500;
564
- cursor: pointer;
565
- border-radius: 4px;
566
- transition: all var(--transition-fast);
567
- }
568
-
569
- .lang-btn.active {
570
- background: var(--primary);
571
- color: white;
572
- }
573
-
574
- /* Main Content */
575
- .main-content {
576
- flex: 1;
577
- margin-left: var(--sidebar-width);
578
- transition: margin-left var(--transition-normal);
579
- min-height: 100vh;
580
- }
581
-
582
- .sidebar.collapsed ~ .main-content {
583
- margin-left: var(--sidebar-collapsed);
584
- }
585
-
586
- /* Legacy page-header styles removed - now using global-header */
587
-
588
- /* Content Area */
589
- .content {
590
- max-width: 900px;
591
- margin: 0 auto;
592
- padding: 2rem;
593
- }
594
-
595
- .content-wide {
596
- max-width: 1200px;
597
- }
598
-
599
- /* ============================================
600
- TYPOGRAPHY
601
- ============================================ */
602
-
603
- h2 {
604
- font-size: 1.75rem;
605
- font-weight: 600;
606
- margin: 2.5rem 0 1rem;
607
- padding-bottom: 0.5rem;
608
- border-bottom: 1px solid var(--border);
609
- color: var(--text-bright);
610
- }
611
-
612
- h3 {
613
- font-size: 1.25rem;
614
- font-weight: 600;
615
- margin: 2rem 0 1rem;
616
- color: var(--primary-light);
617
- }
618
-
619
- h4 {
620
- font-size: 1.1rem;
621
- font-weight: 600;
622
- margin: 1.5rem 0 0.75rem;
623
- color: var(--text);
624
- }
625
-
626
- p {
627
- margin-bottom: 1rem;
628
- }
629
-
630
- a {
631
- color: var(--primary-light);
632
- text-decoration: none;
633
- }
634
-
635
- a:hover {
636
- text-decoration: underline;
637
- }
638
-
639
- /* ============================================
640
- COMPONENTS
641
- ============================================ */
642
-
643
- /* Cards */
644
- .card-grid {
645
- display: grid;
646
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
647
- gap: 1.25rem;
648
- margin: 1.5rem 0;
649
- }
650
-
651
- .card {
652
- background: var(--bg-card);
653
- border: 1px solid var(--border);
654
- border-radius: 12px;
655
- padding: 1.5rem;
656
- transition: all var(--transition-fast);
657
- }
658
-
659
- .card:hover {
660
- border-color: var(--primary);
661
- transform: translateY(-2px);
662
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
663
- }
664
-
665
- .card-header {
666
- display: flex;
667
- align-items: flex-start;
668
- gap: 1rem;
669
- margin-bottom: 1rem;
670
- }
671
-
672
- .card-icon {
673
- width: 44px;
674
- height: 44px;
675
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
676
- border-radius: 10px;
677
- display: flex;
678
- align-items: center;
679
- justify-content: center;
680
- font-size: 1.25rem;
681
- flex-shrink: 0;
682
- }
683
-
684
- .card-title {
685
- font-size: 1.1rem;
686
- font-weight: 600;
687
- margin-bottom: 0.25rem;
688
- }
689
-
690
- .card-subtitle {
691
- font-size: 0.8rem;
692
- color: var(--text-muted);
693
- }
694
-
695
- .card-body p {
696
- color: var(--text-muted);
697
- font-size: 0.9rem;
698
- margin-bottom: 1rem;
699
- }
700
-
701
- /* Tags */
702
- .tag {
703
- display: inline-flex;
704
- align-items: center;
705
- padding: 0.25rem 0.625rem;
706
- border-radius: 4px;
707
- font-size: 0.7rem;
708
- font-weight: 600;
709
- text-transform: uppercase;
710
- letter-spacing: 0.05em;
711
- }
712
-
713
- .tag-command { background: var(--primary); color: white; }
714
- .tag-agent { background: var(--secondary); color: white; }
715
- .tag-workflow { background: var(--success); color: white; }
716
- .tag-best-practice { background: var(--accent); color: var(--bg-dark); }
717
- .tag-warning { background: var(--warning); color: var(--bg-dark); }
718
-
719
- /* Code */
720
- code {
721
- background: var(--bg-code);
722
- padding: 0.2rem 0.5rem;
723
- border-radius: 4px;
724
- font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
725
- font-size: 0.875em;
726
- color: var(--text-bright);
727
- border: 1px solid var(--border);
728
- }
729
-
730
- /* Code in tables - minimal style (just monospace, no decoration) */
731
- table code,
732
- .table-container code,
733
- td code {
734
- background: transparent !important;
735
- color: inherit !important;
736
- border: none !important;
737
- padding: 0 !important;
738
- box-shadow: none !important;
739
- }
740
-
741
- pre {
742
- background: var(--bg-code);
743
- border: 1px solid var(--border);
744
- border-radius: 8px;
745
- padding: 1.25rem;
746
- overflow-x: auto;
747
- margin: 1rem 0;
748
- position: relative;
749
- }
750
-
751
- pre code {
752
- background: none;
753
- padding: 0;
754
- color: var(--text);
755
- font-size: 0.875rem;
756
- line-height: 1.6;
757
- }
758
-
759
- .code-header {
760
- display: flex;
761
- justify-content: space-between;
762
- align-items: center;
763
- background: var(--bg-hover);
764
- padding: 0.5rem 1rem;
765
- border-radius: 8px 8px 0 0;
766
- margin: 1rem 0 0;
767
- font-size: 0.8rem;
768
- color: var(--text-muted);
769
- }
770
-
771
- .code-header + pre {
772
- margin-top: 0;
773
- border-radius: 0 0 8px 8px;
774
- }
775
-
776
- .copy-btn {
777
- background: var(--bg-card);
778
- border: 1px solid var(--border);
779
- color: var(--text-muted);
780
- padding: 0.25rem 0.5rem;
781
- border-radius: 4px;
782
- font-size: 0.75rem;
783
- cursor: pointer;
784
- transition: all var(--transition-fast);
785
- }
786
-
787
- .copy-btn:hover {
788
- background: var(--primary);
789
- color: white;
790
- border-color: var(--primary);
791
- }
792
-
793
- /* Alerts */
794
- .alert {
795
- padding: 1rem 1.25rem;
796
- border-radius: 8px;
797
- margin: 1.5rem 0;
798
- border-left: 4px solid;
799
- display: flex;
800
- gap: 0.75rem;
801
- }
802
-
803
- .alert-icon {
804
- font-size: 1.25rem;
805
- flex-shrink: 0;
806
- }
807
-
808
- .alert-content h5 {
809
- font-weight: 600;
810
- margin-bottom: 0.25rem;
811
- }
812
-
813
- .alert-content p {
814
- margin: 0;
815
- font-size: 0.9rem;
816
- }
817
-
818
- .alert-info {
819
- background: rgba(59, 130, 246, 0.1);
820
- border-color: var(--info);
821
- }
822
-
823
- .alert-success {
824
- background: rgba(34, 197, 94, 0.1);
825
- border-color: var(--success);
826
- }
827
-
828
- .alert-warning {
829
- background: rgba(234, 179, 8, 0.1);
830
- border-color: var(--warning);
831
- }
832
-
833
- .alert-error {
834
- background: rgba(239, 68, 68, 0.1);
835
- border-color: var(--error);
836
- }
837
-
838
- /* Tables */
839
- .table-container {
840
- overflow-x: auto;
841
- margin: 1.5rem 0;
842
- border: 1px solid var(--border);
843
- border-radius: 8px;
844
- }
845
-
846
- table {
847
- width: 100%;
848
- border-collapse: collapse;
849
- }
850
-
851
- th, td {
852
- padding: 0.875rem 1rem;
853
- text-align: left;
854
- border-bottom: 1px solid var(--border);
855
- }
856
-
857
- th {
858
- background: var(--bg-hover);
859
- font-weight: 600;
860
- font-size: 0.875rem;
861
- color: var(--text-muted);
862
- text-transform: uppercase;
863
- letter-spacing: 0.05em;
864
- }
865
-
866
- tr:last-child td {
867
- border-bottom: none;
868
- }
869
-
870
- tr:hover td {
871
- background: rgba(99, 102, 241, 0.05);
872
- }
873
-
874
- /* Workflow Diagram */
875
- .workflow-diagram {
876
- background: var(--bg-card);
877
- border: 1px solid var(--border);
878
- border-radius: 12px;
879
- padding: 2rem;
880
- margin: 2rem 0;
881
- overflow-x: auto;
882
- }
883
-
884
- .workflow-steps {
885
- display: flex;
886
- align-items: center;
887
- justify-content: center;
888
- gap: 0.5rem;
889
- flex-wrap: wrap;
890
- }
891
-
892
- .workflow-step {
893
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
894
- padding: 0.75rem 1.5rem;
895
- border-radius: 8px;
896
- font-weight: 600;
897
- font-size: 0.9rem;
898
- white-space: nowrap;
899
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
900
- }
901
-
902
- .workflow-arrow {
903
- color: var(--text-muted);
904
- font-size: 1.5rem;
905
- padding: 0 0.25rem;
906
- }
907
-
908
- /* Best Practice Box */
909
- .best-practice {
910
- background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
911
- border: 1px solid var(--accent);
912
- border-radius: 12px;
913
- padding: 1.5rem;
914
- margin: 1.5rem 0;
915
- }
916
-
917
- .best-practice-header {
918
- display: flex;
919
- align-items: center;
920
- gap: 0.75rem;
921
- margin-bottom: 1rem;
922
- font-weight: 600;
923
- color: var(--accent);
924
- }
925
-
926
- .best-practice ul {
927
- margin: 0;
928
- padding-left: 1.5rem;
929
- }
930
-
931
- .best-practice li {
932
- margin-bottom: 0.5rem;
933
- color: var(--text);
934
- }
935
-
936
- /* Steps List */
937
- .steps-list {
938
- counter-reset: step;
939
- list-style: none;
940
- padding: 0;
941
- margin: 1.5rem 0;
942
- }
943
-
944
- .steps-list li {
945
- counter-increment: step;
946
- display: flex;
947
- gap: 1rem;
948
- margin-bottom: 1.5rem;
949
- padding: 1.25rem;
950
- background: var(--bg-card);
951
- border: 1px solid var(--border);
952
- border-radius: 8px;
953
- }
954
-
955
- .steps-list li::before {
956
- content: counter(step);
957
- width: 32px;
958
- height: 32px;
959
- background: var(--primary);
960
- border-radius: 50%;
961
- display: flex;
962
- align-items: center;
963
- justify-content: center;
964
- font-weight: 700;
965
- flex-shrink: 0;
966
- }
967
-
968
- .step-content h5 {
969
- font-weight: 600;
970
- margin-bottom: 0.5rem;
971
- }
972
-
973
- .step-content p {
974
- margin: 0;
975
- color: var(--text-muted);
976
- font-size: 0.9rem;
977
- }
978
-
979
- /* Feature Grid */
980
- .feature-grid {
981
- display: grid;
982
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
983
- gap: 1rem;
984
- margin: 1.5rem 0;
985
- }
986
-
987
- .feature-item {
988
- display: flex;
989
- align-items: flex-start;
990
- gap: 0.75rem;
991
- padding: 1rem;
992
- background: var(--bg-card);
993
- border-radius: 8px;
994
- }
995
-
996
- .feature-icon {
997
- width: 24px;
998
- height: 24px;
999
- color: var(--success);
1000
- flex-shrink: 0;
1001
- }
1002
-
1003
- .feature-text {
1004
- font-size: 0.9rem;
1005
- }
1006
-
1007
- /* ============================================
1008
- RESPONSIVE
1009
- ============================================ */
1010
-
1011
- @media (max-width: 1024px) {
1012
- .sidebar {
1013
- transform: translateX(-100%);
1014
- }
1015
-
1016
- .sidebar.open {
1017
- transform: translateX(0);
1018
- }
1019
-
1020
- .main-content {
1021
- margin-left: 0;
1022
- }
1023
-
1024
- .mobile-menu-btn {
1025
- display: flex;
1026
- }
1027
-
1028
- /* Global header responsive */
1029
- .global-header .site-title,
1030
- .global-header .version-badge,
1031
- .global-header .header-divider {
1032
- display: none;
1033
- }
1034
- }
1035
-
1036
- @media (max-width: 768px) {
1037
- .global-header {
1038
- padding: 0 0.75rem;
1039
- gap: 0.5rem;
1040
- }
1041
-
1042
- .global-header .page-title {
1043
- font-size: 0.85rem;
1044
- }
1045
-
1046
- .global-header .breadcrumb {
1047
- display: none;
1048
- }
1049
-
1050
- .content {
1051
- padding: 1.5rem 1rem;
1052
- }
1053
-
1054
- .workflow-steps {
1055
- flex-direction: column;
1056
- }
1057
-
1058
- .workflow-arrow {
1059
- transform: rotate(90deg);
1060
- }
1061
-
1062
- .card-grid {
1063
- grid-template-columns: 1fr;
1064
- }
1065
- }
1066
-
1067
- /* Mobile Menu Button */
1068
- .mobile-menu-btn {
1069
- display: none;
1070
- position: fixed;
1071
- bottom: 1.5rem;
1072
- right: 1.5rem;
1073
- width: 56px;
1074
- height: 56px;
1075
- background: var(--primary);
1076
- border: none;
1077
- border-radius: 50%;
1078
- color: white;
1079
- font-size: 1.5rem;
1080
- cursor: pointer;
1081
- z-index: 999;
1082
- box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
1083
- }
1084
-
1085
- @media (max-width: 1024px) {
1086
- .mobile-menu-btn {
1087
- display: flex;
1088
- align-items: center;
1089
- justify-content: center;
1090
- }
1091
- }
1092
-
1093
- /* Overlay */
1094
- .overlay {
1095
- display: none;
1096
- position: fixed;
1097
- top: 0;
1098
- left: 0;
1099
- right: 0;
1100
- bottom: 0;
1101
- background: rgba(0, 0, 0, 0.5);
1102
- z-index: 999;
1103
- }
1104
-
1105
- .overlay.active {
1106
- display: block;
1107
- }
1108
-
1109
- /* ============================================
1110
- ANIMATIONS
1111
- ============================================ */
1112
-
1113
- @keyframes fadeIn {
1114
- from { opacity: 0; transform: translateY(10px); }
1115
- to { opacity: 1; transform: translateY(0); }
1116
- }
1117
-
1118
- .fade-in {
1119
- animation: fadeIn 0.3s ease forwards;
1120
- }
1121
-
1122
- /* Bilingual content - hide inactive language, show active with original display */
1123
- [data-lang="en"] { display: none !important; }
1124
-
1125
- body.lang-en [data-lang="en"] { display: revert !important; }
1126
- body.lang-en [data-lang="fr"] { display: none !important; }
1127
-
1128
- /* ============================================
1129
- COMMAND CARDS & PROMPTS
1130
- ============================================ */
1131
-
1132
- .command-card {
1133
- background: var(--bg-card);
1134
- border: 1px solid var(--border);
1135
- border-radius: 12px;
1136
- margin: 1.5rem 0;
1137
- overflow: hidden;
1138
- }
1139
-
1140
- .command-header {
1141
- display: flex;
1142
- align-items: center;
1143
- gap: 1rem;
1144
- padding: 1rem 1.25rem;
1145
- background: var(--bg-hover);
1146
- border-bottom: 1px solid var(--border);
1147
- }
1148
-
1149
- .command-name {
1150
- font-size: 1.1rem;
1151
- font-weight: 600;
1152
- color: var(--primary-light);
1153
- background: var(--bg-code);
1154
- padding: 0.35rem 0.75rem;
1155
- }
1156
-
1157
- .command-body {
1158
- padding: 1.25rem;
1159
- }
1160
-
1161
- .command-body > p {
1162
- margin-bottom: 1rem;
1163
- }
1164
-
1165
- /* Prompt Details (Collapsible) */
1166
- .prompt-details {
1167
- margin-top: 1.25rem;
1168
- border: 1px solid var(--border);
1169
- border-radius: 8px;
1170
- overflow: hidden;
1171
- }
1172
-
1173
- .prompt-details summary {
1174
- display: flex;
1175
- align-items: center;
1176
- padding: 0.875rem 1rem;
1177
- background: var(--bg-hover);
1178
- cursor: pointer;
1179
- font-weight: 500;
1180
- color: var(--text-muted);
1181
- transition: all var(--transition-fast);
1182
- list-style: none;
1183
- }
1184
-
1185
- .prompt-details summary::-webkit-details-marker {
1186
- display: none;
1187
- }
1188
-
1189
- .prompt-details summary::before {
1190
- content: '▶';
1191
- margin-right: 0.75rem;
1192
- font-size: 0.75rem;
1193
- transition: transform var(--transition-fast);
1194
- }
1195
-
1196
- .prompt-details[open] summary::before {
1197
- transform: rotate(90deg);
1198
- }
1199
-
1200
- .prompt-details summary:hover {
1201
- color: var(--text);
1202
- background: var(--bg-card);
1203
- }
1204
-
1205
- .prompt-content {
1206
- background: var(--bg-code);
1207
- border-top: 1px solid var(--border);
1208
- }
1209
-
1210
- .prompt-content pre {
1211
- margin: 0;
1212
- border: none;
1213
- border-radius: 0;
1214
- max-height: 500px;
1215
- overflow-y: auto;
1216
- }
1217
-
1218
- .prompt-content pre code {
1219
- font-size: 0.8rem;
1220
- line-height: 1.5;
1221
- }
1222
-
1223
- /* Danger Tag */
1224
- .tag-danger {
1225
- background: var(--error);
1226
- color: white;
1227
- }
1228
-
1229
- /* Code block with position */
1230
- .code-block {
1231
- position: relative;
1232
- margin: 1rem 0;
1233
- }
1234
-
1235
- .code-block pre {
1236
- padding-right: 4.5rem; /* Space for copy button */
1237
- }
1238
-
1239
- .code-block .copy-btn {
1240
- position: absolute;
1241
- top: 0.5rem;
1242
- right: 0.5rem;
1243
- z-index: 10;
1244
- background: var(--bg-hover);
1245
- border: 1px solid var(--border-light);
1246
- opacity: 0.8;
1247
- transition: opacity var(--transition-fast), background var(--transition-fast);
1248
- }
1249
-
1250
- .code-block:hover .copy-btn {
1251
- opacity: 1;
1252
- }
1253
-
1254
- .code-block .copy-btn:hover {
1255
- background: var(--primary);
1256
- color: white;
1257
- border-color: var(--primary);
1258
- opacity: 1;
1259
- }
1260
-
1261
- /* Best Practice improvements */
1262
- .best-practice h4 {
1263
- display: flex;
1264
- align-items: center;
1265
- gap: 0.5rem;
1266
- margin-bottom: 0.75rem;
1267
- color: var(--text-bright);
1268
- }
1269
-
1270
- .bp-icon {
1271
- font-size: 1.25rem;
1272
- }
1273
-
1274
- /* Table inside commands */
1275
- .command-body .table-container {
1276
- margin: 1rem 0;
1277
- }
1278
-
1279
- /* ============================================
1280
- SIDEBAR PAGE TOC (Sub-navigation)
1281
- ============================================ */
1282
-
1283
- .nav-item-with-toc {
1284
- flex-direction: column;
1285
- align-items: stretch;
1286
- }
1287
-
1288
- .nav-item-with-toc > a {
1289
- display: flex;
1290
- align-items: center;
1291
- gap: 0.75rem;
1292
- padding: 0.625rem 1.5rem;
1293
- color: var(--text-muted);
1294
- text-decoration: none;
1295
- transition: all var(--transition-fast);
1296
- border-left: 3px solid transparent;
1297
- }
1298
-
1299
- .nav-item-with-toc > a:hover {
1300
- background: var(--bg-hover);
1301
- color: var(--text);
1302
- }
1303
-
1304
- .nav-item-with-toc > a.active {
1305
- background: rgba(99, 102, 241, 0.1);
1306
- color: var(--primary-light);
1307
- border-left-color: var(--primary);
1308
- }
1309
-
1310
- /* Sidebar TOC submenu */
1311
- .sidebar-toc {
1312
- display: none;
1313
- flex-direction: column;
1314
- padding: 0.5rem 0 0.5rem 2.5rem;
1315
- background: rgba(0, 0, 0, 0.15);
1316
- border-left: 3px solid var(--primary);
1317
- margin-left: 0;
1318
- }
1319
-
1320
- .sidebar-toc.open {
1321
- display: flex;
1322
- }
1323
-
1324
- .sidebar-toc-link {
1325
- display: block;
1326
- font-size: 0.8rem;
1327
- color: var(--text-muted);
1328
- text-decoration: none;
1329
- padding: 0.375rem 0.75rem;
1330
- border-radius: 4px;
1331
- transition: all var(--transition-fast);
1332
- position: relative;
1333
- }
1334
-
1335
- .sidebar-toc-link::before {
1336
- content: '';
1337
- position: absolute;
1338
- left: 0;
1339
- top: 50%;
1340
- transform: translateY(-50%);
1341
- width: 4px;
1342
- height: 4px;
1343
- background: var(--border-light);
1344
- border-radius: 50%;
1345
- opacity: 0;
1346
- transition: opacity var(--transition-fast);
1347
- }
1348
-
1349
- .sidebar-toc-link:hover {
1350
- color: var(--text);
1351
- background: var(--bg-hover);
1352
- }
1353
-
1354
- .sidebar-toc-link:hover::before {
1355
- opacity: 1;
1356
- }
1357
-
1358
- .sidebar-toc-link.active {
1359
- color: var(--primary-light);
1360
- background: rgba(99, 102, 241, 0.15);
1361
- }
1362
-
1363
- .sidebar-toc-link.active::before {
1364
- opacity: 1;
1365
- background: var(--primary);
1366
- width: 6px;
1367
- height: 6px;
1368
- }
1369
-
1370
- /* TOC toggle button */
1371
- .toc-toggle {
1372
- margin-left: auto;
1373
- background: none;
1374
- border: none;
1375
- color: var(--text-muted);
1376
- cursor: pointer;
1377
- padding: 0.25rem;
1378
- font-size: 0.7rem;
1379
- transition: transform var(--transition-fast);
1380
- }
1381
-
1382
- .toc-toggle.open {
1383
- transform: rotate(90deg);
1384
- }
1385
-
1386
- /* Hide sidebar TOC when sidebar is collapsed */
1387
- .sidebar.collapsed .sidebar-toc {
1388
- display: none !important;
1389
- }
1390
-
1391
- .sidebar.collapsed .toc-toggle {
1392
- display: none;
1393
- }
1394
-
1395
- /* Full width content (no inline TOC) */
1396
- .content-full {
1397
- max-width: 1000px;
1398
- margin: 0 auto;
1399
- padding: 2rem 2.5rem;
1400
- }
1401
-
1402
- @media (max-width: 768px) {
1403
- .content-full {
1404
- padding: 1.5rem 1rem;
1405
- }
1406
- }
1407
-
1408
- /* Wide content (no TOC) */
1409
- .content-wide {
1410
- max-width: 900px;
1411
- margin: 0 auto;
1412
- padding: 2rem;
1413
- }
1414
-
1415
- /* ============================================
1416
- SVG DIAGRAMS
1417
- ============================================ */
1418
-
1419
- .svg-diagram {
1420
- background: var(--bg-card);
1421
- border: 1px solid var(--border);
1422
- border-radius: 12px;
1423
- padding: 2rem;
1424
- margin: 2rem 0;
1425
- overflow-x: auto;
1426
- display: flex;
1427
- justify-content: center;
1428
- }
1429
-
1430
- .svg-diagram svg {
1431
- max-width: 100%;
1432
- height: auto;
1433
- }
1434
-
1435
- /* GitFlow branch colors */
1436
- .branch-main { fill: #ef4444; }
1437
- .branch-develop { fill: #f97316; }
1438
- .branch-feature { fill: #22c55e; }
1439
- .branch-release { fill: #eab308; }
1440
- .branch-hotfix { fill: #ec4899; }
1441
-
1442
- .branch-line-main { stroke: #ef4444; }
1443
- .branch-line-develop { stroke: #f97316; }
1444
- .branch-line-feature { stroke: #22c55e; }
1445
- .branch-line-release { stroke: #eab308; }
1446
- .branch-line-hotfix { stroke: #ec4899; }
1447
-
1448
- /* Diagram legend */
1449
- .diagram-legend {
1450
- display: flex;
1451
- flex-wrap: wrap;
1452
- gap: 1.5rem;
1453
- justify-content: center;
1454
- margin-top: 1.5rem;
1455
- padding-top: 1.5rem;
1456
- border-top: 1px solid var(--border);
1457
- }
1458
-
1459
- .legend-item {
1460
- display: flex;
1461
- align-items: center;
1462
- gap: 0.5rem;
1463
- font-size: 0.875rem;
1464
- color: var(--text-muted);
1465
- }
1466
-
1467
- .legend-color {
1468
- width: 16px;
1469
- height: 16px;
1470
- border-radius: 50%;
1471
- }
1472
-
1473
- .legend-color.main { background: #ef4444; }
1474
- .legend-color.develop { background: #f97316; }
1475
- .legend-color.feature { background: #22c55e; }
1476
- .legend-color.release { background: #eab308; }
1477
- .legend-color.hotfix { background: #ec4899; }
1478
-
1479
- /* APEX cycle diagram */
1480
- .apex-cycle {
1481
- display: flex;
1482
- flex-direction: column;
1483
- align-items: center;
1484
- gap: 1rem;
1485
- }
1486
-
1487
- /* EF Core structure diagram */
1488
- .efcore-structure {
1489
- display: flex;
1490
- flex-direction: column;
1491
- gap: 1rem;
1492
- }
1493
-
1494
- /* Interactive diagram hover */
1495
- .svg-diagram svg g[data-tooltip]:hover {
1496
- cursor: pointer;
1497
- filter: brightness(1.2);
1498
- }
1499
-
1500
- /* Tooltip for SVG */
1501
- .svg-tooltip {
1502
- position: absolute;
1503
- background: var(--bg-dark);
1504
- border: 1px solid var(--border);
1505
- padding: 0.5rem 0.75rem;
1506
- border-radius: 6px;
1507
- font-size: 0.8rem;
1508
- color: var(--text);
1509
- pointer-events: none;
1510
- z-index: 1000;
1511
- max-width: 250px;
1512
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
1513
- }
1514
-
1515
- /* Responsive adjustments for diagrams */
1516
- @media (max-width: 768px) {
1517
- .svg-diagram {
1518
- padding: 1rem;
1519
- }
1520
-
1521
- .diagram-legend {
1522
- gap: 1rem;
1523
- }
1524
-
1525
- .legend-item {
1526
- font-size: 0.75rem;
1527
- }
1528
- }
1529
-
1530
- /* ============================================
1531
- INTERACTIVE DIAGRAM TOOLTIP
1532
- ============================================ */
1533
-
1534
- .svg-diagram {
1535
- position: relative;
1536
- flex-direction: column;
1537
- align-items: center;
1538
- }
1539
-
1540
- .diagram-hint {
1541
- text-align: center;
1542
- font-size: 0.85rem;
1543
- color: var(--text-muted);
1544
- margin-top: 1rem;
1545
- padding: 0.5rem 1rem;
1546
- background: rgba(99, 102, 241, 0.1);
1547
- border-radius: 6px;
1548
- border: 1px dashed var(--primary);
1549
- }
1550
-
1551
- /* Clickable SVG elements */
1552
- .clickable-element {
1553
- cursor: pointer;
1554
- transition: filter 0.2s ease, opacity 0.2s ease;
1555
- }
1556
-
1557
- .clickable-element:hover {
1558
- filter: url(#highlight) brightness(1.15);
1559
- }
1560
-
1561
- .clickable-element.active {
1562
- filter: url(#highlight) brightness(1.25);
1563
- }
1564
-
1565
- .clickable-element .hit-area {
1566
- pointer-events: all;
1567
- }
1568
-
1569
- /* Diagram tooltip */
1570
- .diagram-tooltip {
1571
- position: absolute;
1572
- background: var(--bg-dark);
1573
- border: 1px solid var(--primary);
1574
- border-radius: 10px;
1575
- padding: 1rem 1.25rem;
1576
- max-width: 350px;
1577
- min-width: 250px;
1578
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
1579
- z-index: 1000;
1580
- opacity: 0;
1581
- visibility: hidden;
1582
- transform: translateY(10px);
1583
- transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
1584
- pointer-events: none;
1585
- }
1586
-
1587
- .diagram-tooltip.visible {
1588
- opacity: 1;
1589
- visibility: visible;
1590
- transform: translateY(0);
1591
- pointer-events: auto;
1592
- }
1593
-
1594
- .diagram-tooltip .tooltip-title {
1595
- font-weight: 600;
1596
- font-size: 0.95rem;
1597
- color: var(--primary-light);
1598
- margin-bottom: 0.5rem;
1599
- padding-bottom: 0.5rem;
1600
- border-bottom: 1px solid var(--border);
1601
- }
1602
-
1603
- .diagram-tooltip .tooltip-desc {
1604
- font-size: 0.85rem;
1605
- color: var(--text);
1606
- line-height: 1.6;
1607
- }
1608
-
1609
- .diagram-tooltip .tooltip-cmd {
1610
- display: inline-block;
1611
- background: var(--bg-code);
1612
- color: var(--secondary);
1613
- padding: 0.15rem 0.4rem;
1614
- border-radius: 4px;
1615
- font-family: 'Fira Code', 'Cascadia Code', monospace;
1616
- font-size: 0.8rem;
1617
- margin-top: 0.5rem;
1618
- }
1619
-
1620
- /* Close hint for tooltip */
1621
- .diagram-tooltip::after {
1622
- content: 'Cliquez ailleurs pour fermer';
1623
- display: block;
1624
- font-size: 0.7rem;
1625
- color: var(--text-muted);
1626
- text-align: center;
1627
- margin-top: 0.75rem;
1628
- padding-top: 0.5rem;
1629
- border-top: 1px solid var(--border);
1630
- }
1631
-
1632
- body.lang-en .diagram-tooltip::after {
1633
- content: 'Click outside to close';
1634
- }
1635
-
1636
- /* Responsive tooltip */
1637
- @media (max-width: 768px) {
1638
- .diagram-tooltip {
1639
- max-width: 280px;
1640
- min-width: 200px;
1641
- padding: 0.875rem 1rem;
1642
- }
1643
-
1644
- .diagram-tooltip .tooltip-title {
1645
- font-size: 0.9rem;
1646
- }
1647
-
1648
- .diagram-tooltip .tooltip-desc {
1649
- font-size: 0.8rem;
1650
- }
1651
- }
1652
-
1653
- /* ============================================
1654
- WORKFLOW STEPPER (Visual Steps)
1655
- ============================================ */
1656
-
1657
- .workflow-stepper {
1658
- display: flex;
1659
- flex-wrap: wrap;
1660
- gap: 0.5rem;
1661
- margin: 1.5rem 0;
1662
- padding: 1.25rem;
1663
- background: var(--bg-card);
1664
- border: 1px solid var(--border);
1665
- border-radius: 12px;
1666
- }
1667
-
1668
- .workflow-stepper-item {
1669
- display: flex;
1670
- align-items: center;
1671
- gap: 0.5rem;
1672
- }
1673
-
1674
- .step-number {
1675
- width: 28px;
1676
- height: 28px;
1677
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
1678
- border-radius: 50%;
1679
- display: flex;
1680
- align-items: center;
1681
- justify-content: center;
1682
- font-weight: 700;
1683
- font-size: 0.75rem;
1684
- color: white;
1685
- flex-shrink: 0;
1686
- box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
1687
- }
1688
-
1689
- .step-label {
1690
- font-size: 0.85rem;
1691
- font-weight: 500;
1692
- color: var(--text);
1693
- white-space: nowrap;
1694
- }
1695
-
1696
- .step-arrow {
1697
- color: var(--text-muted);
1698
- font-size: 1rem;
1699
- margin: 0 0.25rem;
1700
- opacity: 0.5;
1701
- }
1702
-
1703
- /* Workflow Stepper Vertical (for longer workflows) */
1704
- .workflow-stepper-vertical {
1705
- display: grid;
1706
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1707
- gap: 0.75rem;
1708
- margin: 1.5rem 0;
1709
- padding: 1rem;
1710
- background: var(--bg-card);
1711
- border: 1px solid var(--border);
1712
- border-radius: 12px;
1713
- }
1714
-
1715
- .workflow-stepper-vertical .step-item {
1716
- display: flex;
1717
- align-items: center;
1718
- gap: 0.75rem;
1719
- padding: 0.75rem;
1720
- background: var(--bg-dark);
1721
- border-radius: 8px;
1722
- border: 1px solid var(--border);
1723
- transition: all var(--transition-fast);
1724
- }
1725
-
1726
- .workflow-stepper-vertical .step-item:hover {
1727
- border-color: var(--primary);
1728
- transform: translateY(-1px);
1729
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
1730
- }
1731
-
1732
- .workflow-stepper-vertical .step-number {
1733
- width: 32px;
1734
- height: 32px;
1735
- font-size: 0.85rem;
1736
- }
1737
-
1738
- .workflow-stepper-vertical .step-content {
1739
- flex: 1;
1740
- min-width: 0;
1741
- }
1742
-
1743
- .workflow-stepper-vertical .step-title {
1744
- font-weight: 600;
1745
- font-size: 0.85rem;
1746
- color: var(--text-bright);
1747
- margin-bottom: 0.15rem;
1748
- }
1749
-
1750
- .workflow-stepper-vertical .step-desc {
1751
- font-size: 0.75rem;
1752
- color: var(--text-muted);
1753
- white-space: nowrap;
1754
- overflow: hidden;
1755
- text-overflow: ellipsis;
1756
- }
1757
-
1758
- /* Workflow Colors by type */
1759
- .step-number.step-validate { background: linear-gradient(135deg, var(--info) 0%, #1d4ed8 100%); }
1760
- .step-number.step-analyze { background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%); }
1761
- .step-number.step-detect { background: linear-gradient(135deg, var(--success) 0%, #15803d 100%); }
1762
- .step-number.step-search { background: linear-gradient(135deg, var(--warning) 0%, #ca8a04 100%); }
1763
- .step-number.step-decision { background: linear-gradient(135deg, var(--secondary) 0%, #c2410c 100%); }
1764
- .step-number.step-input { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); }
1765
- .step-number.step-generate { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
1766
- .step-number.step-create { background: linear-gradient(135deg, var(--success) 0%, #15803d 100%); }
1767
- .step-number.step-confirm { background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%); }
1768
-
1769
- /* Responsive */
1770
- @media (max-width: 768px) {
1771
- .workflow-stepper {
1772
- flex-direction: column;
1773
- gap: 0.75rem;
1774
- }
1775
-
1776
- .workflow-stepper-item {
1777
- width: 100%;
1778
- }
1779
-
1780
- .step-arrow {
1781
- display: none;
1782
- }
1783
-
1784
- .workflow-stepper-vertical {
1785
- grid-template-columns: 1fr;
1786
- }
1787
- }
1788
-
1789
- /* ============================================
1790
- TEMPLATE SECTIONS (Collapsible)
1791
- ============================================ */
1792
-
1793
- .template-section {
1794
- margin-top: 1.5rem;
1795
- border: 1px solid var(--border);
1796
- border-radius: 8px;
1797
- background: var(--bg-dark);
1798
- overflow: hidden;
1799
- }
1800
-
1801
- .template-section summary {
1802
- display: flex;
1803
- align-items: center;
1804
- gap: 0.75rem;
1805
- padding: 1rem 1.25rem;
1806
- cursor: pointer;
1807
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
1808
- border-bottom: 1px solid transparent;
1809
- transition: all var(--transition-fast);
1810
- }
1811
-
1812
- .template-section summary:hover {
1813
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
1814
- }
1815
-
1816
- .template-section[open] summary {
1817
- border-bottom-color: var(--border);
1818
- }
1819
-
1820
- .template-section summary::marker,
1821
- .template-section summary::-webkit-details-marker {
1822
- display: none;
1823
- }
1824
-
1825
- .template-section summary::before {
1826
- content: '\25B6';
1827
- font-size: 0.7rem;
1828
- color: var(--primary);
1829
- transition: transform var(--transition-fast);
1830
- }
1831
-
1832
- .template-section[open] summary::before {
1833
- transform: rotate(90deg);
1834
- }
1835
-
1836
- .template-section summary h4 {
1837
- font-size: 0.95rem;
1838
- color: var(--text-bright);
1839
- font-weight: 600;
1840
- }
1841
-
1842
- .template-badge {
1843
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
1844
- color: white;
1845
- padding: 0.2rem 0.6rem;
1846
- border-radius: 4px;
1847
- font-size: 0.75rem;
1848
- font-family: 'JetBrains Mono', 'Fira Code', monospace;
1849
- font-weight: 500;
1850
- }
1851
-
1852
- .template-content {
1853
- padding: 1rem 1.25rem;
1854
- }
1855
-
1856
- .template-path {
1857
- margin-bottom: 1rem;
1858
- font-size: 0.85rem;
1859
- color: var(--text-muted);
1860
- }
1861
-
1862
- .template-path code {
1863
- background: var(--bg-hover);
1864
- padding: 0.25rem 0.5rem;
1865
- border-radius: 4px;
1866
- font-size: 0.8rem;
1867
- }
1868
-
1869
- .template-code {
1870
- max-height: 500px;
1871
- overflow-y: auto;
1872
- }
1873
-
1874
- .template-code pre {
1875
- font-size: 0.8rem !important;
1876
- line-height: 1.5 !important;
1877
- }
1878
-
1879
- .template-code code {
1880
- white-space: pre-wrap;
1881
- word-break: break-word;
1882
- }
1883
-
1884
- /* ============================================
1885
- COPYABLE COMMAND BLOCKS
1886
- ============================================ */
1887
-
1888
- .cmd-copy {
1889
- display: inline-flex;
1890
- align-items: center;
1891
- gap: 0.5rem;
1892
- background: var(--bg-code);
1893
- border: 1px solid var(--border);
1894
- border-radius: 6px;
1895
- padding: 0.5rem 0.75rem;
1896
- margin: 0.25rem 0;
1897
- font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
1898
- font-size: 0.875rem;
1899
- color: var(--secondary);
1900
- cursor: pointer;
1901
- transition: all var(--transition-fast);
1902
- position: relative;
1903
- }
1904
-
1905
- .cmd-copy:hover {
1906
- border-color: var(--primary);
1907
- background: var(--bg-hover);
1908
- }
1909
-
1910
- .cmd-copy::after {
1911
- content: '📋';
1912
- font-size: 0.75rem;
1913
- opacity: 0;
1914
- transition: opacity var(--transition-fast);
1915
- margin-left: 0.5rem;
1916
- }
1917
-
1918
- .cmd-copy:hover::after {
1919
- opacity: 0.7;
1920
- }
1921
-
1922
- .cmd-copy.copied {
1923
- border-color: var(--success);
1924
- background: rgba(34, 197, 94, 0.1);
1925
- }
1926
-
1927
- .cmd-copy.copied::after {
1928
- content: '✓';
1929
- opacity: 1;
1930
- color: var(--success);
1931
- }
1932
-
1933
- /* Block variant for standalone commands */
1934
- .cmd-copy-block {
1935
- display: flex;
1936
- align-items: center;
1937
- justify-content: space-between;
1938
- background: var(--bg-code);
1939
- border: 1px solid var(--border);
1940
- border-radius: 8px;
1941
- padding: 0.75rem 1rem;
1942
- margin: 0.75rem 0;
1943
- font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
1944
- font-size: 0.9rem;
1945
- color: var(--secondary);
1946
- cursor: pointer;
1947
- transition: all var(--transition-fast);
1948
- }
1949
-
1950
- .cmd-copy-block:hover {
1951
- border-color: var(--primary);
1952
- background: var(--bg-hover);
1953
- box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
1954
- }
1955
-
1956
- .cmd-copy-block .cmd-text {
1957
- flex: 1;
1958
- user-select: all;
1959
- }
1960
-
1961
- .cmd-copy-block .cmd-copy-btn {
1962
- background: var(--bg-card);
1963
- border: 1px solid var(--border);
1964
- color: var(--text-muted);
1965
- padding: 0.35rem 0.75rem;
1966
- border-radius: 4px;
1967
- font-size: 0.75rem;
1968
- cursor: pointer;
1969
- transition: all var(--transition-fast);
1970
- white-space: nowrap;
1971
- margin-left: 1rem;
1972
- }
1973
-
1974
- .cmd-copy-block .cmd-copy-btn:hover {
1975
- background: var(--primary);
1976
- color: white;
1977
- border-color: var(--primary);
1978
- }
1979
-
1980
- .cmd-copy-block.copied {
1981
- border-color: var(--success);
1982
- }
1983
-
1984
- .cmd-copy-block.copied .cmd-copy-btn {
1985
- background: var(--success);
1986
- color: white;
1987
- border-color: var(--success);
1988
- }
1989
-
1990
- /* Table cell variant */
1991
- td .cmd-copy {
1992
- display: flex;
1993
- margin: 0;
1994
- }
1995
-
1996
- /* Step content variant */
1997
- .step-content .cmd-copy-block {
1998
- margin-top: 0.5rem;
1999
- }
2000
-
2001
- /* ============================================
2002
- FILE LINKS (clickable file paths)
2003
- ============================================ */
2004
-
2005
- .file-link {
2006
- color: var(--accent);
2007
- text-decoration: none;
2008
- transition: all var(--transition-fast);
2009
- border-bottom: 1px dotted var(--accent);
2010
- }
2011
-
2012
- .file-link:hover {
2013
- color: var(--primary-light);
2014
- border-bottom-color: var(--primary-light);
2015
- text-decoration: none;
2016
- }
2017
-
2018
- .file-link code {
2019
- color: inherit;
2020
- background: transparent;
2021
- }
2022
-
2023
- /* File links in code blocks */
2024
- pre .file-link {
2025
- border-bottom: none;
2026
- }
2027
-
2028
- pre .file-link:hover {
2029
- text-decoration: underline;
2030
- }
1
+ /* ============================================
2
+ CLAUDE TOOLS DOCUMENTATION - STYLES
3
+ ============================================ */
4
+
5
+ :root {
6
+ /* Colors */
7
+ --primary: #6366f1;
8
+ --primary-dark: #4f46e5;
9
+ --primary-light: #818cf8;
10
+ --secondary: #f97316;
11
+ --accent: #06b6d4;
12
+
13
+ --bg-dark: #0f172a;
14
+ --bg-card: #1e293b;
15
+ --bg-hover: #334155;
16
+ --bg-code: #0d1117;
17
+
18
+ --text: #b8c4d1;
19
+ --text-muted: #8a9bb0;
20
+ --text-bright: #c8d0dc;
21
+
22
+ --border: #334155;
23
+ --border-light: #475569;
24
+
25
+ --success: #22c55e;
26
+ --warning: #eab308;
27
+ --error: #ef4444;
28
+ --info: #3b82f6;
29
+
30
+ /* Sidebar */
31
+ --sidebar-width: 280px;
32
+ --sidebar-collapsed: 60px;
33
+
34
+ /* Transitions */
35
+ --transition-fast: 0.15s ease;
36
+ --transition-normal: 0.3s ease;
37
+ }
38
+
39
+ * {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ html {
46
+ scroll-behavior: smooth;
47
+ }
48
+
49
+ body {
50
+ font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
51
+ background: var(--bg-dark);
52
+ color: var(--text);
53
+ line-height: 1.7;
54
+ min-height: 100vh;
55
+ }
56
+
57
+ /* ============================================
58
+ LAYOUT
59
+ ============================================ */
60
+
61
+ .app-container {
62
+ display: flex;
63
+ flex-direction: column;
64
+ min-height: 100vh;
65
+ }
66
+
67
+ /* Unified Global Header */
68
+ .global-header {
69
+ background: var(--bg-card);
70
+ border-bottom: 1px solid var(--border);
71
+ height: 44px;
72
+ display: flex;
73
+ align-items: center;
74
+ padding: 0 1rem;
75
+ gap: 1rem;
76
+ position: sticky;
77
+ top: 0;
78
+ z-index: 1001;
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ .global-header .logo {
83
+ width: 26px;
84
+ height: 26px;
85
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
86
+ border-radius: 5px;
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ font-weight: 700;
91
+ font-size: 0.8rem;
92
+ flex-shrink: 0;
93
+ }
94
+
95
+ .global-header .site-title {
96
+ font-size: 0.95rem;
97
+ font-weight: 600;
98
+ white-space: nowrap;
99
+ color: var(--text-bright);
100
+ }
101
+
102
+ .global-header .version-badge {
103
+ background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
104
+ color: white;
105
+ font-size: 0.65rem;
106
+ font-weight: 600;
107
+ padding: 0.2rem 0.5rem;
108
+ border-radius: 4px;
109
+ white-space: nowrap;
110
+ }
111
+
112
+ .global-header .header-divider {
113
+ width: 1px;
114
+ height: 24px;
115
+ background: var(--border);
116
+ margin: 0 0.5rem;
117
+ }
118
+
119
+ .global-header .page-title {
120
+ font-size: 0.95rem;
121
+ font-weight: 600;
122
+ color: var(--text-bright);
123
+ white-space: nowrap;
124
+ }
125
+
126
+ .global-header .breadcrumb {
127
+ display: flex;
128
+ align-items: center;
129
+ gap: 0.35rem;
130
+ font-size: 0.75rem;
131
+ color: var(--text-muted);
132
+ }
133
+
134
+ .global-header .breadcrumb a {
135
+ color: var(--text-muted);
136
+ text-decoration: none;
137
+ transition: color var(--transition-fast);
138
+ }
139
+
140
+ .global-header .breadcrumb a:hover {
141
+ color: var(--primary-light);
142
+ }
143
+
144
+ .global-header .breadcrumb-separator {
145
+ color: var(--border-light);
146
+ font-size: 0.65rem;
147
+ }
148
+
149
+ .global-header .breadcrumb-current {
150
+ color: var(--primary-light);
151
+ }
152
+
153
+ .global-header .lang-select {
154
+ background: var(--bg-dark);
155
+ color: var(--text);
156
+ border: 1px solid var(--border);
157
+ border-radius: 6px;
158
+ padding: 0.35rem 0.75rem;
159
+ font-size: 0.8rem;
160
+ font-weight: 500;
161
+ cursor: pointer;
162
+ outline: none;
163
+ transition: all var(--transition-fast);
164
+ margin-left: 1rem;
165
+ }
166
+
167
+ .global-header .lang-select:hover {
168
+ border-color: var(--primary);
169
+ }
170
+
171
+ .global-header .lang-select:focus {
172
+ border-color: var(--primary);
173
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
174
+ }
175
+
176
+ .global-header .lang-select option {
177
+ background: var(--bg-dark);
178
+ color: var(--text);
179
+ padding: 0.5rem;
180
+ }
181
+
182
+ /* Header Search */
183
+ .header-search {
184
+ position: relative;
185
+ margin-left: auto;
186
+ margin-right: 1rem;
187
+ }
188
+
189
+ .search-input-wrapper {
190
+ display: flex;
191
+ align-items: center;
192
+ background: var(--bg-dark);
193
+ border: 1px solid var(--border);
194
+ border-radius: 6px;
195
+ padding: 0 0.5rem;
196
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
197
+ }
198
+
199
+ .search-input-wrapper:focus-within {
200
+ border-color: var(--primary);
201
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
202
+ }
203
+
204
+ .search-icon {
205
+ color: var(--text-muted);
206
+ font-size: 0.9rem;
207
+ margin-right: 0.5rem;
208
+ }
209
+
210
+ .search-input {
211
+ background: transparent;
212
+ border: none;
213
+ color: var(--text);
214
+ font-size: 0.85rem;
215
+ padding: 0.4rem 0;
216
+ width: 180px;
217
+ outline: none;
218
+ }
219
+
220
+ .search-input::placeholder {
221
+ color: var(--text-muted);
222
+ }
223
+
224
+ .search-shortcut {
225
+ background: var(--bg-hover);
226
+ color: var(--text-muted);
227
+ font-size: 0.65rem;
228
+ font-weight: 600;
229
+ padding: 0.15rem 0.4rem;
230
+ border-radius: 4px;
231
+ margin-left: 0.5rem;
232
+ white-space: nowrap;
233
+ }
234
+
235
+ /* Search Results Dropdown */
236
+ .search-results {
237
+ position: absolute;
238
+ top: calc(100% + 8px);
239
+ left: 0;
240
+ right: 0;
241
+ min-width: 320px;
242
+ max-height: 400px;
243
+ overflow-y: auto;
244
+ background: var(--bg-dark);
245
+ border: 1px solid var(--border);
246
+ border-radius: 8px;
247
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
248
+ z-index: 1002;
249
+ display: none;
250
+ }
251
+
252
+ .search-results.visible {
253
+ display: block;
254
+ }
255
+
256
+ .search-results-empty {
257
+ padding: 1.5rem;
258
+ text-align: center;
259
+ color: var(--text-muted);
260
+ font-size: 0.85rem;
261
+ }
262
+
263
+ .search-result-item {
264
+ display: flex;
265
+ align-items: flex-start;
266
+ gap: 0.75rem;
267
+ padding: 0.75rem 1rem;
268
+ text-decoration: none;
269
+ color: var(--text);
270
+ transition: background var(--transition-fast);
271
+ border-bottom: 1px solid var(--border);
272
+ }
273
+
274
+ .search-result-item:last-child {
275
+ border-bottom: none;
276
+ }
277
+
278
+ .search-result-item:hover,
279
+ .search-result-item.active {
280
+ background: var(--bg-hover);
281
+ }
282
+
283
+ .search-result-icon {
284
+ width: 28px;
285
+ height: 28px;
286
+ background: var(--bg-card);
287
+ border-radius: 6px;
288
+ display: flex;
289
+ align-items: center;
290
+ justify-content: center;
291
+ font-size: 0.9rem;
292
+ flex-shrink: 0;
293
+ }
294
+
295
+ .search-result-content {
296
+ flex: 1;
297
+ min-width: 0;
298
+ }
299
+
300
+ .search-result-title {
301
+ font-weight: 500;
302
+ font-size: 0.9rem;
303
+ color: var(--text-bright);
304
+ margin-bottom: 0.15rem;
305
+ }
306
+
307
+ .search-result-title mark {
308
+ background: rgba(99, 102, 241, 0.3);
309
+ color: var(--primary-light);
310
+ padding: 0 0.15rem;
311
+ border-radius: 2px;
312
+ }
313
+
314
+ .search-result-path {
315
+ font-size: 0.75rem;
316
+ color: var(--text-muted);
317
+ white-space: nowrap;
318
+ overflow: hidden;
319
+ text-overflow: ellipsis;
320
+ }
321
+
322
+ .search-result-section {
323
+ font-weight: 400;
324
+ color: var(--text-muted);
325
+ font-size: 0.85rem;
326
+ }
327
+
328
+ .search-result-section mark {
329
+ background: rgba(99, 102, 241, 0.2);
330
+ color: var(--primary-light);
331
+ }
332
+
333
+ .search-result-excerpt {
334
+ font-size: 0.8rem;
335
+ color: var(--text);
336
+ line-height: 1.4;
337
+ margin: 0.35rem 0;
338
+ display: -webkit-box;
339
+ -webkit-line-clamp: 2;
340
+ -webkit-box-orient: vertical;
341
+ overflow: hidden;
342
+ }
343
+
344
+ .search-result-excerpt mark {
345
+ background: rgba(245, 158, 11, 0.3);
346
+ color: var(--accent);
347
+ padding: 0 0.1rem;
348
+ border-radius: 2px;
349
+ }
350
+
351
+ /* Search results scrollbar */
352
+ .search-results::-webkit-scrollbar {
353
+ width: 6px;
354
+ }
355
+
356
+ .search-results::-webkit-scrollbar-track {
357
+ background: var(--bg-dark);
358
+ }
359
+
360
+ .search-results::-webkit-scrollbar-thumb {
361
+ background: var(--border);
362
+ border-radius: 3px;
363
+ }
364
+
365
+ .search-results::-webkit-scrollbar-thumb:hover {
366
+ background: var(--border-light);
367
+ }
368
+
369
+ /* Responsive search */
370
+ @media (max-width: 1024px) {
371
+ .header-search {
372
+ display: none;
373
+ }
374
+ }
375
+
376
+ @media (max-width: 768px) {
377
+ .header-search {
378
+ display: none;
379
+ }
380
+ }
381
+
382
+ /* App Body - contains sidebar and main content */
383
+ .app-body {
384
+ display: flex;
385
+ flex: 1;
386
+ }
387
+
388
+ /* Sidebar */
389
+ .sidebar {
390
+ width: var(--sidebar-width);
391
+ background: var(--bg-card);
392
+ position: fixed;
393
+ top: 44px; /* Below global header */
394
+ left: 0;
395
+ height: calc(100vh - 44px);
396
+ overflow-y: auto;
397
+ transition: width var(--transition-normal), transform var(--transition-normal);
398
+ z-index: 1000;
399
+ display: flex;
400
+ flex-direction: column;
401
+ /* Hide scrollbar but keep functionality */
402
+ scrollbar-width: none; /* Firefox */
403
+ -ms-overflow-style: none; /* IE/Edge */
404
+ }
405
+
406
+ .sidebar::-webkit-scrollbar {
407
+ display: none; /* Chrome/Safari/Opera */
408
+ }
409
+
410
+ .sidebar.collapsed {
411
+ width: var(--sidebar-collapsed);
412
+ }
413
+
414
+ .sidebar.collapsed .nav-text,
415
+ .sidebar.collapsed .sidebar-header h2,
416
+ .sidebar.collapsed .sidebar-footer,
417
+ .sidebar.collapsed .nav-section-title {
418
+ opacity: 0;
419
+ visibility: hidden;
420
+ }
421
+
422
+ /* Legacy sidebar-header styles removed - now using global-header */
423
+
424
+ /* Sidebar toggle button - fixed position, always visible */
425
+ .sidebar-toggle {
426
+ position: fixed;
427
+ top: calc(50% + 22px); /* Centered in sidebar area (below 44px header) */
428
+ left: calc(var(--sidebar-width) - 1px);
429
+ transform: translateY(-50%);
430
+ width: 20px;
431
+ height: 56px;
432
+ background: var(--bg-card);
433
+ border: 1px solid var(--border);
434
+ border-left: none;
435
+ border-radius: 0 8px 8px 0;
436
+ cursor: pointer;
437
+ display: flex;
438
+ align-items: center;
439
+ justify-content: center;
440
+ color: var(--text-muted);
441
+ font-size: 0.75rem;
442
+ transition: left var(--transition-normal), background var(--transition-fast), color var(--transition-fast);
443
+ z-index: 1001;
444
+ padding: 0;
445
+ }
446
+
447
+ .sidebar-toggle:hover {
448
+ background: var(--primary);
449
+ color: white;
450
+ border-color: var(--primary);
451
+ }
452
+
453
+ /* Move toggle when sidebar is collapsed - use descendant selector since button is inside sidebar */
454
+ .sidebar.collapsed .sidebar-toggle {
455
+ left: calc(var(--sidebar-collapsed) - 1px);
456
+ }
457
+
458
+ /* Toggle icon states */
459
+ .sidebar-toggle .toggle-icon-collapse,
460
+ .sidebar-toggle .toggle-icon-expand {
461
+ display: flex;
462
+ align-items: center;
463
+ justify-content: center;
464
+ }
465
+
466
+ .sidebar-toggle .toggle-icon-expand {
467
+ display: none;
468
+ }
469
+
470
+ .sidebar.collapsed .sidebar-toggle .toggle-icon-collapse {
471
+ display: none;
472
+ }
473
+
474
+ .sidebar.collapsed .sidebar-toggle .toggle-icon-expand {
475
+ display: flex;
476
+ }
477
+
478
+ /* Navigation */
479
+ .sidebar-nav {
480
+ flex: 1;
481
+ padding: 0.5rem 0 1rem 0;
482
+ overflow-y: auto;
483
+ /* Hide scrollbar but keep functionality */
484
+ scrollbar-width: none;
485
+ -ms-overflow-style: none;
486
+ }
487
+
488
+ .sidebar-nav::-webkit-scrollbar {
489
+ display: none;
490
+ }
491
+
492
+ .nav-section {
493
+ margin-bottom: 1.5rem;
494
+ }
495
+
496
+ .nav-section-title {
497
+ padding: 0.5rem 1.5rem;
498
+ font-size: 0.7rem;
499
+ font-weight: 600;
500
+ text-transform: uppercase;
501
+ letter-spacing: 0.1em;
502
+ color: var(--text-muted);
503
+ transition: opacity var(--transition-fast);
504
+ }
505
+
506
+ .nav-item {
507
+ display: flex;
508
+ align-items: center;
509
+ gap: 0.75rem;
510
+ padding: 0.625rem 1.5rem;
511
+ color: var(--text-muted);
512
+ text-decoration: none;
513
+ transition: all var(--transition-fast);
514
+ border-left: 3px solid transparent;
515
+ }
516
+
517
+ .nav-item:hover {
518
+ background: var(--bg-hover);
519
+ color: var(--text);
520
+ }
521
+
522
+ .nav-item.active {
523
+ background: rgba(99, 102, 241, 0.1);
524
+ color: var(--primary-light);
525
+ border-left-color: var(--primary);
526
+ }
527
+
528
+ .nav-item .icon {
529
+ width: 20px;
530
+ height: 20px;
531
+ display: flex;
532
+ align-items: center;
533
+ justify-content: center;
534
+ flex-shrink: 0;
535
+ }
536
+
537
+ .nav-text {
538
+ white-space: nowrap;
539
+ transition: opacity var(--transition-fast);
540
+ }
541
+
542
+ /* Sidebar Footer */
543
+ .sidebar-footer {
544
+ padding: 1rem 1.5rem;
545
+ border-top: 1px solid var(--border);
546
+ transition: opacity var(--transition-fast);
547
+ }
548
+
549
+ .lang-switch {
550
+ display: flex;
551
+ background: var(--bg-dark);
552
+ border-radius: 6px;
553
+ padding: 3px;
554
+ }
555
+
556
+ .lang-btn {
557
+ flex: 1;
558
+ padding: 0.375rem 0.75rem;
559
+ border: none;
560
+ background: transparent;
561
+ color: var(--text-muted);
562
+ font-size: 0.8rem;
563
+ font-weight: 500;
564
+ cursor: pointer;
565
+ border-radius: 4px;
566
+ transition: all var(--transition-fast);
567
+ }
568
+
569
+ .lang-btn.active {
570
+ background: var(--primary);
571
+ color: white;
572
+ }
573
+
574
+ /* Main Content */
575
+ .main-content {
576
+ flex: 1;
577
+ margin-left: var(--sidebar-width);
578
+ transition: margin-left var(--transition-normal);
579
+ min-height: 100vh;
580
+ }
581
+
582
+ .sidebar.collapsed ~ .main-content {
583
+ margin-left: var(--sidebar-collapsed);
584
+ }
585
+
586
+ /* Legacy page-header styles removed - now using global-header */
587
+
588
+ /* Content Area */
589
+ .content {
590
+ max-width: none;
591
+ width: 100%;
592
+ padding: 2rem 2.5rem;
593
+ }
594
+
595
+ .content-wide {
596
+ max-width: none;
597
+ }
598
+
599
+ /* ============================================
600
+ TYPOGRAPHY
601
+ ============================================ */
602
+
603
+ h2 {
604
+ font-size: 1.75rem;
605
+ font-weight: 600;
606
+ margin: 2.5rem 0 1rem;
607
+ padding-bottom: 0.5rem;
608
+ border-bottom: 1px solid var(--border);
609
+ color: var(--text-bright);
610
+ }
611
+
612
+ h3 {
613
+ font-size: 1.25rem;
614
+ font-weight: 600;
615
+ margin: 2rem 0 1rem;
616
+ color: var(--primary-light);
617
+ }
618
+
619
+ h4 {
620
+ font-size: 1.1rem;
621
+ font-weight: 600;
622
+ margin: 1.5rem 0 0.75rem;
623
+ color: var(--text);
624
+ }
625
+
626
+ p {
627
+ margin-bottom: 1rem;
628
+ }
629
+
630
+ a {
631
+ color: var(--primary-light);
632
+ text-decoration: none;
633
+ }
634
+
635
+ a:hover {
636
+ text-decoration: underline;
637
+ }
638
+
639
+ /* ============================================
640
+ COMPONENTS
641
+ ============================================ */
642
+
643
+ /* Cards */
644
+ .card-grid {
645
+ display: grid;
646
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
647
+ gap: 1.25rem;
648
+ margin: 1.5rem 0;
649
+ }
650
+
651
+ .card {
652
+ background: var(--bg-card);
653
+ border: 1px solid var(--border);
654
+ border-radius: 12px;
655
+ padding: 1.5rem;
656
+ transition: all var(--transition-fast);
657
+ }
658
+
659
+ .card:hover {
660
+ border-color: var(--primary);
661
+ transform: translateY(-2px);
662
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
663
+ }
664
+
665
+ .card-header {
666
+ display: flex;
667
+ align-items: flex-start;
668
+ gap: 1rem;
669
+ margin-bottom: 1rem;
670
+ }
671
+
672
+ .card-icon {
673
+ width: 44px;
674
+ height: 44px;
675
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
676
+ border-radius: 10px;
677
+ display: flex;
678
+ align-items: center;
679
+ justify-content: center;
680
+ font-size: 1.25rem;
681
+ flex-shrink: 0;
682
+ }
683
+
684
+ .card-title {
685
+ font-size: 1.1rem;
686
+ font-weight: 600;
687
+ margin-bottom: 0.25rem;
688
+ }
689
+
690
+ .card-subtitle {
691
+ font-size: 0.8rem;
692
+ color: var(--text-muted);
693
+ }
694
+
695
+ .card-body p {
696
+ color: var(--text-muted);
697
+ font-size: 0.9rem;
698
+ margin-bottom: 1rem;
699
+ }
700
+
701
+ /* Tags */
702
+ .tag {
703
+ display: inline-flex;
704
+ align-items: center;
705
+ padding: 0.25rem 0.625rem;
706
+ border-radius: 4px;
707
+ font-size: 0.7rem;
708
+ font-weight: 600;
709
+ text-transform: uppercase;
710
+ letter-spacing: 0.05em;
711
+ }
712
+
713
+ .tag-command { background: var(--primary); color: white; }
714
+ .tag-agent { background: var(--secondary); color: white; }
715
+ .tag-workflow { background: var(--success); color: white; }
716
+ .tag-best-practice { background: var(--accent); color: var(--bg-dark); }
717
+ .tag-warning { background: var(--warning); color: var(--bg-dark); }
718
+
719
+ /* Code */
720
+ code {
721
+ background: var(--bg-code);
722
+ padding: 0.2rem 0.5rem;
723
+ border-radius: 4px;
724
+ font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
725
+ font-size: 0.875em;
726
+ color: var(--text-bright);
727
+ border: 1px solid var(--border);
728
+ }
729
+
730
+ /* Code in tables - minimal style (just monospace, no decoration) */
731
+ table code,
732
+ .table-container code,
733
+ td code {
734
+ background: transparent !important;
735
+ color: inherit !important;
736
+ border: none !important;
737
+ padding: 0 !important;
738
+ box-shadow: none !important;
739
+ }
740
+
741
+ /* Code in alerts - subtle style */
742
+ .alert code,
743
+ .alert-content code {
744
+ background: rgba(0, 0, 0, 0.3);
745
+ border: none;
746
+ color: #e2e8f0;
747
+ padding: 0.15rem 0.4rem;
748
+ }
749
+
750
+ /* Code in paragraphs - lighter style */
751
+ p code {
752
+ background: rgba(30, 41, 59, 0.8);
753
+ border: none;
754
+ color: #93c5fd;
755
+ }
756
+
757
+ pre {
758
+ background: var(--bg-code);
759
+ border: 1px solid var(--border);
760
+ border-radius: 8px;
761
+ padding: 1.25rem;
762
+ overflow-x: auto;
763
+ margin: 1rem 0;
764
+ position: relative;
765
+ }
766
+
767
+ pre code {
768
+ background: none !important;
769
+ padding: 0 !important;
770
+ border: none !important;
771
+ color: var(--text);
772
+ font-size: 0.875rem;
773
+ line-height: 1.6;
774
+ }
775
+
776
+ /* Code block container */
777
+ .code-block pre code {
778
+ background: transparent !important;
779
+ border: none !important;
780
+ padding: 0 !important;
781
+ box-shadow: none !important;
782
+ }
783
+
784
+ /* Code syntax highlighting */
785
+ .code-comment {
786
+ color: #6b7280;
787
+ font-style: italic;
788
+ }
789
+
790
+ .code-cmd {
791
+ color: #22d3ee;
792
+ font-weight: 600;
793
+ }
794
+
795
+ .code-arg {
796
+ color: #a78bfa;
797
+ }
798
+
799
+ .code-string {
800
+ color: #4ade80;
801
+ }
802
+
803
+ .code-flag {
804
+ color: #fbbf24;
805
+ }
806
+
807
+ .code-output {
808
+ color: #64748b;
809
+ font-style: italic;
810
+ }
811
+
812
+ .code-header {
813
+ display: flex;
814
+ justify-content: space-between;
815
+ align-items: center;
816
+ background: var(--bg-hover);
817
+ padding: 0.5rem 1rem;
818
+ border-radius: 8px 8px 0 0;
819
+ margin: 1rem 0 0;
820
+ font-size: 0.8rem;
821
+ color: var(--text-muted);
822
+ }
823
+
824
+ .code-header + pre {
825
+ margin-top: 0;
826
+ border-radius: 0 0 8px 8px;
827
+ }
828
+
829
+ .copy-btn {
830
+ background: var(--bg-card);
831
+ border: 1px solid var(--border);
832
+ color: var(--text-muted);
833
+ padding: 0.25rem 0.5rem;
834
+ border-radius: 4px;
835
+ font-size: 0.75rem;
836
+ cursor: pointer;
837
+ transition: all var(--transition-fast);
838
+ }
839
+
840
+ .copy-btn:hover {
841
+ background: var(--primary);
842
+ color: white;
843
+ border-color: var(--primary);
844
+ }
845
+
846
+ /* Alerts */
847
+ .alert {
848
+ padding: 1rem 1.25rem;
849
+ border-radius: 8px;
850
+ margin: 1.5rem 0;
851
+ border-left: 4px solid;
852
+ display: flex;
853
+ gap: 0.75rem;
854
+ }
855
+
856
+ .alert-icon {
857
+ font-size: 1.25rem;
858
+ flex-shrink: 0;
859
+ }
860
+
861
+ .alert-content h5 {
862
+ font-weight: 600;
863
+ margin-bottom: 0.25rem;
864
+ }
865
+
866
+ .alert-content p {
867
+ margin: 0;
868
+ font-size: 0.9rem;
869
+ }
870
+
871
+ .alert-info {
872
+ background: rgba(59, 130, 246, 0.1);
873
+ border-color: var(--info);
874
+ }
875
+
876
+ .alert-success {
877
+ background: rgba(34, 197, 94, 0.1);
878
+ border-color: var(--success);
879
+ }
880
+
881
+ .alert-warning {
882
+ background: rgba(234, 179, 8, 0.1);
883
+ border-color: var(--warning);
884
+ }
885
+
886
+ .alert-error {
887
+ background: rgba(239, 68, 68, 0.1);
888
+ border-color: var(--error);
889
+ }
890
+
891
+ /* Tables */
892
+ .table-container {
893
+ overflow-x: auto;
894
+ margin: 1.5rem 0;
895
+ border: 1px solid var(--border);
896
+ border-radius: 8px;
897
+ }
898
+
899
+ table {
900
+ width: 100%;
901
+ border-collapse: collapse;
902
+ }
903
+
904
+ th, td {
905
+ padding: 0.875rem 1rem;
906
+ text-align: left;
907
+ border-bottom: 1px solid var(--border);
908
+ }
909
+
910
+ th {
911
+ background: var(--bg-hover);
912
+ font-weight: 600;
913
+ font-size: 0.875rem;
914
+ color: var(--text-muted);
915
+ text-transform: uppercase;
916
+ letter-spacing: 0.05em;
917
+ }
918
+
919
+ tr:last-child td {
920
+ border-bottom: none;
921
+ }
922
+
923
+ tr:hover td {
924
+ background: rgba(99, 102, 241, 0.05);
925
+ }
926
+
927
+ /* Workflow Diagram */
928
+ .workflow-diagram {
929
+ background: var(--bg-card);
930
+ border: 1px solid var(--border);
931
+ border-radius: 12px;
932
+ padding: 2rem;
933
+ margin: 2rem 0;
934
+ overflow-x: auto;
935
+ }
936
+
937
+ .workflow-steps {
938
+ display: flex;
939
+ align-items: center;
940
+ justify-content: center;
941
+ gap: 0.5rem;
942
+ flex-wrap: wrap;
943
+ }
944
+
945
+ .workflow-step {
946
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
947
+ padding: 0.75rem 1.5rem;
948
+ border-radius: 8px;
949
+ font-weight: 600;
950
+ font-size: 0.9rem;
951
+ white-space: nowrap;
952
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
953
+ }
954
+
955
+ .workflow-arrow {
956
+ color: var(--text-muted);
957
+ font-size: 1.5rem;
958
+ padding: 0 0.25rem;
959
+ }
960
+
961
+ /* Best Practice Box */
962
+ .best-practice {
963
+ background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
964
+ border: 1px solid var(--accent);
965
+ border-radius: 12px;
966
+ padding: 1.5rem;
967
+ margin: 1.5rem 0;
968
+ }
969
+
970
+ .best-practice-header {
971
+ display: flex;
972
+ align-items: center;
973
+ gap: 0.75rem;
974
+ margin-bottom: 1rem;
975
+ font-weight: 600;
976
+ color: var(--accent);
977
+ }
978
+
979
+ .best-practice ul {
980
+ margin: 0;
981
+ padding-left: 1.5rem;
982
+ }
983
+
984
+ .best-practice li {
985
+ margin-bottom: 0.5rem;
986
+ color: var(--text);
987
+ }
988
+
989
+ /* Steps List */
990
+ .steps-list {
991
+ counter-reset: step;
992
+ list-style: none;
993
+ padding: 0;
994
+ margin: 1.5rem 0;
995
+ }
996
+
997
+ .steps-list li {
998
+ counter-increment: step;
999
+ display: flex;
1000
+ gap: 1rem;
1001
+ margin-bottom: 1.5rem;
1002
+ padding: 1.25rem;
1003
+ background: var(--bg-card);
1004
+ border: 1px solid var(--border);
1005
+ border-radius: 8px;
1006
+ }
1007
+
1008
+ .steps-list li::before {
1009
+ content: counter(step);
1010
+ width: 32px;
1011
+ height: 32px;
1012
+ background: var(--primary);
1013
+ border-radius: 50%;
1014
+ display: flex;
1015
+ align-items: center;
1016
+ justify-content: center;
1017
+ font-weight: 700;
1018
+ flex-shrink: 0;
1019
+ }
1020
+
1021
+ .step-content h5 {
1022
+ font-weight: 600;
1023
+ margin-bottom: 0.5rem;
1024
+ }
1025
+
1026
+ .step-content p {
1027
+ margin: 0;
1028
+ color: var(--text-muted);
1029
+ font-size: 0.9rem;
1030
+ }
1031
+
1032
+ /* Feature Grid */
1033
+ .feature-grid {
1034
+ display: grid;
1035
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1036
+ gap: 1rem;
1037
+ margin: 1.5rem 0;
1038
+ }
1039
+
1040
+ .feature-item {
1041
+ display: flex;
1042
+ align-items: flex-start;
1043
+ gap: 0.75rem;
1044
+ padding: 1rem;
1045
+ background: var(--bg-card);
1046
+ border-radius: 8px;
1047
+ }
1048
+
1049
+ .feature-icon {
1050
+ width: 24px;
1051
+ height: 24px;
1052
+ color: var(--success);
1053
+ flex-shrink: 0;
1054
+ }
1055
+
1056
+ .feature-text {
1057
+ font-size: 0.9rem;
1058
+ }
1059
+
1060
+ /* ============================================
1061
+ RESPONSIVE
1062
+ ============================================ */
1063
+
1064
+ @media (max-width: 1024px) {
1065
+ .sidebar {
1066
+ transform: translateX(-100%);
1067
+ }
1068
+
1069
+ .sidebar.open {
1070
+ transform: translateX(0);
1071
+ }
1072
+
1073
+ .main-content {
1074
+ margin-left: 0;
1075
+ }
1076
+
1077
+ .mobile-menu-btn {
1078
+ display: flex;
1079
+ }
1080
+
1081
+ /* Global header responsive */
1082
+ .global-header .site-title,
1083
+ .global-header .version-badge,
1084
+ .global-header .header-divider {
1085
+ display: none;
1086
+ }
1087
+ }
1088
+
1089
+ @media (max-width: 768px) {
1090
+ .global-header {
1091
+ padding: 0 0.75rem;
1092
+ gap: 0.5rem;
1093
+ }
1094
+
1095
+ .global-header .page-title {
1096
+ font-size: 0.85rem;
1097
+ }
1098
+
1099
+ .global-header .breadcrumb {
1100
+ display: none;
1101
+ }
1102
+
1103
+ .content {
1104
+ padding: 1.5rem 1rem;
1105
+ }
1106
+
1107
+ .workflow-steps {
1108
+ flex-direction: column;
1109
+ }
1110
+
1111
+ .workflow-arrow {
1112
+ transform: rotate(90deg);
1113
+ }
1114
+
1115
+ .card-grid {
1116
+ grid-template-columns: 1fr;
1117
+ }
1118
+ }
1119
+
1120
+ /* Mobile Menu Button */
1121
+ .mobile-menu-btn {
1122
+ display: none;
1123
+ position: fixed;
1124
+ bottom: 1.5rem;
1125
+ right: 1.5rem;
1126
+ width: 56px;
1127
+ height: 56px;
1128
+ background: var(--primary);
1129
+ border: none;
1130
+ border-radius: 50%;
1131
+ color: white;
1132
+ font-size: 1.5rem;
1133
+ cursor: pointer;
1134
+ z-index: 999;
1135
+ box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
1136
+ }
1137
+
1138
+ @media (max-width: 1024px) {
1139
+ .mobile-menu-btn {
1140
+ display: flex;
1141
+ align-items: center;
1142
+ justify-content: center;
1143
+ }
1144
+ }
1145
+
1146
+ /* Overlay */
1147
+ .overlay {
1148
+ display: none;
1149
+ position: fixed;
1150
+ top: 0;
1151
+ left: 0;
1152
+ right: 0;
1153
+ bottom: 0;
1154
+ background: rgba(0, 0, 0, 0.5);
1155
+ z-index: 999;
1156
+ }
1157
+
1158
+ .overlay.active {
1159
+ display: block;
1160
+ }
1161
+
1162
+ /* ============================================
1163
+ ANIMATIONS
1164
+ ============================================ */
1165
+
1166
+ @keyframes fadeIn {
1167
+ from { opacity: 0; transform: translateY(10px); }
1168
+ to { opacity: 1; transform: translateY(0); }
1169
+ }
1170
+
1171
+ .fade-in {
1172
+ animation: fadeIn 0.3s ease forwards;
1173
+ }
1174
+
1175
+ /* Bilingual content - hide inactive language, show active with original display */
1176
+ [data-lang="en"] { display: none !important; }
1177
+
1178
+ body.lang-en [data-lang="en"] { display: revert !important; }
1179
+ body.lang-en [data-lang="fr"] { display: none !important; }
1180
+
1181
+ /* ============================================
1182
+ COMMAND CARDS & PROMPTS
1183
+ ============================================ */
1184
+
1185
+ .command-card {
1186
+ background: var(--bg-card);
1187
+ border: 1px solid var(--border);
1188
+ border-radius: 12px;
1189
+ margin: 1.5rem 0;
1190
+ overflow: hidden;
1191
+ }
1192
+
1193
+ .command-header {
1194
+ display: flex;
1195
+ align-items: center;
1196
+ gap: 1rem;
1197
+ padding: 1rem 1.25rem;
1198
+ background: var(--bg-hover);
1199
+ border-bottom: 1px solid var(--border);
1200
+ }
1201
+
1202
+ .command-name {
1203
+ font-size: 1.1rem;
1204
+ font-weight: 600;
1205
+ color: var(--primary-light);
1206
+ background: var(--bg-code);
1207
+ padding: 0.35rem 0.75rem;
1208
+ }
1209
+
1210
+ .command-body {
1211
+ padding: 1.25rem;
1212
+ }
1213
+
1214
+ .command-body > p {
1215
+ margin-bottom: 1rem;
1216
+ }
1217
+
1218
+ /* Lists in command body */
1219
+ .command-body ul,
1220
+ .command-body ol {
1221
+ margin: 1rem 0;
1222
+ padding-left: 1.75rem;
1223
+ }
1224
+
1225
+ .command-body ul {
1226
+ list-style-type: disc;
1227
+ }
1228
+
1229
+ .command-body ol {
1230
+ list-style-type: decimal;
1231
+ }
1232
+
1233
+ .command-body li {
1234
+ margin-bottom: 0.5rem;
1235
+ color: var(--text);
1236
+ line-height: 1.6;
1237
+ }
1238
+
1239
+ .command-body li::marker {
1240
+ color: var(--primary-light);
1241
+ }
1242
+
1243
+ /* Badges (for command cards) */
1244
+ .badge {
1245
+ display: inline-block;
1246
+ padding: 0.25rem 0.6rem;
1247
+ border-radius: 9999px;
1248
+ font-size: 0.7rem;
1249
+ font-weight: 600;
1250
+ text-transform: uppercase;
1251
+ letter-spacing: 0.03em;
1252
+ }
1253
+
1254
+ /* Workflow colors: WHAT (Blue), HOW (Teal), DOC (Purple) */
1255
+ .badge-blue {
1256
+ background: rgba(59, 130, 246, 0.15);
1257
+ color: #60a5fa;
1258
+ border: 1px solid rgba(59, 130, 246, 0.3);
1259
+ }
1260
+
1261
+ .badge-teal {
1262
+ background: rgba(13, 148, 136, 0.15);
1263
+ color: #2dd4bf;
1264
+ border: 1px solid rgba(13, 148, 136, 0.3);
1265
+ }
1266
+
1267
+ .badge-purple {
1268
+ background: rgba(139, 92, 246, 0.15);
1269
+ color: #a78bfa;
1270
+ border: 1px solid rgba(139, 92, 246, 0.3);
1271
+ }
1272
+
1273
+ /* Additional badge variants */
1274
+ .badge-pink {
1275
+ background: rgba(236, 72, 153, 0.15);
1276
+ color: #f472b6;
1277
+ border: 1px solid rgba(236, 72, 153, 0.3);
1278
+ }
1279
+
1280
+ .badge-green {
1281
+ background: rgba(34, 197, 94, 0.15);
1282
+ color: #4ade80;
1283
+ border: 1px solid rgba(34, 197, 94, 0.3);
1284
+ }
1285
+
1286
+ .badge-orange {
1287
+ background: rgba(249, 115, 22, 0.15);
1288
+ color: #fb923c;
1289
+ border: 1px solid rgba(249, 115, 22, 0.3);
1290
+ }
1291
+
1292
+ .badge-red {
1293
+ background: rgba(239, 68, 68, 0.15);
1294
+ color: #f87171;
1295
+ border: 1px solid rgba(239, 68, 68, 0.3);
1296
+ }
1297
+
1298
+ .badge-yellow {
1299
+ background: rgba(234, 179, 8, 0.15);
1300
+ color: #facc15;
1301
+ border: 1px solid rgba(234, 179, 8, 0.3);
1302
+ }
1303
+
1304
+ /* Prompt Details (Collapsible) */
1305
+ .prompt-details {
1306
+ margin-top: 1.25rem;
1307
+ border: 1px solid var(--border);
1308
+ border-radius: 8px;
1309
+ overflow: hidden;
1310
+ }
1311
+
1312
+ .prompt-details summary {
1313
+ display: flex;
1314
+ align-items: center;
1315
+ padding: 0.875rem 1rem;
1316
+ background: var(--bg-hover);
1317
+ cursor: pointer;
1318
+ font-weight: 500;
1319
+ color: var(--text-muted);
1320
+ transition: all var(--transition-fast);
1321
+ list-style: none;
1322
+ }
1323
+
1324
+ .prompt-details summary::-webkit-details-marker {
1325
+ display: none;
1326
+ }
1327
+
1328
+ .prompt-details summary::before {
1329
+ content: '▶';
1330
+ margin-right: 0.75rem;
1331
+ font-size: 0.75rem;
1332
+ transition: transform var(--transition-fast);
1333
+ }
1334
+
1335
+ .prompt-details[open] summary::before {
1336
+ transform: rotate(90deg);
1337
+ }
1338
+
1339
+ .prompt-details summary:hover {
1340
+ color: var(--text);
1341
+ background: var(--bg-card);
1342
+ }
1343
+
1344
+ .prompt-content {
1345
+ background: var(--bg-code);
1346
+ border-top: 1px solid var(--border);
1347
+ }
1348
+
1349
+ .prompt-content pre {
1350
+ margin: 0;
1351
+ border: none;
1352
+ border-radius: 0;
1353
+ max-height: 500px;
1354
+ overflow-y: auto;
1355
+ }
1356
+
1357
+ .prompt-content pre code {
1358
+ font-size: 0.8rem;
1359
+ line-height: 1.5;
1360
+ }
1361
+
1362
+ /* Danger Tag */
1363
+ .tag-danger {
1364
+ background: var(--error);
1365
+ color: white;
1366
+ }
1367
+
1368
+ /* Code block with position */
1369
+ .code-block {
1370
+ position: relative;
1371
+ margin: 1rem 0;
1372
+ }
1373
+
1374
+ .code-block pre {
1375
+ padding-right: 4.5rem; /* Space for copy button */
1376
+ }
1377
+
1378
+ .code-block .copy-btn {
1379
+ position: absolute;
1380
+ top: 0.5rem;
1381
+ right: 0.5rem;
1382
+ z-index: 10;
1383
+ background: var(--bg-hover);
1384
+ border: 1px solid var(--border-light);
1385
+ opacity: 0.8;
1386
+ transition: opacity var(--transition-fast), background var(--transition-fast);
1387
+ }
1388
+
1389
+ .code-block:hover .copy-btn {
1390
+ opacity: 1;
1391
+ }
1392
+
1393
+ .code-block .copy-btn:hover {
1394
+ background: var(--primary);
1395
+ color: white;
1396
+ border-color: var(--primary);
1397
+ opacity: 1;
1398
+ }
1399
+
1400
+ /* Best Practice improvements */
1401
+ .best-practice h4 {
1402
+ display: flex;
1403
+ align-items: center;
1404
+ gap: 0.5rem;
1405
+ margin-bottom: 0.75rem;
1406
+ color: var(--text-bright);
1407
+ }
1408
+
1409
+ .bp-icon {
1410
+ font-size: 1.25rem;
1411
+ }
1412
+
1413
+ /* Table inside commands */
1414
+ .command-body .table-container {
1415
+ margin: 1rem 0;
1416
+ }
1417
+
1418
+ /* ============================================
1419
+ SIDEBAR PAGE TOC (Sub-navigation)
1420
+ ============================================ */
1421
+
1422
+ .nav-item-with-toc {
1423
+ flex-direction: column;
1424
+ align-items: stretch;
1425
+ }
1426
+
1427
+ .nav-item-with-toc > a {
1428
+ display: flex;
1429
+ align-items: center;
1430
+ gap: 0.75rem;
1431
+ padding: 0.625rem 1.5rem;
1432
+ color: var(--text-muted);
1433
+ text-decoration: none;
1434
+ transition: all var(--transition-fast);
1435
+ border-left: 3px solid transparent;
1436
+ }
1437
+
1438
+ .nav-item-with-toc > a:hover {
1439
+ background: var(--bg-hover);
1440
+ color: var(--text);
1441
+ }
1442
+
1443
+ .nav-item-with-toc > a.active {
1444
+ background: rgba(99, 102, 241, 0.1);
1445
+ color: var(--primary-light);
1446
+ border-left-color: var(--primary);
1447
+ }
1448
+
1449
+ /* Sidebar TOC submenu */
1450
+ .sidebar-toc {
1451
+ display: none;
1452
+ flex-direction: column;
1453
+ padding: 0.5rem 0 0.5rem 2.5rem;
1454
+ background: rgba(0, 0, 0, 0.15);
1455
+ border-left: 3px solid var(--primary);
1456
+ margin-left: 0;
1457
+ }
1458
+
1459
+ .sidebar-toc.open {
1460
+ display: flex;
1461
+ }
1462
+
1463
+ .sidebar-toc-link {
1464
+ display: block;
1465
+ font-size: 0.8rem;
1466
+ color: var(--text-muted);
1467
+ text-decoration: none;
1468
+ padding: 0.375rem 0.75rem;
1469
+ border-radius: 4px;
1470
+ transition: all var(--transition-fast);
1471
+ position: relative;
1472
+ }
1473
+
1474
+ .sidebar-toc-link::before {
1475
+ content: '';
1476
+ position: absolute;
1477
+ left: 0;
1478
+ top: 50%;
1479
+ transform: translateY(-50%);
1480
+ width: 4px;
1481
+ height: 4px;
1482
+ background: var(--border-light);
1483
+ border-radius: 50%;
1484
+ opacity: 0;
1485
+ transition: opacity var(--transition-fast);
1486
+ }
1487
+
1488
+ .sidebar-toc-link:hover {
1489
+ color: var(--text);
1490
+ background: var(--bg-hover);
1491
+ }
1492
+
1493
+ .sidebar-toc-link:hover::before {
1494
+ opacity: 1;
1495
+ }
1496
+
1497
+ .sidebar-toc-link.active {
1498
+ color: var(--primary-light);
1499
+ background: rgba(99, 102, 241, 0.15);
1500
+ }
1501
+
1502
+ .sidebar-toc-link.active::before {
1503
+ opacity: 1;
1504
+ background: var(--primary);
1505
+ width: 6px;
1506
+ height: 6px;
1507
+ }
1508
+
1509
+ /* TOC toggle button */
1510
+ .toc-toggle {
1511
+ margin-left: auto;
1512
+ background: none;
1513
+ border: none;
1514
+ color: var(--text-muted);
1515
+ cursor: pointer;
1516
+ padding: 0.25rem;
1517
+ font-size: 0.7rem;
1518
+ transition: transform var(--transition-fast);
1519
+ }
1520
+
1521
+ .toc-toggle.open {
1522
+ transform: rotate(90deg);
1523
+ }
1524
+
1525
+ /* Hide sidebar TOC when sidebar is collapsed */
1526
+ .sidebar.collapsed .sidebar-toc {
1527
+ display: none !important;
1528
+ }
1529
+
1530
+ .sidebar.collapsed .toc-toggle {
1531
+ display: none;
1532
+ }
1533
+
1534
+ /* Full width content (no inline TOC) */
1535
+ .content-full {
1536
+ max-width: none;
1537
+ width: 100%;
1538
+ padding: 2rem 2.5rem;
1539
+ }
1540
+
1541
+ @media (max-width: 768px) {
1542
+ .content-full {
1543
+ padding: 1.5rem 1rem;
1544
+ }
1545
+ }
1546
+
1547
+ /* Wide content (no TOC) */
1548
+ .content-wide {
1549
+ max-width: none;
1550
+ width: 100%;
1551
+ padding: 2rem 2.5rem;
1552
+ }
1553
+
1554
+ /* ============================================
1555
+ SVG DIAGRAMS
1556
+ ============================================ */
1557
+
1558
+ .svg-diagram {
1559
+ background: transparent;
1560
+ border: none;
1561
+ padding: 1rem 0;
1562
+ margin: 2rem 0;
1563
+ overflow-x: auto;
1564
+ display: flex;
1565
+ justify-content: center;
1566
+ }
1567
+
1568
+ .svg-diagram svg {
1569
+ max-width: 100%;
1570
+ height: auto;
1571
+ }
1572
+
1573
+ /* GitFlow branch colors */
1574
+ .branch-main { fill: #ef4444; }
1575
+ .branch-develop { fill: #f97316; }
1576
+ .branch-feature { fill: #22c55e; }
1577
+ .branch-release { fill: #eab308; }
1578
+ .branch-hotfix { fill: #ec4899; }
1579
+
1580
+ .branch-line-main { stroke: #ef4444; }
1581
+ .branch-line-develop { stroke: #f97316; }
1582
+ .branch-line-feature { stroke: #22c55e; }
1583
+ .branch-line-release { stroke: #eab308; }
1584
+ .branch-line-hotfix { stroke: #ec4899; }
1585
+
1586
+ /* Diagram legend */
1587
+ .diagram-legend {
1588
+ display: flex;
1589
+ flex-wrap: wrap;
1590
+ gap: 1.5rem;
1591
+ justify-content: center;
1592
+ margin-top: 1.5rem;
1593
+ padding-top: 1.5rem;
1594
+ border-top: 1px solid var(--border);
1595
+ }
1596
+
1597
+ .legend-item {
1598
+ display: flex;
1599
+ align-items: center;
1600
+ gap: 0.5rem;
1601
+ font-size: 0.875rem;
1602
+ color: var(--text-muted);
1603
+ }
1604
+
1605
+ .legend-color {
1606
+ width: 16px;
1607
+ height: 16px;
1608
+ border-radius: 50%;
1609
+ }
1610
+
1611
+ .legend-color.main { background: #ef4444; }
1612
+ .legend-color.develop { background: #f97316; }
1613
+ .legend-color.feature { background: #22c55e; }
1614
+ .legend-color.release { background: #eab308; }
1615
+ .legend-color.hotfix { background: #ec4899; }
1616
+
1617
+ /* APEX cycle diagram */
1618
+ .apex-cycle {
1619
+ display: flex;
1620
+ flex-direction: column;
1621
+ align-items: center;
1622
+ gap: 1rem;
1623
+ }
1624
+
1625
+ /* EF Core structure diagram */
1626
+ .efcore-structure {
1627
+ display: flex;
1628
+ flex-direction: column;
1629
+ gap: 1rem;
1630
+ }
1631
+
1632
+ /* Interactive diagram hover */
1633
+ .svg-diagram svg g[data-tooltip]:hover {
1634
+ cursor: pointer;
1635
+ filter: brightness(1.2);
1636
+ }
1637
+
1638
+ /* Tooltip for SVG */
1639
+ .svg-tooltip {
1640
+ position: absolute;
1641
+ background: var(--bg-dark);
1642
+ border: 1px solid var(--border);
1643
+ padding: 0.5rem 0.75rem;
1644
+ border-radius: 6px;
1645
+ font-size: 0.8rem;
1646
+ color: var(--text);
1647
+ pointer-events: none;
1648
+ z-index: 1000;
1649
+ max-width: 250px;
1650
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
1651
+ }
1652
+
1653
+ /* Responsive adjustments for diagrams */
1654
+ @media (max-width: 768px) {
1655
+ .svg-diagram {
1656
+ padding: 1rem;
1657
+ }
1658
+
1659
+ .diagram-legend {
1660
+ gap: 1rem;
1661
+ }
1662
+
1663
+ .legend-item {
1664
+ font-size: 0.75rem;
1665
+ }
1666
+ }
1667
+
1668
+ /* ============================================
1669
+ INTERACTIVE DIAGRAM TOOLTIP
1670
+ ============================================ */
1671
+
1672
+ .svg-diagram {
1673
+ position: relative;
1674
+ flex-direction: column;
1675
+ align-items: center;
1676
+ }
1677
+
1678
+ .diagram-hint {
1679
+ text-align: center;
1680
+ font-size: 0.85rem;
1681
+ color: var(--text-muted);
1682
+ margin-top: 1rem;
1683
+ padding: 0.5rem 1rem;
1684
+ background: rgba(99, 102, 241, 0.1);
1685
+ border-radius: 6px;
1686
+ border: 1px dashed var(--primary);
1687
+ }
1688
+
1689
+ /* Clickable SVG elements */
1690
+ .clickable-element {
1691
+ cursor: pointer;
1692
+ transition: filter 0.2s ease, opacity 0.2s ease;
1693
+ }
1694
+
1695
+ .clickable-element:hover {
1696
+ filter: url(#highlight) brightness(1.15);
1697
+ }
1698
+
1699
+ .clickable-element.active {
1700
+ filter: url(#highlight) brightness(1.25);
1701
+ }
1702
+
1703
+ .clickable-element .hit-area {
1704
+ pointer-events: all;
1705
+ }
1706
+
1707
+ /* Diagram tooltip */
1708
+ .diagram-tooltip {
1709
+ position: absolute;
1710
+ background: var(--bg-dark);
1711
+ border: 1px solid var(--primary);
1712
+ border-radius: 10px;
1713
+ padding: 1rem 1.25rem;
1714
+ max-width: 350px;
1715
+ min-width: 250px;
1716
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
1717
+ z-index: 1000;
1718
+ opacity: 0;
1719
+ visibility: hidden;
1720
+ transform: translateY(10px);
1721
+ transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
1722
+ pointer-events: none;
1723
+ }
1724
+
1725
+ .diagram-tooltip.visible {
1726
+ opacity: 1;
1727
+ visibility: visible;
1728
+ transform: translateY(0);
1729
+ pointer-events: auto;
1730
+ }
1731
+
1732
+ .diagram-tooltip .tooltip-title {
1733
+ font-weight: 600;
1734
+ font-size: 0.95rem;
1735
+ color: var(--primary-light);
1736
+ margin-bottom: 0.5rem;
1737
+ padding-bottom: 0.5rem;
1738
+ border-bottom: 1px solid var(--border);
1739
+ }
1740
+
1741
+ .diagram-tooltip .tooltip-desc {
1742
+ font-size: 0.85rem;
1743
+ color: var(--text);
1744
+ line-height: 1.6;
1745
+ }
1746
+
1747
+ .diagram-tooltip .tooltip-cmd {
1748
+ display: inline-block;
1749
+ background: var(--bg-code);
1750
+ color: var(--secondary);
1751
+ padding: 0.15rem 0.4rem;
1752
+ border-radius: 4px;
1753
+ font-family: 'Fira Code', 'Cascadia Code', monospace;
1754
+ font-size: 0.8rem;
1755
+ margin-top: 0.5rem;
1756
+ }
1757
+
1758
+ /* Close hint for tooltip */
1759
+ .diagram-tooltip::after {
1760
+ content: 'Cliquez ailleurs pour fermer';
1761
+ display: block;
1762
+ font-size: 0.7rem;
1763
+ color: var(--text-muted);
1764
+ text-align: center;
1765
+ margin-top: 0.75rem;
1766
+ padding-top: 0.5rem;
1767
+ border-top: 1px solid var(--border);
1768
+ }
1769
+
1770
+ body.lang-en .diagram-tooltip::after {
1771
+ content: 'Click outside to close';
1772
+ }
1773
+
1774
+ /* Responsive tooltip */
1775
+ @media (max-width: 768px) {
1776
+ .diagram-tooltip {
1777
+ max-width: 280px;
1778
+ min-width: 200px;
1779
+ padding: 0.875rem 1rem;
1780
+ }
1781
+
1782
+ .diagram-tooltip .tooltip-title {
1783
+ font-size: 0.9rem;
1784
+ }
1785
+
1786
+ .diagram-tooltip .tooltip-desc {
1787
+ font-size: 0.8rem;
1788
+ }
1789
+ }
1790
+
1791
+ /* ============================================
1792
+ WORKFLOW STEPPER (Visual Steps)
1793
+ ============================================ */
1794
+
1795
+ .workflow-stepper {
1796
+ display: flex;
1797
+ flex-wrap: wrap;
1798
+ gap: 0.5rem;
1799
+ margin: 1.5rem 0;
1800
+ padding: 1.25rem;
1801
+ background: var(--bg-card);
1802
+ border: 1px solid var(--border);
1803
+ border-radius: 12px;
1804
+ }
1805
+
1806
+ .workflow-stepper-item {
1807
+ display: flex;
1808
+ align-items: center;
1809
+ gap: 0.5rem;
1810
+ }
1811
+
1812
+ .step-number {
1813
+ width: 28px;
1814
+ height: 28px;
1815
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
1816
+ border-radius: 50%;
1817
+ display: flex;
1818
+ align-items: center;
1819
+ justify-content: center;
1820
+ font-weight: 700;
1821
+ font-size: 0.75rem;
1822
+ color: white;
1823
+ flex-shrink: 0;
1824
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
1825
+ }
1826
+
1827
+ .step-label {
1828
+ font-size: 0.85rem;
1829
+ font-weight: 500;
1830
+ color: var(--text);
1831
+ white-space: nowrap;
1832
+ }
1833
+
1834
+ .step-arrow {
1835
+ color: var(--text-muted);
1836
+ font-size: 1rem;
1837
+ margin: 0 0.25rem;
1838
+ opacity: 0.5;
1839
+ }
1840
+
1841
+ /* Workflow Stepper Vertical (for longer workflows) */
1842
+ .workflow-stepper-vertical {
1843
+ display: grid;
1844
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1845
+ gap: 0.75rem;
1846
+ margin: 1.5rem 0;
1847
+ padding: 1rem;
1848
+ background: var(--bg-card);
1849
+ border: 1px solid var(--border);
1850
+ border-radius: 12px;
1851
+ }
1852
+
1853
+ .workflow-stepper-vertical .step-item {
1854
+ display: flex;
1855
+ align-items: center;
1856
+ gap: 0.75rem;
1857
+ padding: 0.75rem;
1858
+ background: var(--bg-dark);
1859
+ border-radius: 8px;
1860
+ border: 1px solid var(--border);
1861
+ transition: all var(--transition-fast);
1862
+ }
1863
+
1864
+ .workflow-stepper-vertical .step-item:hover {
1865
+ border-color: var(--primary);
1866
+ transform: translateY(-1px);
1867
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
1868
+ }
1869
+
1870
+ .workflow-stepper-vertical .step-number {
1871
+ width: 32px;
1872
+ height: 32px;
1873
+ font-size: 0.85rem;
1874
+ }
1875
+
1876
+ .workflow-stepper-vertical .step-content {
1877
+ flex: 1;
1878
+ min-width: 0;
1879
+ }
1880
+
1881
+ .workflow-stepper-vertical .step-title {
1882
+ font-weight: 600;
1883
+ font-size: 0.85rem;
1884
+ color: var(--text-bright);
1885
+ margin-bottom: 0.15rem;
1886
+ }
1887
+
1888
+ .workflow-stepper-vertical .step-desc {
1889
+ font-size: 0.75rem;
1890
+ color: var(--text-muted);
1891
+ white-space: nowrap;
1892
+ overflow: hidden;
1893
+ text-overflow: ellipsis;
1894
+ }
1895
+
1896
+ /* Workflow Colors by type */
1897
+ .step-number.step-validate { background: linear-gradient(135deg, var(--info) 0%, #1d4ed8 100%); }
1898
+ .step-number.step-analyze { background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%); }
1899
+ .step-number.step-detect { background: linear-gradient(135deg, var(--success) 0%, #15803d 100%); }
1900
+ .step-number.step-search { background: linear-gradient(135deg, var(--warning) 0%, #ca8a04 100%); }
1901
+ .step-number.step-decision { background: linear-gradient(135deg, var(--secondary) 0%, #c2410c 100%); }
1902
+ .step-number.step-input { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); }
1903
+ .step-number.step-generate { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
1904
+ .step-number.step-create { background: linear-gradient(135deg, var(--success) 0%, #15803d 100%); }
1905
+ .step-number.step-confirm { background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%); }
1906
+
1907
+ /* Responsive */
1908
+ @media (max-width: 768px) {
1909
+ .workflow-stepper {
1910
+ flex-direction: column;
1911
+ gap: 0.75rem;
1912
+ }
1913
+
1914
+ .workflow-stepper-item {
1915
+ width: 100%;
1916
+ }
1917
+
1918
+ .step-arrow {
1919
+ display: none;
1920
+ }
1921
+
1922
+ .workflow-stepper-vertical {
1923
+ grid-template-columns: 1fr;
1924
+ }
1925
+ }
1926
+
1927
+ /* ============================================
1928
+ TEMPLATE SECTIONS (Collapsible)
1929
+ ============================================ */
1930
+
1931
+ .template-section {
1932
+ margin-top: 1.5rem;
1933
+ border: 1px solid var(--border);
1934
+ border-radius: 8px;
1935
+ background: var(--bg-dark);
1936
+ overflow: hidden;
1937
+ }
1938
+
1939
+ .template-section summary {
1940
+ display: flex;
1941
+ align-items: center;
1942
+ gap: 0.75rem;
1943
+ padding: 1rem 1.25rem;
1944
+ cursor: pointer;
1945
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
1946
+ border-bottom: 1px solid transparent;
1947
+ transition: all var(--transition-fast);
1948
+ }
1949
+
1950
+ .template-section summary:hover {
1951
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
1952
+ }
1953
+
1954
+ .template-section[open] summary {
1955
+ border-bottom-color: var(--border);
1956
+ }
1957
+
1958
+ .template-section summary::marker,
1959
+ .template-section summary::-webkit-details-marker {
1960
+ display: none;
1961
+ }
1962
+
1963
+ .template-section summary::before {
1964
+ content: '\25B6';
1965
+ font-size: 0.7rem;
1966
+ color: var(--primary);
1967
+ transition: transform var(--transition-fast);
1968
+ }
1969
+
1970
+ .template-section[open] summary::before {
1971
+ transform: rotate(90deg);
1972
+ }
1973
+
1974
+ .template-section summary h4 {
1975
+ font-size: 0.95rem;
1976
+ color: var(--text-bright);
1977
+ font-weight: 600;
1978
+ }
1979
+
1980
+ .template-badge {
1981
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
1982
+ color: white;
1983
+ padding: 0.2rem 0.6rem;
1984
+ border-radius: 4px;
1985
+ font-size: 0.75rem;
1986
+ font-family: 'JetBrains Mono', 'Fira Code', monospace;
1987
+ font-weight: 500;
1988
+ }
1989
+
1990
+ .template-content {
1991
+ padding: 1rem 1.25rem;
1992
+ }
1993
+
1994
+ .template-path {
1995
+ margin-bottom: 1rem;
1996
+ font-size: 0.85rem;
1997
+ color: var(--text-muted);
1998
+ }
1999
+
2000
+ .template-path code {
2001
+ background: var(--bg-hover);
2002
+ padding: 0.25rem 0.5rem;
2003
+ border-radius: 4px;
2004
+ font-size: 0.8rem;
2005
+ }
2006
+
2007
+ .template-code {
2008
+ max-height: 500px;
2009
+ overflow-y: auto;
2010
+ }
2011
+
2012
+ .template-code pre {
2013
+ font-size: 0.8rem !important;
2014
+ line-height: 1.5 !important;
2015
+ }
2016
+
2017
+ .template-code code {
2018
+ white-space: pre-wrap;
2019
+ word-break: break-word;
2020
+ }
2021
+
2022
+ /* ============================================
2023
+ COPYABLE COMMAND BLOCKS
2024
+ ============================================ */
2025
+
2026
+ .cmd-copy {
2027
+ display: inline-flex;
2028
+ align-items: center;
2029
+ gap: 0.5rem;
2030
+ background: var(--bg-code);
2031
+ border: 1px solid var(--border);
2032
+ border-radius: 6px;
2033
+ padding: 0.5rem 0.75rem;
2034
+ margin: 0.25rem 0;
2035
+ font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
2036
+ font-size: 0.875rem;
2037
+ color: var(--secondary);
2038
+ cursor: pointer;
2039
+ transition: all var(--transition-fast);
2040
+ position: relative;
2041
+ }
2042
+
2043
+ .cmd-copy:hover {
2044
+ border-color: var(--primary);
2045
+ background: var(--bg-hover);
2046
+ }
2047
+
2048
+ .cmd-copy::after {
2049
+ content: '📋';
2050
+ font-size: 0.75rem;
2051
+ opacity: 0;
2052
+ transition: opacity var(--transition-fast);
2053
+ margin-left: 0.5rem;
2054
+ }
2055
+
2056
+ .cmd-copy:hover::after {
2057
+ opacity: 0.7;
2058
+ }
2059
+
2060
+ .cmd-copy.copied {
2061
+ border-color: var(--success);
2062
+ background: rgba(34, 197, 94, 0.1);
2063
+ }
2064
+
2065
+ .cmd-copy.copied::after {
2066
+ content: '✓';
2067
+ opacity: 1;
2068
+ color: var(--success);
2069
+ }
2070
+
2071
+ /* Block variant for standalone commands */
2072
+ .cmd-copy-block {
2073
+ display: flex;
2074
+ align-items: center;
2075
+ justify-content: space-between;
2076
+ background: var(--bg-code);
2077
+ border: 1px solid var(--border);
2078
+ border-radius: 8px;
2079
+ padding: 0.75rem 1rem;
2080
+ margin: 0.75rem 0;
2081
+ font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
2082
+ font-size: 0.9rem;
2083
+ color: var(--secondary);
2084
+ cursor: pointer;
2085
+ transition: all var(--transition-fast);
2086
+ }
2087
+
2088
+ .cmd-copy-block:hover {
2089
+ border-color: var(--primary);
2090
+ background: var(--bg-hover);
2091
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
2092
+ }
2093
+
2094
+ .cmd-copy-block .cmd-text {
2095
+ flex: 1;
2096
+ user-select: all;
2097
+ }
2098
+
2099
+ .cmd-copy-block .cmd-copy-btn {
2100
+ background: var(--bg-card);
2101
+ border: 1px solid var(--border);
2102
+ color: var(--text-muted);
2103
+ padding: 0.35rem 0.75rem;
2104
+ border-radius: 4px;
2105
+ font-size: 0.75rem;
2106
+ cursor: pointer;
2107
+ transition: all var(--transition-fast);
2108
+ white-space: nowrap;
2109
+ margin-left: 1rem;
2110
+ }
2111
+
2112
+ .cmd-copy-block .cmd-copy-btn:hover {
2113
+ background: var(--primary);
2114
+ color: white;
2115
+ border-color: var(--primary);
2116
+ }
2117
+
2118
+ .cmd-copy-block.copied {
2119
+ border-color: var(--success);
2120
+ }
2121
+
2122
+ .cmd-copy-block.copied .cmd-copy-btn {
2123
+ background: var(--success);
2124
+ color: white;
2125
+ border-color: var(--success);
2126
+ }
2127
+
2128
+ /* Table cell variant */
2129
+ td .cmd-copy {
2130
+ display: flex;
2131
+ margin: 0;
2132
+ }
2133
+
2134
+ /* Step content variant */
2135
+ .step-content .cmd-copy-block {
2136
+ margin-top: 0.5rem;
2137
+ }
2138
+
2139
+ /* ============================================
2140
+ FILE LINKS (clickable file paths)
2141
+ ============================================ */
2142
+
2143
+ .file-link {
2144
+ color: var(--accent);
2145
+ text-decoration: none;
2146
+ transition: all var(--transition-fast);
2147
+ border-bottom: 1px dotted var(--accent);
2148
+ }
2149
+
2150
+ .file-link:hover {
2151
+ color: var(--primary-light);
2152
+ border-bottom-color: var(--primary-light);
2153
+ text-decoration: none;
2154
+ }
2155
+
2156
+ .file-link code {
2157
+ color: inherit;
2158
+ background: transparent;
2159
+ }
2160
+
2161
+ /* File links in code blocks */
2162
+ pre .file-link {
2163
+ border-bottom: none;
2164
+ }
2165
+
2166
+ pre .file-link:hover {
2167
+ text-decoration: underline;
2168
+ }