@visns-studio/visns-components 6.1.4 → 6.1.6
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.
- package/package.json +1 -1
- package/src/components/generic/GenericReport.jsx +793 -750
- package/src/components/generic/GroupedReportRenderer.jsx +21 -24
- package/src/components/generic/SectionGroupedReport.jsx +54 -94
- package/src/components/generic/groupedReport.css +168 -124
- package/src/components/styles/GenericDetail.module.scss +76 -32
- package/src/components/styles/GenericFormBuilder.module.scss +12 -11
- package/src/components/styles/GenericIndex.module.scss +93 -23
- package/src/components/styles/GenericReport.module.scss +938 -1018
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
.btn {
|
|
4
4
|
@include button-primary;
|
|
5
|
+
|
|
6
|
+
/* The shared mixin reads tokens (--spacing-md, --radius-sm, --font-size-sm,
|
|
7
|
+
--speed …) that several consuming projects never define, and an
|
|
8
|
+
unresolved var() drops the whole declaration — buttons lose their
|
|
9
|
+
padding, radius and type scale. Restate them with literal fallbacks:
|
|
10
|
+
where the project does define a token, the token still wins. */
|
|
11
|
+
padding: 0 var(--spacing-md, var(--padding, 1rem));
|
|
12
|
+
border-radius: var(--radius-sm, var(--radius, var(--br, 5px)));
|
|
13
|
+
font-family: var(--font-family, inherit);
|
|
14
|
+
font-size: var(--font-size-sm, 0.875rem);
|
|
15
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
16
|
+
transition:
|
|
17
|
+
background-color var(--speed, 0.2s) var(--ease, ease),
|
|
18
|
+
border-color var(--speed, 0.2s) var(--ease, ease),
|
|
19
|
+
color var(--speed, 0.2s) var(--ease, ease);
|
|
5
20
|
}
|
|
6
21
|
// Use project root CSS variables instead of local SCSS variables
|
|
7
22
|
// This allows the component to adapt to different project themes
|
|
@@ -10,18 +25,21 @@
|
|
|
10
25
|
.reportBuilder {
|
|
11
26
|
width: 100%;
|
|
12
27
|
min-height: 100vh;
|
|
13
|
-
background-color: var(--bg-color);
|
|
28
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
14
29
|
}
|
|
15
30
|
|
|
16
31
|
// Header
|
|
32
|
+
/* Joined to the unified page-header spec (see the --page-header-* doc block
|
|
33
|
+
in GenericIndex.module.scss): same surface, padding, hairline, and title
|
|
34
|
+
scale as every other page header. Stays sticky — the builder page is long
|
|
35
|
+
and the header carries its Help affordance. */
|
|
17
36
|
.header {
|
|
18
|
-
background-color: var(--
|
|
19
|
-
border-bottom: 1px solid var(--border-color);
|
|
20
|
-
padding: var(--padding
|
|
37
|
+
background-color: var(--item-color, #fff);
|
|
38
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
39
|
+
padding: var(--page-header-padding, var(--spacing-md, 1rem));
|
|
21
40
|
display: flex;
|
|
22
41
|
justify-content: space-between;
|
|
23
42
|
align-items: center;
|
|
24
|
-
box-shadow: var(--box-shadow-small);
|
|
25
43
|
position: sticky;
|
|
26
44
|
top: 0;
|
|
27
45
|
z-index: 100;
|
|
@@ -30,13 +48,13 @@
|
|
|
30
48
|
.headerLeft {
|
|
31
49
|
display: flex;
|
|
32
50
|
align-items: center;
|
|
33
|
-
gap: var(--
|
|
51
|
+
gap: var(--page-header-gap, 1rem);
|
|
34
52
|
|
|
35
53
|
h1 {
|
|
36
54
|
margin: 0;
|
|
37
|
-
font-size: 1.
|
|
38
|
-
font-weight:
|
|
39
|
-
color: var(--header-color);
|
|
55
|
+
font-size: var(--page-header-title-size, 1.25rem);
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
color: var(--header-color, #212930);
|
|
40
58
|
}
|
|
41
59
|
}
|
|
42
60
|
|
|
@@ -44,24 +62,24 @@
|
|
|
44
62
|
display: flex;
|
|
45
63
|
align-items: center;
|
|
46
64
|
gap: 6px;
|
|
47
|
-
background-color: var(--bg-color);
|
|
48
|
-
border: 1px solid var(--border-color);
|
|
49
|
-
border-radius: var(--radius);
|
|
50
|
-
padding: 8px var(--padding);
|
|
65
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
66
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
67
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
68
|
+
padding: 8px var(--padding, 1rem);
|
|
51
69
|
font-size: 0.875rem;
|
|
52
|
-
color: var(--paragraph-color);
|
|
70
|
+
color: var(--paragraph-color, #221e33);
|
|
53
71
|
cursor: pointer;
|
|
54
72
|
transition: all 0.2s ease;
|
|
55
73
|
|
|
56
74
|
&:hover {
|
|
57
|
-
background-color: var(--bg-color);
|
|
58
|
-
color: var(--header-color);
|
|
59
|
-
box-shadow: var(--box-shadow-small);
|
|
75
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
76
|
+
color: var(--header-color, #212930);
|
|
77
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
60
78
|
filter: brightness(0.95);
|
|
61
79
|
}
|
|
62
80
|
|
|
63
81
|
svg {
|
|
64
|
-
color: var(--primary-color);
|
|
82
|
+
color: var(--primary-color, #2c5282);
|
|
65
83
|
}
|
|
66
84
|
}
|
|
67
85
|
|
|
@@ -77,19 +95,19 @@
|
|
|
77
95
|
align-items: center;
|
|
78
96
|
gap: 12px;
|
|
79
97
|
padding: 8px;
|
|
80
|
-
background-color: var(--bg-color);
|
|
81
|
-
border-radius: var(--radius);
|
|
98
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
99
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
82
100
|
|
|
83
101
|
span {
|
|
84
102
|
display: flex;
|
|
85
103
|
align-items: center;
|
|
86
104
|
gap: 6px;
|
|
87
105
|
font-size: 0.875rem;
|
|
88
|
-
color: var(--paragraph-color);
|
|
106
|
+
color: var(--paragraph-color, #221e33);
|
|
89
107
|
transition: color 0.2s ease;
|
|
90
108
|
|
|
91
109
|
&.active {
|
|
92
|
-
color: var(--header-color);
|
|
110
|
+
color: var(--header-color, #212930);
|
|
93
111
|
font-weight: 500;
|
|
94
112
|
}
|
|
95
113
|
}
|
|
@@ -107,7 +125,7 @@
|
|
|
107
125
|
height: 0;
|
|
108
126
|
|
|
109
127
|
&:checked + .slider {
|
|
110
|
-
background-color: var(--primary-color);
|
|
128
|
+
background-color: var(--primary-color, #2c5282);
|
|
111
129
|
|
|
112
130
|
&:before {
|
|
113
131
|
transform: translateX(20px);
|
|
@@ -123,7 +141,7 @@
|
|
|
123
141
|
left: 0;
|
|
124
142
|
right: 0;
|
|
125
143
|
bottom: 0;
|
|
126
|
-
background-color: var(--border-color);
|
|
144
|
+
background-color: var(--border-color, #e1e1e1);
|
|
127
145
|
transition: 0.3s;
|
|
128
146
|
border-radius: 24px;
|
|
129
147
|
|
|
@@ -134,10 +152,10 @@
|
|
|
134
152
|
width: 18px;
|
|
135
153
|
left: 3px;
|
|
136
154
|
bottom: 3px;
|
|
137
|
-
background-color: var(--tertiary-color);
|
|
155
|
+
background-color: var(--tertiary-color, #fff);
|
|
138
156
|
transition: 0.3s;
|
|
139
157
|
border-radius: 50%;
|
|
140
|
-
box-shadow: var(--box-shadow-small);
|
|
158
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
141
159
|
}
|
|
142
160
|
}
|
|
143
161
|
|
|
@@ -159,13 +177,13 @@
|
|
|
159
177
|
h2 {
|
|
160
178
|
font-size: 2rem;
|
|
161
179
|
font-weight: 700;
|
|
162
|
-
color: var(--header-color);
|
|
180
|
+
color: var(--header-color, #212930);
|
|
163
181
|
margin-bottom: 12px;
|
|
164
182
|
}
|
|
165
183
|
|
|
166
184
|
p {
|
|
167
185
|
font-size: 1.125rem;
|
|
168
|
-
color: var(--paragraph-color);
|
|
186
|
+
color: var(--paragraph-color, #221e33);
|
|
169
187
|
}
|
|
170
188
|
}
|
|
171
189
|
|
|
@@ -175,11 +193,11 @@
|
|
|
175
193
|
}
|
|
176
194
|
|
|
177
195
|
.templateCategory {
|
|
178
|
-
background-color: var(--tertiary-color);
|
|
179
|
-
border-radius: var(--radius);
|
|
196
|
+
background-color: var(--tertiary-color, #fff);
|
|
197
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
180
198
|
padding: 24px;
|
|
181
|
-
box-shadow: var(--box-shadow-small);
|
|
182
|
-
border: 1px solid var(--border-color);
|
|
199
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
200
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
183
201
|
}
|
|
184
202
|
|
|
185
203
|
.categoryHeader {
|
|
@@ -189,14 +207,14 @@
|
|
|
189
207
|
margin-bottom: 20px;
|
|
190
208
|
|
|
191
209
|
svg {
|
|
192
|
-
color: var(--primary-color);
|
|
210
|
+
color: var(--primary-color, #2c5282);
|
|
193
211
|
}
|
|
194
212
|
|
|
195
213
|
h3 {
|
|
196
214
|
margin: 0;
|
|
197
215
|
font-size: 1.25rem;
|
|
198
216
|
font-weight: 600;
|
|
199
|
-
color: var(--header-color);
|
|
217
|
+
color: var(--header-color, #212930);
|
|
200
218
|
}
|
|
201
219
|
}
|
|
202
220
|
|
|
@@ -207,23 +225,20 @@
|
|
|
207
225
|
}
|
|
208
226
|
|
|
209
227
|
.templateCard {
|
|
210
|
-
background-color: var(--bg-color);
|
|
211
|
-
border:
|
|
212
|
-
border-radius: var(--radius);
|
|
228
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
229
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
230
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
213
231
|
padding: 20px;
|
|
214
232
|
cursor: pointer;
|
|
215
233
|
transition: all 0.2s ease;
|
|
216
234
|
text-align: center;
|
|
217
235
|
|
|
218
236
|
&:hover {
|
|
219
|
-
border-color: var(--primary-color);
|
|
220
|
-
background-color: var(--tertiary-color);
|
|
221
|
-
box-shadow: var(--box-shadow-small);
|
|
222
|
-
transform: translateY(-2px);
|
|
237
|
+
border-color: var(--primary-color, #2c5282);
|
|
223
238
|
}
|
|
224
239
|
|
|
225
240
|
svg {
|
|
226
|
-
color: var(--primary-color);
|
|
241
|
+
color: var(--primary-color, #2c5282);
|
|
227
242
|
margin-bottom: 12px;
|
|
228
243
|
}
|
|
229
244
|
|
|
@@ -231,25 +246,22 @@
|
|
|
231
246
|
margin: 0 0 8px 0;
|
|
232
247
|
font-size: 1rem;
|
|
233
248
|
font-weight: 600;
|
|
234
|
-
color: var(--header-color);
|
|
249
|
+
color: var(--header-color, #212930);
|
|
235
250
|
}
|
|
236
251
|
|
|
237
252
|
p {
|
|
238
253
|
margin: 0;
|
|
239
254
|
font-size: 0.875rem;
|
|
240
|
-
color: var(--paragraph-color);
|
|
255
|
+
color: var(--paragraph-color, #221e33);
|
|
241
256
|
line-height: 1.4;
|
|
242
257
|
}
|
|
243
258
|
}
|
|
244
259
|
|
|
245
260
|
.customTemplate {
|
|
246
|
-
background:
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
);
|
|
251
|
-
color: var(--tertiary-color);
|
|
252
|
-
border-radius: var(--radius);
|
|
261
|
+
background-color: var(--item-color, #fff);
|
|
262
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
263
|
+
color: var(--header-color, #212930);
|
|
264
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
253
265
|
padding: 32px;
|
|
254
266
|
cursor: pointer;
|
|
255
267
|
transition: all 0.2s ease;
|
|
@@ -261,25 +273,25 @@
|
|
|
261
273
|
min-height: 200px;
|
|
262
274
|
|
|
263
275
|
&:hover {
|
|
264
|
-
|
|
265
|
-
transform: translateY(-2px);
|
|
276
|
+
border-color: var(--primary-color, #2c5282);
|
|
266
277
|
}
|
|
267
278
|
|
|
268
279
|
svg {
|
|
269
|
-
color: var(--
|
|
280
|
+
color: var(--primary-color, #2c5282);
|
|
270
281
|
margin-bottom: 16px;
|
|
271
282
|
}
|
|
272
283
|
|
|
273
284
|
h4 {
|
|
274
|
-
margin: 0 0
|
|
275
|
-
font-size:
|
|
276
|
-
font-weight:
|
|
285
|
+
margin: 0 0 6px 0;
|
|
286
|
+
font-size: 1rem;
|
|
287
|
+
font-weight: 600;
|
|
288
|
+
color: var(--header-color, #212930);
|
|
277
289
|
}
|
|
278
290
|
|
|
279
291
|
p {
|
|
280
292
|
margin: 0;
|
|
281
293
|
font-size: 0.875rem;
|
|
282
|
-
|
|
294
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
283
295
|
}
|
|
284
296
|
}
|
|
285
297
|
|
|
@@ -290,13 +302,13 @@
|
|
|
290
302
|
h3 {
|
|
291
303
|
font-size: 1.25rem;
|
|
292
304
|
font-weight: 600;
|
|
293
|
-
color: var(--header-color);
|
|
305
|
+
color: var(--header-color, #212930);
|
|
294
306
|
margin: 0 0 8px 0;
|
|
295
307
|
}
|
|
296
308
|
|
|
297
309
|
p {
|
|
298
310
|
font-size: 0.875rem;
|
|
299
|
-
color: var(--paragraph-color);
|
|
311
|
+
color: var(--paragraph-color, #221e33);
|
|
300
312
|
margin: 0 0 20px 0;
|
|
301
313
|
}
|
|
302
314
|
}
|
|
@@ -308,9 +320,9 @@
|
|
|
308
320
|
}
|
|
309
321
|
|
|
310
322
|
.templateCard {
|
|
311
|
-
background-color: var(--tertiary-color);
|
|
312
|
-
border:
|
|
313
|
-
border-radius: var(--radius);
|
|
323
|
+
background-color: var(--tertiary-color, #fff);
|
|
324
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
325
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
314
326
|
padding: 20px;
|
|
315
327
|
cursor: pointer;
|
|
316
328
|
transition: all 0.2s ease;
|
|
@@ -318,9 +330,7 @@
|
|
|
318
330
|
overflow: hidden;
|
|
319
331
|
|
|
320
332
|
&:hover {
|
|
321
|
-
border-color: var(--primary-color);
|
|
322
|
-
box-shadow: var(--box-shadow-small);
|
|
323
|
-
transform: translateY(-2px);
|
|
333
|
+
border-color: var(--primary-color, #2c5282);
|
|
324
334
|
}
|
|
325
335
|
|
|
326
336
|
.templateIcon {
|
|
@@ -329,13 +339,13 @@
|
|
|
329
339
|
justify-content: center;
|
|
330
340
|
width: 48px;
|
|
331
341
|
height: 48px;
|
|
332
|
-
|
|
333
|
-
border-radius: var(--radius);
|
|
342
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
343
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
334
344
|
margin-bottom: 12px;
|
|
335
345
|
padding-top: 8px;
|
|
336
346
|
|
|
337
347
|
svg {
|
|
338
|
-
color: var(--tertiary-color);
|
|
348
|
+
color: var(--tertiary-color, #fff);
|
|
339
349
|
}
|
|
340
350
|
}
|
|
341
351
|
|
|
@@ -344,13 +354,13 @@
|
|
|
344
354
|
margin: 0 0 8px 0;
|
|
345
355
|
font-size: 1.125rem;
|
|
346
356
|
font-weight: 600;
|
|
347
|
-
color: var(--header-color);
|
|
357
|
+
color: var(--header-color, #212930);
|
|
348
358
|
}
|
|
349
359
|
|
|
350
360
|
p {
|
|
351
361
|
margin: 0 0 12px 0;
|
|
352
362
|
font-size: 0.875rem;
|
|
353
|
-
color: var(--paragraph-color);
|
|
363
|
+
color: var(--paragraph-color, #221e33);
|
|
354
364
|
line-height: 1.4;
|
|
355
365
|
}
|
|
356
366
|
}
|
|
@@ -363,12 +373,12 @@
|
|
|
363
373
|
}
|
|
364
374
|
|
|
365
375
|
.templateTag {
|
|
366
|
-
background-color: var(--bg-color);
|
|
367
|
-
border: 1px solid var(--border-color);
|
|
368
|
-
border-radius:
|
|
376
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
377
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
378
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
369
379
|
padding: 4px 8px;
|
|
370
380
|
font-size: 0.75rem;
|
|
371
|
-
color: var(--paragraph-color);
|
|
381
|
+
color: var(--paragraph-color, #221e33);
|
|
372
382
|
font-weight: 500;
|
|
373
383
|
}
|
|
374
384
|
|
|
@@ -376,12 +386,13 @@
|
|
|
376
386
|
position: absolute;
|
|
377
387
|
top: 12px;
|
|
378
388
|
right: 12px;
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
font-size: 0.
|
|
389
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
390
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
391
|
+
font-size: 0.6875rem;
|
|
382
392
|
font-weight: 600;
|
|
383
|
-
|
|
384
|
-
|
|
393
|
+
letter-spacing: 0.06em;
|
|
394
|
+
padding: 2px 8px;
|
|
395
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
385
396
|
text-transform: uppercase;
|
|
386
397
|
}
|
|
387
398
|
|
|
@@ -394,9 +405,9 @@
|
|
|
394
405
|
|
|
395
406
|
// Template Quick Filters
|
|
396
407
|
.templateQuickFilters {
|
|
397
|
-
background-color: var(--tertiary-color);
|
|
398
|
-
border: 1px solid var(--border-color);
|
|
399
|
-
border-radius: var(--radius);
|
|
408
|
+
background-color: var(--tertiary-color, #fff);
|
|
409
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
410
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
400
411
|
padding: 20px;
|
|
401
412
|
margin-bottom: 24px;
|
|
402
413
|
|
|
@@ -404,7 +415,7 @@
|
|
|
404
415
|
margin: 0 0 16px 0;
|
|
405
416
|
font-size: 1rem;
|
|
406
417
|
font-weight: 600;
|
|
407
|
-
color: var(--header-color);
|
|
418
|
+
color: var(--header-color, #212930);
|
|
408
419
|
display: flex;
|
|
409
420
|
align-items: center;
|
|
410
421
|
gap: 8px;
|
|
@@ -425,23 +436,20 @@
|
|
|
425
436
|
display: flex;
|
|
426
437
|
align-items: center;
|
|
427
438
|
gap: 8px;
|
|
428
|
-
background-color: var(--bg-color);
|
|
429
|
-
border:
|
|
430
|
-
border-radius: var(--radius);
|
|
439
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
440
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
441
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
431
442
|
padding: 12px 16px;
|
|
432
443
|
font-size: 0.875rem;
|
|
433
444
|
font-weight: 500;
|
|
434
|
-
color: var(--paragraph-color);
|
|
445
|
+
color: var(--paragraph-color, #221e33);
|
|
435
446
|
cursor: pointer;
|
|
436
447
|
transition: all 0.2s ease;
|
|
437
448
|
text-align: left;
|
|
438
449
|
|
|
439
450
|
&:hover {
|
|
440
|
-
border-color: var(--primary-color);
|
|
441
|
-
|
|
442
|
-
color: var(--tertiary-color);
|
|
443
|
-
transform: translateY(-1px);
|
|
444
|
-
box-shadow: var(--box-shadow-small);
|
|
451
|
+
border-color: var(--primary-color, #2c5282);
|
|
452
|
+
color: var(--primary-color, #2c5282);
|
|
445
453
|
}
|
|
446
454
|
|
|
447
455
|
svg {
|
|
@@ -452,12 +460,14 @@
|
|
|
452
460
|
// Calculated Fields Badge
|
|
453
461
|
.calculatedBadge {
|
|
454
462
|
display: inline-block;
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
font-size: 0.
|
|
463
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
464
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
465
|
+
font-size: 0.6875rem;
|
|
458
466
|
font-weight: 600;
|
|
459
|
-
|
|
460
|
-
|
|
467
|
+
letter-spacing: 0.04em;
|
|
468
|
+
text-transform: uppercase;
|
|
469
|
+
padding: 1px 6px;
|
|
470
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
461
471
|
margin-left: 8px;
|
|
462
472
|
vertical-align: middle;
|
|
463
473
|
}
|
|
@@ -469,13 +479,13 @@
|
|
|
469
479
|
align-items: flex-start;
|
|
470
480
|
gap: 4px;
|
|
471
481
|
padding: 10px 12px; // Increased padding
|
|
472
|
-
background-color: var(--tertiary-color);
|
|
473
|
-
border-radius: var(--radius);
|
|
482
|
+
background-color: var(--tertiary-color, #fff);
|
|
483
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
474
484
|
cursor: default;
|
|
475
485
|
transition: all 0.2s ease;
|
|
476
486
|
|
|
477
487
|
&:hover {
|
|
478
|
-
background-color: rgba(var(--success-rgb), 0.03);
|
|
488
|
+
background-color: rgba(var(--success-rgb, 47, 133, 90), 0.03);
|
|
479
489
|
}
|
|
480
490
|
|
|
481
491
|
.calculatedColumnHeader {
|
|
@@ -488,13 +498,13 @@
|
|
|
488
498
|
width: 16px;
|
|
489
499
|
height: 16px;
|
|
490
500
|
cursor: pointer;
|
|
491
|
-
accent-color: var(--primary-color);
|
|
501
|
+
accent-color: var(--primary-color, #2c5282);
|
|
492
502
|
flex-shrink: 0;
|
|
493
503
|
|
|
494
504
|
&:disabled {
|
|
495
505
|
cursor: not-allowed;
|
|
496
506
|
opacity: 0.8;
|
|
497
|
-
accent-color: var(--success-color);
|
|
507
|
+
accent-color: var(--success-color, #2f855a);
|
|
498
508
|
}
|
|
499
509
|
}
|
|
500
510
|
|
|
@@ -502,7 +512,7 @@
|
|
|
502
512
|
flex: 1;
|
|
503
513
|
font-size: 0.875rem;
|
|
504
514
|
font-weight: 500;
|
|
505
|
-
color: var(--header-color);
|
|
515
|
+
color: var(--header-color, #212930);
|
|
506
516
|
line-height: 1.3;
|
|
507
517
|
}
|
|
508
518
|
}
|
|
@@ -510,11 +520,11 @@
|
|
|
510
520
|
.calculatedColumnFormula {
|
|
511
521
|
margin-left: 22px; // Align with column name (checkbox width + gap)
|
|
512
522
|
font-size: 0.8rem; // Increased from 0.75rem
|
|
513
|
-
color: var(--paragraph-color);
|
|
514
|
-
background-color: var(--bg-color);
|
|
523
|
+
color: var(--paragraph-color, #221e33);
|
|
524
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
515
525
|
padding: 8px 12px; // Increased padding
|
|
516
|
-
border-radius: var(--radius);
|
|
517
|
-
border: 1px solid var(--border-color);
|
|
526
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
527
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
518
528
|
font-family: monospace;
|
|
519
529
|
line-height: 1.5; // Increased line height
|
|
520
530
|
word-break: break-all;
|
|
@@ -536,40 +546,36 @@
|
|
|
536
546
|
}
|
|
537
547
|
|
|
538
548
|
.newReportCard {
|
|
539
|
-
background:
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
var(--primary-color) 100%
|
|
543
|
-
);
|
|
544
|
-
color: var(--tertiary-color);
|
|
545
|
-
border-radius: var(--radius);
|
|
549
|
+
background-color: var(--item-color, #fff);
|
|
550
|
+
color: var(--header-color, #212930);
|
|
551
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
546
552
|
padding: 32px;
|
|
547
553
|
text-align: center;
|
|
548
554
|
cursor: pointer;
|
|
549
|
-
transition:
|
|
550
|
-
border:
|
|
555
|
+
transition: border-color 0.2s ease, color 0.2s ease;
|
|
556
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
551
557
|
|
|
552
558
|
&:hover {
|
|
553
|
-
|
|
554
|
-
|
|
559
|
+
border-color: var(--primary-color, #2c5282);
|
|
560
|
+
color: var(--primary-color, #2c5282);
|
|
555
561
|
}
|
|
556
562
|
|
|
557
563
|
svg {
|
|
558
564
|
margin-bottom: 16px;
|
|
565
|
+
color: var(--primary-color, #2c5282);
|
|
559
566
|
}
|
|
560
567
|
|
|
561
568
|
h4 {
|
|
562
|
-
margin: 0 0
|
|
563
|
-
font-size:
|
|
564
|
-
font-weight:
|
|
565
|
-
color: var(--
|
|
569
|
+
margin: 0 0 6px 0;
|
|
570
|
+
font-size: 1rem;
|
|
571
|
+
font-weight: 600;
|
|
572
|
+
color: var(--header-color, #212930);
|
|
566
573
|
}
|
|
567
574
|
|
|
568
575
|
p {
|
|
569
576
|
margin: 0;
|
|
570
|
-
opacity: 0.9;
|
|
571
577
|
font-size: 0.875rem;
|
|
572
|
-
color: var(--
|
|
578
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
573
579
|
}
|
|
574
580
|
}
|
|
575
581
|
|
|
@@ -578,7 +584,7 @@
|
|
|
578
584
|
margin: 0 0 16px 0;
|
|
579
585
|
font-size: 1.125rem;
|
|
580
586
|
font-weight: 600;
|
|
581
|
-
color: var(--header-color);
|
|
587
|
+
color: var(--header-color, #212930);
|
|
582
588
|
}
|
|
583
589
|
}
|
|
584
590
|
|
|
@@ -589,17 +595,15 @@
|
|
|
589
595
|
}
|
|
590
596
|
|
|
591
597
|
.reportCard {
|
|
592
|
-
background-color: var(--tertiary-color);
|
|
593
|
-
border:
|
|
594
|
-
border-radius: var(--radius);
|
|
598
|
+
background-color: var(--tertiary-color, #fff);
|
|
599
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
600
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
595
601
|
overflow: hidden;
|
|
596
602
|
transition: all 0.2s ease;
|
|
597
603
|
position: relative;
|
|
598
604
|
|
|
599
605
|
&:hover {
|
|
600
|
-
border-color: var(--primary-color);
|
|
601
|
-
box-shadow: var(--box-shadow-small);
|
|
602
|
-
transform: translateY(-2px);
|
|
606
|
+
border-color: var(--primary-color, #2c5282);
|
|
603
607
|
}
|
|
604
608
|
|
|
605
609
|
.reportCardContent {
|
|
@@ -618,7 +622,7 @@
|
|
|
618
622
|
margin: 0 0 8px 0;
|
|
619
623
|
font-size: 1rem;
|
|
620
624
|
font-weight: 600;
|
|
621
|
-
color: var(--header-color);
|
|
625
|
+
color: var(--header-color, #212930);
|
|
622
626
|
line-height: 1.3;
|
|
623
627
|
overflow: hidden;
|
|
624
628
|
text-overflow: ellipsis;
|
|
@@ -630,14 +634,14 @@
|
|
|
630
634
|
align-items: center;
|
|
631
635
|
gap: 8px;
|
|
632
636
|
font-size: 0.75rem;
|
|
633
|
-
color: var(--paragraph-color);
|
|
637
|
+
color: var(--paragraph-color, #221e33);
|
|
634
638
|
|
|
635
639
|
.reportVisibility {
|
|
636
640
|
font-size: 0.875rem;
|
|
637
641
|
}
|
|
638
642
|
|
|
639
643
|
.reportDate {
|
|
640
|
-
color: var(--paragraph-color);
|
|
644
|
+
color: var(--paragraph-color, #221e33);
|
|
641
645
|
}
|
|
642
646
|
}
|
|
643
647
|
}
|
|
@@ -648,17 +652,17 @@
|
|
|
648
652
|
.reportTable {
|
|
649
653
|
display: inline-block;
|
|
650
654
|
font-size: 0.75rem;
|
|
651
|
-
background-color: var(--bg-color);
|
|
652
|
-
color: var(--paragraph-color);
|
|
655
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
656
|
+
color: var(--paragraph-color, #221e33);
|
|
653
657
|
padding: 4px 8px;
|
|
654
|
-
border-radius: var(--radius);
|
|
655
|
-
border: 1px solid var(--border-color);
|
|
658
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
659
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
656
660
|
}
|
|
657
661
|
}
|
|
658
662
|
|
|
659
663
|
.reportClickHint {
|
|
660
664
|
font-size: 0.75rem;
|
|
661
|
-
color: var(--paragraph-color);
|
|
665
|
+
color: var(--paragraph-color, #221e33);
|
|
662
666
|
font-style: italic;
|
|
663
667
|
margin-top: auto;
|
|
664
668
|
}
|
|
@@ -672,9 +676,9 @@
|
|
|
672
676
|
width: 24px;
|
|
673
677
|
height: 24px;
|
|
674
678
|
border-radius: 50%;
|
|
675
|
-
background-color: rgba(var(--approval-color), 0.1);
|
|
676
|
-
border: 1px solid rgba(var(--approval-color), 0.2);
|
|
677
|
-
color: var(--approval-color);
|
|
679
|
+
background-color: rgba(var(--approval-color, #c53030), 0.1);
|
|
680
|
+
border: 1px solid rgba(var(--approval-color, #c53030), 0.2);
|
|
681
|
+
color: var(--approval-color, #c53030);
|
|
678
682
|
font-size: 16px;
|
|
679
683
|
font-weight: bold;
|
|
680
684
|
cursor: pointer;
|
|
@@ -685,8 +689,8 @@
|
|
|
685
689
|
opacity: 0.7;
|
|
686
690
|
|
|
687
691
|
&:hover {
|
|
688
|
-
background-color: var(--approval-color);
|
|
689
|
-
color: var(--tertiary-color);
|
|
692
|
+
background-color: var(--approval-color, #c53030);
|
|
693
|
+
color: var(--tertiary-color, #fff);
|
|
690
694
|
opacity: 1;
|
|
691
695
|
transform: scale(1.1);
|
|
692
696
|
}
|
|
@@ -697,16 +701,16 @@
|
|
|
697
701
|
.noReports {
|
|
698
702
|
text-align: center;
|
|
699
703
|
padding: 48px 24px;
|
|
700
|
-
color: var(--paragraph-color);
|
|
704
|
+
color: var(--paragraph-color, #221e33);
|
|
701
705
|
|
|
702
706
|
svg {
|
|
703
|
-
color: var(--paragraph-color);
|
|
707
|
+
color: var(--paragraph-color, #221e33);
|
|
704
708
|
margin-bottom: 16px;
|
|
705
709
|
}
|
|
706
710
|
|
|
707
711
|
h3 {
|
|
708
712
|
margin: 0 0 8px 0;
|
|
709
|
-
color: var(--header-color);
|
|
713
|
+
color: var(--header-color, #212930);
|
|
710
714
|
}
|
|
711
715
|
|
|
712
716
|
p {
|
|
@@ -723,18 +727,17 @@
|
|
|
723
727
|
}
|
|
724
728
|
|
|
725
729
|
.wizardProgress {
|
|
726
|
-
background-color: var(--
|
|
727
|
-
border
|
|
728
|
-
|
|
730
|
+
background-color: var(--item-color, #fff);
|
|
731
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
732
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
733
|
+
padding: 12px;
|
|
729
734
|
margin-bottom: 24px;
|
|
730
|
-
box-shadow: var(--box-shadow-small);
|
|
731
735
|
display: flex;
|
|
732
736
|
justify-content: space-between;
|
|
733
|
-
align-items:
|
|
737
|
+
align-items: stretch;
|
|
734
738
|
position: relative;
|
|
735
|
-
gap:
|
|
739
|
+
gap: 4px;
|
|
736
740
|
|
|
737
|
-
// Remove the line - we'll use arrows instead
|
|
738
741
|
&::before {
|
|
739
742
|
display: none;
|
|
740
743
|
}
|
|
@@ -744,134 +747,70 @@
|
|
|
744
747
|
display: flex;
|
|
745
748
|
flex-direction: column;
|
|
746
749
|
align-items: center;
|
|
747
|
-
gap:
|
|
750
|
+
gap: 6px;
|
|
748
751
|
cursor: pointer;
|
|
749
752
|
position: relative;
|
|
750
753
|
z-index: 1;
|
|
751
|
-
transition: all 0.2s ease;
|
|
752
754
|
flex: 1;
|
|
753
755
|
max-width: 200px;
|
|
756
|
+
padding: 10px 8px;
|
|
757
|
+
border: 1px solid transparent;
|
|
758
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
759
|
+
transition: border-color 0.2s ease, color 0.2s ease;
|
|
754
760
|
|
|
755
|
-
//
|
|
761
|
+
// Separator between steps
|
|
756
762
|
&:not(:last-child)::after {
|
|
757
|
-
content: '
|
|
763
|
+
content: '';
|
|
758
764
|
position: absolute;
|
|
759
|
-
right: -
|
|
760
|
-
top:
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
z-index: 1;
|
|
765
|
-
transition: all 0.2s ease;
|
|
765
|
+
right: -2px;
|
|
766
|
+
top: 25%;
|
|
767
|
+
bottom: 25%;
|
|
768
|
+
width: 1px;
|
|
769
|
+
background-color: var(--border-color, #e1e1e1);
|
|
766
770
|
}
|
|
767
771
|
|
|
768
772
|
&.active {
|
|
769
|
-
|
|
770
|
-
background-color: rgba(var(--primary-rgb), 0.1);
|
|
771
|
-
border-radius: calc(var(--radius) + 2px);
|
|
772
|
-
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
|
|
773
|
-
position: relative;
|
|
774
|
-
border: 1px solid rgba(var(--primary-rgb), 0.25);
|
|
775
|
-
padding: 8px 12px; // Add padding to create proper spacing
|
|
776
|
-
margin: -8px -12px; // Negative margin to maintain positioning
|
|
773
|
+
border-color: var(--border-color, #e1e1e1);
|
|
777
774
|
|
|
778
|
-
.stepIcon {
|
|
779
|
-
|
|
780
|
-
color: var(--tertiary-color);
|
|
781
|
-
border: 2px solid var(--tertiary-color);
|
|
782
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
|
|
783
|
-
// Keep same size as inactive steps
|
|
775
|
+
.stepIcon svg {
|
|
776
|
+
color: var(--primary-color, #2c5282);
|
|
784
777
|
}
|
|
785
778
|
|
|
786
779
|
.stepTitle {
|
|
787
|
-
color: var(--
|
|
780
|
+
color: var(--header-color, #212930);
|
|
788
781
|
font-weight: 600;
|
|
789
|
-
// Keep same font size as inactive steps
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
.stepDescription {
|
|
793
|
-
color: var(--primary-color);
|
|
794
|
-
opacity: 0.8;
|
|
795
|
-
// Keep same font size as inactive steps
|
|
796
|
-
}
|
|
797
|
-
|
|
798
|
-
// Arrow needs to account for the padding offset
|
|
799
|
-
&:not(:last-child)::after {
|
|
800
|
-
color: var(--primary-color);
|
|
801
|
-
font-weight: bold;
|
|
802
|
-
top: 40px; // 32px base + 8px padding offset
|
|
803
782
|
}
|
|
804
783
|
}
|
|
805
784
|
|
|
806
785
|
&.complete {
|
|
807
|
-
.stepIcon {
|
|
808
|
-
|
|
809
|
-
color: var(--tertiary-color);
|
|
810
|
-
border: 2px solid rgba(var(--color-valid), 0.3);
|
|
811
|
-
}
|
|
812
|
-
|
|
813
|
-
.stepTitle {
|
|
814
|
-
color: rgba(var(--color-valid), 1);
|
|
815
|
-
font-weight: 600;
|
|
816
|
-
}
|
|
817
|
-
|
|
818
|
-
.stepDescription {
|
|
819
|
-
color: rgba(var(--color-valid), 1);
|
|
820
|
-
opacity: 0.7;
|
|
821
|
-
}
|
|
822
|
-
|
|
823
|
-
// Color the arrow after completed step
|
|
824
|
-
&:not(:last-child)::after {
|
|
825
|
-
color: rgba(var(--color-valid), 1);
|
|
786
|
+
.stepIcon svg {
|
|
787
|
+
color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
826
788
|
}
|
|
827
789
|
}
|
|
828
790
|
|
|
829
791
|
&:hover:not(.active) {
|
|
830
|
-
|
|
831
|
-
background-color: rgba(var(--primary-rgb), 0.1);
|
|
832
|
-
border-radius: calc(var(--radius) + 2px);
|
|
833
|
-
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
|
|
834
|
-
position: relative;
|
|
835
|
-
border: 1px solid rgba(var(--primary-rgb), 0.25);
|
|
836
|
-
padding: 8px 12px;
|
|
837
|
-
margin: -8px -12px;
|
|
838
|
-
|
|
839
|
-
.stepIcon {
|
|
840
|
-
background-color: var(--primary-color);
|
|
841
|
-
color: var(--tertiary-color);
|
|
842
|
-
border: 2px solid var(--tertiary-color);
|
|
843
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
|
|
844
|
-
}
|
|
792
|
+
border-color: var(--border-color, #e1e1e1);
|
|
845
793
|
|
|
846
794
|
.stepTitle {
|
|
847
|
-
color: var(--
|
|
848
|
-
font-weight: 600;
|
|
849
|
-
}
|
|
850
|
-
|
|
851
|
-
.stepDescription {
|
|
852
|
-
color: var(--primary-color);
|
|
853
|
-
opacity: 0.8;
|
|
795
|
+
color: var(--header-color, #212930);
|
|
854
796
|
}
|
|
797
|
+
}
|
|
855
798
|
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
font-weight: bold;
|
|
860
|
-
top: 40px; // 32px base + 8px padding offset
|
|
861
|
-
}
|
|
799
|
+
&:focus-visible {
|
|
800
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
801
|
+
outline-offset: 2px;
|
|
862
802
|
}
|
|
863
803
|
}
|
|
864
804
|
|
|
865
805
|
.stepIcon {
|
|
866
|
-
width: 40px; // Reduced from 48px for more compact look
|
|
867
|
-
height: 40px;
|
|
868
|
-
border-radius: 50%;
|
|
869
|
-
background-color: var(--tertiary-color);
|
|
870
|
-
border: 2px solid var(--border-color);
|
|
871
806
|
display: flex;
|
|
872
807
|
align-items: center;
|
|
873
808
|
justify-content: center;
|
|
874
|
-
transition:
|
|
809
|
+
transition: color 0.2s ease;
|
|
810
|
+
|
|
811
|
+
svg {
|
|
812
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.45);
|
|
813
|
+
}
|
|
875
814
|
}
|
|
876
815
|
|
|
877
816
|
.stepInfo {
|
|
@@ -879,86 +818,85 @@
|
|
|
879
818
|
|
|
880
819
|
.stepTitle {
|
|
881
820
|
display: block;
|
|
882
|
-
font-size: 0.
|
|
821
|
+
font-size: 0.8125rem;
|
|
883
822
|
font-weight: 500;
|
|
884
|
-
color: var(--paragraph-
|
|
823
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
885
824
|
margin-bottom: 2px;
|
|
886
825
|
}
|
|
887
826
|
|
|
888
827
|
.stepDescription {
|
|
889
828
|
display: block;
|
|
890
|
-
font-size: 0.
|
|
891
|
-
color: var(--paragraph-
|
|
829
|
+
font-size: 0.6875rem;
|
|
830
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.45);
|
|
892
831
|
max-width: 150px;
|
|
893
832
|
line-height: 1.3;
|
|
894
833
|
}
|
|
895
834
|
}
|
|
896
835
|
|
|
897
836
|
.wizardContent {
|
|
898
|
-
background-color: var(--
|
|
899
|
-
border
|
|
900
|
-
|
|
837
|
+
background-color: var(--item-color, #fff);
|
|
838
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
839
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
901
840
|
overflow: hidden;
|
|
902
841
|
}
|
|
903
842
|
|
|
904
843
|
.stepHeader {
|
|
905
844
|
display: flex;
|
|
906
845
|
align-items: center;
|
|
907
|
-
gap:
|
|
908
|
-
padding: 24px
|
|
909
|
-
border-bottom: 1px solid var(--border-color);
|
|
910
|
-
background:
|
|
911
|
-
|
|
912
|
-
var(--primary-color) 0%,
|
|
913
|
-
var(--primary-color) 100%
|
|
914
|
-
);
|
|
915
|
-
color: var(--tertiary-color);
|
|
846
|
+
gap: 20px;
|
|
847
|
+
padding: 20px 24px;
|
|
848
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
849
|
+
background-color: var(--item-color, #fff);
|
|
850
|
+
color: var(--header-color, #212930);
|
|
916
851
|
|
|
917
852
|
.stepNumber {
|
|
918
853
|
display: flex;
|
|
919
854
|
align-items: center;
|
|
920
855
|
justify-content: center;
|
|
921
|
-
width:
|
|
922
|
-
height:
|
|
923
|
-
|
|
856
|
+
width: 32px;
|
|
857
|
+
height: 32px;
|
|
858
|
+
flex-shrink: 0;
|
|
859
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
924
860
|
border-radius: 50%;
|
|
925
|
-
font-size:
|
|
926
|
-
font-weight:
|
|
927
|
-
color: var(--
|
|
861
|
+
font-size: 0.875rem;
|
|
862
|
+
font-weight: 600;
|
|
863
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
928
864
|
}
|
|
929
865
|
|
|
930
866
|
.stepHeaderContent {
|
|
931
867
|
display: flex;
|
|
932
868
|
align-items: center;
|
|
933
|
-
gap:
|
|
869
|
+
gap: 12px;
|
|
934
870
|
flex: 1;
|
|
871
|
+
min-width: 0;
|
|
935
872
|
|
|
936
873
|
.stepIcon {
|
|
937
874
|
display: flex;
|
|
938
875
|
align-items: center;
|
|
939
876
|
justify-content: center;
|
|
940
|
-
width:
|
|
941
|
-
height:
|
|
942
|
-
|
|
943
|
-
border-radius: var(--radius);
|
|
877
|
+
width: 32px;
|
|
878
|
+
height: 32px;
|
|
879
|
+
flex-shrink: 0;
|
|
944
880
|
|
|
945
881
|
svg {
|
|
946
|
-
color: var(--
|
|
882
|
+
color: var(--primary-color, #2c5282);
|
|
947
883
|
}
|
|
948
884
|
}
|
|
949
885
|
|
|
950
886
|
.stepHeaderText {
|
|
887
|
+
min-width: 0;
|
|
888
|
+
|
|
951
889
|
h2 {
|
|
952
|
-
margin: 0 0
|
|
953
|
-
font-size: 1.
|
|
954
|
-
font-weight:
|
|
955
|
-
color: var(--
|
|
890
|
+
margin: 0 0 2px 0;
|
|
891
|
+
font-size: 1.0625rem;
|
|
892
|
+
font-weight: 600;
|
|
893
|
+
color: var(--header-color, #212930);
|
|
956
894
|
}
|
|
957
895
|
|
|
958
896
|
p {
|
|
959
897
|
margin: 0;
|
|
960
|
-
font-size:
|
|
961
|
-
color: rgba(
|
|
898
|
+
font-size: 0.8125rem;
|
|
899
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
962
900
|
}
|
|
963
901
|
}
|
|
964
902
|
}
|
|
@@ -966,16 +904,16 @@
|
|
|
966
904
|
|
|
967
905
|
.stepGuidance {
|
|
968
906
|
padding: 20px 32px;
|
|
969
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
970
|
-
border-top: 1px solid var(--border-color);
|
|
971
|
-
border-bottom: 1px solid var(--border-color);
|
|
907
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
908
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
909
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
972
910
|
|
|
973
911
|
.guidanceContent {
|
|
974
912
|
h3 {
|
|
975
913
|
margin: 0 0 16px 0;
|
|
976
914
|
font-size: 1.125rem;
|
|
977
915
|
font-weight: 600;
|
|
978
|
-
color: var(--header-color);
|
|
916
|
+
color: var(--header-color, #212930);
|
|
979
917
|
}
|
|
980
918
|
|
|
981
919
|
.howToSteps {
|
|
@@ -985,7 +923,7 @@
|
|
|
985
923
|
margin: 0 0 8px 0;
|
|
986
924
|
font-size: 0.875rem;
|
|
987
925
|
font-weight: 600;
|
|
988
|
-
color: var(--paragraph-color);
|
|
926
|
+
color: var(--paragraph-color, #221e33);
|
|
989
927
|
text-transform: uppercase;
|
|
990
928
|
letter-spacing: 0.5px;
|
|
991
929
|
}
|
|
@@ -993,7 +931,7 @@
|
|
|
993
931
|
ol {
|
|
994
932
|
margin: 0;
|
|
995
933
|
padding-left: 20px;
|
|
996
|
-
color: var(--paragraph-color);
|
|
934
|
+
color: var(--paragraph-color, #221e33);
|
|
997
935
|
|
|
998
936
|
li {
|
|
999
937
|
margin-bottom: 4px;
|
|
@@ -1008,19 +946,19 @@
|
|
|
1008
946
|
align-items: flex-start;
|
|
1009
947
|
gap: 8px;
|
|
1010
948
|
padding: 12px;
|
|
1011
|
-
background-color: rgba(var(--color-alert), 0.1);
|
|
1012
|
-
border: 1px solid rgba(var(--color-alert), 0.2);
|
|
1013
|
-
border-radius: var(--radius);
|
|
949
|
+
background-color: rgba(var(--color-alert, 255, 228, 0), 0.1);
|
|
950
|
+
border: 1px solid rgba(var(--color-alert, 255, 228, 0), 0.2);
|
|
951
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1014
952
|
|
|
1015
953
|
svg {
|
|
1016
|
-
color: rgba(var(--color-alert), 1);
|
|
954
|
+
color: rgba(var(--color-alert, 255, 228, 0), 1);
|
|
1017
955
|
flex-shrink: 0;
|
|
1018
956
|
margin-top: 2px;
|
|
1019
957
|
}
|
|
1020
958
|
|
|
1021
959
|
span {
|
|
1022
960
|
font-size: 0.875rem;
|
|
1023
|
-
color: var(--header-color);
|
|
961
|
+
color: var(--header-color, #212930);
|
|
1024
962
|
}
|
|
1025
963
|
}
|
|
1026
964
|
}
|
|
@@ -1036,8 +974,8 @@
|
|
|
1036
974
|
justify-content: space-between;
|
|
1037
975
|
align-items: center;
|
|
1038
976
|
padding: 24px 32px;
|
|
1039
|
-
border-top: 1px solid var(--border-color);
|
|
1040
|
-
background-color: var(--bg-color);
|
|
977
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
978
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1041
979
|
gap: 16px;
|
|
1042
980
|
|
|
1043
981
|
.btn {
|
|
@@ -1047,7 +985,7 @@
|
|
|
1047
985
|
transition: all 0.2s ease;
|
|
1048
986
|
|
|
1049
987
|
&:focus {
|
|
1050
|
-
outline: 2px solid rgba(var(--primary-rgb), 0.3);
|
|
988
|
+
outline: 2px solid rgba(var(--primary-rgb, 44, 82, 130), 0.3);
|
|
1051
989
|
outline-offset: 2px;
|
|
1052
990
|
}
|
|
1053
991
|
}
|
|
@@ -1058,16 +996,16 @@
|
|
|
1058
996
|
.noTables {
|
|
1059
997
|
text-align: center;
|
|
1060
998
|
padding: 48px 24px;
|
|
1061
|
-
color: var(--paragraph-color);
|
|
999
|
+
color: var(--paragraph-color, #221e33);
|
|
1062
1000
|
|
|
1063
1001
|
svg {
|
|
1064
|
-
color: var(--paragraph-color);
|
|
1002
|
+
color: var(--paragraph-color, #221e33);
|
|
1065
1003
|
margin-bottom: 16px;
|
|
1066
1004
|
}
|
|
1067
1005
|
|
|
1068
1006
|
h3 {
|
|
1069
1007
|
margin: 0 0 8px 0;
|
|
1070
|
-
color: var(--header-color);
|
|
1008
|
+
color: var(--header-color, #212930);
|
|
1071
1009
|
}
|
|
1072
1010
|
|
|
1073
1011
|
p {
|
|
@@ -1089,12 +1027,12 @@
|
|
|
1089
1027
|
margin: 0 0 8px 0;
|
|
1090
1028
|
font-size: 1.25rem;
|
|
1091
1029
|
font-weight: 600;
|
|
1092
|
-
color: var(--header-color);
|
|
1030
|
+
color: var(--header-color, #212930);
|
|
1093
1031
|
}
|
|
1094
1032
|
|
|
1095
1033
|
p {
|
|
1096
1034
|
margin: 0;
|
|
1097
|
-
color: var(--paragraph-color);
|
|
1035
|
+
color: var(--paragraph-color, #221e33);
|
|
1098
1036
|
font-size: 0.875rem;
|
|
1099
1037
|
}
|
|
1100
1038
|
}
|
|
@@ -1112,9 +1050,9 @@
|
|
|
1112
1050
|
display: flex;
|
|
1113
1051
|
flex-direction: column;
|
|
1114
1052
|
padding: 16px; // Reduced from 20px
|
|
1115
|
-
background-color: var(--tertiary-color);
|
|
1116
|
-
border:
|
|
1117
|
-
border-radius: var(--radius);
|
|
1053
|
+
background-color: var(--tertiary-color, #fff);
|
|
1054
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1055
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1118
1056
|
cursor: pointer;
|
|
1119
1057
|
transition: all 0.2s ease;
|
|
1120
1058
|
text-align: center;
|
|
@@ -1122,15 +1060,13 @@
|
|
|
1122
1060
|
min-height: 120px; // Reduced from 140px
|
|
1123
1061
|
|
|
1124
1062
|
&:hover {
|
|
1125
|
-
border-color: var(--primary-color);
|
|
1126
|
-
box-shadow: var(--box-shadow-small);
|
|
1127
|
-
transform: translateY(-2px);
|
|
1063
|
+
border-color: var(--primary-color, #2c5282);
|
|
1128
1064
|
}
|
|
1129
1065
|
|
|
1130
1066
|
&.selected {
|
|
1131
|
-
border-color: var(--primary-color);
|
|
1132
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1133
|
-
box-shadow: var(--box-shadow-small);
|
|
1067
|
+
border-color: var(--primary-color, #2c5282);
|
|
1068
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
1069
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1134
1070
|
}
|
|
1135
1071
|
|
|
1136
1072
|
.tableCardIcon {
|
|
@@ -1139,13 +1075,13 @@
|
|
|
1139
1075
|
justify-content: center;
|
|
1140
1076
|
width: 40px; // Reduced from 48px
|
|
1141
1077
|
height: 40px;
|
|
1142
|
-
background-color: rgba(var(--primary-rgb), 0.1);
|
|
1143
|
-
border-radius: var(--radius);
|
|
1078
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1079
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1144
1080
|
margin: 0 auto 12px auto; // Reduced from 16px
|
|
1145
1081
|
flex-shrink: 0;
|
|
1146
1082
|
|
|
1147
1083
|
svg {
|
|
1148
|
-
color: var(--primary-color);
|
|
1084
|
+
color: var(--primary-color, #2c5282);
|
|
1149
1085
|
}
|
|
1150
1086
|
}
|
|
1151
1087
|
|
|
@@ -1156,14 +1092,14 @@
|
|
|
1156
1092
|
margin: 0 0 6px 0; // Reduced from 8px
|
|
1157
1093
|
font-size: 0.9rem; // Reduced from 1rem
|
|
1158
1094
|
font-weight: 600;
|
|
1159
|
-
color: var(--header-color);
|
|
1095
|
+
color: var(--header-color, #212930);
|
|
1160
1096
|
line-height: 1.2;
|
|
1161
1097
|
}
|
|
1162
1098
|
|
|
1163
1099
|
p {
|
|
1164
1100
|
margin: 0;
|
|
1165
1101
|
font-size: 0.7rem; // Reduced from 0.75rem
|
|
1166
|
-
color: var(--paragraph-color);
|
|
1102
|
+
color: var(--paragraph-color, #221e33);
|
|
1167
1103
|
line-height: 1.3; // Reduced from 1.4
|
|
1168
1104
|
display: -webkit-box;
|
|
1169
1105
|
-webkit-line-clamp: 2; // Reduced from 3 lines
|
|
@@ -1181,12 +1117,12 @@
|
|
|
1181
1117
|
justify-content: center;
|
|
1182
1118
|
width: 24px;
|
|
1183
1119
|
height: 24px;
|
|
1184
|
-
background-color: var(--primary-color);
|
|
1120
|
+
background-color: var(--primary-color, #2c5282);
|
|
1185
1121
|
border-radius: 50%;
|
|
1186
|
-
color: var(--tertiary-color);
|
|
1122
|
+
color: var(--tertiary-color, #fff);
|
|
1187
1123
|
|
|
1188
1124
|
svg {
|
|
1189
|
-
color: var(--tertiary-color);
|
|
1125
|
+
color: var(--tertiary-color, #fff);
|
|
1190
1126
|
}
|
|
1191
1127
|
}
|
|
1192
1128
|
}
|
|
@@ -1198,15 +1134,15 @@
|
|
|
1198
1134
|
gap: 8px;
|
|
1199
1135
|
margin-top: 16px;
|
|
1200
1136
|
padding: 12px;
|
|
1201
|
-
background-color: rgba(var(--color-valid), 0.1);
|
|
1202
|
-
border: 1px solid rgba(var(--color-valid), 0.2);
|
|
1203
|
-
border-radius: var(--radius);
|
|
1204
|
-
color: rgba(var(--color-valid), 1);
|
|
1137
|
+
background-color: rgba(var(--color-valid, 95, 180, 133), 0.1);
|
|
1138
|
+
border: 1px solid rgba(var(--color-valid, 95, 180, 133), 0.2);
|
|
1139
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1140
|
+
color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
1205
1141
|
font-weight: 500;
|
|
1206
1142
|
font-size: 0.875rem;
|
|
1207
1143
|
|
|
1208
1144
|
svg {
|
|
1209
|
-
color: rgba(var(--color-valid), 1);
|
|
1145
|
+
color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
1210
1146
|
}
|
|
1211
1147
|
}
|
|
1212
1148
|
}
|
|
@@ -1219,7 +1155,7 @@
|
|
|
1219
1155
|
margin: 0 0 16px 0;
|
|
1220
1156
|
font-size: 1.125rem;
|
|
1221
1157
|
font-weight: 600;
|
|
1222
|
-
color: var(--header-color);
|
|
1158
|
+
color: var(--header-color, #212930);
|
|
1223
1159
|
}
|
|
1224
1160
|
}
|
|
1225
1161
|
|
|
@@ -1230,12 +1166,12 @@
|
|
|
1230
1166
|
}
|
|
1231
1167
|
|
|
1232
1168
|
.tableCard {
|
|
1233
|
-
background-color: var(--
|
|
1234
|
-
border:
|
|
1235
|
-
border-radius: var(--radius);
|
|
1169
|
+
background-color: var(--item-color, #fff);
|
|
1170
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1171
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1236
1172
|
padding: 16px;
|
|
1237
1173
|
cursor: pointer;
|
|
1238
|
-
transition:
|
|
1174
|
+
transition: border-color 0.2s ease;
|
|
1239
1175
|
display: flex;
|
|
1240
1176
|
flex-direction: column;
|
|
1241
1177
|
align-items: center;
|
|
@@ -1243,24 +1179,21 @@
|
|
|
1243
1179
|
position: relative;
|
|
1244
1180
|
|
|
1245
1181
|
&:hover {
|
|
1246
|
-
border-color: var(--primary-color);
|
|
1247
|
-
background-color: var(--tertiary-color);
|
|
1248
|
-
box-shadow: var(--box-shadow-small);
|
|
1182
|
+
border-color: var(--primary-color, #2c5282);
|
|
1249
1183
|
}
|
|
1250
1184
|
|
|
1251
1185
|
&.selected {
|
|
1252
|
-
border-color: var(--primary-color);
|
|
1253
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1186
|
+
border-color: var(--primary-color, #2c5282);
|
|
1254
1187
|
}
|
|
1255
1188
|
|
|
1256
1189
|
svg {
|
|
1257
|
-
color: var(--primary-color);
|
|
1190
|
+
color: var(--primary-color, #2c5282);
|
|
1258
1191
|
}
|
|
1259
1192
|
|
|
1260
1193
|
span {
|
|
1261
1194
|
font-size: 0.875rem;
|
|
1262
1195
|
font-weight: 500;
|
|
1263
|
-
color: var(--header-color);
|
|
1196
|
+
color: var(--header-color, #212930);
|
|
1264
1197
|
text-align: center;
|
|
1265
1198
|
}
|
|
1266
1199
|
|
|
@@ -1268,7 +1201,7 @@
|
|
|
1268
1201
|
position: absolute;
|
|
1269
1202
|
top: 8px;
|
|
1270
1203
|
right: 8px;
|
|
1271
|
-
color: var(--primary-color);
|
|
1204
|
+
color: var(--primary-color, #2c5282);
|
|
1272
1205
|
}
|
|
1273
1206
|
}
|
|
1274
1207
|
|
|
@@ -1277,16 +1210,16 @@
|
|
|
1277
1210
|
.noColumns {
|
|
1278
1211
|
text-align: center;
|
|
1279
1212
|
padding: 48px 24px;
|
|
1280
|
-
color: var(--paragraph-color);
|
|
1213
|
+
color: var(--paragraph-color, #221e33);
|
|
1281
1214
|
|
|
1282
1215
|
svg {
|
|
1283
|
-
color: var(--paragraph-color);
|
|
1216
|
+
color: var(--paragraph-color, #221e33);
|
|
1284
1217
|
margin-bottom: 16px;
|
|
1285
1218
|
}
|
|
1286
1219
|
|
|
1287
1220
|
h3 {
|
|
1288
1221
|
margin: 0 0 8px 0;
|
|
1289
|
-
color: var(--header-color);
|
|
1222
|
+
color: var(--header-color, #212930);
|
|
1290
1223
|
}
|
|
1291
1224
|
|
|
1292
1225
|
p {
|
|
@@ -1302,7 +1235,7 @@
|
|
|
1302
1235
|
p {
|
|
1303
1236
|
margin: 0 0 12px 0;
|
|
1304
1237
|
font-size: 1rem;
|
|
1305
|
-
color: var(--paragraph-color);
|
|
1238
|
+
color: var(--paragraph-color, #221e33);
|
|
1306
1239
|
}
|
|
1307
1240
|
}
|
|
1308
1241
|
|
|
@@ -1314,14 +1247,14 @@
|
|
|
1314
1247
|
.linkButton {
|
|
1315
1248
|
background: none;
|
|
1316
1249
|
border: none;
|
|
1317
|
-
color: var(--primary-color);
|
|
1250
|
+
color: var(--primary-color, #2c5282);
|
|
1318
1251
|
font-size: 0.875rem;
|
|
1319
1252
|
font-weight: 500;
|
|
1320
1253
|
cursor: pointer;
|
|
1321
1254
|
transition: all 0.2s ease;
|
|
1322
1255
|
|
|
1323
1256
|
&:hover {
|
|
1324
|
-
color: var(--primary-color);
|
|
1257
|
+
color: var(--primary-color, #2c5282);
|
|
1325
1258
|
text-decoration: underline;
|
|
1326
1259
|
}
|
|
1327
1260
|
}
|
|
@@ -1333,10 +1266,10 @@
|
|
|
1333
1266
|
}
|
|
1334
1267
|
|
|
1335
1268
|
.columnCategory {
|
|
1336
|
-
background-color: var(--bg-color);
|
|
1337
|
-
border-radius: var(--radius);
|
|
1269
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1270
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1338
1271
|
padding: 16px; // Reduced from 20px
|
|
1339
|
-
border: 1px solid var(--border-color);
|
|
1272
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1340
1273
|
|
|
1341
1274
|
.categoryHeader {
|
|
1342
1275
|
display: flex;
|
|
@@ -1345,19 +1278,19 @@
|
|
|
1345
1278
|
margin-bottom: 16px;
|
|
1346
1279
|
|
|
1347
1280
|
svg {
|
|
1348
|
-
color: var(--primary-color);
|
|
1281
|
+
color: var(--primary-color, #2c5282);
|
|
1349
1282
|
}
|
|
1350
1283
|
|
|
1351
1284
|
h4 {
|
|
1352
1285
|
margin: 0;
|
|
1353
1286
|
font-size: 1rem;
|
|
1354
1287
|
font-weight: 600;
|
|
1355
|
-
color: var(--header-color);
|
|
1288
|
+
color: var(--header-color, #212930);
|
|
1356
1289
|
}
|
|
1357
1290
|
|
|
1358
1291
|
span {
|
|
1359
1292
|
font-size: 0.875rem;
|
|
1360
|
-
color: var(--paragraph-color);
|
|
1293
|
+
color: var(--paragraph-color, #221e33);
|
|
1361
1294
|
}
|
|
1362
1295
|
}
|
|
1363
1296
|
}
|
|
@@ -1374,48 +1307,53 @@
|
|
|
1374
1307
|
.columnItem {
|
|
1375
1308
|
display: flex;
|
|
1376
1309
|
align-items: center;
|
|
1377
|
-
gap:
|
|
1378
|
-
padding: 6px 10px;
|
|
1379
|
-
background-color: var(--
|
|
1380
|
-
border
|
|
1310
|
+
gap: 8px;
|
|
1311
|
+
padding: 6px 10px;
|
|
1312
|
+
background-color: var(--item-color, #fff);
|
|
1313
|
+
border: 1px solid transparent;
|
|
1314
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1381
1315
|
cursor: pointer;
|
|
1382
|
-
transition:
|
|
1316
|
+
transition: border-color 0.2s ease;
|
|
1383
1317
|
|
|
1384
1318
|
&:hover {
|
|
1385
|
-
|
|
1319
|
+
border-color: var(--border-color, #e1e1e1);
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
&:focus-within {
|
|
1323
|
+
border-color: var(--primary-color, #2c5282);
|
|
1386
1324
|
}
|
|
1387
1325
|
|
|
1388
1326
|
input[type='checkbox'] {
|
|
1389
1327
|
width: 16px;
|
|
1390
1328
|
height: 16px;
|
|
1391
1329
|
cursor: pointer;
|
|
1392
|
-
accent-color: var(--primary-color);
|
|
1330
|
+
accent-color: var(--primary-color, #2c5282);
|
|
1393
1331
|
}
|
|
1394
1332
|
|
|
1395
1333
|
.columnName {
|
|
1396
1334
|
flex: 1;
|
|
1397
1335
|
font-size: 0.875rem;
|
|
1398
1336
|
font-weight: 500;
|
|
1399
|
-
color: var(--header-color);
|
|
1337
|
+
color: var(--header-color, #212930);
|
|
1400
1338
|
}
|
|
1401
1339
|
|
|
1402
1340
|
.columnType {
|
|
1403
1341
|
font-size: 0.75rem;
|
|
1404
|
-
color: var(--paragraph-color);
|
|
1342
|
+
color: var(--paragraph-color, #221e33);
|
|
1405
1343
|
padding: 2px 8px;
|
|
1406
|
-
background-color: var(--bg-color);
|
|
1407
|
-
border-radius: var(--radius);
|
|
1344
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1345
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1408
1346
|
}
|
|
1409
1347
|
}
|
|
1410
1348
|
|
|
1411
1349
|
.selectedSummary {
|
|
1412
1350
|
margin-top: 24px;
|
|
1413
1351
|
padding: 16px;
|
|
1414
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1415
|
-
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1416
|
-
border-radius: var(--radius);
|
|
1352
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
1353
|
+
border: 1px solid rgba(var(--primary-rgb, 44, 82, 130), 0.2);
|
|
1354
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1417
1355
|
font-size: 0.875rem;
|
|
1418
|
-
color: var(--primary-color);
|
|
1356
|
+
color: var(--primary-color, #2c5282);
|
|
1419
1357
|
}
|
|
1420
1358
|
|
|
1421
1359
|
.selectedSummaryHeader {
|
|
@@ -1428,21 +1366,21 @@
|
|
|
1428
1366
|
.expandToggle {
|
|
1429
1367
|
background: none;
|
|
1430
1368
|
border: none;
|
|
1431
|
-
color: var(--primary-color);
|
|
1369
|
+
color: var(--primary-color, #2c5282);
|
|
1432
1370
|
cursor: pointer;
|
|
1433
1371
|
padding: 4px;
|
|
1434
|
-
border-radius: var(--radius);
|
|
1372
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1435
1373
|
transition: all 0.2s ease;
|
|
1436
1374
|
|
|
1437
1375
|
&:hover {
|
|
1438
|
-
background-color: rgba(var(--primary-rgb), 0.1);
|
|
1376
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1439
1377
|
}
|
|
1440
1378
|
}
|
|
1441
1379
|
|
|
1442
1380
|
.selectedFieldsList {
|
|
1443
1381
|
margin-top: 12px;
|
|
1444
1382
|
padding-top: 12px;
|
|
1445
|
-
border-top: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1383
|
+
border-top: 1px solid rgba(var(--primary-rgb, 44, 82, 130), 0.2);
|
|
1446
1384
|
display: grid;
|
|
1447
1385
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
1448
1386
|
gap: 8px;
|
|
@@ -1453,23 +1391,23 @@
|
|
|
1453
1391
|
align-items: center;
|
|
1454
1392
|
font-size: 0.75rem;
|
|
1455
1393
|
padding: 6px 8px;
|
|
1456
|
-
background-color: rgba(var(--primary-rgb), 0.08);
|
|
1457
|
-
border-radius: var(--radius);
|
|
1458
|
-
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1394
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.08);
|
|
1395
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1396
|
+
border: 1px solid rgba(var(--primary-rgb, 44, 82, 130), 0.2);
|
|
1459
1397
|
}
|
|
1460
1398
|
|
|
1461
1399
|
.selectedFieldTable {
|
|
1462
|
-
color: var(--paragraph-color);
|
|
1400
|
+
color: var(--paragraph-color, #221e33);
|
|
1463
1401
|
font-weight: 500;
|
|
1464
1402
|
}
|
|
1465
1403
|
|
|
1466
1404
|
.selectedFieldDivider {
|
|
1467
|
-
color: var(--paragraph-color);
|
|
1405
|
+
color: var(--paragraph-color, #221e33);
|
|
1468
1406
|
margin: 0 2px;
|
|
1469
1407
|
}
|
|
1470
1408
|
|
|
1471
1409
|
.selectedFieldColumn {
|
|
1472
|
-
color: var(--primary-color);
|
|
1410
|
+
color: var(--primary-color, #2c5282);
|
|
1473
1411
|
font-weight: 500;
|
|
1474
1412
|
}
|
|
1475
1413
|
|
|
@@ -1480,9 +1418,9 @@
|
|
|
1480
1418
|
}
|
|
1481
1419
|
|
|
1482
1420
|
.tableSection {
|
|
1483
|
-
background-color: var(--tertiary-color);
|
|
1484
|
-
border: 1px solid var(--border-color);
|
|
1485
|
-
border-radius: var(--radius);
|
|
1421
|
+
background-color: var(--tertiary-color, #fff);
|
|
1422
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1423
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1486
1424
|
padding: 16px;
|
|
1487
1425
|
|
|
1488
1426
|
.tableSectionHeader {
|
|
@@ -1491,19 +1429,19 @@
|
|
|
1491
1429
|
justify-content: space-between;
|
|
1492
1430
|
margin-bottom: 16px;
|
|
1493
1431
|
padding-bottom: 12px;
|
|
1494
|
-
border-bottom: 1px solid var(--border-color);
|
|
1432
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
1495
1433
|
|
|
1496
1434
|
h3 {
|
|
1497
1435
|
margin: 0;
|
|
1498
1436
|
font-size: 1.125rem;
|
|
1499
1437
|
font-weight: 600;
|
|
1500
|
-
color: var(--header-color);
|
|
1438
|
+
color: var(--header-color, #212930);
|
|
1501
1439
|
line-height: 1.4;
|
|
1502
1440
|
|
|
1503
1441
|
// Style for disambiguated table names
|
|
1504
1442
|
.tableDisambiguation {
|
|
1505
1443
|
font-weight: 400;
|
|
1506
|
-
color: var(--paragraph-color);
|
|
1444
|
+
color: var(--paragraph-color, #221e33);
|
|
1507
1445
|
font-size: 0.9rem;
|
|
1508
1446
|
margin-left: 4px;
|
|
1509
1447
|
}
|
|
@@ -1511,10 +1449,10 @@
|
|
|
1511
1449
|
|
|
1512
1450
|
.tableColumnCount {
|
|
1513
1451
|
font-size: 0.875rem;
|
|
1514
|
-
color: var(--paragraph-color);
|
|
1515
|
-
background-color: var(--bg-color);
|
|
1452
|
+
color: var(--paragraph-color, #221e33);
|
|
1453
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1516
1454
|
padding: 4px 8px;
|
|
1517
|
-
border-radius: var(--radius);
|
|
1455
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1518
1456
|
}
|
|
1519
1457
|
}
|
|
1520
1458
|
}
|
|
@@ -1522,29 +1460,34 @@
|
|
|
1522
1460
|
// Help boxes
|
|
1523
1461
|
.helpBox {
|
|
1524
1462
|
display: flex;
|
|
1525
|
-
gap:
|
|
1526
|
-
padding: 16px;
|
|
1527
|
-
background-color:
|
|
1528
|
-
|
|
1529
|
-
|
|
1463
|
+
gap: 12px;
|
|
1464
|
+
padding: 14px 16px;
|
|
1465
|
+
background-color: var(--item-color, #fff);
|
|
1466
|
+
/* Was rgba(var(--primary-color), …): rgba() cannot take a hex through a
|
|
1467
|
+
custom property, so both declarations were silently dropped. */
|
|
1468
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1469
|
+
border-left: 3px solid var(--primary-color, #2c5282);
|
|
1470
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1530
1471
|
margin-bottom: 24px;
|
|
1531
1472
|
|
|
1532
1473
|
svg {
|
|
1533
|
-
color: var(--primary-color);
|
|
1474
|
+
color: var(--primary-color, #2c5282);
|
|
1534
1475
|
flex-shrink: 0;
|
|
1535
1476
|
}
|
|
1536
1477
|
|
|
1537
1478
|
h4 {
|
|
1538
|
-
margin: 0 0
|
|
1539
|
-
font-size:
|
|
1479
|
+
margin: 0 0 4px 0;
|
|
1480
|
+
font-size: 0.75rem;
|
|
1540
1481
|
font-weight: 600;
|
|
1541
|
-
|
|
1482
|
+
letter-spacing: 0.06em;
|
|
1483
|
+
text-transform: uppercase;
|
|
1484
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
1542
1485
|
}
|
|
1543
1486
|
|
|
1544
1487
|
p {
|
|
1545
1488
|
margin: 0;
|
|
1546
1489
|
font-size: 0.875rem;
|
|
1547
|
-
color: var(--paragraph-color);
|
|
1490
|
+
color: var(--paragraph-color, #221e33);
|
|
1548
1491
|
line-height: 1.5;
|
|
1549
1492
|
}
|
|
1550
1493
|
}
|
|
@@ -1554,12 +1497,12 @@
|
|
|
1554
1497
|
text-align: center;
|
|
1555
1498
|
margin-top: 32px;
|
|
1556
1499
|
padding-top: 32px;
|
|
1557
|
-
border-top: 1px solid var(--border-color);
|
|
1500
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
1558
1501
|
|
|
1559
1502
|
p {
|
|
1560
1503
|
margin: 0 0 16px 0;
|
|
1561
1504
|
font-size: 0.875rem;
|
|
1562
|
-
color: var(--paragraph-color);
|
|
1505
|
+
color: var(--paragraph-color, #221e33);
|
|
1563
1506
|
}
|
|
1564
1507
|
}
|
|
1565
1508
|
|
|
@@ -1569,9 +1512,9 @@
|
|
|
1569
1512
|
.filterOperatorContainer {
|
|
1570
1513
|
margin-bottom: 24px;
|
|
1571
1514
|
padding: 20px;
|
|
1572
|
-
background-color: var(--tertiary-color);
|
|
1573
|
-
border: 1px solid var(--border-color);
|
|
1574
|
-
border-radius: var(--radius);
|
|
1515
|
+
background-color: var(--tertiary-color, #fff);
|
|
1516
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1517
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1575
1518
|
display: flex;
|
|
1576
1519
|
justify-content: space-between;
|
|
1577
1520
|
align-items: center;
|
|
@@ -1586,7 +1529,7 @@
|
|
|
1586
1529
|
margin-bottom: 12px;
|
|
1587
1530
|
font-size: 1rem;
|
|
1588
1531
|
font-weight: 600;
|
|
1589
|
-
color: var(--header-color);
|
|
1532
|
+
color: var(--header-color, #212930);
|
|
1590
1533
|
}
|
|
1591
1534
|
}
|
|
1592
1535
|
|
|
@@ -1597,25 +1540,25 @@
|
|
|
1597
1540
|
|
|
1598
1541
|
.operatorOption {
|
|
1599
1542
|
padding: 16px 20px;
|
|
1600
|
-
border:
|
|
1601
|
-
border-radius: var(--radius);
|
|
1543
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1544
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1602
1545
|
cursor: pointer;
|
|
1603
1546
|
transition: all 0.2s ease;
|
|
1604
|
-
background-color: var(--tertiary-color);
|
|
1547
|
+
background-color: var(--tertiary-color, #fff);
|
|
1605
1548
|
text-align: center;
|
|
1606
1549
|
flex: 1;
|
|
1607
1550
|
|
|
1608
1551
|
&:hover {
|
|
1609
|
-
border-color: var(--primary-color);
|
|
1610
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1552
|
+
border-color: var(--primary-color, #2c5282);
|
|
1553
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
1611
1554
|
}
|
|
1612
1555
|
|
|
1613
1556
|
&.operatorOptionSelected {
|
|
1614
|
-
border-color: var(--primary-color);
|
|
1615
|
-
background-color: rgba(var(--primary-rgb), 0.1);
|
|
1557
|
+
border-color: var(--primary-color, #2c5282);
|
|
1558
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1616
1559
|
|
|
1617
1560
|
.operatorName {
|
|
1618
|
-
color: var(--primary-color);
|
|
1561
|
+
color: var(--primary-color, #2c5282);
|
|
1619
1562
|
}
|
|
1620
1563
|
}
|
|
1621
1564
|
}
|
|
@@ -1623,13 +1566,13 @@
|
|
|
1623
1566
|
.operatorName {
|
|
1624
1567
|
font-size: 1rem;
|
|
1625
1568
|
font-weight: 600;
|
|
1626
|
-
color: var(--header-color);
|
|
1569
|
+
color: var(--header-color, #212930);
|
|
1627
1570
|
margin-bottom: 4px;
|
|
1628
1571
|
}
|
|
1629
1572
|
|
|
1630
1573
|
.operatorDescription {
|
|
1631
1574
|
font-size: 0.875rem;
|
|
1632
|
-
color: var(--paragraph-color);
|
|
1575
|
+
color: var(--paragraph-color, #221e33);
|
|
1633
1576
|
line-height: 1.3;
|
|
1634
1577
|
}
|
|
1635
1578
|
|
|
@@ -1641,16 +1584,16 @@
|
|
|
1641
1584
|
// Filter groups
|
|
1642
1585
|
.filterGroup {
|
|
1643
1586
|
margin-bottom: 24px;
|
|
1644
|
-
background-color: var(--tertiary-color);
|
|
1645
|
-
border: 1px solid var(--border-color);
|
|
1646
|
-
border-radius: var(--radius);
|
|
1587
|
+
background-color: var(--tertiary-color, #fff);
|
|
1588
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1589
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1647
1590
|
overflow: hidden;
|
|
1648
1591
|
}
|
|
1649
1592
|
|
|
1650
1593
|
.filterGroupHeader {
|
|
1651
|
-
background-color: var(--bg-color);
|
|
1594
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1652
1595
|
padding: 16px 20px;
|
|
1653
|
-
border-bottom: 1px solid var(--border-color);
|
|
1596
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
1654
1597
|
display: flex;
|
|
1655
1598
|
justify-content: space-between;
|
|
1656
1599
|
align-items: center;
|
|
@@ -1667,7 +1610,7 @@
|
|
|
1667
1610
|
margin: 0;
|
|
1668
1611
|
font-size: 1.125rem;
|
|
1669
1612
|
font-weight: 600;
|
|
1670
|
-
color: var(--header-color);
|
|
1613
|
+
color: var(--header-color, #212930);
|
|
1671
1614
|
}
|
|
1672
1615
|
}
|
|
1673
1616
|
|
|
@@ -1679,40 +1622,40 @@
|
|
|
1679
1622
|
label {
|
|
1680
1623
|
font-size: 0.875rem;
|
|
1681
1624
|
font-weight: 500;
|
|
1682
|
-
color: var(--paragraph-color);
|
|
1625
|
+
color: var(--paragraph-color, #221e33);
|
|
1683
1626
|
}
|
|
1684
1627
|
}
|
|
1685
1628
|
|
|
1686
1629
|
.operatorButtonGroup {
|
|
1687
1630
|
display: flex;
|
|
1688
|
-
border-radius: var(--radius);
|
|
1631
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1689
1632
|
overflow: hidden;
|
|
1690
|
-
border: 1px solid var(--border-color);
|
|
1633
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1691
1634
|
}
|
|
1692
1635
|
|
|
1693
1636
|
.operatorButton {
|
|
1694
1637
|
padding: 8px 16px;
|
|
1695
|
-
background-color: var(--tertiary-color);
|
|
1638
|
+
background-color: var(--tertiary-color, #fff);
|
|
1696
1639
|
border: none;
|
|
1697
1640
|
font-size: 0.875rem;
|
|
1698
1641
|
font-weight: 500;
|
|
1699
|
-
color: var(--paragraph-color);
|
|
1642
|
+
color: var(--paragraph-color, #221e33);
|
|
1700
1643
|
cursor: pointer;
|
|
1701
1644
|
transition: all 0.2s ease;
|
|
1702
|
-
border-right: 1px solid var(--border-color);
|
|
1645
|
+
border-right: 1px solid var(--border-color, #e1e1e1);
|
|
1703
1646
|
|
|
1704
1647
|
&:last-child {
|
|
1705
1648
|
border-right: none;
|
|
1706
1649
|
}
|
|
1707
1650
|
|
|
1708
1651
|
&:hover {
|
|
1709
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1710
|
-
color: var(--primary-color);
|
|
1652
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
1653
|
+
color: var(--primary-color, #2c5282);
|
|
1711
1654
|
}
|
|
1712
1655
|
|
|
1713
1656
|
&.operatorButtonSelected {
|
|
1714
|
-
background-color: var(--primary-color);
|
|
1715
|
-
color: var(--tertiary-color);
|
|
1657
|
+
background-color: var(--primary-color, #2c5282);
|
|
1658
|
+
color: var(--tertiary-color, #fff);
|
|
1716
1659
|
}
|
|
1717
1660
|
}
|
|
1718
1661
|
|
|
@@ -1728,9 +1671,9 @@
|
|
|
1728
1671
|
}
|
|
1729
1672
|
|
|
1730
1673
|
.filterCriterion {
|
|
1731
|
-
background-color: var(--bg-color);
|
|
1732
|
-
border: 1px solid var(--border-color);
|
|
1733
|
-
border-radius: var(--radius);
|
|
1674
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1675
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1676
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1734
1677
|
margin-bottom: 16px;
|
|
1735
1678
|
overflow: hidden;
|
|
1736
1679
|
|
|
@@ -1741,8 +1684,8 @@
|
|
|
1741
1684
|
|
|
1742
1685
|
.filterCriterionHeader {
|
|
1743
1686
|
padding: 12px 16px;
|
|
1744
|
-
background-color: var(--tertiary-color);
|
|
1745
|
-
border-bottom: 1px solid var(--border-color);
|
|
1687
|
+
background-color: var(--tertiary-color, #fff);
|
|
1688
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
1746
1689
|
display: flex;
|
|
1747
1690
|
justify-content: space-between;
|
|
1748
1691
|
align-items: center;
|
|
@@ -1751,7 +1694,7 @@
|
|
|
1751
1694
|
margin: 0;
|
|
1752
1695
|
font-size: 0.875rem;
|
|
1753
1696
|
font-weight: 500;
|
|
1754
|
-
color: var(--header-color);
|
|
1697
|
+
color: var(--header-color, #212930);
|
|
1755
1698
|
}
|
|
1756
1699
|
}
|
|
1757
1700
|
|
|
@@ -1776,7 +1719,7 @@
|
|
|
1776
1719
|
label {
|
|
1777
1720
|
font-size: 0.75rem;
|
|
1778
1721
|
font-weight: 500;
|
|
1779
|
-
color: var(--paragraph-color);
|
|
1722
|
+
color: var(--paragraph-color, #221e33);
|
|
1780
1723
|
text-transform: uppercase;
|
|
1781
1724
|
letter-spacing: 0.5px;
|
|
1782
1725
|
}
|
|
@@ -1784,59 +1727,59 @@
|
|
|
1784
1727
|
|
|
1785
1728
|
.filterSelect {
|
|
1786
1729
|
padding: 8px 12px;
|
|
1787
|
-
border: 1px solid var(--border-color);
|
|
1788
|
-
border-radius: var(--radius);
|
|
1789
|
-
background-color: var(--tertiary-color);
|
|
1730
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1731
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1732
|
+
background-color: var(--tertiary-color, #fff);
|
|
1790
1733
|
font-size: 0.875rem;
|
|
1791
|
-
color: var(--header-color);
|
|
1734
|
+
color: var(--header-color, #212930);
|
|
1792
1735
|
cursor: pointer;
|
|
1793
1736
|
|
|
1794
1737
|
&:focus {
|
|
1795
1738
|
outline: none;
|
|
1796
|
-
border-color: var(--primary-color);
|
|
1797
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1739
|
+
border-color: var(--primary-color, #2c5282);
|
|
1740
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1798
1741
|
}
|
|
1799
1742
|
}
|
|
1800
1743
|
|
|
1801
1744
|
.filterInput {
|
|
1802
1745
|
padding: 8px 12px;
|
|
1803
|
-
border: 1px solid var(--border-color);
|
|
1804
|
-
border-radius: var(--radius);
|
|
1746
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1747
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1805
1748
|
font-size: 0.875rem;
|
|
1806
|
-
color: var(--header-color);
|
|
1749
|
+
color: var(--header-color, #212930);
|
|
1807
1750
|
|
|
1808
1751
|
&:focus {
|
|
1809
1752
|
outline: none;
|
|
1810
|
-
border-color: var(--primary-color);
|
|
1811
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1753
|
+
border-color: var(--primary-color, #2c5282);
|
|
1754
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1812
1755
|
}
|
|
1813
1756
|
|
|
1814
1757
|
&::placeholder {
|
|
1815
|
-
color: var(--paragraph-color);
|
|
1758
|
+
color: var(--paragraph-color, #221e33);
|
|
1816
1759
|
}
|
|
1817
1760
|
}
|
|
1818
1761
|
|
|
1819
1762
|
.removeJoinBtn {
|
|
1820
1763
|
background: none;
|
|
1821
1764
|
border: none;
|
|
1822
|
-
color: var(--approval-color);
|
|
1765
|
+
color: var(--approval-color, #c53030);
|
|
1823
1766
|
font-size: 1.25rem;
|
|
1824
1767
|
cursor: pointer;
|
|
1825
1768
|
padding: 4px 8px;
|
|
1826
|
-
border-radius: var(--radius);
|
|
1769
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1827
1770
|
transition: all 0.2s ease;
|
|
1828
1771
|
flex-shrink: 0;
|
|
1829
1772
|
|
|
1830
1773
|
&:hover {
|
|
1831
|
-
background-color: rgba(var(--approval-color), 0.1);
|
|
1774
|
+
background-color: rgba(var(--approval-color, #c53030), 0.1);
|
|
1832
1775
|
}
|
|
1833
1776
|
}
|
|
1834
1777
|
|
|
1835
1778
|
.emptyFilterGroup {
|
|
1836
1779
|
padding: 40px 20px;
|
|
1837
1780
|
text-align: center;
|
|
1838
|
-
color: var(--paragraph-color);
|
|
1839
|
-
background-color: var(--bg-color) er;
|
|
1781
|
+
color: var(--paragraph-color, #221e33);
|
|
1782
|
+
background-color: var(--bg-color, #f7f7f8) er;
|
|
1840
1783
|
|
|
1841
1784
|
p {
|
|
1842
1785
|
margin: 0;
|
|
@@ -1854,27 +1797,34 @@
|
|
|
1854
1797
|
display: flex;
|
|
1855
1798
|
align-items: center;
|
|
1856
1799
|
justify-content: space-between;
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
border
|
|
1800
|
+
gap: 16px;
|
|
1801
|
+
padding: 12px 16px;
|
|
1802
|
+
background-color: var(--item-color, #fff);
|
|
1803
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1804
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1861
1805
|
margin-bottom: 16px;
|
|
1862
|
-
transition:
|
|
1806
|
+
transition: border-color 0.2s ease;
|
|
1863
1807
|
|
|
1864
1808
|
&:hover {
|
|
1865
|
-
|
|
1809
|
+
border-color: var(--paragraph-color, #221e33);
|
|
1866
1810
|
cursor: pointer;
|
|
1867
1811
|
}
|
|
1868
1812
|
|
|
1869
1813
|
h3 {
|
|
1870
1814
|
margin: 0;
|
|
1871
|
-
font-size:
|
|
1815
|
+
font-size: 0.75rem;
|
|
1872
1816
|
font-weight: 600;
|
|
1873
|
-
|
|
1817
|
+
letter-spacing: 0.06em;
|
|
1818
|
+
text-transform: uppercase;
|
|
1819
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
1874
1820
|
display: flex;
|
|
1875
1821
|
align-items: center;
|
|
1876
1822
|
gap: 8px;
|
|
1877
1823
|
cursor: pointer;
|
|
1824
|
+
|
|
1825
|
+
svg {
|
|
1826
|
+
color: var(--primary-color, #2c5282);
|
|
1827
|
+
}
|
|
1878
1828
|
}
|
|
1879
1829
|
}
|
|
1880
1830
|
|
|
@@ -1889,12 +1839,12 @@
|
|
|
1889
1839
|
align-items: center;
|
|
1890
1840
|
gap: 8px;
|
|
1891
1841
|
font-size: 0.875rem;
|
|
1892
|
-
color: var(--paragraph-color);
|
|
1842
|
+
color: var(--paragraph-color, #221e33);
|
|
1893
1843
|
cursor: pointer;
|
|
1894
1844
|
transition: all 0.2s ease;
|
|
1895
1845
|
|
|
1896
1846
|
&:hover {
|
|
1897
|
-
color: var(--primary-color);
|
|
1847
|
+
color: var(--primary-color, #2c5282);
|
|
1898
1848
|
}
|
|
1899
1849
|
|
|
1900
1850
|
svg {
|
|
@@ -1914,15 +1864,15 @@
|
|
|
1914
1864
|
}
|
|
1915
1865
|
|
|
1916
1866
|
.sortingItem {
|
|
1917
|
-
background-color: var(--tertiary-color);
|
|
1918
|
-
border: 1px solid var(--border-color);
|
|
1919
|
-
border-radius: var(--radius);
|
|
1867
|
+
background-color: var(--tertiary-color, #fff);
|
|
1868
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1869
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1920
1870
|
padding: 16px 20px;
|
|
1921
1871
|
transition: all 0.2s ease;
|
|
1922
1872
|
|
|
1923
1873
|
&:hover {
|
|
1924
|
-
border-color: var(--primary-color);
|
|
1925
|
-
box-shadow: var(--box-shadow-small);
|
|
1874
|
+
border-color: var(--primary-color, #2c5282);
|
|
1875
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
1926
1876
|
}
|
|
1927
1877
|
}
|
|
1928
1878
|
|
|
@@ -1936,7 +1886,7 @@
|
|
|
1936
1886
|
margin: 0;
|
|
1937
1887
|
font-size: 0.875rem;
|
|
1938
1888
|
font-weight: 600;
|
|
1939
|
-
color: var(--header-color);
|
|
1889
|
+
color: var(--header-color, #212930);
|
|
1940
1890
|
}
|
|
1941
1891
|
}
|
|
1942
1892
|
|
|
@@ -1960,7 +1910,7 @@
|
|
|
1960
1910
|
label {
|
|
1961
1911
|
font-size: 0.75rem;
|
|
1962
1912
|
font-weight: 500;
|
|
1963
|
-
color: var(--paragraph-color);
|
|
1913
|
+
color: var(--paragraph-color, #221e33);
|
|
1964
1914
|
text-transform: uppercase;
|
|
1965
1915
|
letter-spacing: 0.5px;
|
|
1966
1916
|
}
|
|
@@ -1968,33 +1918,33 @@
|
|
|
1968
1918
|
|
|
1969
1919
|
.sortingSelect {
|
|
1970
1920
|
padding: 8px 12px;
|
|
1971
|
-
border: 1px solid var(--border-color);
|
|
1972
|
-
border-radius: var(--radius);
|
|
1973
|
-
background-color: var(--bg-color);
|
|
1921
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1922
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1923
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
1974
1924
|
font-size: 0.875rem;
|
|
1975
|
-
color: var(--header-color);
|
|
1925
|
+
color: var(--header-color, #212930);
|
|
1976
1926
|
cursor: pointer;
|
|
1977
1927
|
transition: all 0.2s ease;
|
|
1978
1928
|
|
|
1979
1929
|
&:focus {
|
|
1980
1930
|
outline: none;
|
|
1981
|
-
border-color: var(--primary-color);
|
|
1982
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1931
|
+
border-color: var(--primary-color, #2c5282);
|
|
1932
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
1983
1933
|
}
|
|
1984
1934
|
|
|
1985
1935
|
&:hover {
|
|
1986
|
-
border-color: var(--primary-color);
|
|
1936
|
+
border-color: var(--primary-color, #2c5282);
|
|
1987
1937
|
}
|
|
1988
1938
|
}
|
|
1989
1939
|
|
|
1990
1940
|
.removeSortBtn {
|
|
1991
1941
|
background: none;
|
|
1992
1942
|
border: none;
|
|
1993
|
-
color: var(--approval-color);
|
|
1943
|
+
color: var(--approval-color, #c53030);
|
|
1994
1944
|
font-size: 1.25rem;
|
|
1995
1945
|
cursor: pointer;
|
|
1996
1946
|
padding: 8px;
|
|
1997
|
-
border-radius: var(--radius);
|
|
1947
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1998
1948
|
transition: all 0.2s ease;
|
|
1999
1949
|
width: 36px;
|
|
2000
1950
|
height: 36px;
|
|
@@ -2003,7 +1953,7 @@
|
|
|
2003
1953
|
justify-content: center;
|
|
2004
1954
|
|
|
2005
1955
|
&:hover {
|
|
2006
|
-
background-color: rgba(var(--approval-color), 0.1);
|
|
1956
|
+
background-color: rgba(var(--approval-color, #c53030), 0.1);
|
|
2007
1957
|
transform: scale(1.1);
|
|
2008
1958
|
}
|
|
2009
1959
|
}
|
|
@@ -2011,8 +1961,8 @@
|
|
|
2011
1961
|
.joinGrid {
|
|
2012
1962
|
display: grid;
|
|
2013
1963
|
grid-template-columns: 1fr 1fr;
|
|
2014
|
-
gap: var(--padding);
|
|
2015
|
-
padding: var(--padding);
|
|
1964
|
+
gap: var(--padding, 1rem);
|
|
1965
|
+
padding: var(--padding, 1rem);
|
|
2016
1966
|
|
|
2017
1967
|
@media (max-width: 768px) {
|
|
2018
1968
|
grid-template-columns: 1fr;
|
|
@@ -2032,7 +1982,7 @@
|
|
|
2032
1982
|
label {
|
|
2033
1983
|
font-size: 0.75rem;
|
|
2034
1984
|
font-weight: 600;
|
|
2035
|
-
color: var(--paragraph-color);
|
|
1985
|
+
color: var(--paragraph-color, #221e33);
|
|
2036
1986
|
text-transform: uppercase;
|
|
2037
1987
|
letter-spacing: 0.5px;
|
|
2038
1988
|
}
|
|
@@ -2040,48 +1990,48 @@
|
|
|
2040
1990
|
|
|
2041
1991
|
.selectControl {
|
|
2042
1992
|
padding: 8px 12px;
|
|
2043
|
-
border: 1px solid var(--border-color);
|
|
2044
|
-
border-radius: var(--radius);
|
|
2045
|
-
background-color: var(--tertiary-color);
|
|
1993
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
1994
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
1995
|
+
background-color: var(--tertiary-color, #fff);
|
|
2046
1996
|
font-size: 0.875rem;
|
|
2047
|
-
color: var(--header-color);
|
|
1997
|
+
color: var(--header-color, #212930);
|
|
2048
1998
|
cursor: pointer;
|
|
2049
1999
|
transition: all 0.2s ease;
|
|
2050
2000
|
|
|
2051
2001
|
&:focus {
|
|
2052
2002
|
outline: none;
|
|
2053
|
-
border-color: var(--primary-color);
|
|
2054
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
2003
|
+
border-color: var(--primary-color, #2c5282);
|
|
2004
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
2055
2005
|
}
|
|
2056
2006
|
|
|
2057
2007
|
&:hover {
|
|
2058
|
-
border-color: var(--primary-color);
|
|
2008
|
+
border-color: var(--primary-color, #2c5282);
|
|
2059
2009
|
}
|
|
2060
2010
|
|
|
2061
2011
|
optgroup {
|
|
2062
2012
|
font-weight: 600;
|
|
2063
|
-
color: var(--header-color);
|
|
2013
|
+
color: var(--header-color, #212930);
|
|
2064
2014
|
}
|
|
2065
2015
|
|
|
2066
2016
|
option {
|
|
2067
2017
|
padding: 4px 8px;
|
|
2068
|
-
color: var(--paragraph-color);
|
|
2018
|
+
color: var(--paragraph-color, #221e33);
|
|
2069
2019
|
}
|
|
2070
2020
|
}
|
|
2071
2021
|
|
|
2072
2022
|
.removeJoinBtn {
|
|
2073
2023
|
background: none;
|
|
2074
2024
|
border: none;
|
|
2075
|
-
color: var(--approval-color);
|
|
2025
|
+
color: var(--approval-color, #c53030);
|
|
2076
2026
|
font-size: 1.25rem;
|
|
2077
2027
|
cursor: pointer;
|
|
2078
2028
|
padding: 4px 8px;
|
|
2079
|
-
border-radius: var(--radius);
|
|
2029
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2080
2030
|
transition: all 0.2s ease;
|
|
2081
2031
|
flex-shrink: 0;
|
|
2082
2032
|
|
|
2083
2033
|
&:hover {
|
|
2084
|
-
background-color: rgba(var(--color-invalid), 0.1);
|
|
2034
|
+
background-color: rgba(var(--color-invalid, 220, 53, 69), 0.1);
|
|
2085
2035
|
transform: scale(1.1);
|
|
2086
2036
|
}
|
|
2087
2037
|
}
|
|
@@ -2089,8 +2039,11 @@
|
|
|
2089
2039
|
// Preview section
|
|
2090
2040
|
.previewSection {
|
|
2091
2041
|
.previewActions {
|
|
2042
|
+
display: flex;
|
|
2043
|
+
align-items: center;
|
|
2044
|
+
flex-wrap: wrap;
|
|
2045
|
+
gap: 12px;
|
|
2092
2046
|
margin-bottom: 24px;
|
|
2093
|
-
text-align: center;
|
|
2094
2047
|
}
|
|
2095
2048
|
|
|
2096
2049
|
.resultSummary {
|
|
@@ -2098,23 +2051,24 @@
|
|
|
2098
2051
|
align-items: center;
|
|
2099
2052
|
justify-content: center;
|
|
2100
2053
|
gap: 8px;
|
|
2101
|
-
padding: var(--padding);
|
|
2102
|
-
background-color:
|
|
2103
|
-
border
|
|
2104
|
-
|
|
2105
|
-
|
|
2054
|
+
padding: var(--padding, 1rem);
|
|
2055
|
+
background-color: var(--item-color, #fff);
|
|
2056
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2057
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2058
|
+
margin-bottom: calc(var(--padding, 1rem) * 1.5);
|
|
2059
|
+
font-size: 0.875rem;
|
|
2106
2060
|
font-weight: 500;
|
|
2107
|
-
color: rgba(var(--
|
|
2061
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2108
2062
|
|
|
2109
2063
|
svg {
|
|
2110
|
-
color: rgba(var(--color-valid), 1);
|
|
2064
|
+
color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2111
2065
|
}
|
|
2112
2066
|
}
|
|
2113
2067
|
|
|
2114
2068
|
.gridContainer {
|
|
2115
|
-
margin-bottom: calc(var(--padding) * 2);
|
|
2116
|
-
border: 1px solid var(--border-color);
|
|
2117
|
-
border-radius: var(--radius);
|
|
2069
|
+
margin-bottom: calc(var(--padding, 1rem) * 2);
|
|
2070
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2071
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2118
2072
|
overflow: hidden;
|
|
2119
2073
|
}
|
|
2120
2074
|
|
|
@@ -2122,10 +2076,10 @@
|
|
|
2122
2076
|
text-align: center;
|
|
2123
2077
|
|
|
2124
2078
|
h3 {
|
|
2125
|
-
margin: 0 0 var(--padding) 0;
|
|
2079
|
+
margin: 0 0 var(--padding, 1rem) 0;
|
|
2126
2080
|
font-size: 1.125rem;
|
|
2127
2081
|
font-weight: 600;
|
|
2128
|
-
color: var(--header-color);
|
|
2082
|
+
color: var(--header-color, #212930);
|
|
2129
2083
|
}
|
|
2130
2084
|
}
|
|
2131
2085
|
|
|
@@ -2139,166 +2093,164 @@
|
|
|
2139
2093
|
// Loading state
|
|
2140
2094
|
.loading {
|
|
2141
2095
|
text-align: center;
|
|
2142
|
-
padding: calc(var(--padding) * 2.5);
|
|
2143
|
-
font-size:
|
|
2144
|
-
color: var(--paragraph-
|
|
2096
|
+
padding: calc(var(--padding, 1rem) * 2.5);
|
|
2097
|
+
font-size: 0.875rem;
|
|
2098
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2145
2099
|
}
|
|
2146
2100
|
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
&:hover:not(:disabled) {
|
|
2156
|
-
background-color: var(--primary-color);
|
|
2157
|
-
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
|
|
2158
|
-
transform: translateY(-1px);
|
|
2159
|
-
filter: brightness(0.9);
|
|
2160
|
-
}
|
|
2101
|
+
/* Quiet inline empty state used where a list can legitimately be empty */
|
|
2102
|
+
.emptyState {
|
|
2103
|
+
padding: 16px;
|
|
2104
|
+
background-color: var(--item-color, #fff);
|
|
2105
|
+
border: 1px dashed var(--border-color, #e1e1e1);
|
|
2106
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2107
|
+
margin-bottom: 24px;
|
|
2161
2108
|
|
|
2162
|
-
|
|
2163
|
-
|
|
2109
|
+
p {
|
|
2110
|
+
margin: 0;
|
|
2111
|
+
font-size: 0.875rem;
|
|
2112
|
+
line-height: 1.5;
|
|
2113
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2164
2114
|
}
|
|
2165
2115
|
}
|
|
2166
2116
|
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2117
|
+
/* Shared failure state for any fetch step in the flow (data sources, fields,
|
|
2118
|
+
saved reports). Same surface language as the panels around it. */
|
|
2119
|
+
.errorPanel {
|
|
2120
|
+
display: flex;
|
|
2121
|
+
align-items: flex-start;
|
|
2122
|
+
gap: 12px;
|
|
2123
|
+
padding: 16px;
|
|
2124
|
+
background-color: var(--item-color, #fff);
|
|
2125
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2126
|
+
border-left: 3px solid var(--approval-color, #c53030);
|
|
2127
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2171
2128
|
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
filter: brightness(0.9);
|
|
2129
|
+
> svg {
|
|
2130
|
+
flex-shrink: 0;
|
|
2131
|
+
margin-top: 2px;
|
|
2132
|
+
color: var(--approval-color, #c53030);
|
|
2177
2133
|
}
|
|
2178
2134
|
|
|
2179
|
-
|
|
2180
|
-
|
|
2135
|
+
> div {
|
|
2136
|
+
flex: 1;
|
|
2137
|
+
min-width: 0;
|
|
2181
2138
|
}
|
|
2182
|
-
}
|
|
2183
2139
|
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
|
2192
|
-
transform: translateY(-1px);
|
|
2140
|
+
h3 {
|
|
2141
|
+
margin: 0 0 4px 0;
|
|
2142
|
+
font-size: 0.8125rem;
|
|
2143
|
+
font-weight: 600;
|
|
2144
|
+
letter-spacing: 0.04em;
|
|
2145
|
+
text-transform: uppercase;
|
|
2146
|
+
color: var(--header-color, #212930);
|
|
2193
2147
|
}
|
|
2194
2148
|
|
|
2195
|
-
|
|
2196
|
-
|
|
2149
|
+
p {
|
|
2150
|
+
margin: 0;
|
|
2151
|
+
font-size: 0.875rem;
|
|
2152
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2153
|
+
line-height: 1.5;
|
|
2197
2154
|
}
|
|
2198
2155
|
}
|
|
2199
2156
|
|
|
2200
|
-
.
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2157
|
+
.retryButton {
|
|
2158
|
+
display: inline-flex;
|
|
2159
|
+
align-items: center;
|
|
2160
|
+
gap: 6px;
|
|
2161
|
+
flex-shrink: 0;
|
|
2162
|
+
background-color: var(--item-color, #fff);
|
|
2163
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2164
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2165
|
+
padding: 8px var(--padding, 1rem);
|
|
2166
|
+
font-size: 0.8125rem;
|
|
2167
|
+
color: var(--paragraph-color, #221e33);
|
|
2168
|
+
cursor: pointer;
|
|
2169
|
+
transition: color 0.2s ease, border-color 0.2s ease;
|
|
2204
2170
|
|
|
2205
|
-
&:hover
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
transform: translateY(-1px);
|
|
2171
|
+
&:hover {
|
|
2172
|
+
color: var(--header-color, #212930);
|
|
2173
|
+
border-color: var(--paragraph-color, #221e33);
|
|
2209
2174
|
}
|
|
2210
2175
|
|
|
2211
|
-
&:focus {
|
|
2212
|
-
outline
|
|
2176
|
+
&:focus-visible {
|
|
2177
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
2178
|
+
outline-offset: 2px;
|
|
2213
2179
|
}
|
|
2214
2180
|
}
|
|
2215
2181
|
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
|
|
2220
|
-
|
|
2221
|
-
&:hover:not(:disabled) {
|
|
2222
|
-
background-color: #c2410c;
|
|
2223
|
-
box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
|
|
2224
|
-
transform: translateY(-1px);
|
|
2225
|
-
}
|
|
2226
|
-
|
|
2227
|
-
&:focus {
|
|
2228
|
-
outline-color: rgba(234, 88, 12, 0.5);
|
|
2229
|
-
}
|
|
2230
|
-
}
|
|
2182
|
+
// Buttons
|
|
2183
|
+
// One emphasis button (.btnPrimary); every other variant is the quiet
|
|
2184
|
+
// surface + hairline pattern used by .helpButton, differing only in ink.
|
|
2231
2185
|
|
|
2232
|
-
.
|
|
2233
|
-
background-color: #
|
|
2234
|
-
color: var(--tertiary-color);
|
|
2235
|
-
|
|
2186
|
+
.btnPrimary {
|
|
2187
|
+
background-color: var(--primary-color, #2c5282);
|
|
2188
|
+
color: var(--tertiary-color, #fff);
|
|
2189
|
+
border: 1px solid var(--primary-color, #2c5282);
|
|
2236
2190
|
|
|
2237
2191
|
&:hover:not(:disabled) {
|
|
2238
|
-
|
|
2239
|
-
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
|
|
2240
|
-
transform: translateY(-1px);
|
|
2241
|
-
}
|
|
2242
|
-
|
|
2243
|
-
&:focus {
|
|
2244
|
-
outline-color: rgba(5, 150, 105, 0.5);
|
|
2192
|
+
filter: brightness(0.92);
|
|
2245
2193
|
}
|
|
2246
2194
|
}
|
|
2247
2195
|
|
|
2248
|
-
.
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2196
|
+
.btnSecondary,
|
|
2197
|
+
.btnCancel,
|
|
2198
|
+
.btnPrevious,
|
|
2199
|
+
.btnStartAgain,
|
|
2200
|
+
.btnExportExcel,
|
|
2201
|
+
.btnExportCsv,
|
|
2202
|
+
.btnExportPdf,
|
|
2203
|
+
.btnSuccess {
|
|
2204
|
+
background-color: var(--item-color, #fff);
|
|
2205
|
+
color: var(--paragraph-color, #221e33);
|
|
2206
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2252
2207
|
|
|
2253
2208
|
&:hover:not(:disabled) {
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
transform: translateY(-1px);
|
|
2257
|
-
}
|
|
2258
|
-
|
|
2259
|
-
&:focus {
|
|
2260
|
-
outline-color: rgba(37, 99, 235, 0.5);
|
|
2209
|
+
color: var(--header-color, #212930);
|
|
2210
|
+
border-color: var(--paragraph-color, #221e33);
|
|
2261
2211
|
}
|
|
2262
2212
|
}
|
|
2263
2213
|
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
|
|
2268
|
-
|
|
2214
|
+
// Destructive / restart actions carry their meaning in the ink, not a fill
|
|
2215
|
+
.btnCancel,
|
|
2216
|
+
.btnStartAgain {
|
|
2269
2217
|
&:hover:not(:disabled) {
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
transform: translateY(-1px);
|
|
2273
|
-
}
|
|
2274
|
-
|
|
2275
|
-
&:focus {
|
|
2276
|
-
outline-color: rgba(220, 38, 38, 0.5);
|
|
2218
|
+
color: var(--approval-color, #c53030);
|
|
2219
|
+
border-color: var(--approval-color, #c53030);
|
|
2277
2220
|
}
|
|
2278
2221
|
}
|
|
2279
2222
|
|
|
2280
2223
|
.btnSuccess {
|
|
2281
|
-
background-color: rgba(var(--color-valid), 1);
|
|
2282
|
-
color: var(--tertiary-color);
|
|
2283
|
-
|
|
2284
2224
|
&:hover:not(:disabled) {
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
filter: brightness(0.9);
|
|
2225
|
+
color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2226
|
+
border-color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2288
2227
|
}
|
|
2289
2228
|
}
|
|
2290
2229
|
|
|
2230
|
+
.btnPrimary:focus-visible,
|
|
2231
|
+
.btnSecondary:focus-visible,
|
|
2232
|
+
.btnCancel:focus-visible,
|
|
2233
|
+
.btnPrevious:focus-visible,
|
|
2234
|
+
.btnStartAgain:focus-visible,
|
|
2235
|
+
.btnExportExcel:focus-visible,
|
|
2236
|
+
.btnExportCsv:focus-visible,
|
|
2237
|
+
.btnExportPdf:focus-visible,
|
|
2238
|
+
.btnSuccess:focus-visible {
|
|
2239
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
2240
|
+
outline-offset: 2px;
|
|
2241
|
+
}
|
|
2242
|
+
|
|
2291
2243
|
// Advanced mode placeholder
|
|
2292
2244
|
.advancedMode {
|
|
2293
|
-
background-color: var(--tertiary-color);
|
|
2294
|
-
border-radius: var(--radius);
|
|
2245
|
+
background-color: var(--tertiary-color, #fff);
|
|
2246
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2295
2247
|
padding: 40px;
|
|
2296
2248
|
text-align: center;
|
|
2297
|
-
box-shadow: var(--box-shadow-small);
|
|
2249
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
2298
2250
|
|
|
2299
2251
|
p {
|
|
2300
2252
|
font-size: 1rem;
|
|
2301
|
-
color: var(--paragraph-color);
|
|
2253
|
+
color: var(--paragraph-color, #221e33);
|
|
2302
2254
|
}
|
|
2303
2255
|
}
|
|
2304
2256
|
|
|
@@ -2311,7 +2263,7 @@
|
|
|
2311
2263
|
margin: 0 0 16px 0;
|
|
2312
2264
|
font-size: 1.125rem;
|
|
2313
2265
|
font-weight: 600;
|
|
2314
|
-
color: var(--header-color);
|
|
2266
|
+
color: var(--header-color, #212930);
|
|
2315
2267
|
}
|
|
2316
2268
|
}
|
|
2317
2269
|
|
|
@@ -2320,9 +2272,9 @@
|
|
|
2320
2272
|
align-items: center;
|
|
2321
2273
|
justify-content: space-between;
|
|
2322
2274
|
padding: 12px 16px;
|
|
2323
|
-
background-color: rgba(var(--color-valid), 0.05);
|
|
2324
|
-
border: 1px solid rgba(var(--color-valid), 0.2);
|
|
2325
|
-
border-radius: var(--radius);
|
|
2275
|
+
background-color: rgba(var(--color-valid, 95, 180, 133), 0.05);
|
|
2276
|
+
border: 1px solid rgba(var(--color-valid, 95, 180, 133), 0.2);
|
|
2277
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2326
2278
|
margin-bottom: 8px;
|
|
2327
2279
|
|
|
2328
2280
|
.joinInfo {
|
|
@@ -2331,29 +2283,29 @@
|
|
|
2331
2283
|
.joinDescription {
|
|
2332
2284
|
display: block;
|
|
2333
2285
|
font-weight: 500;
|
|
2334
|
-
color: var(--header-color);
|
|
2286
|
+
color: var(--header-color, #212930);
|
|
2335
2287
|
margin-bottom: 4px;
|
|
2336
2288
|
}
|
|
2337
2289
|
|
|
2338
2290
|
.joinDetails {
|
|
2339
2291
|
display: block;
|
|
2340
2292
|
font-size: 0.875rem;
|
|
2341
|
-
color: var(--paragraph-color);
|
|
2293
|
+
color: var(--paragraph-color, #221e33);
|
|
2342
2294
|
}
|
|
2343
2295
|
}
|
|
2344
2296
|
|
|
2345
2297
|
.removeJoinBtn {
|
|
2346
2298
|
background: none;
|
|
2347
2299
|
border: none;
|
|
2348
|
-
color: var(--approval-color);
|
|
2300
|
+
color: var(--approval-color, #c53030);
|
|
2349
2301
|
font-size: 1.25rem;
|
|
2350
2302
|
cursor: pointer;
|
|
2351
2303
|
padding: 4px 8px;
|
|
2352
|
-
border-radius: var(--radius);
|
|
2304
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2353
2305
|
transition: all 0.2s ease;
|
|
2354
2306
|
|
|
2355
2307
|
&:hover {
|
|
2356
|
-
background-color: rgba(var(--approval-color), 0.1);
|
|
2308
|
+
background-color: rgba(var(--approval-color, #c53030), 0.1);
|
|
2357
2309
|
}
|
|
2358
2310
|
}
|
|
2359
2311
|
}
|
|
@@ -2365,12 +2317,12 @@
|
|
|
2365
2317
|
margin: 0 0 8px 0;
|
|
2366
2318
|
font-size: 1.125rem;
|
|
2367
2319
|
font-weight: 600;
|
|
2368
|
-
color: var(--header-color);
|
|
2320
|
+
color: var(--header-color, #212930);
|
|
2369
2321
|
}
|
|
2370
2322
|
|
|
2371
2323
|
p {
|
|
2372
2324
|
margin: 0 0 16px 0;
|
|
2373
|
-
color: var(--paragraph-color);
|
|
2325
|
+
color: var(--paragraph-color, #221e33);
|
|
2374
2326
|
}
|
|
2375
2327
|
}
|
|
2376
2328
|
|
|
@@ -2389,15 +2341,15 @@
|
|
|
2389
2341
|
align-items: center;
|
|
2390
2342
|
justify-content: space-between;
|
|
2391
2343
|
padding: 12px;
|
|
2392
|
-
background-color: var(--tertiary-color);
|
|
2393
|
-
border:
|
|
2394
|
-
border-radius: var(--radius);
|
|
2344
|
+
background-color: var(--tertiary-color, #fff);
|
|
2345
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2346
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2395
2347
|
margin-bottom: 0;
|
|
2396
2348
|
transition: all 0.2s ease;
|
|
2397
2349
|
|
|
2398
2350
|
&:hover {
|
|
2399
|
-
border-color: var(--primary-color);
|
|
2400
|
-
box-shadow: var(--box-shadow-small);
|
|
2351
|
+
border-color: var(--primary-color, #2c5282);
|
|
2352
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
2401
2353
|
}
|
|
2402
2354
|
|
|
2403
2355
|
.detectionInfo {
|
|
@@ -2411,23 +2363,28 @@
|
|
|
2411
2363
|
|
|
2412
2364
|
span {
|
|
2413
2365
|
font-weight: 500;
|
|
2414
|
-
color: var(--header-color);
|
|
2366
|
+
color: var(--header-color, #212930);
|
|
2415
2367
|
}
|
|
2416
2368
|
|
|
2417
2369
|
.confidenceRating {
|
|
2418
2370
|
margin-left: auto;
|
|
2419
|
-
|
|
2371
|
+
flex-shrink: 0;
|
|
2372
|
+
font-size: 0.6875rem;
|
|
2373
|
+
font-weight: 600;
|
|
2374
|
+
letter-spacing: 0.04em;
|
|
2375
|
+
text-transform: uppercase;
|
|
2376
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2420
2377
|
}
|
|
2421
2378
|
|
|
2422
2379
|
svg {
|
|
2423
|
-
color: var(--primary-color);
|
|
2380
|
+
color: var(--primary-color, #2c5282);
|
|
2424
2381
|
}
|
|
2425
2382
|
}
|
|
2426
2383
|
|
|
2427
2384
|
.detectionDescription {
|
|
2428
2385
|
margin: 0;
|
|
2429
2386
|
font-size: 0.875rem;
|
|
2430
|
-
color: var(--paragraph-color);
|
|
2387
|
+
color: var(--paragraph-color, #221e33);
|
|
2431
2388
|
}
|
|
2432
2389
|
}
|
|
2433
2390
|
|
|
@@ -2437,18 +2394,17 @@
|
|
|
2437
2394
|
justify-content: center;
|
|
2438
2395
|
width: 40px;
|
|
2439
2396
|
height: 40px;
|
|
2440
|
-
border: 2px solid var(--primary-color);
|
|
2397
|
+
border: 2px solid var(--primary-color, #2c5282);
|
|
2441
2398
|
border-radius: 50%;
|
|
2442
2399
|
background-color: transparent;
|
|
2443
|
-
color: var(--primary-color);
|
|
2400
|
+
color: var(--primary-color, #2c5282);
|
|
2444
2401
|
cursor: pointer;
|
|
2445
2402
|
transition: all 0.2s ease;
|
|
2446
2403
|
flex-shrink: 0;
|
|
2447
2404
|
|
|
2448
2405
|
&:hover:not(:disabled) {
|
|
2449
|
-
background-color: var(--primary-color);
|
|
2450
|
-
color: var(--tertiary-color);
|
|
2451
|
-
transform: scale(1.05);
|
|
2406
|
+
background-color: var(--primary-color, #2c5282);
|
|
2407
|
+
color: var(--tertiary-color, #fff);
|
|
2452
2408
|
}
|
|
2453
2409
|
|
|
2454
2410
|
&:disabled {
|
|
@@ -2458,13 +2414,13 @@
|
|
|
2458
2414
|
}
|
|
2459
2415
|
|
|
2460
2416
|
&.connected {
|
|
2461
|
-
background-color: rgba(var(--color-valid), 1);
|
|
2462
|
-
border-color: rgba(var(--color-valid), 1);
|
|
2463
|
-
color: var(--tertiary-color);
|
|
2417
|
+
background-color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2418
|
+
border-color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2419
|
+
color: var(--tertiary-color, #fff);
|
|
2464
2420
|
|
|
2465
2421
|
&:hover {
|
|
2466
|
-
background-color: rgba(var(--color-valid), 0.8);
|
|
2467
|
-
border-color: rgba(var(--color-valid), 0.8);
|
|
2422
|
+
background-color: rgba(var(--color-valid, 95, 180, 133), 0.8);
|
|
2423
|
+
border-color: rgba(var(--color-valid, 95, 180, 133), 0.8);
|
|
2468
2424
|
transform: none;
|
|
2469
2425
|
}
|
|
2470
2426
|
}
|
|
@@ -2482,7 +2438,7 @@
|
|
|
2482
2438
|
margin: 0 0 16px 0;
|
|
2483
2439
|
font-size: 1.125rem;
|
|
2484
2440
|
font-weight: 600;
|
|
2485
|
-
color: var(--header-color);
|
|
2441
|
+
color: var(--header-color, #212930);
|
|
2486
2442
|
}
|
|
2487
2443
|
}
|
|
2488
2444
|
|
|
@@ -2490,20 +2446,20 @@
|
|
|
2490
2446
|
.manualJoinSection {
|
|
2491
2447
|
margin-bottom: 24px;
|
|
2492
2448
|
padding: 20px;
|
|
2493
|
-
background-color: var(--bg-color) er;
|
|
2494
|
-
border-radius: var(--radius);
|
|
2495
|
-
border: 1px solid var(--border-color);
|
|
2449
|
+
background-color: var(--bg-color, #f7f7f8) er;
|
|
2450
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2451
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2496
2452
|
|
|
2497
2453
|
h3 {
|
|
2498
2454
|
margin: 0 0 8px 0;
|
|
2499
2455
|
font-size: 1.125rem;
|
|
2500
2456
|
font-weight: 600;
|
|
2501
|
-
color: var(--header-color);
|
|
2457
|
+
color: var(--header-color, #212930);
|
|
2502
2458
|
}
|
|
2503
2459
|
|
|
2504
2460
|
p {
|
|
2505
2461
|
margin: 0 0 16px 0;
|
|
2506
|
-
color: var(--paragraph-color);
|
|
2462
|
+
color: var(--paragraph-color, #221e33);
|
|
2507
2463
|
font-size: 0.875rem;
|
|
2508
2464
|
}
|
|
2509
2465
|
}
|
|
@@ -2515,7 +2471,7 @@
|
|
|
2515
2471
|
padding: 12px;
|
|
2516
2472
|
background-color: rgba(251, 146, 60, 0.1);
|
|
2517
2473
|
border: 1px solid rgba(251, 146, 60, 0.3);
|
|
2518
|
-
border-radius: var(--radius);
|
|
2474
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2519
2475
|
margin-bottom: 16px;
|
|
2520
2476
|
|
|
2521
2477
|
svg {
|
|
@@ -2526,7 +2482,7 @@
|
|
|
2526
2482
|
|
|
2527
2483
|
span {
|
|
2528
2484
|
font-size: 0.875rem;
|
|
2529
|
-
color: var(--header-color);
|
|
2485
|
+
color: var(--header-color, #212930);
|
|
2530
2486
|
line-height: 1.4;
|
|
2531
2487
|
|
|
2532
2488
|
strong {
|
|
@@ -2536,10 +2492,10 @@
|
|
|
2536
2492
|
}
|
|
2537
2493
|
|
|
2538
2494
|
.manualJoinForm {
|
|
2539
|
-
background-color: var(--tertiary-color);
|
|
2495
|
+
background-color: var(--tertiary-color, #fff);
|
|
2540
2496
|
padding: 20px;
|
|
2541
|
-
border-radius: var(--radius);
|
|
2542
|
-
border: 1px solid var(--border-color);
|
|
2497
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2498
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2543
2499
|
margin-top: 16px;
|
|
2544
2500
|
}
|
|
2545
2501
|
|
|
@@ -2558,26 +2514,26 @@
|
|
|
2558
2514
|
label {
|
|
2559
2515
|
font-size: 0.875rem;
|
|
2560
2516
|
font-weight: 500;
|
|
2561
|
-
color: var(--paragraph-color);
|
|
2517
|
+
color: var(--paragraph-color, #221e33);
|
|
2562
2518
|
}
|
|
2563
2519
|
|
|
2564
2520
|
select {
|
|
2565
2521
|
padding: 8px 12px;
|
|
2566
|
-
border: 1px solid var(--border-color);
|
|
2567
|
-
border-radius: var(--radius);
|
|
2568
|
-
background-color: var(--tertiary-color);
|
|
2522
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2523
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2524
|
+
background-color: var(--tertiary-color, #fff);
|
|
2569
2525
|
font-size: 0.875rem;
|
|
2570
|
-
color: var(--header-color);
|
|
2526
|
+
color: var(--header-color, #212930);
|
|
2571
2527
|
|
|
2572
2528
|
&:focus {
|
|
2573
2529
|
outline: none;
|
|
2574
|
-
border-color: var(--primary-color);
|
|
2575
|
-
box-shadow: 0 0 0 2px rgba(var(--primary-
|
|
2530
|
+
border-color: var(--primary-color, #2c5282);
|
|
2531
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
2576
2532
|
}
|
|
2577
2533
|
|
|
2578
2534
|
&:disabled {
|
|
2579
|
-
background-color: var(--bg-color);
|
|
2580
|
-
color: var(--paragraph-color);
|
|
2535
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2536
|
+
color: var(--paragraph-color, #221e33);
|
|
2581
2537
|
cursor: not-allowed;
|
|
2582
2538
|
}
|
|
2583
2539
|
}
|
|
@@ -2588,7 +2544,7 @@
|
|
|
2588
2544
|
gap: 12px;
|
|
2589
2545
|
justify-content: flex-end;
|
|
2590
2546
|
padding-top: 16px;
|
|
2591
|
-
border-top: 1px solid var(--border-color);
|
|
2547
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
2592
2548
|
}
|
|
2593
2549
|
|
|
2594
2550
|
.filterItem {
|
|
@@ -2596,9 +2552,9 @@
|
|
|
2596
2552
|
align-items: center;
|
|
2597
2553
|
justify-content: space-between;
|
|
2598
2554
|
padding: 12px 16px;
|
|
2599
|
-
background-color: rgba(var(--primary-rgb), 0.05);
|
|
2600
|
-
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
2601
|
-
border-radius: var(--radius);
|
|
2555
|
+
background-color: rgba(var(--primary-rgb, 44, 82, 130), 0.05);
|
|
2556
|
+
border: 1px solid rgba(var(--primary-rgb, 44, 82, 130), 0.2);
|
|
2557
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2602
2558
|
margin-bottom: 8px;
|
|
2603
2559
|
|
|
2604
2560
|
.filterInfo {
|
|
@@ -2606,22 +2562,22 @@
|
|
|
2606
2562
|
|
|
2607
2563
|
.filterDescription {
|
|
2608
2564
|
font-weight: 500;
|
|
2609
|
-
color: var(--header-color);
|
|
2565
|
+
color: var(--header-color, #212930);
|
|
2610
2566
|
}
|
|
2611
2567
|
}
|
|
2612
2568
|
|
|
2613
2569
|
.removeFilterBtn {
|
|
2614
2570
|
background: none;
|
|
2615
2571
|
border: none;
|
|
2616
|
-
color: var(--approval-color);
|
|
2572
|
+
color: var(--approval-color, #c53030);
|
|
2617
2573
|
font-size: 1.25rem;
|
|
2618
2574
|
cursor: pointer;
|
|
2619
2575
|
padding: 4px 8px;
|
|
2620
|
-
border-radius: var(--radius);
|
|
2576
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2621
2577
|
transition: all 0.2s ease;
|
|
2622
2578
|
|
|
2623
2579
|
&:hover {
|
|
2624
|
-
background-color: rgba(var(--approval-color), 0.1);
|
|
2580
|
+
background-color: rgba(var(--approval-color, #c53030), 0.1);
|
|
2625
2581
|
}
|
|
2626
2582
|
}
|
|
2627
2583
|
}
|
|
@@ -2634,22 +2590,22 @@
|
|
|
2634
2590
|
|
|
2635
2591
|
.saveSection,
|
|
2636
2592
|
.exportOptions {
|
|
2637
|
-
background-color: var(--bg-color);
|
|
2638
|
-
border-radius: var(--radius);
|
|
2593
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2594
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2639
2595
|
padding: 20px;
|
|
2640
|
-
border: 1px solid var(--border-color);
|
|
2596
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2641
2597
|
|
|
2642
2598
|
h3 {
|
|
2643
2599
|
margin: 0 0 8px 0;
|
|
2644
2600
|
font-size: 1.125rem;
|
|
2645
2601
|
font-weight: 600;
|
|
2646
|
-
color: var(--header-color);
|
|
2602
|
+
color: var(--header-color, #212930);
|
|
2647
2603
|
}
|
|
2648
2604
|
|
|
2649
2605
|
p {
|
|
2650
2606
|
margin: 0 0 16px 0;
|
|
2651
2607
|
font-size: 0.875rem;
|
|
2652
|
-
color: var(--paragraph-color);
|
|
2608
|
+
color: var(--paragraph-color, #221e33);
|
|
2653
2609
|
}
|
|
2654
2610
|
}
|
|
2655
2611
|
|
|
@@ -2663,27 +2619,27 @@
|
|
|
2663
2619
|
|
|
2664
2620
|
// Smart Suggestions Styling
|
|
2665
2621
|
.smartSuggestionsContainer {
|
|
2666
|
-
background-color: var(--bg-color);
|
|
2667
|
-
border-radius: var(--radius);
|
|
2622
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2623
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2668
2624
|
padding: 20px;
|
|
2669
|
-
border: 1px solid var(--border-color);
|
|
2625
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2670
2626
|
margin-bottom: 16px;
|
|
2671
2627
|
}
|
|
2672
2628
|
|
|
2673
2629
|
.suggestionsIntro {
|
|
2674
2630
|
margin: 0 0 16px 0;
|
|
2675
2631
|
font-size: 0.875rem;
|
|
2676
|
-
color: var(--paragraph-color);
|
|
2632
|
+
color: var(--paragraph-color, #221e33);
|
|
2677
2633
|
line-height: 1.4;
|
|
2678
2634
|
}
|
|
2679
2635
|
|
|
2680
2636
|
.suggestionsCount {
|
|
2681
2637
|
font-size: 0.75rem;
|
|
2682
|
-
color: var(--paragraph-color);
|
|
2683
|
-
background-color: var(--bg-color);
|
|
2638
|
+
color: var(--paragraph-color, #221e33);
|
|
2639
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2684
2640
|
padding: 4px 8px;
|
|
2685
|
-
border-radius: var(--radius);
|
|
2686
|
-
border: 1px solid var(--border-color);
|
|
2641
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2642
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2687
2643
|
}
|
|
2688
2644
|
|
|
2689
2645
|
.suggestionsGrid {
|
|
@@ -2697,16 +2653,14 @@
|
|
|
2697
2653
|
}
|
|
2698
2654
|
|
|
2699
2655
|
.suggestionCard {
|
|
2700
|
-
background-color: var(--tertiary-color);
|
|
2701
|
-
border:
|
|
2702
|
-
border-radius: var(--radius);
|
|
2656
|
+
background-color: var(--tertiary-color, #fff);
|
|
2657
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2658
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2703
2659
|
padding: 16px;
|
|
2704
2660
|
transition: all 0.2s ease;
|
|
2705
2661
|
|
|
2706
2662
|
&:hover {
|
|
2707
|
-
border-color: var(--primary-color);
|
|
2708
|
-
box-shadow: var(--box-shadow-small);
|
|
2709
|
-
transform: translateY(-1px);
|
|
2663
|
+
border-color: var(--primary-color, #2c5282);
|
|
2710
2664
|
}
|
|
2711
2665
|
}
|
|
2712
2666
|
|
|
@@ -2720,24 +2674,24 @@
|
|
|
2720
2674
|
.suggestionTitle {
|
|
2721
2675
|
font-size: 0.875rem;
|
|
2722
2676
|
font-weight: 600;
|
|
2723
|
-
color: var(--header-color);
|
|
2677
|
+
color: var(--header-color, #212930);
|
|
2724
2678
|
}
|
|
2725
2679
|
|
|
2726
2680
|
.suggestionType {
|
|
2727
|
-
font-size: 0.
|
|
2728
|
-
padding:
|
|
2729
|
-
border-radius: var(--radius);
|
|
2730
|
-
|
|
2731
|
-
color: var(--
|
|
2681
|
+
font-size: 0.6875rem;
|
|
2682
|
+
padding: 1px 8px;
|
|
2683
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2684
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2685
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
2732
2686
|
text-transform: uppercase;
|
|
2733
|
-
letter-spacing: 0.
|
|
2734
|
-
font-weight:
|
|
2687
|
+
letter-spacing: 0.06em;
|
|
2688
|
+
font-weight: 600;
|
|
2735
2689
|
}
|
|
2736
2690
|
|
|
2737
2691
|
.suggestionDescription {
|
|
2738
2692
|
margin: 0 0 12px 0;
|
|
2739
2693
|
font-size: 0.8rem;
|
|
2740
|
-
color: var(--paragraph-color);
|
|
2694
|
+
color: var(--paragraph-color, #221e33);
|
|
2741
2695
|
line-height: 1.3;
|
|
2742
2696
|
}
|
|
2743
2697
|
|
|
@@ -2754,8 +2708,8 @@
|
|
|
2754
2708
|
flex-shrink: 0;
|
|
2755
2709
|
|
|
2756
2710
|
&:disabled {
|
|
2757
|
-
background-color: rgba(var(--color-valid), 1);
|
|
2758
|
-
color: var(--tertiary-color);
|
|
2711
|
+
background-color: rgba(var(--color-valid, 95, 180, 133), 1);
|
|
2712
|
+
color: var(--tertiary-color, #fff);
|
|
2759
2713
|
cursor: default;
|
|
2760
2714
|
transform: none !important;
|
|
2761
2715
|
}
|
|
@@ -2764,7 +2718,7 @@
|
|
|
2764
2718
|
|
|
2765
2719
|
.suggestionReasoning {
|
|
2766
2720
|
font-size: 0.7rem;
|
|
2767
|
-
color: var(--paragraph-color);
|
|
2721
|
+
color: var(--paragraph-color, #221e33);
|
|
2768
2722
|
font-style: italic;
|
|
2769
2723
|
flex: 1;
|
|
2770
2724
|
text-align: right;
|
|
@@ -2823,9 +2777,9 @@
|
|
|
2823
2777
|
flex-direction: column;
|
|
2824
2778
|
gap: 3px;
|
|
2825
2779
|
padding: 10px 12px;
|
|
2826
|
-
background-color: var(--bg-color);
|
|
2827
|
-
border: 1px solid var(--border-color);
|
|
2828
|
-
border-radius: var(--radius);
|
|
2780
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2781
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
2782
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2829
2783
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
2830
2784
|
font-size: 0.9rem;
|
|
2831
2785
|
margin: 2px 0;
|
|
@@ -2836,7 +2790,7 @@
|
|
|
2836
2790
|
align-items: center;
|
|
2837
2791
|
padding: 5px 2px;
|
|
2838
2792
|
line-height: 1.4;
|
|
2839
|
-
border-radius:
|
|
2793
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
2840
2794
|
transition: background-color 0.15s ease;
|
|
2841
2795
|
min-height: 28px;
|
|
2842
2796
|
word-break: break-word;
|
|
@@ -2849,7 +2803,7 @@
|
|
|
2849
2803
|
|
|
2850
2804
|
.humanJsonKey {
|
|
2851
2805
|
font-weight: 600;
|
|
2852
|
-
color: var(--primary-color);
|
|
2806
|
+
color: var(--primary-color, #2c5282);
|
|
2853
2807
|
margin-right: 12px;
|
|
2854
2808
|
min-width: 120px;
|
|
2855
2809
|
flex: 0 0 auto;
|
|
@@ -2860,7 +2814,7 @@
|
|
|
2860
2814
|
flex: 1;
|
|
2861
2815
|
word-break: break-word;
|
|
2862
2816
|
padding-right: 5px;
|
|
2863
|
-
color: var(--header-color);
|
|
2817
|
+
color: var(--header-color, #212930);
|
|
2864
2818
|
font-weight: 500;
|
|
2865
2819
|
}
|
|
2866
2820
|
|
|
@@ -2870,10 +2824,10 @@
|
|
|
2870
2824
|
justify-content: center;
|
|
2871
2825
|
align-items: center;
|
|
2872
2826
|
padding: 12px 16px;
|
|
2873
|
-
background-color: var(--bg-color);
|
|
2874
|
-
border-top: 1px solid var(--border-color);
|
|
2827
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
2828
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
2875
2829
|
font-size: 0.875rem;
|
|
2876
|
-
color: var(--paragraph-color);
|
|
2830
|
+
color: var(--paragraph-color, #221e33);
|
|
2877
2831
|
font-weight: 500;
|
|
2878
2832
|
}
|
|
2879
2833
|
|
|
@@ -2928,7 +2882,7 @@
|
|
|
2928
2882
|
|
|
2929
2883
|
// Enhanced Help Modal CSS
|
|
2930
2884
|
:global(.comprehensive-help-modal) {
|
|
2931
|
-
border-radius:
|
|
2885
|
+
border-radius: var(--radius, var(--br, 5px)) !important;
|
|
2932
2886
|
|
|
2933
2887
|
.swal2-title {
|
|
2934
2888
|
font-size: 1.5rem !important;
|
|
@@ -2949,16 +2903,16 @@
|
|
|
2949
2903
|
}
|
|
2950
2904
|
|
|
2951
2905
|
&::-webkit-scrollbar-track {
|
|
2952
|
-
background: #
|
|
2906
|
+
background: var(--bg-color, #f7f7f8);
|
|
2953
2907
|
border-radius: 3px;
|
|
2954
2908
|
}
|
|
2955
2909
|
|
|
2956
2910
|
&::-webkit-scrollbar-thumb {
|
|
2957
|
-
background: #
|
|
2911
|
+
background: var(--border-color, #e1e1e1);
|
|
2958
2912
|
border-radius: 3px;
|
|
2959
2913
|
|
|
2960
2914
|
&:hover {
|
|
2961
|
-
background:
|
|
2915
|
+
background: rgba(var(--paragraph-rgb, 34, 30, 51), 0.35);
|
|
2962
2916
|
}
|
|
2963
2917
|
}
|
|
2964
2918
|
}
|
|
@@ -2969,21 +2923,21 @@
|
|
|
2969
2923
|
|
|
2970
2924
|
.swal2-confirm {
|
|
2971
2925
|
font-weight: 600 !important;
|
|
2972
|
-
border-radius:
|
|
2926
|
+
border-radius: var(--radius, var(--br, 5px)) !important;
|
|
2973
2927
|
padding: 0.75rem 1.5rem !important;
|
|
2974
2928
|
font-size: 0.9rem !important;
|
|
2975
2929
|
}
|
|
2976
2930
|
|
|
2977
2931
|
.swal2-cancel {
|
|
2978
2932
|
font-weight: 500 !important;
|
|
2979
|
-
border-radius:
|
|
2933
|
+
border-radius: var(--radius, var(--br, 5px)) !important;
|
|
2980
2934
|
padding: 0.75rem 1.5rem !important;
|
|
2981
2935
|
font-size: 0.9rem !important;
|
|
2982
2936
|
}
|
|
2983
2937
|
|
|
2984
2938
|
.swal2-deny {
|
|
2985
2939
|
font-weight: 400 !important;
|
|
2986
|
-
border-radius:
|
|
2940
|
+
border-radius: var(--radius, var(--br, 5px)) !important;
|
|
2987
2941
|
padding: 0.75rem 1rem !important;
|
|
2988
2942
|
font-size: 0.85rem !important;
|
|
2989
2943
|
opacity: 0.8;
|
|
@@ -3028,19 +2982,18 @@
|
|
|
3028
2982
|
align-items: center;
|
|
3029
2983
|
gap: 6px;
|
|
3030
2984
|
padding: 6px 12px;
|
|
3031
|
-
background-color: var(--primary-color);
|
|
2985
|
+
background-color: var(--primary-color, #2c5282);
|
|
3032
2986
|
color: white;
|
|
3033
2987
|
border: none;
|
|
3034
|
-
border-radius: var(--radius);
|
|
2988
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3035
2989
|
font-size: 0.75rem;
|
|
3036
2990
|
font-weight: 500;
|
|
3037
2991
|
cursor: pointer;
|
|
3038
2992
|
transition: all 0.2s ease;
|
|
3039
2993
|
|
|
3040
2994
|
&:hover {
|
|
3041
|
-
background-color: #
|
|
3042
|
-
|
|
3043
|
-
transform: translateY(-1px);
|
|
2995
|
+
background-color: var(--primary-dark-color, var(--primary-color, #2c5282));
|
|
2996
|
+
filter: brightness(0.92);
|
|
3044
2997
|
}
|
|
3045
2998
|
|
|
3046
2999
|
&:active {
|
|
@@ -3055,7 +3008,8 @@
|
|
|
3055
3008
|
left: 0;
|
|
3056
3009
|
right: 0;
|
|
3057
3010
|
bottom: 0;
|
|
3058
|
-
|
|
3011
|
+
padding: 24px;
|
|
3012
|
+
background-color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.35);
|
|
3059
3013
|
display: flex;
|
|
3060
3014
|
align-items: center;
|
|
3061
3015
|
justify-content: center;
|
|
@@ -3064,10 +3018,10 @@
|
|
|
3064
3018
|
}
|
|
3065
3019
|
|
|
3066
3020
|
.calculatedFieldModal {
|
|
3067
|
-
background: var(--
|
|
3068
|
-
border-radius: var(--radius);
|
|
3069
|
-
border: 1px solid var(--border-color);
|
|
3070
|
-
box-shadow: 0
|
|
3021
|
+
background-color: var(--item-color, #fff);
|
|
3022
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3023
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3024
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
3071
3025
|
max-width: 600px;
|
|
3072
3026
|
width: 90%;
|
|
3073
3027
|
max-height: 90vh;
|
|
@@ -3091,13 +3045,13 @@
|
|
|
3091
3045
|
align-items: center;
|
|
3092
3046
|
justify-content: space-between;
|
|
3093
3047
|
padding: 20px 24px 16px;
|
|
3094
|
-
border-bottom: 1px solid var(--border-color);
|
|
3095
|
-
|
|
3048
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
3049
|
+
|
|
3096
3050
|
h3 {
|
|
3097
3051
|
margin: 0;
|
|
3098
|
-
font-size: 1.
|
|
3052
|
+
font-size: 1.0625rem;
|
|
3099
3053
|
font-weight: 600;
|
|
3100
|
-
color: var(--header-color);
|
|
3054
|
+
color: var(--header-color, #212930);
|
|
3101
3055
|
flex: 1;
|
|
3102
3056
|
}
|
|
3103
3057
|
}
|
|
@@ -3107,14 +3061,14 @@
|
|
|
3107
3061
|
border: none;
|
|
3108
3062
|
font-size: 1.25rem;
|
|
3109
3063
|
cursor: pointer;
|
|
3110
|
-
color: var(--paragraph-color);
|
|
3064
|
+
color: var(--paragraph-color, #221e33);
|
|
3111
3065
|
padding: 4px;
|
|
3112
|
-
border-radius: var(--radius);
|
|
3066
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3113
3067
|
line-height: 1;
|
|
3114
3068
|
|
|
3115
3069
|
&:hover {
|
|
3116
|
-
background-color: var(--tertiary-color);
|
|
3117
|
-
color: var(--header-color);
|
|
3070
|
+
background-color: var(--tertiary-color, #fff);
|
|
3071
|
+
color: var(--header-color, #212930);
|
|
3118
3072
|
}
|
|
3119
3073
|
}
|
|
3120
3074
|
|
|
@@ -3133,7 +3087,7 @@
|
|
|
3133
3087
|
display: block;
|
|
3134
3088
|
margin-bottom: 6px;
|
|
3135
3089
|
font-weight: 500;
|
|
3136
|
-
color: var(--header-color);
|
|
3090
|
+
color: var(--header-color, #212930);
|
|
3137
3091
|
font-size: 0.875rem;
|
|
3138
3092
|
}
|
|
3139
3093
|
}
|
|
@@ -3142,45 +3096,45 @@
|
|
|
3142
3096
|
.formSelect {
|
|
3143
3097
|
width: 100%;
|
|
3144
3098
|
padding: 10px 12px;
|
|
3145
|
-
border: 1px solid var(--border-color);
|
|
3146
|
-
border-radius: var(--radius);
|
|
3099
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3100
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3147
3101
|
font-size: 0.875rem;
|
|
3148
|
-
background-color: var(--bg-color);
|
|
3149
|
-
color: var(--header-color);
|
|
3102
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3103
|
+
color: var(--header-color, #212930);
|
|
3150
3104
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
3151
3105
|
|
|
3152
3106
|
&:focus {
|
|
3153
3107
|
outline: none;
|
|
3154
|
-
border-color: var(--primary-color);
|
|
3155
|
-
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
3108
|
+
border-color: var(--primary-color, #2c5282);
|
|
3109
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
3156
3110
|
}
|
|
3157
3111
|
|
|
3158
3112
|
&::placeholder {
|
|
3159
|
-
color: var(--paragraph-color);
|
|
3113
|
+
color: var(--paragraph-color, #221e33);
|
|
3160
3114
|
}
|
|
3161
3115
|
}
|
|
3162
3116
|
|
|
3163
3117
|
.formulaTextarea {
|
|
3164
3118
|
width: 100%;
|
|
3165
3119
|
padding: 10px 12px;
|
|
3166
|
-
border: 1px solid var(--border-color);
|
|
3167
|
-
border-radius: var(--radius);
|
|
3120
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3121
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3168
3122
|
font-size: 0.875rem;
|
|
3169
3123
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
3170
|
-
background-color: var(--bg-color);
|
|
3171
|
-
color: var(--header-color);
|
|
3124
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3125
|
+
color: var(--header-color, #212930);
|
|
3172
3126
|
resize: vertical;
|
|
3173
3127
|
min-height: 80px;
|
|
3174
3128
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
3175
3129
|
|
|
3176
3130
|
&:focus {
|
|
3177
3131
|
outline: none;
|
|
3178
|
-
border-color: var(--primary-color);
|
|
3179
|
-
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
3132
|
+
border-color: var(--primary-color, #2c5282);
|
|
3133
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
3180
3134
|
}
|
|
3181
3135
|
|
|
3182
3136
|
&::placeholder {
|
|
3183
|
-
color: var(--paragraph-color);
|
|
3137
|
+
color: var(--paragraph-color, #221e33);
|
|
3184
3138
|
font-family: inherit;
|
|
3185
3139
|
}
|
|
3186
3140
|
}
|
|
@@ -3188,14 +3142,14 @@
|
|
|
3188
3142
|
.formulaHelp {
|
|
3189
3143
|
margin-top: 8px;
|
|
3190
3144
|
padding: 12px;
|
|
3191
|
-
background-color: var(--tertiary-color);
|
|
3192
|
-
border-radius: var(--radius);
|
|
3145
|
+
background-color: var(--tertiary-color, #fff);
|
|
3146
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3193
3147
|
font-size: 0.75rem;
|
|
3194
3148
|
|
|
3195
3149
|
p {
|
|
3196
3150
|
margin: 0 0 8px 0;
|
|
3197
3151
|
font-weight: 500;
|
|
3198
|
-
color: var(--header-color);
|
|
3152
|
+
color: var(--header-color, #212930);
|
|
3199
3153
|
}
|
|
3200
3154
|
|
|
3201
3155
|
ul {
|
|
@@ -3204,20 +3158,20 @@
|
|
|
3204
3158
|
|
|
3205
3159
|
li {
|
|
3206
3160
|
margin-bottom: 4px;
|
|
3207
|
-
color: var(--paragraph-color);
|
|
3161
|
+
color: var(--paragraph-color, #221e33);
|
|
3208
3162
|
|
|
3209
3163
|
&:last-child {
|
|
3210
3164
|
margin-bottom: 0;
|
|
3211
3165
|
}
|
|
3212
3166
|
|
|
3213
3167
|
code {
|
|
3214
|
-
background-color: var(--bg-color);
|
|
3168
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3215
3169
|
padding: 2px 4px;
|
|
3216
3170
|
border-radius: 3px;
|
|
3217
|
-
border: 1px solid var(--border-color);
|
|
3171
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3218
3172
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
3219
3173
|
font-size: 0.7rem;
|
|
3220
|
-
color: var(--primary-color);
|
|
3174
|
+
color: var(--primary-color, #2c5282);
|
|
3221
3175
|
}
|
|
3222
3176
|
}
|
|
3223
3177
|
}
|
|
@@ -3227,14 +3181,14 @@
|
|
|
3227
3181
|
display: flex;
|
|
3228
3182
|
gap: 12px;
|
|
3229
3183
|
padding: 16px 24px 20px;
|
|
3230
|
-
border-top: 1px solid var(--border-color);
|
|
3184
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
3231
3185
|
justify-content: flex-end;
|
|
3232
3186
|
}
|
|
3233
3187
|
|
|
3234
3188
|
.cancelButton,
|
|
3235
3189
|
.addButton {
|
|
3236
3190
|
padding: 10px 20px;
|
|
3237
|
-
border-radius: var(--radius);
|
|
3191
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3238
3192
|
font-size: 0.875rem;
|
|
3239
3193
|
font-weight: 500;
|
|
3240
3194
|
cursor: pointer;
|
|
@@ -3243,45 +3197,47 @@
|
|
|
3243
3197
|
}
|
|
3244
3198
|
|
|
3245
3199
|
.cancelButton {
|
|
3246
|
-
background-color: var(--
|
|
3247
|
-
color: var(--paragraph-color);
|
|
3248
|
-
border-color: var(--border-color);
|
|
3249
|
-
|
|
3200
|
+
background-color: var(--item-color, #fff);
|
|
3201
|
+
color: var(--paragraph-color, #221e33);
|
|
3202
|
+
border-color: var(--border-color, #e1e1e1);
|
|
3203
|
+
|
|
3250
3204
|
&:hover {
|
|
3251
|
-
|
|
3252
|
-
color: var(--
|
|
3205
|
+
color: var(--header-color, #212930);
|
|
3206
|
+
border-color: var(--paragraph-color, #221e33);
|
|
3253
3207
|
}
|
|
3254
3208
|
}
|
|
3255
3209
|
|
|
3256
3210
|
.addButton {
|
|
3257
|
-
background-color: var(--primary-color);
|
|
3258
|
-
color:
|
|
3259
|
-
border-color: var(--primary-color);
|
|
3260
|
-
|
|
3211
|
+
background-color: var(--primary-color, #2c5282);
|
|
3212
|
+
color: var(--tertiary-color, #fff);
|
|
3213
|
+
border-color: var(--primary-color, #2c5282);
|
|
3214
|
+
|
|
3261
3215
|
&:hover {
|
|
3262
|
-
background-color: var(--primary-dark-color);
|
|
3263
|
-
transform: translateY(-1px);
|
|
3264
|
-
}
|
|
3265
|
-
|
|
3266
|
-
&:active {
|
|
3267
|
-
transform: translateY(0);
|
|
3216
|
+
background-color: var(--primary-dark-color, var(--primary-color, #2c5282));
|
|
3268
3217
|
}
|
|
3269
3218
|
}
|
|
3270
3219
|
|
|
3220
|
+
.cancelButton:focus-visible,
|
|
3221
|
+
.addButton:focus-visible,
|
|
3222
|
+
.modalCloseButton:focus-visible {
|
|
3223
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
3224
|
+
outline-offset: 2px;
|
|
3225
|
+
}
|
|
3226
|
+
|
|
3271
3227
|
/* Grouping Configuration Styles */
|
|
3272
3228
|
.groupingSection {
|
|
3273
3229
|
padding: 24px;
|
|
3274
|
-
background-color: var(--bg-color);
|
|
3275
|
-
border-radius: var(--radius);
|
|
3276
|
-
border: 1px solid var(--border-color);
|
|
3230
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3231
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3232
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3277
3233
|
}
|
|
3278
3234
|
|
|
3279
3235
|
.groupingToggle {
|
|
3280
3236
|
margin-bottom: 24px;
|
|
3281
3237
|
padding: 20px;
|
|
3282
|
-
background-color: var(--tertiary-color);
|
|
3283
|
-
border-radius: var(--radius);
|
|
3284
|
-
border: 1px solid var(--border-color);
|
|
3238
|
+
background-color: var(--tertiary-color, #fff);
|
|
3239
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3240
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3285
3241
|
}
|
|
3286
3242
|
|
|
3287
3243
|
.toggleLabel {
|
|
@@ -3290,7 +3246,7 @@
|
|
|
3290
3246
|
cursor: pointer;
|
|
3291
3247
|
margin-bottom: 8px;
|
|
3292
3248
|
font-weight: 500;
|
|
3293
|
-
color: var(--header-color);
|
|
3249
|
+
color: var(--header-color, #212930);
|
|
3294
3250
|
}
|
|
3295
3251
|
|
|
3296
3252
|
.toggleInput {
|
|
@@ -3311,7 +3267,7 @@
|
|
|
3311
3267
|
.helpText {
|
|
3312
3268
|
margin: 8px 0 0 0;
|
|
3313
3269
|
font-size: 0.875rem;
|
|
3314
|
-
color: var(--paragraph-color);
|
|
3270
|
+
color: var(--paragraph-color, #221e33);
|
|
3315
3271
|
line-height: 1.4;
|
|
3316
3272
|
}
|
|
3317
3273
|
|
|
@@ -3328,31 +3284,31 @@
|
|
|
3328
3284
|
display: block;
|
|
3329
3285
|
margin-bottom: 6px;
|
|
3330
3286
|
font-weight: 500;
|
|
3331
|
-
color: var(--header-color);
|
|
3287
|
+
color: var(--header-color, #212930);
|
|
3332
3288
|
font-size: 0.875rem;
|
|
3333
3289
|
}
|
|
3334
3290
|
|
|
3335
3291
|
.fieldHelp {
|
|
3336
3292
|
margin-top: 6px;
|
|
3337
3293
|
font-size: 0.75rem;
|
|
3338
|
-
color: var(--paragraph-color);
|
|
3294
|
+
color: var(--paragraph-color, #221e33);
|
|
3339
3295
|
line-height: 1.3;
|
|
3340
3296
|
}
|
|
3341
3297
|
|
|
3342
3298
|
.advancedGroupOptions {
|
|
3343
3299
|
margin-top: 24px;
|
|
3344
3300
|
padding: 20px;
|
|
3345
|
-
background-color: var(--tertiary-color);
|
|
3346
|
-
border-radius: var(--radius);
|
|
3347
|
-
border: 1px solid var(--border-color);
|
|
3301
|
+
background-color: var(--tertiary-color, #fff);
|
|
3302
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3303
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3348
3304
|
}
|
|
3349
3305
|
|
|
3350
3306
|
.sectionTitle {
|
|
3351
3307
|
margin: 0 0 16px 0;
|
|
3352
3308
|
font-size: 1rem;
|
|
3353
3309
|
font-weight: 600;
|
|
3354
|
-
color: var(--header-color);
|
|
3355
|
-
border-bottom: 1px solid var(--border-color);
|
|
3310
|
+
color: var(--header-color, #212930);
|
|
3311
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
3356
3312
|
padding-bottom: 8px;
|
|
3357
3313
|
}
|
|
3358
3314
|
|
|
@@ -3374,7 +3330,7 @@
|
|
|
3374
3330
|
align-items: center;
|
|
3375
3331
|
cursor: pointer;
|
|
3376
3332
|
font-size: 0.875rem;
|
|
3377
|
-
color: var(--header-color);
|
|
3333
|
+
color: var(--header-color, #212930);
|
|
3378
3334
|
|
|
3379
3335
|
input[type="checkbox"] {
|
|
3380
3336
|
margin-right: 8px;
|
|
@@ -3391,28 +3347,28 @@
|
|
|
3391
3347
|
.groupingPreview {
|
|
3392
3348
|
margin-top: 24px;
|
|
3393
3349
|
padding: 16px;
|
|
3394
|
-
background-color: var(--bg-color);
|
|
3395
|
-
border-radius: var(--radius);
|
|
3396
|
-
border: 1px solid var(--primary-color);
|
|
3350
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3351
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3352
|
+
border: 1px solid var(--primary-color, #2c5282);
|
|
3397
3353
|
}
|
|
3398
3354
|
|
|
3399
3355
|
.previewBox {
|
|
3400
|
-
background-color: var(--tertiary-color);
|
|
3356
|
+
background-color: var(--tertiary-color, #fff);
|
|
3401
3357
|
padding: 16px;
|
|
3402
|
-
border-radius: var(--radius);
|
|
3403
|
-
border: 1px solid var(--border-color);
|
|
3358
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3359
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3404
3360
|
|
|
3405
3361
|
p {
|
|
3406
3362
|
margin: 0 0 8px 0;
|
|
3407
3363
|
font-size: 0.875rem;
|
|
3408
|
-
color: var(--paragraph-color);
|
|
3364
|
+
color: var(--paragraph-color, #221e33);
|
|
3409
3365
|
|
|
3410
3366
|
&:last-child {
|
|
3411
3367
|
margin-bottom: 0;
|
|
3412
3368
|
}
|
|
3413
3369
|
|
|
3414
3370
|
strong {
|
|
3415
|
-
color: var(--header-color);
|
|
3371
|
+
color: var(--header-color, #212930);
|
|
3416
3372
|
font-weight: 600;
|
|
3417
3373
|
}
|
|
3418
3374
|
}
|
|
@@ -3425,38 +3381,38 @@
|
|
|
3425
3381
|
gap: 8px;
|
|
3426
3382
|
margin-left: 16px;
|
|
3427
3383
|
padding: 8px 12px;
|
|
3428
|
-
background-color: var(--tertiary-color);
|
|
3429
|
-
border-radius: var(--radius);
|
|
3430
|
-
border: 1px solid var(--border-color);
|
|
3384
|
+
background-color: var(--tertiary-color, #fff);
|
|
3385
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3386
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3431
3387
|
}
|
|
3432
3388
|
|
|
3433
3389
|
.viewLabel {
|
|
3434
3390
|
font-size: 0.875rem;
|
|
3435
3391
|
font-weight: 500;
|
|
3436
|
-
color: var(--header-color);
|
|
3392
|
+
color: var(--header-color, #212930);
|
|
3437
3393
|
margin-right: 4px;
|
|
3438
3394
|
}
|
|
3439
3395
|
|
|
3440
3396
|
.viewToggle .btn {
|
|
3441
3397
|
padding: 6px 12px;
|
|
3442
3398
|
font-size: 0.8rem;
|
|
3443
|
-
border: 1px solid var(--border-color);
|
|
3444
|
-
background-color: var(--
|
|
3445
|
-
color: var(--paragraph-color);
|
|
3399
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3400
|
+
background-color: var(--item-color, #fff);
|
|
3401
|
+
color: var(--paragraph-color, #221e33);
|
|
3446
3402
|
margin: 0;
|
|
3447
|
-
|
|
3403
|
+
|
|
3448
3404
|
&:hover {
|
|
3449
|
-
|
|
3450
|
-
color: var(--header-color);
|
|
3405
|
+
border-color: var(--paragraph-color, #221e33);
|
|
3406
|
+
color: var(--header-color, #212930);
|
|
3451
3407
|
}
|
|
3452
3408
|
|
|
3453
3409
|
&.active {
|
|
3454
|
-
background-color: var(--primary-color);
|
|
3410
|
+
background-color: var(--primary-color, #2c5282);
|
|
3455
3411
|
color: white;
|
|
3456
|
-
border-color: var(--primary-color);
|
|
3412
|
+
border-color: var(--primary-color, #2c5282);
|
|
3457
3413
|
|
|
3458
3414
|
&:hover {
|
|
3459
|
-
background-color: var(--primary-dark-color);
|
|
3415
|
+
background-color: var(--primary-dark-color, var(--primary-color, #2c5282));
|
|
3460
3416
|
}
|
|
3461
3417
|
}
|
|
3462
3418
|
}
|
|
@@ -3467,9 +3423,9 @@
|
|
|
3467
3423
|
justify-content: flex-start;
|
|
3468
3424
|
margin-bottom: 20px;
|
|
3469
3425
|
padding: 16px;
|
|
3470
|
-
background-color: var(--tertiary-color);
|
|
3471
|
-
border-radius: var(--radius);
|
|
3472
|
-
border: 1px solid var(--border-color);
|
|
3426
|
+
background-color: var(--tertiary-color, #fff);
|
|
3427
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3428
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3473
3429
|
}
|
|
3474
3430
|
|
|
3475
3431
|
/* Enhanced Pagination Styles */
|
|
@@ -3478,9 +3434,9 @@
|
|
|
3478
3434
|
flex-direction: column;
|
|
3479
3435
|
gap: 12px;
|
|
3480
3436
|
padding: 16px 20px;
|
|
3481
|
-
background-color: var(--tertiary-color);
|
|
3482
|
-
border-top: 1px solid var(--border-color);
|
|
3483
|
-
border-radius: 0 0 var(--radius) var(--radius);
|
|
3437
|
+
background-color: var(--tertiary-color, #fff);
|
|
3438
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
3439
|
+
border-radius: 0 0 var(--radius, var(--br, 5px)) var(--radius, var(--br, 5px));
|
|
3484
3440
|
}
|
|
3485
3441
|
|
|
3486
3442
|
.paginationInfo {
|
|
@@ -3488,7 +3444,7 @@
|
|
|
3488
3444
|
justify-content: center;
|
|
3489
3445
|
align-items: center;
|
|
3490
3446
|
font-size: 0.875rem;
|
|
3491
|
-
color: var(--paragraph-color);
|
|
3447
|
+
color: var(--paragraph-color, #221e33);
|
|
3492
3448
|
font-weight: 500;
|
|
3493
3449
|
margin: 0;
|
|
3494
3450
|
padding: 0;
|
|
@@ -3514,38 +3470,38 @@
|
|
|
3514
3470
|
align-items: center;
|
|
3515
3471
|
gap: 8px;
|
|
3516
3472
|
font-size: 0.875rem;
|
|
3517
|
-
color: var(--paragraph-color);
|
|
3473
|
+
color: var(--paragraph-color, #221e33);
|
|
3518
3474
|
|
|
3519
3475
|
label {
|
|
3520
3476
|
font-weight: 500;
|
|
3521
|
-
color: var(--header-color);
|
|
3477
|
+
color: var(--header-color, #212930);
|
|
3522
3478
|
margin: 0;
|
|
3523
3479
|
}
|
|
3524
3480
|
|
|
3525
3481
|
span {
|
|
3526
3482
|
font-weight: 400;
|
|
3527
|
-
color: var(--paragraph-color);
|
|
3483
|
+
color: var(--paragraph-color, #221e33);
|
|
3528
3484
|
}
|
|
3529
3485
|
}
|
|
3530
3486
|
|
|
3531
3487
|
.pageSizeSelect {
|
|
3532
3488
|
padding: 6px 8px;
|
|
3533
|
-
border: 1px solid var(--border-color);
|
|
3534
|
-
border-radius: var(--radius);
|
|
3535
|
-
background-color: var(--bg-color);
|
|
3536
|
-
color: var(--header-color);
|
|
3489
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3490
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3491
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3492
|
+
color: var(--header-color, #212930);
|
|
3537
3493
|
font-size: 0.875rem;
|
|
3538
3494
|
cursor: pointer;
|
|
3539
3495
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
3540
3496
|
|
|
3541
3497
|
&:focus {
|
|
3542
3498
|
outline: none;
|
|
3543
|
-
border-color: var(--primary-color);
|
|
3544
|
-
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
3499
|
+
border-color: var(--primary-color, #2c5282);
|
|
3500
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 44, 82, 130), 0.1);
|
|
3545
3501
|
}
|
|
3546
3502
|
|
|
3547
3503
|
&:hover {
|
|
3548
|
-
border-color: var(--primary-color);
|
|
3504
|
+
border-color: var(--primary-color, #2c5282);
|
|
3549
3505
|
}
|
|
3550
3506
|
}
|
|
3551
3507
|
|
|
@@ -3577,54 +3533,42 @@
|
|
|
3577
3533
|
min-width: 36px;
|
|
3578
3534
|
height: 36px;
|
|
3579
3535
|
padding: 0 8px;
|
|
3580
|
-
border: 1px solid var(--border-color);
|
|
3581
|
-
background-color: var(--
|
|
3582
|
-
color: var(--paragraph-color);
|
|
3536
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3537
|
+
background-color: var(--item-color, #fff);
|
|
3538
|
+
color: var(--paragraph-color, #221e33);
|
|
3583
3539
|
font-size: 0.875rem;
|
|
3584
3540
|
font-weight: 500;
|
|
3585
|
-
border-radius: var(--radius);
|
|
3541
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3586
3542
|
cursor: pointer;
|
|
3587
|
-
transition:
|
|
3543
|
+
transition: border-color 0.2s ease, color 0.2s ease;
|
|
3588
3544
|
user-select: none;
|
|
3589
3545
|
|
|
3590
3546
|
&:hover:not(.disabled) {
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
color: var(--header-color);
|
|
3594
|
-
transform: translateY(-1px);
|
|
3595
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
3547
|
+
border-color: var(--paragraph-color, #221e33);
|
|
3548
|
+
color: var(--header-color, #212930);
|
|
3596
3549
|
}
|
|
3597
|
-
|
|
3598
|
-
&:active:not(.disabled) {
|
|
3599
|
-
transform: translateY(0);
|
|
3600
|
-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
3601
|
-
}
|
|
3602
|
-
|
|
3550
|
+
|
|
3603
3551
|
&.active {
|
|
3604
|
-
background-color: var(--primary-color);
|
|
3605
|
-
border-color: var(--primary-color);
|
|
3606
|
-
color:
|
|
3552
|
+
background-color: var(--primary-color, #2c5282);
|
|
3553
|
+
border-color: var(--primary-color, #2c5282);
|
|
3554
|
+
color: var(--tertiary-color, #fff);
|
|
3607
3555
|
font-weight: 600;
|
|
3608
|
-
|
|
3609
|
-
|
|
3556
|
+
|
|
3610
3557
|
&:hover {
|
|
3611
|
-
background-color: var(--primary-dark-color);
|
|
3612
|
-
transform: none;
|
|
3558
|
+
background-color: var(--primary-dark-color, var(--primary-color, #2c5282));
|
|
3613
3559
|
}
|
|
3614
3560
|
}
|
|
3615
3561
|
|
|
3616
3562
|
&.disabled {
|
|
3617
|
-
background-color: var(--tertiary-color);
|
|
3618
|
-
border-color: var(--border-color);
|
|
3563
|
+
background-color: var(--tertiary-color, #fff);
|
|
3564
|
+
border-color: var(--border-color, #e1e1e1);
|
|
3619
3565
|
color: var(--disabled-color, #9CA3AF);
|
|
3620
3566
|
cursor: not-allowed;
|
|
3621
3567
|
opacity: 0.6;
|
|
3622
3568
|
|
|
3623
3569
|
&:hover {
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
background-color: var(--tertiary-color);
|
|
3627
|
-
border-color: var(--border-color);
|
|
3570
|
+
background-color: var(--tertiary-color, #fff);
|
|
3571
|
+
border-color: var(--border-color, #e1e1e1);
|
|
3628
3572
|
}
|
|
3629
3573
|
}
|
|
3630
3574
|
|
|
@@ -3642,7 +3586,7 @@
|
|
|
3642
3586
|
justify-content: center;
|
|
3643
3587
|
min-width: 36px;
|
|
3644
3588
|
height: 36px;
|
|
3645
|
-
color: var(--paragraph-color);
|
|
3589
|
+
color: var(--paragraph-color, #221e33);
|
|
3646
3590
|
font-size: 0.875rem;
|
|
3647
3591
|
font-weight: 500;
|
|
3648
3592
|
user-select: none;
|
|
@@ -3686,12 +3630,12 @@
|
|
|
3686
3630
|
|
|
3687
3631
|
/* Enhanced accessibility */
|
|
3688
3632
|
.pageBtn:focus-visible {
|
|
3689
|
-
outline: 2px solid var(--primary-color);
|
|
3633
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
3690
3634
|
outline-offset: 2px;
|
|
3691
3635
|
}
|
|
3692
3636
|
|
|
3693
3637
|
.pageSizeSelect:focus-visible {
|
|
3694
|
-
outline: 2px solid var(--primary-color);
|
|
3638
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
3695
3639
|
outline-offset: 2px;
|
|
3696
3640
|
}
|
|
3697
3641
|
|
|
@@ -3708,16 +3652,16 @@
|
|
|
3708
3652
|
text-align: center;
|
|
3709
3653
|
max-width: 500px;
|
|
3710
3654
|
padding: 40px;
|
|
3711
|
-
background-color: var(--tertiary-color);
|
|
3712
|
-
border: 1px solid var(--border-color);
|
|
3713
|
-
border-radius: var(--radius);
|
|
3714
|
-
box-shadow: var(--box-shadow-small);
|
|
3655
|
+
background-color: var(--tertiary-color, #fff);
|
|
3656
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3657
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3658
|
+
box-shadow: var(--box-shadow-small, 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
3715
3659
|
}
|
|
3716
3660
|
|
|
3717
3661
|
.noDataIcon {
|
|
3718
3662
|
margin-bottom: 20px;
|
|
3719
3663
|
opacity: 0.7;
|
|
3720
|
-
color: var(--paragraph-color);
|
|
3664
|
+
color: var(--paragraph-color, #221e33);
|
|
3721
3665
|
|
|
3722
3666
|
svg {
|
|
3723
3667
|
width: 48px;
|
|
@@ -3728,36 +3672,36 @@
|
|
|
3728
3672
|
.noDataTitle {
|
|
3729
3673
|
font-size: 1.5rem;
|
|
3730
3674
|
font-weight: 600;
|
|
3731
|
-
color: var(--header-color);
|
|
3675
|
+
color: var(--header-color, #212930);
|
|
3732
3676
|
margin: 0 0 12px 0;
|
|
3733
3677
|
}
|
|
3734
3678
|
|
|
3735
3679
|
.noDataText {
|
|
3736
3680
|
font-size: 1rem;
|
|
3737
|
-
color: var(--paragraph-color);
|
|
3681
|
+
color: var(--paragraph-color, #221e33);
|
|
3738
3682
|
margin: 0 0 24px 0;
|
|
3739
3683
|
line-height: 1.5;
|
|
3740
3684
|
}
|
|
3741
3685
|
|
|
3742
3686
|
.noDataSuggestions {
|
|
3743
3687
|
text-align: left;
|
|
3744
|
-
background-color: var(--bg-color);
|
|
3745
|
-
border: 1px solid var(--border-color);
|
|
3746
|
-
border-radius: var(--radius);
|
|
3688
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3689
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3690
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3747
3691
|
padding: 20px;
|
|
3748
3692
|
margin-top: 20px;
|
|
3749
3693
|
|
|
3750
3694
|
p {
|
|
3751
3695
|
margin: 0 0 12px 0;
|
|
3752
3696
|
font-weight: 600;
|
|
3753
|
-
color: var(--header-color);
|
|
3697
|
+
color: var(--header-color, #212930);
|
|
3754
3698
|
font-size: 0.9rem;
|
|
3755
3699
|
}
|
|
3756
3700
|
|
|
3757
3701
|
ul {
|
|
3758
3702
|
margin: 0;
|
|
3759
3703
|
padding-left: 20px;
|
|
3760
|
-
color: var(--paragraph-color);
|
|
3704
|
+
color: var(--paragraph-color, #221e33);
|
|
3761
3705
|
|
|
3762
3706
|
li {
|
|
3763
3707
|
margin-bottom: 8px;
|
|
@@ -3800,59 +3744,45 @@
|
|
|
3800
3744
|
}
|
|
3801
3745
|
}
|
|
3802
3746
|
|
|
3803
|
-
/* Unique Field Configuration
|
|
3747
|
+
/* Unique Field Configuration */
|
|
3804
3748
|
.uniqueFieldConfig {
|
|
3805
3749
|
margin-top: 24px;
|
|
3806
|
-
background-color:
|
|
3807
|
-
border: 1px solid
|
|
3808
|
-
border-radius: var(--radius);
|
|
3750
|
+
background-color: var(--item-color, #fff);
|
|
3751
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3752
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3809
3753
|
overflow: hidden;
|
|
3810
|
-
transition: all 0.3s ease;
|
|
3811
|
-
|
|
3812
|
-
&:hover {
|
|
3813
|
-
border-color: rgba(106, 90, 205, 0.25);
|
|
3814
|
-
box-shadow: 0 2px 8px rgba(106, 90, 205, 0.1);
|
|
3815
|
-
}
|
|
3816
3754
|
}
|
|
3817
3755
|
|
|
3818
3756
|
.configHeader {
|
|
3819
|
-
padding: 16px
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3757
|
+
padding: 14px 16px;
|
|
3758
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
3759
|
+
|
|
3823
3760
|
h4 {
|
|
3824
|
-
margin: 0 0
|
|
3825
|
-
font-size:
|
|
3761
|
+
margin: 0 0 4px 0;
|
|
3762
|
+
font-size: 0.75rem;
|
|
3826
3763
|
font-weight: 600;
|
|
3827
|
-
|
|
3764
|
+
letter-spacing: 0.06em;
|
|
3765
|
+
text-transform: uppercase;
|
|
3766
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
3828
3767
|
display: flex;
|
|
3829
3768
|
align-items: center;
|
|
3830
3769
|
gap: 8px;
|
|
3831
|
-
|
|
3770
|
+
|
|
3832
3771
|
svg {
|
|
3833
|
-
color: #
|
|
3772
|
+
color: var(--primary-color, #2c5282);
|
|
3834
3773
|
flex-shrink: 0;
|
|
3835
3774
|
}
|
|
3836
|
-
|
|
3837
|
-
&::before {
|
|
3838
|
-
content: '';
|
|
3839
|
-
width: 3px;
|
|
3840
|
-
height: 18px;
|
|
3841
|
-
background: linear-gradient(45deg, #6a5acd, #9370db);
|
|
3842
|
-
border-radius: 2px;
|
|
3843
|
-
}
|
|
3844
3775
|
}
|
|
3845
|
-
|
|
3776
|
+
|
|
3846
3777
|
p {
|
|
3847
3778
|
margin: 0;
|
|
3848
|
-
font-size: 0.
|
|
3849
|
-
color: var(--paragraph-
|
|
3850
|
-
opacity: 0.8;
|
|
3779
|
+
font-size: 0.8125rem;
|
|
3780
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
3851
3781
|
}
|
|
3852
3782
|
}
|
|
3853
3783
|
|
|
3854
3784
|
.configContent {
|
|
3855
|
-
padding:
|
|
3785
|
+
padding: 16px;
|
|
3856
3786
|
}
|
|
3857
3787
|
|
|
3858
3788
|
.checkboxLabel {
|
|
@@ -3860,26 +3790,24 @@
|
|
|
3860
3790
|
align-items: flex-start;
|
|
3861
3791
|
cursor: pointer;
|
|
3862
3792
|
font-size: 0.875rem;
|
|
3863
|
-
color: var(--header-color);
|
|
3864
|
-
margin-bottom:
|
|
3865
|
-
padding: 12px;
|
|
3866
|
-
background-color:
|
|
3867
|
-
border-radius: var(--radius);
|
|
3868
|
-
border: 1px solid
|
|
3869
|
-
transition:
|
|
3870
|
-
|
|
3793
|
+
color: var(--header-color, #212930);
|
|
3794
|
+
margin-bottom: 12px;
|
|
3795
|
+
padding: 10px 12px;
|
|
3796
|
+
background-color: var(--item-color, #fff);
|
|
3797
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3798
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3799
|
+
transition: border-color 0.2s ease;
|
|
3800
|
+
|
|
3871
3801
|
&:hover {
|
|
3872
|
-
|
|
3873
|
-
border-color: rgba(106, 90, 205, 0.2);
|
|
3874
|
-
transform: translateY(-1px);
|
|
3802
|
+
border-color: var(--primary-color, #2c5282);
|
|
3875
3803
|
}
|
|
3876
|
-
|
|
3877
|
-
input[type=
|
|
3804
|
+
|
|
3805
|
+
input[type='checkbox'] {
|
|
3878
3806
|
margin-right: 12px;
|
|
3879
|
-
width:
|
|
3880
|
-
height:
|
|
3807
|
+
width: 16px;
|
|
3808
|
+
height: 16px;
|
|
3881
3809
|
cursor: pointer;
|
|
3882
|
-
accent-color: #
|
|
3810
|
+
accent-color: var(--primary-color, #2c5282);
|
|
3883
3811
|
margin-top: 1px; // Align with text
|
|
3884
3812
|
flex-shrink: 0;
|
|
3885
3813
|
}
|
|
@@ -3887,118 +3815,112 @@
|
|
|
3887
3815
|
|
|
3888
3816
|
.checkboxText {
|
|
3889
3817
|
font-weight: 500;
|
|
3890
|
-
color: var(--header-color);
|
|
3818
|
+
color: var(--header-color, #212930);
|
|
3891
3819
|
line-height: 1.4;
|
|
3892
|
-
|
|
3820
|
+
|
|
3893
3821
|
.activeIndicator {
|
|
3894
3822
|
display: inline-flex;
|
|
3895
3823
|
align-items: center;
|
|
3896
3824
|
gap: 4px;
|
|
3897
3825
|
margin-left: 8px;
|
|
3898
|
-
padding:
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
font-size: 0.75rem;
|
|
3826
|
+
padding: 1px 8px;
|
|
3827
|
+
color: var(--success-color, #2f855a);
|
|
3828
|
+
font-size: 0.6875rem;
|
|
3902
3829
|
font-weight: 600;
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3830
|
+
letter-spacing: 0.04em;
|
|
3831
|
+
text-transform: uppercase;
|
|
3832
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3833
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3834
|
+
|
|
3906
3835
|
svg {
|
|
3907
|
-
color: #
|
|
3836
|
+
color: var(--success-color, #2f855a);
|
|
3908
3837
|
flex-shrink: 0;
|
|
3909
3838
|
}
|
|
3910
3839
|
}
|
|
3911
3840
|
}
|
|
3912
3841
|
|
|
3913
3842
|
.uniqueFieldSelector {
|
|
3914
|
-
margin-left:
|
|
3843
|
+
margin-left: 28px; // Align with checkbox text
|
|
3915
3844
|
padding-left: 16px;
|
|
3916
|
-
border-left:
|
|
3917
|
-
animation: slideDown 0.3s ease-out;
|
|
3918
|
-
}
|
|
3919
|
-
|
|
3920
|
-
@keyframes slideDown {
|
|
3921
|
-
from {
|
|
3922
|
-
opacity: 0;
|
|
3923
|
-
transform: translateY(-10px);
|
|
3924
|
-
}
|
|
3925
|
-
to {
|
|
3926
|
-
opacity: 1;
|
|
3927
|
-
transform: translateY(0);
|
|
3928
|
-
}
|
|
3845
|
+
border-left: 1px solid var(--border-color, #e1e1e1);
|
|
3929
3846
|
}
|
|
3930
3847
|
|
|
3931
3848
|
.fieldLabel {
|
|
3932
3849
|
display: block;
|
|
3933
|
-
font-size: 0.
|
|
3850
|
+
font-size: 0.8125rem;
|
|
3934
3851
|
font-weight: 500;
|
|
3935
|
-
color: var(--header-color);
|
|
3936
|
-
margin-bottom:
|
|
3852
|
+
color: var(--header-color, #212930);
|
|
3853
|
+
margin-bottom: 6px;
|
|
3937
3854
|
}
|
|
3938
3855
|
|
|
3939
3856
|
.fieldSelect {
|
|
3940
3857
|
width: 100%;
|
|
3941
|
-
padding: 12px
|
|
3942
|
-
border:
|
|
3943
|
-
border-radius: var(--radius);
|
|
3858
|
+
padding: 9px 12px;
|
|
3859
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3860
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3944
3861
|
font-size: 0.875rem;
|
|
3945
|
-
background-color: var(--
|
|
3946
|
-
color: var(--header-color);
|
|
3947
|
-
transition:
|
|
3862
|
+
background-color: var(--item-color, #fff);
|
|
3863
|
+
color: var(--header-color, #212930);
|
|
3864
|
+
transition: border-color 0.2s ease;
|
|
3948
3865
|
cursor: pointer;
|
|
3949
|
-
|
|
3866
|
+
|
|
3950
3867
|
&:focus {
|
|
3951
3868
|
outline: none;
|
|
3952
|
-
border-color: #
|
|
3953
|
-
box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.15);
|
|
3869
|
+
border-color: var(--primary-color, #2c5282);
|
|
3954
3870
|
}
|
|
3955
|
-
|
|
3871
|
+
|
|
3872
|
+
&:focus-visible {
|
|
3873
|
+
outline: 2px solid var(--primary-color, #2c5282);
|
|
3874
|
+
outline-offset: 1px;
|
|
3875
|
+
}
|
|
3876
|
+
|
|
3956
3877
|
&:hover {
|
|
3957
|
-
border-color:
|
|
3878
|
+
border-color: var(--primary-color, #2c5282);
|
|
3958
3879
|
}
|
|
3959
|
-
|
|
3880
|
+
|
|
3960
3881
|
option {
|
|
3961
3882
|
padding: 8px;
|
|
3962
|
-
color: var(--header-color);
|
|
3963
|
-
background-color: var(--
|
|
3883
|
+
color: var(--header-color, #212930);
|
|
3884
|
+
background-color: var(--item-color, #fff);
|
|
3964
3885
|
}
|
|
3965
3886
|
}
|
|
3966
3887
|
|
|
3967
3888
|
.fieldHelp {
|
|
3968
3889
|
margin-top: 8px;
|
|
3969
3890
|
font-size: 0.75rem;
|
|
3970
|
-
color: var(--paragraph-
|
|
3971
|
-
line-height: 1.
|
|
3891
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
3892
|
+
line-height: 1.5;
|
|
3972
3893
|
padding: 8px 12px;
|
|
3973
|
-
background-color:
|
|
3974
|
-
border-radius: var(--radius);
|
|
3975
|
-
border
|
|
3976
|
-
|
|
3894
|
+
background-color: var(--bg-color, #f7f7f8);
|
|
3895
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3896
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3897
|
+
|
|
3977
3898
|
code {
|
|
3978
3899
|
display: block;
|
|
3979
3900
|
margin-top: 6px;
|
|
3980
3901
|
padding: 6px 8px;
|
|
3981
|
-
background-color:
|
|
3982
|
-
border-radius:
|
|
3902
|
+
background-color: var(--item-color, #fff);
|
|
3903
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3983
3904
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
3984
3905
|
font-size: 0.7rem;
|
|
3985
|
-
color: #
|
|
3986
|
-
border: 1px solid
|
|
3906
|
+
color: var(--header-color, #212930);
|
|
3907
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3987
3908
|
white-space: pre-wrap;
|
|
3988
3909
|
word-break: break-word;
|
|
3989
3910
|
}
|
|
3990
|
-
|
|
3911
|
+
|
|
3991
3912
|
strong {
|
|
3992
|
-
color: var(--header-color);
|
|
3913
|
+
color: var(--header-color, #212930);
|
|
3993
3914
|
font-weight: 600;
|
|
3994
3915
|
}
|
|
3995
3916
|
}
|
|
3996
3917
|
|
|
3997
3918
|
/* Row Exclusion Modal Styling */
|
|
3998
3919
|
.rowExclusionModal {
|
|
3999
|
-
background-color: var(--
|
|
4000
|
-
border
|
|
4001
|
-
|
|
3920
|
+
background-color: var(--item-color, #fff);
|
|
3921
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3922
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3923
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
4002
3924
|
max-width: 800px;
|
|
4003
3925
|
width: 90vw;
|
|
4004
3926
|
max-height: 80vh;
|
|
@@ -4006,21 +3928,20 @@
|
|
|
4006
3928
|
flex-direction: column;
|
|
4007
3929
|
|
|
4008
3930
|
.modalHeader {
|
|
4009
|
-
padding: 24px;
|
|
4010
|
-
border-bottom: 1px solid var(--border-color);
|
|
4011
|
-
|
|
4012
|
-
|
|
3931
|
+
padding: 20px 24px 16px;
|
|
3932
|
+
border-bottom: 1px solid var(--border-color, #e1e1e1);
|
|
3933
|
+
|
|
4013
3934
|
h3 {
|
|
4014
|
-
margin: 0 0
|
|
4015
|
-
font-size: 1.
|
|
4016
|
-
color: var(--header-color);
|
|
3935
|
+
margin: 0 0 4px 0;
|
|
3936
|
+
font-size: 1.0625rem;
|
|
3937
|
+
color: var(--header-color, #212930);
|
|
4017
3938
|
font-weight: 600;
|
|
4018
3939
|
}
|
|
4019
|
-
|
|
3940
|
+
|
|
4020
3941
|
p {
|
|
4021
3942
|
margin: 0;
|
|
4022
|
-
color: var(--paragraph-
|
|
4023
|
-
font-size: 0.
|
|
3943
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
3944
|
+
font-size: 0.8125rem;
|
|
4024
3945
|
}
|
|
4025
3946
|
}
|
|
4026
3947
|
|
|
@@ -4043,16 +3964,18 @@
|
|
|
4043
3964
|
align-items: center;
|
|
4044
3965
|
padding: 12px;
|
|
4045
3966
|
margin-bottom: 8px;
|
|
4046
|
-
border-radius: var(--radius);
|
|
4047
|
-
border: 1px solid var(--border-color);
|
|
4048
|
-
background-color: var(--tertiary-color);
|
|
3967
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
3968
|
+
border: 1px solid var(--border-color, #e1e1e1);
|
|
3969
|
+
background-color: var(--tertiary-color, #fff);
|
|
4049
3970
|
cursor: pointer;
|
|
4050
3971
|
transition: all 0.2s ease;
|
|
4051
3972
|
|
|
4052
3973
|
&:hover {
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
3974
|
+
border-color: var(--primary-color, #2c5282);
|
|
3975
|
+
}
|
|
3976
|
+
|
|
3977
|
+
&:focus-within {
|
|
3978
|
+
border-color: var(--primary-color, #2c5282);
|
|
4056
3979
|
}
|
|
4057
3980
|
|
|
4058
3981
|
input[type="checkbox"] {
|
|
@@ -4060,7 +3983,7 @@
|
|
|
4060
3983
|
width: 16px;
|
|
4061
3984
|
height: 16px;
|
|
4062
3985
|
cursor: pointer;
|
|
4063
|
-
accent-color: var(--primary-color);
|
|
3986
|
+
accent-color: var(--primary-color, #2c5282);
|
|
4064
3987
|
flex-shrink: 0;
|
|
4065
3988
|
}
|
|
4066
3989
|
}
|
|
@@ -4075,42 +3998,40 @@
|
|
|
4075
3998
|
|
|
4076
3999
|
.rowValue {
|
|
4077
4000
|
font-size: 0.875rem;
|
|
4078
|
-
color: var(--header-color);
|
|
4001
|
+
color: var(--header-color, #212930);
|
|
4079
4002
|
white-space: nowrap;
|
|
4080
4003
|
overflow: hidden;
|
|
4081
4004
|
text-overflow: ellipsis;
|
|
4082
4005
|
|
|
4083
4006
|
&:not(:first-child) {
|
|
4084
|
-
color: var(--paragraph-color);
|
|
4007
|
+
color: var(--paragraph-color, #221e33);
|
|
4085
4008
|
font-size: 0.8rem;
|
|
4086
4009
|
}
|
|
4087
4010
|
}
|
|
4088
4011
|
|
|
4089
4012
|
.exclusionSummary {
|
|
4090
|
-
padding:
|
|
4091
|
-
|
|
4092
|
-
|
|
4093
|
-
|
|
4013
|
+
padding: 12px 24px;
|
|
4014
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
4015
|
+
|
|
4094
4016
|
p {
|
|
4095
4017
|
margin: 0;
|
|
4096
|
-
font-size: 0.
|
|
4097
|
-
color: var(--
|
|
4018
|
+
font-size: 0.8125rem;
|
|
4019
|
+
color: rgba(var(--paragraph-rgb, 34, 30, 51), 0.6);
|
|
4098
4020
|
text-align: center;
|
|
4099
|
-
font-weight: 500;
|
|
4100
4021
|
}
|
|
4101
4022
|
}
|
|
4102
4023
|
|
|
4103
4024
|
.modalFooter {
|
|
4104
4025
|
padding: 16px 24px;
|
|
4105
|
-
border-top: 1px solid var(--border-color);
|
|
4026
|
+
border-top: 1px solid var(--border-color, #e1e1e1);
|
|
4106
4027
|
display: flex;
|
|
4107
4028
|
gap: 12px;
|
|
4108
4029
|
justify-content: flex-end;
|
|
4109
|
-
background-color: var(--
|
|
4110
|
-
|
|
4030
|
+
background-color: var(--item-color, #fff);
|
|
4031
|
+
|
|
4111
4032
|
button {
|
|
4112
|
-
padding:
|
|
4113
|
-
border-radius: var(--radius);
|
|
4033
|
+
padding: 9px 16px;
|
|
4034
|
+
border-radius: var(--radius, var(--br, 5px));
|
|
4114
4035
|
font-size: 0.875rem;
|
|
4115
4036
|
font-weight: 500;
|
|
4116
4037
|
cursor: pointer;
|
|
@@ -4119,23 +4040,22 @@
|
|
|
4119
4040
|
|
|
4120
4041
|
&.cancelButton {
|
|
4121
4042
|
background-color: transparent;
|
|
4122
|
-
color: var(--paragraph-color);
|
|
4123
|
-
border-color: var(--border-color);
|
|
4043
|
+
color: var(--paragraph-color, #221e33);
|
|
4044
|
+
border-color: var(--border-color, #e1e1e1);
|
|
4124
4045
|
|
|
4125
4046
|
&:hover {
|
|
4126
|
-
background-color: var(--border-color);
|
|
4127
|
-
color: var(--header-color);
|
|
4047
|
+
background-color: var(--border-color, #e1e1e1);
|
|
4048
|
+
color: var(--header-color, #212930);
|
|
4128
4049
|
}
|
|
4129
4050
|
}
|
|
4130
4051
|
|
|
4131
4052
|
&.confirmButton {
|
|
4132
|
-
background-color: var(--primary-color);
|
|
4053
|
+
background-color: var(--primary-color, #2c5282);
|
|
4133
4054
|
color: white;
|
|
4134
4055
|
|
|
4135
4056
|
&:hover {
|
|
4136
|
-
background-color: var(--primary-hover, var(--primary-color));
|
|
4137
|
-
|
|
4138
|
-
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
|
|
4057
|
+
background-color: var(--primary-hover, var(--primary-color, #2c5282));
|
|
4058
|
+
filter: brightness(0.92);
|
|
4139
4059
|
}
|
|
4140
4060
|
}
|
|
4141
4061
|
}
|