web-mojo 2.1.995 → 2.1.1044

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/README.md +19 -16
  2. package/dist/admin.cjs.js +1 -1
  3. package/dist/admin.cjs.js.map +1 -1
  4. package/dist/admin.es.js +739 -24
  5. package/dist/admin.es.js.map +1 -1
  6. package/dist/auth.cjs.js +1 -1
  7. package/dist/auth.cjs.js.map +1 -1
  8. package/dist/auth.css +305 -266
  9. package/dist/auth.es.js +537 -2175
  10. package/dist/auth.es.js.map +1 -1
  11. package/dist/charts.cjs.js +1 -1
  12. package/dist/charts.es.js +3 -2
  13. package/dist/charts.es.js.map +1 -1
  14. package/dist/chunks/ChatView-Bvkdj-lq.js +2 -0
  15. package/dist/chunks/ChatView-Bvkdj-lq.js.map +1 -0
  16. package/dist/chunks/{ChatView-Bk3XGtNh.js → ChatView-DBgQzOyI.js} +14 -6
  17. package/dist/chunks/ChatView-DBgQzOyI.js.map +1 -0
  18. package/dist/chunks/{ContextMenu-BuEqfeZS.js → ContextMenu-hQH_6Pyi.js} +349 -2
  19. package/dist/chunks/ContextMenu-hQH_6Pyi.js.map +1 -0
  20. package/dist/chunks/ContextMenu-snx9Dd1s.js +3 -0
  21. package/dist/chunks/ContextMenu-snx9Dd1s.js.map +1 -0
  22. package/dist/chunks/{DataView-OUqaLmGB.js → DataView-CWejLV3B.js} +2 -1
  23. package/dist/chunks/DataView-CWejLV3B.js.map +1 -0
  24. package/dist/chunks/DataView-D7j4IWyS.js +2 -0
  25. package/dist/chunks/DataView-D7j4IWyS.js.map +1 -0
  26. package/dist/chunks/Dialog-7T8ENHYD.js +2 -0
  27. package/dist/chunks/Dialog-7T8ENHYD.js.map +1 -0
  28. package/dist/chunks/{Dialog-BiVgKzSK.js → Dialog-BcJG5Vta.js} +1358 -4
  29. package/dist/chunks/Dialog-BcJG5Vta.js.map +1 -0
  30. package/dist/chunks/MetricsMiniChartWidget-CN1HPnWf.js +2 -0
  31. package/dist/chunks/{MetricsMiniChartWidget-Esvv-lFp.js.map → MetricsMiniChartWidget-CN1HPnWf.js.map} +1 -1
  32. package/dist/chunks/{MetricsMiniChartWidget-CCroU6BZ.js → MetricsMiniChartWidget-DALWxrzu.js} +2 -2
  33. package/dist/chunks/{MetricsMiniChartWidget-CCroU6BZ.js.map → MetricsMiniChartWidget-DALWxrzu.js.map} +1 -1
  34. package/dist/chunks/{PDFViewer-NeL91Gon.js → PDFViewer-CgdSGU1n.js} +2 -2
  35. package/dist/chunks/{PDFViewer-NeL91Gon.js.map → PDFViewer-CgdSGU1n.js.map} +1 -1
  36. package/dist/chunks/{PDFViewer-D4uo3oiA.js → PDFViewer-DtJIlPXi.js} +2 -2
  37. package/dist/chunks/{PDFViewer-D4uo3oiA.js.map → PDFViewer-DtJIlPXi.js.map} +1 -1
  38. package/dist/chunks/{TopNav-CYTDmhAF.js → TokenManager-BanwFrq7.js} +368 -5
  39. package/dist/chunks/TokenManager-BanwFrq7.js.map +1 -0
  40. package/dist/chunks/TokenManager-DIEFCQ3B.js +2 -0
  41. package/dist/chunks/TokenManager-DIEFCQ3B.js.map +1 -0
  42. package/dist/chunks/version-BaFu2yii.js +38 -0
  43. package/dist/chunks/version-BaFu2yii.js.map +1 -0
  44. package/dist/chunks/version-WMgX72-y.js +2 -0
  45. package/dist/chunks/version-WMgX72-y.js.map +1 -0
  46. package/dist/css/web-mojo.css +1 -17
  47. package/dist/docit.cjs.js +1 -1
  48. package/dist/docit.cjs.js.map +1 -1
  49. package/dist/docit.es.js +4 -6
  50. package/dist/docit.es.js.map +1 -1
  51. package/dist/index.cjs.js +1 -1
  52. package/dist/index.cjs.js.map +1 -1
  53. package/dist/index.es.js +29 -31
  54. package/dist/index.es.js.map +1 -1
  55. package/dist/lightbox.cjs.js +1 -1
  56. package/dist/lightbox.cjs.js.map +1 -1
  57. package/dist/lightbox.es.js +4 -3
  58. package/dist/lightbox.es.js.map +1 -1
  59. package/package.json +1 -1
  60. package/dist/chunks/ChatView-Bk3XGtNh.js.map +0 -1
  61. package/dist/chunks/ChatView-Bz_YZdHd.js +0 -2
  62. package/dist/chunks/ChatView-Bz_YZdHd.js.map +0 -1
  63. package/dist/chunks/ContextMenu-BuEqfeZS.js.map +0 -1
  64. package/dist/chunks/ContextMenu-DcLhcYMp.js +0 -3
  65. package/dist/chunks/ContextMenu-DcLhcYMp.js.map +0 -1
  66. package/dist/chunks/DataView-CdDY9ijM.js +0 -2
  67. package/dist/chunks/DataView-CdDY9ijM.js.map +0 -1
  68. package/dist/chunks/DataView-OUqaLmGB.js.map +0 -1
  69. package/dist/chunks/Dialog-BiVgKzSK.js.map +0 -1
  70. package/dist/chunks/Dialog-DmIPK_Bi.js +0 -2
  71. package/dist/chunks/Dialog-DmIPK_Bi.js.map +0 -1
  72. package/dist/chunks/MetricsMiniChartWidget-Esvv-lFp.js +0 -2
  73. package/dist/chunks/Page-CvbwEoLv.js +0 -2
  74. package/dist/chunks/Page-CvbwEoLv.js.map +0 -1
  75. package/dist/chunks/Page-Deq4y2Kq.js +0 -351
  76. package/dist/chunks/Page-Deq4y2Kq.js.map +0 -1
  77. package/dist/chunks/TokenManager-CAZNcCMs.js +0 -366
  78. package/dist/chunks/TokenManager-CAZNcCMs.js.map +0 -1
  79. package/dist/chunks/TokenManager-CJBYcVqs.js +0 -2
  80. package/dist/chunks/TokenManager-CJBYcVqs.js.map +0 -1
  81. package/dist/chunks/TopNav-23B5R-dl.js +0 -2
  82. package/dist/chunks/TopNav-23B5R-dl.js.map +0 -1
  83. package/dist/chunks/TopNav-CYTDmhAF.js.map +0 -1
  84. package/dist/chunks/WebApp-CQKxglmg.js +0 -2
  85. package/dist/chunks/WebApp-CQKxglmg.js.map +0 -1
  86. package/dist/chunks/WebApp-CWuDQOYo.js +0 -1388
  87. package/dist/chunks/WebApp-CWuDQOYo.js.map +0 -1
