@morscherlab/mint-sdk 1.0.0-rc.1 → 1.0.0-rc.2

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 (143) hide show
  1. package/README.md +9 -1
  2. package/dist/__tests__/components/LcmsSequenceTable.test.d.ts +1 -0
  3. package/dist/__tests__/components/ProgressBar.test.d.ts +1 -0
  4. package/dist/__tests__/components/RackEditor.test.d.ts +1 -0
  5. package/dist/__tests__/components/SequenceProgressBar.test.d.ts +1 -0
  6. package/dist/__tests__/composables/useExperimentSamples.test.d.ts +1 -0
  7. package/dist/__tests__/utils/instrument.test.d.ts +1 -0
  8. package/dist/__tests__/utils/lcms.test.d.ts +1 -0
  9. package/dist/__tests__/utils/permissions.test.d.ts +1 -0
  10. package/dist/__tests__/utils/rack.test.d.ts +1 -0
  11. package/dist/{auth-CBG3bWEc.js → auth-B7g4J4ZF.js} +99 -5
  12. package/dist/auth-B7g4J4ZF.js.map +1 -0
  13. package/dist/components/AutoGroupModal.vue.d.ts +1 -1
  14. package/dist/components/BaseCheckbox.vue.d.ts +1 -1
  15. package/dist/components/BaseToggle.vue.d.ts +2 -2
  16. package/dist/components/BioTemplateExperimentWorkspaceView.vue.d.ts +1 -1
  17. package/dist/components/BioTemplatePackWorkspaceView.vue.d.ts +1 -1
  18. package/dist/components/BioTemplatePresetWorkspaceView.vue.d.ts +1 -1
  19. package/dist/components/DoseDesignWorkspaceView.vue.d.ts +1 -1
  20. package/dist/components/FormulaInput.vue.d.ts +1 -1
  21. package/dist/components/InstrumentAlertLog.vue.d.ts +22 -0
  22. package/dist/components/InstrumentStateBadge.vue.d.ts +11 -0
  23. package/dist/components/InstrumentStatusCard.vue.d.ts +13 -0
  24. package/dist/components/LcmsSequenceTable.vue.d.ts +26 -0
  25. package/dist/components/ProgressBar.vue.d.ts +1 -0
  26. package/dist/components/RackEditor.vue.d.ts +41 -3
  27. package/dist/components/ReagentList.vue.d.ts +1 -1
  28. package/dist/components/SampleSelector.vue.d.ts +5 -2
  29. package/dist/components/SegmentedControl.vue.d.ts +2 -0
  30. package/dist/components/SequenceInput.vue.d.ts +1 -1
  31. package/dist/components/SequenceProgressBar.vue.d.ts +15 -0
  32. package/dist/components/SettingsModal.vue.d.ts +3 -1
  33. package/dist/components/TagsInput.vue.d.ts +1 -1
  34. package/dist/components/WellPlate.vue.d.ts +42 -3
  35. package/dist/components/index.d.ts +5 -0
  36. package/dist/components/index.js +3 -3
  37. package/dist/{components-5KSfsVqf.js → components-BhK-dW99.js} +2091 -1051
  38. package/dist/components-BhK-dW99.js.map +1 -0
  39. package/dist/composables/experimentDesignData.d.ts +17 -0
  40. package/dist/composables/index.d.ts +2 -0
  41. package/dist/composables/index.js +4 -4
  42. package/dist/composables/useControlSchema.d.ts +11 -0
  43. package/dist/composables/useExperimentData.d.ts +11 -3
  44. package/dist/composables/useExperimentSamples.d.ts +42 -0
  45. package/dist/composables/usePlatformContext.d.ts +54 -0
  46. package/dist/{composables-D4Myb30a.js → composables-Bg7CFuNz.js} +5 -3
  47. package/dist/composables-Bg7CFuNz.js.map +1 -0
  48. package/dist/index.d.ts +4 -0
  49. package/dist/index.js +168 -6
  50. package/dist/index.js.map +1 -0
  51. package/dist/install.js +2 -2
  52. package/dist/instrument.d.ts +7 -0
  53. package/dist/lcms.d.ts +27 -0
  54. package/dist/permissions.d.ts +46 -0
  55. package/dist/stores/auth.d.ts +74 -2
  56. package/dist/stores/index.js +1 -1
  57. package/dist/styles.css +3316 -1216
  58. package/dist/templates/builders.d.ts +7 -3
  59. package/dist/templates/index.d.ts +2 -2
  60. package/dist/templates/index.js +2 -2
  61. package/dist/templates/presets.d.ts +12 -0
  62. package/dist/templates/types.d.ts +16 -1
  63. package/dist/{templates-BSlxwV2c.js → templates-BorLR_7p.js} +313 -3
  64. package/dist/templates-BorLR_7p.js.map +1 -0
  65. package/dist/types/auth.d.ts +2 -0
  66. package/dist/types/components.d.ts +32 -3
  67. package/dist/types/form-builder.d.ts +2 -1
  68. package/dist/types/index.d.ts +4 -1
  69. package/dist/types/instrument.d.ts +56 -0
  70. package/dist/types/platform.d.ts +3 -0
  71. package/dist/{useExperimentData-BbbdI5xT.js → useProtocolTemplates-n6AJqSqv.js} +534 -359
  72. package/dist/useProtocolTemplates-n6AJqSqv.js.map +1 -0
  73. package/dist/utils/rack.d.ts +47 -0
  74. package/package.json +1 -1
  75. package/src/__tests__/components/AppTopBar.test.ts +15 -0
  76. package/src/__tests__/components/BaseTabs.test.ts +15 -0
  77. package/src/__tests__/components/LcmsSequenceTable.test.ts +57 -0
  78. package/src/__tests__/components/ProgressBar.test.ts +18 -0
  79. package/src/__tests__/components/RackEditor.test.ts +125 -0
  80. package/src/__tests__/components/SampleSelector.test.ts +25 -0
  81. package/src/__tests__/components/SegmentedControl.test.ts +45 -0
  82. package/src/__tests__/components/SequenceProgressBar.test.ts +39 -0
  83. package/src/__tests__/components/SettingsModal.test.ts +83 -2
  84. package/src/__tests__/composables/useControlSchema.test.ts +4 -0
  85. package/src/__tests__/composables/useExperimentData.test.ts +23 -0
  86. package/src/__tests__/composables/useExperimentSamples.test.ts +91 -0
  87. package/src/__tests__/templates/templates.test.ts +86 -0
  88. package/src/__tests__/utils/instrument.test.ts +47 -0
  89. package/src/__tests__/utils/lcms.test.ts +73 -0
  90. package/src/__tests__/utils/permissions.test.ts +50 -0
  91. package/src/__tests__/utils/rack.test.ts +120 -0
  92. package/src/components/AppTopBar.vue +1 -0
  93. package/src/components/BaseTabs.vue +22 -1
  94. package/src/components/InstrumentAlertLog.vue +191 -0
  95. package/src/components/InstrumentStateBadge.vue +50 -0
  96. package/src/components/InstrumentStatusCard.vue +188 -0
  97. package/src/components/LcmsSequenceTable.vue +191 -0
  98. package/src/components/ProgressBar.vue +3 -0
  99. package/src/components/RackEditor.vue +73 -2
  100. package/src/components/SampleSelector.vue +28 -9
  101. package/src/components/SegmentedControl.story.vue +17 -0
  102. package/src/components/SegmentedControl.vue +14 -3
  103. package/src/components/SequenceProgressBar.vue +71 -0
  104. package/src/components/SettingsModal.vue +42 -2
  105. package/src/components/WellPlate.vue +142 -21
  106. package/src/components/index.ts +5 -0
  107. package/src/components/internal/WellEditPopupInternal.vue +1 -0
  108. package/src/composables/experimentDesignData.ts +182 -0
  109. package/src/composables/index.ts +14 -0
  110. package/src/composables/useAuth.ts +4 -0
  111. package/src/composables/useAutoGroup.ts +5 -1
  112. package/src/composables/useControlSchema.ts +21 -0
  113. package/src/composables/useExperimentData.ts +57 -16
  114. package/src/composables/useExperimentSamples.ts +142 -0
  115. package/src/index.ts +27 -0
  116. package/src/instrument.ts +90 -0
  117. package/src/lcms.ts +108 -0
  118. package/src/permissions.ts +143 -0
  119. package/src/stores/auth.ts +31 -3
  120. package/src/styles/components/instrument-monitor.css +478 -0
  121. package/src/styles/components/lcms-sequence-table.css +189 -0
  122. package/src/styles/components/sequence-progress-bar.css +63 -0
  123. package/src/styles/components/tabs.css +9 -0
  124. package/src/styles/components/well-edit-popup.css +7 -1
  125. package/src/styles/components/well-plate.css +5 -0
  126. package/src/styles/index.css +3 -0
  127. package/src/templates/builders.ts +201 -0
  128. package/src/templates/controlSchemas.ts +68 -0
  129. package/src/templates/index.ts +2 -0
  130. package/src/templates/presets.ts +23 -0
  131. package/src/templates/types.ts +17 -0
  132. package/src/types/auth.ts +3 -0
  133. package/src/types/components.ts +45 -3
  134. package/src/types/form-builder.ts +2 -1
  135. package/src/types/index.ts +35 -0
  136. package/src/types/instrument.ts +61 -0
  137. package/src/types/platform.ts +4 -0
  138. package/src/utils/rack.ts +209 -0
  139. package/dist/auth-CBG3bWEc.js.map +0 -1
  140. package/dist/components-5KSfsVqf.js.map +0 -1
  141. package/dist/composables-D4Myb30a.js.map +0 -1
  142. package/dist/templates-BSlxwV2c.js.map +0 -1
  143. package/dist/useExperimentData-BbbdI5xT.js.map +0 -1
package/dist/styles.css CHANGED
@@ -2823,10 +2823,13 @@ to {
2823
2823
  border-bottom: 1px solid var(--border-color);
2824
2824
  }
2825
2825
  .mint-tabs--pills {
2826
+ width: fit-content;
2827
+ max-width: 100%;
2826
2828
  gap: 0.5rem;
2827
2829
  padding: 0.25rem;
2828
2830
  background-color: var(--bg-tertiary);
2829
2831
  border-radius: var(--radius-md);
2832
+ overflow-x: auto;
2830
2833
  }
