@growthub/cli 0.9.13 → 0.9.16

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 (34) hide show
  1. package/README.md +17 -5
  2. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/README.md +27 -0
  3. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/integration-entities/route.js +41 -9
  4. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/list-entities/route.js +67 -0
  5. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/refresh-source/route.js +124 -0
  6. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/refresh-sources/route.js +127 -0
  7. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/register-resolver/route.js +119 -0
  8. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/resolvers/route.js +41 -0
  9. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/sandbox-adapters/route.js +21 -0
  10. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/sandbox-run/route.js +634 -0
  11. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/test-api-record/route.js +126 -0
  12. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/test-source/route.js +130 -0
  13. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/page.jsx +1349 -222
  14. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/globals.css +1048 -4
  15. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workspace-builder.jsx +1540 -433
  16. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/docs/data-sources-api-registry.md +141 -0
  17. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/docs/sandbox-environment-primitive.md +32 -0
  18. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/integrations/resolver-loader.js +57 -0
  19. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/integrations/resolvers/README.md +133 -0
  20. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/integrations/resolvers/google-analytics.js +160 -0
  21. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/integrations/source-resolver-registry.js +85 -0
  22. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/adapter-loader.js +58 -0
  23. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/adapters/README.md +63 -0
  24. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/default-local-agent-host.js +284 -0
  25. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/default-local-process.js +194 -0
  26. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/index.js +33 -0
  27. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/adapters/sandboxes/sandbox-adapter-registry.js +113 -0
  28. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-config.js +79 -1
  29. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-data-model.js +211 -0
  30. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-schema.js +126 -7
  31. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/package.json +1 -0
  32. package/assets/worker-kits/growthub-custom-workspace-starter-v1/kit.json +16 -0
  33. package/dist/index.js +1764 -40677
  34. package/package.json +2 -2
@@ -868,6 +868,468 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
868
868
  color: #333;
869
869
  outline: none;
870
870
  }