package/dist/auth.css CHANGED
@@ -1,323 +1,362 @@
1
1
  /**
2
- * MOJO Authentication System CSS
3
- * Complete styling for MOJO Framework authentication pages
2
+ * Simple Auth CSS (KISS)
3
+ * Aligns visuals with the new mountAuth UI.
4
4
  *
5
- * @version 2.0.0
6
- * @license MIT
7
- * @repository https://github.com/your-org/mojo-framework
8
- *
9
- * Usage in external projects:
10
- * <link rel="stylesheet" href="node_modules/mojo-framework/src/css/auth.css">
11
- *
12
- * Or via CDN:
13
- * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mojo-framework/css/auth.css">
14
- *
15
- * Or import in CSS:
16
- * @import url('path/to/mojo/src/css/auth.css');
5
+ * Scope: Mostly scoped to .auth-container subtree to avoid leaking styles globally.
6
+ * You can override CSS variables below to theme.
17
7
  */
18
8
 
19
- /* ==========================================================================
20
- CSS Custom Properties - Easy Theming for External Projects
21
- ========================================================================== */
22
-
23
- /* ==========================================================================
24
- CSS Custom Properties & Theming System
25
- ========================================================================== */
26
-
9
+ /* Root Variables */
27
10
  :root {
28
- /* Default Theme: Light Background, Light Panel */
29
-
30
- /* Background Variables */
31
- --mojo-auth-bg: #f4f7f6;
32
-
33
- /* Panel Variables */
34
- --mojo-auth-panel-bg: #ffffff;
35
- --mojo-auth-panel-border: rgba(0, 0, 0, 0.1);
36
- --mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
37
- --mojo-auth-panel-text: var(--bs-body-color);
38
- --mojo-auth-panel-text-muted: var(--bs-secondary-color);
39
- --mojo-auth-panel-input-bg: var(--bs-body-bg);
40
- --mojo-auth-panel-input-border: var(--bs-border-color);
41
- --mojo-auth-panel-input-color: var(--bs-body-color);
42
- --mojo-auth-panel-hr-bg: var(--bs-body-bg);
43
-
44
- /* Brand & Accent Colors */
45
- --mojo-auth-primary: #667eea;
46
- --mojo-auth-primary-dark: #5a6fd4;
47
- --mojo-auth-secondary: #764ba2;
48
-
49
- /* Layout variables */
50
- --mojo-auth-border-radius: var(--bs-border-radius-lg, 1rem);
51
- --mojo-auth-card-padding: 2rem;
52
- --mojo-auth-transition: all 0.2s ease;
11
+ --auth-primary: #3b82f6;
12
+ --auth-primary-hover: #2563eb;
13
+ --auth-surface: #ffffff;
14
+ --auth-text: #111827;
15
+ --auth-muted: #6b7280;
16
+ --auth-border: #e5e7eb;
17
+ --auth-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
18
+ --auth-shadow-hover: 0 15px 50px rgba(0, 0, 0, 0.15);
19
+
20
+ /* Accent/gradient */
21
+ --auth-gradient-start: #475569;
22
+ --auth-gradient-end: #334155;
23
+
24
+ /* Radii and spacing */
25
+ --auth-radius: 12px;
26
+ --auth-field-radius: 8px;
27
+
28
+ /* Spinner */
29
+ --auth-spinner-size: 1rem;
30
+ --auth-spinner-color: var(--auth-primary);
31
+ }
32
+
33
+ /* Container */
34
+ .auth-container {
35
+ width: 100%;
36
+ max-width: 420px;
37
+ margin: 3rem auto;
38
+ animation: auth-fade-in 0.4s ease-in;
39
+ color: var(--auth-text);
40
+ }
41
+
42
+ /* Card */
43
+ .auth-card {
44
+ background: var(--auth-surface);
45
+ border-radius: var(--auth-radius);
46
+ box-shadow: var(--auth-shadow);
47
+ padding: 2rem;
48
+ transition:
49
+ box-shadow 0.25s ease,
50
+ transform 0.2s ease;
53
51
  }