2831
2834
  .mint-tab {
2832
2835
  padding: 0.5rem 1rem;
@@ -2888,6 +2891,11 @@ to {
2888
2891
  .mint-tab__icon {
2889
2892
  color: currentColor;
2890
2893
  }
2894
+ .mint-tab__icon--svg {
2895
+ width: 1rem;
2896
+ height: 1rem;
2897
+ flex-shrink: 0;
2898
+ }
2891
2899
  .mint-tab__badge {
2892
2900
  margin-left: 0.25rem;
2893
2901
  padding: 0.125rem 0.375rem;
@@ -8931,7 +8939,7 @@ to { transform: rotate(360deg);
8931
8939
  /* Sample type buttons */
8932
8940
  .mint-well-edit-popup__type-grid {
8933
8941
  display: grid;
8934
- grid-template-columns: repeat(3, 1fr);
8942
+ grid-template-columns: repeat(4, 1fr);
8935
8943
  gap: 0.25rem;
8936
8944
  }
8937
8945
  .mint-well-edit-popup__type-btn {
@@ -8960,6 +8968,11 @@ to { transform: rotate(360deg);
8960
8968
  border-color: rgba(139, 92, 246, 0.4);
8961
8969
  color: #8b5cf6;
8962
8970
  }
8971
+ .mint-well-edit-popup__type-btn--iqc {
8972
+ background-color: rgba(236, 72, 153, 0.15);
8973
+ border-color: rgba(236, 72, 153, 0.4);
8974
+ color: #ec4899;
8975
+ }
8963
8976
 
8964
8977
  /* Injection count buttons */
8965
8978
  .mint-well-edit-popup__count-grid {
@@ -9208,6 +9221,10 @@ to { transform: rotate(360deg);
9208
9221
  background-color: rgba(139, 92, 246, 0.15);
9209
9222
  border: 1px solid rgba(139, 92, 246, 0.4);
9210
9223
  }
9224
+ .mint-well-plate__well--iqc {
9225
+ background-color: rgba(236, 72, 153, 0.15);
9226
+ border: 1px solid rgba(236, 72, 153, 0.4);
9227
+ }
9211
9228
 
9212
9229
  /* Condition header - drug label row */
9213
9230
  .mint-well-plate__condition-label {
@@ -14365,835 +14382,2276 @@ to {
14365
14382
  line-height: 0;
14366
14383
  color: var(--text-secondary);
14367
14384
  }
14368
- /* AuditTrail Component Styles */
14369
- .mint-audit-trail {
14370
- position: relative;
14385
+ .mint-sequence-progress {
14386
+ display: flex;
14387
+ flex-direction: column;
14388
+ gap: 0.25rem;
14389
+ min-width: 0;
14371
14390
  }
14372
- .mint-audit-trail__filters {
14391
+ .mint-sequence-progress__header {
14373
14392
  display: flex;
14374
- gap: 0.5rem;
14375
- margin-bottom: 1rem;
14393
+ align-items: center;
14394
+ justify-content: space-between;
14395
+ gap: 0.75rem;
14396
+ min-width: 0;
14376
14397
  }
14377
- .mint-audit-trail__filter-select {
14378
- padding: 0.375rem 0.625rem;
14379
- border-radius: var(--radius);
14380
- border: 1px solid var(--border-color);
14381
- background-color: var(--bg-secondary);
14382
- color: var(--text-primary);
14398
+ .mint-sequence-progress__label {
14399
+ min-width: 0;
14400
+ overflow: hidden;
14401
+ color: var(--text-muted, #64748b);
14402
+ font-family: var(--font-mono, 'Fira Code', monospace);
14383
14403
  font-size: 0.75rem;
14404
+ text-overflow: ellipsis;
14405
+ white-space: nowrap;
14384
14406
  }
14385
- .mint-audit-trail__list {
14386
- position: relative;
14387
- padding-left: 1.5rem;
14407
+ .mint-sequence-progress__percent {
14408
+ flex: 0 0 auto;
14409
+ color: var(--mint-info, #3b82f6);
14410
+ font-family: var(--font-mono, 'Fira Code', monospace);
14411
+ font-size: 0.6875rem;
14412
+ font-weight: 700;
14388
14413
  }
14389
- .mint-audit-trail__line {
14390
- position: absolute;
14391
- left: 0.4375rem;
14392
- top: 0;
14393
- bottom: 0;
14394
- width: 2px;
14395
- background-color: var(--border-color);
14414
+ .mint-sequence-progress__footer {
14415
+ display: flex;
14416
+ align-items: center;
14417
+ justify-content: space-between;
14418
+ gap: 0.75rem;
14419
+ min-width: 0;
14396
14420
  }
14397
- .mint-audit-trail__entry {
14398
- position: relative;
14399
- padding-bottom: 1.25rem;
14400
- cursor: pointer;
14421
+ .mint-sequence-progress__remaining {
14422
+ min-width: 0;
14423
+ overflow: hidden;
14424
+ color: var(--text-muted, #64748b);
14425
+ font-family: var(--font-mono, 'Fira Code', monospace);
14426
+ font-size: 0.6875rem;
14427
+ text-overflow: ellipsis;
14428
+ white-space: nowrap;
14401
14429
  }
14402
- .mint-audit-trail__entry:last-child {
14403
- padding-bottom: 0;
14430
+ .mint-sequence-progress__eta {
14431
+ flex: 0 0 auto;
14432
+ border: 1px solid color-mix(in srgb, var(--mint-info, #3b82f6) 24%, transparent);
14433
+ border-radius: 999px;
14434
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 10%, transparent);
14435
+ color: var(--mint-info, #3b82f6);
14436
+ font-family: var(--font-mono, 'Fira Code', monospace);
14437
+ font-size: 0.6875rem;
14438
+ font-weight: 700;
14439
+ padding: 0.125rem 0.5rem;
14440
+ white-space: nowrap;
14404
14441
  }
14405
- .mint-audit-trail__dot {
14406
- position: absolute;
14407
- left: -1.5rem;
14408
- top: 0.25rem;
14409
- width: 0.625rem;
14410
- height: 0.625rem;
14411
- border-radius: 9999px;
14412
- border: 2px solid var(--bg-primary);
14413
- z-index: 1;
14442
+ .mint-instrument-state {
14443
+ display: inline-flex;
14444
+ align-items: center;
14445
+ gap: 0.3125rem;
14446
+ border-radius: 999px;
14447
+ font-size: 0.6875rem;
14448
+ font-weight: 700;
14449
+ letter-spacing: 0.04em;
14450
+ line-height: 1.35;
14451
+ padding: 0.125rem 0.625rem;
14452
+ white-space: nowrap;
14414
14453
  }
14415
-
14416
- /* Dot colors by type */
14417
- .mint-audit-trail__entry--create .mint-audit-trail__dot { background-color: var(--mint-success);
14454
+ .mint-instrument-state--success {
14455
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 12%, transparent);
14456
+ color: var(--mint-success, #22c55e);
14418
14457
  }
14419
- .mint-audit-trail__entry--update .mint-audit-trail__dot { background-color: var(--color-primary);
14458
+ .mint-instrument-state--warning {
14459
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 12%, transparent);
14460
+ color: var(--mint-warning, #eab308);
14420
14461
  }
14421
- .mint-audit-trail__entry--delete .mint-audit-trail__dot { background-color: var(--mint-error);
14462
+ .mint-instrument-state--error {
14463
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 12%, transparent);
14464
+ color: var(--mint-error, #ef4444);
14422
14465
  }
14423
- .mint-audit-trail__entry--system .mint-audit-trail__dot { background-color: var(--text-muted);
14466
+ .mint-instrument-state--info {
14467
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 12%, transparent);
14468
+ color: var(--mint-info, #3b82f6);
14424
14469
  }
14425
- .mint-audit-trail__content {
14426
- /* entry content container */
14470
+ .mint-instrument-state--muted {
14471
+ background: var(--bg-secondary, #f1f5f9);
14472
+ color: var(--text-muted, #64748b);
14427
14473
  }
14428
- .mint-audit-trail__header {
14429
- display: flex;
14430
- align-items: center;
14431
- gap: 0.5rem;
14432
- margin-bottom: 0.25rem;
14474
+ .mint-instrument-state--offline {
14475
+ border: 1px dashed var(--border-color, #e2e8f0);
14433
14476
  }
14434
- .mint-audit-trail__avatar {
14435
- width: 1.25rem;
14436
- height: 1.25rem;
14437
- border-radius: 9999px;
14438
- background-color: var(--bg-tertiary);
14439
- color: var(--text-secondary);
14440
- font-size: 0.5rem;
14441
- font-weight: 600;
14477
+ .mint-instrument-state__dot {
14478
+ width: 0.375rem;
14479
+ height: 0.375rem;
14480
+ border-radius: 999px;
14481
+ background: currentColor;
14482
+ animation: mint-instrument-pulse 1.5s ease-in-out infinite;
14483
+ }
14484
+ .mint-instrument-card {
14442
14485
  display: flex;
14443
- align-items: center;
14444
- justify-content: center;
14445
- flex-shrink: 0;
14486
+ min-width: 0;
14487
+ flex-direction: column;
14488
+ gap: 0.75rem;
14489
+ border: 1px solid var(--border-color, #e2e8f0);
14490
+ border-radius: 0.75rem;
14491
+ background: var(--bg-primary, #fff);
14492
+ padding: 1.25rem;
14493
+ transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
14446
14494
  }
14447
- .mint-audit-trail__user {
14448
- font-size: 0.75rem;
14449
- font-weight: 500;
14450
- color: var(--text-primary);
14495
+ .mint-instrument-card--running {
14496
+ border-color: color-mix(in srgb, var(--mint-success, #22c55e) 30%, var(--border-color, #e2e8f0));
14497
+ box-shadow: 0 0 12px rgba(34, 197, 94, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
14451
14498
  }
14452
- .mint-audit-trail__timestamp {
14453
- font-size: 0.6875rem;
14454
- color: var(--text-muted);
14455
- margin-left: auto;
14499
+ .mint-instrument-card--error {
14500
+ border-color: var(--mint-error, #ef4444);
14501
+ box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
14456
14502
  }
14457
- .mint-audit-trail__action {
14458
- font-size: 0.8125rem;
14459
- color: var(--text-primary);
14460
- font-weight: 500;
14503
+ .mint-instrument-card--connected {
14504
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
14461
14505
  }
14462
- .mint-audit-trail__detail {
14463
- font-size: 0.75rem;
14464
- color: var(--text-secondary);
14465
- margin-top: 0.125rem;
14506
+ .mint-instrument-card--disconnected {
14507
+ border-style: dashed;
14508
+ opacity: 0.68;
14466
14509
  }
14467
- .mint-audit-trail__metadata {
14468
- margin-top: 0.375rem;
14510
+ .mint-instrument-card__header,
14511
+ .mint-instrument-card__sample-row,
14512
+ .mint-instrument-card__eta,
14513
+ .mint-instrument-alert__header,
14514
+ .mint-instrument-alert__footer {
14469
14515
  display: flex;
14470
- flex-wrap: wrap;
14471
- gap: 0.5rem;
14472
- font-size: 0.6875rem;
14473
- }
14474
- .mint-audit-trail__metadata-item {
14475
- color: var(--text-secondary);
14516
+ align-items: center;
14476
14517
  }
14477
- .mint-audit-trail__metadata-key {
14478
- color: var(--text-muted);
14479
- margin-right: 0.125rem;
14518
+ .mint-instrument-card__header {
14519
+ gap: 0.625rem;
14520
+ min-width: 0;
14480
14521
  }
14481
- .mint-audit-trail__empty {
14482
- text-align: center;
14483
- padding: 2rem;
14484
- color: var(--text-muted);
14485
- font-size: 0.875rem;
14522
+ .mint-instrument-card__dot {
14523
+ width: 0.75rem;
14524
+ height: 0.75rem;
14525
+ flex: 0 0 auto;
14526
+ border-radius: 999px;
14486
14527
  }
14487
-
14488
- /* Size variants */
14489
- .mint-audit-trail--sm .mint-audit-trail__action { font-size: 0.75rem;
14528
+ .mint-instrument-card__dot--success {
14529
+ background: var(--mint-success, #22c55e);
14530
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
14490
14531
  }
14491
- .mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.6875rem;
14532
+ .mint-instrument-card__dot--warning {
14533
+ background: var(--mint-warning, #eab308);
14492
14534
  }
14493
- .mint-audit-trail--sm .mint-audit-trail__entry { padding-bottom: 0.75rem;
14535
+ .mint-instrument-card__dot--error {
14536
+ background: var(--mint-error, #ef4444);
14537
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
14494
14538
  }
14495
- .mint-audit-trail--lg .mint-audit-trail__action { font-size: 0.9375rem;
14539
+ .mint-instrument-card__dot--info {
14540
+ background: var(--mint-info, #3b82f6);
14496
14541
  }
14497
- .mint-audit-trail--lg .mint-audit-trail__detail { font-size: 0.8125rem;
14542
+ .mint-instrument-card__dot--muted {
14543
+ background: var(--text-muted, #64748b);
14544
+ opacity: 0.38;
14498
14545
  }
14499
- .mint-audit-trail--lg .mint-audit-trail__entry { padding-bottom: 1.5rem;
14546
+ .mint-instrument-card__name {
14547
+ min-width: 0;
14548
+ flex: 1 1 auto;
14549
+ overflow: hidden;
14550
+ color: var(--text-primary, #0f172a);
14551
+ font-size: 1.0625rem;
14552
+ font-weight: 700;
14553
+ text-overflow: ellipsis;
14554
+ white-space: nowrap;
14500
14555
  }
14501
- /* BatchProgressList Component Styles */
14502
- .mint-batch-progress {
14556
+ .mint-instrument-card__sample {
14503
14557
  display: flex;
14504
14558
  flex-direction: column;
14505
- gap: 0.75rem;
14506
- }
14507
- .mint-batch-progress__header {
14508
- display: flex;
14509
- align-items: center;
14510
- justify-content: space-between;
14559
+ gap: 0.25rem;
14560
+ border: 1px solid color-mix(in srgb, var(--mint-success, #22c55e) 20%, var(--border-color, #e2e8f0));
14561
+ border-radius: 0.375rem;
14562
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 5%, transparent);
14563
+ padding: 0.5rem 0.625rem;
14511
14564
  }
14512
- .mint-batch-progress__title {
14513
- font-weight: 600;
14514
- font-size: 0.875rem;
14515
- color: var(--text-primary);
14565
+ .mint-instrument-card__sample-label {
14566
+ color: var(--mint-success, #22c55e);
14567
+ font-size: 0.625rem;
14568
+ font-weight: 700;
14569
+ letter-spacing: 0.05em;
14570
+ text-transform: uppercase;
14516
14571
  }
14517
- .mint-batch-progress__percent {
14518
- font-size: 0.75rem;
14519
- font-weight: 500;
14520
- color: var(--text-muted);
14572
+ .mint-instrument-card__sample-row {
14573
+ gap: 0.375rem;
14574
+ min-width: 0;
14521
14575
  }
14522
- .mint-batch-progress__overall {
14523
- width: 100%;
14576
+ .mint-instrument-card__sample-dot {
14577
+ width: 0.375rem;
14524
14578
  height: 0.375rem;
14525
- background-color: var(--bg-tertiary);
14526
- border-radius: 9999px;
14527
- overflow: hidden;
14579
+ flex: 0 0 auto;
14580
+ border-radius: 999px;
14581
+ background: var(--mint-success, #22c55e);
14528
14582
  }
14529
- .mint-batch-progress__overall-bar {
14530
- height: 100%;
14531
- background-color: var(--color-primary);
14532
- border-radius: 9999px;
14533
- transition: width 0.3s ease;
14583
+ .mint-instrument-card__sample-name,
14584
+ .mint-instrument-card__method,
14585
+ .mint-instrument-card__sequence {
14586
+ min-width: 0;
14587
+ overflow: hidden;
14588
+ text-overflow: ellipsis;
14589
+ white-space: nowrap;
14534
14590
  }
14535
- .mint-batch-progress__summary {
14536
- display: flex;
14537
- flex-wrap: wrap;
14538
- gap: 0.5rem;
14591
+ .mint-instrument-card__sample-name {
14592
+ flex: 1 1 auto;
14593
+ color: var(--text-primary, #0f172a);
14594
+ font-family: var(--font-mono, 'Fira Code', monospace);
14595
+ font-size: 0.8125rem;
14596
+ font-weight: 700;
14539
14597
  }
14540
- .mint-batch-progress__summary-item {
14541
- display: inline-flex;
14542
- align-items: center;
14543
- gap: 0.25rem;
14598
+ .mint-instrument-card__sample-vial,
14599
+ .mint-instrument-card__method,
14600
+ .mint-instrument-card__sequence,
14601
+ .mint-instrument-card__muted {
14602
+ color: var(--text-muted, #64748b);
14603
+ font-family: var(--font-mono, 'Fira Code', monospace);
14544
14604
  font-size: 0.75rem;
14545
- padding: 0.125rem 0.5rem;
14546
- border-radius: 9999px;
14547
14605
  }
14548
- .mint-batch-progress__summary-item--completed { background-color: var(--mint-success-bg); color: var(--mint-success);
14606
+ .mint-instrument-card__sample-vial {
14607
+ flex: 0 0 auto;
14608
+ font-size: 0.6875rem;
14549
14609
  }
14550
- .mint-batch-progress__summary-item--processing { background-color: var(--mint-info-bg); color: var(--mint-info);
14610
+ .mint-instrument-card__eta {
14611
+ gap: 0.5rem;
14612
+ border-radius: 0.5rem;
14613
+ background: var(--bg-secondary, #f1f5f9);
14614
+ padding: 0.5rem 0.625rem;
14551
14615
  }
14552
- .mint-batch-progress__summary-item--error { background-color: var(--mint-error-bg); color: var(--mint-error);
14616
+ .mint-instrument-card__eta-label {
14617
+ color: var(--text-muted, #64748b);
14618
+ font-size: 0.625rem;
14619
+ font-weight: 700;
14620
+ letter-spacing: 0.05em;
14553
14621
  }
14554
- .mint-batch-progress__summary-item--pending { background-color: var(--bg-tertiary); color: var(--text-muted);
14622
+ .mint-instrument-card__eta-time {
14623
+ color: var(--text-primary, #0f172a);
14624
+ font-family: var(--font-mono, 'Fira Code', monospace);
14625
+ font-size: 0.875rem;
14626
+ font-weight: 700;
14555
14627
  }
14556
- .mint-batch-progress__summary-item--skipped { background-color: var(--bg-tertiary); color: var(--text-muted);
14628
+ .mint-instrument-card__eta-remaining {
14629
+ margin-left: auto;
14630
+ color: var(--text-muted, #64748b);
14631
+ font-family: var(--font-mono, 'Fira Code', monospace);
14632
+ font-size: 0.6875rem;
14557
14633
  }
14558
- .mint-batch-progress__list {
14559
- display: flex;
14560
- flex-direction: column;
14561
- gap: 0.25rem;
14634
+ .mint-instrument-card__error {
14635
+ border: 1px solid color-mix(in srgb, var(--mint-error, #ef4444) 22%, var(--border-color, #e2e8f0));
14636
+ border-radius: 0.5rem;
14637
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
14638
+ padding: 0.625rem 0.75rem;
14562
14639
  }
14563
- .mint-batch-progress__item {
14640
+ .mint-instrument-card__error-message {
14641
+ color: var(--mint-error, #ef4444);
14642
+ font-size: 0.8125rem;
14643
+ font-weight: 700;
14644
+ }
14645
+ .mint-instrument-card__error-detail {
14646
+ margin-top: 0.25rem;
14647
+ color: var(--text-muted, #64748b);
14648
+ font-size: 0.75rem;
14649
+ }
14650
+ .mint-instrument-card__placeholder {
14651
+ display: grid;
14652
+ gap: 0.625rem;
14653
+ }
14654
+ .mint-instrument-alert-log {
14564
14655
  display: flex;
14656
+ min-height: 0;
14565
14657
  flex-direction: column;
14566
- padding: 0.5rem 0.75rem;
14567
- border-radius: var(--radius);
14568
- background-color: var(--bg-secondary);
14569
- border: 1px solid var(--border-color);
14570
- transition: background-color 0.15s ease;
14571
14658
  }
14572
- .mint-batch-progress__item-row {
14659
+ .mint-instrument-alert-log__header {
14660
+ padding: 0.875rem 1rem 0.625rem;
14661
+ }
14662
+ .mint-instrument-alert-log__title {
14663
+ color: var(--text-muted, #64748b);
14664
+ font-size: 0.75rem;
14665
+ font-weight: 700;
14666
+ letter-spacing: 0.04em;
14667
+ text-transform: uppercase;
14668
+ }
14669
+ .mint-instrument-alert-log__filters {
14670
+ display: flex;
14671
+ flex-direction: column;
14672
+ gap: 0.375rem;
14673
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
14674
+ padding: 0 0.75rem 0.625rem;
14675
+ }
14676
+ .mint-instrument-alert-log__filter-row {
14573
14677
  display: flex;
14678
+ flex-wrap: wrap;
14679
+ gap: 0.3125rem;
14680
+ }
14681
+ .mint-instrument-alert-log__filter {
14682
+ display: inline-flex;
14574
14683
  align-items: center;
14575
- gap: 0.5rem;
14684
+ gap: 0.3125rem;
14685
+ border: 1px solid var(--border-color, #e2e8f0);
14686
+ border-radius: 999px;
14687
+ background: var(--bg-secondary, #f1f5f9);
14688
+ color: var(--text-muted, #64748b);
14689
+ cursor: pointer;
14690
+ font-size: 0.6875rem;
14691
+ font-weight: 600;
14692
+ opacity: 0.56;
14693
+ padding: 0.1875rem 0.5rem;
14694
+ transition: opacity 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
14576
14695
  }
14577
- .mint-batch-progress__item--processing {
14578
- border-color: rgba(59, 130, 246, 0.3);
14579
- background-color: var(--mint-info-bg);
14696
+ .mint-instrument-alert-log__filter--active {
14697
+ border-color: var(--filter-color, var(--border-color, #e2e8f0));
14698
+ background: color-mix(in srgb, var(--filter-color, transparent) 8%, var(--bg-secondary, #f1f5f9));
14699
+ color: var(--text-primary, #0f172a);
14700
+ opacity: 1;
14580
14701
  }
14581
- .mint-batch-progress__item--error {
14582
- border-color: rgba(239, 68, 68, 0.3);
14702
+ .mint-instrument-alert-log__filter:hover {
14703
+ opacity: 0.86;
14583
14704
  }
14584
- .mint-batch-progress__item--completed {
14585
- opacity: 0.7;
14705
+ .mint-instrument-alert-log__filter--active:hover {
14706
+ opacity: 1;
14586
14707
  }
14587
- .mint-batch-progress__item-icon {
14588
- flex-shrink: 0;
14589
- width: 1rem;
14590
- height: 1rem;
14708
+ .mint-instrument-alert-log__filter-dot {
14709
+ width: 0.375rem;
14710
+ height: 0.375rem;
14711
+ flex: 0 0 auto;
14712
+ border-radius: 999px;
14591
14713
  }
14592
- .mint-batch-progress__item-icon--pending { color: var(--text-muted);
14714
+ .mint-instrument-alert-log__filter-count {
14715
+ min-width: 0.875rem;
14716
+ color: var(--text-muted, #64748b);
14717
+ font-family: var(--font-mono, 'Fira Code', monospace);
14718
+ font-size: 0.625rem;
14719
+ text-align: center;
14593
14720
  }
14594
- .mint-batch-progress__item-icon--processing { color: var(--mint-info); animation: mint-batch-spin 1s linear infinite;
14721
+ .mint-instrument-alert-log__list {
14722
+ display: flex;
14723
+ min-height: 0;
14724
+ flex: 1 1 auto;
14725
+ flex-direction: column;
14726
+ gap: 0.5rem;
14727
+ overflow-y: auto;
14728
+ padding: 0.5rem;
14595
14729
  }
14596
- .mint-batch-progress__item-icon--completed { color: var(--mint-success);
14730
+ .mint-instrument-alert {
14731
+ border-left: 3px solid transparent;
14732
+ border-radius: 0.375rem;
14733
+ font-size: 0.8125rem;
14734
+ line-height: 1.4;
14735
+ padding: 0.625rem 0.75rem;
14736
+ transition: opacity 150ms ease-out;
14597
14737
  }
14598
- .mint-batch-progress__item-icon--error { color: var(--mint-error);
14738
+ .mint-instrument-alert--critical {
14739
+ border-left-color: var(--mint-error, #ef4444);
14740
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
14599
14741
  }
14600
- .mint-batch-progress__item-icon--skipped { color: var(--text-muted);
14742
+ .mint-instrument-alert--warning {
14743
+ border-left-color: var(--mint-warning, #eab308);
14744
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 8%, transparent);
14601
14745
  }
14602
- @keyframes mint-batch-spin {
14603
- from { transform: rotate(0deg);
14746
+ .mint-instrument-alert--info {
14747
+ border-left-color: var(--mint-info, #3b82f6);
14748
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 6%, transparent);
14604
14749
  }
14605
- to { transform: rotate(360deg);
14750
+ .mint-instrument-alert--acknowledged {
14751
+ opacity: 0.52;
14606
14752
  }
14753
+ .mint-instrument-alert__header {
14754
+ gap: 0.375rem;
14755
+ margin-bottom: 0.1875rem;
14756
+ min-width: 0;
14607
14757
  }
14608
- .mint-batch-progress__item-label {
14609
- flex: 1;
14610
- font-size: 0.8125rem;
14611
- color: var(--text-primary);
14758
+ .mint-instrument-alert__instrument {
14612
14759
  min-width: 0;
14613
14760
  overflow: hidden;
14761
+ color: var(--text-primary, #0f172a);
14762
+ font-size: 0.8125rem;
14763
+ font-weight: 700;
14614
14764
  text-overflow: ellipsis;
14615
14765
  white-space: nowrap;
14616
14766
  }
14617
- .mint-batch-progress__item-progress {
14618
- width: 4rem;
14619
- height: 0.25rem;
14620
- background-color: var(--bg-tertiary);
14621
- border-radius: 9999px;
14622
- overflow: hidden;
14623
- flex-shrink: 0;
14767
+ .mint-instrument-alert__source {
14768
+ border: 1px solid var(--border-color, #e2e8f0);
14769
+ border-radius: 0.1875rem;
14770
+ background: var(--bg-secondary, #f1f5f9);
14771
+ color: var(--text-muted, #64748b);
14772
+ flex: 0 0 auto;
14773
+ font-size: 0.625rem;
14774
+ font-weight: 700;
14775
+ letter-spacing: 0.02em;
14776
+ padding: 0 0.25rem;
14624
14777
  }
14625
- .mint-batch-progress__item-progress-bar {
14626
- height: 100%;
14627
- background-color: var(--color-primary);
14628
- transition: width 0.3s ease;
14778
+ .mint-instrument-alert__time {
14779
+ flex: 0 0 auto;
14780
+ margin-left: auto;
14781
+ color: var(--text-muted, #64748b);
14782
+ font-family: var(--font-mono, 'Fira Code', monospace);
14783
+ font-size: 0.6875rem;
14629
14784
  }
14630
- .mint-batch-progress__item-error {
14631
- padding: 0.25rem 0 0 1.5rem;
14785
+ .mint-instrument-alert__detail {
14786
+ color: var(--text-secondary, #475569);
14787
+ font-size: 0.8125rem;
14788
+ line-height: 1.5;
14789
+ overflow-wrap: break-word;
14632
14790
  }
14633
- .mint-batch-progress__error-toggle {
14791
+ .mint-instrument-alert__footer {
14792
+ gap: 0.5rem;
14793
+ margin-top: 0.375rem;
14794
+ }
14795
+ .mint-instrument-alert__code,
14796
+ .mint-instrument-alert__ack {
14797
+ border: 1px solid var(--border-color, #e2e8f0);
14798
+ border-radius: 0.25rem;
14799
+ background: var(--bg-secondary, #f1f5f9);
14800
+ color: var(--text-muted, #64748b);
14634
14801
  font-size: 0.6875rem;
14635
- color: var(--text-muted);
14636
- background: none;
14637
- border: none;
14802
+ padding: 0.25rem 0.5rem;
14803
+ }
14804
+ .mint-instrument-alert__code {
14805
+ font-family: var(--font-mono, 'Fira Code', monospace);
14806
+ font-weight: 700;
14807
+ }
14808
+ .mint-instrument-alert__ack {
14638
14809
  cursor: pointer;
14639
- padding: 0;
14640
- text-decoration: underline;
14810
+ transition: background 150ms ease-out, color 150ms ease-out;
14641
14811
  }
14642
- .mint-batch-progress__error-toggle:hover {
14643
- color: var(--text-secondary);
14812
+ .mint-instrument-alert__ack:hover {
14813
+ background: var(--bg-primary, #fff);
14814
+ color: var(--text-primary, #0f172a);
14644
14815
  }
14645
- .mint-batch-progress__item-message {
14646
- font-size: 0.75rem;
14647
- color: var(--mint-error);
14648
- margin-top: 0.25rem;
14816
+ .mint-instrument-alert-log__empty {
14817
+ color: var(--text-muted, #64748b);
14818
+ font-size: 0.8125rem;
14819
+ padding: 2rem 1rem;
14820
+ text-align: center;
14649
14821
  }
14650
- .mint-batch-progress__item-actions {
14651
- display: flex;
14652
- gap: 0.25rem;
14653
- flex-shrink: 0;
14822
+ .mint-instrument-alert-enter-active {
14823
+ transition: opacity 0.2s ease-out;
14654
14824
  }
14655
- .mint-batch-progress__retry-btn,
14656
- .mint-batch-progress__cancel-btn {
14657
- padding: 0.125rem 0.5rem;
14658
- font-size: 0.6875rem;
14659
- border-radius: var(--radius-sm);
14660
- border: none;
14661
- cursor: pointer;
14662
- font-weight: 500;
14663
- transition: background-color 0.15s ease;
14825
+ .mint-instrument-alert-leave-active {
14826
+ transition: opacity 0.15s ease-in;
14664
14827
  }
14665
- .mint-batch-progress__retry-btn {
14666
- background-color: var(--mint-warning-bg);
14667
- color: var(--mint-warning);
14828
+ .mint-instrument-alert-enter-from,
14829
+ .mint-instrument-alert-leave-to {
14830
+ opacity: 0;
14668
14831
  }
14669
- .mint-batch-progress__retry-btn:hover {
14670
- background-color: rgba(245, 158, 11, 0.2);
14832
+ @keyframes mint-instrument-pulse {
14833
+ 0%, 100% {
14834
+ opacity: 1;
14835
+ box-shadow: 0 0 0 0 currentColor;
14671
14836
  }
14672
- .mint-batch-progress__cancel-btn {
14673
- background-color: var(--bg-tertiary);
14674
- color: var(--text-muted);
14837
+ 50% {
14838
+ opacity: 0.72;
14839
+ box-shadow: 0 0 0 3px transparent;
14675
14840
  }
14676
- .mint-batch-progress__cancel-btn:hover {
14677
- background-color: var(--bg-hover);
14678
- color: var(--text-primary);
14679
14841
  }
14680
- .mint-data-viewer {
14681
- border: 1px solid var(--border-color);
14682
- border-radius: var(--radius-md);
14683
- overflow: hidden;
14842
+ @media (prefers-reduced-motion: reduce) {
14843
+ .mint-instrument-state__dot,
14844
+ .mint-instrument-alert-enter-active,
14845
+ .mint-instrument-alert-leave-active {
14846
+ animation: none;
14847
+ transition: none;
14684
14848
  }
14685
- .mint-data-viewer__header {
14686
- display: flex;
14849
+ }
14850
+ .mint-instrument-state {
14851
+ display: inline-flex;
14687
14852
  align-items: center;
14688
- justify-content: space-between;
14689
- padding: 8px 12px;
14690
- border-bottom: 1px solid var(--border-color);
14691
- background: var(--bg-secondary);
14692
- gap: 8px;
14853
+ gap: 0.3125rem;
14854
+ border-radius: 999px;
14855
+ font-size: 0.6875rem;
14856
+ font-weight: 700;
14857
+ letter-spacing: 0.04em;
14858
+ line-height: 1.35;
14859
+ padding: 0.125rem 0.625rem;
14860
+ white-space: nowrap;
14693
14861
  }
14694
- .mint-data-viewer__controls { display: flex; gap: 8px;
14862
+ .mint-instrument-state--success {
14863
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 12%, transparent);
14864
+ color: var(--mint-success, #22c55e);
14695
14865
  }
14696
- .mint-data-viewer__actions { display: flex; gap: 4px; align-items: center;
14866
+ .mint-instrument-state--warning {
14867
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 12%, transparent);
14868
+ color: var(--mint-warning, #eab308);
14697
14869
  }
14698
- .mint-data-viewer__content {
14699
- padding: 12px;
14700
- max-height: 600px;
14701
- overflow-y: auto;
14870
+ .mint-instrument-state--error {
14871
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 12%, transparent);
14872
+ color: var(--mint-error, #ef4444);
14702
14873
  }
14703
- .mint-data-viewer__loading {
14704
- padding: 24px 12px;
14874
+ .mint-instrument-state--info {
14875
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 12%, transparent);
14876
+ color: var(--mint-info, #3b82f6);
14705
14877
  }
14706
- .mint-data-viewer__skeleton {
14707
- display: flex;
14708
- flex-direction: column;
14709
- gap: 12px;
14878
+ .mint-instrument-state--muted {
14879
+ background: var(--bg-secondary, #f1f5f9);
14880
+ color: var(--text-muted, #64748b);
14710
14881
  }
14711
- .mint-data-viewer__empty {
14712
- text-align: center;
14713
- padding: 32px;
14714
- color: var(--text-muted);
14882
+ .mint-instrument-state--offline {
14883
+ border: 1px dashed var(--border-color, #e2e8f0);
14715
14884
  }
14716
- /* Summary view */
14717
- .mint-summary {
14885
+ .mint-instrument-state__dot {
14886
+ width: 0.375rem;
14887
+ height: 0.375rem;
14888
+ border-radius: 999px;
14889
+ background: currentColor;
14890
+ animation: mint-instrument-pulse 1.5s ease-in-out infinite;
14891
+ }
14892
+ .mint-instrument-card {
14718
14893
  display: flex;
14894
+ min-width: 0;
14719
14895
  flex-direction: column;
14720
- gap: 16px;
14896
+ gap: 0.75rem;
14897
+ border: 1px solid var(--border-color, #e2e8f0);
14898
+ border-radius: 0.75rem;
14899
+ background: var(--bg-primary, #fff);
14900
+ padding: 1.25rem;
14901
+ transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
14721
14902
  }
14722
- /* Metadata pills row */
14723
- .mint-summary__metadata {
14724
- display: flex;
14725
- flex-wrap: wrap;
14726
- gap: 6px;
14903
+ .mint-instrument-card--running {
14904
+ border-color: color-mix(in srgb, var(--mint-success, #22c55e) 30%, var(--border-color, #e2e8f0));
14905
+ box-shadow: 0 0 12px rgba(34, 197, 94, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
14727
14906
  }
14728
- .mint-summary__pill {
14729
- display: inline-flex;
14907
+ .mint-instrument-card--error {
14908
+ border-color: var(--mint-error, #ef4444);
14909
+ box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
14910
+ }
14911
+ .mint-instrument-card--connected {
14912
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
14913
+ }
14914
+ .mint-instrument-card--disconnected {
14915
+ border-style: dashed;
14916
+ opacity: 0.68;
14917
+ }
14918
+ .mint-instrument-card__header,
14919
+ .mint-instrument-card__sample-row,
14920
+ .mint-instrument-card__eta,
14921
+ .mint-instrument-alert__header,
14922
+ .mint-instrument-alert__footer {
14923
+ display: flex;
14730
14924
  align-items: center;
14731
- border-radius: 6px;
14732
- overflow: hidden;
14733
- font-size: 0.8125rem;
14734
- line-height: 1;
14735
- border: 1px solid var(--border-color);
14736
14925
  }
14737
- .mint-summary__pill--sm {
14738
- font-size: 0.75rem;
14926
+ .mint-instrument-card__header {
14927
+ gap: 0.625rem;
14928
+ min-width: 0;
14739
14929
  }
14740
- .mint-summary__pill-key {
14741
- padding: 4px 8px;
14742
- background: var(--bg-secondary);
14743
- color: var(--text-muted);
14744
- text-transform: capitalize;
14745
- font-weight: 500;
14930
+ .mint-instrument-card__dot {
14931
+ width: 0.75rem;
14932
+ height: 0.75rem;
14933
+ flex: 0 0 auto;
14934
+ border-radius: 999px;
14746
14935
  }
14747
- .mint-summary__pill-value {
14748
- padding: 4px 8px;
14749
- color: var(--text-primary);
14936
+ .mint-instrument-card__dot--success {
14937
+ background: var(--mint-success, #22c55e);
14938
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
14750
14939
  }
14751
- /* Section */
14752
- .mint-summary__section {
14753
- display: flex;
14754
- flex-direction: column;
14755
- gap: 12px;
14940
+ .mint-instrument-card__dot--warning {
14941
+ background: var(--mint-warning, #eab308);
14756
14942
  }
14757
- .mint-summary__section-label {
14758
- font-weight: 600;
14759
- font-size: 0.875rem;
14760
- color: var(--text-primary);
14943
+ .mint-instrument-card__dot--error {
14944
+ background: var(--mint-error, #ef4444);
14945
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
14761
14946
  }
14762
- .mint-summary__section-count {
14763
- font-size: 0.75rem;
14764
- color: var(--text-muted);
14765
- margin-left: 8px;
14947
+ .mint-instrument-card__dot--info {
14948
+ background: var(--mint-info, #3b82f6);
14766
14949
  }
14767
- .mint-summary__table-header {
14768
- display: flex;
14769
- align-items: baseline;
14770
- gap: 4px;
14950
+ .mint-instrument-card__dot--muted {
14951
+ background: var(--text-muted, #64748b);
14952
+ opacity: 0.38;
14771
14953
  }
14772
- /* Group cards */
14773
- .mint-summary__group-card {
14774
- border: 1px solid var(--border-color);
14775
- border-radius: var(--radius-md);
14954
+ .mint-instrument-card__name {
14955
+ min-width: 0;
14956
+ flex: 1 1 auto;
14776
14957
  overflow: hidden;
14958
+ color: var(--text-primary, #0f172a);
14959
+ font-size: 1.0625rem;
14960
+ font-weight: 700;
14961
+ text-overflow: ellipsis;
14962
+ white-space: nowrap;
14777
14963
  }
14778
- .mint-summary__group-header {
14964
+ .mint-instrument-card__sample {
14779
14965
  display: flex;
14780
- align-items: center;
14781
- justify-content: space-between;
14782
- padding: 10px 14px;
14783
- background: var(--bg-secondary);
14784
- border-bottom: 1px solid var(--border-color);
14966
+ flex-direction: column;
14967
+ gap: 0.25rem;
14968
+ border: 1px solid color-mix(in srgb, var(--mint-success, #22c55e) 20%, var(--border-color, #e2e8f0));
14969
+ border-radius: 0.375rem;
14970
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 5%, transparent);
14971
+ padding: 0.5rem 0.625rem;
14785
14972
  }
14786
- .mint-summary__group-label {
14787
- font-weight: 600;
14788
- font-size: 0.875rem;
14789
- color: var(--text-primary);
14973
+ .mint-instrument-card__sample-label {
14974
+ color: var(--mint-success, #22c55e);
14975
+ font-size: 0.625rem;
14976
+ font-weight: 700;
14977
+ letter-spacing: 0.05em;
14978
+ text-transform: uppercase;
14790
14979
  }
14791
- .mint-summary__group-count {
14980
+ .mint-instrument-card__sample-row {
14981
+ gap: 0.375rem;
14982
+ min-width: 0;
14983
+ }
14984
+ .mint-instrument-card__sample-dot {
14985
+ width: 0.375rem;
14986
+ height: 0.375rem;
14987
+ flex: 0 0 auto;
14988
+ border-radius: 999px;
14989
+ background: var(--mint-success, #22c55e);
14990
+ }
14991
+ .mint-instrument-card__sample-name,
14992
+ .mint-instrument-card__method,
14993
+ .mint-instrument-card__sequence {
14994
+ min-width: 0;
14995
+ overflow: hidden;
14996
+ text-overflow: ellipsis;
14997
+ white-space: nowrap;
14998
+ }
14999
+ .mint-instrument-card__sample-name {
15000
+ flex: 1 1 auto;
15001
+ color: var(--text-primary, #0f172a);
15002
+ font-family: var(--font-mono, 'Fira Code', monospace);
15003
+ font-size: 0.8125rem;
15004
+ font-weight: 700;
15005
+ }
15006
+ .mint-instrument-card__sample-vial,
15007
+ .mint-instrument-card__method,
15008
+ .mint-instrument-card__sequence,
15009
+ .mint-instrument-card__muted {
15010
+ color: var(--text-muted, #64748b);
15011
+ font-family: var(--font-mono, 'Fira Code', monospace);
14792
15012
  font-size: 0.75rem;
14793
- color: var(--text-muted);
14794
- background: var(--bg-tertiary);
14795
- padding: 2px 8px;
14796
- border-radius: 10px;
14797
15013
  }
14798
- .mint-summary__group-meta {
14799
- display: flex;
14800
- flex-wrap: wrap;
14801
- gap: 6px;
14802
- padding: 8px 14px;
14803
- border-bottom: 1px solid var(--border-color);
15014
+ .mint-instrument-card__sample-vial {
15015
+ flex: 0 0 auto;
15016
+ font-size: 0.6875rem;
14804
15017
  }
14805
- /* TimeRangeInput Component Styles */
14806
- .mint-time-range {
14807
- display: flex;
14808
- align-items: center;
15018
+ .mint-instrument-card__eta {
14809
15019
  gap: 0.5rem;
15020
+ border-radius: 0.5rem;
15021
+ background: var(--bg-secondary, #f1f5f9);
15022
+ padding: 0.5rem 0.625rem;
14810
15023
  }
14811
- .mint-time-range__start,
14812
- .mint-time-range__end {
14813
- flex: 1;
14814
- min-width: 0;
15024
+ .mint-instrument-card__eta-label {
15025
+ color: var(--text-muted, #64748b);
15026
+ font-size: 0.625rem;
15027
+ font-weight: 700;
15028
+ letter-spacing: 0.05em;
14815
15029
  }
14816
- .mint-time-range__separator {
14817
- display: flex;
14818
- align-items: center;
14819
- gap: 0.5rem;
14820
- flex-shrink: 0;
15030
+ .mint-instrument-card__eta-time {
15031
+ color: var(--text-primary, #0f172a);
15032
+ font-family: var(--font-mono, 'Fira Code', monospace);
15033
+ font-size: 0.875rem;
15034
+ font-weight: 700;
14821
15035
  }
14822
- .mint-time-range__separator::before,
14823
- .mint-time-range__separator::after {
14824
- content: '';
14825
- display: block;
14826
- width: 1rem;
14827
- height: 2px;
14828
- background-color: var(--border-color);
15036
+ .mint-instrument-card__eta-remaining {
15037
+ margin-left: auto;
15038
+ color: var(--text-muted, #64748b);
15039
+ font-family: var(--font-mono, 'Fira Code', monospace);
15040
+ font-size: 0.6875rem;
14829
15041
  }
14830
- .mint-time-range__duration {
14831
- font-size: 0.75rem;
14832
- color: var(--text-muted);
14833
- background-color: var(--bg-tertiary);
14834
- border-radius: var(--radius, 0.375rem);
14835
- padding: 0.125rem 0.5rem;
14836
- white-space: nowrap;
15042
+ .mint-instrument-card__error {
15043
+ border: 1px solid color-mix(in srgb, var(--mint-error, #ef4444) 22%, var(--border-color, #e2e8f0));
15044
+ border-radius: 0.5rem;
15045
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
15046
+ padding: 0.625rem 0.75rem;
14837
15047
  }
14838
- .mint-time-range__duration--error {
14839
- color: var(--mint-error);
15048
+ .mint-instrument-card__error-message {
15049
+ color: var(--mint-error, #ef4444);
15050
+ font-size: 0.8125rem;
15051
+ font-weight: 700;
14840
15052
  }
14841
- /* ResourceCard Component Styles */
14842
- .mint-resource-card {
14843
- background-color: var(--bg-card);
14844
- border: 1px solid var(--border-color);
14845
- border-radius: var(--radius-lg);
14846
- box-shadow: var(--shadow-sm);
14847
- cursor: pointer;
14848
- transition: box-shadow 0.15s ease, border-color 0.15s ease;
14849
- overflow: hidden;
15053
+ .mint-instrument-card__error-detail {
15054
+ margin-top: 0.25rem;
15055
+ color: var(--text-muted, #64748b);
15056
+ font-size: 0.75rem;
14850
15057
  }
14851
- .mint-resource-card:hover {
14852
- box-shadow: var(--shadow-md);
14853
- border-color: rgba(59, 130, 246, 0.3);
15058
+ .mint-instrument-card__placeholder {
15059
+ display: grid;
15060
+ gap: 0.625rem;
14854
15061
  }
14855
-
14856
- /* Compact mode */
14857
- .mint-resource-card--compact {
14858
- border-radius: 0;
14859
- box-shadow: none;
14860
- border: none;
14861
- border-bottom: 1px solid var(--border-color);
15062
+ .mint-instrument-alert-log {
14862
15063
  display: flex;
14863
- align-items: center;
14864
- gap: 0.75rem;
14865
- padding: 0.5rem 0.75rem;
14866
- min-height: 40px;
15064
+ min-height: 0;
15065
+ flex-direction: column;
14867
15066
  }
14868
- .mint-resource-card--compact:hover {
14869
- box-shadow: none;
14870
- border-color: var(--border-color);
14871
- background-color: var(--bg-hover);
15067
+ .mint-instrument-alert-log__header {
15068
+ padding: 0.875rem 1rem 0.625rem;
14872
15069
  }
14873
-
14874
- /* Card layout (non-compact) */
14875
- .mint-resource-card__header {
15070
+ .mint-instrument-alert-log__title {
15071
+ color: var(--text-muted, #64748b);
15072
+ font-size: 0.75rem;
15073
+ font-weight: 700;
15074
+ letter-spacing: 0.04em;
15075
+ text-transform: uppercase;
15076
+ }
15077
+ .mint-instrument-alert-log__filters {
14876
15078
  display: flex;
14877
- align-items: flex-start;
14878
- gap: 0.75rem;
14879
- padding: 1rem;
14880
- padding-bottom: 0;
15079
+ flex-direction: column;
15080
+ gap: 0.375rem;
15081
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
15082
+ padding: 0 0.75rem 0.625rem;
14881
15083
  }
14882
-
14883
- /* Size variants for header padding */
14884
- .mint-resource-card--sm .mint-resource-card__header {
14885
- padding: 0.75rem;
14886
- padding-bottom: 0;
14887
- gap: 0.625rem;
15084
+ .mint-instrument-alert-log__filter-row {
15085
+ display: flex;
15086
+ flex-wrap: wrap;
15087
+ gap: 0.3125rem;
14888
15088
  }
14889
- .mint-resource-card--lg .mint-resource-card__header {
14890
- padding: 1.25rem;
14891
- padding-bottom: 0;
14892
- gap: 1rem;
15089
+ .mint-instrument-alert-log__filter {
15090
+ display: inline-flex;
15091
+ align-items: center;
15092
+ gap: 0.3125rem;
15093
+ border: 1px solid var(--border-color, #e2e8f0);
15094
+ border-radius: 999px;
15095
+ background: var(--bg-secondary, #f1f5f9);
15096
+ color: var(--text-muted, #64748b);
15097
+ cursor: pointer;
15098
+ font-size: 0.6875rem;
15099
+ font-weight: 600;
15100
+ opacity: 0.56;
15101
+ padding: 0.1875rem 0.5rem;
15102
+ transition: opacity 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
14893
15103
  }
14894
-
14895
- /* Image / fallback icon */
14896
- .mint-resource-card__image {
14897
- width: 64px;
14898
- height: 64px;
14899
- border-radius: var(--radius-md);
14900
- overflow: hidden;
14901
- flex-shrink: 0;
15104
+ .mint-instrument-alert-log__filter--active {
15105
+ border-color: var(--filter-color, var(--border-color, #e2e8f0));
15106
+ background: color-mix(in srgb, var(--filter-color, transparent) 8%, var(--bg-secondary, #f1f5f9));
15107
+ color: var(--text-primary, #0f172a);
15108
+ opacity: 1;
14902
15109
  }
14903
- .mint-resource-card--sm .mint-resource-card__image {
14904
- width: 48px;
14905
- height: 48px;
15110
+ .mint-instrument-alert-log__filter:hover {
15111
+ opacity: 0.86;
14906
15112
  }
14907
- .mint-resource-card--lg .mint-resource-card__image {
14908
- width: 80px;
14909
- height: 80px;
15113
+ .mint-instrument-alert-log__filter--active:hover {
15114
+ opacity: 1;
14910
15115
  }
14911
- .mint-resource-card__image img {
14912
- width: 100%;
14913
- height: 100%;
14914
- object-fit: cover;
15116
+ .mint-instrument-alert-log__filter-dot {
15117
+ width: 0.375rem;
15118
+ height: 0.375rem;
15119
+ flex: 0 0 auto;
15120
+ border-radius: 999px;
14915
15121
  }
14916
- .mint-resource-card__image-fallback {
14917
- width: 100%;
14918
- height: 100%;
15122
+ .mint-instrument-alert-log__filter-count {
15123
+ min-width: 0.875rem;
15124
+ color: var(--text-muted, #64748b);
15125
+ font-family: var(--font-mono, 'Fira Code', monospace);
15126
+ font-size: 0.625rem;
15127
+ text-align: center;
15128
+ }
15129
+ .mint-instrument-alert-log__list {
14919
15130
  display: flex;
14920
- align-items: center;
14921
- justify-content: center;
14922
- background-color: var(--bg-tertiary);
14923
- color: var(--text-muted);
15131
+ min-height: 0;
15132
+ flex: 1 1 auto;
15133
+ flex-direction: column;
15134
+ gap: 0.5rem;
15135
+ overflow-y: auto;
15136
+ padding: 0.5rem;
14924
15137
  }
14925
- .mint-resource-card__image-fallback svg {
14926
- width: 50%;
14927
- height: 50%;
15138
+ .mint-instrument-alert {
15139
+ border-left: 3px solid transparent;
15140
+ border-radius: 0.375rem;
15141
+ font-size: 0.8125rem;
15142
+ line-height: 1.4;
15143
+ padding: 0.625rem 0.75rem;
15144
+ transition: opacity 150ms ease-out;
14928
15145
  }
14929
-
14930
- /* Body section */
14931
- .mint-resource-card__body {
14932
- flex: 1;
14933
- min-width: 0;
15146
+ .mint-instrument-alert--critical {
15147
+ border-left-color: var(--mint-error, #ef4444);
15148
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
14934
15149
  }
14935
- .mint-resource-card__title-row {
14936
- display: flex;
14937
- align-items: center;
14938
- justify-content: space-between;
14939
- gap: 0.75rem;
15150
+ .mint-instrument-alert--warning {
15151
+ border-left-color: var(--mint-warning, #eab308);
15152
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 8%, transparent);
14940
15153
  }
14941
- .mint-resource-card__name {
14942
- font-size: 0.9375rem;
14943
- font-weight: 600;
14944
- color: var(--text-primary);
14945
- margin-top: 0 !important;
14946
- margin-bottom: 0 !important;
14947
- margin-left: 0;
14948
- margin-right: 0;
14949
- padding: 0 !important;
14950
- line-height: 1.3;
15154
+ .mint-instrument-alert--info {
15155
+ border-left-color: var(--mint-info, #3b82f6);
15156
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 6%, transparent);
15157
+ }
15158
+ .mint-instrument-alert--acknowledged {
15159
+ opacity: 0.52;
15160
+ }
15161
+ .mint-instrument-alert__header {
15162
+ gap: 0.375rem;
15163
+ margin-bottom: 0.1875rem;
15164
+ min-width: 0;
15165
+ }
15166
+ .mint-instrument-alert__instrument {
15167
+ min-width: 0;
14951
15168
  overflow: hidden;
15169
+ color: var(--text-primary, #0f172a);
15170
+ font-size: 0.8125rem;
15171
+ font-weight: 700;
14952
15172
  text-overflow: ellipsis;
14953
15173
  white-space: nowrap;
14954
15174
  }
14955
- .mint-resource-card--sm .mint-resource-card__name {
14956
- font-size: 0.8125rem;
15175
+ .mint-instrument-alert__source {
15176
+ border: 1px solid var(--border-color, #e2e8f0);
15177
+ border-radius: 0.1875rem;
15178
+ background: var(--bg-secondary, #f1f5f9);
15179
+ color: var(--text-muted, #64748b);
15180
+ flex: 0 0 auto;
15181
+ font-size: 0.625rem;
15182
+ font-weight: 700;
15183
+ letter-spacing: 0.02em;
15184
+ padding: 0 0.25rem;
14957
15185
  }
14958
- .mint-resource-card--lg .mint-resource-card__name {
14959
- font-size: 1.0625rem;
15186
+ .mint-instrument-alert__time {
15187
+ flex: 0 0 auto;
15188
+ margin-left: auto;
15189
+ color: var(--text-muted, #64748b);
15190
+ font-family: var(--font-mono, 'Fira Code', monospace);
15191
+ font-size: 0.6875rem;
14960
15192
  }
14961
- .mint-resource-card__description {
15193
+ .mint-instrument-alert__detail {
15194
+ color: var(--text-secondary, #475569);
14962
15195
  font-size: 0.8125rem;
14963
- color: var(--text-secondary);
14964
- margin-top: 0.125rem !important;
14965
- margin-bottom: 0 !important;
14966
- margin-left: 0;
14967
- margin-right: 0;
14968
- padding: 0 !important;
14969
- line-height: 1.4;
14970
- overflow: hidden;
14971
- text-overflow: ellipsis;
14972
- white-space: nowrap;
15196
+ line-height: 1.5;
15197
+ overflow-wrap: break-word;
14973
15198
  }
14974
- .mint-resource-card__location {
14975
- font-size: 0.75rem;
14976
- color: var(--text-muted);
14977
- margin-top: 0.25rem !important;
14978
- margin-bottom: 0 !important;
14979
- margin-left: 0;
14980
- margin-right: 0;
14981
- padding: 0 !important;
15199
+ .mint-instrument-alert__footer {
15200
+ gap: 0.5rem;
15201
+ margin-top: 0.375rem;
14982
15202
  }
14983
-
14984
- /* Status indicator */
14985
- .mint-resource-card__status {
14986
- display: inline-flex;
14987
- align-items: center;
14988
- gap: 0.375rem;
14989
- flex-shrink: 0;
15203
+ .mint-instrument-alert__code,
15204
+ .mint-instrument-alert__ack {
15205
+ border: 1px solid var(--border-color, #e2e8f0);
15206
+ border-radius: 0.25rem;
15207
+ background: var(--bg-secondary, #f1f5f9);
15208
+ color: var(--text-muted, #64748b);
15209
+ font-size: 0.6875rem;
15210
+ padding: 0.25rem 0.5rem;
14990
15211
  }
14991
- .mint-resource-card__status-dot {
14992
- width: 8px;
14993
- height: 8px;
14994
- border-radius: 50%;
14995
- flex-shrink: 0;
15212
+ .mint-instrument-alert__code {
15213
+ font-family: var(--font-mono, 'Fira Code', monospace);
15214
+ font-weight: 700;
14996
15215
  }
14997
- .mint-resource-card__status-dot--available {
14998
- background-color: var(--mint-success);
14999
- color: var(--mint-success);
15216
+ .mint-instrument-alert__ack {
15217
+ cursor: pointer;
15218
+ transition: background 150ms ease-out, color 150ms ease-out;
15000
15219
  }
15001
- .mint-resource-card__status-dot--in-use {
15002
- background-color: var(--color-primary);
15003
- color: var(--color-primary);
15004
- animation: mint-resource-pulse 2s ease-in-out infinite;
15220
+ .mint-instrument-alert__ack:hover {
15221
+ background: var(--bg-primary, #fff);
15222
+ color: var(--text-primary, #0f172a);
15005
15223
  }
15006
- .mint-resource-card__status-dot--maintenance {
15007
- background-color: var(--mint-warning);
15008
- color: var(--mint-warning);
15224
+ .mint-instrument-alert-log__empty {
15225
+ color: var(--text-muted, #64748b);
15226
+ font-size: 0.8125rem;
15227
+ padding: 2rem 1rem;
15228
+ text-align: center;
15009
15229
  }
15010
- .mint-resource-card__status-dot--offline {
15011
- background-color: var(--mint-error);
15012
- color: var(--mint-error);
15230
+ .mint-instrument-alert-enter-active {
15231
+ transition: opacity 0.2s ease-out;
15013
15232
  }
15014
- .mint-resource-card__status-label {
15015
- font-size: 0.75rem;
15016
- font-weight: 500;
15017
- color: var(--text-secondary);
15233
+ .mint-instrument-alert-leave-active {
15234
+ transition: opacity 0.15s ease-in;
15018
15235
  }
15019
-
15020
- /* Compact status: colored text only */
15021
- .mint-resource-card--compact .mint-resource-card__status-label--available {
15022
- color: var(--mint-success);
15236
+ .mint-instrument-alert-enter-from,
15237
+ .mint-instrument-alert-leave-to {
15238
+ opacity: 0;
15023
15239
  }
15024
- .mint-resource-card--compact .mint-resource-card__status-label--in-use {
15025
- color: var(--color-primary);
15240
+ @keyframes mint-instrument-pulse {
15241
+ 0%, 100% {
15242
+ opacity: 1;
15243
+ box-shadow: 0 0 0 0 currentColor;
15026
15244
  }
15027
- .mint-resource-card--compact .mint-resource-card__status-label--maintenance {
15028
- color: var(--mint-warning);
15245
+ 50% {
15246
+ opacity: 0.72;
15247
+ box-shadow: 0 0 0 3px transparent;
15029
15248
  }
15030
- .mint-resource-card--compact .mint-resource-card__status-label--offline {
15031
- color: var(--mint-error);
15032
15249
  }
15033
- .mint-resource-card__next-available {
15034
- font-size: 0.75rem;
15035
- color: var(--text-muted);
15036
- margin-top: 0.125rem !important;
15037
- margin-bottom: 0 !important;
15038
- margin-left: 0;
15039
- margin-right: 0;
15040
- padding: 0 !important;
15250
+ @media (prefers-reduced-motion: reduce) {
15251
+ .mint-instrument-state__dot,
15252
+ .mint-instrument-alert-enter-active,
15253
+ .mint-instrument-alert-leave-active {
15254
+ animation: none;
15255
+ transition: none;
15041
15256
  }
15042
-
15043
- /* Specs grid */
15044
- .mint-resource-card__specs {
15045
- display: grid;
15046
- grid-template-columns: repeat(2, 1fr);
15047
- gap: 0.5rem 1rem;
15048
- padding: 0.75rem 1rem;
15049
15257
  }
15050
- .mint-resource-card--sm .mint-resource-card__specs {
15051
- padding: 0.5rem 0.75rem;
15052
- gap: 0.375rem 0.75rem;
15258
+ .mint-instrument-state {
15259
+ display: inline-flex;
15260
+ align-items: center;
15261
+ gap: 0.3125rem;
15262
+ border-radius: 999px;
15263
+ font-size: 0.6875rem;
15264
+ font-weight: 700;
15265
+ letter-spacing: 0.04em;
15266
+ line-height: 1.35;
15267
+ padding: 0.125rem 0.625rem;
15268
+ white-space: nowrap;
15053
15269
  }
15054
- .mint-resource-card--lg .mint-resource-card__specs {
15055
- padding: 0.75rem 1.25rem;
15056
- gap: 0.5rem 1.25rem;
15270
+ .mint-instrument-state--success {
15271
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 12%, transparent);
15272
+ color: var(--mint-success, #22c55e);
15057
15273
  }
15058
- .mint-resource-card__spec {
15059
- display: flex;
15060
- flex-direction: column;
15061
- gap: 0.0625rem;
15274
+ .mint-instrument-state--warning {
15275
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 12%, transparent);
15276
+ color: var(--mint-warning, #eab308);
15062
15277
  }
15063
- .mint-resource-card__spec-label {
15064
- font-size: 0.6875rem;
15065
- color: var(--text-muted);
15066
- text-transform: uppercase;
15067
- letter-spacing: 0.025em;
15278
+ .mint-instrument-state--error {
15279
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 12%, transparent);
15280
+ color: var(--mint-error, #ef4444);
15068
15281
  }
15069
- .mint-resource-card__spec-value {
15070
- font-size: 0.8125rem;
15071
- font-weight: 500;
15072
- color: var(--text-primary);
15282
+ .mint-instrument-state--info {
15283
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 12%, transparent);
15284
+ color: var(--mint-info, #3b82f6);
15073
15285
  }
15074
-
15075
- /* Footer (tags + action) */
15076
- .mint-resource-card__footer {
15077
- display: flex;
15078
- align-items: center;
15079
- justify-content: space-between;
15080
- gap: 0.75rem;
15081
- padding: 0.75rem 1rem;
15082
- padding-top: 0;
15286
+ .mint-instrument-state--muted {
15287
+ background: var(--bg-secondary, #f1f5f9);
15288
+ color: var(--text-muted, #64748b);
15083
15289
  }
15084
- .mint-resource-card--sm .mint-resource-card__footer {
15085
- padding: 0.5rem 0.75rem;
15086
- padding-top: 0;
15290
+ .mint-instrument-state--offline {
15291
+ border: 1px dashed var(--border-color, #e2e8f0);
15087
15292
  }
15088
- .mint-resource-card--lg .mint-resource-card__footer {
15089
- padding: 0.75rem 1.25rem;
15090
- padding-top: 0;
15293
+ .mint-instrument-state__dot {
15294
+ width: 0.375rem;
15295
+ height: 0.375rem;
15296
+ border-radius: 999px;
15297
+ background: currentColor;
15298
+ animation: mint-instrument-pulse 1.5s ease-in-out infinite;
15091
15299
  }
15092
- .mint-resource-card__tags {
15300
+ .mint-instrument-card {
15093
15301
  display: flex;
15094
- flex-wrap: wrap;
15095
- gap: 0.375rem;
15096
- flex: 1;
15097
15302
  min-width: 0;
15303
+ flex-direction: column;
15304
+ gap: 0.75rem;
15305
+ border: 1px solid var(--border-color, #e2e8f0);
15306
+ border-radius: 0.75rem;
15307
+ background: var(--bg-primary, #fff);
15308
+ padding: 1.25rem;
15309
+ transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
15098
15310
  }
15099
- .mint-resource-card__action {
15100
- flex-shrink: 0;
15101
- }
15102
-
15103
- /* Book button */
15104
- .mint-resource-card__book-btn {
15105
- display: inline-flex;
15106
- align-items: center;
15107
- gap: 0.25rem;
15108
- padding: 0.375rem 0.75rem;
15109
- background-color: var(--color-primary);
15110
- color: white;
15111
- border: none;
15112
- border-radius: var(--radius);
15113
- font-size: 0.8125rem;
15114
- font-weight: 500;
15115
- cursor: pointer;
15116
- transition: background-color 0.15s ease;
15117
- font-family: inherit;
15118
- white-space: nowrap;
15119
- }
15120
- .mint-resource-card__book-btn:hover {
15121
- background-color: var(--color-primary-hover);
15311
+ .mint-instrument-card--running {
15312
+ border-color: color-mix(in srgb, var(--mint-success, #22c55e) 30%, var(--border-color, #e2e8f0));
15313
+ box-shadow: 0 0 12px rgba(34, 197, 94, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
15122
15314
  }
15123
-
15124
- /* Compact book button: ghost style */
15125
- .mint-resource-card--compact .mint-resource-card__book-btn {
15126
- background-color: transparent;
15127
- color: var(--color-primary);
15128
- font-size: 0.75rem;
15129
- padding: 0.25rem 0.5rem;
15130
- border-radius: var(--radius-sm);
15315
+ .mint-instrument-card--error {
15316
+ border-color: var(--mint-error, #ef4444);
15317
+ box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
15131
15318
  }
15132
- .mint-resource-card--compact .mint-resource-card__book-btn:hover {
15133
- background-color: rgba(59, 130, 246, 0.1);
15319
+ .mint-instrument-card--connected {
15320
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
15134
15321
  }
15135
-
15136
- /* Compact layout overrides */
15137
- .mint-resource-card--compact .mint-resource-card__name {
15138
- font-size: 0.875rem;
15139
- flex: 1;
15140
- min-width: 0;
15322
+ .mint-instrument-card--disconnected {
15323
+ border-style: dashed;
15324
+ opacity: 0.68;
15141
15325
  }
15142
-
15143
- /* Spacer between header and specs/footer */
15144
- .mint-resource-card__content {
15326
+ .mint-instrument-card__header,
15327
+ .mint-instrument-card__sample-row,
15328
+ .mint-instrument-card__eta,
15329
+ .mint-instrument-alert__header,
15330
+ .mint-instrument-alert__footer {
15145
15331
  display: flex;
15146
- flex-direction: column;
15147
- }
15148
-
15149
- /* Pulse animation for in-use status */
15150
- @keyframes mint-resource-pulse {
15151
- 0%, 100% {
15152
- box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
15332
+ align-items: center;
15153
15333
  }
15154
- 50% {
15155
- box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
15334
+ .mint-instrument-card__header {
15335
+ gap: 0.625rem;
15336
+ min-width: 0;
15156
15337
  }
15338
+ .mint-instrument-card__dot {
15339
+ width: 0.75rem;
15340
+ height: 0.75rem;
15341
+ flex: 0 0 auto;
15342
+ border-radius: 999px;
15157
15343
  }
15158
-
15159
- /* Reduced motion */
15160
- @media (prefers-reduced-motion: reduce) {
15161
- .mint-resource-card__status-dot--in-use {
15162
- animation: none;
15344
+ .mint-instrument-card__dot--success {
15345
+ background: var(--mint-success, #22c55e);
15346
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
15163
15347
  }
15348
+ .mint-instrument-card__dot--warning {
15349
+ background: var(--mint-warning, #eab308);
15164
15350
  }
15165
- /* FitPanel Component Styles */
15166
- .mint-fit-panel {
15167
- display: flex;
15168
- flex-direction: column;
15169
- gap: 0.75rem;
15351
+ .mint-instrument-card__dot--error {
15352
+ background: var(--mint-error, #ef4444);
15353
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
15170
15354
  }
15171
-
15172
- /* Action bar */
15173
- .mint-fit-panel__actions {
15174
- display: flex;
15175
- gap: 0.5rem;
15355
+ .mint-instrument-card__dot--info {
15356
+ background: var(--mint-info, #3b82f6);
15176
15357
  }
15177
-
15178
- /* Progress */
15179
- .mint-fit-panel__progress {
15180
- padding: 0.25rem 0;
15358
+ .mint-instrument-card__dot--muted {
15359
+ background: var(--text-muted, #64748b);
15360
+ opacity: 0.38;
15181
15361
  }
15182
-
15183
- /* Result list */
15184
- .mint-fit-panel__results {
15185
- border: 1px solid var(--border-color);
15186
- border-radius: var(--radius-sm);
15362
+ .mint-instrument-card__name {
15363
+ min-width: 0;
15364
+ flex: 1 1 auto;
15187
15365
  overflow: hidden;
15366
+ color: var(--text-primary, #0f172a);
15367
+ font-size: 1.0625rem;
15368
+ font-weight: 700;
15369
+ text-overflow: ellipsis;
15370
+ white-space: nowrap;
15188
15371
  }
15189
- .mint-fit-panel__result-list {
15372
+ .mint-instrument-card__sample {
15190
15373
  display: flex;
15191
15374
  flex-direction: column;
15375
+ gap: 0.25rem;
15376
+ border: 1px solid color-mix(in srgb, var(--mint-success, #22c55e) 20%, var(--border-color, #e2e8f0));
15377
+ border-radius: 0.375rem;
15378
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 5%, transparent);
15379
+ padding: 0.5rem 0.625rem;
15192
15380
  }
15193
- .mint-fit-panel__result-row {
15194
- display: flex;
15195
- justify-content: space-between;
15196
- align-items: center;
15381
+ .mint-instrument-card__sample-label {
15382
+ color: var(--mint-success, #22c55e);
15383
+ font-size: 0.625rem;
15384
+ font-weight: 700;
15385
+ letter-spacing: 0.05em;
15386
+ text-transform: uppercase;
15387
+ }
15388
+ .mint-instrument-card__sample-row {
15389
+ gap: 0.375rem;
15390
+ min-width: 0;
15391
+ }
15392
+ .mint-instrument-card__sample-dot {
15393
+ width: 0.375rem;
15394
+ height: 0.375rem;
15395
+ flex: 0 0 auto;
15396
+ border-radius: 999px;
15397
+ background: var(--mint-success, #22c55e);
15398
+ }
15399
+ .mint-instrument-card__sample-name,
15400
+ .mint-instrument-card__method,
15401
+ .mint-instrument-card__sequence {
15402
+ min-width: 0;
15403
+ overflow: hidden;
15404
+ text-overflow: ellipsis;
15405
+ white-space: nowrap;
15406
+ }
15407
+ .mint-instrument-card__sample-name {
15408
+ flex: 1 1 auto;
15409
+ color: var(--text-primary, #0f172a);
15410
+ font-family: var(--font-mono, 'Fira Code', monospace);
15411
+ font-size: 0.8125rem;
15412
+ font-weight: 700;
15413
+ }
15414
+ .mint-instrument-card__sample-vial,
15415
+ .mint-instrument-card__method,
15416
+ .mint-instrument-card__sequence,
15417
+ .mint-instrument-card__muted {
15418
+ color: var(--text-muted, #64748b);
15419
+ font-family: var(--font-mono, 'Fira Code', monospace);
15420
+ font-size: 0.75rem;
15421
+ }
15422
+ .mint-instrument-card__sample-vial {
15423
+ flex: 0 0 auto;
15424
+ font-size: 0.6875rem;
15425
+ }
15426
+ .mint-instrument-card__eta {
15427
+ gap: 0.5rem;
15428
+ border-radius: 0.5rem;
15429
+ background: var(--bg-secondary, #f1f5f9);
15430
+ padding: 0.5rem 0.625rem;
15431
+ }
15432
+ .mint-instrument-card__eta-label {
15433
+ color: var(--text-muted, #64748b);
15434
+ font-size: 0.625rem;
15435
+ font-weight: 700;
15436
+ letter-spacing: 0.05em;
15437
+ }
15438
+ .mint-instrument-card__eta-time {
15439
+ color: var(--text-primary, #0f172a);
15440
+ font-family: var(--font-mono, 'Fira Code', monospace);
15441
+ font-size: 0.875rem;
15442
+ font-weight: 700;
15443
+ }
15444
+ .mint-instrument-card__eta-remaining {
15445
+ margin-left: auto;
15446
+ color: var(--text-muted, #64748b);
15447
+ font-family: var(--font-mono, 'Fira Code', monospace);
15448
+ font-size: 0.6875rem;
15449
+ }
15450
+ .mint-instrument-card__error {
15451
+ border: 1px solid color-mix(in srgb, var(--mint-error, #ef4444) 22%, var(--border-color, #e2e8f0));
15452
+ border-radius: 0.5rem;
15453
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
15454
+ padding: 0.625rem 0.75rem;
15455
+ }
15456
+ .mint-instrument-card__error-message {
15457
+ color: var(--mint-error, #ef4444);
15458
+ font-size: 0.8125rem;
15459
+ font-weight: 700;
15460
+ }
15461
+ .mint-instrument-card__error-detail {
15462
+ margin-top: 0.25rem;
15463
+ color: var(--text-muted, #64748b);
15464
+ font-size: 0.75rem;
15465
+ }
15466
+ .mint-instrument-card__placeholder {
15467
+ display: grid;
15468
+ gap: 0.625rem;
15469
+ }
15470
+ .mint-instrument-alert-log {
15471
+ display: flex;
15472
+ min-height: 0;
15473
+ flex-direction: column;
15474
+ }
15475
+ .mint-instrument-alert-log__header {
15476
+ padding: 0.875rem 1rem 0.625rem;
15477
+ }
15478
+ .mint-instrument-alert-log__title {
15479
+ color: var(--text-muted, #64748b);
15480
+ font-size: 0.75rem;
15481
+ font-weight: 700;
15482
+ letter-spacing: 0.04em;
15483
+ text-transform: uppercase;
15484
+ }
15485
+ .mint-instrument-alert-log__filters {
15486
+ display: flex;
15487
+ flex-direction: column;
15488
+ gap: 0.375rem;
15489
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
15490
+ padding: 0 0.75rem 0.625rem;
15491
+ }
15492
+ .mint-instrument-alert-log__filter-row {
15493
+ display: flex;
15494
+ flex-wrap: wrap;
15495
+ gap: 0.3125rem;
15496
+ }
15497
+ .mint-instrument-alert-log__filter {
15498
+ display: inline-flex;
15499
+ align-items: center;
15500
+ gap: 0.3125rem;
15501
+ border: 1px solid var(--border-color, #e2e8f0);
15502
+ border-radius: 999px;
15503
+ background: var(--bg-secondary, #f1f5f9);
15504
+ color: var(--text-muted, #64748b);
15505
+ cursor: pointer;
15506
+ font-size: 0.6875rem;
15507
+ font-weight: 600;
15508
+ opacity: 0.56;
15509
+ padding: 0.1875rem 0.5rem;
15510
+ transition: opacity 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
15511
+ }
15512
+ .mint-instrument-alert-log__filter--active {
15513
+ border-color: var(--filter-color, var(--border-color, #e2e8f0));
15514
+ background: color-mix(in srgb, var(--filter-color, transparent) 8%, var(--bg-secondary, #f1f5f9));
15515
+ color: var(--text-primary, #0f172a);
15516
+ opacity: 1;
15517
+ }
15518
+ .mint-instrument-alert-log__filter:hover {
15519
+ opacity: 0.86;
15520
+ }
15521
+ .mint-instrument-alert-log__filter--active:hover {
15522
+ opacity: 1;
15523
+ }
15524
+ .mint-instrument-alert-log__filter-dot {
15525
+ width: 0.375rem;
15526
+ height: 0.375rem;
15527
+ flex: 0 0 auto;
15528
+ border-radius: 999px;
15529
+ }
15530
+ .mint-instrument-alert-log__filter-count {
15531
+ min-width: 0.875rem;
15532
+ color: var(--text-muted, #64748b);
15533
+ font-family: var(--font-mono, 'Fira Code', monospace);
15534
+ font-size: 0.625rem;
15535
+ text-align: center;
15536
+ }
15537
+ .mint-instrument-alert-log__list {
15538
+ display: flex;
15539
+ min-height: 0;
15540
+ flex: 1 1 auto;
15541
+ flex-direction: column;
15542
+ gap: 0.5rem;
15543
+ overflow-y: auto;
15544
+ padding: 0.5rem;
15545
+ }
15546
+ .mint-instrument-alert {
15547
+ border-left: 3px solid transparent;
15548
+ border-radius: 0.375rem;
15549
+ font-size: 0.8125rem;
15550
+ line-height: 1.4;
15551
+ padding: 0.625rem 0.75rem;
15552
+ transition: opacity 150ms ease-out;
15553
+ }
15554
+ .mint-instrument-alert--critical {
15555
+ border-left-color: var(--mint-error, #ef4444);
15556
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
15557
+ }
15558
+ .mint-instrument-alert--warning {
15559
+ border-left-color: var(--mint-warning, #eab308);
15560
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 8%, transparent);
15561
+ }
15562
+ .mint-instrument-alert--info {
15563
+ border-left-color: var(--mint-info, #3b82f6);
15564
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 6%, transparent);
15565
+ }
15566
+ .mint-instrument-alert--acknowledged {
15567
+ opacity: 0.52;
15568
+ }
15569
+ .mint-instrument-alert__header {
15570
+ gap: 0.375rem;
15571
+ margin-bottom: 0.1875rem;
15572
+ min-width: 0;
15573
+ }
15574
+ .mint-instrument-alert__instrument {
15575
+ min-width: 0;
15576
+ overflow: hidden;
15577
+ color: var(--text-primary, #0f172a);
15578
+ font-size: 0.8125rem;
15579
+ font-weight: 700;
15580
+ text-overflow: ellipsis;
15581
+ white-space: nowrap;
15582
+ }
15583
+ .mint-instrument-alert__source {
15584
+ border: 1px solid var(--border-color, #e2e8f0);
15585
+ border-radius: 0.1875rem;
15586
+ background: var(--bg-secondary, #f1f5f9);
15587
+ color: var(--text-muted, #64748b);
15588
+ flex: 0 0 auto;
15589
+ font-size: 0.625rem;
15590
+ font-weight: 700;
15591
+ letter-spacing: 0.02em;
15592
+ padding: 0 0.25rem;
15593
+ }
15594
+ .mint-instrument-alert__time {
15595
+ flex: 0 0 auto;
15596
+ margin-left: auto;
15597
+ color: var(--text-muted, #64748b);
15598
+ font-family: var(--font-mono, 'Fira Code', monospace);
15599
+ font-size: 0.6875rem;
15600
+ }
15601
+ .mint-instrument-alert__detail {
15602
+ color: var(--text-secondary, #475569);
15603
+ font-size: 0.8125rem;
15604
+ line-height: 1.5;
15605
+ overflow-wrap: break-word;
15606
+ }
15607
+ .mint-instrument-alert__footer {
15608
+ gap: 0.5rem;
15609
+ margin-top: 0.375rem;
15610
+ }
15611
+ .mint-instrument-alert__code,
15612
+ .mint-instrument-alert__ack {
15613
+ border: 1px solid var(--border-color, #e2e8f0);
15614
+ border-radius: 0.25rem;
15615
+ background: var(--bg-secondary, #f1f5f9);
15616
+ color: var(--text-muted, #64748b);
15617
+ font-size: 0.6875rem;
15618
+ padding: 0.25rem 0.5rem;
15619
+ }
15620
+ .mint-instrument-alert__code {
15621
+ font-family: var(--font-mono, 'Fira Code', monospace);
15622
+ font-weight: 700;
15623
+ }
15624
+ .mint-instrument-alert__ack {
15625
+ cursor: pointer;
15626
+ transition: background 150ms ease-out, color 150ms ease-out;
15627
+ }
15628
+ .mint-instrument-alert__ack:hover {
15629
+ background: var(--bg-primary, #fff);
15630
+ color: var(--text-primary, #0f172a);
15631
+ }
15632
+ .mint-instrument-alert-log__empty {
15633
+ color: var(--text-muted, #64748b);
15634
+ font-size: 0.8125rem;
15635
+ padding: 2rem 1rem;
15636
+ text-align: center;
15637
+ }
15638
+ .mint-instrument-alert-enter-active {
15639
+ transition: opacity 0.2s ease-out;
15640
+ }
15641
+ .mint-instrument-alert-leave-active {
15642
+ transition: opacity 0.15s ease-in;
15643
+ }
15644
+ .mint-instrument-alert-enter-from,
15645
+ .mint-instrument-alert-leave-to {
15646
+ opacity: 0;
15647
+ }
15648
+ @keyframes mint-instrument-pulse {
15649
+ 0%, 100% {
15650
+ opacity: 1;
15651
+ box-shadow: 0 0 0 0 currentColor;
15652
+ }
15653
+ 50% {
15654
+ opacity: 0.72;
15655
+ box-shadow: 0 0 0 3px transparent;
15656
+ }
15657
+ }
15658
+ @media (prefers-reduced-motion: reduce) {
15659
+ .mint-instrument-state__dot,
15660
+ .mint-instrument-alert-enter-active,
15661
+ .mint-instrument-alert-leave-active {
15662
+ animation: none;
15663
+ transition: none;
15664
+ }
15665
+ }
15666
+ .mint-lcms-sequence-table {
15667
+ min-width: 0;
15668
+ overflow: hidden;
15669
+ }
15670
+ .mint-lcms-sequence-table__scroller {
15671
+ overflow-x: auto;
15672
+ }
15673
+ .mint-lcms-sequence-table__table {
15674
+ width: 100%;
15675
+ border-collapse: collapse;
15676
+ font-size: 0.875rem;
15677
+ }
15678
+ .mint-lcms-sequence-table__th,
15679
+ .mint-lcms-sequence-table__td,
15680
+ .mint-lcms-sequence-table__drag-header,
15681
+ .mint-lcms-sequence-table__drag-cell,
15682
+ .mint-lcms-sequence-table__actions-header,
15683
+ .mint-lcms-sequence-table__actions {
15684
+ border-bottom: 1px solid var(--border-light, var(--border-color, #e2e8f0));
15685
+ padding: 0.5rem 0.75rem;
15686
+ vertical-align: middle;
15687
+ }
15688
+ .mint-lcms-sequence-table__th {
15689
+ color: var(--text-secondary, #475569);
15690
+ font-size: 0.8125rem;
15691
+ font-weight: 700;
15692
+ text-align: left;
15693
+ white-space: nowrap;
15694
+ }
15695
+ .mint-lcms-sequence-table__th--right,
15696
+ .mint-lcms-sequence-table__td--right {
15697
+ text-align: right;
15698
+ }
15699
+ .mint-lcms-sequence-table__row {
15700
+ transition: background 120ms ease-out, opacity 120ms ease-out, box-shadow 120ms ease-out;
15701
+ }
15702
+ .mint-lcms-sequence-table__row:hover {
15703
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 4%, transparent);
15704
+ }
15705
+ .mint-lcms-sequence-table__row--dragging {
15706
+ opacity: 0.35;
15707
+ }
15708
+ .mint-lcms-sequence-table__row--drop-above {
15709
+ box-shadow: inset 0 2px 0 0 var(--mint-info, #3b82f6);
15710
+ }
15711
+ .mint-lcms-sequence-table__row--drop-below {
15712
+ box-shadow: inset 0 -2px 0 0 var(--mint-info, #3b82f6);
15713
+ }
15714
+ .mint-lcms-sequence-table__drag-header,
15715
+ .mint-lcms-sequence-table__drag-cell {
15716
+ width: 1.5rem;
15717
+ padding-left: 0.25rem;
15718
+ padding-right: 0.25rem;
15719
+ }
15720
+ .mint-lcms-sequence-table__drag-handle {
15721
+ color: var(--text-muted, #64748b);
15722
+ cursor: grab;
15723
+ font-family: var(--font-mono, 'Fira Code', monospace);
15724
+ font-size: 0.875rem;
15725
+ letter-spacing: -0.08em;
15726
+ }
15727
+ .mint-lcms-sequence-table__td {
15728
+ min-width: 0;
15729
+ color: var(--text-primary, #0f172a);
15730
+ }
15731
+ .mint-lcms-sequence-table__td--index,
15732
+ .mint-lcms-sequence-table__td--file_name,
15733
+ .mint-lcms-sequence-table__td--instrument_method,
15734
+ .mint-lcms-sequence-table__td--injection_volume {
15735
+ font-family: var(--font-mono, 'Fira Code', monospace);
15736
+ }
15737
+ .mint-lcms-sequence-table__td--index,
15738
+ .mint-lcms-sequence-table__td--instrument_method {
15739
+ color: var(--text-muted, #64748b);
15740
+ }
15741
+ .mint-lcms-sequence-table__td--file_name,
15742
+ .mint-lcms-sequence-table__td--instrument_method {
15743
+ max-width: 18rem;
15744
+ overflow: hidden;
15745
+ text-overflow: ellipsis;
15746
+ white-space: nowrap;
15747
+ }
15748
+ .mint-lcms-sequence-table__type {
15749
+ display: inline-flex;
15750
+ align-items: center;
15751
+ border-radius: 0.25rem;
15752
+ font-size: 0.75rem;
15753
+ font-weight: 700;
15754
+ line-height: 1.2;
15755
+ padding: 0.125rem 0.5rem;
15756
+ white-space: nowrap;
15757
+ }
15758
+ .mint-lcms-sequence-table__type--blank {
15759
+ background: color-mix(in srgb, var(--color-cta, #f97316) 15%, transparent);
15760
+ color: var(--color-cta, #f97316);
15761
+ }
15762
+ .mint-lcms-sequence-table__type--qc {
15763
+ background: color-mix(in srgb, var(--color-purple, #8b5cf6) 15%, transparent);
15764
+ color: var(--color-purple, #8b5cf6);
15765
+ }
15766
+ .mint-lcms-sequence-table__type--sample {
15767
+ background: var(--bg-tertiary, #e2e8f0);
15768
+ color: var(--text-secondary, #475569);
15769
+ }
15770
+ .mint-lcms-sequence-table__actions-header,
15771
+ .mint-lcms-sequence-table__actions {
15772
+ width: 4rem;
15773
+ padding-left: 0.25rem;
15774
+ padding-right: 0.25rem;
15775
+ }
15776
+ .mint-lcms-sequence-table__actions {
15777
+ display: flex;
15778
+ align-items: center;
15779
+ justify-content: flex-end;
15780
+ gap: 0.25rem;
15781
+ }
15782
+ .mint-lcms-sequence-table__action {
15783
+ display: inline-flex;
15784
+ width: 1.375rem;
15785
+ height: 1.375rem;
15786
+ align-items: center;
15787
+ justify-content: center;
15788
+ border: 0;
15789
+ border-radius: 0.25rem;
15790
+ background: transparent;
15791
+ color: var(--mint-info, #3b82f6);
15792
+ cursor: pointer;
15793
+ font-size: 0.875rem;
15794
+ font-weight: 700;
15795
+ line-height: 1;
15796
+ opacity: 0.6;
15797
+ transition: background 120ms ease-out, opacity 120ms ease-out;
15798
+ }
15799
+ .mint-lcms-sequence-table__action:hover {
15800
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 10%, transparent);
15801
+ opacity: 1;
15802
+ }
15803
+ .mint-lcms-sequence-table__action--danger {
15804
+ color: var(--mint-error, #ef4444);
15805
+ }
15806
+ .mint-lcms-sequence-table__action--danger:hover {
15807
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 10%, transparent);
15808
+ }
15809
+ .mint-lcms-sequence-table__empty,
15810
+ .mint-lcms-sequence-table__more {
15811
+ color: var(--text-muted, #64748b);
15812
+ font-size: 0.875rem;
15813
+ padding: 1rem;
15814
+ text-align: center;
15815
+ }
15816
+ .mint-lcms-sequence-table__more {
15817
+ border-top: 1px solid var(--border-color, #e2e8f0);
15818
+ padding: 0.625rem 1rem;
15819
+ }
15820
+ @media (prefers-reduced-motion: reduce) {
15821
+ .mint-lcms-sequence-table__row,
15822
+ .mint-lcms-sequence-table__action {
15823
+ transition: none;
15824
+ }
15825
+ }
15826
+ /* AuditTrail Component Styles */
15827
+ .mint-audit-trail {
15828
+ position: relative;
15829
+ }
15830
+ .mint-audit-trail__filters {
15831
+ display: flex;
15832
+ gap: 0.5rem;
15833
+ margin-bottom: 1rem;
15834
+ }
15835
+ .mint-audit-trail__filter-select {
15836
+ padding: 0.375rem 0.625rem;
15837
+ border-radius: var(--radius);
15838
+ border: 1px solid var(--border-color);
15839
+ background-color: var(--bg-secondary);
15840
+ color: var(--text-primary);
15841
+ font-size: 0.75rem;
15842
+ }
15843
+ .mint-audit-trail__list {
15844
+ position: relative;
15845
+ padding-left: 1.5rem;
15846
+ }
15847
+ .mint-audit-trail__line {
15848
+ position: absolute;
15849
+ left: 0.4375rem;
15850
+ top: 0;
15851
+ bottom: 0;
15852
+ width: 2px;
15853
+ background-color: var(--border-color);
15854
+ }
15855
+ .mint-audit-trail__entry {
15856
+ position: relative;
15857
+ padding-bottom: 1.25rem;
15858
+ cursor: pointer;
15859
+ }
15860
+ .mint-audit-trail__entry:last-child {
15861
+ padding-bottom: 0;
15862
+ }
15863
+ .mint-audit-trail__dot {
15864
+ position: absolute;
15865
+ left: -1.5rem;
15866
+ top: 0.25rem;
15867
+ width: 0.625rem;
15868
+ height: 0.625rem;
15869
+ border-radius: 9999px;
15870
+ border: 2px solid var(--bg-primary);
15871
+ z-index: 1;
15872
+ }
15873
+
15874
+ /* Dot colors by type */
15875
+ .mint-audit-trail__entry--create .mint-audit-trail__dot { background-color: var(--mint-success);
15876
+ }
15877
+ .mint-audit-trail__entry--update .mint-audit-trail__dot { background-color: var(--color-primary);
15878
+ }
15879
+ .mint-audit-trail__entry--delete .mint-audit-trail__dot { background-color: var(--mint-error);
15880
+ }
15881
+ .mint-audit-trail__entry--system .mint-audit-trail__dot { background-color: var(--text-muted);
15882
+ }
15883
+ .mint-audit-trail__content {
15884
+ /* entry content container */
15885
+ }
15886
+ .mint-audit-trail__header {
15887
+ display: flex;
15888
+ align-items: center;
15889
+ gap: 0.5rem;
15890
+ margin-bottom: 0.25rem;
15891
+ }
15892
+ .mint-audit-trail__avatar {
15893
+ width: 1.25rem;
15894
+ height: 1.25rem;
15895
+ border-radius: 9999px;
15896
+ background-color: var(--bg-tertiary);
15897
+ color: var(--text-secondary);
15898
+ font-size: 0.5rem;
15899
+ font-weight: 600;
15900
+ display: flex;
15901
+ align-items: center;
15902
+ justify-content: center;
15903
+ flex-shrink: 0;
15904
+ }
15905
+ .mint-audit-trail__user {
15906
+ font-size: 0.75rem;
15907
+ font-weight: 500;
15908
+ color: var(--text-primary);
15909
+ }
15910
+ .mint-audit-trail__timestamp {
15911
+ font-size: 0.6875rem;
15912
+ color: var(--text-muted);
15913
+ margin-left: auto;
15914
+ }
15915
+ .mint-audit-trail__action {
15916
+ font-size: 0.8125rem;
15917
+ color: var(--text-primary);
15918
+ font-weight: 500;
15919
+ }
15920
+ .mint-audit-trail__detail {
15921
+ font-size: 0.75rem;
15922
+ color: var(--text-secondary);
15923
+ margin-top: 0.125rem;
15924
+ }
15925
+ .mint-audit-trail__metadata {
15926
+ margin-top: 0.375rem;
15927
+ display: flex;
15928
+ flex-wrap: wrap;
15929
+ gap: 0.5rem;
15930
+ font-size: 0.6875rem;
15931
+ }
15932
+ .mint-audit-trail__metadata-item {
15933
+ color: var(--text-secondary);
15934
+ }
15935
+ .mint-audit-trail__metadata-key {
15936
+ color: var(--text-muted);
15937
+ margin-right: 0.125rem;
15938
+ }
15939
+ .mint-audit-trail__empty {
15940
+ text-align: center;
15941
+ padding: 2rem;
15942
+ color: var(--text-muted);
15943
+ font-size: 0.875rem;
15944
+ }
15945
+
15946
+ /* Size variants */
15947
+ .mint-audit-trail--sm .mint-audit-trail__action { font-size: 0.75rem;
15948
+ }
15949
+ .mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.6875rem;
15950
+ }
15951
+ .mint-audit-trail--sm .mint-audit-trail__entry { padding-bottom: 0.75rem;
15952
+ }
15953
+ .mint-audit-trail--lg .mint-audit-trail__action { font-size: 0.9375rem;
15954
+ }
15955
+ .mint-audit-trail--lg .mint-audit-trail__detail { font-size: 0.8125rem;
15956
+ }
15957
+ .mint-audit-trail--lg .mint-audit-trail__entry { padding-bottom: 1.5rem;
15958
+ }
15959
+ /* BatchProgressList Component Styles */
15960
+ .mint-batch-progress {
15961
+ display: flex;
15962
+ flex-direction: column;
15963
+ gap: 0.75rem;
15964
+ }
15965
+ .mint-batch-progress__header {
15966
+ display: flex;
15967
+ align-items: center;
15968
+ justify-content: space-between;
15969
+ }
15970
+ .mint-batch-progress__title {
15971
+ font-weight: 600;
15972
+ font-size: 0.875rem;
15973
+ color: var(--text-primary);
15974
+ }
15975
+ .mint-batch-progress__percent {
15976
+ font-size: 0.75rem;
15977
+ font-weight: 500;
15978
+ color: var(--text-muted);
15979
+ }
15980
+ .mint-batch-progress__overall {
15981
+ width: 100%;
15982
+ height: 0.375rem;
15983
+ background-color: var(--bg-tertiary);
15984
+ border-radius: 9999px;
15985
+ overflow: hidden;
15986
+ }
15987
+ .mint-batch-progress__overall-bar {
15988
+ height: 100%;
15989
+ background-color: var(--color-primary);
15990
+ border-radius: 9999px;
15991
+ transition: width 0.3s ease;
15992
+ }
15993
+ .mint-batch-progress__summary {
15994
+ display: flex;
15995
+ flex-wrap: wrap;
15996
+ gap: 0.5rem;
15997
+ }
15998
+ .mint-batch-progress__summary-item {
15999
+ display: inline-flex;
16000
+ align-items: center;
16001
+ gap: 0.25rem;
16002
+ font-size: 0.75rem;
16003
+ padding: 0.125rem 0.5rem;
16004
+ border-radius: 9999px;
16005
+ }
16006
+ .mint-batch-progress__summary-item--completed { background-color: var(--mint-success-bg); color: var(--mint-success);
16007
+ }
16008
+ .mint-batch-progress__summary-item--processing { background-color: var(--mint-info-bg); color: var(--mint-info);
16009
+ }
16010
+ .mint-batch-progress__summary-item--error { background-color: var(--mint-error-bg); color: var(--mint-error);
16011
+ }
16012
+ .mint-batch-progress__summary-item--pending { background-color: var(--bg-tertiary); color: var(--text-muted);
16013
+ }
16014
+ .mint-batch-progress__summary-item--skipped { background-color: var(--bg-tertiary); color: var(--text-muted);
16015
+ }
16016
+ .mint-batch-progress__list {
16017
+ display: flex;
16018
+ flex-direction: column;
16019
+ gap: 0.25rem;
16020
+ }
16021
+ .mint-batch-progress__item {
16022
+ display: flex;
16023
+ flex-direction: column;
16024
+ padding: 0.5rem 0.75rem;
16025
+ border-radius: var(--radius);
16026
+ background-color: var(--bg-secondary);
16027
+ border: 1px solid var(--border-color);
16028
+ transition: background-color 0.15s ease;
16029
+ }
16030
+ .mint-batch-progress__item-row {
16031
+ display: flex;
16032
+ align-items: center;
16033
+ gap: 0.5rem;
16034
+ }
16035
+ .mint-batch-progress__item--processing {
16036
+ border-color: rgba(59, 130, 246, 0.3);
16037
+ background-color: var(--mint-info-bg);
16038
+ }
16039
+ .mint-batch-progress__item--error {
16040
+ border-color: rgba(239, 68, 68, 0.3);
16041
+ }
16042
+ .mint-batch-progress__item--completed {
16043
+ opacity: 0.7;
16044
+ }
16045
+ .mint-batch-progress__item-icon {
16046
+ flex-shrink: 0;
16047
+ width: 1rem;
16048
+ height: 1rem;
16049
+ }
16050
+ .mint-batch-progress__item-icon--pending { color: var(--text-muted);
16051
+ }
16052
+ .mint-batch-progress__item-icon--processing { color: var(--mint-info); animation: mint-batch-spin 1s linear infinite;
16053
+ }
16054
+ .mint-batch-progress__item-icon--completed { color: var(--mint-success);
16055
+ }
16056
+ .mint-batch-progress__item-icon--error { color: var(--mint-error);
16057
+ }
16058
+ .mint-batch-progress__item-icon--skipped { color: var(--text-muted);
16059
+ }
16060
+ @keyframes mint-batch-spin {
16061
+ from { transform: rotate(0deg);
16062
+ }
16063
+ to { transform: rotate(360deg);
16064
+ }
16065
+ }
16066
+ .mint-batch-progress__item-label {
16067
+ flex: 1;
16068
+ font-size: 0.8125rem;
16069
+ color: var(--text-primary);
16070
+ min-width: 0;
16071
+ overflow: hidden;
16072
+ text-overflow: ellipsis;
16073
+ white-space: nowrap;
16074
+ }
16075
+ .mint-batch-progress__item-progress {
16076
+ width: 4rem;
16077
+ height: 0.25rem;
16078
+ background-color: var(--bg-tertiary);
16079
+ border-radius: 9999px;
16080
+ overflow: hidden;
16081
+ flex-shrink: 0;
16082
+ }
16083
+ .mint-batch-progress__item-progress-bar {
16084
+ height: 100%;
16085
+ background-color: var(--color-primary);
16086
+ transition: width 0.3s ease;
16087
+ }
16088
+ .mint-batch-progress__item-error {
16089
+ padding: 0.25rem 0 0 1.5rem;
16090
+ }
16091
+ .mint-batch-progress__error-toggle {
16092
+ font-size: 0.6875rem;
16093
+ color: var(--text-muted);
16094
+ background: none;
16095
+ border: none;
16096
+ cursor: pointer;
16097
+ padding: 0;
16098
+ text-decoration: underline;
16099
+ }
16100
+ .mint-batch-progress__error-toggle:hover {
16101
+ color: var(--text-secondary);
16102
+ }
16103
+ .mint-batch-progress__item-message {
16104
+ font-size: 0.75rem;
16105
+ color: var(--mint-error);
16106
+ margin-top: 0.25rem;
16107
+ }
16108
+ .mint-batch-progress__item-actions {
16109
+ display: flex;
16110
+ gap: 0.25rem;
16111
+ flex-shrink: 0;
16112
+ }
16113
+ .mint-batch-progress__retry-btn,
16114
+ .mint-batch-progress__cancel-btn {
16115
+ padding: 0.125rem 0.5rem;
16116
+ font-size: 0.6875rem;
16117
+ border-radius: var(--radius-sm);
16118
+ border: none;
16119
+ cursor: pointer;
16120
+ font-weight: 500;
16121
+ transition: background-color 0.15s ease;
16122
+ }
16123
+ .mint-batch-progress__retry-btn {
16124
+ background-color: var(--mint-warning-bg);
16125
+ color: var(--mint-warning);
16126
+ }
16127
+ .mint-batch-progress__retry-btn:hover {
16128
+ background-color: rgba(245, 158, 11, 0.2);
16129
+ }
16130
+ .mint-batch-progress__cancel-btn {
16131
+ background-color: var(--bg-tertiary);
16132
+ color: var(--text-muted);
16133
+ }
16134
+ .mint-batch-progress__cancel-btn:hover {
16135
+ background-color: var(--bg-hover);
16136
+ color: var(--text-primary);
16137
+ }
16138
+ .mint-data-viewer {
16139
+ border: 1px solid var(--border-color);
16140
+ border-radius: var(--radius-md);
16141
+ overflow: hidden;
16142
+ }
16143
+ .mint-data-viewer__header {
16144
+ display: flex;
16145
+ align-items: center;
16146
+ justify-content: space-between;
16147
+ padding: 8px 12px;
16148
+ border-bottom: 1px solid var(--border-color);
16149
+ background: var(--bg-secondary);
16150
+ gap: 8px;
16151
+ }
16152
+ .mint-data-viewer__controls { display: flex; gap: 8px;
16153
+ }
16154
+ .mint-data-viewer__actions { display: flex; gap: 4px; align-items: center;
16155
+ }
16156
+ .mint-data-viewer__content {
16157
+ padding: 12px;
16158
+ max-height: 600px;
16159
+ overflow-y: auto;
16160
+ }
16161
+ .mint-data-viewer__loading {
16162
+ padding: 24px 12px;
16163
+ }
16164
+ .mint-data-viewer__skeleton {
16165
+ display: flex;
16166
+ flex-direction: column;
16167
+ gap: 12px;
16168
+ }
16169
+ .mint-data-viewer__empty {
16170
+ text-align: center;
16171
+ padding: 32px;
16172
+ color: var(--text-muted);
16173
+ }
16174
+ /* Summary view */
16175
+ .mint-summary {
16176
+ display: flex;
16177
+ flex-direction: column;
16178
+ gap: 16px;
16179
+ }
16180
+ /* Metadata pills row */
16181
+ .mint-summary__metadata {
16182
+ display: flex;
16183
+ flex-wrap: wrap;
16184
+ gap: 6px;
16185
+ }
16186
+ .mint-summary__pill {
16187
+ display: inline-flex;
16188
+ align-items: center;
16189
+ border-radius: 6px;
16190
+ overflow: hidden;
16191
+ font-size: 0.8125rem;
16192
+ line-height: 1;
16193
+ border: 1px solid var(--border-color);
16194
+ }
16195
+ .mint-summary__pill--sm {
16196
+ font-size: 0.75rem;
16197
+ }
16198
+ .mint-summary__pill-key {
16199
+ padding: 4px 8px;
16200
+ background: var(--bg-secondary);
16201
+ color: var(--text-muted);
16202
+ text-transform: capitalize;
16203
+ font-weight: 500;
16204
+ }
16205
+ .mint-summary__pill-value {
16206
+ padding: 4px 8px;
16207
+ color: var(--text-primary);
16208
+ }
16209
+ /* Section */
16210
+ .mint-summary__section {
16211
+ display: flex;
16212
+ flex-direction: column;
16213
+ gap: 12px;
16214
+ }
16215
+ .mint-summary__section-label {
16216
+ font-weight: 600;
16217
+ font-size: 0.875rem;
16218
+ color: var(--text-primary);
16219
+ }
16220
+ .mint-summary__section-count {
16221
+ font-size: 0.75rem;
16222
+ color: var(--text-muted);
16223
+ margin-left: 8px;
16224
+ }
16225
+ .mint-summary__table-header {
16226
+ display: flex;
16227
+ align-items: baseline;
16228
+ gap: 4px;
16229
+ }
16230
+ /* Group cards */
16231
+ .mint-summary__group-card {
16232
+ border: 1px solid var(--border-color);
16233
+ border-radius: var(--radius-md);
16234
+ overflow: hidden;
16235
+ }
16236
+ .mint-summary__group-header {
16237
+ display: flex;
16238
+ align-items: center;
16239
+ justify-content: space-between;
16240
+ padding: 10px 14px;
16241
+ background: var(--bg-secondary);
16242
+ border-bottom: 1px solid var(--border-color);
16243
+ }
16244
+ .mint-summary__group-label {
16245
+ font-weight: 600;
16246
+ font-size: 0.875rem;
16247
+ color: var(--text-primary);
16248
+ }
16249
+ .mint-summary__group-count {
16250
+ font-size: 0.75rem;
16251
+ color: var(--text-muted);
16252
+ background: var(--bg-tertiary);
16253
+ padding: 2px 8px;
16254
+ border-radius: 10px;
16255
+ }
16256
+ .mint-summary__group-meta {
16257
+ display: flex;
16258
+ flex-wrap: wrap;
16259
+ gap: 6px;
16260
+ padding: 8px 14px;
16261
+ border-bottom: 1px solid var(--border-color);
16262
+ }
16263
+ /* TimeRangeInput Component Styles */
16264
+ .mint-time-range {
16265
+ display: flex;
16266
+ align-items: center;
16267
+ gap: 0.5rem;
16268
+ }
16269
+ .mint-time-range__start,
16270
+ .mint-time-range__end {
16271
+ flex: 1;
16272
+ min-width: 0;
16273
+ }
16274
+ .mint-time-range__separator {
16275
+ display: flex;
16276
+ align-items: center;
16277
+ gap: 0.5rem;
16278
+ flex-shrink: 0;
16279
+ }
16280
+ .mint-time-range__separator::before,
16281
+ .mint-time-range__separator::after {
16282
+ content: '';
16283
+ display: block;
16284
+ width: 1rem;
16285
+ height: 2px;
16286
+ background-color: var(--border-color);
16287
+ }
16288
+ .mint-time-range__duration {
16289
+ font-size: 0.75rem;
16290
+ color: var(--text-muted);
16291
+ background-color: var(--bg-tertiary);
16292
+ border-radius: var(--radius, 0.375rem);
16293
+ padding: 0.125rem 0.5rem;
16294
+ white-space: nowrap;
16295
+ }
16296
+ .mint-time-range__duration--error {
16297
+ color: var(--mint-error);
16298
+ }
16299
+ /* ResourceCard Component Styles */
16300
+ .mint-resource-card {
16301
+ background-color: var(--bg-card);
16302
+ border: 1px solid var(--border-color);
16303
+ border-radius: var(--radius-lg);
16304
+ box-shadow: var(--shadow-sm);
16305
+ cursor: pointer;
16306
+ transition: box-shadow 0.15s ease, border-color 0.15s ease;
16307
+ overflow: hidden;
16308
+ }
16309
+ .mint-resource-card:hover {
16310
+ box-shadow: var(--shadow-md);
16311
+ border-color: rgba(59, 130, 246, 0.3);
16312
+ }
16313
+
16314
+ /* Compact mode */
16315
+ .mint-resource-card--compact {
16316
+ border-radius: 0;
16317
+ box-shadow: none;
16318
+ border: none;
16319
+ border-bottom: 1px solid var(--border-color);
16320
+ display: flex;
16321
+ align-items: center;
16322
+ gap: 0.75rem;
16323
+ padding: 0.5rem 0.75rem;
16324
+ min-height: 40px;
16325
+ }
16326
+ .mint-resource-card--compact:hover {
16327
+ box-shadow: none;
16328
+ border-color: var(--border-color);
16329
+ background-color: var(--bg-hover);
16330
+ }
16331
+
16332
+ /* Card layout (non-compact) */
16333
+ .mint-resource-card__header {
16334
+ display: flex;
16335
+ align-items: flex-start;
16336
+ gap: 0.75rem;
16337
+ padding: 1rem;
16338
+ padding-bottom: 0;
16339
+ }
16340
+
16341
+ /* Size variants for header padding */
16342
+ .mint-resource-card--sm .mint-resource-card__header {
16343
+ padding: 0.75rem;
16344
+ padding-bottom: 0;
16345
+ gap: 0.625rem;
16346
+ }
16347
+ .mint-resource-card--lg .mint-resource-card__header {
16348
+ padding: 1.25rem;
16349
+ padding-bottom: 0;
16350
+ gap: 1rem;
16351
+ }
16352
+
16353
+ /* Image / fallback icon */
16354
+ .mint-resource-card__image {
16355
+ width: 64px;
16356
+ height: 64px;
16357
+ border-radius: var(--radius-md);
16358
+ overflow: hidden;
16359
+ flex-shrink: 0;
16360
+ }
16361
+ .mint-resource-card--sm .mint-resource-card__image {
16362
+ width: 48px;
16363
+ height: 48px;
16364
+ }
16365
+ .mint-resource-card--lg .mint-resource-card__image {
16366
+ width: 80px;
16367
+ height: 80px;
16368
+ }
16369
+ .mint-resource-card__image img {
16370
+ width: 100%;
16371
+ height: 100%;
16372
+ object-fit: cover;
16373
+ }
16374
+ .mint-resource-card__image-fallback {
16375
+ width: 100%;
16376
+ height: 100%;
16377
+ display: flex;
16378
+ align-items: center;
16379
+ justify-content: center;
16380
+ background-color: var(--bg-tertiary);
16381
+ color: var(--text-muted);
16382
+ }
16383
+ .mint-resource-card__image-fallback svg {
16384
+ width: 50%;
16385
+ height: 50%;
16386
+ }
16387
+
16388
+ /* Body section */
16389
+ .mint-resource-card__body {
16390
+ flex: 1;
16391
+ min-width: 0;
16392
+ }
16393
+ .mint-resource-card__title-row {
16394
+ display: flex;
16395
+ align-items: center;
16396
+ justify-content: space-between;
16397
+ gap: 0.75rem;
16398
+ }
16399
+ .mint-resource-card__name {
16400
+ font-size: 0.9375rem;
16401
+ font-weight: 600;
16402
+ color: var(--text-primary);
16403
+ margin-top: 0 !important;
16404
+ margin-bottom: 0 !important;
16405
+ margin-left: 0;
16406
+ margin-right: 0;
16407
+ padding: 0 !important;
16408
+ line-height: 1.3;
16409
+ overflow: hidden;
16410
+ text-overflow: ellipsis;
16411
+ white-space: nowrap;
16412
+ }
16413
+ .mint-resource-card--sm .mint-resource-card__name {
16414
+ font-size: 0.8125rem;
16415
+ }
16416
+ .mint-resource-card--lg .mint-resource-card__name {
16417
+ font-size: 1.0625rem;
16418
+ }
16419
+ .mint-resource-card__description {
16420
+ font-size: 0.8125rem;
16421
+ color: var(--text-secondary);
16422
+ margin-top: 0.125rem !important;
16423
+ margin-bottom: 0 !important;
16424
+ margin-left: 0;
16425
+ margin-right: 0;
16426
+ padding: 0 !important;
16427
+ line-height: 1.4;
16428
+ overflow: hidden;
16429
+ text-overflow: ellipsis;
16430
+ white-space: nowrap;
16431
+ }
16432
+ .mint-resource-card__location {
16433
+ font-size: 0.75rem;
16434
+ color: var(--text-muted);
16435
+ margin-top: 0.25rem !important;
16436
+ margin-bottom: 0 !important;
16437
+ margin-left: 0;
16438
+ margin-right: 0;
16439
+ padding: 0 !important;
16440
+ }
16441
+
16442
+ /* Status indicator */
16443
+ .mint-resource-card__status {
16444
+ display: inline-flex;
16445
+ align-items: center;
16446
+ gap: 0.375rem;
16447
+ flex-shrink: 0;
16448
+ }
16449
+ .mint-resource-card__status-dot {
16450
+ width: 8px;
16451
+ height: 8px;
16452
+ border-radius: 50%;
16453
+ flex-shrink: 0;
16454
+ }
16455
+ .mint-resource-card__status-dot--available {
16456
+ background-color: var(--mint-success);
16457
+ color: var(--mint-success);
16458
+ }
16459
+ .mint-resource-card__status-dot--in-use {
16460
+ background-color: var(--color-primary);
16461
+ color: var(--color-primary);
16462
+ animation: mint-resource-pulse 2s ease-in-out infinite;
16463
+ }
16464
+ .mint-resource-card__status-dot--maintenance {
16465
+ background-color: var(--mint-warning);
16466
+ color: var(--mint-warning);
16467
+ }
16468
+ .mint-resource-card__status-dot--offline {
16469
+ background-color: var(--mint-error);
16470
+ color: var(--mint-error);
16471
+ }
16472
+ .mint-resource-card__status-label {
16473
+ font-size: 0.75rem;
16474
+ font-weight: 500;
16475
+ color: var(--text-secondary);
16476
+ }
16477
+
16478
+ /* Compact status: colored text only */
16479
+ .mint-resource-card--compact .mint-resource-card__status-label--available {
16480
+ color: var(--mint-success);
16481
+ }
16482
+ .mint-resource-card--compact .mint-resource-card__status-label--in-use {
16483
+ color: var(--color-primary);
16484
+ }
16485
+ .mint-resource-card--compact .mint-resource-card__status-label--maintenance {
16486
+ color: var(--mint-warning);
16487
+ }
16488
+ .mint-resource-card--compact .mint-resource-card__status-label--offline {
16489
+ color: var(--mint-error);
16490
+ }
16491
+ .mint-resource-card__next-available {
16492
+ font-size: 0.75rem;
16493
+ color: var(--text-muted);
16494
+ margin-top: 0.125rem !important;
16495
+ margin-bottom: 0 !important;
16496
+ margin-left: 0;
16497
+ margin-right: 0;
16498
+ padding: 0 !important;
16499
+ }
16500
+
16501
+ /* Specs grid */
16502
+ .mint-resource-card__specs {
16503
+ display: grid;
16504
+ grid-template-columns: repeat(2, 1fr);
16505
+ gap: 0.5rem 1rem;
16506
+ padding: 0.75rem 1rem;
16507
+ }
16508
+ .mint-resource-card--sm .mint-resource-card__specs {
16509
+ padding: 0.5rem 0.75rem;
16510
+ gap: 0.375rem 0.75rem;
16511
+ }
16512
+ .mint-resource-card--lg .mint-resource-card__specs {
16513
+ padding: 0.75rem 1.25rem;
16514
+ gap: 0.5rem 1.25rem;
16515
+ }
16516
+ .mint-resource-card__spec {
16517
+ display: flex;
16518
+ flex-direction: column;
16519
+ gap: 0.0625rem;
16520
+ }
16521
+ .mint-resource-card__spec-label {
16522
+ font-size: 0.6875rem;
16523
+ color: var(--text-muted);
16524
+ text-transform: uppercase;
16525
+ letter-spacing: 0.025em;
16526
+ }
16527
+ .mint-resource-card__spec-value {
16528
+ font-size: 0.8125rem;
16529
+ font-weight: 500;
16530
+ color: var(--text-primary);
16531
+ }
16532
+
16533
+ /* Footer (tags + action) */
16534
+ .mint-resource-card__footer {
16535
+ display: flex;
16536
+ align-items: center;
16537
+ justify-content: space-between;
16538
+ gap: 0.75rem;
16539
+ padding: 0.75rem 1rem;
16540
+ padding-top: 0;
16541
+ }
16542
+ .mint-resource-card--sm .mint-resource-card__footer {
16543
+ padding: 0.5rem 0.75rem;
16544
+ padding-top: 0;
16545
+ }
16546
+ .mint-resource-card--lg .mint-resource-card__footer {
16547
+ padding: 0.75rem 1.25rem;
16548
+ padding-top: 0;
16549
+ }
16550
+ .mint-resource-card__tags {
16551
+ display: flex;
16552
+ flex-wrap: wrap;
16553
+ gap: 0.375rem;
16554
+ flex: 1;
16555
+ min-width: 0;
16556
+ }
16557
+ .mint-resource-card__action {
16558
+ flex-shrink: 0;
16559
+ }
16560
+
16561
+ /* Book button */
16562
+ .mint-resource-card__book-btn {
16563
+ display: inline-flex;
16564
+ align-items: center;
16565
+ gap: 0.25rem;
16566
+ padding: 0.375rem 0.75rem;
16567
+ background-color: var(--color-primary);
16568
+ color: white;
16569
+ border: none;
16570
+ border-radius: var(--radius);
16571
+ font-size: 0.8125rem;
16572
+ font-weight: 500;
16573
+ cursor: pointer;
16574
+ transition: background-color 0.15s ease;
16575
+ font-family: inherit;
16576
+ white-space: nowrap;
16577
+ }
16578
+ .mint-resource-card__book-btn:hover {
16579
+ background-color: var(--color-primary-hover);
16580
+ }
16581
+
16582
+ /* Compact book button: ghost style */
16583
+ .mint-resource-card--compact .mint-resource-card__book-btn {
16584
+ background-color: transparent;
16585
+ color: var(--color-primary);
16586
+ font-size: 0.75rem;
16587
+ padding: 0.25rem 0.5rem;
16588
+ border-radius: var(--radius-sm);
16589
+ }
16590
+ .mint-resource-card--compact .mint-resource-card__book-btn:hover {
16591
+ background-color: rgba(59, 130, 246, 0.1);
16592
+ }
16593
+
16594
+ /* Compact layout overrides */
16595
+ .mint-resource-card--compact .mint-resource-card__name {
16596
+ font-size: 0.875rem;
16597
+ flex: 1;
16598
+ min-width: 0;
16599
+ }
16600
+
16601
+ /* Spacer between header and specs/footer */
16602
+ .mint-resource-card__content {
16603
+ display: flex;
16604
+ flex-direction: column;
16605
+ }
16606
+
16607
+ /* Pulse animation for in-use status */
16608
+ @keyframes mint-resource-pulse {
16609
+ 0%, 100% {
16610
+ box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
16611
+ }
16612
+ 50% {
16613
+ box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
16614
+ }
16615
+ }
16616
+
16617
+ /* Reduced motion */
16618
+ @media (prefers-reduced-motion: reduce) {
16619
+ .mint-resource-card__status-dot--in-use {
16620
+ animation: none;
16621
+ }
16622
+ }
16623
+ /* FitPanel Component Styles */
16624
+ .mint-fit-panel {
16625
+ display: flex;
16626
+ flex-direction: column;
16627
+ gap: 0.75rem;
16628
+ }
16629
+
16630
+ /* Action bar */
16631
+ .mint-fit-panel__actions {
16632
+ display: flex;
16633
+ gap: 0.5rem;
16634
+ }
16635
+
16636
+ /* Progress */
16637
+ .mint-fit-panel__progress {
16638
+ padding: 0.25rem 0;
16639
+ }
16640
+
16641
+ /* Result list */
16642
+ .mint-fit-panel__results {
16643
+ border: 1px solid var(--border-color);
16644
+ border-radius: var(--radius-sm);
16645
+ overflow: hidden;
16646
+ }
16647
+ .mint-fit-panel__result-list {
16648
+ display: flex;
16649
+ flex-direction: column;
16650
+ }
16651
+ .mint-fit-panel__result-row {
16652
+ display: flex;
16653
+ justify-content: space-between;
16654
+ align-items: center;
15197
16655
  padding: 0.5rem 0.75rem;
15198
16656
  border-bottom: 1px solid var(--border-color);
15199
16657
  }
@@ -17880,755 +19338,1163 @@ code, pre {
17880
19338
  .mint-timeline__icon--pending {
17881
19339
  color: var(--text-muted);
17882
19340
  }
17883
- .mint-timeline__icon--in-progress {
17884
- color: #3b82f6;
19341
+ .mint-timeline__icon--in-progress {
19342
+ color: #3b82f6;
19343
+ }
19344
+ .mint-timeline__icon--completed {
19345
+ color: #10b981;
19346
+ }
19347
+ .mint-timeline__icon--failed {
19348
+ color: #ef4444;
19349
+ }
19350
+ .mint-timeline__icon--skipped {
19351
+ color: var(--text-muted);
19352
+ }
19353
+ /* Title and meta */
19354
+ .mint-timeline__content {
19355
+ flex: 1;
19356
+ min-width: 0;
19357
+ }
19358
+ .mint-timeline__title-row {
19359
+ display: flex;
19360
+ align-items: center;
19361
+ gap: 0.5rem;
19362
+ }
19363
+ .mint-timeline__title {
19364
+ font-weight: 500;
19365
+ color: var(--text-primary);
19366
+ overflow: hidden;
19367
+ text-overflow: ellipsis;
19368
+ white-space: nowrap;
19369
+ }
19370
+ .mint-timeline__title--sm {
19371
+ font-size: 0.75rem;
19372
+ }
19373
+ .mint-timeline__title--md {
19374
+ font-size: 0.875rem;
19375
+ }
19376
+ .mint-timeline__title--lg {
19377
+ font-size: 1rem;
19378
+ }
19379
+ .mint-timeline__duration {
19380
+ color: var(--text-muted);
19381
+ font-size: 0.75rem;
19382
+ }
19383
+ .mint-timeline__duration--sm {
19384
+ font-size: 0.625rem;
19385
+ }
19386
+ .mint-timeline__type {
19387
+ color: var(--text-muted);
19388
+ text-transform: capitalize;
19389
+ }
19390
+ .mint-timeline__type--sm {
19391
+ font-size: 0.625rem;
19392
+ }
19393
+ .mint-timeline__type--md {
19394
+ font-size: 0.75rem;
19395
+ }
19396
+ .mint-timeline__type--lg {
19397
+ font-size: 0.75rem;
19398
+ }
19399
+ /* Expand indicator */
19400
+ .mint-timeline__expand-icon {
19401
+ width: 1rem;
19402
+ height: 1rem;
19403
+ color: var(--text-muted);
19404
+ transition: transform 0.2s ease;
19405
+ }
19406
+ .mint-timeline__expand-icon--expanded {
19407
+ transform: rotate(180deg);
19408
+ }
19409
+ /* Remove button */
19410
+ .mint-timeline__remove-btn {
19411
+ padding: 0.25rem;
19412
+ color: var(--text-muted);
19413
+ background: transparent;
19414
+ border: none;
19415
+ border-radius: var(--radius-sm);
19416
+ cursor: pointer;
19417
+ transition: color 0.15s ease;
19418
+ }
19419
+ .mint-timeline__remove-btn:hover {
19420
+ color: var(--mint-error);
19421
+ }
19422
+ .mint-timeline__remove-btn svg {
19423
+ width: 1rem;
19424
+ height: 1rem;
19425
+ }
19426
+ /* Expanded content */
19427
+ .mint-timeline__expanded {
19428
+ margin-top: 0.75rem;
19429
+ padding-top: 0.75rem;
19430
+ border-top: 1px solid rgba(var(--border-color-rgb, 0, 0, 0), 0.5);
19431
+ }
19432
+ .mint-timeline__description {
19433
+ color: var(--text-secondary);
19434
+ margin-top: 0 !important;
19435
+ margin-bottom: 0.5rem !important;
19436
+ padding: 0 !important;
19437
+ }
19438
+ .mint-timeline__description--sm {
19439
+ font-size: 0.75rem;
19440
+ }
19441
+ .mint-timeline__description--md {
19442
+ font-size: 0.875rem;
19443
+ }
19444
+ .mint-timeline__parameters {
19445
+ display: flex;
19446
+ flex-direction: column;
19447
+ gap: 0.25rem;
19448
+ }
19449
+ .mint-timeline__param {
19450
+ display: flex;
19451
+ justify-content: space-between;
19452
+ }
19453
+ .mint-timeline__param--sm {
19454
+ font-size: 0.625rem;
19455
+ }
19456
+ .mint-timeline__param--md {
19457
+ font-size: 0.75rem;
19458
+ }
19459
+ .mint-timeline__param-key {
19460
+ color: var(--text-muted);
19461
+ }
19462
+ .mint-timeline__param-value {
19463
+ color: var(--text-primary);
19464
+ font-weight: 500;
19465
+ }
19466
+ /* Status controls */
19467
+ .mint-timeline__status-controls {
19468
+ margin-top: 0.75rem;
19469
+ display: flex;
19470
+ flex-wrap: wrap;
19471
+ gap: 0.25rem;
19472
+ }
19473
+ .mint-timeline__status-btn {
19474
+ padding: 0.125rem 0.5rem;
19475
+ border-radius: var(--radius-sm);
19476
+ font-size: 0.75rem;
19477
+ background: transparent;
19478
+ border: none;
19479
+ cursor: pointer;
19480
+ transition: background-color 0.15s ease, color 0.15s ease;
19481
+ color: var(--text-muted);
19482
+ }
19483
+ .mint-timeline__status-btn:hover {
19484
+ background-color: var(--bg-tertiary);
19485
+ }
19486
+ .mint-timeline__status-btn--active {
19487
+ font-weight: 500;
19488
+ }
19489
+ .mint-timeline__status-btn--pending.mint-timeline__status-btn--active {
19490
+ background-color: var(--bg-tertiary);
19491
+ color: var(--text-secondary);
19492
+ }
19493
+ .mint-timeline__status-btn--in-progress.mint-timeline__status-btn--active {
19494
+ background-color: rgba(59, 130, 246, 0.1);
19495
+ color: #3b82f6;
19496
+ }
19497
+ .mint-timeline__status-btn--completed.mint-timeline__status-btn--active {
19498
+ background-color: rgba(16, 185, 129, 0.1);
19499
+ color: #10b981;
19500
+ }
19501
+ .mint-timeline__status-btn--failed.mint-timeline__status-btn--active {
19502
+ background-color: rgba(239, 68, 68, 0.1);
19503
+ color: #ef4444;
19504
+ }
19505
+ .mint-timeline__status-btn--skipped.mint-timeline__status-btn--active {
19506
+ background-color: var(--bg-tertiary);
19507
+ color: var(--text-muted);
19508
+ }
19509
+ /* Add step button (inline) */
19510
+ .mint-timeline__add-inline {
19511
+ position: absolute;
19512
+ left: 1rem;
19513
+ bottom: -0.5rem;
19514
+ transform: translateX(-50%);
19515
+ width: 1rem;
19516
+ height: 1rem;
19517
+ background-color: var(--bg-primary);
19518
+ border: 1px solid var(--border-color);
19519
+ border-radius: 9999px;
19520
+ display: flex;
19521
+ align-items: center;
19522
+ justify-content: center;
19523
+ color: var(--text-muted);
19524
+ cursor: pointer;
19525
+ opacity: 0;
19526
+ transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
19527
+ z-index: 10;
19528
+ }
19529
+ .mint-timeline__step:hover .mint-timeline__add-inline,
19530
+ .mint-timeline__add-inline:focus-visible {
19531
+ opacity: 1;
19532
+ }
19533
+ .mint-timeline__add-inline:hover {
19534
+ color: var(--color-primary);
19535
+ border-color: var(--color-primary);
19536
+ }
19537
+ .mint-timeline__add-inline svg {
19538
+ width: 0.75rem;
19539
+ height: 0.75rem;
19540
+ }
19541
+ /* Spacer */
19542
+ .mint-timeline__spacer--vertical {
19543
+ height: 1rem;
19544
+ }
19545
+ .mint-timeline__spacer--horizontal {
19546
+ width: 2rem;
19547
+ }
19548
+ /* Empty state */
19549
+ .mint-timeline__empty {
19550
+ display: flex;
19551
+ align-items: center;
19552
+ justify-content: center;
19553
+ padding: 2rem;
19554
+ border: 2px dashed var(--border-color);
19555
+ border-radius: var(--radius-md);
19556
+ }
19557
+ .mint-timeline__empty-content {
19558
+ text-align: center;
19559
+ }
19560
+ .mint-timeline__empty-text {
19561
+ color: var(--text-muted);
19562
+ margin-top: 0 !important;
19563
+ margin-bottom: 0.5rem !important;
19564
+ padding: 0 !important;
19565
+ }
19566
+ .mint-timeline__empty-btn {
19567
+ padding: 0.375rem 0.75rem;
19568
+ font-size: 0.875rem;
19569
+ background-color: var(--color-primary);
19570
+ color: white;
19571
+ border: none;
19572
+ border-radius: var(--radius-md);
19573
+ cursor: pointer;
19574
+ transition: background-color 0.15s ease;
19575
+ }
19576
+ .mint-timeline__empty-btn:hover {
19577
+ opacity: 0.9;
19578
+ }
19579
+ /* Add step button (end) */
19580
+ .mint-timeline__add-end {
19581
+ display: flex;
19582
+ align-items: center;
19583
+ justify-content: center;
19584
+ gap: 0.5rem;
19585
+ border: 2px dashed var(--border-color);
19586
+ border-radius: var(--radius-md);
19587
+ color: var(--text-muted);
19588
+ background: transparent;
19589
+ cursor: pointer;
19590
+ transition: color 0.15s ease, border-color 0.15s ease;
19591
+ }
19592
+ .mint-timeline__add-end--sm {
19593
+ padding: 0.5rem;
17885
19594
  }
17886
- .mint-timeline__icon--completed {
17887
- color: #10b981;
19595
+ .mint-timeline__add-end--md {
19596
+ padding: 0.75rem;
17888
19597
  }
17889
- .mint-timeline__icon--failed {
17890
- color: #ef4444;
19598
+ .mint-timeline__add-end--lg {
19599
+ padding: 1rem;
17891
19600
  }
17892
- .mint-timeline__icon--skipped {
17893
- color: var(--text-muted);
19601
+ .mint-timeline--horizontal .mint-timeline__add-end {
19602
+ min-width: 120px;
19603
+ flex-shrink: 0;
17894
19604
  }
17895
- /* Title and meta */
17896
- .mint-timeline__content {
17897
- flex: 1;
17898
- min-width: 0;
19605
+ .mint-timeline--vertical .mint-timeline__add-end {
19606
+ width: 100%;
19607
+ margin-top: 1rem;
17899
19608
  }
17900
- .mint-timeline__title-row {
17901
- display: flex;
17902
- align-items: center;
17903
- gap: 0.5rem;
19609
+ .mint-timeline__add-end:hover {
19610
+ color: var(--color-primary);
19611
+ border-color: var(--color-primary);
17904
19612
  }
17905
- .mint-timeline__title {
17906
- font-weight: 500;
17907
- color: var(--text-primary);
17908
- overflow: hidden;
17909
- text-overflow: ellipsis;
17910
- white-space: nowrap;
19613
+ .mint-timeline__add-end svg {
19614
+ width: 1rem;
19615
+ height: 1rem;
17911
19616
  }
17912
- .mint-timeline__title--sm {
19617
+ .mint-timeline__add-end-text--sm {
17913
19618
  font-size: 0.75rem;
17914
19619
  }
17915
- .mint-timeline__title--md {
19620
+ .mint-timeline__add-end-text--md {
17916
19621
  font-size: 0.875rem;
17917
19622
  }
17918
- .mint-timeline__title--lg {
19623
+ .mint-timeline__add-end-text--lg {
17919
19624
  font-size: 1rem;
17920
19625
  }
17921
- .mint-timeline__duration {
17922
- color: var(--text-muted);
17923
- font-size: 0.75rem;
19626
+ /* ==========================================================================
19627
+ FileUploader Component Styles
19628
+ ========================================================================== */
19629
+ .mint-file-uploader {
19630
+ display: flex;
19631
+ flex-direction: column;
19632
+ gap: 0.75rem;
17924
19633
  }
17925
- .mint-timeline__duration--sm {
17926
- font-size: 0.625rem;
19634
+ /* ==========================================================================
19635
+ Dropzone
19636
+ ========================================================================== */
19637
+ .mint-file-uploader__dropzone {
19638
+ position: relative;
19639
+ border: 2px dashed var(--border-color);
19640
+ border-radius: var(--radius-lg);
19641
+ cursor: pointer;
19642
+ background: var(--bg-secondary);
19643
+ transition: border-color 0.15s ease, background-color 0.15s ease;
17927
19644
  }
17928
- .mint-timeline__type {
17929
- color: var(--text-muted);
17930
- text-transform: capitalize;
19645
+ .mint-file-uploader__dropzone:hover {
19646
+ border-color: var(--color-primary);
19647
+ background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
17931
19648
  }
17932
- .mint-timeline__type--sm {
17933
- font-size: 0.625rem;
19649
+ .mint-file-uploader__dropzone:focus-visible {
19650
+ outline: 2px solid var(--color-primary);
19651
+ outline-offset: 2px;
17934
19652
  }
17935
- .mint-timeline__type--md {
17936
- font-size: 0.75rem;
19653
+ .mint-file-uploader__dropzone--dragover {
19654
+ border-color: var(--color-primary);
19655
+ background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
17937
19656
  }
17938
- .mint-timeline__type--lg {
17939
- font-size: 0.75rem;
19657
+ .mint-file-uploader__dropzone--disabled {
19658
+ opacity: var(--mint-disabled-opacity);
19659
+ cursor: not-allowed;
17940
19660
  }
17941
- /* Expand indicator */
17942
- .mint-timeline__expand-icon {
17943
- width: 1rem;
17944
- height: 1rem;
17945
- color: var(--text-muted);
17946
- transition: transform 0.2s ease;
19661
+ .mint-file-uploader__dropzone--sm {
19662
+ padding: 1.25rem;
17947
19663
  }
17948
- .mint-timeline__expand-icon--expanded {
17949
- transform: rotate(180deg);
19664
+ .mint-file-uploader__dropzone--md {
19665
+ padding: 1.5rem;
17950
19666
  }
17951
- /* Remove button */
17952
- .mint-timeline__remove-btn {
17953
- padding: 0.25rem;
17954
- color: var(--text-muted);
17955
- background: transparent;
17956
- border: none;
17957
- border-radius: var(--radius-sm);
17958
- cursor: pointer;
17959
- transition: color 0.15s ease;
19667
+ .mint-file-uploader__dropzone--lg {
19668
+ padding: 2rem;
17960
19669
  }
17961
- .mint-timeline__remove-btn:hover {
17962
- color: var(--mint-error);
19670
+ /* ==========================================================================
19671
+ Content area
19672
+ ========================================================================== */
19673
+ .mint-file-uploader__content {
19674
+ display: flex;
19675
+ flex-direction: column;
19676
+ align-items: center;
19677
+ text-align: center;
17963
19678
  }
17964
- .mint-timeline__remove-btn svg {
17965
- width: 1rem;
17966
- height: 1rem;
19679
+ .mint-file-uploader__input {
19680
+ display: none;
17967
19681
  }
17968
- /* Expanded content */
17969
- .mint-timeline__expanded {
17970
- margin-top: 0.75rem;
17971
- padding-top: 0.75rem;
17972
- border-top: 1px solid rgba(var(--border-color-rgb, 0, 0, 0), 0.5);
19682
+ .mint-file-uploader__icon {
19683
+ width: 2rem;
19684
+ height: 2rem;
19685
+ color: var(--text-muted);
19686
+ margin-bottom: 0.5rem;
17973
19687
  }
17974
- .mint-timeline__description {
17975
- color: var(--text-secondary);
17976
- margin-top: 0 !important;
17977
- margin-bottom: 0.5rem !important;
17978
- padding: 0 !important;
19688
+ .mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
19689
+ .mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
19690
+ color: var(--color-primary);
17979
19691
  }
17980
- .mint-timeline__description--sm {
17981
- font-size: 0.75rem;
19692
+ .mint-file-uploader__text {
19693
+ color: var(--text-secondary);
19694
+ font-size: 0.8125rem;
19695
+ font-weight: 500;
19696
+ margin: 0;
19697
+ padding: 0;
17982
19698
  }
17983
- .mint-timeline__description--md {
17984
- font-size: 0.875rem;
19699
+ /* ==========================================================================
19700
+ Actions slot
19701
+ ========================================================================== */
19702
+ .mint-file-uploader__actions {
19703
+ display: flex;
19704
+ gap: 0.5rem;
17985
19705
  }
17986
- .mint-timeline__parameters {
19706
+ /* ==========================================================================
19707
+ File list with transitions
19708
+ ========================================================================== */
19709
+ .mint-file-uploader__list {
17987
19710
  display: flex;
17988
19711
  flex-direction: column;
17989
- gap: 0.25rem;
19712
+ gap: 0.375rem;
19713
+ list-style: none;
19714
+ margin: 0;
19715
+ padding: 0;
17990
19716
  }
17991
- .mint-timeline__param {
17992
- display: flex;
17993
- justify-content: space-between;
19717
+ .mint-file-uploader-item-enter-active {
19718
+ transition: all 0.2s ease-out;
17994
19719
  }
17995
- .mint-timeline__param--sm {
17996
- font-size: 0.625rem;
19720
+ .mint-file-uploader-item-leave-active {
19721
+ transition: all 0.15s ease-in;
17997
19722
  }
17998
- .mint-timeline__param--md {
17999
- font-size: 0.75rem;
19723
+ .mint-file-uploader-item-enter-from {
19724
+ opacity: 0;
19725
+ transform: translateX(-8px);
18000
19726
  }
18001
- .mint-timeline__param-key {
18002
- color: var(--text-muted);
19727
+ .mint-file-uploader-item-leave-to {
19728
+ opacity: 0;
19729
+ transform: translateX(8px);
18003
19730
  }
18004
- .mint-timeline__param-value {
18005
- color: var(--text-primary);
18006
- font-weight: 500;
19731
+ .mint-file-uploader-item-move {
19732
+ transition: transform 0.2s ease-out;
18007
19733
  }
18008
- /* Status controls */
18009
- .mint-timeline__status-controls {
18010
- margin-top: 0.75rem;
19734
+ /* File row */
19735
+ .mint-file-uploader__file {
18011
19736
  display: flex;
18012
- flex-wrap: wrap;
18013
- gap: 0.25rem;
18014
- }
18015
- .mint-timeline__status-btn {
18016
- padding: 0.125rem 0.5rem;
18017
- border-radius: var(--radius-sm);
18018
- font-size: 0.75rem;
18019
- background: transparent;
18020
- border: none;
18021
- cursor: pointer;
18022
- transition: background-color 0.15s ease, color 0.15s ease;
18023
- color: var(--text-muted);
18024
- }
18025
- .mint-timeline__status-btn:hover {
18026
- background-color: var(--bg-tertiary);
19737
+ align-items: center;
19738
+ justify-content: space-between;
19739
+ gap: 0.5rem;
19740
+ padding: 0.5rem 0.625rem;
19741
+ border-radius: var(--radius-md);
19742
+ background-color: var(--bg-secondary);
19743
+ border: 1px solid var(--border-color);
19744
+ transition: border-color 0.15s ease;
18027
19745
  }
18028
- .mint-timeline__status-btn--active {
18029
- font-weight: 500;
19746
+ .mint-file-uploader__file:hover {
19747
+ border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
18030
19748
  }
18031
- .mint-timeline__status-btn--pending.mint-timeline__status-btn--active {
18032
- background-color: var(--bg-tertiary);
18033
- color: var(--text-secondary);
19749
+ .mint-file-uploader__file-info {
19750
+ display: flex;
19751
+ align-items: center;
19752
+ gap: 0.625rem;
19753
+ min-width: 0;
19754
+ flex: 1;
18034
19755
  }
18035
- .mint-timeline__status-btn--in-progress.mint-timeline__status-btn--active {
18036
- background-color: rgba(59, 130, 246, 0.1);
18037
- color: #3b82f6;
19756
+ /* File type badge */
19757
+ .mint-file-uploader__file-badge {
19758
+ display: inline-flex;
19759
+ align-items: center;
19760
+ justify-content: center;
19761
+ flex-shrink: 0;
19762
+ min-width: 2.75rem;
19763
+ padding: 0.1875rem 0.5rem;
19764
+ border-radius: var(--radius-sm);
19765
+ font-size: 0.625rem;
19766
+ font-weight: 700;
19767
+ font-family: 'Fira Code', monospace;
19768
+ letter-spacing: 0.025em;
19769
+ text-transform: uppercase;
19770
+ color: var(--badge-color);
19771
+ background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
19772
+ border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
18038
19773
  }
18039
- .mint-timeline__status-btn--completed.mint-timeline__status-btn--active {
18040
- background-color: rgba(16, 185, 129, 0.1);
18041
- color: #10b981;
19774
+ .mint-file-uploader__file-meta {
19775
+ display: flex;
19776
+ flex-direction: column;
19777
+ gap: 0.0625rem;
19778
+ min-width: 0;
18042
19779
  }
18043
- .mint-timeline__status-btn--failed.mint-timeline__status-btn--active {
18044
- background-color: rgba(239, 68, 68, 0.1);
18045
- color: #ef4444;
19780
+ .mint-file-uploader__file-name {
19781
+ font-size: 0.8125rem;
19782
+ font-weight: 500;
19783
+ color: var(--text-primary);
19784
+ white-space: nowrap;
19785
+ overflow: hidden;
19786
+ text-overflow: ellipsis;
18046
19787
  }
18047
- .mint-timeline__status-btn--skipped.mint-timeline__status-btn--active {
18048
- background-color: var(--bg-tertiary);
19788
+ .mint-file-uploader__file-size {
19789
+ font-size: 0.6875rem;
18049
19790
  color: var(--text-muted);
19791
+ font-family: 'Fira Code', monospace;
18050
19792
  }
18051
- /* Add step button (inline) */
18052
- .mint-timeline__add-inline {
18053
- position: absolute;
18054
- left: 1rem;
18055
- bottom: -0.5rem;
18056
- transform: translateX(-50%);
18057
- width: 1rem;
18058
- height: 1rem;
18059
- background-color: var(--bg-primary);
18060
- border: 1px solid var(--border-color);
18061
- border-radius: 9999px;
19793
+ /* ==========================================================================
19794
+ Remove button (shared between file rows and folder summary)
19795
+ ========================================================================== */
19796
+ .mint-file-uploader__remove-btn {
18062
19797
  display: flex;
18063
19798
  align-items: center;
18064
19799
  justify-content: center;
19800
+ flex-shrink: 0;
19801
+ width: 1.75rem;
19802
+ height: 1.75rem;
19803
+ padding: 0;
19804
+ border-radius: var(--radius-sm);
18065
19805
  color: var(--text-muted);
19806
+ background: transparent;
19807
+ border: none;
18066
19808
  cursor: pointer;
18067
- opacity: 0;
18068
- transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
18069
- z-index: 10;
18070
- }
18071
- .mint-timeline__step:hover .mint-timeline__add-inline,
18072
- .mint-timeline__add-inline:focus-visible {
18073
- opacity: 1;
18074
- }
18075
- .mint-timeline__add-inline:hover {
18076
- color: var(--color-primary);
18077
- border-color: var(--color-primary);
18078
- }
18079
- .mint-timeline__add-inline svg {
18080
- width: 0.75rem;
18081
- height: 0.75rem;
19809
+ transition: color 0.15s ease, background-color 0.15s ease;
18082
19810
  }
18083
- /* Spacer */
18084
- .mint-timeline__spacer--vertical {
18085
- height: 1rem;
19811
+ .mint-file-uploader__remove-btn:hover {
19812
+ color: var(--mint-error);
19813
+ background-color: var(--mint-error-bg);
18086
19814
  }
18087
- .mint-timeline__spacer--horizontal {
18088
- width: 2rem;
19815
+ .mint-file-uploader__remove-icon {
19816
+ width: 0.875rem;
19817
+ height: 0.875rem;
18089
19818
  }
18090
- /* Empty state */
18091
- .mint-timeline__empty {
19819
+ /* ==========================================================================
19820
+ Folder summary
19821
+ ========================================================================== */
19822
+ .mint-file-uploader__folder-summary {
18092
19823
  display: flex;
18093
19824
  align-items: center;
18094
- justify-content: center;
18095
- padding: 2rem;
18096
- border: 2px dashed var(--border-color);
19825
+ justify-content: space-between;
19826
+ padding: 0.75rem;
18097
19827
  border-radius: var(--radius-md);
19828
+ background-color: var(--bg-secondary);
19829
+ border: 1px solid var(--border-color);
19830
+ transition: border-color 0.15s ease;
18098
19831
  }
18099
- .mint-timeline__empty-content {
18100
- text-align: center;
18101
- }
18102
- .mint-timeline__empty-text {
18103
- color: var(--text-muted);
18104
- margin-top: 0 !important;
18105
- margin-bottom: 0.5rem !important;
18106
- padding: 0 !important;
18107
- }
18108
- .mint-timeline__empty-btn {
18109
- padding: 0.375rem 0.75rem;
18110
- font-size: 0.875rem;
18111
- background-color: var(--color-primary);
18112
- color: white;
18113
- border: none;
18114
- border-radius: var(--radius-md);
18115
- cursor: pointer;
18116
- transition: background-color 0.15s ease;
19832
+ .mint-file-uploader__folder-summary:hover {
19833
+ border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
18117
19834
  }
18118
- .mint-timeline__empty-btn:hover {
18119
- opacity: 0.9;
19835
+ .mint-file-uploader__folder-info {
19836
+ display: flex;
19837
+ align-items: center;
19838
+ gap: 0.75rem;
19839
+ min-width: 0;
18120
19840
  }
18121
- /* Add step button (end) */
18122
- .mint-timeline__add-end {
19841
+ .mint-file-uploader__folder-icon-wrapper {
18123
19842
  display: flex;
18124
19843
  align-items: center;
18125
19844
  justify-content: center;
18126
- gap: 0.5rem;
18127
- border: 2px dashed var(--border-color);
18128
- border-radius: var(--radius-md);
18129
- color: var(--text-muted);
18130
- background: transparent;
18131
- cursor: pointer;
18132
- transition: color 0.15s ease, border-color 0.15s ease;
18133
- }
18134
- .mint-timeline__add-end--sm {
18135
- padding: 0.5rem;
18136
- }
18137
- .mint-timeline__add-end--md {
18138
- padding: 0.75rem;
18139
- }
18140
- .mint-timeline__add-end--lg {
18141
- padding: 1rem;
18142
- }
18143
- .mint-timeline--horizontal .mint-timeline__add-end {
18144
- min-width: 120px;
19845
+ width: 2.25rem;
19846
+ height: 2.25rem;
18145
19847
  flex-shrink: 0;
19848
+ border-radius: var(--radius-sm);
19849
+ background: color-mix(in srgb, var(--color-primary) 8%, transparent);
18146
19850
  }
18147
- .mint-timeline--vertical .mint-timeline__add-end {
18148
- width: 100%;
18149
- margin-top: 1rem;
18150
- }
18151
- .mint-timeline__add-end:hover {
19851
+ .mint-file-uploader__folder-icon {
19852
+ width: 1.25rem;
19853
+ height: 1.25rem;
18152
19854
  color: var(--color-primary);
18153
- border-color: var(--color-primary);
18154
- }
18155
- .mint-timeline__add-end svg {
18156
- width: 1rem;
18157
- height: 1rem;
18158
19855
  }
18159
- .mint-timeline__add-end-text--sm {
18160
- font-size: 0.75rem;
19856
+ .mint-file-uploader__folder-details {
19857
+ display: flex;
19858
+ flex-direction: column;
19859
+ gap: 0.125rem;
19860
+ min-width: 0;
18161
19861
  }
18162
- .mint-timeline__add-end-text--md {
18163
- font-size: 0.875rem;
19862
+ .mint-file-uploader__folder-name {
19863
+ font-size: 0.8125rem;
19864
+ font-weight: 600;
19865
+ color: var(--text-primary);
19866
+ white-space: nowrap;
19867
+ overflow: hidden;
19868
+ text-overflow: ellipsis;
18164
19869
  }
18165
- .mint-timeline__add-end-text--lg {
18166
- font-size: 1rem;
19870
+ .mint-file-uploader__folder-count {
19871
+ font-size: 0.6875rem;
19872
+ color: var(--text-muted);
19873
+ font-family: 'Fira Code', monospace;
18167
19874
  }
18168
19875
  /* ==========================================================================
18169
- FileUploader Component Styles
19876
+ Reduced motion
18170
19877
  ========================================================================== */
18171
- .mint-file-uploader {
19878
+ @media (prefers-reduced-motion: reduce) {
19879
+ .mint-file-uploader__dropzone {
19880
+ transition: none;
19881
+ }
19882
+
19883
+ .mint-file-uploader-item-enter-active,
19884
+ .mint-file-uploader-item-leave-active,
19885
+ .mint-file-uploader-item-move {
19886
+ transition: none;
19887
+ }
19888
+ }
19889
+ /* FormField Component Styles */
19890
+ .mint-form-field {
18172
19891
  display: flex;
18173
19892
  flex-direction: column;
18174
- gap: 0.75rem;
19893
+ gap: 0.375rem;
18175
19894
  }
18176
- /* ==========================================================================
18177
- Dropzone
18178
- ========================================================================== */
18179
- .mint-file-uploader__dropzone {
18180
- position: relative;
18181
- border: 2px dashed var(--border-color);
18182
- border-radius: var(--radius-lg);
19895
+ .mint-form-field__label-row {
19896
+ display: flex;
19897
+ align-items: baseline;
19898
+ justify-content: space-between;
19899
+ }
19900
+ .mint-form-field__label {
19901
+ display: block;
19902
+ font-size: 0.6875rem;
19903
+ font-weight: 600;
19904
+ text-transform: uppercase;
19905
+ letter-spacing: 0.05em;
19906
+ color: var(--text-secondary);
19907
+ }
19908
+ .mint-form-field__required {
19909
+ color: var(--mint-error);
19910
+ margin-left: 0.125rem;
19911
+ }
19912
+ .mint-form-field__optional {
19913
+ font-size: 0.6875rem;
19914
+ font-weight: 500;
19915
+ color: var(--text-muted);
19916
+ font-style: italic;
19917
+ letter-spacing: 0;
19918
+ text-transform: none;
19919
+ }
19920
+ .mint-form-field__error {
19921
+ font-size: 0.8125rem;
19922
+ color: var(--mint-error);
19923
+ margin: 0 !important;
19924
+ }
19925
+ .mint-form-field__hint {
19926
+ font-size: 0.8125rem;
19927
+ color: var(--text-muted);
19928
+ margin: 0 !important;
19929
+ }
19930
+ /* IconButton Component Styles */
19931
+ .mint-icon-button {
19932
+ display: inline-flex;
19933
+ align-items: center;
19934
+ justify-content: center;
19935
+ border-radius: var(--radius-md);
19936
+ /* Mirrors BaseButton's tactile-physicality system: gradient overlay on filled
19937
+ variants (see rule below), hover lift, press-to-flat. See also button.css. */
19938
+ transition:
19939
+ color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
19940
+ background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
19941
+ border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
19942
+ box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
19943
+ transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
19944
+ background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
18183
19945
  cursor: pointer;
18184
- background: var(--bg-secondary);
18185
- transition: border-color 0.15s ease, background-color 0.15s ease;
19946
+ border: none;
19947
+ box-sizing: border-box;
19948
+ transform: translateY(0);
19949
+ }
19950
+ .mint-icon-button:hover:not(.mint-icon-button--disabled) {
19951
+ transform: translateY(-1px);
18186
19952
  }
18187
- .mint-file-uploader__dropzone:hover {
18188
- border-color: var(--color-primary);
18189
- background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
19953
+ .mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost) {
19954
+ box-shadow: var(--shadow-sm);
18190
19955
  }
18191
- .mint-file-uploader__dropzone:focus-visible {
18192
- outline: 2px solid var(--color-primary);
18193
- outline-offset: 2px;
19956
+ .mint-icon-button:active:not(.mint-icon-button--disabled) {
19957
+ transform: translateY(0);
19958
+ box-shadow: none;
19959
+ background-image: none;
19960
+ transition-duration: 0.05s;
18194
19961
  }
18195
- .mint-file-uploader__dropzone--dragover {
18196
- border-color: var(--color-primary);
18197
- background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
19962
+ .mint-icon-button:focus-visible {
19963
+ outline: none;
19964
+ box-shadow: var(--focus-ring);
18198
19965
  }
18199
- .mint-file-uploader__dropzone--disabled {
19966
+ .mint-icon-button--disabled {
18200
19967
  opacity: var(--mint-disabled-opacity);
18201
19968
  cursor: not-allowed;
18202
19969
  }
18203
- .mint-file-uploader__dropzone--sm {
18204
- padding: 1.25rem;
19970
+ /* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
19971
+ .mint-icon-button--primary.mint-icon-button--disabled,
19972
+ .mint-icon-button--cta.mint-icon-button--disabled,
19973
+ .mint-icon-button--danger.mint-icon-button--disabled,
19974
+ .mint-icon-button--success.mint-icon-button--disabled {
19975
+ background-color: var(--bg-tertiary);
19976
+ background-image: none;
19977
+ color: var(--text-muted);
18205
19978
  }
18206
- .mint-file-uploader__dropzone--md {
18207
- padding: 1.5rem;
19979
+ /* Subtle top-to-bottom highlight on filled variants — catch of light. */
19980
+ .mint-icon-button--primary,
19981
+ .mint-icon-button--cta,
19982
+ .mint-icon-button--danger,
19983
+ .mint-icon-button--success {
19984
+ background-image: linear-gradient(
19985
+ to bottom,
19986
+ rgba(255, 255, 255, 0.12),
19987
+ rgba(255, 255, 255, 0)
19988
+ );
18208
19989
  }
18209
- .mint-file-uploader__dropzone--lg {
18210
- padding: 2rem;
19990
+ /* Variants */
19991
+ .mint-icon-button--primary {
19992
+ background-color: var(--color-primary);
19993
+ color: white;
18211
19994
  }
18212
- /* ==========================================================================
18213
- Content area
18214
- ========================================================================== */
18215
- .mint-file-uploader__content {
18216
- display: flex;
18217
- flex-direction: column;
18218
- align-items: center;
18219
- text-align: center;
19995
+ .mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
19996
+ background-color: var(--color-primary-hover);
18220
19997
  }
18221
- .mint-file-uploader__input {
18222
- display: none;
19998
+ .mint-icon-button--secondary {
19999
+ background-color: var(--bg-secondary);
20000
+ color: var(--text-primary);
20001
+ border: 1px solid var(--border-color);
18223
20002
  }
18224
- .mint-file-uploader__icon {
18225
- width: 2rem;
18226
- height: 2rem;
18227
- color: var(--text-muted);
18228
- margin-bottom: 0.5rem;
20003
+ .mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
20004
+ background-color: var(--bg-tertiary);
18229
20005
  }
18230
- .mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
18231
- .mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
18232
- color: var(--color-primary);
20006
+ .mint-icon-button--cta {
20007
+ background-color: var(--color-cta);
20008
+ color: white;
18233
20009
  }
18234
- .mint-file-uploader__text {
18235
- color: var(--text-secondary);
18236
- font-size: 0.8125rem;
18237
- font-weight: 500;
18238
- margin: 0;
18239
- padding: 0;
20010
+ .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
20011
+ background-color: var(--color-cta-hover);
18240
20012
  }
18241
- /* ==========================================================================
18242
- Actions slot
18243
- ========================================================================== */
18244
- .mint-file-uploader__actions {
18245
- display: flex;
18246
- gap: 0.5rem;
20013
+ .mint-icon-button--danger {
20014
+ background-color: var(--mint-error);
20015
+ color: white;
18247
20016
  }
18248
- /* ==========================================================================
18249
- File list with transitions
18250
- ========================================================================== */
18251
- .mint-file-uploader__list {
18252
- display: flex;
18253
- flex-direction: column;
18254
- gap: 0.375rem;
18255
- list-style: none;
18256
- margin: 0;
18257
- padding: 0;
20017
+ .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
20018
+ background-color: var(--mint-error-hover);
18258
20019
  }
18259
- .mint-file-uploader-item-enter-active {
18260
- transition: all 0.2s ease-out;
20020
+ .mint-icon-button--success {
20021
+ background-color: var(--mint-success);
20022
+ color: white;
18261
20023
  }
18262
- .mint-file-uploader-item-leave-active {
18263
- transition: all 0.15s ease-in;
20024
+ .mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
20025
+ background-color: var(--mint-success-hover);
18264
20026
  }
18265
- .mint-file-uploader-item-enter-from {
18266
- opacity: 0;
18267
- transform: translateX(-8px);
20027
+ .mint-icon-button--ghost {
20028
+ background-color: transparent;
20029
+ color: var(--text-secondary);
18268
20030
  }
18269
- .mint-file-uploader-item-leave-to {
18270
- opacity: 0;
18271
- transform: translateX(8px);
20031
+ .mint-icon-button--ghost:hover:not(.mint-icon-button--disabled) {
20032
+ background-color: var(--bg-tertiary);
20033
+ color: var(--text-primary);
18272
20034
  }
18273
- .mint-file-uploader-item-move {
18274
- transition: transform 0.2s ease-out;
20035
+ /* Sizes */
20036
+ .mint-icon-button--sm {
20037
+ padding: 0.375rem;
20038
+ min-height: var(--form-height-sm);
18275
20039
  }
18276
- /* File row */
18277
- .mint-file-uploader__file {
18278
- display: flex;
18279
- align-items: center;
18280
- justify-content: space-between;
18281
- gap: 0.5rem;
18282
- padding: 0.5rem 0.625rem;
18283
- border-radius: var(--radius-md);
18284
- background-color: var(--bg-secondary);
18285
- border: 1px solid var(--border-color);
18286
- transition: border-color 0.15s ease;
20040
+ .mint-icon-button--md {
20041
+ padding: 0.5rem;
20042
+ min-height: var(--form-height-md);
18287
20043
  }
18288
- .mint-file-uploader__file:hover {
18289
- border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
20044
+ .mint-icon-button--lg {
20045
+ padding: 0.75rem;
20046
+ min-height: var(--form-height-lg);
18290
20047
  }
18291
- .mint-file-uploader__file-info {
18292
- display: flex;
20048
+ .mint-icon-button__icon--sm,
20049
+ .mint-icon-button__icon--md,
20050
+ .mint-icon-button__icon--lg {
20051
+ display: inline-flex;
18293
20052
  align-items: center;
18294
- gap: 0.625rem;
18295
- min-width: 0;
18296
- flex: 1;
20053
+ justify-content: center;
18297
20054
  }
18298
- /* File type badge */
18299
- .mint-file-uploader__file-badge {
20055
+ .mint-icon-button__icon--sm {
20056
+ width: 1rem;
20057
+ height: 1rem;
20058
+ }
20059
+ .mint-icon-button__icon--md {
20060
+ width: 1.25rem;
20061
+ height: 1.25rem;
20062
+ }
20063
+ .mint-icon-button__icon--lg {
20064
+ width: 1.5rem;
20065
+ height: 1.5rem;
20066
+ }
20067
+ /* Spinner */
20068
+ .mint-icon-button__spinner {
20069
+ animation: mint-spin 1s linear infinite;
20070
+ }
20071
+ @keyframes mint-spin {
20072
+ from {
20073
+ transform: rotate(0deg);
20074
+ }
20075
+ to {
20076
+ transform: rotate(360deg);
20077
+ }
20078
+ }
20079
+ @media (prefers-reduced-motion: reduce) {
20080
+ .mint-icon-button {
20081
+ transition:
20082
+ color 0.15s ease,
20083
+ background-color 0.15s ease,
20084
+ border-color 0.15s ease,
20085
+ box-shadow 0.15s ease;
20086
+ }
20087
+ .mint-icon-button:hover:not(.mint-icon-button--disabled),
20088
+ .mint-icon-button:active:not(.mint-icon-button--disabled) {
20089
+ transform: none;
20090
+ }
20091
+ }
20092
+ .mint-instrument-state {
18300
20093
  display: inline-flex;
18301
20094
  align-items: center;
18302
- justify-content: center;
18303
- flex-shrink: 0;
18304
- min-width: 2.75rem;
18305
- padding: 0.1875rem 0.5rem;
18306
- border-radius: var(--radius-sm);
18307
- font-size: 0.625rem;
20095
+ gap: 0.3125rem;
20096
+ border-radius: 999px;
20097
+ font-size: 0.6875rem;
18308
20098
  font-weight: 700;
18309
- font-family: 'Fira Code', monospace;
18310
- letter-spacing: 0.025em;
18311
- text-transform: uppercase;
18312
- color: var(--badge-color);
18313
- background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
18314
- border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
20099
+ letter-spacing: 0.04em;
20100
+ line-height: 1.35;
20101
+ padding: 0.125rem 0.625rem;
20102
+ white-space: nowrap;
18315
20103
  }
18316
- .mint-file-uploader__file-meta {
18317
- display: flex;
18318
- flex-direction: column;
18319
- gap: 0.0625rem;
18320
- min-width: 0;
20104
+ .mint-instrument-state--success {
20105
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 12%, transparent);
20106
+ color: var(--mint-success, #22c55e);
18321
20107
  }
18322
- .mint-file-uploader__file-name {
18323
- font-size: 0.8125rem;
18324
- font-weight: 500;
18325
- color: var(--text-primary);
18326
- white-space: nowrap;
18327
- overflow: hidden;
18328
- text-overflow: ellipsis;
20108
+ .mint-instrument-state--warning {
20109
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 12%, transparent);
20110
+ color: var(--mint-warning, #eab308);
18329
20111
  }
18330
- .mint-file-uploader__file-size {
18331
- font-size: 0.6875rem;
18332
- color: var(--text-muted);
18333
- font-family: 'Fira Code', monospace;
20112
+ .mint-instrument-state--error {
20113
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 12%, transparent);
20114
+ color: var(--mint-error, #ef4444);
18334
20115
  }
18335
- /* ==========================================================================
18336
- Remove button (shared between file rows and folder summary)
18337
- ========================================================================== */
18338
- .mint-file-uploader__remove-btn {
18339
- display: flex;
18340
- align-items: center;
18341
- justify-content: center;
18342
- flex-shrink: 0;
18343
- width: 1.75rem;
18344
- height: 1.75rem;
18345
- padding: 0;
18346
- border-radius: var(--radius-sm);
18347
- color: var(--text-muted);
18348
- background: transparent;
18349
- border: none;
18350
- cursor: pointer;
18351
- transition: color 0.15s ease, background-color 0.15s ease;
20116
+ .mint-instrument-state--info {
20117
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 12%, transparent);
20118
+ color: var(--mint-info, #3b82f6);
18352
20119
  }
18353
- .mint-file-uploader__remove-btn:hover {
18354
- color: var(--mint-error);
18355
- background-color: var(--mint-error-bg);
20120
+ .mint-instrument-state--muted {
20121
+ background: var(--bg-secondary, #f1f5f9);
20122
+ color: var(--text-muted, #64748b);
20123
+ }
20124
+ .mint-instrument-state--offline {
20125
+ border: 1px dashed var(--border-color, #e2e8f0);
18356
20126
  }
18357
- .mint-file-uploader__remove-icon {
18358
- width: 0.875rem;
18359
- height: 0.875rem;
20127
+ .mint-instrument-state__dot {
20128
+ width: 0.375rem;
20129
+ height: 0.375rem;
20130
+ border-radius: 999px;
20131
+ background: currentColor;
20132
+ animation: mint-instrument-pulse 1.5s ease-in-out infinite;
18360
20133
  }
18361
- /* ==========================================================================
18362
- Folder summary
18363
- ========================================================================== */
18364
- .mint-file-uploader__folder-summary {
20134
+ .mint-instrument-card {
18365
20135
  display: flex;
18366
- align-items: center;
18367
- justify-content: space-between;
18368
- padding: 0.75rem;
18369
- border-radius: var(--radius-md);
18370
- background-color: var(--bg-secondary);
18371
- border: 1px solid var(--border-color);
18372
- transition: border-color 0.15s ease;
20136
+ min-width: 0;
20137
+ flex-direction: column;
20138
+ gap: 0.75rem;
20139
+ border: 1px solid var(--border-color, #e2e8f0);
20140
+ border-radius: 0.75rem;
20141
+ background: var(--bg-primary, #fff);
20142
+ padding: 1.25rem;
20143
+ transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
18373
20144
  }
18374
- .mint-file-uploader__folder-summary:hover {
18375
- border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
20145
+ .mint-instrument-card--running {
20146
+ border-color: color-mix(in srgb, var(--mint-success, #22c55e) 30%, var(--border-color, #e2e8f0));
20147
+ box-shadow: 0 0 12px rgba(34, 197, 94, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
18376
20148
  }
18377
- .mint-file-uploader__folder-info {
20149
+ .mint-instrument-card--error {
20150
+ border-color: var(--mint-error, #ef4444);
20151
+ box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
20152
+ }
20153
+ .mint-instrument-card--connected {
20154
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
20155
+ }
20156
+ .mint-instrument-card--disconnected {
20157
+ border-style: dashed;
20158
+ opacity: 0.68;
20159
+ }
20160
+ .mint-instrument-card__header,
20161
+ .mint-instrument-card__sample-row,
20162
+ .mint-instrument-card__eta,
20163
+ .mint-instrument-alert__header,
20164
+ .mint-instrument-alert__footer {
18378
20165
  display: flex;
18379
20166
  align-items: center;
18380
- gap: 0.75rem;
20167
+ }
20168
+ .mint-instrument-card__header {
20169
+ gap: 0.625rem;
18381
20170
  min-width: 0;
18382
20171
  }
18383
- .mint-file-uploader__folder-icon-wrapper {
18384
- display: flex;
18385
- align-items: center;
18386
- justify-content: center;
18387
- width: 2.25rem;
18388
- height: 2.25rem;
18389
- flex-shrink: 0;
18390
- border-radius: var(--radius-sm);
18391
- background: color-mix(in srgb, var(--color-primary) 8%, transparent);
20172
+ .mint-instrument-card__dot {
20173
+ width: 0.75rem;
20174
+ height: 0.75rem;
20175
+ flex: 0 0 auto;
20176
+ border-radius: 999px;
18392
20177
  }
18393
- .mint-file-uploader__folder-icon {
18394
- width: 1.25rem;
18395
- height: 1.25rem;
18396
- color: var(--color-primary);
20178
+ .mint-instrument-card__dot--success {
20179
+ background: var(--mint-success, #22c55e);
20180
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
18397
20181
  }
18398
- .mint-file-uploader__folder-details {
20182
+ .mint-instrument-card__dot--warning {
20183
+ background: var(--mint-warning, #eab308);
20184
+ }
20185
+ .mint-instrument-card__dot--error {
20186
+ background: var(--mint-error, #ef4444);
20187
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
20188
+ }
20189
+ .mint-instrument-card__dot--info {
20190
+ background: var(--mint-info, #3b82f6);
20191
+ }
20192
+ .mint-instrument-card__dot--muted {
20193
+ background: var(--text-muted, #64748b);
20194
+ opacity: 0.38;
20195
+ }
20196
+ .mint-instrument-card__name {
20197
+ min-width: 0;
20198
+ flex: 1 1 auto;
20199
+ overflow: hidden;
20200
+ color: var(--text-primary, #0f172a);
20201
+ font-size: 1.0625rem;
20202
+ font-weight: 700;
20203
+ text-overflow: ellipsis;
20204
+ white-space: nowrap;
20205
+ }
20206
+ .mint-instrument-card__sample {
18399
20207
  display: flex;
18400
20208
  flex-direction: column;
18401
- gap: 0.125rem;
20209
+ gap: 0.25rem;
20210
+ border: 1px solid color-mix(in srgb, var(--mint-success, #22c55e) 20%, var(--border-color, #e2e8f0));
20211
+ border-radius: 0.375rem;
20212
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 5%, transparent);
20213
+ padding: 0.5rem 0.625rem;
20214
+ }
20215
+ .mint-instrument-card__sample-label {
20216
+ color: var(--mint-success, #22c55e);
20217
+ font-size: 0.625rem;
20218
+ font-weight: 700;
20219
+ letter-spacing: 0.05em;
20220
+ text-transform: uppercase;
20221
+ }
20222
+ .mint-instrument-card__sample-row {
20223
+ gap: 0.375rem;
18402
20224
  min-width: 0;
18403
20225
  }
18404
- .mint-file-uploader__folder-name {
18405
- font-size: 0.8125rem;
18406
- font-weight: 600;
18407
- color: var(--text-primary);
18408
- white-space: nowrap;
20226
+ .mint-instrument-card__sample-dot {
20227
+ width: 0.375rem;
20228
+ height: 0.375rem;
20229
+ flex: 0 0 auto;
20230
+ border-radius: 999px;
20231
+ background: var(--mint-success, #22c55e);
20232
+ }
20233
+ .mint-instrument-card__sample-name,
20234
+ .mint-instrument-card__method,
20235
+ .mint-instrument-card__sequence {
20236
+ min-width: 0;
18409
20237
  overflow: hidden;
18410
20238
  text-overflow: ellipsis;
20239
+ white-space: nowrap;
18411
20240
  }
18412
- .mint-file-uploader__folder-count {
18413
- font-size: 0.6875rem;
18414
- color: var(--text-muted);
18415
- font-family: 'Fira Code', monospace;
20241
+ .mint-instrument-card__sample-name {
20242
+ flex: 1 1 auto;
20243
+ color: var(--text-primary, #0f172a);
20244
+ font-family: var(--font-mono, 'Fira Code', monospace);
20245
+ font-size: 0.8125rem;
20246
+ font-weight: 700;
18416
20247
  }
18417
- /* ==========================================================================
18418
- Reduced motion
18419
- ========================================================================== */
18420
- @media (prefers-reduced-motion: reduce) {
18421
- .mint-file-uploader__dropzone {
18422
- transition: none;
18423
- }
18424
-
18425
- .mint-file-uploader-item-enter-active,
18426
- .mint-file-uploader-item-leave-active,
18427
- .mint-file-uploader-item-move {
18428
- transition: none;
18429
- }
20248
+ .mint-instrument-card__sample-vial,
20249
+ .mint-instrument-card__method,
20250
+ .mint-instrument-card__sequence,
20251
+ .mint-instrument-card__muted {
20252
+ color: var(--text-muted, #64748b);
20253
+ font-family: var(--font-mono, 'Fira Code', monospace);
20254
+ font-size: 0.75rem;
18430
20255
  }
18431
- /* FormField Component Styles */
18432
- .mint-form-field {
18433
- display: flex;
18434
- flex-direction: column;
18435
- gap: 0.375rem;
20256
+ .mint-instrument-card__sample-vial {
20257
+ flex: 0 0 auto;
20258
+ font-size: 0.6875rem;
18436
20259
  }
18437
- .mint-form-field__label-row {
18438
- display: flex;
18439
- align-items: baseline;
18440
- justify-content: space-between;
20260
+ .mint-instrument-card__eta {
20261
+ gap: 0.5rem;
20262
+ border-radius: 0.5rem;
20263
+ background: var(--bg-secondary, #f1f5f9);
20264
+ padding: 0.5rem 0.625rem;
18441
20265
  }
18442
- .mint-form-field__label {
18443
- display: block;
18444
- font-size: 0.6875rem;
18445
- font-weight: 600;
18446
- text-transform: uppercase;
20266
+ .mint-instrument-card__eta-label {
20267
+ color: var(--text-muted, #64748b);
20268
+ font-size: 0.625rem;
20269
+ font-weight: 700;
18447
20270
  letter-spacing: 0.05em;
18448
- color: var(--text-secondary);
18449
20271
  }
18450
- .mint-form-field__required {
18451
- color: var(--mint-error);
18452
- margin-left: 0.125rem;
20272
+ .mint-instrument-card__eta-time {
20273
+ color: var(--text-primary, #0f172a);
20274
+ font-family: var(--font-mono, 'Fira Code', monospace);
20275
+ font-size: 0.875rem;
20276
+ font-weight: 700;
18453
20277
  }
18454
- .mint-form-field__optional {
20278
+ .mint-instrument-card__eta-remaining {
20279
+ margin-left: auto;
20280
+ color: var(--text-muted, #64748b);
20281
+ font-family: var(--font-mono, 'Fira Code', monospace);
18455
20282
  font-size: 0.6875rem;
18456
- font-weight: 500;
18457
- color: var(--text-muted);
18458
- font-style: italic;
18459
- letter-spacing: 0;
18460
- text-transform: none;
18461
20283
  }
18462
- .mint-form-field__error {
18463
- font-size: 0.8125rem;
18464
- color: var(--mint-error);
18465
- margin: 0 !important;
20284
+ .mint-instrument-card__error {
20285
+ border: 1px solid color-mix(in srgb, var(--mint-error, #ef4444) 22%, var(--border-color, #e2e8f0));
20286
+ border-radius: 0.5rem;
20287
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
20288
+ padding: 0.625rem 0.75rem;
18466
20289
  }
18467
- .mint-form-field__hint {
20290
+ .mint-instrument-card__error-message {
20291
+ color: var(--mint-error, #ef4444);
18468
20292
  font-size: 0.8125rem;
18469
- color: var(--text-muted);
18470
- margin: 0 !important;
20293
+ font-weight: 700;
18471
20294
  }
18472
- /* IconButton Component Styles */
18473
- .mint-icon-button {
20295
+ .mint-instrument-card__error-detail {
20296
+ margin-top: 0.25rem;
20297
+ color: var(--text-muted, #64748b);
20298
+ font-size: 0.75rem;
20299
+ }
20300
+ .mint-instrument-card__placeholder {
20301
+ display: grid;
20302
+ gap: 0.625rem;
20303
+ }
20304
+ .mint-instrument-alert-log {
20305
+ display: flex;
20306
+ min-height: 0;
20307
+ flex-direction: column;
20308
+ }
20309
+ .mint-instrument-alert-log__header {
20310
+ padding: 0.875rem 1rem 0.625rem;
20311
+ }
20312
+ .mint-instrument-alert-log__title {
20313
+ color: var(--text-muted, #64748b);
20314
+ font-size: 0.75rem;
20315
+ font-weight: 700;
20316
+ letter-spacing: 0.04em;
20317
+ text-transform: uppercase;
20318
+ }
20319
+ .mint-instrument-alert-log__filters {
20320
+ display: flex;
20321
+ flex-direction: column;
20322
+ gap: 0.375rem;
20323
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
20324
+ padding: 0 0.75rem 0.625rem;
20325
+ }
20326
+ .mint-instrument-alert-log__filter-row {
20327
+ display: flex;
20328
+ flex-wrap: wrap;
20329
+ gap: 0.3125rem;
20330
+ }
20331
+ .mint-instrument-alert-log__filter {
18474
20332
  display: inline-flex;
18475
20333
  align-items: center;
18476
- justify-content: center;
18477
- border-radius: var(--radius-md);
18478
- /* Mirrors BaseButton's tactile-physicality system: gradient overlay on filled
18479
- variants (see rule below), hover lift, press-to-flat. See also button.css. */
18480
- transition:
18481
- color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18482
- background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18483
- border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18484
- box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18485
- transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18486
- background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
20334
+ gap: 0.3125rem;
20335
+ border: 1px solid var(--border-color, #e2e8f0);
20336
+ border-radius: 999px;
20337
+ background: var(--bg-secondary, #f1f5f9);
20338
+ color: var(--text-muted, #64748b);
18487
20339
  cursor: pointer;
18488
- border: none;
18489
- box-sizing: border-box;
18490
- transform: translateY(0);
18491
- }
18492
- .mint-icon-button:hover:not(.mint-icon-button--disabled) {
18493
- transform: translateY(-1px);
18494
- }
18495
- .mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost) {
18496
- box-shadow: var(--shadow-sm);
20340
+ font-size: 0.6875rem;
20341
+ font-weight: 600;
20342
+ opacity: 0.56;
20343
+ padding: 0.1875rem 0.5rem;
20344
+ transition: opacity 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
18497
20345
  }
18498
- .mint-icon-button:active:not(.mint-icon-button--disabled) {
18499
- transform: translateY(0);
18500
- box-shadow: none;
18501
- background-image: none;
18502
- transition-duration: 0.05s;
20346
+ .mint-instrument-alert-log__filter--active {
20347
+ border-color: var(--filter-color, var(--border-color, #e2e8f0));
20348
+ background: color-mix(in srgb, var(--filter-color, transparent) 8%, var(--bg-secondary, #f1f5f9));
20349
+ color: var(--text-primary, #0f172a);
20350
+ opacity: 1;
18503
20351
  }
18504
- .mint-icon-button:focus-visible {
18505
- outline: none;
18506
- box-shadow: var(--focus-ring);
20352
+ .mint-instrument-alert-log__filter:hover {
20353
+ opacity: 0.86;
18507
20354
  }
18508
- .mint-icon-button--disabled {
18509
- opacity: var(--mint-disabled-opacity);
18510
- cursor: not-allowed;
20355
+ .mint-instrument-alert-log__filter--active:hover {
20356
+ opacity: 1;
18511
20357
  }
18512
- /* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
18513
- .mint-icon-button--primary.mint-icon-button--disabled,
18514
- .mint-icon-button--cta.mint-icon-button--disabled,
18515
- .mint-icon-button--danger.mint-icon-button--disabled,
18516
- .mint-icon-button--success.mint-icon-button--disabled {
18517
- background-color: var(--bg-tertiary);
18518
- background-image: none;
18519
- color: var(--text-muted);
20358
+ .mint-instrument-alert-log__filter-dot {
20359
+ width: 0.375rem;
20360
+ height: 0.375rem;
20361
+ flex: 0 0 auto;
20362
+ border-radius: 999px;
18520
20363
  }
18521
- /* Subtle top-to-bottom highlight on filled variants — catch of light. */
18522
- .mint-icon-button--primary,
18523
- .mint-icon-button--cta,
18524
- .mint-icon-button--danger,
18525
- .mint-icon-button--success {
18526
- background-image: linear-gradient(
18527
- to bottom,
18528
- rgba(255, 255, 255, 0.12),
18529
- rgba(255, 255, 255, 0)
18530
- );
20364
+ .mint-instrument-alert-log__filter-count {
20365
+ min-width: 0.875rem;
20366
+ color: var(--text-muted, #64748b);
20367
+ font-family: var(--font-mono, 'Fira Code', monospace);
20368
+ font-size: 0.625rem;
20369
+ text-align: center;
18531
20370
  }
18532
- /* Variants */
18533
- .mint-icon-button--primary {
18534
- background-color: var(--color-primary);
18535
- color: white;
20371
+ .mint-instrument-alert-log__list {
20372
+ display: flex;
20373
+ min-height: 0;
20374
+ flex: 1 1 auto;
20375
+ flex-direction: column;
20376
+ gap: 0.5rem;
20377
+ overflow-y: auto;
20378
+ padding: 0.5rem;
18536
20379
  }
18537
- .mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
18538
- background-color: var(--color-primary-hover);
20380
+ .mint-instrument-alert {
20381
+ border-left: 3px solid transparent;
20382
+ border-radius: 0.375rem;
20383
+ font-size: 0.8125rem;
20384
+ line-height: 1.4;
20385
+ padding: 0.625rem 0.75rem;
20386
+ transition: opacity 150ms ease-out;
18539
20387
  }
18540
- .mint-icon-button--secondary {
18541
- background-color: var(--bg-secondary);
18542
- color: var(--text-primary);
18543
- border: 1px solid var(--border-color);
20388
+ .mint-instrument-alert--critical {
20389
+ border-left-color: var(--mint-error, #ef4444);
20390
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 8%, transparent);
18544
20391
  }
18545
- .mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
18546
- background-color: var(--bg-tertiary);
20392
+ .mint-instrument-alert--warning {
20393
+ border-left-color: var(--mint-warning, #eab308);
20394
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 8%, transparent);
18547
20395
  }
18548
- .mint-icon-button--cta {
18549
- background-color: var(--color-cta);
18550
- color: white;
20396
+ .mint-instrument-alert--info {
20397
+ border-left-color: var(--mint-info, #3b82f6);
20398
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 6%, transparent);
18551
20399
  }
18552
- .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
18553
- background-color: var(--color-cta-hover);
20400
+ .mint-instrument-alert--acknowledged {
20401
+ opacity: 0.52;
18554
20402
  }
18555
- .mint-icon-button--danger {
18556
- background-color: var(--mint-error);
18557
- color: white;
20403
+ .mint-instrument-alert__header {
20404
+ gap: 0.375rem;
20405
+ margin-bottom: 0.1875rem;
20406
+ min-width: 0;
18558
20407
  }
18559
- .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
18560
- background-color: var(--mint-error-hover);
20408
+ .mint-instrument-alert__instrument {
20409
+ min-width: 0;
20410
+ overflow: hidden;
20411
+ color: var(--text-primary, #0f172a);
20412
+ font-size: 0.8125rem;
20413
+ font-weight: 700;
20414
+ text-overflow: ellipsis;
20415
+ white-space: nowrap;
18561
20416
  }
18562
- .mint-icon-button--success {
18563
- background-color: var(--mint-success);
18564
- color: white;
20417
+ .mint-instrument-alert__source {
20418
+ border: 1px solid var(--border-color, #e2e8f0);
20419
+ border-radius: 0.1875rem;
20420
+ background: var(--bg-secondary, #f1f5f9);
20421
+ color: var(--text-muted, #64748b);
20422
+ flex: 0 0 auto;
20423
+ font-size: 0.625rem;
20424
+ font-weight: 700;
20425
+ letter-spacing: 0.02em;
20426
+ padding: 0 0.25rem;
18565
20427
  }
18566
- .mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
18567
- background-color: var(--mint-success-hover);
20428
+ .mint-instrument-alert__time {
20429
+ flex: 0 0 auto;
20430
+ margin-left: auto;
20431
+ color: var(--text-muted, #64748b);
20432
+ font-family: var(--font-mono, 'Fira Code', monospace);
20433
+ font-size: 0.6875rem;
18568
20434
  }
18569
- .mint-icon-button--ghost {
18570
- background-color: transparent;
18571
- color: var(--text-secondary);
20435
+ .mint-instrument-alert__detail {
20436
+ color: var(--text-secondary, #475569);
20437
+ font-size: 0.8125rem;
20438
+ line-height: 1.5;
20439
+ overflow-wrap: break-word;
18572
20440
  }
18573
- .mint-icon-button--ghost:hover:not(.mint-icon-button--disabled) {
18574
- background-color: var(--bg-tertiary);
18575
- color: var(--text-primary);
20441
+ .mint-instrument-alert__footer {
20442
+ gap: 0.5rem;
20443
+ margin-top: 0.375rem;
18576
20444
  }
18577
- /* Sizes */
18578
- .mint-icon-button--sm {
18579
- padding: 0.375rem;
18580
- min-height: var(--form-height-sm);
20445
+ .mint-instrument-alert__code,
20446
+ .mint-instrument-alert__ack {
20447
+ border: 1px solid var(--border-color, #e2e8f0);
20448
+ border-radius: 0.25rem;
20449
+ background: var(--bg-secondary, #f1f5f9);
20450
+ color: var(--text-muted, #64748b);
20451
+ font-size: 0.6875rem;
20452
+ padding: 0.25rem 0.5rem;
18581
20453
  }
18582
- .mint-icon-button--md {
18583
- padding: 0.5rem;
18584
- min-height: var(--form-height-md);
20454
+ .mint-instrument-alert__code {
20455
+ font-family: var(--font-mono, 'Fira Code', monospace);
20456
+ font-weight: 700;
18585
20457
  }
18586
- .mint-icon-button--lg {
18587
- padding: 0.75rem;
18588
- min-height: var(--form-height-lg);
20458
+ .mint-instrument-alert__ack {
20459
+ cursor: pointer;
20460
+ transition: background 150ms ease-out, color 150ms ease-out;
18589
20461
  }
18590
- .mint-icon-button__icon--sm,
18591
- .mint-icon-button__icon--md,
18592
- .mint-icon-button__icon--lg {
18593
- display: inline-flex;
18594
- align-items: center;
18595
- justify-content: center;
20462
+ .mint-instrument-alert__ack:hover {
20463
+ background: var(--bg-primary, #fff);
20464
+ color: var(--text-primary, #0f172a);
18596
20465
  }
18597
- .mint-icon-button__icon--sm {
18598
- width: 1rem;
18599
- height: 1rem;
20466
+ .mint-instrument-alert-log__empty {
20467
+ color: var(--text-muted, #64748b);
20468
+ font-size: 0.8125rem;
20469
+ padding: 2rem 1rem;
20470
+ text-align: center;
18600
20471
  }
18601
- .mint-icon-button__icon--md {
18602
- width: 1.25rem;
18603
- height: 1.25rem;
20472
+ .mint-instrument-alert-enter-active {
20473
+ transition: opacity 0.2s ease-out;
18604
20474
  }
18605
- .mint-icon-button__icon--lg {
18606
- width: 1.5rem;
18607
- height: 1.5rem;
20475
+ .mint-instrument-alert-leave-active {
20476
+ transition: opacity 0.15s ease-in;
18608
20477
  }
18609
- /* Spinner */
18610
- .mint-icon-button__spinner {
18611
- animation: mint-spin 1s linear infinite;
20478
+ .mint-instrument-alert-enter-from,
20479
+ .mint-instrument-alert-leave-to {
20480
+ opacity: 0;
18612
20481
  }
18613
- @keyframes mint-spin {
18614
- from {
18615
- transform: rotate(0deg);
20482
+ @keyframes mint-instrument-pulse {
20483
+ 0%, 100% {
20484
+ opacity: 1;
20485
+ box-shadow: 0 0 0 0 currentColor;
18616
20486
  }
18617
- to {
18618
- transform: rotate(360deg);
20487
+ 50% {
20488
+ opacity: 0.72;
20489
+ box-shadow: 0 0 0 3px transparent;
18619
20490
  }
18620
20491
  }
18621
20492
  @media (prefers-reduced-motion: reduce) {
18622
- .mint-icon-button {
18623
- transition:
18624
- color 0.15s ease,
18625
- background-color 0.15s ease,
18626
- border-color 0.15s ease,
18627
- box-shadow 0.15s ease;
18628
- }
18629
- .mint-icon-button:hover:not(.mint-icon-button--disabled),
18630
- .mint-icon-button:active:not(.mint-icon-button--disabled) {
18631
- transform: none;
20493
+ .mint-instrument-state__dot,
20494
+ .mint-instrument-alert-enter-active,
20495
+ .mint-instrument-alert-leave-active {
20496
+ animation: none;
20497
+ transition: none;
18632
20498
  }
18633
20499
  }
18634
20500
  /* BaseInput Component Styles */
@@ -20108,10 +21974,13 @@ code, pre {
20108
21974
  border-bottom: 1px solid var(--border-color);
20109
21975
  }
20110
21976
  .mint-tabs--pills {
21977
+ width: fit-content;
21978
+ max-width: 100%;
20111
21979
  gap: 0.5rem;
20112
21980
  padding: 0.25rem;
20113
21981
  background-color: var(--bg-tertiary);
20114
21982
  border-radius: var(--radius-md);
21983
+ overflow-x: auto;
20115
21984
  }
20116
21985
  .mint-tab {
20117
21986
  padding: 0.5rem 1rem;
@@ -20170,6 +22039,11 @@ code, pre {
20170
22039
  .mint-tab__icon {
20171
22040
  color: currentColor;
20172
22041
  }
22042
+ .mint-tab__icon--svg {
22043
+ width: 1rem;
22044
+ height: 1rem;
22045
+ flex-shrink: 0;
22046
+ }
20173
22047
  .mint-tab__badge {
20174
22048
  margin-left: 0.25rem;
20175
22049
  padding: 0.125rem 0.375rem;
@@ -20765,6 +22639,10 @@ html.dark .mint-toast__item .mint-toast__message {
20765
22639
  background-color: rgba(139, 92, 246, 0.15);
20766
22640
  border: 1px solid rgba(139, 92, 246, 0.4);
20767
22641
  }
22642
+ .mint-well-plate__well--iqc {
22643
+ background-color: rgba(236, 72, 153, 0.15);
22644
+ border: 1px solid rgba(236, 72, 153, 0.4);
22645
+ }
20768
22646
  /* Condition header - drug label row */
20769
22647
  .mint-well-plate__condition-label {
20770
22648
  font-weight: 600;
@@ -23826,6 +25704,63 @@ html.dark .mint-toast__item .mint-toast__message {
23826
25704
  .mint-segmented-control__option--lg .mint-segmented-control__description {
23827
25705
  font-size: 0.875rem;
23828
25706
  }
25707
+ .mint-sequence-progress {
25708
+ display: flex;
25709
+ flex-direction: column;
25710
+ gap: 0.25rem;
25711
+ min-width: 0;
25712
+ }
25713
+ .mint-sequence-progress__header {
25714
+ display: flex;
25715
+ align-items: center;
25716
+ justify-content: space-between;
25717
+ gap: 0.75rem;
25718
+ min-width: 0;
25719
+ }
25720
+ .mint-sequence-progress__label {
25721
+ min-width: 0;
25722
+ overflow: hidden;
25723
+ color: var(--text-muted, #64748b);
25724
+ font-family: var(--font-mono, 'Fira Code', monospace);
25725
+ font-size: 0.75rem;
25726
+ text-overflow: ellipsis;
25727
+ white-space: nowrap;
25728
+ }
25729
+ .mint-sequence-progress__percent {
25730
+ flex: 0 0 auto;
25731
+ color: var(--mint-info, #3b82f6);
25732
+ font-family: var(--font-mono, 'Fira Code', monospace);
25733
+ font-size: 0.6875rem;
25734
+ font-weight: 700;
25735
+ }
25736
+ .mint-sequence-progress__footer {
25737
+ display: flex;
25738
+ align-items: center;
25739
+ justify-content: space-between;
25740
+ gap: 0.75rem;
25741
+ min-width: 0;
25742
+ }
25743
+ .mint-sequence-progress__remaining {
25744
+ min-width: 0;
25745
+ overflow: hidden;
25746
+ color: var(--text-muted, #64748b);
25747
+ font-family: var(--font-mono, 'Fira Code', monospace);
25748
+ font-size: 0.6875rem;
25749
+ text-overflow: ellipsis;
25750
+ white-space: nowrap;
25751
+ }
25752
+ .mint-sequence-progress__eta {
25753
+ flex: 0 0 auto;
25754
+ border: 1px solid color-mix(in srgb, var(--mint-info, #3b82f6) 24%, transparent);
25755
+ border-radius: 999px;
25756
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 10%, transparent);
25757
+ color: var(--mint-info, #3b82f6);
25758
+ font-family: var(--font-mono, 'Fira Code', monospace);
25759
+ font-size: 0.6875rem;
25760
+ font-weight: 700;
25761
+ padding: 0.125rem 0.5rem;
25762
+ white-space: nowrap;
25763
+ }
23829
25764
  /* MultiSelect Component Styles */
23830
25765
  .mint-multi-select {
23831
25766
  display: flex;
@@ -24919,7 +26854,7 @@ html.dark .mint-dataframe__loading {
24919
26854
  /* Sample type buttons */
24920
26855
  .mint-well-edit-popup__type-grid {
24921
26856
  display: grid;
24922
- grid-template-columns: repeat(3, 1fr);
26857
+ grid-template-columns: repeat(4, 1fr);
24923
26858
  gap: 0.25rem;
24924
26859
  }
24925
26860
  .mint-well-edit-popup__type-btn {
@@ -24948,6 +26883,11 @@ html.dark .mint-dataframe__loading {
24948
26883
  border-color: rgba(139, 92, 246, 0.4);
24949
26884
  color: #8b5cf6;
24950
26885
  }
26886
+ .mint-well-edit-popup__type-btn--iqc {
26887
+ background-color: rgba(236, 72, 153, 0.15);
26888
+ border-color: rgba(236, 72, 153, 0.4);
26889
+ color: #ec4899;
26890
+ }
24951
26891
  /* Injection count buttons */
24952
26892
  .mint-well-edit-popup__count-grid {
24953
26893
  display: grid;
@@ -25319,6 +27259,166 @@ html.dark .mint-dataframe__loading {
25319
27259
  transform: rotate(360deg);
25320
27260
  }
25321
27261
  }
27262
+ .mint-lcms-sequence-table {
27263
+ min-width: 0;
27264
+ overflow: hidden;
27265
+ }
27266
+ .mint-lcms-sequence-table__scroller {
27267
+ overflow-x: auto;
27268
+ }
27269
+ .mint-lcms-sequence-table__table {
27270
+ width: 100%;
27271
+ border-collapse: collapse;
27272
+ font-size: 0.875rem;
27273
+ }
27274
+ .mint-lcms-sequence-table__th,
27275
+ .mint-lcms-sequence-table__td,
27276
+ .mint-lcms-sequence-table__drag-header,
27277
+ .mint-lcms-sequence-table__drag-cell,
27278
+ .mint-lcms-sequence-table__actions-header,
27279
+ .mint-lcms-sequence-table__actions {
27280
+ border-bottom: 1px solid var(--border-light, var(--border-color, #e2e8f0));
27281
+ padding: 0.5rem 0.75rem;
27282
+ vertical-align: middle;
27283
+ }
27284
+ .mint-lcms-sequence-table__th {
27285
+ color: var(--text-secondary, #475569);
27286
+ font-size: 0.8125rem;
27287
+ font-weight: 700;
27288
+ text-align: left;
27289
+ white-space: nowrap;
27290
+ }
27291
+ .mint-lcms-sequence-table__th--right,
27292
+ .mint-lcms-sequence-table__td--right {
27293
+ text-align: right;
27294
+ }
27295
+ .mint-lcms-sequence-table__row {
27296
+ transition: background 120ms ease-out, opacity 120ms ease-out, box-shadow 120ms ease-out;
27297
+ }
27298
+ .mint-lcms-sequence-table__row:hover {
27299
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 4%, transparent);
27300
+ }
27301
+ .mint-lcms-sequence-table__row--dragging {
27302
+ opacity: 0.35;
27303
+ }
27304
+ .mint-lcms-sequence-table__row--drop-above {
27305
+ box-shadow: inset 0 2px 0 0 var(--mint-info, #3b82f6);
27306
+ }
27307
+ .mint-lcms-sequence-table__row--drop-below {
27308
+ box-shadow: inset 0 -2px 0 0 var(--mint-info, #3b82f6);
27309
+ }
27310
+ .mint-lcms-sequence-table__drag-header,
27311
+ .mint-lcms-sequence-table__drag-cell {
27312
+ width: 1.5rem;
27313
+ padding-left: 0.25rem;
27314
+ padding-right: 0.25rem;
27315
+ }
27316
+ .mint-lcms-sequence-table__drag-handle {
27317
+ color: var(--text-muted, #64748b);
27318
+ cursor: grab;
27319
+ font-family: var(--font-mono, 'Fira Code', monospace);
27320
+ font-size: 0.875rem;
27321
+ letter-spacing: -0.08em;
27322
+ }
27323
+ .mint-lcms-sequence-table__td {
27324
+ min-width: 0;
27325
+ color: var(--text-primary, #0f172a);
27326
+ }
27327
+ .mint-lcms-sequence-table__td--index,
27328
+ .mint-lcms-sequence-table__td--file_name,
27329
+ .mint-lcms-sequence-table__td--instrument_method,
27330
+ .mint-lcms-sequence-table__td--injection_volume {
27331
+ font-family: var(--font-mono, 'Fira Code', monospace);
27332
+ }
27333
+ .mint-lcms-sequence-table__td--index,
27334
+ .mint-lcms-sequence-table__td--instrument_method {
27335
+ color: var(--text-muted, #64748b);
27336
+ }
27337
+ .mint-lcms-sequence-table__td--file_name,
27338
+ .mint-lcms-sequence-table__td--instrument_method {
27339
+ max-width: 18rem;
27340
+ overflow: hidden;
27341
+ text-overflow: ellipsis;
27342
+ white-space: nowrap;
27343
+ }
27344
+ .mint-lcms-sequence-table__type {
27345
+ display: inline-flex;
27346
+ align-items: center;
27347
+ border-radius: 0.25rem;
27348
+ font-size: 0.75rem;
27349
+ font-weight: 700;
27350
+ line-height: 1.2;
27351
+ padding: 0.125rem 0.5rem;
27352
+ white-space: nowrap;
27353
+ }
27354
+ .mint-lcms-sequence-table__type--blank {
27355
+ background: color-mix(in srgb, var(--color-cta, #f97316) 15%, transparent);
27356
+ color: var(--color-cta, #f97316);
27357
+ }
27358
+ .mint-lcms-sequence-table__type--qc {
27359
+ background: color-mix(in srgb, var(--color-purple, #8b5cf6) 15%, transparent);
27360
+ color: var(--color-purple, #8b5cf6);
27361
+ }
27362
+ .mint-lcms-sequence-table__type--sample {
27363
+ background: var(--bg-tertiary, #e2e8f0);
27364
+ color: var(--text-secondary, #475569);
27365
+ }
27366
+ .mint-lcms-sequence-table__actions-header,
27367
+ .mint-lcms-sequence-table__actions {
27368
+ width: 4rem;
27369
+ padding-left: 0.25rem;
27370
+ padding-right: 0.25rem;
27371
+ }
27372
+ .mint-lcms-sequence-table__actions {
27373
+ display: flex;
27374
+ align-items: center;
27375
+ justify-content: flex-end;
27376
+ gap: 0.25rem;
27377
+ }
27378
+ .mint-lcms-sequence-table__action {
27379
+ display: inline-flex;
27380
+ width: 1.375rem;
27381
+ height: 1.375rem;
27382
+ align-items: center;
27383
+ justify-content: center;
27384
+ border: 0;
27385
+ border-radius: 0.25rem;
27386
+ background: transparent;
27387
+ color: var(--mint-info, #3b82f6);
27388
+ cursor: pointer;
27389
+ font-size: 0.875rem;
27390
+ font-weight: 700;
27391
+ line-height: 1;
27392
+ opacity: 0.6;
27393
+ transition: background 120ms ease-out, opacity 120ms ease-out;
27394
+ }
27395
+ .mint-lcms-sequence-table__action:hover {
27396
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 10%, transparent);
27397
+ opacity: 1;
27398
+ }
27399
+ .mint-lcms-sequence-table__action--danger {
27400
+ color: var(--mint-error, #ef4444);
27401
+ }
27402
+ .mint-lcms-sequence-table__action--danger:hover {
27403
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 10%, transparent);
27404
+ }
27405
+ .mint-lcms-sequence-table__empty,
27406
+ .mint-lcms-sequence-table__more {
27407
+ color: var(--text-muted, #64748b);
27408
+ font-size: 0.875rem;
27409
+ padding: 1rem;
27410
+ text-align: center;
27411
+ }
27412
+ .mint-lcms-sequence-table__more {
27413
+ border-top: 1px solid var(--border-color, #e2e8f0);
27414
+ padding: 0.625rem 1rem;
27415
+ }
27416
+ @media (prefers-reduced-motion: reduce) {
27417
+ .mint-lcms-sequence-table__row,
27418
+ .mint-lcms-sequence-table__action {
27419
+ transition: none;
27420
+ }
27421
+ }
25322
27422
  /* Divider Component Styles */
25323
27423
  .mint-divider {
25324
27424
  display: flex;