871
+ .workspace-tab-refresh {
872
+ margin-left: auto;
873
+ display: inline-flex;
874
+ align-items: center;
875
+ gap: 6px;
876
+ padding: 4px 10px;
877
+ border-radius: 6px;
878
+ font-size: 12px;
879
+ font-weight: 500;
880
+ color: #444;
881
+ border: 1px solid #dcdcdc;
882
+ background: #fff;
883
+ transition: background 0.15s, color 0.15s, opacity 0.15s;
884
+ }
885
+ .workspace-tab-refresh:hover:not(:disabled) {
886
+ background: #f3f3f3;
887
+ color: #111;
888
+ }
889
+ .workspace-tab-refresh.inert,
890
+ .workspace-tab-refresh:disabled {
891
+ opacity: 0.4;
892
+ cursor: default;
893
+ }
894
+ .workspace-tab-refresh.loading {
895
+ color: #555;
896
+ }
897
+ @keyframes workspace-spin {
898
+ from { transform: rotate(0deg); }
899
+ to { transform: rotate(360deg); }
900
+ }
901
+ .workspace-tab-refresh svg.spinning {
902
+ animation: workspace-spin 0.7s linear infinite;
903
+ }
904
+
905
+ /* ─── Live Source Wizard ──────────────────────────────────────────────────── */
906
+
907
+ .live-source-wizard {
908
+ padding: 12px 0 4px;
909
+ display: flex;
910
+ flex-direction: column;
911
+ gap: 12px;
912
+ }
913
+
914
+ /* Step breadcrumb */
915
+ .live-source-steps {
916
+ display: flex;
917
+ align-items: center;
918
+ gap: 0;
919
+ padding: 0 2px;
920
+ overflow-x: auto;
921
+ }
922
+ .live-source-step {
923
+ display: inline-flex;
924
+ align-items: center;
925
+ gap: 5px;
926
+ font-size: 11px;
927
+ color: #999;
928
+ padding: 4px 6px;
929
+ white-space: nowrap;
930
+ }
931
+ .live-source-step.active {
932
+ color: #111;
933
+ font-weight: 600;
934
+ }
935
+ .live-source-step.done {
936
+ color: #2a9d5c;
937
+ }
938
+ .live-source-step-dot {
939
+ display: inline-flex;
940
+ align-items: center;
941
+ justify-content: center;
942
+ width: 18px;
943
+ height: 18px;
944
+ border-radius: 999px;
945
+ background: #ececec;
946
+ font-size: 10px;
947
+ font-weight: 700;
948
+ color: #888;
949
+ }
950
+ .live-source-step.active .live-source-step-dot {
951
+ background: #111;
952
+ color: #fff;
953
+ }
954
+ .live-source-step.done .live-source-step-dot {
955
+ background: #2a9d5c;
956
+ color: #fff;
957
+ }
958
+ .live-source-step-label {
959
+ display: none;
960
+ }
961
+ .live-source-step.active .live-source-step-label,
962
+ .live-source-step.done .live-source-step-label {
963
+ display: inline;
964
+ }
965
+
966
+ /* Step body */
967
+ .live-source-step-body {
968
+ display: flex;
969
+ flex-direction: column;
970
+ gap: 10px;
971
+ padding: 4px 0;
972
+ }
973
+ .live-source-step-title {
974
+ font-size: 13px;
975
+ font-weight: 600;
976
+ color: #111;
977
+ margin: 0;
978
+ }
979
+ .live-source-step-hint {
980
+ font-size: 11px;
981
+ color: #777;
982
+ margin: 0;
983
+ line-height: 1.5;
984
+ }
985
+
986
+ /* Auth mode toggle */
987
+ .live-source-auth-toggle {
988
+ display: flex;
989
+ flex-direction: column;
990
+ gap: 6px;
991
+ }
992
+ .live-source-auth-toggle button {
993
+ display: flex;
994
+ flex-direction: column;
995
+ align-items: flex-start;
996
+ gap: 2px;
997
+ padding: 10px 12px;
998
+ border: 1px solid #e0e0e0;
999
+ border-radius: 8px;
1000
+ background: #fff;
1001
+ text-align: left;
1002
+ transition: border-color 0.1s, background 0.1s;
1003
+ position: relative;
1004
+ }
1005
+ .live-source-auth-toggle button.active {
1006
+ border-color: #111;
1007
+ background: #f7f7f7;
1008
+ }
1009
+ .live-source-auth-toggle button strong {
1010
+ font-size: 13px;
1011
+ color: #111;
1012
+ }
1013
+ .live-source-auth-toggle button em {
1014
+ font-size: 11px;
1015
+ color: #777;
1016
+ font-style: normal;
1017
+ }
1018
+
1019
+ /* Badges */
1020
+ .live-source-badge {
1021
+ display: inline-flex;
1022
+ padding: 2px 7px;
1023
+ border-radius: 999px;
1024
+ font-size: 10px;
1025
+ font-weight: 600;
1026
+ letter-spacing: 0.3px;
1027
+ margin-top: 4px;
1028
+ }
1029
+ .live-source-badge.connected { background: #dcf5e9; color: #1a7a44; }
1030
+ .live-source-badge.warn { background: #fff3cd; color: #856404; }
1031
+ .live-source-badge.neutral { background: #ececec; color: #555; }
1032
+
1033
+ /* Integration list */
1034
+ .live-source-integration-list {
1035
+ display: flex;
1036
+ flex-direction: column;
1037
+ gap: 4px;
1038
+ max-height: 160px;
1039
+ overflow-y: auto;
1040
+ }
1041
+ .live-source-integration-row {
1042
+ display: flex;
1043
+ align-items: center;
1044
+ gap: 8px;
1045
+ padding: 8px 10px;
1046
+ border: 1px solid #e8e8e8;
1047
+ border-radius: 6px;
1048
+ background: #fff;
1049
+ text-align: left;
1050
+ cursor: pointer;
1051
+ transition: border-color 0.1s, background 0.1s;
1052
+ }
1053
+ .live-source-integration-row.active {
1054
+ border-color: #111;
1055
+ background: #f7f7f7;
1056
+ }
1057
+ .live-source-integration-icon {
1058
+ font-size: 14px;
1059
+ width: 22px;
1060
+ text-align: center;
1061
+ flex-shrink: 0;
1062
+ }
1063
+ .live-source-integration-meta {
1064
+ flex: 1;
1065
+ min-width: 0;
1066
+ }
1067
+ .live-source-integration-meta strong {
1068
+ display: block;
1069
+ font-size: 13px;
1070
+ color: #111;
1071
+ }
1072
+ .live-source-integration-meta em {
1073
+ font-size: 11px;
1074
+ color: #777;
1075
+ font-style: normal;
1076
+ }
1077
+ .live-source-empty {
1078
+ font-size: 12px;
1079
+ color: #999;
1080
+ padding: 6px 0;
1081
+ margin: 0;
1082
+ }
1083
+
1084
+ /* Custom id / field inputs */
1085
+ .live-source-custom-id,
1086
+ .live-source-field {
1087
+ display: flex;
1088
+ flex-direction: column;
1089
+ gap: 4px;
1090
+ }
1091
+ .live-source-custom-id span,
1092
+ .live-source-field span {
1093
+ font-size: 11px;
1094
+ font-weight: 600;
1095
+ color: #555;
1096
+ text-transform: uppercase;
1097
+ letter-spacing: 0.4px;
1098
+ }
1099
+ .live-source-custom-id input,
1100
+ .live-source-field input {
1101
+ padding: 7px 10px;
1102
+ border: 1px solid #ddd;
1103
+ border-radius: 6px;
1104
+ font-size: 13px;
1105
+ color: #111;
1106
+ background: #fff;
1107
+ }
1108
+ .live-source-custom-id input:focus,
1109
+ .live-source-field input:focus {
1110
+ outline: 2px solid #111;
1111
+ border-color: transparent;
1112
+ }
1113
+
1114
+ /* Summary row (step 5) */
1115
+ .live-source-summary {
1116
+ display: flex;
1117
+ flex-direction: column;
1118
+ gap: 4px;
1119
+ background: #f7f7f7;
1120
+ border-radius: 6px;
1121
+ padding: 10px 12px;
1122
+ }
1123
+ .live-source-summary span {
1124
+ display: flex;
1125
+ gap: 6px;
1126
+ font-size: 12px;
1127
+ }
1128
+ .live-source-summary em {
1129
+ color: #888;
1130
+ font-style: normal;
1131
+ min-width: 80px;
1132
+ }
1133
+ .live-source-summary strong {
1134
+ color: #111;
1135
+ }
1136
+
1137
+ /* Test button */
1138
+ .live-source-test-btn {
1139
+ display: inline-flex;
1140
+ align-items: center;
1141
+ gap: 7px;
1142
+ padding: 8px 16px;
1143
+ border-radius: 7px;
1144
+ background: #111;
1145
+ color: #fff;
1146
+ font-size: 13px;
1147
+ font-weight: 600;
1148
+ border: none;
1149
+ cursor: pointer;
1150
+ transition: opacity 0.15s;
1151
+ }
1152
+ .live-source-test-btn:disabled {
1153
+ opacity: 0.4;
1154
+ cursor: default;
1155
+ }
1156
+ .live-source-test-btn svg { flex-shrink: 0; }
1157
+
1158
+ /* Testing spinner state */
1159
+ .live-source-testing {
1160
+ display: flex;
1161
+ align-items: center;
1162
+ gap: 8px;
1163
+ font-size: 13px;
1164
+ color: #555;
1165
+ padding: 6px 0;
1166
+ }
1167
+ .live-source-testing svg {
1168
+ animation: workspace-spin 0.7s linear infinite;
1169
+ }
1170
+
1171
+ /* Test result panels */
1172
+ .live-source-test-result {
1173
+ display: flex;
1174
+ flex-direction: column;
1175
+ gap: 6px;
1176
+ padding: 10px 12px;
1177
+ border-radius: 8px;
1178
+ border: 1px solid;
1179
+ }
1180
+ .live-source-test-result.success {
1181
+ background: #f0faf5;
1182
+ border-color: #b2e0c8;
1183
+ color: #1a7a44;
1184
+ }
1185
+ .live-source-test-result.success strong { font-size: 13px; }
1186
+ .live-source-test-result.success span { font-size: 11px; color: #3a8a5c; }
1187
+ .live-source-test-result.error {
1188
+ background: #fff5f5;
1189
+ border-color: #fdd;
1190
+ color: #b02020;
1191
+ }
1192
+ .live-source-test-result.error strong { font-size: 13px; }
1193
+ .live-source-test-result.error p { font-size: 12px; margin: 0; color: #b02020; }
1194
+ .live-source-retry {
1195
+ align-self: flex-start;
1196
+ padding: 4px 10px;
1197
+ border-radius: 5px;
1198
+ border: 1px solid currentColor;
1199
+ background: transparent;
1200
+ font-size: 11px;
1201
+ cursor: pointer;
1202
+ color: inherit;
1203
+ }
1204
+
1205
+ /* Preview table */
1206
+ .live-source-preview {
1207
+ overflow-x: auto;
1208
+ margin-top: 4px;
1209
+ border-radius: 6px;
1210
+ border: 1px solid #d0f0e0;
1211
+ }
1212
+ .live-source-preview table {
1213
+ width: 100%;
1214
+ border-collapse: collapse;
1215
+ font-size: 11px;
1216
+ }
1217
+ .live-source-preview th {
1218
+ background: #e8f7ef;
1219
+ padding: 5px 8px;
1220
+ text-align: left;
1221
+ font-weight: 600;
1222
+ color: #1a5c38;
1223
+ border-bottom: 1px solid #c0e8d4;
1224
+ white-space: nowrap;
1225
+ }
1226
+ .live-source-preview td {
1227
+ padding: 4px 8px;
1228
+ color: #222;
1229
+ border-bottom: 1px solid #eaf7f0;
1230
+ max-width: 180px;
1231
+ overflow: hidden;
1232
+ text-overflow: ellipsis;
1233
+ white-space: nowrap;
1234
+ }
1235
+ .live-source-preview tr:last-child td { border-bottom: none; }
1236
+ .live-source-null { color: #bbb; font-style: normal; }
1237
+
1238
+ /* Nav row (back / next / apply) */
1239
+ .live-source-nav {
1240
+ display: flex;
1241
+ align-items: center;
1242
+ gap: 8px;
1243
+ padding-top: 4px;
1244
+ }
1245
+ .live-source-back {
1246
+ padding: 6px 12px;
1247
+ border-radius: 6px;
1248
+ border: 1px solid #ddd;
1249
+ background: #fff;
1250
+ font-size: 12px;
1251
+ color: #555;
1252
+ cursor: pointer;
1253
+ }
1254
+ .live-source-next {
1255
+ flex: 1;
1256
+ padding: 8px 14px;
1257
+ border-radius: 6px;
1258
+ background: #111;
1259
+ color: #fff;
1260
+ font-size: 13px;
1261
+ font-weight: 600;
1262
+ border: none;
1263
+ cursor: pointer;
1264
+ transition: opacity 0.15s;
1265
+ }
1266
+ .live-source-next:disabled { opacity: 0.35; cursor: default; }
1267
+ .live-source-apply {
1268
+ flex: 1;
1269
+ padding: 9px 14px;
1270
+ border-radius: 6px;
1271
+ background: #1a7a44;
1272
+ color: #fff;
1273
+ font-size: 13px;
1274
+ font-weight: 700;
1275
+ border: none;
1276
+ cursor: pointer;
1277
+ transition: opacity 0.15s;
1278
+ }
1279
+ .live-source-apply:disabled {
1280
+ background: #ccc;
1281
+ color: #fff;
1282
+ cursor: default;
1283
+ }
1284
+ .live-source-cancel {
1285
+ align-self: flex-start;
1286
+ font-size: 11px;
1287
+ color: #999;
1288
+ background: none;
1289
+ border: none;
1290
+ cursor: pointer;
1291
+ padding: 2px 0;
1292
+ text-decoration: underline;
1293
+ }
1294
+
1295
+ /* Live source active state badge in subpanel */
1296
+ .workspace-active-source-state.live-source-active {
1297
+ border-left: 3px solid #2a9d5c;
1298
+ }
1299
+ .live-source-reconfigure {
1300
+ margin-left: auto;
1301
+ padding: 3px 8px;
1302
+ border-radius: 5px;
1303
+ border: 1px solid #2a9d5c;
1304
+ background: transparent;
1305
+ color: #2a9d5c;
1306
+ font-size: 11px;
1307
+ cursor: pointer;
1308
+ }
1309
+
1310
+ /* "Configure →" label on Live Source entry in type picker */
1311
+ .workspace-source-configure {
1312
+ font-size: 11px;
1313
+ color: #888;
1314
+ margin-left: auto;
1315
+ }
1316
+ .workspace-source-object-row.live-source-entry {
1317
+ cursor: pointer;
1318
+ }
1319
+
1320
+ /* Resolver management in management panel */
1321
+ .workspace-readiness-action {
1322
+ padding: 4px 10px;
1323
+ border-radius: 5px;
1324
+ border: 1px solid #ddd;
1325
+ background: #fff;
1326
+ font-size: 12px;
1327
+ cursor: pointer;
1328
+ }
1329
+ .workspace-readiness-action:disabled { opacity: 0.5; cursor: default; }
1330
+ .resolver-upload-result span { font-weight: 600; }
1331
+ .resolver-upload-result.good span { color: #1a7a44; }
1332
+ .resolver-upload-result.error span { color: #b02020; }
871
1333
  .workspace-toolbar-actions select,
872
1334
  .workspace-widget-settings select {
873
1335
  min-height: 32px;
@@ -1064,6 +1526,14 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
1064
1526
  .workspace-view-table span + span {
1065
1527
  border-left: 1px solid #eeeeee;
1066
1528
  }
1529
+ .workspace-view-empty {
1530
+ display: flex !important;
1531
+ align-items: center;
1532
+ justify-content: center;
1533
+ min-height: 72px !important;
1534
+ color: #9ca3af;
1535
+ font-weight: 600;
1536
+ }
1067
1537
  .workspace-view-table footer {
1068
1538
  padding: 7px 8px;
1069
1539
  color: #999;
@@ -3408,9 +3878,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
3408
3878
  .dm-object-icon { color: #94a3b8; flex-shrink: 0; }
3409
3879
  .dm-object-name { font-size: 13px; font-weight: 600; color: #111827; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
3410
3880
  .dm-object-row-meta { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 18px; font-size: 11px; color: #888; }
3411
- .dm-badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #e2e8f0; background: #f1f5f9; color: #475569; padding: 2px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
3412
- .dm-badge-datasource { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
3413
- .dm-badge-integration { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
3881
+ .dm-badge { display: inline-flex; align-items: center; border-radius: 4px; border: 1px solid #e4e4e4; background: #f5f5f5; color: #555; padding: 1px 6px; font-size: 11px; font-weight: 500; white-space: nowrap; letter-spacing: .01em; }
3882
+ .dm-badge-datasource { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
3883
+ .dm-badge-integration { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
3414
3884
  .dm-detail-panel { min-width: 0; }
3415
3885
  .dm-detail-header { padding: 14px 18px 10px; border-bottom: 1px solid #efefef; }
3416
3886
  .dm-detail-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
@@ -3419,7 +3889,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
3419
3889
  .dm-detail-meta-row code { font-size: 11px; color: #6b7280; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; }
3420
3890
  .dm-tabs { display: flex; border-bottom: 1px solid #efefef; background: #fafafa; padding: 0 16px; }
3421
3891
  .dm-tab { border: 0; background: transparent; padding: 10px 12px; font: inherit; font-size: 13px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
3422
- .dm-tab.active { color: #1d4ed8; border-bottom-color: #1d4ed8; font-weight: 600; }
3892
+ .dm-tab.active { color: #111; border-bottom-color: #111; font-weight: 600; }
3423
3893
  .dm-tab-content { padding: 16px 18px; overflow-x: auto; }
3424
3894
  .dm-tab-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
3425
3895
  .dm-tab-toolbar-actions, .dm-inline-add, .dm-csv-options { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@@ -3466,3 +3936,577 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
3466
3936
  .dm-layout { grid-template-columns: 1fr; }
3467
3937
  .dm-object-list { border-right: 0; border-bottom: 1px solid #e8e8e8; }
3468
3938
  }
3939
+
3940
+ /* ─── Data Model v2 — Twenty CRM / Airtable style ────────────────────────── */
3941
+
3942
+ /* Layout */
3943
+ .dm-layout-v2 { display: grid; grid-template-columns: 224px minmax(0,1fr); border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; min-height: 580px; }
3944
+
3945
+ /* Object column */
3946
+ .dm-obj-col { display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; background: #fafafa; }
3947
+ .dm-obj-col-head { padding: 11px 14px 8px; border-bottom: 1px solid #efefef; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
3948
+ .dm-obj-col-body { flex: 1; overflow-y: auto; padding: 6px; }
3949
+ .dm-obj-col-foot { padding: 8px; border-top: 1px solid #efefef; }
3950
+
3951
+ .dm-obj-row { width: 100%; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; text-align: left; padding: 7px 9px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: #555; }
3952
+ .dm-obj-row:hover { background: #f0f0f0; }
3953
+ .dm-obj-row.active { background: #111; color: #fff; }
3954
+ .dm-obj-row.active .dm-obj-icon { color: #fff; }
3955
+ .dm-obj-row.active .dm-badge { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.18); }
3956
+ .dm-obj-icon { color: #94a3b8; flex-shrink: 0; }
3957
+ .dm-obj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
3958
+ .dm-obj-add-btn { width: 100%; display: flex; align-items: center; gap: 6px; border: 1px dashed #d5d5d5; border-radius: 6px; background: transparent; color: #888; font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; transition: background .1s, color .1s; }
3959
+ .dm-obj-add-btn:hover { background: #f5f5f5; border-color: #999; color: #222; }
3960
+
3961
+ /* Detail panel v2 */
3962
+ .dm-detail-v2 { display: flex; flex-direction: column; min-width: 0; }
3963
+ .dm-detail-v2-head { padding: 14px 18px 10px; border-bottom: 1px solid #efefef; }
3964
+ .dm-detail-v2-title { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
3965
+ .dm-detail-v2-title h2 { margin: 0; font-size: 15px; font-weight: 600; color: #111827; flex: 1; }
3966
+ .dm-detail-v2-meta { display: flex; align-items: center; gap: 10px; padding-left: 21px; font-size: 12px; color: #9ca3af; }
3967
+ .dm-detail-v2-meta code { font-size: 11px; color: #6b7280; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; }
3968
+
3969
+ /* Source validation banner */
3970
+ .dm-validation-banner { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
3971
+
3972
+ /* Tabs v2 */
3973
+ .dm-tabs-v2 { display: flex; border-bottom: 1px solid #ebebeb; background: #fff; padding: 0 16px; }
3974
+ .dm-tab-v2 { border: 0; background: transparent; padding: 9px 12px; font: inherit; font-size: 13px; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; }
3975
+ .dm-tab-v2:hover { color: #333; }
3976
+ .dm-tab-v2.active { color: #111; border-bottom-color: #111; font-weight: 600; }
3977
+ .dm-tab-body { padding: 16px 18px; overflow-x: auto; flex: 1; }
3978
+
3979
+ /* Fields tab v2 — Airtable style */
3980
+ .dm-fields-tab {}
3981
+ .dm-field-list-v2 { display: grid; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
3982
+ .dm-field-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: #333; border-bottom: 1px solid #f2f2f2; background: #fff; }
3983
+ .dm-field-row:last-child { border-bottom: 0; }
3984
+ .dm-field-row:hover { background: #fafafa; }
3985
+ .dm-field-row.dm-field-system { color: #aaa; }
3986
+ .dm-field-grip { color: #d1d5db; flex-shrink: 0; cursor: grab; }
3987
+ .dm-field-type-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: #f3f4f6; color: #6b7280; flex-shrink: 0; }
3988
+ .dm-field-name { flex: 1; font-weight: 500; }
3989
+ .dm-field-sys-badge { font-size: 10px; color: #9ca3af; border: 1px solid #e5e7eb; border-radius: 999px; padding: 1px 7px; background: #f9fafb; font-weight: 600; }
3990
+ .dm-field-add-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; background: transparent; font: inherit; font-size: 13px; color: #9ca3af; cursor: pointer; border-top: 1px solid #f3f4f6; }
3991
+ .dm-field-add-row:hover:not(:disabled) { background: #f9fafb; color: #374151; }
3992
+ .dm-field-add-row:disabled { opacity: .45; cursor: not-allowed; }
3993
+ .dm-field-add-active { background: #fafafa !important; }
3994
+ .dm-field-add-input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; color: #111827; outline: none; min-width: 0; }
3995
+ .dm-source-notice { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 7px 10px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px; font-size: 12px; color: #0369a1; }
3996
+ .dm-empty-notice { padding: 24px; text-align: center; color: #9ca3af; font-size: 13px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }
3997
+
3998
+ /* Records tab v2 */
3999
+ .dm-records-tab {}
4000
+ .dm-records-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
4001
+ .dm-stat-label { font-size: 12px; color: #9ca3af; font-weight: 600; }
4002
+ .dm-records-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
4003
+ .dm-btn-ghost { display: inline-flex; align-items: center; gap: 5px; height: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #555; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; transition: background .1s, border-color .1s; }
4004
+ .dm-btn-ghost:hover { background: #f5f5f5; border-color: #ccc; color: #222; }
4005
+ .dm-btn-primary-sm { display: inline-flex; align-items: center; gap: 5px; height: 28px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 12px; padding: 0 11px; cursor: pointer; font-weight: 500; transition: background .12s; }
4006
+ .dm-btn-primary-sm:hover { background: #333; }
4007
+ .dm-btn-primary-sm:disabled { opacity: .45; cursor: not-allowed; }
4008
+ .dm-table-wrap { border: 1px solid #e5e7eb; border-radius: 8px; overflow-x: auto; }
4009
+ .dm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
4010
+ .dm-table th { background: #f9fafb; border-bottom: 1px solid #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 600; text-align: left; padding: 8px 10px; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
4011
+ .dm-table td { border-bottom: 1px solid #f3f4f6; padding: 4px 8px; }
4012
+ .dm-table tbody tr:last-child td { border-bottom: 0; }
4013
+ .dm-table tbody tr:hover td { background: #fafafa; }
4014
+ .dm-th-num,.dm-td-num { width: 36px; color: #9ca3af; text-align: center; }
4015
+ .dm-td-actions { width: 60px; text-align: right; white-space: nowrap; }
4016
+ .dm-row-action { width: 24px; height: 24px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; color: #6b7280; cursor: pointer; font-size: 12px; }
4017
+ .dm-row-action:hover { background: #f3f4f6; }
4018
+ .dm-row-action.danger { color: #dc2626; }
4019
+ .dm-row-action.danger:hover { background: #fef2f2; border-color: #fca5a5; }
4020
+ .dm-row-action:disabled { opacity: .4; cursor: not-allowed; }
4021
+ .dm-csv-panel { border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; padding: 10px 12px; margin-bottom: 12px; }
4022
+ .dm-csv-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #374151; }
4023
+ .dm-csv-textarea { width: 100%; margin-bottom: 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; padding: 7px 10px; box-sizing: border-box; resize: vertical; }
4024
+
4025
+ /* Data Model database grid */
4026
+ .dm-db-surface { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; flex: 1; background: #fff; }
4027
+ .dm-db-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
4028
+ .dm-db-toolbar-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
4029
+ .dm-db-toolbar-title strong { font-size: 13px; color: #111827; font-weight: 650; }
4030
+ .dm-db-toolbar-title span { font-size: 12px; color: #9ca3af; }
4031
+ .dm-db-grid-wrap { flex: 1; min-height: 420px; overflow: auto; border: 1px solid #dfe3e8; border-radius: 7px; background: #fff; }
4032
+ .dm-db-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; color: #1f2937; }
4033
+ .dm-db-grid th { position: sticky; top: 0; z-index: 1; height: 32px; background: #f8fafc; color: #475569; border-bottom: 1px solid #dfe3e8; border-right: 1px solid #edf0f3; padding: 0 10px; text-align: left; font-weight: 650; white-space: nowrap; }
4034
+ .dm-db-grid td { height: 32px; max-width: 260px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
4035
+ .dm-db-grid tbody tr:hover td { background: #f8fafc; }
4036
+ .dm-db-grid tbody tr.selected td { background: #eef2ff; }
4037
+ .dm-db-rownum { width: 42px; min-width: 42px; text-align: center !important; color: #94a3b8 !important; background: #f8fafc; font-variant-numeric: tabular-nums; }
4038
+ .dm-db-field-type { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 4px; color: #64748b; background: #eef2f7; vertical-align: middle; }
4039
+ .dm-db-add-field { min-width: 118px; }
4040
+ .dm-db-add-field button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #64748b; font: inherit; font-size: 12px; cursor: pointer; }
4041
+ .dm-db-add-field input { width: 110px; height: 24px; border: 1px solid #cbd5e1; border-radius: 5px; padding: 0 7px; font: inherit; font-size: 12px; }
4042
+ .dm-db-empty-cell { background: #fbfdff; }
4043
+ .dm-db-new-row td { color: #64748b; background: #fbfdff; font-weight: 600; }
4044
+ .dm-db-status { display: inline-flex; align-items: center; gap: 5px; height: 20px; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0 8px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 650; }
4045
+ .dm-db-status span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
4046
+ .dm-db-status.ok { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
4047
+ .dm-db-status.ok span { background: #22c55e; }
4048
+ .dm-db-status.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
4049
+ .dm-db-status.bad span { background: #ef4444; }
4050
+ .dm-record-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.12); }
4051
+ .dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); }
4052
+ .dm-record-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #edf0f3; }
4053
+ .dm-record-drawer-head p { margin: 0 0 3px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
4054
+ .dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; }
4055
+ .dm-record-testbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
4056
+ .dm-record-testbar > span:last-child { min-width: 0; color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4057
+ .dm-record-fields { display: grid; gap: 8px; padding: 14px 16px 28px; overflow-y: auto; }
4058
+ .dm-record-field { display: grid; gap: 5px; }
4059
+ .dm-record-field span { color: #475569; font-size: 11px; font-weight: 650; }
4060
+ .dm-record-field input,
4061
+ .dm-record-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
4062
+ .dm-record-field textarea { resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 1.45; }
4063
+ .dm-record-field input:focus,
4064
+ .dm-record-field textarea:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12); }
4065
+ .dm-record-field input:disabled,
4066
+ .dm-record-field textarea:disabled { background: #f8fafc; color: #64748b; }
4067
+ .dm-record-field input { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
4068
+ .dm-drawer-section { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: visible; }
4069
+ .dm-drawer-section-toggle { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: #f8fafc; color: #334155; font: inherit; font-size: 12px; font-weight: 700; padding: 0 11px; text-align: left; cursor: pointer; }
4070
+ .dm-drawer-section-toggle svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
4071
+ .dm-drawer-section.open .dm-drawer-section-toggle { border-bottom: 1px solid #e2e8f0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
4072
+ .dm-drawer-section.open .dm-drawer-section-toggle svg { transform: rotate(90deg); }
4073
+ .dm-drawer-section-body { display: grid; gap: 10px; padding: 11px; }
4074
+ .dm-sandbox-config { display: grid; gap: 8px; }
4075
+ .dm-radio-row { display: grid; gap: 8px; }
4076
+ .dm-radio-row label, .dm-check-row { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; column-gap: 8px; color: #1f2937; font-size: 12px; line-height: 1.35; }
4077
+ .dm-radio-row input[type="radio"], .dm-check-row input[type="checkbox"] { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; box-shadow: none; accent-color: #111827; }
4078
+ .dm-radio-row span, .dm-check-row span { color: #1f2937; font-size: 12px; font-weight: 500; }
4079
+ .dm-check-row { cursor: pointer; }
4080
+ .dm-select { position: relative; width: 100%; min-width: 180px; font-size: 11px; }
4081
+ .dm-select-trigger { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; font-size: 11px; padding: 6px 10px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
4082
+ .dm-select-trigger:hover:not(:disabled) { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
4083
+ .dm-select.open .dm-select-trigger { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12), 0 2px 8px rgba(15,23,42,.08); }
4084
+ .dm-select-trigger:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; }
4085
+ .dm-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; font-size: 11px; font-weight: 600; }
4086
+ .dm-select-trigger span.empty { color: #94a3b8; }
4087
+ .dm-select-trigger svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
4088
+ .dm-select.open .dm-select-trigger svg { transform: rotate(180deg); }
4089
+ .dm-select-popover { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120; display: grid; gap: 6px; min-width: 240px; padding: 8px; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08); }
4090
+ .dm-select-search { display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; padding: 0 8px; color: #64748b; }
4091
+ .dm-select-search input { min-width: 0; flex: 1; border: 0; padding: 0; background: transparent; box-shadow: none; color: #111827; font: inherit; font-size: 11px; outline: none; }
4092
+ .dm-select-list { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; padding: 2px 2px 2px 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
4093
+ .dm-select-list::-webkit-scrollbar { width: 8px; }
4094
+ .dm-select-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
4095
+ .dm-select-option { display: grid; gap: 1px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #111827; font: inherit; font-size: 11px; line-height: 1.25; padding: 7px 9px; text-align: left; cursor: pointer; }
4096
+ .dm-select-option:hover { background: #f1f5f9; }
4097
+ .dm-select-option.selected { background: #eef2ff; color: #3730a3; font-weight: 650; }
4098
+ .dm-select-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: inherit; color: inherit; }
4099
+ .dm-select-option em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 11px; font-style: normal; font-weight: 500; }
4100
+ .dm-select-empty { margin: 0; padding: 10px 8px; color: #94a3b8; font-size: 12px; }
4101
+ .dm-select-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #f1f5f9; }
4102
+ .dm-select-pager button { height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
4103
+ .dm-select-pager button:disabled { opacity: .45; cursor: not-allowed; }
4104
+ .dm-select-pager span { color: #64748b; font-size: 12px; font-weight: 650; }
4105
+ .dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
4106
+ .dm-db-grid td .dm-select { min-width: 230px; }
4107
+ .dm-json-field { position: relative; }
4108
+ .dm-json-field > span { padding-right: 34px; }
4109
+ .dm-json-expand { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.05); opacity: 0; cursor: pointer; transition: opacity .12s, border-color .12s, color .12s, box-shadow .12s; }
4110
+ .dm-json-field:hover .dm-json-expand, .dm-json-expand:focus-visible { opacity: 1; }
4111
+ .dm-json-expand:hover:not(:disabled) { border-color: #94a3b8; color: #111827; box-shadow: 0 3px 10px rgba(15,23,42,.1); }
4112
+ .dm-json-expand:disabled { cursor: not-allowed; opacity: 0; }
4113
+ .dm-json-modal-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.38); }
4114
+ .dm-json-modal { width: min(920px, 96vw); max-height: min(760px, 90vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.28); }
4115
+ .dm-json-modal header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
4116
+ .dm-json-modal header p { margin: 0 0 2px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
4117
+ .dm-json-modal header h2 { margin: 0; color: #111827; font-size: 15px; font-weight: 650; }
4118
+ .dm-json-modal pre { margin: 0; flex: 1; overflow: auto; padding: 16px; background: #0f172a; color: #e5edf8; font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: #64748b transparent; }
4119
+
4120
+ /* Relations tab */
4121
+ .dm-relations-tab { display: grid; gap: 16px; }
4122
+ .dm-relations-desc { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.55; }
4123
+ .dm-relation-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
4124
+ .dm-relation-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; background: #fafafa; }
4125
+ .dm-relation-mode-label { font-size: 12px; color: #6b7280; font-weight: 600; }
4126
+ .dm-relation-props { display: grid; gap: 0; }
4127
+ .dm-relation-prop { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
4128
+ .dm-relation-prop:last-child { border-bottom: 0; }
4129
+ .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
4130
+ .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
4131
+ .dm-relation-flow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f3f4f6; }
4132
+ .dm-relation-node { display: inline-flex; align-items: center; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; color: #374151; font-size: 12px; font-weight: 600; padding: 0 10px; }
4133
+ .dm-relation-node.source { background: #f0f0f0; border-color: #d5d5d5; color: #333; }
4134
+ .dm-relation-arrow { color: #9ca3af; }
4135
+ .dm-relation-hint { margin: 0; padding: 10px 14px; font-size: 12px; color: #6b7280; border-top: 1px solid #f3f4f6; line-height: 1.5; }
4136
+ .dm-usage-section { display: grid; gap: 8px; }
4137
+ .dm-usage-label { margin: 0; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
4138
+ .dm-usage-rows { display: grid; gap: 5px; }
4139
+ .dm-usage-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 7px; background: #fafafa; font-size: 12px; }
4140
+ .dm-usage-row strong { color: #111827; font-weight: 500; }
4141
+ .dm-usage-row span { color: #9ca3af; }
4142
+ .dm-usage-row code { font-size: 11px; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; color: #6b7280; }
4143
+
4144
+ /* Buttons v2 */
4145
+ .dm-btn-primary { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; font-weight: 500; transition: background .12s; }
4146
+ .dm-btn-primary:hover { background: #333; }
4147
+ .dm-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
4148
+ .dm-btn-outline { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; color: #333; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; transition: background .1s, border-color .1s; }
4149
+ .dm-btn-outline:hover { background: #f5f5f5; border-color: #bbb; }
4150
+
4151
+ /* Slide-out sidebar */
4152
+ .dm-sidebar-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(17,24,39,.2); }
4153
+ .dm-add-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -6px 0 32px rgba(15,23,42,.12); transform: translateX(100%); transition: transform .22s cubic-bezier(.22,1,.36,1); z-index: 81; display: flex; flex-direction: column; }
4154
+ .dm-add-sidebar.open { transform: translateX(0); }
4155
+ .dm-add-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
4156
+ .dm-add-sidebar-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: #111827; }
4157
+ .dm-sidebar-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; }
4158
+ .dm-sidebar-close:hover { background: #f9fafb; color: #374151; }
4159
+ .dm-add-sidebar-body { display: grid; gap: 14px; padding: 20px; flex: 1; align-content: start; }
4160
+ .dm-add-sidebar-hint { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
4161
+ .dm-field-label-v2 { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #374151; }
4162
+ .dm-input-v2 { width: 100%; height: 34px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111827; font: inherit; font-size: 13px; padding: 0 10px; box-sizing: border-box; }
4163
+ .dm-input-v2:focus { outline: none; border-color: #666; box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
4164
+ .dm-add-sidebar-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
4165
+
4166
+ /* Object type badges */
4167
+ .dm-badge-registry { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4168
+ .dm-badge-people { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4169
+ .dm-badge-tasks { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4170
+ .dm-badge-manual { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4171
+ .dm-badge-belongs { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4172
+ .dm-badge-hasmany { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4173
+
4174
+ /* Tab count pill */
4175
+ .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 5px; }
4176
+ .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 99px; background: #ebebeb; color: #666; font-size: 10px; font-weight: 600; padding: 0 4px; margin-left: 4px; }
4177
+ .dm-tab-v2.active .dm-tab-count { background: #222; color: #fff; }
4178
+
4179
+ /* Sidebar step: type-picker */
4180
+ .dm-type-picker { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
4181
+ .dm-type-picker-hint { margin: 0; padding: 14px 20px 8px; font-size: 13px; color: #6b7280; line-height: 1.5; }
4182
+ .dm-type-picker-list { display: grid; gap: 2px; padding: 4px 12px 16px; }
4183
+ .dm-type-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e8e8e8; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: background .1s, border-color .1s; }
4184
+ .dm-type-card:hover { background: #fafafa; border-color: #ccc; }
4185
+ .dm-type-card-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 7px; background: #f2f2f2; color: #333; flex-shrink: 0; }
4186
+ .dm-type-card-body { flex: 1; min-width: 0; }
4187
+ .dm-type-card-body strong { display: block; font-size: 13px; color: #111; font-weight: 600; margin-bottom: 2px; }
4188
+ .dm-type-card-body span { font-size: 12px; color: #888; line-height: 1.4; }
4189
+ .dm-type-card-arrow { color: #bbb; flex-shrink: 0; }
4190
+
4191
+ /* Sidebar step: name + icon */
4192
+ .dm-add-sidebar-head-left { display: flex; align-items: center; gap: 8px; }
4193
+ .dm-sidebar-back { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; font-size: 14px; }
4194
+ .dm-sidebar-back:hover { background: #f9fafb; }
4195
+ .dm-add-type-preview { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 4px; }
4196
+ .dm-add-type-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #f3f4f6; color: #374151; flex-shrink: 0; }
4197
+ .dm-add-type-label { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #111827; }
4198
+
4199
+ /* Icon picker grid */
4200
+ .dm-icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 4px; }
4201
+ .dm-icon-picker-btn { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #555; cursor: pointer; transition: background .1s, border-color .1s; }
4202
+ .dm-icon-picker-btn:hover { background: #f5f5f5; border-color: #aaa; }
4203
+ .dm-icon-picker-btn.active { background: #111; border-color: #111; color: #fff; }
4204
+
4205
+ /* Preset fields + relations preview in sidebar */
4206
+ .dm-preset-fields-preview,.dm-preset-relations-preview { display: grid; gap: 8px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 7px; }
4207
+ .dm-preset-fields-list { display: flex; flex-wrap: wrap; gap: 5px; }
4208
+ .dm-preset-field-chip { display: inline-flex; align-items: center; height: 22px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #374151; font-size: 11px; font-weight: 500; padding: 0 8px; }
4209
+ .dm-preset-relation-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; }
4210
+ .dm-preset-rel-target { font-weight: 600; color: #333; }
4211
+
4212
+ /* Relation card v2 (typed) */
4213
+ .dm-relation-card-meta { display: flex; align-items: center; gap: 8px; flex: 1; }
4214
+ .dm-relation-name { font-size: 13px; font-weight: 600; color: #111827; }
4215
+ .dm-relation-target-type { font-size: 12px; color: #6b7280; }
4216
+ .dm-relation-desc-text { margin: 0; padding: 8px 14px 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
4217
+ .dm-relation-props { display: grid; }
4218
+ .dm-relation-prop { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid #f3f4f6; font-size: 12px; }
4219
+ .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
4220
+ .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
4221
+
4222
+ /* Resolver chain block */
4223
+ .dm-resolver-chain { margin: 0; border-top: 1px solid #f3f4f6; padding: 12px 14px; display: grid; gap: 8px; }
4224
+ .dm-resolver-chain-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #374151; }
4225
+ .dm-resolver-chain-desc { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.55; }
4226
+ .dm-resolver-chain-desc code { background: #f3f4f6; border-radius: 3px; padding: 1px 5px; font-size: 11px; color: #374151; }
4227
+ .dm-resolver-targets { display: grid; gap: 4px; }
4228
+ .dm-resolver-target-row { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa; font-size: 12px; color: #374151; }
4229
+ .dm-resolver-target-row strong { flex: 1; font-weight: 500; }
4230
+ .dm-resolver-no-targets { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
4231
+ .dm-detail-icon { color: #6b7280; }
4232
+
4233
+ @media (max-width: 900px) {
4234
+ .dm-layout-v2 { grid-template-columns: 1fr; }
4235
+ .dm-obj-col { border-right: 0; border-bottom: 1px solid #e5e7eb; }
4236
+ .dm-add-sidebar { width: 100%; }
4237
+ .dm-icon-picker { grid-template-columns: repeat(6, 1fr); }
4238
+ }
4239
+
4240
+ /* SourceDropdown — inline source picker in widget inspector */
4241
+ .workspace-settings-row-dropdown { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
4242
+ .workspace-settings-row-dropdown > span { font-size: 12px; color: #6b7280; flex-shrink: 0; }
4243
+ .source-dropdown-wrap { position: relative; flex: 1; min-width: 0; }
4244
+ .source-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 4px 8px; font-size: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; cursor: pointer; color: #111827; text-align: left; }
4245
+ .source-dropdown-trigger:hover, .source-dropdown-trigger.open { border-color: #555; background: #fff; }
4246
+ .source-dropdown-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4247
+ .source-dropdown-popover { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; max-width: 280px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14); z-index: 200; padding: 4px; }
4248
+ .source-dropdown-section-label { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px 3px; }
4249
+ .source-dropdown-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; font-size: 12px; color: #374151; background: none; border: none; border-radius: 5px; cursor: pointer; text-align: left; }
4250
+ .source-dropdown-item:hover { background: #f5f5f5; color: #111; }
4251
+ .source-dropdown-item.selected { background: #f0f0f0; color: #111; font-weight: 600; }
4252
+ .source-dropdown-item svg { color: #9ca3af; flex-shrink: 0; }
4253
+ .source-dropdown-item .source-dropdown-item-live { color: #555; }
4254
+ .source-dropdown-integration-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 10px; font-weight: 700; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; color: #374151; flex-shrink: 0; margin-left: auto; cursor: default; }
4255
+ .source-dropdown-empty { padding: 12px 8px 4px; font-size: 12px; color: #9ca3af; display: grid; gap: 4px; }
4256
+ .source-dropdown-hint { font-size: 11px; color: #c4b5fd; }
4257
+ .source-dropdown-footer { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px; border-top: 1px solid #f1f5f9; margin-top: 4px; font-size: 11px; color: #9ca3af; }
4258
+ .source-dropdown-footer strong { color: #333; }
4259
+
4260
+ /* Source sub-panel — object-only clean picker */
4261
+ .workspace-source-search-wrap { display: flex; align-items: center; gap: 7px; border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 10px; background: #fff; color: #9ca3af; margin-bottom: 8px; cursor: text; }
4262
+ .workspace-source-search-wrap input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; color: #111827; }
4263
+ .workspace-source-search-wrap:focus-within { border-color: #555; }
4264
+ .workspace-source-object-list { display: grid; gap: 2px; }
4265
+ .workspace-source-object-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; cursor: pointer; text-align: left; font: inherit; }
4266
+ .workspace-source-object-row:hover { background: #f9fafb; border-color: #a5b4fc; }
4267
+ .workspace-source-object-row.active { background: #f0f0f0; border-color: #aaa; }
4268
+ .workspace-source-object-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #f3f4f6; color: #374151; flex-shrink: 0; }
4269
+ .workspace-source-object-row.active .workspace-source-object-icon { background: #e0e0e0; color: #222; }
4270
+ .workspace-source-object-meta { flex: 1; min-width: 0; }
4271
+ .workspace-source-object-meta strong { display: block; font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4272
+ .workspace-source-object-meta em { display: block; font-size: 11px; font-style: normal; color: #9ca3af; margin-top: 1px; }
4273
+ .workspace-source-empty { display: grid; place-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: #9ca3af; }
4274
+ .workspace-source-empty svg { color: #d1d5db; }
4275
+ .workspace-source-empty strong { font-size: 13px; color: #374151; }
4276
+ .workspace-source-empty p { font-size: 12px; color: #9ca3af; line-height: 1.5; margin: 0; max-width: 220px; }
4277
+ .workspace-source-empty-link { font-size: 12px; color: #333; text-decoration: underline; font-weight: 600; }
4278
+ .workspace-source-empty-link:hover { text-decoration: underline; }
4279
+
4280
+ /* SourceDropdown — compact inline version */
4281
+ .source-dropdown-search { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #f3f4f6; color: #9ca3af; }
4282
+ .source-dropdown-search input { flex: 1; border: none; outline: none; font-size: 12px; background: transparent; color: #111827; }
4283
+
4284
+ /* SourceRefreshConfigurator — inline test + apply panel */
4285
+ .source-refresh-collapsed { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
4286
+ .source-refresh-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #555; background: none; border: 1px dashed #d5d5d5; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
4287
+ .source-refresh-toggle:hover { background: #f5f3ff; }
4288
+ .source-refresh-active-badge { font-size: 11px; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 2px 8px; }
4289
+ .source-refresh-panel { display: grid; gap: 10px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin: 8px 0; }
4290
+ .source-refresh-header { display: flex; align-items: center; gap: 8px; }
4291
+ .source-refresh-header strong { flex: 1; font-size: 13px; color: #111827; }
4292
+ .source-refresh-close { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; padding: 2px 4px; }
4293
+ .source-refresh-close:hover { color: #374151; }
4294
+ .source-refresh-hint { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.4; }
4295
+ .source-refresh-field { display: grid; gap: 4px; font-size: 12px; color: #374151; font-weight: 600; }
4296
+ .source-refresh-field em { font-weight: 400; color: #9ca3af; }
4297
+ .source-refresh-field input { font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; padding: 5px 8px; background: #fff; }
4298
+ .source-refresh-test-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; background: #111; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background .1s; }
4299
+ .source-refresh-test-btn:hover { background: #333; }
4300
+ .source-refresh-test-btn:hover:not(:disabled) { background: #4f46e5; }
4301
+ .source-refresh-test-btn:disabled { opacity: .55; cursor: default; }
4302
+ .source-refresh-error { display: grid; gap: 4px; padding: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; font-size: 12px; color: #991b1b; }
4303
+ .source-refresh-error strong { color: #7f1d1d; }
4304
+ .source-refresh-error button { margin-top: 4px; font-size: 11px; padding: 3px 8px; border: 1px solid #fca5a5; border-radius: 4px; background: #fff; cursor: pointer; color: #7f1d1d; }
4305
+ .source-refresh-success { display: grid; gap: 8px; padding: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 12px; color: #166534; }
4306
+ .source-refresh-preview { overflow-x: auto; }
4307
+ .source-refresh-preview-label { margin: 0 0 6px; font-size: 11px; color: #4b5563; font-weight: 600; }
4308
+ .source-refresh-preview table { border-collapse: collapse; font-size: 11px; width: 100%; }
4309
+ .source-refresh-preview th { background: #f1f5f9; color: #374151; padding: 4px 8px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
4310
+ .source-refresh-preview td { padding: 4px 8px; border-bottom: 1px solid #f1f5f9; color: #1f2937; }
4311
+ .source-refresh-preview em { color: #9ca3af; font-style: normal; }
4312
+ .source-refresh-apply { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; background: #16a34a; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
4313
+ .source-refresh-apply:hover { background: #15803d; }
4314
+
4315
+ /* ══════════════════════════════════════════════════════════════
4316
+ ResolverControlPanel — generic resolver management in widget inspector
4317
+ ══════════════════════════════════════════════════════════════ */
4318
+ .resolver-control-panel { display: grid; gap: 10px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 8px; }
4319
+
4320
+ /* Status bar */
4321
+ .resolver-status-bar { display: flex; align-items: center; gap: 8px; }
4322
+ .resolver-reg-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
4323
+ .resolver-reg-badge.ok { background: #dcfce7; color: #166534; }
4324
+ .resolver-reg-badge.missing { background: #fef2f2; color: #991b1b; }
4325
+ .resolver-id-code { font-family: monospace; font-size: 11px; background: #e2e8f0; padding: 2px 6px; border-radius: 4px; color: #1e3a5f; }
4326
+ .resolver-status-label { font-size: 11px; color: #64748b; }
4327
+
4328
+ /* Guidance / hint */
4329
+ .resolver-guidance { margin: 0; font-size: 11px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 5px; padding: 7px 9px; line-height: 1.5; }
4330
+ .resolver-guidance.warn { color: #555; background: #f8f8f8; border-color: #e0e0e0; }
4331
+ .resolver-guidance code { background: #e5e7eb; border-radius: 3px; padding: 1px 4px; font-size: 10px; }
4332
+
4333
+ /* Params */
4334
+ .resolver-param-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; }
4335
+ .resolver-param-label { font-size: 11px; font-weight: 600; color: #374151; }
4336
+ .resolver-param-select { font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; padding: 5px 8px; background: #fff; color: #1f2937; width: 100%; }
4337
+ .resolver-param-input { font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; padding: 5px 8px; background: #fff; color: #1f2937; width: 100%; }
4338
+ .resolver-loading-label { font-size: 11px; color: #9ca3af; }
4339
+ .resolver-error-label { font-size: 11px; color: #dc2626; }
4340
+
4341
+ /* Lookback pills */
4342
+ .resolver-lookback-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
4343
+ .resolver-lookback-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; color: #374151; transition: background 120ms, border-color 120ms; }
4344
+ .resolver-lookback-pill.active { background: #111; color: #fff; border-color: #111; }
4345
+ .resolver-lookback-pill:hover:not(.active) { background: #f1f5f9; }
4346
+ .resolver-lookback-custom { width: 56px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; padding: 3px 6px; color: #374151; }
4347
+
4348
+ /* Save params */
4349
+ .resolver-save-params-btn { justify-self: start; font-size: 11px; font-weight: 600; padding: 5px 11px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px; cursor: pointer; color: #334155; }
4350
+ .resolver-save-params-btn:hover { background: #e2e8f0; }
4351
+
4352
+ /* Actions row */
4353
+ /* Resolver controls inside FilterSubPanel */
4354
+ .workspace-resolver-controls { display: grid; gap: 8px; padding-top: 4px; }
4355
+ .workspace-lookback-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
4356
+ .workspace-lookback-btn { font-size: 11px; padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; cursor: pointer; color: #334155; }
4357
+ .workspace-lookback-btn.active { background: #f1f5f9; border-color: #94a3b8; font-weight: 600; }
4358
+ .workspace-lookback-row input[type="number"] { width: 52px; font-size: 12px; padding: 3px 6px; border: 1px solid #e2e8f0; border-radius: 4px; }
4359
+ .workspace-resolver-actions { display: flex; gap: 6px; flex-wrap: wrap; }
4360
+ .workspace-settings-row-btn { font-size: 12px; font-weight: 500; padding: 6px 12px; background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; }
4361
+ .workspace-settings-row-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
4362
+ .workspace-settings-row-btn:disabled { opacity: .55; cursor: default; }
4363
+ .workspace-resolver-result { font-size: 11px; padding: 5px 8px; border-radius: 4px; margin-top: 2px; }
4364
+ .workspace-resolver-result.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
4365
+ .workspace-resolver-result.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
4366
+
4367
+ .resolver-actions { display: flex; gap: 7px; flex-wrap: wrap; }
4368
+ .resolver-test-btn { font-size: 12px; font-weight: 500; padding: 6px 12px; background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; }
4369
+ .resolver-test-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
4370
+ .resolver-test-btn:disabled { opacity: .55; cursor: default; }
4371
+ .resolver-refresh-btn { font-size: 12px; font-weight: 500; padding: 6px 12px; background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; }
4372
+ .resolver-refresh-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
4373
+ .resolver-refresh-btn:disabled { opacity: .55; cursor: default; }
4374
+ .resolver-retry-btn { margin-top: 4px; font-size: 11px; padding: 3px 9px; border: 1px solid #fca5a5; border-radius: 4px; background: #fff; cursor: pointer; color: #7f1d1d; }
4375
+
4376
+ /* Result blocks */
4377
+ .resolver-result-block { border-radius: 6px; padding: 10px; font-size: 12px; display: grid; gap: 6px; }
4378
+ .resolver-result-block.error { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
4379
+ .resolver-result-block.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
4380
+ .resolver-result-title { font-weight: 700; margin: 0; }
4381
+ .resolver-result-detail { margin: 0; font-size: 11px; color: #6b7280; }
4382
+ .resolver-result-block.error .resolver-result-detail { color: #b91c1c; }
4383
+ .resolver-result-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
4384
+ .resolver-result-ok-badge { font-weight: 700; color: #166534; }
4385
+ .resolver-result-count { font-size: 11px; color: #4b5563; }
4386
+
4387
+ /* Preview table */
4388
+ .resolver-preview-table-wrap { overflow-x: auto; border-radius: 4px; }
4389
+ .resolver-preview-table { border-collapse: collapse; font-size: 11px; width: 100%; }
4390
+ .resolver-preview-table th { background: #dcfce7; color: #166534; padding: 4px 8px; text-align: left; border-bottom: 1px solid #bbf7d0; white-space: nowrap; font-weight: 600; }
4391
+ .resolver-preview-table td { padding: 4px 8px; border-bottom: 1px solid #f0fdf4; color: #1f2937; }
4392
+ .resolver-preview-table em { color: #9ca3af; font-style: normal; }
4393
+
4394
+ /* ── Management panel — per-resolver rows ───────────────────── */
4395
+ .mgmt-resolver-list { display: grid; gap: 8px; margin-top: 8px; }
4396
+ .mgmt-resolver-row { border: 1px solid #e2e8f0; border-radius: 7px; padding: 10px 12px; background: #fff; display: grid; gap: 6px; }
4397
+ .mgmt-resolver-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
4398
+ .mgmt-resolver-id { font-family: monospace; font-size: 12px; background: #f1f5f9; padding: 3px 7px; border-radius: 4px; color: #1e3a5f; }
4399
+ .mgmt-resolver-badges { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
4400
+ .mgmt-resolver-type-badge { font-size: 10px; padding: 2px 6px; background: #f0f0f0; color: #444; border-radius: 3px; font-weight: 600; }
4401
+ .mgmt-resolver-type-badge.list { background: #d1fae5; color: #065f46; }
4402
+ .mgmt-resolver-test-btn { margin-left: auto; font-size: 11px; font-weight: 600; padding: 4px 10px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 5px; cursor: pointer; color: #334155; white-space: nowrap; }
4403
+ .mgmt-resolver-test-btn:hover:not(:disabled) { background: #e2e8f0; }
4404
+ .mgmt-resolver-test-result { font-size: 11px; padding: 5px 8px; border-radius: 4px; }
4405
+ .mgmt-resolver-test-result.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
4406
+ .mgmt-resolver-test-result.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
4407
+ .mgmt-resolver-linked { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
4408
+ .mgmt-resolver-linked-label { color: #6b7280; font-weight: 600; }
4409
+ .mgmt-resolver-linked-obj { background: #f0f0f0; color: #333; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; }
4410
+
4411
+ /* ─── FieldDropdown — chart axis field picker ─────────────────────────── */
4412
+ .field-dropdown-wrap { position: relative; min-width: 0; max-width: 100%; }
4413
+ .field-dropdown-trigger {
4414
+ display: flex; align-items: center; gap: 4px;
4415
+ width: 100%; min-width: 0; max-width: 100%;
4416
+ padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 6px;
4417
+ background: #fff; font-size: 12px; color: #1e293b; cursor: pointer;
4418
+ transition: border-color .15s, box-shadow .15s;
4419
+ }
4420
+ .field-dropdown-trigger:hover:not(:disabled) { border-color: #aaa; }
4421
+ .field-dropdown-trigger.open { border-color: #333; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
4422
+ .field-dropdown-trigger.disabled { opacity: .45; cursor: not-allowed; }
4423
+ .field-dropdown-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4424
+ .field-dropdown-popover {
4425
+ position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
4426
+ width: min(100%, 220px); min-width: 0; max-width: calc(100vw - 32px); max-height: 260px; overflow-y: auto;
4427
+ background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
4428
+ box-shadow: 0 8px 24px rgba(0,0,0,.1);
4429
+ }
4430
+ .field-dropdown-search {
4431
+ display: flex; align-items: center; gap: 6px;
4432
+ padding: 7px 10px; border-bottom: 1px solid #f1f5f9; color: #9ca3af; position: sticky; top: 0; background: #fff;
4433
+ }
4434
+ .field-dropdown-search input { border: none; outline: none; font-size: 12px; color: #0f172a; width: 100%; background: transparent; }
4435
+ .field-dropdown-item {
4436
+ display: flex; align-items: center; gap: 8px;
4437
+ width: 100%; padding: 7px 10px; border: none; background: transparent;
4438
+ font-size: 12px; color: #374151; cursor: pointer; text-align: left;
4439
+ transition: background .1s;
4440
+ }
4441
+ .field-dropdown-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4442
+ .field-dropdown-item:hover { background: #f8fafc; }
4443
+ .field-dropdown-item.selected { background: #f0f0f0; color: #111; font-weight: 600; }
4444
+ .field-dropdown-item .check { margin-left: auto; color: #333; }
4445
+ .field-dropdown-empty { font-size: 11px; color: #9ca3af; padding: 12px 12px; text-align: center; }
4446
+
4447
+ /* workspace-settings-row-field — label + field dropdown row */
4448
+ .workspace-settings-row-field {
4449
+ display: flex; align-items: center; justify-content: space-between;
4450
+ padding: 5px 0; gap: 8px; font-size: 12px; color: #374151;
4451
+ }
4452
+ .workspace-settings-row-field > span { flex: 0 0 auto; min-width: 80px; }
4453
+ .workspace-settings-row-field > select {
4454
+ flex: 1; max-width: 180px;
4455
+ border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 8px;
4456
+ font-size: 12px; color: #1e293b; background: #fff; cursor: pointer;
4457
+ }
4458
+
4459
+ /* ─── FieldsSubPanel (wfp) — Twenty CRM-style fields list ─────────────── */
4460
+ .wfp-field-list { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
4461
+ .wfp-field-row {
4462
+ display: flex; align-items: center; gap: 8px;
4463
+ padding: 7px 10px; border-radius: 6px; font-size: 12px;
4464
+ color: #1e293b; transition: background .12s; user-select: none;
4465
+ }
4466
+ .wfp-field-row:hover { background: #f8fafc; }
4467
+ .wfp-field-row.hidden { opacity: .5; }
4468
+ .wfp-grip { color: #d1d5db; flex-shrink: 0; cursor: grab; }
4469
+ .wfp-field-icon { color: #94a3b8; flex-shrink: 0; }
4470
+ .wfp-field-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4471
+ .wfp-field-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
4472
+ .wfp-eye-btn {
4473
+ display: flex; align-items: center; justify-content: center;
4474
+ width: 24px; height: 24px; border: none; background: transparent;
4475
+ border-radius: 4px; cursor: pointer; color: #9ca3af; transition: color .1s, background .1s;
4476
+ }
4477
+ .wfp-eye-btn:hover { color: #374151; background: #f1f5f9; }
4478
+ .wfp-eye-btn.off { color: #d1d5db; }
4479
+ .wfp-remove-btn {
4480
+ display: flex; align-items: center; justify-content: center;
4481
+ width: 22px; height: 22px; border: none; background: transparent;
4482
+ border-radius: 4px; cursor: pointer; color: #d1d5db; transition: color .1s;
4483
+ }
4484
+ .wfp-remove-btn:hover { color: #ef4444; }
4485
+ .wfp-hidden-toggle {
4486
+ display: flex; align-items: center; gap: 6px;
4487
+ width: 100%; padding: 7px 10px; border: none; background: transparent;
4488
+ font-size: 12px; color: #6b7280; cursor: pointer; border-radius: 6px;
4489
+ margin-top: 2px; transition: background .12s;
4490
+ }
4491
+ .wfp-hidden-toggle:hover { background: #f8fafc; }
4492
+ .wfp-hidden-count {
4493
+ font-size: 11px; background: #f1f5f9; color: #6b7280;
4494
+ padding: 1px 6px; border-radius: 10px; font-weight: 600;
4495
+ }
4496
+ .wfp-chevron { color: #9ca3af; margin-left: auto; transition: transform .2s; }
4497
+ .wfp-chevron.open { transform: rotate(180deg); }
4498
+ .wfp-add-field {
4499
+ display: flex; gap: 6px; padding: 10px 10px 4px;
4500
+ border-top: 1px solid #f1f5f9; margin-top: 8px;
4501
+ }
4502
+ .wfp-add-field input {
4503
+ flex: 1; border: 1px solid #e2e8f0; border-radius: 6px;
4504
+ padding: 5px 8px; font-size: 12px; outline: none; color: #1e293b;
4505
+ }
4506
+ .wfp-add-field input:focus { border-color: #999; outline: none; }
4507
+ .wfp-add-field button {
4508
+ padding: 5px 10px; background: #111; color: #fff; border: none;
4509
+ border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .1s;
4510
+ }
4511
+ .wfp-add-field button:hover:not(:disabled) { background: #333; }
4512
+ .wfp-add-field button:disabled { opacity: .4; cursor: not-allowed; }