54
-
55
- /* ==========================================================================
56
- BACKGROUND THEMES (Apply to <body>)
57
- ========================================================================== */
58
-
59
- body.auth-bg-light {
60
- --mojo-auth-bg: #f4f7f6;
52
+ .auth-card:hover {
53
+ box-shadow: var(--auth-shadow-hover);
54
+ transform: translateY(-1px);
61
55
  }
62
56
 
63
- body.auth-bg-dark {
64
- --mojo-auth-bg: #1a202c;
57
+ /* Header */
58
+ .auth-header {
59
+ text-align: center;
60
+ margin-bottom: 1.5rem;
61
+ }
62
+ .auth-title {
63
+ font-size: 1.75rem;
64
+ font-weight: 700;
65
+ color: var(--auth-primary);
66
+ margin: 0 0 0.25rem 0;
67
+ }
68
+ .auth-subtitle {
69
+ color: var(--auth-muted);
70
+ font-size: 0.95rem;
71
+ margin: 0;
72
+ }
73
+
74
+ /* Status Messages */
75
+ .auth-container .alert {
76
+ border-radius: 8px;
77
+ padding: 0.875rem 1rem;
78
+ margin-bottom: 1.25rem;
79
+ font-size: 0.9rem;
80
+ border: 1px solid transparent;
81
+ animation: auth-slide-down 0.3s ease;
82
+ }
83
+ .auth-container .alert-success {
84
+ background-color: #d1f4e0;
85
+ border-color: #a3e3c4;
86
+ color: #0f5132;
87
+ }
88
+ .auth-container .alert-danger {
89
+ background-color: #f8d7da;
90
+ border-color: #f1aeb5;
91
+ color: #842029;
92
+ }
93
+ .auth-container .alert-info {
94
+ background-color: #cfe2ff;
95
+ border-color: #9ec5fe;
96
+ color: #084298;
97
+ }
98
+
99
+ /* Forms */
100
+ .auth-container .form-label {
101
+ display: block;
102
+ font-weight: 600;
103
+ color: #374151;
104
+ margin-bottom: 0.5rem;
105
+ font-size: 0.92rem;
106
+ }
107
+
108
+ .auth-container .form-control {
109
+ width: 100%;
110
+ border-radius: var(--auth-field-radius);
111
+ border: 2px solid #e5e7eb;
112
+ padding: 0.7rem 0.9rem;
113
+ font-size: 0.95rem;
114
+ line-height: 1.25rem;
115
+ transition:
116
+ border-color 0.15s ease,
117
+ box-shadow 0.15s ease;
118
+ background: #fff;
119
+ color: #111827;
120
+ outline: none;
121
+ box-sizing: border-box;
65
122
  }
66
-
67
- body.auth-bg-gradient {
68
- --mojo-auth-bg: linear-gradient(
69
- 135deg,
70
- var(--mojo-auth-primary) 0%,
71
- var(--mojo-auth-secondary) 100%
72
- );
123
+ .auth-container .form-control::placeholder {
124
+ color: #9ca3af;
73
125
  }
74
-
75
- /* ==========================================================================
76
- PANEL THEMES (Apply to <body>)
77
- ========================================================================== */
78
-
79
- /* Light Panel (Default) */
80
- body.auth-panel-light {
81
- --mojo-auth-panel-bg: #ffffff;
82
- --mojo-auth-panel-border: rgba(0, 0, 0, 0.1);
83
- --mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
84
- --mojo-auth-panel-text: var(--bs-body-color);
85
- --mojo-auth-panel-text-muted: var(--bs-secondary-color);
86
- --mojo-auth-panel-input-bg: var(--bs-body-bg);
87
- --mojo-auth-panel-input-border: var(--bs-border-color);
88
- --mojo-auth-panel-input-color: var(--bs-body-color);
89
- --mojo-auth-panel-hr-bg: var(--bs-body-bg);
126
+ .auth-container .form-control:focus {
127
+ border-color: var(--auth-primary);
128
+ box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25);
90
129
  }
91
130
 
92
- /* Dark Panel */
93
- body.auth-panel-dark {
94
- --mojo-auth-panel-bg: #2d3748;
95
- --mojo-auth-panel-border: rgba(255, 255, 255, 0.15);
96
- --mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
97
- --mojo-auth-panel-text: #f7fafc;
98
- --mojo-auth-panel-text-muted: #a0aec0;
99
- --mojo-auth-panel-input-bg: #1a202c;
100
- --mojo-auth-panel-input-border: #4a5568;
101
- --mojo-auth-panel-input-color: #f7fafc;
102
- --mojo-auth-panel-hr-bg: #2d3748;
131
+ /* Form check */
132
+ .auth-container .form-check {
133
+ padding-left: 1.75rem;
134
+ margin-bottom: 0.75rem;
135
+ position: relative;
103
136
  }
104
-
105
- /* Translucent Panel */
106
- body.auth-panel-translucent {
107
- --mojo-auth-panel-bg: rgba(255, 255, 255, 0.85);
108
- --mojo-auth-panel-border: rgba(255, 255, 255, 0.2);
109
- --mojo-auth-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
110
- --mojo-auth-panel-text: #2d3748;
111
- --mojo-auth-panel-text-muted: #4a5568;
112
- --mojo-auth-panel-input-bg: rgba(255, 255, 255, 0.7);
113
- --mojo-auth-panel-input-border: rgba(0, 0, 0, 0.1);
114
- --mojo-auth-panel-input-color: #2d3748;
115
- --mojo-auth-panel-hr-bg: transparent;
137
+ .auth-container .form-check-input {
138
+ width: 1.1rem;
139
+ height: 1.1rem;
140
+ position: absolute;
141
+ left: 0;
142
+ top: 0.15rem;
143
+ margin: 0;
144
+ appearance: none;
145
+ border: 2px solid var(--auth-border);
146
+ border-radius: 4px;
147
+ background: #fff;
148
+ cursor: pointer;
149
+ }
150
+ .auth-container .form-check-input:checked {
151
+ background-color: var(--auth-primary);
152
+ border-color: var(--auth-primary);
153
+ box-shadow: inset 0 0 0 2px #fff;
154
+ }
155
+ .auth-container .form-check-label {
156
+ cursor: pointer;
157
+ font-size: 0.95rem;
158
+ color: #374151;
159
+ }
160
+
161
+ /* Buttons */
162
+ .auth-container .btn {
163
+ display: inline-flex;
164
+ align-items: center;
165
+ justify-content: center;
166
+ border-radius: 8px;
167
+ padding: 0.7rem 1.1rem;
168
+ font-weight: 600;
169
+ font-size: 1rem;
170
+ cursor: pointer;
171
+ user-select: none;
172
+ border: 1px solid transparent;
173
+ transition:
174
+ transform 0.15s ease,
175
+ box-shadow 0.2s ease,
176
+ background-color 0.2s ease,
177
+ color 0.2s ease;
178
+ text-decoration: none;
179
+ background: #f9fafb;
180
+ color: #111827;
116
181
  }
117
-
118
- body.auth-bg-dark.auth-panel-translucent,
119
- body.auth-bg-gradient.auth-panel-translucent {
120
- --mojo-auth-panel-bg: rgba(45, 55, 72, 0.75);
121
- --mojo-auth-panel-border: rgba(255, 255, 255, 0.1);
122
- --mojo-auth-panel-text: #f7fafc;
123
- --mojo-auth-panel-text-muted: #a0aec0;
124
- --mojo-auth-panel-input-bg: rgba(26, 32, 44, 0.7);
125
- --mojo-auth-panel-input-border: rgba(255, 255, 255, 0.2);
126
- --mojo-auth-panel-input-color: #f7fafc;
127
- --mojo-auth-panel-hr-bg: transparent;
182
+ .auth-container .btn:disabled {
183
+ opacity: 0.7;
184
+ cursor: not-allowed;
185
+ transform: none !important;
128
186
  }
129
-
130
- /* ==========================================================================
131
- Auth Page Foundation
132
- ========================================================================== */
133
-
134
- .auth-page {
135
- background: var(--mojo-auth-bg);
136
- min-height: 100vh;
137
- font-family: var(--bs-font-sans-serif);
138
- transition: background 0.3s ease-in-out;
187
+ .auth-container .btn:hover:not(:disabled) {
188
+ transform: translateY(-1px);
189
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
139
190
  }
140
191
 
141
- /* ==========================================================================
142
- Card Container
143
- ========================================================================== */
144
-
145
- .auth-page .card {
146
- background: var(--mojo-auth-panel-bg) !important;
147
- border: 1px solid var(--mojo-auth-panel-border);
148
- border-radius: var(--mojo-auth-border-radius);
149
- box-shadow: var(--mojo-auth-panel-shadow);
150
- color: var(--mojo-auth-panel-text);
151
- backdrop-filter: blur(10px);
152
- transition:
153
- transform 0.2s ease,
154
- box-shadow 0.2s ease,
155
- background 0.3s ease,
156
- border 0.3s ease;
192
+ .auth-container .btn-primary {
193
+ background: linear-gradient(135deg, var(--auth-gradient-start), var(--auth-gradient-end));
194
+ color: #fff;
195
+ border: none;
157
196
  }
158
-
159
- .auth-page .card:hover {
160
- transform: translateY(-2px);
161
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
197
+ .auth-container .btn-primary:hover:not(:disabled) {
198
+ background: linear-gradient(135deg, var(--auth-primary-hover), var(--auth-gradient-end));
199
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.35);
162
200
  }
163
201
 
164
- .auth-page .card-body {
165
- position: relative;
166
- padding: var(--mojo-auth-card-padding);
202
+ .auth-container .btn-outline-primary {
203
+ background: transparent;
204
+ color: var(--auth-primary);
205
+ border-color: var(--auth-primary);
206
+ }
207
+ .auth-container .btn-outline-primary:hover:not(:disabled) {
208
+ background: rgba(59, 130, 246, 0.08);
209
+ color: var(--auth-primary-hover);
167
210
  }
168
211
 
169
- /* ==========================================================================
170
- Form Controls & Elements
171
- ========================================================================== */
212
+ .auth-container .btn-outline-secondary {
213
+ background: transparent;
214
+ color: #374151;
215
+ border-color: #9ca3af;
216
+ }
217
+ .auth-container .btn-outline-secondary:hover:not(:disabled) {
218
+ background: #f3f4f6;
219
+ color: #111827;
220
+ }
172
221
 
173
- .auth-page .form-label {
222
+ .auth-container .btn-link {
223
+ background: transparent;
224
+ border: none;
225
+ color: var(--auth-primary);
226
+ padding: 0;
174
227
  font-weight: 500;
175
- color: var(--mojo-auth-panel-text);
176
228
  }
177
-
178
- .auth-page .form-text {
179
- color: var(--mojo-auth-panel-text-muted);
229
+ .auth-container .btn-link:hover {
230
+ color: var(--auth-primary-hover);
231
+ text-decoration: underline;
180
232
  }
181
233
 
182
- .auth-page .form-control {
183
- background-color: var(--mojo-auth-panel-input-bg);
184
- border: 1px solid var(--mojo-auth-panel-input-border);
185
- color: var(--mojo-auth-panel-input-color);
186
- border-radius: var(--bs-border-radius);
187
- transition: var(--mojo-auth-transition);
234
+ /* Spinner */
235
+ @keyframes auth-spin {
236
+ to {
237
+ transform: rotate(360deg);
238
+ }
188
239
  }
189
-
190
- .auth-page .form-control::placeholder {
191
- color: var(--mojo-auth-panel-text-muted);
192
- opacity: 0.7;
240
+ .auth-container .spinner-border {
241
+ display: inline-block;
242
+ width: var(--auth-spinner-size);
243
+ height: var(--auth-spinner-size);
244
+ border: 0.15em solid rgba(0, 0, 0, 0.1);
245
+ border-right-color: var(--auth-spinner-color);
246
+ border-radius: 50%;
247
+ animation: auth-spin 0.75s linear infinite;
193
248
  }
194
249
 
195
- .auth-page .form-control:focus,
196
- .auth-page .form-check-input:focus {
197
- border-color: var(--mojo-auth-primary);
198
- box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
199
- outline: none;
250
+ /* Utility layout helpers (minimal set) */
251
+ .auth-container .w-100 {
252
+ width: 100%;
200
253
  }
201
-
202
- .auth-page .text-muted {
203
- color: var(--mojo-auth-panel-text-muted) !important;
254
+ .auth-container .mb-2 {
255
+ margin-bottom: 0.5rem;
204
256
  }
205
-
206
- /* Dividers */
207
- .auth-page .position-relative hr {
208
- border-color: var(--mojo-auth-panel-border);
209
- opacity: 0.75;
257
+ .auth-container .mb-3 {
258
+ margin-bottom: 0.75rem;
210
259
  }
211
-
212
- .auth-page .position-relative .position-absolute {
213
- background: var(--mojo-auth-panel-hr-bg);
214
- color: var(--mojo-auth-panel-text-muted);
215
- padding: 0 1rem;
260
+ .auth-container .mb-4 {
261
+ margin-bottom: 1rem;
262
+ }
263
+ .auth-container .text-center {
264
+ text-align: center;
265
+ }
266
+ .auth-container .small {
216
267
  font-size: 0.875rem;
217
- font-weight: 500;
218
268
  }
219
-
220
- /* ==========================================================================
221
- Buttons & Links
222
- ========================================================================== */
223
-
224
- .auth-page .btn-primary {
225
- background: linear-gradient(
226
- 135deg,
227
- var(--mojo-auth-primary) 0%,
228
- var(--mojo-auth-secondary) 100%
229
- );
230
- border: none;
231
- border-radius: var(--bs-border-radius);
232
- font-weight: 500;
233
- transition: var(--mojo-auth-transition);
269
+ .auth-container .px-3 {
270
+ padding-left: 0.75rem;
271
+ padding-right: 0.75rem;
234
272
  }
235
-
236
- .auth-page .btn-primary:hover:not(:disabled) {
237
- background: linear-gradient(
238
- 135deg,
239
- var(--mojo-auth-primary-dark) 0%,
240
- var(--mojo-auth-secondary) 100%
241
- );
242
- transform: translateY(-1px);
243
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
273
+ .auth-container .d-grid {
274
+ display: grid;
244
275
  }
245
-
246
- .auth-page a {
247
- color: var(--mojo-auth-primary);
248
- text-decoration: none;
249
- transition: color 0.2s ease;
276
+ .auth-container .gap-2 {
277
+ gap: 0.5rem;
250
278
  }
251
279
 
252
- .auth-page a:hover {
253
- color: var(--mojo-auth-primary-dark);
254
- text-decoration: underline;
280
+ /* Divider "OR" (works even without a utility framework) */
281
+ .auth-container .position-relative {
282
+ position: relative;
255
283
  }
256
-
257
- /* ==========================================================================
258
- Footer Links
259
- ========================================================================== */
260
-
261
- .auth-footer-links a {
262
- color: var(--mojo-auth-panel-text-muted);
263
- text-decoration: none;
264
- transition: all 0.2s ease;
284
+ .auth-container .position-absolute {
285
+ position: absolute;
265
286
  }
266
-
267
- .auth-footer-links a:hover {
268
- color: var(--mojo-auth-primary);
269
- text-decoration: underline;
287
+ .auth-container .top-50 {
288
+ top: 50%;
270
289
  }
271
-
272
- body.auth-panel-dark .auth-footer-links a {
273
- opacity: 0.8;
290
+ .auth-container .start-50 {
291
+ left: 50%;
274
292
  }
275
-
276
- body.auth-panel-dark .auth-footer-links a:hover {
277
- opacity: 1;
293
+ .auth-container .translate-middle {
294
+ transform: translate(-50%, -50%);
278
295
  }
279
296
 
280
- /* ==========================================================================
281
- Alerts
282
- ========================================================================== */
283
-
284
- body.auth-panel-dark .alert-danger {
285
- background-color: rgba(220, 53, 69, 0.2);
286
- color: #f8d7da;
297
+ /* Links */
298
+ .auth-container a {
299
+ color: var(--auth-primary);
300
+ text-decoration: none;
301
+ transition: color 0.2s ease;
287
302
  }
288
-
289
- body.auth-panel-dark .alert-success {
290
- background-color: rgba(25, 135, 84, 0.2);
291
- color: #d1e7dd;
303
+ .auth-container a:hover {
304
+ color: var(--auth-primary-hover);
305
+ text-decoration: underline;
292
306
  }
293
307
 
294
- /* ==========================================================================
295
- (Remaining styles are mostly theme-agnostic and are left as is)
296
- ========================================================================== */
297
-
298
- /* ... (other styles like password strength, responsive design, etc.) ... */
299
- .auth-page .form-check-input:checked {
300
- background-color: var(--mojo-auth-primary);
301
- border-color: var(--mojo-auth-primary);
308
+ /* View transitions */
309
+ .auth-container .auth-view {
310
+ animation: auth-fade-in 0.25s ease;
302
311
  }
303
312
 
304
- .auth-page .progress {
305
- background-color: #e9ecef;
306
- border-radius: 2px;
307
- height: 4px;
313
+ /* Animations */
314
+ @keyframes auth-fade-in {
315
+ from {
316
+ opacity: 0;
317
+ transform: translateY(-8px);
318
+ }
319
+ to {
320
+ opacity: 1;
321
+ transform: translateY(0);
322
+ }
323
+ }
324
+ @keyframes auth-slide-down {
325
+ from {
326
+ opacity: 0;
327
+ transform: translateY(-8px);
328
+ }
329
+ to {
330
+ opacity: 1;
331
+ transform: translateY(0);
332
+ }
308
333
  }
309
334
 
310
- .auth-page .alert {
311
- border-radius: var(--bs-border-radius);
312
- border: none;
313
- box-shadow: var(--bs-box-shadow-sm);
335
+ /* Accessibility */
336
+ .auth-container *:focus-visible {
337
+ outline: 2px solid var(--auth-primary);
338
+ outline-offset: 2px;
314
339
  }
315
340
 
316
- @media (max-width: 768px) {
317
- .auth-page {
318
- padding: 1rem 0;
341
+ /* Responsive */
342
+ @media (max-width: 576px) {
343
+ .auth-card {
344
+ padding: 1.5rem;
319
345
  }
320
- .auth-page .card {
321
- margin: 0 1rem;
346
+ .auth-title {
347
+ font-size: 1.5rem;
348
+ }
349
+ .auth-subtitle {
350
+ font-size: 0.9rem;
322
351
  }
323
352
  }
353
+
354
+ /* Optional full-page background helper (use on host page if desired)
355
+ Example:
356
+ body {
357
+ background: linear-gradient(135deg, var(--auth-gradient-start), var(--auth-gradient-end));
358
+ min-height: 100vh;
359
+ display: grid;
360
+ place-items: center;
361
+ }
362
+ */