@dybo-ai/design 1.3.0 → 2.0.0
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/CLAUDE.md +35 -28
- package/README.md +59 -31
- package/dist/index.cjs +1340 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +383 -3
- package/dist/index.d.ts +383 -3
- package/dist/index.js +1306 -68
- package/dist/index.js.map +1 -1
- package/legacy-theme.css +1112 -0
- package/package.json +3 -1
- package/portal-tokens.css +8 -182
- package/theme.css +1572 -418
- package/tokens.cjs +219 -125
- package/tokens.json +223 -163
- package/tokens.mjs +199 -125
package/theme.css
CHANGED
|
@@ -1,343 +1,441 @@
|
|
|
1
1
|
/* =========================================================================
|
|
2
|
-
DYBO Design System — CSS Custom Properties
|
|
3
|
-
Source:
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
DYBO Design System — CSS Custom Properties (v2 default)
|
|
3
|
+
Source of truth: fig-teste/designSystem/tokens.css — the real system DYBO's
|
|
4
|
+
product screens are designed against. Promoted here from what used to be a
|
|
5
|
+
side "portal" namespace; the OLD theme is preserved verbatim at
|
|
6
|
+
`@dybo-ai/design/legacy-theme.css` for anything that still needs it.
|
|
7
|
+
Style: glassmorphism — translucent surfaces, `backdrop-blur-sm`, white
|
|
8
|
+
stroke in light mode. Full light + dark support via a `.dark` class on
|
|
9
|
+
`<html>` (never `data-theme`).
|
|
10
|
+
Font: Urbanist — load from Google Fonts or self-host (`@fontsource/urbanist`):
|
|
6
11
|
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
7
12
|
========================================================================= */
|
|
8
13
|
|
|
14
|
+
/* ---- LIGHT MODE (default) ---- */
|
|
9
15
|
:root {
|
|
10
|
-
/*
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
|
|
48
|
-
--
|
|
49
|
-
--
|
|
16
|
+
/* Semantic */
|
|
17
|
+
--background: 216 25% 92%; /* cool blue-grey — page background */
|
|
18
|
+
--foreground: 218 56% 9%; /* near-black navy — primary text */
|
|
19
|
+
|
|
20
|
+
--card: 214 41% 97%; /* near-white, faint blue — card surface */
|
|
21
|
+
--card-foreground: 218 56% 9%;
|
|
22
|
+
|
|
23
|
+
--popover: 0 0% 100%;
|
|
24
|
+
--popover-foreground: 218 56% 9%;
|
|
25
|
+
|
|
26
|
+
--primary: 218 56% 9%; /* near-black navy — primary action */
|
|
27
|
+
--primary-foreground: 0 0% 100%;
|
|
28
|
+
|
|
29
|
+
--secondary: 0 0% 100%; /* white — secondary action */
|
|
30
|
+
--secondary-foreground: 218 56% 9%;
|
|
31
|
+
|
|
32
|
+
--muted: 216 16% 88%;
|
|
33
|
+
--muted-foreground: 216 31% 50%;
|
|
34
|
+
|
|
35
|
+
--accent: 219 52% 24%;
|
|
36
|
+
--accent-foreground: 214 41% 97%;
|
|
37
|
+
|
|
38
|
+
--destructive: 355 95% 60%; /* red — reserved for BLOCKING errors only */
|
|
39
|
+
--destructive-foreground: 0 0% 100%;
|
|
40
|
+
|
|
41
|
+
--border: 0 0% 100%; /* white — light-mode card border */
|
|
42
|
+
--input: 240 14% 96%;
|
|
43
|
+
--ring: 219 52% 24%;
|
|
44
|
+
|
|
45
|
+
/* Status */
|
|
46
|
+
--success: 150 68% 74%;
|
|
47
|
+
--success-foreground: 218 56% 9%;
|
|
48
|
+
--success-background: 151 45% 89%;
|
|
49
|
+
|
|
50
|
+
--warning: 30 100% 40%; /* amber — cautionary, non-blocking */
|
|
51
|
+
--warning-foreground: 218 56% 9%;
|
|
52
|
+
--warning-background: 30 100% 95%;
|
|
53
|
+
|
|
54
|
+
--error: 30 100% 40%; /* NOTE: same as --warning — the real red is --destructive */
|
|
55
|
+
--error-foreground: 0 0% 100%;
|
|
56
|
+
--error-background: 30 100% 95%;
|
|
57
|
+
|
|
58
|
+
--info: 216 31% 50%;
|
|
59
|
+
--info-foreground: 218 56% 9%;
|
|
60
|
+
--info-background: 216 31% 89%;
|
|
61
|
+
|
|
62
|
+
/* Category tags (a different axis than status) */
|
|
63
|
+
--tag-amber-background: 35 100% 95%;
|
|
64
|
+
--tag-amber-foreground: 30 100% 24%;
|
|
65
|
+
--tag-purple-background: 269 100% 95%;
|
|
66
|
+
--tag-purple-foreground: 273 67% 39%;
|
|
67
|
+
--tag-red-background: 355 100% 95%;
|
|
68
|
+
--tag-red-foreground: 353 78% 32%;
|
|
69
|
+
|
|
70
|
+
/* Modal/drawer scrim base */
|
|
71
|
+
--overlay-scrim: 224 32% 12%;
|
|
72
|
+
|
|
73
|
+
/* Brand */
|
|
74
|
+
--brand-dark-orb: 224 32% 12%;
|
|
75
|
+
--brand-indigo: 219 52% 24%; /* inactive nav icon, light mode */
|
|
76
|
+
--brand-blue-yonder: 216 31% 50%; /* inactive nav icon, dark mode */
|
|
77
|
+
--brand-gainsboro: 216 16% 88%;
|
|
78
|
+
--brand-cultured: 214 41% 97%;
|
|
79
|
+
--brand-dandelion: 54 81% 55%;
|
|
80
|
+
--brand-black: 0 0% 0%;
|
|
81
|
+
--brand-white: 0 0% 100%;
|
|
50
82
|
|
|
51
|
-
/*
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
|
|
65
|
-
/*
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
--
|
|
74
|
-
--dybo-
|
|
75
|
-
--dybo-
|
|
76
|
-
|
|
77
|
-
--dybo-
|
|
78
|
-
|
|
79
|
-
/* ---- Semantic (recommended mapping) ---- */
|
|
80
|
-
--dybo-success: #20a156;
|
|
81
|
-
--dybo-success-bright: #28ca6b;
|
|
82
|
-
--dybo-success-bg: #eafbf1;
|
|
83
|
-
--dybo-warning: #f16c24;
|
|
84
|
-
--dybo-warning-bg: #ffe5d8;
|
|
85
|
-
--dybo-danger: #a21a17;
|
|
86
|
-
--dybo-danger-bg: #fffbfb;
|
|
87
|
-
--dybo-info: #0399ae;
|
|
88
|
-
--dybo-info-bg: #d3f7fc;
|
|
89
|
-
|
|
90
|
-
/* ---- Status / priority (DYBO domain) ---- */
|
|
91
|
-
--dybo-status-resolved-fg: #0399ae;
|
|
92
|
-
--dybo-status-resolved-bg: #d3f7fc;
|
|
93
|
-
--dybo-status-high-priority-fg: #682a5d;
|
|
94
|
-
--dybo-status-high-priority-bg: #eee0ec;
|
|
95
|
-
--dybo-status-medium-priority-fg: #f16c24;
|
|
96
|
-
--dybo-status-medium-priority-bg: #ffe5d8;
|
|
97
|
-
--dybo-status-brand-fg: #0a1323;
|
|
98
|
-
--dybo-status-brand-bg: #d0d3fe;
|
|
99
|
-
|
|
100
|
-
/* ---- Typography ---- */
|
|
101
|
-
--dybo-font-family: "Urbanist", sans-serif;
|
|
83
|
+
/* Radius */
|
|
84
|
+
--radius-none: 0px;
|
|
85
|
+
--radius-sm: 12px; /* inputs, selects, cards */
|
|
86
|
+
--radius-md: 20px; /* dropdown panels, pill buttons */
|
|
87
|
+
--radius-full: 999px; /* pills, avatars */
|
|
88
|
+
--radius: var(--radius-md);
|
|
89
|
+
|
|
90
|
+
/* Opacity */
|
|
91
|
+
--opacity-semi-opaque: 0.4; /* disabled */
|
|
92
|
+
--opacity-intense: 0.64; /* secondary text/labels */
|
|
93
|
+
--opacity-medium: 0.32; /* "coming soon" elements */
|
|
94
|
+
--opacity-light: 0.16;
|
|
95
|
+
--opacity-semi-transparent: 0.08;
|
|
96
|
+
|
|
97
|
+
/* Shadows */
|
|
98
|
+
--shadow-level-1: 0px 4px 8px #1419271f; /* cards, sidebar pill */
|
|
99
|
+
--shadow-level-2: 0px 8px 28px #14192729; /* modals, drawers */
|
|
100
|
+
|
|
101
|
+
/* Dense-card surface */
|
|
102
|
+
--card-bg-with-opacity: rgba(240, 241, 244, 0.92);
|
|
103
|
+
|
|
104
|
+
/* Typography */
|
|
105
|
+
--font-display: "Urbanist", sans-serif;
|
|
106
|
+
--dybo-font-size-xs: 12px;
|
|
107
|
+
--dybo-font-size-sm: 14px;
|
|
108
|
+
--dybo-font-size-md: 16px;
|
|
109
|
+
--dybo-font-size-lg: 18px;
|
|
110
|
+
--dybo-font-size-xl: 24px;
|
|
102
111
|
--dybo-font-weight-regular: 400;
|
|
103
112
|
--dybo-font-weight-medium: 500;
|
|
104
113
|
--dybo-font-weight-semibold: 600;
|
|
105
114
|
--dybo-font-weight-bold: 700;
|
|
106
115
|
|
|
107
|
-
|
|
108
|
-
--dybo-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
|
|
117
|
-
--
|
|
118
|
-
--
|
|
119
|
-
|
|
120
|
-
--
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
--
|
|
124
|
-
--
|
|
125
|
-
|
|
126
|
-
--
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
--
|
|
130
|
-
--
|
|
131
|
-
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
--
|
|
137
|
-
|
|
138
|
-
/*
|
|
139
|
-
--
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
|
|
116
|
+
/* Compatibility: 80px icon rail width, used by IconRail */
|
|
117
|
+
--dybo-icon-rail-width: 80px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ---- DARK MODE ---- */
|
|
121
|
+
.dark {
|
|
122
|
+
--card-bg-with-opacity: rgba(18, 26, 45, 0.92);
|
|
123
|
+
--background: 218 56% 9%;
|
|
124
|
+
--foreground: 244 20% 96%;
|
|
125
|
+
|
|
126
|
+
--card: 218 35% 13%;
|
|
127
|
+
--card-foreground: 244 20% 96%;
|
|
128
|
+
|
|
129
|
+
--popover: 218 15% 12%;
|
|
130
|
+
--popover-foreground: 244 20% 96%;
|
|
131
|
+
|
|
132
|
+
--primary: 244 20% 96%; /* inverted: light on dark */
|
|
133
|
+
--primary-foreground: 218 56% 9%;
|
|
134
|
+
|
|
135
|
+
--secondary: 218 35% 13%;
|
|
136
|
+
--secondary-foreground: 244 20% 96%;
|
|
137
|
+
|
|
138
|
+
--muted: 210 15% 30%;
|
|
139
|
+
--muted-foreground: 244 20% 80%;
|
|
140
|
+
|
|
141
|
+
--accent: 216 31% 50%;
|
|
142
|
+
--accent-foreground: 244 20% 96%;
|
|
143
|
+
|
|
144
|
+
--destructive: 0 78% 55%;
|
|
145
|
+
--destructive-foreground: 244 20% 96%;
|
|
146
|
+
|
|
147
|
+
--border: 210 15% 30%; /* dark grey — visible border in dark mode */
|
|
148
|
+
--input: 218 35% 13%;
|
|
149
|
+
--ring: 244 20% 96%;
|
|
150
|
+
|
|
151
|
+
--success-background: 150 68% 26%;
|
|
152
|
+
--warning-background: 30 100% 22%;
|
|
153
|
+
--error-background: 30 100% 22%;
|
|
154
|
+
--info-background: 216 31% 28%;
|
|
155
|
+
|
|
156
|
+
--tag-amber-background: 37 64% 18%;
|
|
157
|
+
--tag-amber-foreground: 34 100% 83%;
|
|
158
|
+
--tag-purple-background: 274 53% 22%;
|
|
159
|
+
--tag-purple-foreground: 269 100% 92%;
|
|
160
|
+
--tag-red-background: 352 63% 18%;
|
|
161
|
+
--tag-red-foreground: 354 100% 88%;
|
|
147
162
|
}
|
|
148
163
|
|
|
149
164
|
/* =========================================================================
|
|
150
165
|
Tailwind V4 — @theme block
|
|
151
|
-
Generates utilities: bg-
|
|
166
|
+
Generates utilities: bg-background, text-foreground, bg-card, etc. —
|
|
167
|
+
the same semantic names Tailwind's own config maps in every DYBO prototype.
|
|
152
168
|
Usage in consuming app:
|
|
153
169
|
@import "tailwindcss";
|
|
154
170
|
@import "@dybo-ai/design/theme.css";
|
|
155
171
|
========================================================================= */
|
|
156
172
|
@theme {
|
|
157
|
-
|
|
158
|
-
--color-
|
|
159
|
-
--color-
|
|
160
|
-
--color-
|
|
161
|
-
--color-
|
|
162
|
-
--color-
|
|
163
|
-
--color-
|
|
164
|
-
--color-
|
|
165
|
-
--color-
|
|
166
|
-
--color-
|
|
167
|
-
--color-
|
|
168
|
-
--color-
|
|
169
|
-
--color-
|
|
170
|
-
--color-
|
|
171
|
-
--color-
|
|
172
|
-
--color-
|
|
173
|
-
--color-
|
|
174
|
-
--color-
|
|
175
|
-
--color-
|
|
176
|
-
--color-
|
|
177
|
-
--color-
|
|
178
|
-
--color-
|
|
179
|
-
--color-
|
|
180
|
-
--color-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
--
|
|
184
|
-
--
|
|
185
|
-
--
|
|
186
|
-
--
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
--
|
|
190
|
-
|
|
191
|
-
--
|
|
192
|
-
--
|
|
193
|
-
--
|
|
173
|
+
--color-background: hsl(var(--background));
|
|
174
|
+
--color-foreground: hsl(var(--foreground) / <alpha-value>);
|
|
175
|
+
--color-card: hsl(var(--card));
|
|
176
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
177
|
+
--color-popover: hsl(var(--popover));
|
|
178
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
179
|
+
--color-primary: hsl(var(--primary));
|
|
180
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
181
|
+
--color-secondary: hsl(var(--secondary));
|
|
182
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
183
|
+
--color-muted: hsl(var(--muted));
|
|
184
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
185
|
+
--color-accent: hsl(var(--accent));
|
|
186
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
187
|
+
--color-destructive: hsl(var(--destructive));
|
|
188
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
189
|
+
--color-border: hsl(var(--border) / <alpha-value>);
|
|
190
|
+
--color-input: hsl(var(--input) / <alpha-value>);
|
|
191
|
+
--color-ring: hsl(var(--ring));
|
|
192
|
+
--color-success: hsl(var(--success));
|
|
193
|
+
--color-success-foreground: hsl(var(--success-foreground));
|
|
194
|
+
--color-success-background: hsl(var(--success-background));
|
|
195
|
+
--color-warning: hsl(var(--warning));
|
|
196
|
+
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
197
|
+
--color-warning-background: hsl(var(--warning-background));
|
|
198
|
+
--color-error: hsl(var(--error));
|
|
199
|
+
--color-error-foreground: hsl(var(--error-foreground));
|
|
200
|
+
--color-error-background: hsl(var(--error-background));
|
|
201
|
+
--color-info: hsl(var(--info));
|
|
202
|
+
--color-info-foreground: hsl(var(--info-foreground));
|
|
203
|
+
--color-info-background: hsl(var(--info-background));
|
|
204
|
+
--color-brand-dark-orb: hsl(var(--brand-dark-orb) / <alpha-value>);
|
|
205
|
+
--color-brand-indigo: hsl(var(--brand-indigo) / <alpha-value>);
|
|
206
|
+
--color-brand-blue-yonder: hsl(var(--brand-blue-yonder) / <alpha-value>);
|
|
207
|
+
--color-brand-gainsboro: hsl(var(--brand-gainsboro) / <alpha-value>);
|
|
208
|
+
--color-brand-cultured: hsl(var(--brand-cultured) / <alpha-value>);
|
|
209
|
+
--color-brand-dandelion: hsl(var(--brand-dandelion) / <alpha-value>);
|
|
210
|
+
--color-brand-black: hsl(var(--brand-black) / <alpha-value>);
|
|
211
|
+
--color-brand-white: hsl(var(--brand-white) / <alpha-value>);
|
|
194
212
|
|
|
195
|
-
|
|
196
|
-
--blur-dybo: 4px;
|
|
213
|
+
--font-display: var(--font-display);
|
|
197
214
|
|
|
198
|
-
|
|
199
|
-
--
|
|
215
|
+
--radius-none: 0px;
|
|
216
|
+
--radius-sm: 12px;
|
|
217
|
+
--radius-DEFAULT: 12px;
|
|
218
|
+
--radius-md: 20px;
|
|
219
|
+
--radius-lg: 20px;
|
|
220
|
+
--radius-xl: 24px;
|
|
221
|
+
--radius-2xl: 28px;
|
|
222
|
+
--radius-full: 999px;
|
|
200
223
|
|
|
201
|
-
|
|
202
|
-
--
|
|
203
|
-
--spacing-dybo-100: 8px;
|
|
204
|
-
--spacing-dybo-150: 12px;
|
|
205
|
-
--spacing-dybo-200: 16px;
|
|
206
|
-
--spacing-dybo-250: 20px;
|
|
207
|
-
--spacing-dybo-400: 32px;
|
|
224
|
+
--shadow-level-1: 0px 4px 8px #1419271f;
|
|
225
|
+
--shadow-level-2: 0px 8px 28px #14192729;
|
|
208
226
|
}
|
|
209
227
|
|
|
210
|
-
/* ---- Base
|
|
228
|
+
/* ---- Base ------------------------------------------------------------ */
|
|
211
229
|
|
|
230
|
+
* {
|
|
231
|
+
border-color: hsl(var(--border));
|
|
232
|
+
box-sizing: border-box;
|
|
233
|
+
}
|
|
234
|
+
html {
|
|
235
|
+
scrollbar-gutter: stable;
|
|
236
|
+
}
|
|
212
237
|
body {
|
|
213
|
-
font-family: var(--
|
|
214
|
-
color: var(--
|
|
215
|
-
|
|
238
|
+
font-family: var(--font-display);
|
|
239
|
+
background-color: hsl(var(--background));
|
|
240
|
+
color: hsl(var(--foreground));
|
|
241
|
+
margin: 0;
|
|
242
|
+
line-height: 1.5;
|
|
243
|
+
}
|
|
244
|
+
body,
|
|
245
|
+
[class*="bg-"],
|
|
246
|
+
[class*="text-"],
|
|
247
|
+
[class*="border-"] {
|
|
248
|
+
transition:
|
|
249
|
+
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
250
|
+
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
251
|
+
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
252
|
+
}
|
|
253
|
+
::-webkit-scrollbar {
|
|
254
|
+
width: 8px;
|
|
255
|
+
height: 8px;
|
|
256
|
+
}
|
|
257
|
+
::-webkit-scrollbar-track {
|
|
258
|
+
background: hsl(var(--secondary));
|
|
259
|
+
}
|
|
260
|
+
::-webkit-scrollbar-thumb {
|
|
261
|
+
border-radius: 999px;
|
|
262
|
+
background: hsl(var(--muted-foreground));
|
|
263
|
+
}
|
|
264
|
+
::-webkit-scrollbar-thumb:hover {
|
|
265
|
+
background: hsl(var(--foreground));
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Opacity / shadow / font utilities (not Tailwind built-ins) */
|
|
269
|
+
.opacity-intense {
|
|
270
|
+
opacity: var(--opacity-intense);
|
|
271
|
+
}
|
|
272
|
+
.opacity-medium {
|
|
273
|
+
opacity: var(--opacity-medium);
|
|
274
|
+
}
|
|
275
|
+
.opacity-light {
|
|
276
|
+
opacity: var(--opacity-light);
|
|
277
|
+
}
|
|
278
|
+
.opacity-semi-opaque {
|
|
279
|
+
opacity: var(--opacity-semi-opaque);
|
|
280
|
+
}
|
|
281
|
+
.opacity-semi-transparent {
|
|
282
|
+
opacity: var(--opacity-semi-transparent);
|
|
283
|
+
}
|
|
284
|
+
.shadow-level-1 {
|
|
285
|
+
box-shadow: var(--shadow-level-1);
|
|
286
|
+
}
|
|
287
|
+
.shadow-level-2 {
|
|
288
|
+
box-shadow: var(--shadow-level-2);
|
|
289
|
+
}
|
|
290
|
+
.font-display {
|
|
291
|
+
font-family: var(--font-display);
|
|
292
|
+
}
|
|
293
|
+
.font-body {
|
|
294
|
+
font-family: var(--font-display);
|
|
295
|
+
}
|
|
296
|
+
.line-clamp-2 {
|
|
297
|
+
display: -webkit-box;
|
|
298
|
+
-webkit-line-clamp: 2;
|
|
299
|
+
-webkit-box-orient: vertical;
|
|
300
|
+
overflow: hidden;
|
|
216
301
|
}
|
|
217
302
|
|
|
218
|
-
/* Glassmorphism card — the signature DYBO surface */
|
|
303
|
+
/* ---- Glassmorphism card — the signature DYBO surface ------------------ */
|
|
219
304
|
.dybo-glass {
|
|
220
|
-
background: var(--
|
|
221
|
-
border:
|
|
222
|
-
border-radius: var(--
|
|
223
|
-
|
|
224
|
-
backdrop-filter: blur(
|
|
225
|
-
|
|
305
|
+
background: hsl(var(--card) / 0.7);
|
|
306
|
+
border: 1px solid hsl(var(--brand-white));
|
|
307
|
+
border-radius: var(--radius-md);
|
|
308
|
+
backdrop-filter: blur(4px);
|
|
309
|
+
-webkit-backdrop-filter: blur(4px);
|
|
310
|
+
}
|
|
311
|
+
.dark .dybo-glass {
|
|
312
|
+
border-color: hsl(var(--border));
|
|
313
|
+
}
|
|
314
|
+
.dybo-glass--solid {
|
|
315
|
+
background: var(--card-bg-with-opacity);
|
|
226
316
|
}
|
|
227
317
|
|
|
228
|
-
/* Buttons
|
|
318
|
+
/* ---- Buttons ----------------------------------------------------------
|
|
319
|
+
Universal hover rule everywhere: hover:bg-primary + hover:text-primary-foreground
|
|
320
|
+
(per the non-negotiable house rule) — primary/secondary/ghost share it. */
|
|
229
321
|
.dybo-btn {
|
|
230
322
|
font-family: inherit;
|
|
231
323
|
font-size: var(--dybo-font-size-md);
|
|
232
324
|
font-weight: var(--dybo-font-weight-medium);
|
|
233
325
|
letter-spacing: 1px;
|
|
234
|
-
padding:
|
|
235
|
-
border-radius: var(--
|
|
236
|
-
border:
|
|
326
|
+
padding: 12px 32px;
|
|
327
|
+
border-radius: var(--radius-sm);
|
|
328
|
+
border: 1px solid transparent;
|
|
237
329
|
cursor: pointer;
|
|
238
330
|
transition:
|
|
239
331
|
background 0.15s,
|
|
332
|
+
color 0.15s,
|
|
240
333
|
opacity 0.15s;
|
|
241
334
|
}
|
|
242
335
|
.dybo-btn--primary {
|
|
243
|
-
background: var(--
|
|
244
|
-
color: var(--
|
|
336
|
+
background: hsl(var(--primary));
|
|
337
|
+
color: hsl(var(--primary-foreground));
|
|
245
338
|
}
|
|
246
339
|
.dybo-btn--primary:hover {
|
|
247
|
-
background: var(--
|
|
340
|
+
background: hsl(var(--primary) / 0.8);
|
|
248
341
|
}
|
|
249
342
|
.dybo-btn--secondary {
|
|
250
|
-
background: var(--
|
|
251
|
-
color: var(--
|
|
343
|
+
background: hsl(var(--secondary));
|
|
344
|
+
color: hsl(var(--secondary-foreground));
|
|
345
|
+
border-color: hsl(var(--border));
|
|
252
346
|
}
|
|
253
347
|
.dybo-btn--secondary:hover {
|
|
254
|
-
background: var(--
|
|
348
|
+
background: hsl(var(--primary));
|
|
349
|
+
color: hsl(var(--primary-foreground));
|
|
255
350
|
}
|
|
256
351
|
.dybo-btn--ghost {
|
|
257
352
|
background: transparent;
|
|
258
|
-
color: var(--
|
|
259
|
-
border:
|
|
353
|
+
color: hsl(var(--foreground));
|
|
354
|
+
border-color: hsl(var(--border));
|
|
260
355
|
}
|
|
261
356
|
.dybo-btn--ghost:hover {
|
|
262
|
-
background: var(--
|
|
357
|
+
background: hsl(var(--primary));
|
|
358
|
+
color: hsl(var(--primary-foreground));
|
|
263
359
|
}
|
|
264
360
|
.dybo-btn--danger {
|
|
265
|
-
background: var(--
|
|
266
|
-
color: var(--
|
|
361
|
+
background: hsl(var(--destructive));
|
|
362
|
+
color: hsl(var(--destructive-foreground));
|
|
267
363
|
}
|
|
268
364
|
.dybo-btn--danger:hover {
|
|
269
365
|
opacity: 0.88;
|
|
270
366
|
}
|
|
271
367
|
.dybo-btn:disabled {
|
|
272
|
-
opacity: var(--
|
|
368
|
+
opacity: var(--opacity-semi-opaque);
|
|
273
369
|
cursor: not-allowed;
|
|
274
370
|
}
|
|
371
|
+
.dybo-btn--sm {
|
|
372
|
+
padding: 8px 20px;
|
|
373
|
+
font-size: var(--dybo-font-size-sm);
|
|
374
|
+
}
|
|
375
|
+
.dybo-btn--lg {
|
|
376
|
+
padding: 14px 40px;
|
|
377
|
+
font-size: var(--dybo-font-size-lg);
|
|
378
|
+
}
|
|
275
379
|
|
|
276
|
-
/* Input
|
|
277
|
-
.dybo-input
|
|
380
|
+
/* ---- Input / Select ---------------------------------------------------- */
|
|
381
|
+
.dybo-input,
|
|
382
|
+
.dybo-select {
|
|
278
383
|
font-family: inherit;
|
|
279
384
|
font-size: var(--dybo-font-size-sm);
|
|
280
|
-
color: var(--
|
|
281
|
-
background: var(--
|
|
282
|
-
border:
|
|
283
|
-
border-radius: var(--
|
|
284
|
-
|
|
285
|
-
padding: var(--dybo-space-150) var(--dybo-space-200);
|
|
385
|
+
color: hsl(var(--foreground));
|
|
386
|
+
background: hsl(var(--input));
|
|
387
|
+
border: 1px solid hsl(var(--border));
|
|
388
|
+
border-radius: var(--radius-sm);
|
|
389
|
+
padding: 12px 16px;
|
|
286
390
|
width: 100%;
|
|
287
391
|
transition:
|
|
288
392
|
border-color 0.15s,
|
|
289
393
|
box-shadow 0.15s;
|
|
290
394
|
}
|
|
291
395
|
.dybo-input::placeholder {
|
|
292
|
-
color: var(--
|
|
396
|
+
color: hsl(var(--muted-foreground));
|
|
293
397
|
letter-spacing: 1px;
|
|
294
398
|
}
|
|
295
|
-
.dybo-input:focus
|
|
399
|
+
.dybo-input:focus,
|
|
400
|
+
.dybo-select:focus {
|
|
296
401
|
outline: none;
|
|
297
|
-
border-color: var(--
|
|
298
|
-
box-shadow: 0 0 0 3px
|
|
402
|
+
border-color: hsl(var(--ring));
|
|
403
|
+
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
|
|
404
|
+
}
|
|
405
|
+
.dybo-input--error,
|
|
406
|
+
.dybo-select--error {
|
|
407
|
+
border-color: hsl(var(--destructive)) !important;
|
|
408
|
+
box-shadow: 0 0 0 1px hsl(var(--destructive) / 0.3);
|
|
299
409
|
}
|
|
300
|
-
|
|
301
|
-
/* Select field */
|
|
302
410
|
.dybo-select {
|
|
303
|
-
font-family: inherit;
|
|
304
|
-
font-size: var(--dybo-font-size-sm);
|
|
305
|
-
color: var(--dybo-color-text-primary);
|
|
306
|
-
background: var(--dybo-surface-input);
|
|
307
|
-
border: var(--dybo-border-sm) solid var(--dybo-line-stroke);
|
|
308
|
-
border-radius: var(--dybo-radius-sm);
|
|
309
|
-
box-shadow: var(--dybo-drop-shadow);
|
|
310
|
-
padding: var(--dybo-space-150) var(--dybo-space-200);
|
|
311
|
-
width: 100%;
|
|
312
411
|
cursor: pointer;
|
|
313
412
|
appearance: none;
|
|
314
413
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23545f74' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
315
414
|
background-repeat: no-repeat;
|
|
316
415
|
background-position: right 14px center;
|
|
317
416
|
padding-right: 36px;
|
|
318
|
-
transition:
|
|
319
|
-
border-color 0.15s,
|
|
320
|
-
box-shadow 0.15s;
|
|
321
|
-
}
|
|
322
|
-
.dybo-select:focus {
|
|
323
|
-
outline: none;
|
|
324
|
-
border-color: var(--dybo-color-brand-blue-yonder);
|
|
325
|
-
box-shadow: 0 0 0 3px rgba(88, 120, 167, 0.18);
|
|
326
417
|
}
|
|
327
418
|
|
|
328
|
-
/* Type presets
|
|
419
|
+
/* ---- Type presets ------------------------------------------------------
|
|
420
|
+
Card titles are always font-normal — hierarchy comes from size, never weight. */
|
|
329
421
|
.dybo-title {
|
|
330
422
|
font-size: var(--dybo-font-size-xl);
|
|
331
423
|
font-weight: var(--dybo-font-weight-regular);
|
|
332
424
|
line-height: 1.35;
|
|
333
425
|
letter-spacing: 1px;
|
|
334
426
|
}
|
|
427
|
+
.dybo-title.dybo-title--bold {
|
|
428
|
+
font-weight: var(--dybo-font-weight-bold);
|
|
429
|
+
}
|
|
335
430
|
.dybo-subtitle {
|
|
336
431
|
font-size: var(--dybo-font-size-lg);
|
|
337
432
|
font-weight: var(--dybo-font-weight-regular);
|
|
338
433
|
line-height: 1.35;
|
|
339
434
|
letter-spacing: 1px;
|
|
340
435
|
}
|
|
436
|
+
.dybo-subtitle.dybo-subtitle--bold {
|
|
437
|
+
font-weight: var(--dybo-font-weight-bold);
|
|
438
|
+
}
|
|
341
439
|
.dybo-body {
|
|
342
440
|
font-size: var(--dybo-font-size-md);
|
|
343
441
|
font-weight: var(--dybo-font-weight-medium);
|
|
@@ -366,91 +464,127 @@ body {
|
|
|
366
464
|
letter-spacing: 1px;
|
|
367
465
|
text-transform: uppercase;
|
|
368
466
|
}
|
|
467
|
+
.dybo-uppercase.dybo-uppercase--semibold {
|
|
468
|
+
font-weight: var(--dybo-font-weight-semibold);
|
|
469
|
+
}
|
|
369
470
|
|
|
370
|
-
/* Status badges
|
|
471
|
+
/* ---- Status badges ------------------------------------------------------
|
|
472
|
+
`resolved`→info, `high`→purple tag, `medium`→amber tag, `brand`→brand tint,
|
|
473
|
+
`success`/`warning`/`danger` map directly to the semantic tokens, `soon`
|
|
474
|
+
backs the "Available Soon" pattern (same look as `warning`). */
|
|
371
475
|
.dybo-badge {
|
|
372
476
|
display: inline-block;
|
|
373
477
|
padding: 2px 10px;
|
|
374
|
-
border-radius: var(--
|
|
478
|
+
border-radius: var(--radius-full);
|
|
375
479
|
font-size: var(--dybo-font-size-xs);
|
|
376
480
|
font-weight: var(--dybo-font-weight-semibold);
|
|
377
481
|
letter-spacing: 1px;
|
|
378
482
|
}
|
|
379
483
|
.dybo-badge--resolved {
|
|
380
|
-
color: var(--
|
|
381
|
-
background: var(--
|
|
484
|
+
color: hsl(var(--info));
|
|
485
|
+
background: hsl(var(--info-background));
|
|
382
486
|
}
|
|
383
487
|
.dybo-badge--high {
|
|
384
|
-
color: var(--
|
|
385
|
-
background: var(--
|
|
488
|
+
color: hsl(var(--tag-purple-foreground));
|
|
489
|
+
background: hsl(var(--tag-purple-background));
|
|
386
490
|
}
|
|
387
491
|
.dybo-badge--medium {
|
|
388
|
-
color: var(--
|
|
389
|
-
background: var(--
|
|
492
|
+
color: hsl(var(--tag-amber-foreground));
|
|
493
|
+
background: hsl(var(--tag-amber-background));
|
|
390
494
|
}
|
|
391
495
|
.dybo-badge--brand {
|
|
392
|
-
color: var(--
|
|
393
|
-
background: var(--
|
|
496
|
+
color: hsl(var(--foreground));
|
|
497
|
+
background: hsl(var(--brand-cultured));
|
|
498
|
+
}
|
|
499
|
+
.dark .dybo-badge--brand {
|
|
500
|
+
color: hsl(var(--foreground));
|
|
501
|
+
background: hsl(var(--accent) / 0.35);
|
|
394
502
|
}
|
|
395
503
|
.dybo-badge--success {
|
|
396
|
-
color: var(--
|
|
397
|
-
background: var(--
|
|
504
|
+
color: hsl(var(--success-foreground));
|
|
505
|
+
background: hsl(var(--success-background));
|
|
398
506
|
}
|
|
399
|
-
.dybo-badge--warning
|
|
400
|
-
|
|
401
|
-
|
|
507
|
+
.dybo-badge--warning,
|
|
508
|
+
.dybo-badge--soon {
|
|
509
|
+
color: hsl(var(--warning));
|
|
510
|
+
background: hsl(var(--warning-background));
|
|
402
511
|
}
|
|
403
512
|
.dybo-badge--danger {
|
|
404
|
-
color: var(--
|
|
405
|
-
background: var(--
|
|
513
|
+
color: hsl(var(--destructive));
|
|
514
|
+
background: hsl(var(--destructive) / 0.1);
|
|
406
515
|
}
|
|
407
516
|
|
|
408
|
-
/* ---- Alert
|
|
517
|
+
/* ---- Alert (transient, inline) ------------------------------------------ */
|
|
409
518
|
.dybo-alert {
|
|
410
519
|
display: flex;
|
|
411
520
|
align-items: flex-start;
|
|
412
|
-
gap:
|
|
413
|
-
padding:
|
|
414
|
-
border-radius: var(--
|
|
521
|
+
gap: 12px;
|
|
522
|
+
padding: 12px 16px;
|
|
523
|
+
border-radius: var(--radius-sm);
|
|
415
524
|
border-left: 4px solid transparent;
|
|
416
525
|
font-size: var(--dybo-font-size-sm);
|
|
417
526
|
font-weight: var(--dybo-font-weight-medium);
|
|
418
527
|
line-height: 1.5;
|
|
419
528
|
}
|
|
420
529
|
.dybo-alert--success {
|
|
421
|
-
background: var(--
|
|
422
|
-
border-color: var(--
|
|
423
|
-
color:
|
|
530
|
+
background: hsl(var(--success-background));
|
|
531
|
+
border-color: hsl(var(--success));
|
|
532
|
+
color: hsl(var(--foreground));
|
|
424
533
|
}
|
|
425
534
|
.dybo-alert--warning {
|
|
426
|
-
background: var(--
|
|
427
|
-
border-color: var(--
|
|
428
|
-
color:
|
|
535
|
+
background: hsl(var(--warning-background));
|
|
536
|
+
border-color: hsl(var(--warning));
|
|
537
|
+
color: hsl(var(--foreground));
|
|
429
538
|
}
|
|
430
539
|
.dybo-alert--danger {
|
|
431
|
-
background: var(--
|
|
432
|
-
border-color: var(--
|
|
433
|
-
color: var(--
|
|
540
|
+
background: hsl(var(--destructive) / 0.06);
|
|
541
|
+
border-color: hsl(var(--destructive));
|
|
542
|
+
color: hsl(var(--foreground));
|
|
434
543
|
}
|
|
435
544
|
.dybo-alert--info {
|
|
436
|
-
background: var(--
|
|
437
|
-
border-color: var(--
|
|
438
|
-
color:
|
|
545
|
+
background: hsl(var(--info-background));
|
|
546
|
+
border-color: hsl(var(--info));
|
|
547
|
+
color: hsl(var(--foreground));
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/* ---- Warning / blocking-error banners (persistent, page-level) --------- */
|
|
551
|
+
.dybo-error-banner {
|
|
552
|
+
border-radius: var(--radius-sm);
|
|
553
|
+
padding: 16px;
|
|
554
|
+
display: flex;
|
|
555
|
+
align-items: flex-start;
|
|
556
|
+
gap: 12px;
|
|
557
|
+
background: hsl(var(--destructive) / 0.06);
|
|
558
|
+
border: 1px solid hsl(var(--destructive) / 0.25);
|
|
559
|
+
}
|
|
560
|
+
.dybo-dropzone--error {
|
|
561
|
+
border: 1px dashed hsl(var(--destructive) / 0.55);
|
|
562
|
+
background: hsl(var(--destructive) / 0.05);
|
|
563
|
+
border-radius: var(--radius-sm);
|
|
564
|
+
}
|
|
565
|
+
.dybo-error-link {
|
|
566
|
+
color: hsl(var(--foreground));
|
|
567
|
+
font-weight: 700;
|
|
568
|
+
text-decoration: underline;
|
|
569
|
+
text-underline-offset: 2px;
|
|
570
|
+
cursor: pointer;
|
|
439
571
|
}
|
|
440
572
|
|
|
441
|
-
/* ---- App shell layout
|
|
573
|
+
/* ---- App shell layout ----------------------------------------------------
|
|
574
|
+
Kept for backward compatibility while AppShell/Sidebar/TopBar/NavItem are
|
|
575
|
+
rewritten to the real 80px-icon-rail + 64px-header shell (see IconRail
|
|
576
|
+
below, already correct) — colors repointed, structure unchanged for now. */
|
|
442
577
|
.dybo-app-shell {
|
|
443
578
|
display: flex;
|
|
444
579
|
min-height: 100vh;
|
|
445
|
-
background: var(--
|
|
580
|
+
background: hsl(var(--background));
|
|
446
581
|
}
|
|
447
582
|
|
|
448
|
-
/* ---- Sidebar ---- */
|
|
449
583
|
.dybo-sidebar {
|
|
450
|
-
width:
|
|
584
|
+
width: 240px;
|
|
451
585
|
flex-shrink: 0;
|
|
452
|
-
background: var(--
|
|
453
|
-
color: var(--
|
|
586
|
+
background: hsl(var(--brand-dark-orb));
|
|
587
|
+
color: hsl(var(--brand-white) / 0.75);
|
|
454
588
|
display: flex;
|
|
455
589
|
flex-direction: column;
|
|
456
590
|
position: sticky;
|
|
@@ -460,7 +594,7 @@ body {
|
|
|
460
594
|
}
|
|
461
595
|
.dybo-sidebar__brand {
|
|
462
596
|
padding: 22px 20px 18px;
|
|
463
|
-
border-bottom: 1px solid
|
|
597
|
+
border-bottom: 1px solid hsl(var(--brand-white) / 0.07);
|
|
464
598
|
}
|
|
465
599
|
.dybo-sidebar__nav {
|
|
466
600
|
padding: 14px 12px;
|
|
@@ -473,26 +607,25 @@ body {
|
|
|
473
607
|
font-size: var(--dybo-font-size-xs);
|
|
474
608
|
text-transform: uppercase;
|
|
475
609
|
letter-spacing: 1px;
|
|
476
|
-
color:
|
|
610
|
+
color: hsl(var(--brand-white) / 0.45);
|
|
477
611
|
padding: 18px 12px 7px;
|
|
478
612
|
font-weight: var(--dybo-font-weight-bold);
|
|
479
613
|
}
|
|
480
614
|
.dybo-sidebar__footer {
|
|
481
615
|
padding: 14px 16px;
|
|
482
|
-
border-top: 1px solid
|
|
616
|
+
border-top: 1px solid hsl(var(--brand-white) / 0.07);
|
|
483
617
|
display: flex;
|
|
484
618
|
flex-direction: column;
|
|
485
619
|
gap: 10px;
|
|
486
620
|
}
|
|
487
621
|
|
|
488
|
-
/* ---- Nav item ---- */
|
|
489
622
|
.dybo-nav-item {
|
|
490
623
|
display: flex;
|
|
491
624
|
align-items: center;
|
|
492
625
|
gap: 10px;
|
|
493
626
|
padding: 9px 12px;
|
|
494
|
-
border-radius:
|
|
495
|
-
color: var(--
|
|
627
|
+
border-radius: var(--radius-sm);
|
|
628
|
+
color: hsl(var(--brand-white) / 0.75);
|
|
496
629
|
font-size: var(--dybo-font-size-sm);
|
|
497
630
|
font-weight: var(--dybo-font-weight-medium);
|
|
498
631
|
text-decoration: none;
|
|
@@ -506,12 +639,12 @@ body {
|
|
|
506
639
|
color 0.15s;
|
|
507
640
|
}
|
|
508
641
|
.dybo-nav-item:hover {
|
|
509
|
-
background: var(--
|
|
510
|
-
color:
|
|
642
|
+
background: hsl(var(--brand-white) / 0.08);
|
|
643
|
+
color: hsl(var(--brand-white));
|
|
511
644
|
}
|
|
512
645
|
.dybo-nav-item--active {
|
|
513
|
-
background: var(--
|
|
514
|
-
color:
|
|
646
|
+
background: hsl(var(--secondary));
|
|
647
|
+
color: hsl(var(--secondary-foreground));
|
|
515
648
|
}
|
|
516
649
|
.dybo-nav-item__dot {
|
|
517
650
|
width: 7px;
|
|
@@ -525,26 +658,24 @@ body {
|
|
|
525
658
|
opacity: 1;
|
|
526
659
|
}
|
|
527
660
|
|
|
528
|
-
/* ---- Top bar ---- */
|
|
529
661
|
.dybo-topbar {
|
|
530
|
-
height:
|
|
531
|
-
background: var(--
|
|
532
|
-
border-bottom:
|
|
662
|
+
height: 64px;
|
|
663
|
+
background: hsl(var(--background));
|
|
664
|
+
border-bottom: 1px solid hsl(var(--border));
|
|
533
665
|
display: flex;
|
|
534
666
|
align-items: center;
|
|
535
|
-
padding: 0
|
|
667
|
+
padding: 0 24px;
|
|
536
668
|
gap: 12px;
|
|
537
669
|
flex-shrink: 0;
|
|
538
670
|
}
|
|
539
671
|
.dybo-topbar__title {
|
|
540
|
-
font-size:
|
|
541
|
-
font-weight: var(--dybo-font-weight-
|
|
542
|
-
color:
|
|
672
|
+
font-size: var(--dybo-font-size-lg);
|
|
673
|
+
font-weight: var(--dybo-font-weight-bold);
|
|
674
|
+
color: hsl(var(--foreground));
|
|
543
675
|
letter-spacing: -0.2px;
|
|
544
676
|
flex-grow: 1;
|
|
545
677
|
}
|
|
546
678
|
|
|
547
|
-
/* ---- Main content area ---- */
|
|
548
679
|
.dybo-main {
|
|
549
680
|
flex-grow: 1;
|
|
550
681
|
min-width: 0;
|
|
@@ -552,38 +683,57 @@ body {
|
|
|
552
683
|
flex-direction: column;
|
|
553
684
|
}
|
|
554
685
|
.dybo-content {
|
|
555
|
-
padding:
|
|
686
|
+
padding: 32px 16px;
|
|
556
687
|
flex-grow: 1;
|
|
557
688
|
}
|
|
558
689
|
|
|
559
|
-
/* ---- Data table
|
|
690
|
+
/* ---- Data table --------------------------------------------------------- */
|
|
560
691
|
.dybo-table-wrap {
|
|
561
692
|
overflow-x: auto;
|
|
562
|
-
border-radius: var(--
|
|
693
|
+
border-radius: var(--radius-sm);
|
|
694
|
+
}
|
|
695
|
+
.dybo-table__toolbar {
|
|
696
|
+
display: flex;
|
|
697
|
+
align-items: center;
|
|
698
|
+
gap: 8px;
|
|
699
|
+
padding: 16px;
|
|
700
|
+
flex-wrap: wrap;
|
|
701
|
+
border-bottom: 1px solid hsl(var(--border));
|
|
702
|
+
}
|
|
703
|
+
.dybo-table__sort-btn {
|
|
704
|
+
display: inline-flex;
|
|
705
|
+
align-items: center;
|
|
706
|
+
gap: 6px;
|
|
707
|
+
background: transparent;
|
|
708
|
+
border: none;
|
|
709
|
+
padding: 0;
|
|
710
|
+
font: inherit;
|
|
711
|
+
color: inherit;
|
|
712
|
+
cursor: pointer;
|
|
563
713
|
}
|
|
564
714
|
.dybo-table {
|
|
565
715
|
border-collapse: collapse;
|
|
566
716
|
width: 100%;
|
|
567
717
|
font-size: var(--dybo-font-size-sm);
|
|
568
|
-
background: var(--
|
|
718
|
+
background: hsl(var(--card) / 0.7);
|
|
569
719
|
}
|
|
570
720
|
.dybo-table th,
|
|
571
721
|
.dybo-table td {
|
|
572
722
|
padding: 10px 14px;
|
|
573
|
-
border-bottom: 1px solid
|
|
723
|
+
border-bottom: 1px solid hsl(var(--border) / 0.6);
|
|
574
724
|
white-space: nowrap;
|
|
575
725
|
}
|
|
576
726
|
.dybo-table thead th {
|
|
577
727
|
position: sticky;
|
|
578
728
|
top: 0;
|
|
579
|
-
background:
|
|
580
|
-
color: var(--
|
|
729
|
+
background: hsl(var(--background) / 0.95);
|
|
730
|
+
color: hsl(var(--foreground) / 0.64);
|
|
581
731
|
font-weight: var(--dybo-font-weight-semibold);
|
|
582
732
|
font-size: var(--dybo-font-size-xs);
|
|
583
733
|
text-transform: uppercase;
|
|
584
734
|
letter-spacing: 0.5px;
|
|
585
735
|
text-align: right;
|
|
586
|
-
border-bottom: 2px solid
|
|
736
|
+
border-bottom: 2px solid hsl(var(--border));
|
|
587
737
|
}
|
|
588
738
|
.dybo-table thead th.left,
|
|
589
739
|
.dybo-table td.left {
|
|
@@ -591,35 +741,35 @@ body {
|
|
|
591
741
|
}
|
|
592
742
|
.dybo-table td {
|
|
593
743
|
text-align: right;
|
|
594
|
-
color: var(--
|
|
744
|
+
color: hsl(var(--foreground) / 0.64);
|
|
595
745
|
font-variant-numeric: tabular-nums;
|
|
596
746
|
}
|
|
597
747
|
.dybo-table td.left {
|
|
598
|
-
color: var(--
|
|
748
|
+
color: hsl(var(--foreground));
|
|
599
749
|
font-weight: var(--dybo-font-weight-medium);
|
|
600
750
|
}
|
|
601
751
|
.dybo-table tbody tr:nth-child(even) {
|
|
602
|
-
background:
|
|
752
|
+
background: hsl(var(--card) / 0.45);
|
|
603
753
|
}
|
|
604
754
|
.dybo-table tbody tr:hover {
|
|
605
|
-
background:
|
|
755
|
+
background: hsl(var(--foreground) / 0.05);
|
|
606
756
|
}
|
|
607
757
|
.dybo-table tbody tr.dybo-table__row--clickable {
|
|
608
758
|
cursor: pointer;
|
|
609
759
|
}
|
|
610
760
|
|
|
611
|
-
/* ---- Tabs
|
|
761
|
+
/* ---- Tabs (retarget candidate — see UnderlineTabs in a later pass) ------ */
|
|
612
762
|
.dybo-tabs {
|
|
613
763
|
display: flex;
|
|
614
764
|
flex-wrap: wrap;
|
|
615
765
|
gap: 4px;
|
|
616
|
-
border-bottom: 2px solid
|
|
617
|
-
margin-bottom:
|
|
766
|
+
border-bottom: 2px solid hsl(var(--border));
|
|
767
|
+
margin-bottom: 16px;
|
|
618
768
|
}
|
|
619
769
|
.dybo-tab {
|
|
620
770
|
border: none;
|
|
621
771
|
background: transparent;
|
|
622
|
-
color: var(--
|
|
772
|
+
color: hsl(var(--foreground) / 0.64);
|
|
623
773
|
font-family: inherit;
|
|
624
774
|
font-weight: var(--dybo-font-weight-semibold);
|
|
625
775
|
font-size: var(--dybo-font-size-sm);
|
|
@@ -633,25 +783,25 @@ body {
|
|
|
633
783
|
background 0.15s;
|
|
634
784
|
}
|
|
635
785
|
.dybo-tab:hover {
|
|
636
|
-
color: var(--
|
|
637
|
-
background:
|
|
786
|
+
color: hsl(var(--foreground));
|
|
787
|
+
background: hsl(var(--accent) / 0.07);
|
|
638
788
|
}
|
|
639
789
|
.dybo-tab--active {
|
|
640
|
-
color: var(--
|
|
641
|
-
border-bottom-color: var(--
|
|
790
|
+
color: hsl(var(--foreground));
|
|
791
|
+
border-bottom-color: hsl(var(--accent));
|
|
642
792
|
}
|
|
643
793
|
|
|
644
|
-
/* ---- Overview grid
|
|
794
|
+
/* ---- Overview grid ------------------------------------------------------- */
|
|
645
795
|
.dybo-overview-grid {
|
|
646
796
|
display: grid;
|
|
647
797
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
648
798
|
gap: 1px;
|
|
649
|
-
background:
|
|
650
|
-
border-radius: var(--
|
|
799
|
+
background: hsl(var(--border));
|
|
800
|
+
border-radius: var(--radius-sm);
|
|
651
801
|
overflow: hidden;
|
|
652
802
|
}
|
|
653
803
|
.dybo-overview-field {
|
|
654
|
-
background: var(--
|
|
804
|
+
background: hsl(var(--card) / 0.9);
|
|
655
805
|
padding: 12px 18px;
|
|
656
806
|
display: flex;
|
|
657
807
|
flex-direction: column;
|
|
@@ -661,48 +811,50 @@ body {
|
|
|
661
811
|
font-size: var(--dybo-font-size-xs);
|
|
662
812
|
text-transform: uppercase;
|
|
663
813
|
letter-spacing: 0.5px;
|
|
664
|
-
color: var(--
|
|
814
|
+
color: hsl(var(--foreground) / 0.64);
|
|
665
815
|
font-weight: var(--dybo-font-weight-semibold);
|
|
666
816
|
}
|
|
667
817
|
.dybo-overview-field__value {
|
|
668
818
|
font-size: var(--dybo-font-size-md);
|
|
669
|
-
color: var(--
|
|
819
|
+
color: hsl(var(--foreground));
|
|
670
820
|
font-weight: var(--dybo-font-weight-medium);
|
|
671
821
|
}
|
|
672
822
|
|
|
673
|
-
/* ---- Login card
|
|
823
|
+
/* ---- Login card ----------------------------------------------------------- */
|
|
674
824
|
.dybo-login-wrap {
|
|
675
825
|
min-height: 100vh;
|
|
676
826
|
display: flex;
|
|
677
827
|
align-items: center;
|
|
678
828
|
justify-content: center;
|
|
679
|
-
background: var(--
|
|
829
|
+
background: hsl(var(--background));
|
|
680
830
|
padding: 24px;
|
|
681
831
|
}
|
|
682
832
|
.dybo-login-card {
|
|
683
833
|
width: 100%;
|
|
684
834
|
max-width: 380px;
|
|
685
835
|
padding: 36px 32px;
|
|
686
|
-
background: var(--
|
|
687
|
-
border:
|
|
688
|
-
border-radius: var(--
|
|
689
|
-
box-shadow: var(--dybo-elevation-card);
|
|
836
|
+
background: hsl(var(--card) / 0.7);
|
|
837
|
+
border: 1px solid hsl(var(--brand-white));
|
|
838
|
+
border-radius: var(--radius-md);
|
|
690
839
|
backdrop-filter: blur(16px);
|
|
691
840
|
-webkit-backdrop-filter: blur(16px);
|
|
692
841
|
}
|
|
842
|
+
.dark .dybo-login-card {
|
|
843
|
+
border-color: hsl(var(--border));
|
|
844
|
+
}
|
|
693
845
|
.dybo-login-card__subtitle {
|
|
694
846
|
text-align: center;
|
|
695
|
-
color: var(--
|
|
847
|
+
color: hsl(var(--foreground) / 0.64);
|
|
696
848
|
font-size: var(--dybo-font-size-sm);
|
|
697
849
|
margin-bottom: 24px;
|
|
698
850
|
margin-top: 4px;
|
|
699
851
|
}
|
|
700
852
|
|
|
701
|
-
/* ---- Modal
|
|
853
|
+
/* ---- Modal --------------------------------------------------------------- */
|
|
702
854
|
.dybo-modal-backdrop {
|
|
703
855
|
position: fixed;
|
|
704
856
|
inset: 0;
|
|
705
|
-
background:
|
|
857
|
+
background: hsl(var(--overlay-scrim) / 0.45);
|
|
706
858
|
backdrop-filter: blur(2px);
|
|
707
859
|
-webkit-backdrop-filter: blur(2px);
|
|
708
860
|
display: flex;
|
|
@@ -714,34 +866,37 @@ body {
|
|
|
714
866
|
.dybo-modal {
|
|
715
867
|
width: 100%;
|
|
716
868
|
max-width: 520px;
|
|
717
|
-
background: var(--
|
|
718
|
-
border:
|
|
719
|
-
border-radius: var(--
|
|
720
|
-
box-shadow:
|
|
869
|
+
background: var(--card-bg-with-opacity);
|
|
870
|
+
border: 1px solid hsl(var(--brand-white));
|
|
871
|
+
border-radius: var(--radius-md);
|
|
872
|
+
box-shadow: var(--shadow-level-2);
|
|
721
873
|
display: flex;
|
|
722
874
|
flex-direction: column;
|
|
723
875
|
max-height: calc(100vh - 48px);
|
|
724
876
|
overflow: hidden;
|
|
725
877
|
}
|
|
878
|
+
.dark .dybo-modal {
|
|
879
|
+
border-color: hsl(var(--border));
|
|
880
|
+
}
|
|
726
881
|
.dybo-modal__header {
|
|
727
882
|
display: flex;
|
|
728
883
|
align-items: center;
|
|
729
884
|
justify-content: space-between;
|
|
730
885
|
padding: 20px 24px 16px;
|
|
731
|
-
border-bottom: 1px solid
|
|
886
|
+
border-bottom: 1px solid hsl(var(--border) / 0.6);
|
|
732
887
|
flex-shrink: 0;
|
|
733
888
|
}
|
|
734
889
|
.dybo-modal__title {
|
|
735
890
|
font-size: var(--dybo-font-size-lg);
|
|
736
891
|
font-weight: var(--dybo-font-weight-semibold);
|
|
737
|
-
color: var(--
|
|
892
|
+
color: hsl(var(--foreground));
|
|
738
893
|
margin: 0;
|
|
739
894
|
}
|
|
740
895
|
.dybo-modal__close {
|
|
741
896
|
background: transparent;
|
|
742
897
|
border: none;
|
|
743
898
|
cursor: pointer;
|
|
744
|
-
color: var(--
|
|
899
|
+
color: hsl(var(--foreground) / 0.64);
|
|
745
900
|
padding: 4px;
|
|
746
901
|
border-radius: 6px;
|
|
747
902
|
display: flex;
|
|
@@ -752,8 +907,8 @@ body {
|
|
|
752
907
|
color 0.15s;
|
|
753
908
|
}
|
|
754
909
|
.dybo-modal__close:hover {
|
|
755
|
-
background:
|
|
756
|
-
color: var(--
|
|
910
|
+
background: hsl(var(--border) / 0.3);
|
|
911
|
+
color: hsl(var(--foreground));
|
|
757
912
|
}
|
|
758
913
|
.dybo-modal__body {
|
|
759
914
|
padding: 24px;
|
|
@@ -762,13 +917,12 @@ body {
|
|
|
762
917
|
}
|
|
763
918
|
.dybo-modal__footer {
|
|
764
919
|
padding: 16px 24px 20px;
|
|
765
|
-
border-top: 1px solid
|
|
920
|
+
border-top: 1px solid hsl(var(--border) / 0.6);
|
|
766
921
|
display: flex;
|
|
767
922
|
gap: 12px;
|
|
768
923
|
justify-content: flex-end;
|
|
769
924
|
flex-shrink: 0;
|
|
770
925
|
}
|
|
771
|
-
|
|
772
926
|
.dybo-modal .dybo-input,
|
|
773
927
|
.dybo-modal .dybo-select,
|
|
774
928
|
.dybo-drawer-panel .dybo-input,
|
|
@@ -776,23 +930,22 @@ body {
|
|
|
776
930
|
background: hsl(var(--popover));
|
|
777
931
|
}
|
|
778
932
|
|
|
779
|
-
/* ---- Drawer (
|
|
933
|
+
/* ---- Drawer (right/left panel) -------------------------------------------- */
|
|
780
934
|
.dybo-drawer-backdrop {
|
|
781
935
|
position: fixed;
|
|
782
936
|
inset: 0;
|
|
783
937
|
z-index: 1000;
|
|
784
|
-
background: var(--
|
|
938
|
+
background: hsl(var(--overlay-scrim) / 0.3);
|
|
785
939
|
}
|
|
786
940
|
.dybo-drawer-panel {
|
|
787
941
|
position: fixed;
|
|
788
942
|
top: 0;
|
|
789
943
|
height: 100%;
|
|
790
|
-
width: min(
|
|
944
|
+
width: min(440px, 90vw);
|
|
791
945
|
max-width: 100%;
|
|
792
946
|
background: hsl(var(--card));
|
|
793
947
|
color: hsl(var(--card-foreground));
|
|
794
|
-
|
|
795
|
-
box-shadow: var(--dybo-portal-shadow-level-2);
|
|
948
|
+
box-shadow: var(--shadow-level-2);
|
|
796
949
|
display: flex;
|
|
797
950
|
flex-direction: column;
|
|
798
951
|
z-index: 1001;
|
|
@@ -800,11 +953,11 @@ body {
|
|
|
800
953
|
}
|
|
801
954
|
.dybo-drawer-panel--right {
|
|
802
955
|
right: 0;
|
|
803
|
-
border-left:
|
|
956
|
+
border-left: 1px solid hsl(var(--border));
|
|
804
957
|
}
|
|
805
958
|
.dybo-drawer-panel--left {
|
|
806
959
|
left: 0;
|
|
807
|
-
border-right:
|
|
960
|
+
border-right: 1px solid hsl(var(--border));
|
|
808
961
|
}
|
|
809
962
|
.dybo-drawer-panel__header {
|
|
810
963
|
display: flex;
|
|
@@ -817,14 +970,14 @@ body {
|
|
|
817
970
|
.dybo-drawer-panel__title {
|
|
818
971
|
font-size: var(--dybo-font-size-lg);
|
|
819
972
|
font-weight: var(--dybo-font-weight-semibold);
|
|
820
|
-
color: var(--
|
|
973
|
+
color: hsl(var(--foreground));
|
|
821
974
|
margin: 0;
|
|
822
975
|
}
|
|
823
976
|
.dybo-drawer-panel__close {
|
|
824
977
|
background: transparent;
|
|
825
978
|
border: none;
|
|
826
979
|
cursor: pointer;
|
|
827
|
-
color: var(--
|
|
980
|
+
color: hsl(var(--foreground) / 0.64);
|
|
828
981
|
padding: 4px;
|
|
829
982
|
border-radius: 6px;
|
|
830
983
|
display: flex;
|
|
@@ -835,8 +988,8 @@ body {
|
|
|
835
988
|
color 0.15s;
|
|
836
989
|
}
|
|
837
990
|
.dybo-drawer-panel__close:hover {
|
|
838
|
-
background:
|
|
839
|
-
color: var(--
|
|
991
|
+
background: hsl(var(--border) / 0.3);
|
|
992
|
+
color: hsl(var(--foreground));
|
|
840
993
|
}
|
|
841
994
|
.dybo-drawer-panel__body {
|
|
842
995
|
flex: 1;
|
|
@@ -859,18 +1012,13 @@ body {
|
|
|
859
1012
|
}
|
|
860
1013
|
|
|
861
1014
|
/* =========================================================================
|
|
862
|
-
|
|
1015
|
+
Ticket / operator patterns — priority, ticket status, labels, channels,
|
|
1016
|
+
signals, queue status, all copied verbatim (light + dark) from the
|
|
1017
|
+
canonical designSystem/tokens.css so this is a single source of truth.
|
|
863
1018
|
========================================================================= */
|
|
864
1019
|
|
|
865
1020
|
.dybo-surface-operator {
|
|
866
|
-
background:
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
.dybo-shadow-level-1 {
|
|
870
|
-
box-shadow: var(--dybo-portal-shadow-level-1);
|
|
871
|
-
}
|
|
872
|
-
.dybo-shadow-level-2 {
|
|
873
|
-
box-shadow: var(--dybo-portal-shadow-level-2);
|
|
1021
|
+
background: hsl(0 0% 89.4%);
|
|
874
1022
|
}
|
|
875
1023
|
|
|
876
1024
|
/* Nav tabs — uppercase pill tabs */
|
|
@@ -885,17 +1033,17 @@ body {
|
|
|
885
1033
|
justify-content: center;
|
|
886
1034
|
height: 26px;
|
|
887
1035
|
padding: 0 12px;
|
|
888
|
-
border-radius:
|
|
1036
|
+
border-radius: 20px;
|
|
889
1037
|
font-size: var(--dybo-font-size-xs);
|
|
890
1038
|
font-weight: var(--dybo-font-weight-medium);
|
|
891
1039
|
letter-spacing: 1px;
|
|
892
1040
|
text-transform: uppercase;
|
|
893
|
-
color: var(--
|
|
894
|
-
opacity:
|
|
1041
|
+
color: hsl(var(--foreground));
|
|
1042
|
+
opacity: 0.64;
|
|
895
1043
|
border: 1px solid transparent;
|
|
896
1044
|
background: transparent;
|
|
897
|
-
backdrop-filter: blur(2px);
|
|
898
1045
|
-webkit-backdrop-filter: blur(2px);
|
|
1046
|
+
backdrop-filter: blur(2px);
|
|
899
1047
|
transition: all 0.2s;
|
|
900
1048
|
white-space: nowrap;
|
|
901
1049
|
cursor: pointer;
|
|
@@ -906,19 +1054,23 @@ body {
|
|
|
906
1054
|
}
|
|
907
1055
|
.dybo-navtab--active {
|
|
908
1056
|
opacity: 1;
|
|
909
|
-
background:
|
|
910
|
-
border-color: var(--
|
|
1057
|
+
background: hsl(var(--input) / 0.7);
|
|
1058
|
+
border-color: hsl(var(--border));
|
|
1059
|
+
}
|
|
1060
|
+
.dark .dybo-navtab--active {
|
|
1061
|
+
background: hsl(var(--card));
|
|
1062
|
+
border-color: hsl(var(--border));
|
|
911
1063
|
}
|
|
912
1064
|
|
|
913
|
-
/* Priority badges */
|
|
1065
|
+
/* Priority badges (semaphore) */
|
|
914
1066
|
.dybo-priority {
|
|
915
1067
|
display: inline-flex;
|
|
916
1068
|
align-items: center;
|
|
917
1069
|
gap: 5px;
|
|
918
1070
|
padding: 2px 10px;
|
|
919
|
-
border-radius:
|
|
1071
|
+
border-radius: 999px;
|
|
920
1072
|
font-size: var(--dybo-font-size-xs);
|
|
921
|
-
font-weight:
|
|
1073
|
+
font-weight: 600;
|
|
922
1074
|
line-height: 1.4;
|
|
923
1075
|
white-space: nowrap;
|
|
924
1076
|
}
|
|
@@ -926,60 +1078,220 @@ body {
|
|
|
926
1078
|
content: "";
|
|
927
1079
|
width: 6px;
|
|
928
1080
|
height: 6px;
|
|
929
|
-
border-radius:
|
|
1081
|
+
border-radius: 999px;
|
|
930
1082
|
background: currentColor;
|
|
931
1083
|
flex-shrink: 0;
|
|
932
1084
|
}
|
|
933
1085
|
.dybo-priority--urgent {
|
|
934
|
-
background:
|
|
935
|
-
color:
|
|
1086
|
+
background: hsl(355 95% 60% / 0.12);
|
|
1087
|
+
color: hsl(355 74% 45%);
|
|
936
1088
|
}
|
|
937
1089
|
.dybo-priority--high {
|
|
938
|
-
background:
|
|
939
|
-
color:
|
|
1090
|
+
background: hsl(30 100% 50% / 0.15);
|
|
1091
|
+
color: hsl(30 100% 33%);
|
|
940
1092
|
}
|
|
941
1093
|
.dybo-priority--medium {
|
|
942
|
-
background:
|
|
943
|
-
color:
|
|
1094
|
+
background: hsl(45 90% 50% / 0.2);
|
|
1095
|
+
color: hsl(38 92% 32%);
|
|
944
1096
|
}
|
|
945
1097
|
.dybo-priority--low {
|
|
946
|
-
background:
|
|
947
|
-
color:
|
|
1098
|
+
background: hsl(216 16% 65% / 0.24);
|
|
1099
|
+
color: hsl(216 22% 40%);
|
|
948
1100
|
}
|
|
949
1101
|
.dybo-priority--none {
|
|
950
|
-
background:
|
|
951
|
-
color:
|
|
1102
|
+
background: hsl(216 12% 78% / 0.35);
|
|
1103
|
+
color: hsl(216 12% 46%);
|
|
952
1104
|
}
|
|
953
1105
|
.dybo-priority--none::before {
|
|
954
1106
|
opacity: 0.45;
|
|
955
1107
|
}
|
|
1108
|
+
.dark .dybo-priority--urgent {
|
|
1109
|
+
background: hsl(0 78% 55% / 0.22);
|
|
1110
|
+
color: hsl(0 90% 78%);
|
|
1111
|
+
}
|
|
1112
|
+
.dark .dybo-priority--high {
|
|
1113
|
+
background: hsl(30 100% 45% / 0.22);
|
|
1114
|
+
color: hsl(30 100% 72%);
|
|
1115
|
+
}
|
|
1116
|
+
.dark .dybo-priority--medium {
|
|
1117
|
+
background: hsl(45 90% 50% / 0.16);
|
|
1118
|
+
color: hsl(45 92% 70%);
|
|
1119
|
+
}
|
|
1120
|
+
.dark .dybo-priority--low {
|
|
1121
|
+
background: hsl(216 20% 60% / 0.2);
|
|
1122
|
+
color: hsl(216 25% 82%);
|
|
1123
|
+
}
|
|
1124
|
+
.dark .dybo-priority--none {
|
|
1125
|
+
background: hsl(216 12% 50% / 0.25);
|
|
1126
|
+
color: hsl(216 15% 75%);
|
|
1127
|
+
}
|
|
956
1128
|
|
|
957
|
-
/* Ticket status badges (ChatWoot) */
|
|
1129
|
+
/* Ticket status badges (ChatWoot lifecycle) */
|
|
958
1130
|
.dybo-ticket-status {
|
|
959
1131
|
display: inline-flex;
|
|
960
1132
|
align-items: center;
|
|
961
1133
|
padding: 2px 10px;
|
|
962
|
-
border-radius:
|
|
1134
|
+
border-radius: 999px;
|
|
963
1135
|
font-size: var(--dybo-font-size-xs);
|
|
964
|
-
font-weight:
|
|
1136
|
+
font-weight: 600;
|
|
965
1137
|
line-height: 1.4;
|
|
966
1138
|
white-space: nowrap;
|
|
967
1139
|
}
|
|
968
1140
|
.dybo-ticket-status--open {
|
|
969
|
-
background:
|
|
970
|
-
color:
|
|
1141
|
+
background: hsl(216 48% 90%);
|
|
1142
|
+
color: hsl(216 55% 40%);
|
|
971
1143
|
}
|
|
972
1144
|
.dybo-ticket-status--pending {
|
|
973
|
-
background:
|
|
974
|
-
color:
|
|
1145
|
+
background: hsl(266 55% 92%);
|
|
1146
|
+
color: hsl(266 42% 47%);
|
|
975
1147
|
}
|
|
976
1148
|
.dybo-ticket-status--snoozed {
|
|
977
|
-
background:
|
|
978
|
-
color:
|
|
1149
|
+
background: hsl(215 22% 87%);
|
|
1150
|
+
color: hsl(215 18% 42%);
|
|
979
1151
|
}
|
|
980
1152
|
.dybo-ticket-status--resolved {
|
|
981
|
-
background:
|
|
982
|
-
color:
|
|
1153
|
+
background: hsl(151 45% 89%);
|
|
1154
|
+
color: hsl(150 60% 25%);
|
|
1155
|
+
}
|
|
1156
|
+
.dark .dybo-ticket-status--open {
|
|
1157
|
+
background: hsl(216 40% 26%);
|
|
1158
|
+
color: hsl(216 60% 82%);
|
|
1159
|
+
}
|
|
1160
|
+
.dark .dybo-ticket-status--pending {
|
|
1161
|
+
background: hsl(266 32% 30%);
|
|
1162
|
+
color: hsl(266 60% 85%);
|
|
1163
|
+
}
|
|
1164
|
+
.dark .dybo-ticket-status--snoozed {
|
|
1165
|
+
background: hsl(215 18% 30%);
|
|
1166
|
+
color: hsl(215 25% 80%);
|
|
1167
|
+
}
|
|
1168
|
+
.dark .dybo-ticket-status--resolved {
|
|
1169
|
+
background: hsl(150 45% 22%);
|
|
1170
|
+
color: hsl(150 60% 80%);
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
/* Labels (categories — colored dot via --lbl-c) */
|
|
1174
|
+
.dybo-label {
|
|
1175
|
+
display: inline-flex;
|
|
1176
|
+
align-items: center;
|
|
1177
|
+
gap: 6px;
|
|
1178
|
+
padding: 2px 10px;
|
|
1179
|
+
border-radius: 999px;
|
|
1180
|
+
font-size: var(--dybo-font-size-xs);
|
|
1181
|
+
font-weight: 600;
|
|
1182
|
+
white-space: nowrap;
|
|
1183
|
+
background: hsl(216 16% 90%);
|
|
1184
|
+
color: hsl(216 22% 32%);
|
|
1185
|
+
}
|
|
1186
|
+
.dybo-label::before {
|
|
1187
|
+
content: "";
|
|
1188
|
+
width: 7px;
|
|
1189
|
+
height: 7px;
|
|
1190
|
+
border-radius: 999px;
|
|
1191
|
+
background: var(--lbl-c, hsl(216 30% 55%));
|
|
1192
|
+
flex-shrink: 0;
|
|
1193
|
+
}
|
|
1194
|
+
.dark .dybo-label {
|
|
1195
|
+
background: hsl(216 16% 26%);
|
|
1196
|
+
color: hsl(216 22% 82%);
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
/* Channel/inbox badge */
|
|
1200
|
+
.dybo-channel-badge {
|
|
1201
|
+
display: inline-flex;
|
|
1202
|
+
align-items: center;
|
|
1203
|
+
gap: 5px;
|
|
1204
|
+
padding: 2px 9px;
|
|
1205
|
+
border-radius: 999px;
|
|
1206
|
+
font-size: 11px;
|
|
1207
|
+
font-weight: 600;
|
|
1208
|
+
white-space: nowrap;
|
|
1209
|
+
background: hsl(216 16% 90%);
|
|
1210
|
+
color: hsl(216 20% 38%);
|
|
1211
|
+
}
|
|
1212
|
+
.dark .dybo-channel-badge {
|
|
1213
|
+
background: hsl(216 16% 26%);
|
|
1214
|
+
color: hsl(216 22% 80%);
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
/* Signal badges (unread messages, SLA) */
|
|
1218
|
+
.dybo-signal--message {
|
|
1219
|
+
display: inline-flex;
|
|
1220
|
+
align-items: center;
|
|
1221
|
+
padding: 2px 10px;
|
|
1222
|
+
border-radius: 999px;
|
|
1223
|
+
font-size: var(--dybo-font-size-xs);
|
|
1224
|
+
font-weight: 600;
|
|
1225
|
+
line-height: 1.4;
|
|
1226
|
+
white-space: nowrap;
|
|
1227
|
+
background: hsl(28 100% 92%);
|
|
1228
|
+
color: hsl(24 88% 40%);
|
|
1229
|
+
}
|
|
1230
|
+
.dark .dybo-signal--message {
|
|
1231
|
+
background: hsl(28 85% 26%);
|
|
1232
|
+
color: hsl(28 100% 78%);
|
|
1233
|
+
}
|
|
1234
|
+
.dybo-signal--sla {
|
|
1235
|
+
display: inline-flex;
|
|
1236
|
+
align-items: center;
|
|
1237
|
+
gap: 5px;
|
|
1238
|
+
padding: 2px 10px;
|
|
1239
|
+
border-radius: 999px;
|
|
1240
|
+
font-size: var(--dybo-font-size-xs);
|
|
1241
|
+
font-weight: 600;
|
|
1242
|
+
line-height: 1.4;
|
|
1243
|
+
white-space: nowrap;
|
|
1244
|
+
background: hsl(244 55% 93%);
|
|
1245
|
+
color: hsl(244 42% 52%);
|
|
1246
|
+
}
|
|
1247
|
+
.dark .dybo-signal--sla {
|
|
1248
|
+
background: hsl(244 35% 32%);
|
|
1249
|
+
color: hsl(244 65% 84%);
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
/* Queue status badge (onboarding / entity processing) — own family, never
|
|
1253
|
+
mixed with priority/ticket-status. */
|
|
1254
|
+
.dybo-queue-status {
|
|
1255
|
+
display: inline-flex;
|
|
1256
|
+
align-items: center;
|
|
1257
|
+
padding: 2px 10px;
|
|
1258
|
+
border-radius: 999px;
|
|
1259
|
+
font-size: var(--dybo-font-size-xs);
|
|
1260
|
+
font-weight: 500;
|
|
1261
|
+
line-height: 1.4;
|
|
1262
|
+
white-space: nowrap;
|
|
1263
|
+
}
|
|
1264
|
+
.dybo-queue-status--processing {
|
|
1265
|
+
background: hsl(147 60% 95%);
|
|
1266
|
+
color: hsl(150 67% 38%);
|
|
1267
|
+
}
|
|
1268
|
+
.dybo-queue-status--pending {
|
|
1269
|
+
background: hsl(233 43% 93%);
|
|
1270
|
+
color: hsl(236 13% 33%);
|
|
1271
|
+
}
|
|
1272
|
+
.dybo-queue-status--editing {
|
|
1273
|
+
background: hsl(187 79% 91%);
|
|
1274
|
+
color: hsl(187 96% 35%);
|
|
1275
|
+
}
|
|
1276
|
+
.dybo-queue-status--failed {
|
|
1277
|
+
background: hsl(355 95% 60% / 0.12);
|
|
1278
|
+
color: hsl(355 74% 45%);
|
|
1279
|
+
}
|
|
1280
|
+
.dark .dybo-queue-status--processing {
|
|
1281
|
+
background: hsl(150 45% 22%);
|
|
1282
|
+
color: hsl(150 60% 80%);
|
|
1283
|
+
}
|
|
1284
|
+
.dark .dybo-queue-status--pending {
|
|
1285
|
+
background: hsl(236 20% 30%);
|
|
1286
|
+
color: hsl(236 30% 82%);
|
|
1287
|
+
}
|
|
1288
|
+
.dark .dybo-queue-status--editing {
|
|
1289
|
+
background: hsl(187 60% 24%);
|
|
1290
|
+
color: hsl(187 70% 78%);
|
|
1291
|
+
}
|
|
1292
|
+
.dark .dybo-queue-status--failed {
|
|
1293
|
+
background: hsl(0 78% 55% / 0.2);
|
|
1294
|
+
color: hsl(0 90% 80%);
|
|
983
1295
|
}
|
|
984
1296
|
|
|
985
1297
|
/* Scope tabs — Unassigned / Mine / All */
|
|
@@ -987,9 +1299,9 @@ body {
|
|
|
987
1299
|
display: inline-flex;
|
|
988
1300
|
align-items: center;
|
|
989
1301
|
gap: 4px;
|
|
990
|
-
border: 1px solid var(--
|
|
991
|
-
background:
|
|
992
|
-
border-radius: var(--
|
|
1302
|
+
border: 1px solid hsl(var(--border));
|
|
1303
|
+
background: hsl(var(--input) / 0.7);
|
|
1304
|
+
border-radius: var(--radius-sm);
|
|
993
1305
|
padding: 4px;
|
|
994
1306
|
}
|
|
995
1307
|
.dybo-scope-tab {
|
|
@@ -1001,8 +1313,8 @@ body {
|
|
|
1001
1313
|
border-radius: 10px;
|
|
1002
1314
|
font-size: 13px;
|
|
1003
1315
|
font-weight: var(--dybo-font-weight-semibold);
|
|
1004
|
-
color: var(--
|
|
1005
|
-
opacity: var(--
|
|
1316
|
+
color: hsl(var(--foreground));
|
|
1317
|
+
opacity: var(--opacity-intense);
|
|
1006
1318
|
background: transparent;
|
|
1007
1319
|
border: 0;
|
|
1008
1320
|
cursor: pointer;
|
|
@@ -1015,11 +1327,11 @@ body {
|
|
|
1015
1327
|
}
|
|
1016
1328
|
.dybo-scope-tab--active {
|
|
1017
1329
|
opacity: 1;
|
|
1018
|
-
background: var(--
|
|
1019
|
-
color: var(--
|
|
1330
|
+
background: hsl(var(--primary));
|
|
1331
|
+
color: hsl(var(--primary-foreground));
|
|
1020
1332
|
}
|
|
1021
1333
|
.dybo-scope-tab:focus-visible {
|
|
1022
|
-
outline: 2px solid var(--
|
|
1334
|
+
outline: 2px solid hsl(var(--ring));
|
|
1023
1335
|
outline-offset: 2px;
|
|
1024
1336
|
}
|
|
1025
1337
|
.dybo-scope-count {
|
|
@@ -1029,16 +1341,16 @@ body {
|
|
|
1029
1341
|
min-width: 22px;
|
|
1030
1342
|
height: 20px;
|
|
1031
1343
|
padding: 0 6px;
|
|
1032
|
-
border-radius:
|
|
1344
|
+
border-radius: 999px;
|
|
1033
1345
|
font-size: 11px;
|
|
1034
1346
|
font-weight: var(--dybo-font-weight-bold);
|
|
1035
|
-
background:
|
|
1347
|
+
background: hsl(var(--foreground) / 0.1);
|
|
1036
1348
|
}
|
|
1037
1349
|
.dybo-scope-tab--active .dybo-scope-count {
|
|
1038
|
-
background:
|
|
1350
|
+
background: hsl(var(--primary-foreground) / 0.24);
|
|
1039
1351
|
}
|
|
1040
1352
|
|
|
1041
|
-
/* Icon rail sidebar */
|
|
1353
|
+
/* Icon rail sidebar (80px), the default app shell's left column */
|
|
1042
1354
|
.dybo-icon-rail {
|
|
1043
1355
|
display: none;
|
|
1044
1356
|
height: 100%;
|
|
@@ -1046,7 +1358,7 @@ body {
|
|
|
1046
1358
|
flex-shrink: 0;
|
|
1047
1359
|
flex-direction: column;
|
|
1048
1360
|
align-items: center;
|
|
1049
|
-
background: var(--
|
|
1361
|
+
background: hsl(var(--background));
|
|
1050
1362
|
padding: 16px 0;
|
|
1051
1363
|
}
|
|
1052
1364
|
@media (min-width: 768px) {
|
|
@@ -1066,13 +1378,17 @@ body {
|
|
|
1066
1378
|
}
|
|
1067
1379
|
.dybo-icon-rail__pill {
|
|
1068
1380
|
border-radius: 13px;
|
|
1069
|
-
border: 1px solid var(--
|
|
1070
|
-
background: var(--
|
|
1381
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1382
|
+
background: hsl(var(--card) / 0.7);
|
|
1071
1383
|
padding: 6px;
|
|
1072
|
-
box-shadow: var(--
|
|
1384
|
+
box-shadow: var(--shadow-level-1);
|
|
1073
1385
|
backdrop-filter: blur(4px);
|
|
1074
1386
|
-webkit-backdrop-filter: blur(4px);
|
|
1075
1387
|
}
|
|
1388
|
+
.dark .dybo-icon-rail__pill {
|
|
1389
|
+
border-color: hsl(var(--border));
|
|
1390
|
+
background: hsl(var(--card));
|
|
1391
|
+
}
|
|
1076
1392
|
.dybo-icon-rail__items {
|
|
1077
1393
|
display: flex;
|
|
1078
1394
|
flex-direction: column;
|
|
@@ -1087,18 +1403,856 @@ body {
|
|
|
1087
1403
|
height: 48px;
|
|
1088
1404
|
width: 40px;
|
|
1089
1405
|
border-radius: 11px;
|
|
1090
|
-
color: var(--
|
|
1091
|
-
opacity: var(--
|
|
1406
|
+
color: hsl(var(--brand-indigo));
|
|
1407
|
+
opacity: var(--opacity-intense);
|
|
1092
1408
|
text-decoration: none;
|
|
1093
1409
|
transition: all 0.2s;
|
|
1094
1410
|
}
|
|
1411
|
+
.dark .dybo-icon-rail__item {
|
|
1412
|
+
color: hsl(var(--brand-blue-yonder));
|
|
1413
|
+
}
|
|
1095
1414
|
.dybo-icon-rail__item:hover {
|
|
1096
1415
|
opacity: 1;
|
|
1097
1416
|
}
|
|
1098
1417
|
.dybo-icon-rail__item--active {
|
|
1099
1418
|
height: 40px;
|
|
1100
1419
|
border-radius: 13px;
|
|
1101
|
-
background:
|
|
1420
|
+
background: hsl(var(--brand-dark-orb) / 0.1);
|
|
1102
1421
|
opacity: 1;
|
|
1103
|
-
color: var(--
|
|
1422
|
+
color: hsl(var(--brand-dark-orb));
|
|
1423
|
+
}
|
|
1424
|
+
.dark .dybo-icon-rail__item--active {
|
|
1425
|
+
background: hsl(var(--brand-cultured) / 0.15);
|
|
1426
|
+
color: hsl(var(--foreground));
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
/* =========================================================================
|
|
1430
|
+
New in 2.0 — components documented in the handoff spec that the package
|
|
1431
|
+
didn't ship yet. Each block cites the section it ports from.
|
|
1432
|
+
========================================================================= */
|
|
1433
|
+
|
|
1434
|
+
/* Org/entity selector — §5 Navigation & selectors */
|
|
1435
|
+
.dybo-org-selector {
|
|
1436
|
+
display: flex;
|
|
1437
|
+
width: 100%;
|
|
1438
|
+
align-items: center;
|
|
1439
|
+
justify-content: space-between;
|
|
1440
|
+
gap: 8px;
|
|
1441
|
+
border-radius: var(--radius-sm);
|
|
1442
|
+
border: 1px solid hsl(var(--border));
|
|
1443
|
+
background: hsl(var(--input) / 0.7);
|
|
1444
|
+
padding: 12px;
|
|
1445
|
+
font-family: inherit;
|
|
1446
|
+
font-size: var(--dybo-font-size-sm);
|
|
1447
|
+
color: hsl(var(--foreground));
|
|
1448
|
+
cursor: pointer;
|
|
1449
|
+
height: 40px;
|
|
1450
|
+
}
|
|
1451
|
+
.dybo-org-selector:focus-visible {
|
|
1452
|
+
outline: none;
|
|
1453
|
+
box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--ring) / 0.2);
|
|
1454
|
+
}
|
|
1455
|
+
.dybo-org-selector__label {
|
|
1456
|
+
flex: 1;
|
|
1457
|
+
min-width: 0;
|
|
1458
|
+
overflow: hidden;
|
|
1459
|
+
text-overflow: ellipsis;
|
|
1460
|
+
white-space: nowrap;
|
|
1461
|
+
text-align: left;
|
|
1462
|
+
}
|
|
1463
|
+
.dybo-org-selector__chevron {
|
|
1464
|
+
flex-shrink: 0;
|
|
1465
|
+
color: hsl(var(--foreground));
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
/* Theme toggle — §5 */
|
|
1469
|
+
.dybo-theme-toggle {
|
|
1470
|
+
display: flex;
|
|
1471
|
+
align-items: center;
|
|
1472
|
+
gap: 1px;
|
|
1473
|
+
height: 44px;
|
|
1474
|
+
border-radius: var(--radius-sm);
|
|
1475
|
+
border: 1px solid hsl(var(--border));
|
|
1476
|
+
background: transparent;
|
|
1477
|
+
padding: 4px;
|
|
1478
|
+
}
|
|
1479
|
+
.dybo-theme-toggle__btn {
|
|
1480
|
+
height: 32px;
|
|
1481
|
+
width: 32px;
|
|
1482
|
+
border-radius: var(--radius-sm);
|
|
1483
|
+
padding: 8px;
|
|
1484
|
+
color: hsl(var(--foreground));
|
|
1485
|
+
background: transparent;
|
|
1486
|
+
border: none;
|
|
1487
|
+
cursor: pointer;
|
|
1488
|
+
display: flex;
|
|
1489
|
+
align-items: center;
|
|
1490
|
+
justify-content: center;
|
|
1491
|
+
}
|
|
1492
|
+
.dybo-theme-toggle__btn:hover {
|
|
1493
|
+
background: hsl(var(--primary));
|
|
1494
|
+
color: hsl(var(--primary-foreground));
|
|
1495
|
+
}
|
|
1496
|
+
.dybo-theme-toggle__btn--active {
|
|
1497
|
+
background: hsl(var(--primary));
|
|
1498
|
+
color: hsl(var(--primary-foreground));
|
|
1499
|
+
}
|
|
1500
|
+
|
|
1501
|
+
/* Avatar — §5 (44px header) / §5 (24px inline) */
|
|
1502
|
+
.dybo-avatar {
|
|
1503
|
+
display: inline-flex;
|
|
1504
|
+
align-items: center;
|
|
1505
|
+
justify-content: center;
|
|
1506
|
+
flex-shrink: 0;
|
|
1507
|
+
border-radius: var(--radius-sm);
|
|
1508
|
+
background: hsl(var(--primary));
|
|
1509
|
+
color: hsl(var(--primary-foreground));
|
|
1510
|
+
font-family: inherit;
|
|
1511
|
+
font-weight: var(--dybo-font-weight-medium);
|
|
1512
|
+
border: none;
|
|
1513
|
+
cursor: default;
|
|
1514
|
+
}
|
|
1515
|
+
.dybo-avatar--md {
|
|
1516
|
+
height: 44px;
|
|
1517
|
+
width: 44px;
|
|
1518
|
+
font-size: var(--dybo-font-size-md);
|
|
1519
|
+
}
|
|
1520
|
+
.dybo-avatar--sm {
|
|
1521
|
+
height: 24px;
|
|
1522
|
+
width: 24px;
|
|
1523
|
+
border-radius: var(--radius-full);
|
|
1524
|
+
font-size: 11px;
|
|
1525
|
+
font-weight: var(--dybo-font-weight-semibold);
|
|
1526
|
+
}
|
|
1527
|
+
.dybo-avatar--square { border-radius: var(--radius-sm); }
|
|
1528
|
+
.dybo-avatar--circle { border-radius: var(--radius-full); }
|
|
1529
|
+
button.dybo-avatar { cursor: pointer; padding: 0; }
|
|
1530
|
+
|
|
1531
|
+
/* Notifications button — §5 */
|
|
1532
|
+
.dybo-notifications-btn {
|
|
1533
|
+
position: relative;
|
|
1534
|
+
display: inline-flex;
|
|
1535
|
+
align-items: center;
|
|
1536
|
+
justify-content: center;
|
|
1537
|
+
height: 44px;
|
|
1538
|
+
width: 44px;
|
|
1539
|
+
padding: 10px;
|
|
1540
|
+
border-radius: var(--radius-sm);
|
|
1541
|
+
border: 1px solid hsl(var(--border));
|
|
1542
|
+
background: transparent;
|
|
1543
|
+
color: hsl(var(--foreground));
|
|
1544
|
+
cursor: pointer;
|
|
1545
|
+
}
|
|
1546
|
+
.dybo-notifications-btn:hover {
|
|
1547
|
+
background: hsl(var(--primary));
|
|
1548
|
+
color: hsl(var(--primary-foreground));
|
|
1549
|
+
}
|
|
1550
|
+
.dybo-notifications-btn__dot {
|
|
1551
|
+
position: absolute;
|
|
1552
|
+
top: 4px;
|
|
1553
|
+
right: 4px;
|
|
1554
|
+
height: 8px;
|
|
1555
|
+
width: 8px;
|
|
1556
|
+
border-radius: var(--radius-full);
|
|
1557
|
+
background: hsl(var(--destructive));
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
/* Pagination — §5 */
|
|
1561
|
+
.dybo-pagination {
|
|
1562
|
+
display: flex;
|
|
1563
|
+
flex-direction: column;
|
|
1564
|
+
gap: 12px;
|
|
1565
|
+
border-top: 1px solid hsl(var(--border) / 0.6);
|
|
1566
|
+
padding-top: 16px;
|
|
1567
|
+
}
|
|
1568
|
+
@media (min-width: 640px) {
|
|
1569
|
+
.dybo-pagination {
|
|
1570
|
+
flex-direction: row;
|
|
1571
|
+
align-items: center;
|
|
1572
|
+
justify-content: space-between;
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
.dybo-pagination__summary {
|
|
1576
|
+
font-size: var(--dybo-font-size-sm);
|
|
1577
|
+
color: hsl(var(--foreground) / 0.7);
|
|
1578
|
+
}
|
|
1579
|
+
.dybo-pagination__controls {
|
|
1580
|
+
display: flex;
|
|
1581
|
+
flex-wrap: wrap;
|
|
1582
|
+
align-items: center;
|
|
1583
|
+
gap: 12px;
|
|
1584
|
+
}
|
|
1585
|
+
.dybo-pagination__size {
|
|
1586
|
+
display: flex;
|
|
1587
|
+
align-items: center;
|
|
1588
|
+
gap: 8px;
|
|
1589
|
+
font-size: var(--dybo-font-size-sm);
|
|
1590
|
+
color: hsl(var(--foreground) / 0.8);
|
|
1591
|
+
}
|
|
1592
|
+
.dybo-pagination__nav {
|
|
1593
|
+
display: flex;
|
|
1594
|
+
align-items: center;
|
|
1595
|
+
gap: 4px;
|
|
1596
|
+
}
|
|
1597
|
+
.dybo-pagination__btn {
|
|
1598
|
+
height: 36px;
|
|
1599
|
+
width: 36px;
|
|
1600
|
+
border-radius: var(--radius-sm);
|
|
1601
|
+
border: 1px solid hsl(var(--border));
|
|
1602
|
+
background: transparent;
|
|
1603
|
+
color: hsl(var(--foreground));
|
|
1604
|
+
display: inline-flex;
|
|
1605
|
+
align-items: center;
|
|
1606
|
+
justify-content: center;
|
|
1607
|
+
cursor: pointer;
|
|
1608
|
+
}
|
|
1609
|
+
.dybo-pagination__btn:disabled {
|
|
1610
|
+
opacity: var(--opacity-semi-opaque);
|
|
1611
|
+
cursor: not-allowed;
|
|
1612
|
+
}
|
|
1613
|
+
.dybo-pagination__btn--active {
|
|
1614
|
+
background: hsl(var(--primary));
|
|
1615
|
+
color: hsl(var(--primary-foreground));
|
|
1616
|
+
border-color: hsl(var(--primary));
|
|
1617
|
+
min-width: 36px;
|
|
1618
|
+
width: auto;
|
|
1619
|
+
padding: 0 8px;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
/* Empty states — §5 */
|
|
1623
|
+
.dybo-empty {
|
|
1624
|
+
position: relative;
|
|
1625
|
+
height: 240px;
|
|
1626
|
+
border-radius: var(--radius-md);
|
|
1627
|
+
background: hsl(var(--foreground) / 0.05);
|
|
1628
|
+
display: flex;
|
|
1629
|
+
align-items: center;
|
|
1630
|
+
justify-content: center;
|
|
1631
|
+
}
|
|
1632
|
+
.dybo-empty__text {
|
|
1633
|
+
font-size: var(--dybo-font-size-sm);
|
|
1634
|
+
font-weight: var(--dybo-font-weight-medium);
|
|
1635
|
+
color: hsl(var(--foreground) / 0.6);
|
|
1636
|
+
}
|
|
1637
|
+
.dybo-empty--rich {
|
|
1638
|
+
height: 320px;
|
|
1639
|
+
border-radius: var(--radius-md);
|
|
1640
|
+
border: 1px dashed hsl(var(--border) / 0.8);
|
|
1641
|
+
background: hsl(var(--muted) / 0.2);
|
|
1642
|
+
display: flex;
|
|
1643
|
+
align-items: center;
|
|
1644
|
+
justify-content: center;
|
|
1645
|
+
}
|
|
1646
|
+
.dybo-empty--rich .dybo-empty__inner {
|
|
1647
|
+
display: flex;
|
|
1648
|
+
flex-direction: column;
|
|
1649
|
+
align-items: center;
|
|
1650
|
+
text-align: center;
|
|
1651
|
+
padding: 0 24px;
|
|
1652
|
+
}
|
|
1653
|
+
.dybo-empty__icon {
|
|
1654
|
+
margin-bottom: 12px;
|
|
1655
|
+
display: flex;
|
|
1656
|
+
height: 48px;
|
|
1657
|
+
width: 48px;
|
|
1658
|
+
align-items: center;
|
|
1659
|
+
justify-content: center;
|
|
1660
|
+
border-radius: var(--radius-full);
|
|
1661
|
+
border: 1px solid hsl(var(--border));
|
|
1662
|
+
background: hsl(var(--card) / 0.6);
|
|
1663
|
+
color: hsl(var(--foreground) / 0.7);
|
|
1664
|
+
}
|
|
1665
|
+
.dybo-empty__title {
|
|
1666
|
+
font-size: var(--dybo-font-size-md);
|
|
1667
|
+
font-weight: var(--dybo-font-weight-medium);
|
|
1668
|
+
color: hsl(var(--foreground) / 0.9);
|
|
1669
|
+
}
|
|
1670
|
+
.dybo-empty__desc {
|
|
1671
|
+
margin-top: 4px;
|
|
1672
|
+
font-size: var(--dybo-font-size-sm);
|
|
1673
|
+
color: hsl(var(--foreground) / 0.65);
|
|
1674
|
+
}
|
|
1675
|
+
.dybo-empty-row {
|
|
1676
|
+
padding: 64px 0;
|
|
1677
|
+
text-align: center;
|
|
1678
|
+
font-size: var(--dybo-font-size-sm);
|
|
1679
|
+
opacity: var(--opacity-intense);
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
/* KPI cards — §5 */
|
|
1683
|
+
.dybo-kpi {
|
|
1684
|
+
border-radius: 14px;
|
|
1685
|
+
padding: 16px;
|
|
1686
|
+
display: flex;
|
|
1687
|
+
justify-content: space-between;
|
|
1688
|
+
background: hsl(var(--card) / 0.7);
|
|
1689
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1690
|
+
}
|
|
1691
|
+
.dark .dybo-kpi { border-color: hsl(var(--border)); }
|
|
1692
|
+
.dybo-kpi__label { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); }
|
|
1693
|
+
.dybo-kpi__value { font-size: 30px; font-weight: 300; margin-top: 4px; line-height: 1; }
|
|
1694
|
+
.dybo-kpi__icon { opacity: 0.25; display: flex; }
|
|
1695
|
+
|
|
1696
|
+
.dybo-kpi-tile {
|
|
1697
|
+
border-radius: var(--radius-sm);
|
|
1698
|
+
background: hsl(var(--card) / 0.7);
|
|
1699
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1700
|
+
backdrop-filter: blur(4px);
|
|
1701
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1702
|
+
padding: 24px;
|
|
1703
|
+
display: flex;
|
|
1704
|
+
align-items: center;
|
|
1705
|
+
justify-content: space-between;
|
|
1706
|
+
}
|
|
1707
|
+
.dark .dybo-kpi-tile { border-color: hsl(var(--border)); }
|
|
1708
|
+
.dybo-kpi-tile__label { font-size: var(--dybo-font-size-md); font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground)); }
|
|
1709
|
+
.dybo-kpi-tile__value { font-size: 30px; font-weight: 700; color: hsl(var(--foreground)); line-height: 1; margin-top: 4px; }
|
|
1710
|
+
.dybo-kpi-tile__icon {
|
|
1711
|
+
display: flex; height: 48px; width: 48px; flex-shrink: 0;
|
|
1712
|
+
align-items: center; justify-content: center; border-radius: var(--radius-sm);
|
|
1713
|
+
background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive));
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1716
|
+
.dybo-kpi-grid {
|
|
1717
|
+
display: grid;
|
|
1718
|
+
border-radius: var(--radius-sm);
|
|
1719
|
+
background: hsl(var(--card) / 0.7);
|
|
1720
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1721
|
+
overflow: hidden;
|
|
1722
|
+
}
|
|
1723
|
+
.dark .dybo-kpi-grid { border-color: hsl(var(--border)); }
|
|
1724
|
+
.dybo-kpi-grid__cell {
|
|
1725
|
+
padding: 12px 16px;
|
|
1726
|
+
border-right: 1px solid hsl(var(--border));
|
|
1727
|
+
border-bottom: none;
|
|
1728
|
+
}
|
|
1729
|
+
.dybo-kpi-grid__cell:last-child { border-right: none; }
|
|
1730
|
+
.dybo-kpi-grid__label { font-size: var(--dybo-font-size-md); font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground) / 0.9); }
|
|
1731
|
+
.dybo-kpi-grid__value { font-size: 24px; line-height: 1; font-weight: var(--dybo-font-weight-semibold); color: hsl(var(--foreground)); margin-top: 8px; }
|
|
1732
|
+
.dybo-kpi-grid__sublabel { font-size: var(--dybo-font-size-sm); color: hsl(var(--foreground) / 0.6); margin-top: 4px; }
|
|
1733
|
+
|
|
1734
|
+
.dybo-kpi-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; }
|
|
1735
|
+
.dybo-kpi-strip__item {
|
|
1736
|
+
flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 16px;
|
|
1737
|
+
border: 1px solid hsl(var(--border)); background: hsl(var(--card) / 0.4); padding: 16px;
|
|
1738
|
+
}
|
|
1739
|
+
.dybo-kpi-strip__item:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
|
|
1740
|
+
.dybo-kpi-strip__item:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
|
|
1741
|
+
.dybo-kpi-strip__icon {
|
|
1742
|
+
display: flex; height: 40px; width: 40px; align-items: center; justify-content: center;
|
|
1743
|
+
border-radius: 6px; background: hsl(var(--card)); color: hsl(var(--foreground) / 0.7);
|
|
1744
|
+
}
|
|
1745
|
+
.dybo-kpi-strip__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; }
|
|
1746
|
+
.dybo-kpi-strip__label { font-size: var(--dybo-font-size-sm); color: hsl(var(--foreground)); display: block; }
|
|
1747
|
+
.dybo-kpi-strip__delta { color: hsl(var(--foreground) / 0.5); font-weight: var(--dybo-font-weight-medium); font-size: var(--dybo-font-size-sm); }
|
|
1748
|
+
.dybo-kpi-strip__value { font-size: var(--dybo-font-size-md); color: hsl(var(--foreground)); }
|
|
1749
|
+
|
|
1750
|
+
/* View toggle — §5 */
|
|
1751
|
+
.dybo-view-toggle {
|
|
1752
|
+
display: flex;
|
|
1753
|
+
align-items: center;
|
|
1754
|
+
gap: 4px;
|
|
1755
|
+
border-radius: var(--radius-sm);
|
|
1756
|
+
border: 1px solid hsl(var(--border));
|
|
1757
|
+
background: hsl(var(--input) / 0.7);
|
|
1758
|
+
padding: 4px;
|
|
1759
|
+
}
|
|
1760
|
+
.dybo-view-toggle__btn {
|
|
1761
|
+
height: 36px;
|
|
1762
|
+
width: 36px;
|
|
1763
|
+
border-radius: 10px;
|
|
1764
|
+
padding: 8px;
|
|
1765
|
+
color: hsl(var(--foreground));
|
|
1766
|
+
background: transparent;
|
|
1767
|
+
border: none;
|
|
1768
|
+
cursor: pointer;
|
|
1769
|
+
display: flex;
|
|
1770
|
+
align-items: center;
|
|
1771
|
+
justify-content: center;
|
|
1772
|
+
}
|
|
1773
|
+
.dybo-view-toggle__btn--active {
|
|
1774
|
+
background: hsl(var(--primary));
|
|
1775
|
+
color: hsl(var(--primary-foreground));
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
/* Metadata badge — §5 */
|
|
1779
|
+
.dybo-metadata-badge {
|
|
1780
|
+
display: inline-flex;
|
|
1781
|
+
align-items: center;
|
|
1782
|
+
justify-content: center;
|
|
1783
|
+
padding: 8px 12px;
|
|
1784
|
+
border-radius: var(--radius-full);
|
|
1785
|
+
background: hsl(var(--foreground) / 0.1);
|
|
1786
|
+
font-size: var(--dybo-font-size-sm);
|
|
1787
|
+
font-weight: var(--dybo-font-weight-medium);
|
|
1788
|
+
color: hsl(var(--foreground));
|
|
1789
|
+
}
|
|
1790
|
+
.dybo-metadata-badge b { font-weight: var(--dybo-font-weight-bold); }
|
|
1791
|
+
|
|
1792
|
+
/* Search field — §5 */
|
|
1793
|
+
.dybo-search { position: relative; width: 100%; }
|
|
1794
|
+
.dybo-search__icon {
|
|
1795
|
+
position: absolute;
|
|
1796
|
+
top: 50%;
|
|
1797
|
+
transform: translateY(-50%);
|
|
1798
|
+
color: hsl(var(--foreground) / 0.5);
|
|
1799
|
+
pointer-events: none;
|
|
1800
|
+
display: flex;
|
|
1801
|
+
}
|
|
1802
|
+
.dybo-search--icon-left .dybo-search__icon { left: 12px; }
|
|
1803
|
+
.dybo-search--icon-right .dybo-search__icon { right: 12px; }
|
|
1804
|
+
.dybo-search__input {
|
|
1805
|
+
width: 100%;
|
|
1806
|
+
border-radius: var(--radius-sm);
|
|
1807
|
+
border: 1px solid hsl(var(--border));
|
|
1808
|
+
background: hsl(var(--input) / 0.7);
|
|
1809
|
+
font-size: var(--dybo-font-size-sm);
|
|
1810
|
+
color: hsl(var(--foreground));
|
|
1811
|
+
}
|
|
1812
|
+
.dybo-search--icon-left .dybo-search__input { height: 48px; padding: 12px 16px 12px 36px; }
|
|
1813
|
+
.dybo-search--icon-right .dybo-search__input { height: 40px; padding: 12px 40px 12px 16px; }
|
|
1814
|
+
.dybo-search__input:focus {
|
|
1815
|
+
outline: none;
|
|
1816
|
+
border-color: hsl(var(--ring));
|
|
1817
|
+
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
/* Date range trigger — §5 */
|
|
1821
|
+
.dybo-date-trigger {
|
|
1822
|
+
display: inline-flex;
|
|
1823
|
+
align-items: center;
|
|
1824
|
+
justify-content: center;
|
|
1825
|
+
gap: 8px;
|
|
1826
|
+
height: 40px;
|
|
1827
|
+
padding: 0 12px;
|
|
1828
|
+
border-radius: var(--radius-sm);
|
|
1829
|
+
border: 1px solid hsl(var(--border));
|
|
1830
|
+
background: hsl(var(--input) / 0.7);
|
|
1831
|
+
color: hsl(var(--foreground));
|
|
1832
|
+
font-family: inherit;
|
|
1833
|
+
font-weight: var(--dybo-font-weight-regular);
|
|
1834
|
+
font-size: var(--dybo-font-size-sm);
|
|
1835
|
+
letter-spacing: 1px;
|
|
1836
|
+
cursor: pointer;
|
|
1837
|
+
}
|
|
1838
|
+
.dybo-date-trigger:hover {
|
|
1839
|
+
background: hsl(var(--primary));
|
|
1840
|
+
color: hsl(var(--primary-foreground));
|
|
1841
|
+
border-color: hsl(var(--primary));
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
/* Upload dropzone — §5 */
|
|
1845
|
+
.dybo-dropzone {
|
|
1846
|
+
display: flex;
|
|
1847
|
+
width: 100%;
|
|
1848
|
+
flex-direction: column;
|
|
1849
|
+
align-items: center;
|
|
1850
|
+
justify-content: center;
|
|
1851
|
+
gap: 16px;
|
|
1852
|
+
border-radius: var(--radius-sm);
|
|
1853
|
+
border: 1px dashed hsl(var(--border) / 0.8);
|
|
1854
|
+
background: hsl(var(--muted) / 0.15);
|
|
1855
|
+
padding: 20px 8px;
|
|
1856
|
+
min-height: 154px;
|
|
1857
|
+
cursor: pointer;
|
|
1858
|
+
font-family: inherit;
|
|
1859
|
+
}
|
|
1860
|
+
.dybo-dropzone:hover {
|
|
1861
|
+
background: hsl(var(--muted) / 0.25);
|
|
1862
|
+
}
|
|
1863
|
+
.dybo-dropzone__icon {
|
|
1864
|
+
display: flex;
|
|
1865
|
+
height: 44px;
|
|
1866
|
+
width: 44px;
|
|
1867
|
+
align-items: center;
|
|
1868
|
+
justify-content: center;
|
|
1869
|
+
border-radius: 13px;
|
|
1870
|
+
background: hsl(var(--brand-white) / 0.7);
|
|
1871
|
+
border: 1px solid hsl(var(--foreground) / 0.06);
|
|
1872
|
+
color: hsl(var(--foreground));
|
|
1873
|
+
}
|
|
1874
|
+
.dybo-dropzone__label {
|
|
1875
|
+
font-size: var(--dybo-font-size-md);
|
|
1876
|
+
font-weight: var(--dybo-font-weight-medium);
|
|
1877
|
+
letter-spacing: 0.3px;
|
|
1878
|
+
text-align: center;
|
|
1879
|
+
color: hsl(var(--foreground));
|
|
1880
|
+
}
|
|
1881
|
+
|
|
1882
|
+
/* Step navigator (multi-step form sidebar) — §5 */
|
|
1883
|
+
.dybo-step-nav {
|
|
1884
|
+
border-radius: var(--radius-sm);
|
|
1885
|
+
background: hsl(var(--card) / 0.7);
|
|
1886
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1887
|
+
backdrop-filter: blur(4px);
|
|
1888
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1889
|
+
padding: 24px;
|
|
1890
|
+
}
|
|
1891
|
+
.dark .dybo-step-nav { border-color: hsl(var(--border)); }
|
|
1892
|
+
.dybo-step-nav__title { font-size: var(--dybo-font-size-lg); font-weight: var(--dybo-font-weight-regular); color: hsl(var(--foreground)); margin: 0 0 16px; }
|
|
1893
|
+
.dybo-step-nav__list { display: flex; flex-direction: column; gap: 4px; }
|
|
1894
|
+
.dybo-step-nav__item {
|
|
1895
|
+
width: 100%;
|
|
1896
|
+
text-align: left;
|
|
1897
|
+
border-radius: var(--radius-sm);
|
|
1898
|
+
padding: 10px 12px;
|
|
1899
|
+
display: flex;
|
|
1900
|
+
align-items: center;
|
|
1901
|
+
gap: 12px;
|
|
1902
|
+
background: transparent;
|
|
1903
|
+
border: none;
|
|
1904
|
+
cursor: pointer;
|
|
1905
|
+
font-family: inherit;
|
|
1906
|
+
color: hsl(var(--foreground));
|
|
1907
|
+
}
|
|
1908
|
+
.dybo-step-nav__item--active { background: hsl(var(--muted) / 0.5); }
|
|
1909
|
+
.dybo-step-nav__item-icon { color: hsl(var(--foreground)); display: flex; flex-shrink: 0; }
|
|
1910
|
+
.dybo-step-nav__item-text { display: flex; flex-direction: column; }
|
|
1911
|
+
.dybo-step-nav__item-label { font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground)); line-height: 1.2; }
|
|
1912
|
+
.dybo-step-nav__item-sub { font-size: 12px; opacity: var(--opacity-intense); }
|
|
1913
|
+
.dybo-step-nav__status {
|
|
1914
|
+
margin-left: auto;
|
|
1915
|
+
display: inline-flex;
|
|
1916
|
+
align-items: center;
|
|
1917
|
+
justify-content: center;
|
|
1918
|
+
height: 24px;
|
|
1919
|
+
width: 24px;
|
|
1920
|
+
border-radius: var(--radius-full);
|
|
1921
|
+
flex-shrink: 0;
|
|
1922
|
+
}
|
|
1923
|
+
.dybo-step-nav__status--filled { background: hsl(var(--success)); color: hsl(var(--success-foreground)); }
|
|
1924
|
+
.dybo-step-nav__status--extracting { background: hsl(var(--info-background)); color: hsl(var(--info)); }
|
|
1925
|
+
.dybo-step-nav__status--partial { background: hsl(var(--warning)); color: #fff; }
|
|
1926
|
+
.dybo-step-nav__progress {
|
|
1927
|
+
margin-top: 20px;
|
|
1928
|
+
padding-top: 16px;
|
|
1929
|
+
border-top: 1px solid hsl(var(--border) / 0.5);
|
|
1930
|
+
}
|
|
1931
|
+
.dybo-step-nav__progress-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--dybo-font-size-sm); margin-bottom: 6px; }
|
|
1932
|
+
.dybo-step-nav__progress-track { height: 8px; border-radius: var(--radius-full); background: hsl(var(--muted) / 0.6); overflow: hidden; }
|
|
1933
|
+
.dybo-step-nav__progress-fill { height: 100%; background: hsl(var(--primary)); border-radius: var(--radius-full); }
|
|
1934
|
+
.dybo-step-nav__progress-note { font-size: 12px; opacity: var(--opacity-intense); margin-top: 8px; }
|
|
1935
|
+
.dybo-step-nav__actions { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
|
|
1936
|
+
|
|
1937
|
+
/* Accordion — §5 */
|
|
1938
|
+
.dybo-accordion {
|
|
1939
|
+
border-radius: var(--radius-sm);
|
|
1940
|
+
background: hsl(var(--card) / 0.7);
|
|
1941
|
+
border: 1px solid hsl(var(--brand-white));
|
|
1942
|
+
backdrop-filter: blur(4px);
|
|
1943
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1944
|
+
}
|
|
1945
|
+
.dark .dybo-accordion { border-color: hsl(var(--border)); }
|
|
1946
|
+
.dybo-accordion > summary {
|
|
1947
|
+
list-style: none;
|
|
1948
|
+
cursor: pointer;
|
|
1949
|
+
display: flex;
|
|
1950
|
+
align-items: center;
|
|
1951
|
+
justify-content: space-between;
|
|
1952
|
+
gap: 16px;
|
|
1953
|
+
padding: 20px;
|
|
1954
|
+
}
|
|
1955
|
+
.dybo-accordion > summary::-webkit-details-marker { display: none; }
|
|
1956
|
+
.dybo-accordion__q { font-size: var(--dybo-font-size-md); font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground)); }
|
|
1957
|
+
.dybo-accordion__chevron { flex-shrink: 0; color: hsl(var(--foreground) / 0.5); transition: transform 0.15s; }
|
|
1958
|
+
.dybo-accordion[open] .dybo-accordion__chevron { transform: rotate(180deg); }
|
|
1959
|
+
.dybo-accordion__body { padding: 0 20px 20px; margin-top: -4px; font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); line-height: 1.6; }
|
|
1960
|
+
|
|
1961
|
+
/* Toast — §5 */
|
|
1962
|
+
.dybo-toast {
|
|
1963
|
+
border-radius: var(--radius-sm);
|
|
1964
|
+
background: hsl(var(--brand-dark-orb));
|
|
1965
|
+
color: hsl(var(--brand-white));
|
|
1966
|
+
padding: 16px 20px;
|
|
1967
|
+
box-shadow: var(--shadow-level-2);
|
|
1968
|
+
display: flex;
|
|
1969
|
+
align-items: flex-start;
|
|
1970
|
+
gap: 12px;
|
|
1971
|
+
}
|
|
1972
|
+
.dybo-toast__icon { flex-shrink: 0; margin-top: 2px; }
|
|
1973
|
+
.dybo-toast__text { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); line-height: 1.4; }
|
|
1974
|
+
|
|
1975
|
+
/* Warning / blocking-error banners — §5 (Banner, distinct from the transient Alert) */
|
|
1976
|
+
.dybo-banner {
|
|
1977
|
+
border-radius: var(--radius-sm);
|
|
1978
|
+
padding: 16px;
|
|
1979
|
+
display: flex;
|
|
1980
|
+
gap: 16px;
|
|
1981
|
+
align-items: flex-start;
|
|
1982
|
+
}
|
|
1983
|
+
.dybo-banner--warning {
|
|
1984
|
+
background: hsl(var(--warning-background));
|
|
1985
|
+
border: 1px solid hsl(var(--warning) / 0.2);
|
|
1986
|
+
color: hsl(var(--warning));
|
|
1987
|
+
}
|
|
1988
|
+
.dybo-banner--error {
|
|
1989
|
+
background: hsl(var(--destructive) / 0.06);
|
|
1990
|
+
border: 1px solid hsl(var(--destructive) / 0.25);
|
|
1991
|
+
}
|
|
1992
|
+
.dybo-banner__icon { flex-shrink: 0; }
|
|
1993
|
+
.dybo-banner--warning .dybo-banner__icon { color: hsl(var(--warning)); }
|
|
1994
|
+
.dybo-banner--error .dybo-banner__icon { color: hsl(var(--destructive)); margin-top: 2px; }
|
|
1995
|
+
.dybo-banner__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
|
1996
|
+
.dybo-banner--warning .dybo-banner__title { font-weight: 700; font-size: var(--dybo-font-size-md); }
|
|
1997
|
+
.dybo-banner--error .dybo-banner__title { font-weight: 700; font-size: var(--dybo-font-size-sm); color: hsl(var(--foreground)); }
|
|
1998
|
+
.dybo-banner--error .dybo-banner__desc { font-size: var(--dybo-font-size-sm); opacity: var(--opacity-intense); color: hsl(var(--foreground)); }
|
|
1999
|
+
.dybo-banner__list { font-size: var(--dybo-font-size-sm); list-style: disc; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
|
|
2000
|
+
|
|
2001
|
+
/* File preview card — §5 */
|
|
2002
|
+
.dybo-file-preview-pager {
|
|
2003
|
+
display: inline-flex;
|
|
2004
|
+
align-items: center;
|
|
2005
|
+
gap: 8px;
|
|
2006
|
+
border-radius: 13px;
|
|
2007
|
+
border: 1px solid hsl(var(--border) / 0.6);
|
|
2008
|
+
background: hsl(var(--muted) / 0.3);
|
|
2009
|
+
padding: 4px 8px;
|
|
2010
|
+
}
|
|
2011
|
+
.dybo-file-preview-pager button {
|
|
2012
|
+
border: none;
|
|
2013
|
+
background: transparent;
|
|
2014
|
+
color: hsl(var(--foreground));
|
|
2015
|
+
cursor: pointer;
|
|
2016
|
+
border-radius: 6px;
|
|
2017
|
+
padding: 4px;
|
|
2018
|
+
display: flex;
|
|
2019
|
+
}
|
|
2020
|
+
.dybo-file-preview-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
2021
|
+
.dybo-file-preview {
|
|
2022
|
+
border-radius: var(--radius-md);
|
|
2023
|
+
border: 1px solid hsl(var(--border) / 0.8);
|
|
2024
|
+
background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.4));
|
|
2025
|
+
min-height: 197px;
|
|
2026
|
+
display: flex;
|
|
2027
|
+
flex-direction: column;
|
|
2028
|
+
overflow: hidden;
|
|
2029
|
+
}
|
|
2030
|
+
.dark .dybo-file-preview { border-color: hsl(var(--border) / 0.6); }
|
|
2031
|
+
.dybo-file-preview__name { padding: 20px 20px 0; font-size: var(--dybo-font-size-md); font-weight: 700; color: hsl(var(--foreground)); letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2032
|
+
.dybo-file-preview__meta { padding: 12px 20px 0; font-size: var(--dybo-font-size-sm); color: hsl(var(--muted-foreground)); font-weight: var(--dybo-font-weight-medium); line-height: 1.6; }
|
|
2033
|
+
.dybo-file-preview__meta p { margin: 0; }
|
|
2034
|
+
.dybo-file-preview__image { margin-top: auto; padding-left: 20px; display: flex; align-items: flex-end; }
|
|
2035
|
+
.dybo-file-preview__image img { height: 118px; width: 118px; object-fit: contain; object-position: left bottom; }
|
|
2036
|
+
|
|
2037
|
+
/* File review row — §5 */
|
|
2038
|
+
.dybo-file-review {
|
|
2039
|
+
border-radius: var(--radius-sm);
|
|
2040
|
+
background: hsl(var(--muted) / 0.2);
|
|
2041
|
+
border: 1px solid hsl(var(--border) / 0.5);
|
|
2042
|
+
padding: 12px;
|
|
2043
|
+
}
|
|
2044
|
+
.dybo-file-review__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
2045
|
+
.dybo-file-review__icon { flex-shrink: 0; display: flex; height: 36px; width: 36px; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.5)); color: hsl(var(--foreground)); }
|
|
2046
|
+
.dybo-file-review__name-row { display: flex; align-items: center; gap: 8px; }
|
|
2047
|
+
.dybo-file-review__name { font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2048
|
+
.dybo-file-review__size { font-size: 12px; opacity: var(--opacity-intense); flex-shrink: 0; }
|
|
2049
|
+
.dybo-file-review__sub { font-size: 12px; opacity: var(--opacity-intense); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
|
|
2050
|
+
.dybo-file-review__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
|
|
2051
|
+
.dybo-file-review__ic {
|
|
2052
|
+
height: 36px; width: 36px; border-radius: 10px; border: 1px solid hsl(var(--muted-foreground) / 0.25);
|
|
2053
|
+
background: hsl(var(--secondary)); color: hsl(var(--foreground)); cursor: pointer;
|
|
2054
|
+
display: flex; align-items: center; justify-content: center;
|
|
2055
|
+
}
|
|
2056
|
+
.dybo-file-review__ic--approve { color: hsl(var(--success)); }
|
|
2057
|
+
.dybo-file-review__ic--reject { color: hsl(var(--destructive)); }
|
|
2058
|
+
|
|
2059
|
+
/* Rejection reason panel — §5 */
|
|
2060
|
+
.dybo-reject-panel {
|
|
2061
|
+
margin-top: 12px;
|
|
2062
|
+
border-radius: var(--radius-sm);
|
|
2063
|
+
background: hsl(var(--warning-background) / 0.6);
|
|
2064
|
+
border: 1px solid hsl(var(--warning) / 0.25);
|
|
2065
|
+
padding: 12px;
|
|
2066
|
+
display: flex;
|
|
2067
|
+
flex-direction: column;
|
|
2068
|
+
gap: 10px;
|
|
2069
|
+
}
|
|
2070
|
+
.dybo-reject-panel__label { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground)); }
|
|
2071
|
+
.dybo-reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
2072
|
+
.dybo-reason-chip {
|
|
2073
|
+
padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid hsl(var(--border));
|
|
2074
|
+
background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
|
|
2075
|
+
font-family: inherit; font-size: var(--dybo-font-size-sm); cursor: pointer;
|
|
2076
|
+
}
|
|
2077
|
+
.dybo-reason-chip--on { background: hsl(var(--warning)); color: #fff; border-color: transparent; }
|
|
2078
|
+
.dybo-reject-panel__note {
|
|
2079
|
+
width: 100%; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border));
|
|
2080
|
+
background: hsl(var(--input)); padding: 12px; font-size: var(--dybo-font-size-sm); font-family: inherit;
|
|
2081
|
+
color: hsl(var(--foreground)); resize: vertical;
|
|
2082
|
+
}
|
|
2083
|
+
.dybo-reject-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
|
2084
|
+
.dybo-reject-panel__notice { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: var(--opacity-intense); color: hsl(var(--foreground)); }
|
|
2085
|
+
.dybo-reject-panel__actions { display: flex; gap: 8px; }
|
|
2086
|
+
.dybo-reject-btn {
|
|
2087
|
+
height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border));
|
|
2088
|
+
background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-family: inherit;
|
|
2089
|
+
font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); cursor: pointer;
|
|
2090
|
+
}
|
|
2091
|
+
.dybo-reject-btn--solid { background: hsl(var(--destructive)); color: #fff; border-color: transparent; }
|
|
2092
|
+
|
|
2093
|
+
/* Platform switcher — §5 */
|
|
2094
|
+
.dybo-platform-switcher {
|
|
2095
|
+
position: absolute;
|
|
2096
|
+
top: calc(100% + 10px);
|
|
2097
|
+
right: 0;
|
|
2098
|
+
width: min(640px, 90vw);
|
|
2099
|
+
z-index: 60;
|
|
2100
|
+
border-radius: var(--radius-md);
|
|
2101
|
+
padding: 16px;
|
|
2102
|
+
background: hsl(var(--card));
|
|
2103
|
+
border: 1px solid hsl(var(--border));
|
|
2104
|
+
box-shadow: var(--shadow-level-2);
|
|
2105
|
+
}
|
|
2106
|
+
.dybo-platform-switcher__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
|
|
2107
|
+
.dybo-platform-switcher__card {
|
|
2108
|
+
display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm);
|
|
2109
|
+
text-decoration: none; color: inherit;
|
|
2110
|
+
}
|
|
2111
|
+
.dybo-platform-switcher__card:hover { background: hsl(var(--muted) / 0.4); }
|
|
2112
|
+
.dybo-platform-switcher__icon {
|
|
2113
|
+
flex-shrink: 0; display: flex; height: 36px; width: 36px; align-items: center; justify-content: center;
|
|
2114
|
+
border-radius: 10px; background: hsl(var(--muted) / 0.6); color: hsl(var(--foreground));
|
|
2115
|
+
}
|
|
2116
|
+
.dybo-platform-switcher__title { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-semibold); color: hsl(var(--foreground)); display: block; }
|
|
2117
|
+
.dybo-platform-switcher__desc { font-size: 12px; opacity: var(--opacity-intense); color: hsl(var(--foreground)); }
|
|
2118
|
+
|
|
2119
|
+
/* Underline tabs — §5 (secondary page-wide nav) */
|
|
2120
|
+
.dybo-underline-tabs { border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; gap: 28px; overflow-x: auto; }
|
|
2121
|
+
.dybo-underline-tabs__tab {
|
|
2122
|
+
height: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
|
|
2123
|
+
opacity: 0.5; background: transparent; border: none; border-bottom: 2px solid transparent;
|
|
2124
|
+
font-family: inherit; font-weight: var(--dybo-font-weight-medium); color: hsl(var(--foreground));
|
|
2125
|
+
cursor: pointer; white-space: nowrap;
|
|
2126
|
+
}
|
|
2127
|
+
.dybo-underline-tabs__tab:hover { opacity: 0.8; }
|
|
2128
|
+
.dybo-underline-tabs__tab[aria-selected="true"] { opacity: 1; border-bottom-color: hsl(var(--brand-dark-orb)); }
|
|
2129
|
+
.dark .dybo-underline-tabs__tab[aria-selected="true"] { border-bottom-color: hsl(var(--foreground)); }
|
|
2130
|
+
|
|
2131
|
+
/* Nested filter pills — §5 */
|
|
2132
|
+
.dybo-filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
2133
|
+
.dybo-filter-pill {
|
|
2134
|
+
height: 32px; padding: 0 14px; border-radius: var(--radius-full); background: hsl(var(--secondary));
|
|
2135
|
+
color: hsl(var(--secondary-foreground)); border: none; font-family: inherit; font-size: var(--dybo-font-size-sm);
|
|
2136
|
+
font-weight: var(--dybo-font-weight-medium); cursor: pointer;
|
|
2137
|
+
}
|
|
2138
|
+
.dybo-filter-pill--active { background: hsl(var(--brand-dark-orb)); color: #fff; }
|
|
2139
|
+
.dark .dybo-filter-pill--active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
|
|
2140
|
+
|
|
2141
|
+
/* Ticket card — §5 */
|
|
2142
|
+
.dybo-ticket-card {
|
|
2143
|
+
display: flex;
|
|
2144
|
+
flex-direction: column;
|
|
2145
|
+
gap: 16px;
|
|
2146
|
+
border-radius: var(--radius-sm);
|
|
2147
|
+
background: hsl(var(--background) / 0.4);
|
|
2148
|
+
border: 1px solid hsl(var(--brand-white));
|
|
2149
|
+
padding: 20px;
|
|
2150
|
+
text-decoration: none;
|
|
2151
|
+
color: inherit;
|
|
2152
|
+
transition: box-shadow 0.15s;
|
|
2153
|
+
}
|
|
2154
|
+
.dark .dybo-ticket-card { background: hsl(var(--background) / 0.3); border-color: hsl(var(--border)); }
|
|
2155
|
+
.dybo-ticket-card:hover { box-shadow: var(--shadow-level-1); }
|
|
2156
|
+
.dybo-ticket-card--selected { border: 2px solid hsl(var(--primary) / 0.7); background: hsl(var(--card)); box-shadow: var(--shadow-level-1); }
|
|
2157
|
+
.dybo-ticket-card--closed { opacity: 0.6; }
|
|
2158
|
+
.dybo-ticket-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
2159
|
+
.dybo-ticket-card__id { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); }
|
|
2160
|
+
.dybo-ticket-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
2161
|
+
.dybo-ticket-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
2162
|
+
.dybo-ticket-card__field-label { font-size: 12px; font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); }
|
|
2163
|
+
.dybo-ticket-card__field-value { font-size: var(--dybo-font-size-sm); font-weight: 700; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2164
|
+
|
|
2165
|
+
/* Chat thread — §5. Viewer always on the right (bg-primary); the other party left (bg-muted). */
|
|
2166
|
+
.dybo-chat-message { display: flex; gap: 12px; max-width: 85%; }
|
|
2167
|
+
.dybo-chat-message--mine { margin-left: auto; flex-direction: row-reverse; }
|
|
2168
|
+
.dybo-chat-message__avatar {
|
|
2169
|
+
flex-shrink: 0; height: 36px; width: 36px; border-radius: var(--radius-full);
|
|
2170
|
+
background: hsl(var(--brand-dark-orb)); color: #fff; font-size: 12px; font-weight: 700;
|
|
2171
|
+
display: flex; align-items: center; justify-content: center;
|
|
2172
|
+
}
|
|
2173
|
+
.dybo-chat-message--mine .dybo-chat-message__avatar { background: hsl(var(--brand-indigo)); }
|
|
2174
|
+
.dybo-chat-message__body { min-width: 0; }
|
|
2175
|
+
.dybo-chat-message__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
2176
|
+
.dybo-chat-message--mine .dybo-chat-message__meta { justify-content: flex-end; }
|
|
2177
|
+
.dybo-chat-message__author { font-size: var(--dybo-font-size-sm); font-weight: 700; color: hsl(var(--foreground)); }
|
|
2178
|
+
.dybo-chat-message__time { font-size: 12px; font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); }
|
|
2179
|
+
.dybo-chat-message__bubble {
|
|
2180
|
+
border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px;
|
|
2181
|
+
background: hsl(var(--muted) / 0.4);
|
|
2182
|
+
padding: 12px 16px;
|
|
2183
|
+
font-size: var(--dybo-font-size-sm);
|
|
2184
|
+
color: hsl(var(--foreground));
|
|
2185
|
+
line-height: 1.6;
|
|
2186
|
+
}
|
|
2187
|
+
.dark .dybo-chat-message__bubble { background: hsl(var(--muted) / 0.2); }
|
|
2188
|
+
.dybo-chat-message--mine .dybo-chat-message__bubble {
|
|
2189
|
+
border-radius: var(--radius-sm) var(--radius-sm) 4px var(--radius-sm);
|
|
2190
|
+
background: hsl(var(--primary));
|
|
2191
|
+
color: hsl(var(--primary-foreground));
|
|
2192
|
+
}
|
|
2193
|
+
|
|
2194
|
+
/* Internal note card — §5 */
|
|
2195
|
+
.dybo-internal-note {
|
|
2196
|
+
border-radius: var(--radius-sm);
|
|
2197
|
+
background: hsl(var(--warning-background) / 0.6);
|
|
2198
|
+
border: 1px solid hsl(var(--warning) / 0.2);
|
|
2199
|
+
padding: 16px;
|
|
2200
|
+
display: flex;
|
|
2201
|
+
flex-direction: column;
|
|
2202
|
+
gap: 8px;
|
|
2203
|
+
}
|
|
2204
|
+
.dybo-internal-note__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
2205
|
+
.dybo-internal-note__author { font-size: var(--dybo-font-size-sm); font-weight: 700; color: hsl(var(--foreground)); }
|
|
2206
|
+
.dybo-internal-note__author span { font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); }
|
|
2207
|
+
.dybo-internal-note__time { font-size: 12px; font-weight: var(--dybo-font-weight-medium); opacity: var(--opacity-intense); }
|
|
2208
|
+
.dybo-internal-note__body { font-size: var(--dybo-font-size-sm); color: hsl(var(--foreground)); line-height: 1.6; margin: 0; }
|
|
2209
|
+
|
|
2210
|
+
/* Linked app indicator — §5 */
|
|
2211
|
+
.dybo-linked-app { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--dybo-font-weight-semibold); color: hsl(var(--brand-indigo)); }
|
|
2212
|
+
.dark .dybo-linked-app { color: hsl(var(--brand-blue-yonder)); }
|
|
2213
|
+
.dybo-linked-app--empty { opacity: var(--opacity-intense); font-weight: var(--dybo-font-weight-regular); }
|
|
2214
|
+
|
|
2215
|
+
/* Document-type selector grid — §5 */
|
|
2216
|
+
.dybo-doc-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
2217
|
+
@media (min-width: 768px) { .dybo-doc-type-grid { grid-template-columns: repeat(4, 1fr); } }
|
|
2218
|
+
.dybo-doc-type-card {
|
|
2219
|
+
position: relative;
|
|
2220
|
+
display: flex;
|
|
2221
|
+
flex-direction: column;
|
|
2222
|
+
align-items: center;
|
|
2223
|
+
justify-content: center;
|
|
2224
|
+
gap: 8px;
|
|
2225
|
+
height: 120px;
|
|
2226
|
+
padding: 16px;
|
|
2227
|
+
border-radius: var(--radius-sm);
|
|
2228
|
+
border: 1px solid hsl(var(--border));
|
|
2229
|
+
background: hsl(var(--card) / 0.7);
|
|
2230
|
+
backdrop-filter: blur(4px);
|
|
2231
|
+
-webkit-backdrop-filter: blur(4px);
|
|
2232
|
+
text-align: center;
|
|
2233
|
+
color: hsl(var(--foreground));
|
|
2234
|
+
cursor: pointer;
|
|
2235
|
+
font-family: inherit;
|
|
2236
|
+
}
|
|
2237
|
+
.dybo-doc-type-card:hover {
|
|
2238
|
+
background: hsl(var(--primary));
|
|
2239
|
+
color: hsl(var(--primary-foreground));
|
|
2240
|
+
}
|
|
2241
|
+
.dybo-doc-type-card--disabled {
|
|
2242
|
+
opacity: var(--opacity-semi-opaque);
|
|
2243
|
+
pointer-events: none;
|
|
2244
|
+
cursor: default;
|
|
2245
|
+
}
|
|
2246
|
+
.dybo-doc-type-card__label { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); }
|
|
2247
|
+
|
|
2248
|
+
/* Read-only computed-value box — §5 */
|
|
2249
|
+
.dybo-readonly-field {
|
|
2250
|
+
border-radius: var(--radius-sm);
|
|
2251
|
+
background: hsl(var(--muted) / 0.4);
|
|
2252
|
+
padding: 16px;
|
|
2253
|
+
display: flex;
|
|
2254
|
+
flex-direction: column;
|
|
2255
|
+
gap: 8px;
|
|
1104
2256
|
}
|
|
2257
|
+
.dybo-readonly-field__label { font-size: 11px; font-weight: var(--dybo-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; opacity: var(--opacity-intense); }
|
|
2258
|
+
.dybo-readonly-field__value { font-size: var(--dybo-font-size-sm); font-weight: var(--dybo-font-weight-medium); margin-top: 2px; }
|