@morscherlab/mint-sdk 1.0.0-beta.7 → 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 (163) 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__/composables/useProtocolTemplates.test.d.ts +1 -0
  8. package/dist/__tests__/stores/settings.test.d.ts +1 -0
  9. package/dist/__tests__/utils/instrument.test.d.ts +1 -0
  10. package/dist/__tests__/utils/lcms.test.d.ts +1 -0
  11. package/dist/__tests__/utils/permissions.test.d.ts +1 -0
  12. package/dist/__tests__/utils/rack.test.d.ts +1 -0
  13. package/dist/{auth-QQj2kkze.js → auth-B7g4J4ZF.js} +148 -24
  14. package/dist/auth-B7g4J4ZF.js.map +1 -0
  15. package/dist/components/AutoGroupModal.vue.d.ts +1 -1
  16. package/dist/components/BaseCheckbox.vue.d.ts +1 -1
  17. package/dist/components/BaseToggle.vue.d.ts +2 -2
  18. package/dist/components/BioTemplateExperimentWorkspaceView.vue.d.ts +1 -1
  19. package/dist/components/BioTemplatePackWorkspaceView.vue.d.ts +1 -1
  20. package/dist/components/BioTemplatePresetWorkspaceView.vue.d.ts +1 -1
  21. package/dist/components/DoseDesignWorkspaceView.vue.d.ts +1 -1
  22. package/dist/components/FormulaInput.vue.d.ts +1 -1
  23. package/dist/components/InstrumentAlertLog.vue.d.ts +22 -0
  24. package/dist/components/InstrumentStateBadge.vue.d.ts +11 -0
  25. package/dist/components/InstrumentStatusCard.vue.d.ts +13 -0
  26. package/dist/components/LcmsSequenceTable.vue.d.ts +26 -0
  27. package/dist/components/ProgressBar.vue.d.ts +1 -0
  28. package/dist/components/RackEditor.vue.d.ts +41 -3
  29. package/dist/components/ReagentList.vue.d.ts +1 -1
  30. package/dist/components/SampleSelector.vue.d.ts +5 -2
  31. package/dist/components/SegmentedControl.vue.d.ts +2 -0
  32. package/dist/components/SequenceInput.vue.d.ts +1 -1
  33. package/dist/components/SequenceProgressBar.vue.d.ts +15 -0
  34. package/dist/components/SettingsModal.vue.d.ts +8 -1
  35. package/dist/components/TagsInput.vue.d.ts +1 -1
  36. package/dist/components/WellPlate.vue.d.ts +42 -3
  37. package/dist/components/index.d.ts +5 -0
  38. package/dist/components/index.js +3 -3
  39. package/dist/{components-DihbSJjU.js → components-BhK-dW99.js} +2135 -1075
  40. package/dist/components-BhK-dW99.js.map +1 -0
  41. package/dist/composables/experimentDesignData.d.ts +17 -0
  42. package/dist/composables/index.d.ts +2 -0
  43. package/dist/composables/index.js +4 -4
  44. package/dist/composables/useControlSchema.d.ts +11 -0
  45. package/dist/composables/useExperimentData.d.ts +11 -3
  46. package/dist/composables/useExperimentSamples.d.ts +42 -0
  47. package/dist/composables/usePlatformContext.d.ts +54 -0
  48. package/dist/{composables-BcgZ6diz.js → composables-Bg7CFuNz.js} +5 -3
  49. package/dist/composables-Bg7CFuNz.js.map +1 -0
  50. package/dist/index.d.ts +4 -0
  51. package/dist/index.js +168 -6
  52. package/dist/index.js.map +1 -0
  53. package/dist/install.js +2 -2
  54. package/dist/instrument.d.ts +7 -0
  55. package/dist/lcms.d.ts +27 -0
  56. package/dist/permissions.d.ts +46 -0
  57. package/dist/stores/auth.d.ts +74 -2
  58. package/dist/stores/index.js +1 -1
  59. package/dist/styles.css +3186 -1070
  60. package/dist/templates/builders.d.ts +7 -3
  61. package/dist/templates/index.d.ts +2 -2
  62. package/dist/templates/index.js +2 -2
  63. package/dist/templates/presets.d.ts +12 -0
  64. package/dist/templates/types.d.ts +16 -1
  65. package/dist/{templates-Cyt0Suwf.js → templates-BorLR_7p.js} +324 -10
  66. package/dist/templates-BorLR_7p.js.map +1 -0
  67. package/dist/types/auth.d.ts +2 -0
  68. package/dist/types/components.d.ts +32 -3
  69. package/dist/types/form-builder.d.ts +2 -1
  70. package/dist/types/index.d.ts +4 -1
  71. package/dist/types/instrument.d.ts +56 -0
  72. package/dist/types/platform.d.ts +3 -0
  73. package/dist/{useExperimentData-CM6Y0u5L.js → useProtocolTemplates-n6AJqSqv.js} +627 -380
  74. package/dist/useProtocolTemplates-n6AJqSqv.js.map +1 -0
  75. package/dist/utils/rack.d.ts +47 -0
  76. package/package.json +1 -1
  77. package/src/__tests__/components/AppTopBar.test.ts +15 -0
  78. package/src/__tests__/components/BaseTabs.test.ts +15 -0
  79. package/src/__tests__/components/GroupAssigner.test.ts +18 -0
  80. package/src/__tests__/components/LcmsSequenceTable.test.ts +57 -0
  81. package/src/__tests__/components/ProgressBar.test.ts +18 -0
  82. package/src/__tests__/components/RackEditor.test.ts +125 -0
  83. package/src/__tests__/components/SampleSelector.test.ts +25 -0
  84. package/src/__tests__/components/SegmentedControl.test.ts +45 -0
  85. package/src/__tests__/components/SequenceProgressBar.test.ts +39 -0
  86. package/src/__tests__/components/SettingsModal.test.ts +83 -2
  87. package/src/__tests__/composables/useApi.test.ts +45 -0
  88. package/src/__tests__/composables/useAuth.test.ts +20 -0
  89. package/src/__tests__/composables/useControlSchema.test.ts +4 -0
  90. package/src/__tests__/composables/useExperimentData.test.ts +23 -0
  91. package/src/__tests__/composables/useExperimentSamples.test.ts +91 -0
  92. package/src/__tests__/composables/useProtocolTemplates.test.ts +64 -0
  93. package/src/__tests__/stores/settings.test.ts +78 -0
  94. package/src/__tests__/templates/templates.test.ts +86 -0
  95. package/src/__tests__/utils/instrument.test.ts +47 -0
  96. package/src/__tests__/utils/lcms.test.ts +73 -0
  97. package/src/__tests__/utils/permissions.test.ts +50 -0
  98. package/src/__tests__/utils/rack.test.ts +120 -0
  99. package/src/components/AppAvatarMenu.vue +6 -3
  100. package/src/components/AppTopBar.vue +16 -10
  101. package/src/components/AuditTrail.vue +1 -1
  102. package/src/components/BaseTabs.vue +22 -1
  103. package/src/components/Calendar.vue +6 -2
  104. package/src/components/ConcentrationInput.vue +3 -2
  105. package/src/components/GroupAssigner.vue +8 -3
  106. package/src/components/InstrumentAlertLog.vue +191 -0
  107. package/src/components/InstrumentStateBadge.vue +50 -0
  108. package/src/components/InstrumentStatusCard.vue +188 -0
  109. package/src/components/LcmsSequenceTable.vue +191 -0
  110. package/src/components/NumberInput.vue +5 -3
  111. package/src/components/ProgressBar.vue +3 -0
  112. package/src/components/RackEditor.vue +73 -2
  113. package/src/components/SampleHierarchyTree.vue +3 -2
  114. package/src/components/SampleSelector.vue +28 -9
  115. package/src/components/SegmentedControl.story.vue +17 -0
  116. package/src/components/SegmentedControl.vue +14 -3
  117. package/src/components/SequenceProgressBar.vue +71 -0
  118. package/src/components/SettingsModal.vue +49 -2
  119. package/src/components/UnitInput.vue +6 -2
  120. package/src/components/WellPlate.vue +145 -24
  121. package/src/components/index.ts +5 -0
  122. package/src/components/internal/WellEditPopupInternal.vue +1 -0
  123. package/src/composables/experimentDesignData.ts +182 -0
  124. package/src/composables/index.ts +14 -0
  125. package/src/composables/useApi.ts +113 -16
  126. package/src/composables/useAuth.ts +4 -0
  127. package/src/composables/useAutoGroup.ts +18 -9
  128. package/src/composables/useControlSchema.ts +21 -0
  129. package/src/composables/useExperimentData.ts +57 -16
  130. package/src/composables/useExperimentSamples.ts +142 -0
  131. package/src/composables/useProtocolTemplates.ts +13 -1
  132. package/src/composables/useRackEditor.ts +3 -2
  133. package/src/index.ts +27 -0
  134. package/src/instrument.ts +90 -0
  135. package/src/lcms.ts +108 -0
  136. package/src/permissions.ts +143 -0
  137. package/src/stores/auth.ts +79 -26
  138. package/src/stores/settings.ts +10 -0
  139. package/src/styles/components/instrument-monitor.css +478 -0
  140. package/src/styles/components/lcms-sequence-table.css +189 -0
  141. package/src/styles/components/sequence-progress-bar.css +63 -0
  142. package/src/styles/components/settings-modal.css +9 -0
  143. package/src/styles/components/tabs.css +9 -0
  144. package/src/styles/components/well-edit-popup.css +7 -1
  145. package/src/styles/components/well-plate.css +5 -0
  146. package/src/styles/index.css +3 -0
  147. package/src/templates/builders.ts +201 -0
  148. package/src/templates/controlSchemas.ts +68 -0
  149. package/src/templates/index.ts +2 -0
  150. package/src/templates/presets.ts +23 -0
  151. package/src/templates/types.ts +17 -0
  152. package/src/types/auth.ts +3 -0
  153. package/src/types/components.ts +45 -3
  154. package/src/types/form-builder.ts +2 -1
  155. package/src/types/index.ts +35 -0
  156. package/src/types/instrument.ts +61 -0
  157. package/src/types/platform.ts +4 -0
  158. package/src/utils/rack.ts +209 -0
  159. package/dist/auth-QQj2kkze.js.map +0 -1
  160. package/dist/components-DihbSJjU.js.map +0 -1
  161. package/dist/composables-BcgZ6diz.js.map +0 -1
  162. package/dist/templates-Cyt0Suwf.js.map +0 -1
  163. package/dist/useExperimentData-CM6Y0u5L.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;
@@ -5084,6 +5092,14 @@ html.dark .mint-settings-modal__option-btn--active {
5084
5092
  margin-bottom: 0 !important;
5085
5093
  padding: 0 !important;
5086
5094
  }
5095
+ .mint-settings-modal__footer {
5096
+ display: flex;
5097
+ flex-direction: column;
5098
+ gap: 0.75rem;
5099
+ margin-top: 1rem;
5100
+ padding-top: 1rem;
5101
+ border-top: 1px solid var(--border-light);
5102
+ }
5087
5103
 
5088
5104
  /* ─────────────────────────────────────────────────────────────────────
5089
5105
  * Schema-driven content grid (used by both layouts)
@@ -8923,7 +8939,7 @@ to { transform: rotate(360deg);
8923
8939
  /* Sample type buttons */
8924
8940
  .mint-well-edit-popup__type-grid {
8925
8941
  display: grid;
8926
- grid-template-columns: repeat(3, 1fr);
8942
+ grid-template-columns: repeat(4, 1fr);
8927
8943
  gap: 0.25rem;
8928
8944
  }
8929
8945
  .mint-well-edit-popup__type-btn {
@@ -8952,6 +8968,11 @@ to { transform: rotate(360deg);
8952
8968
  border-color: rgba(139, 92, 246, 0.4);
8953
8969
  color: #8b5cf6;
8954
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
+ }
8955
8976
 
8956
8977
  /* Injection count buttons */
8957
8978
  .mint-well-edit-popup__count-grid {
@@ -9200,6 +9221,10 @@ to { transform: rotate(360deg);
9200
9221
  background-color: rgba(139, 92, 246, 0.15);
9201
9222
  border: 1px solid rgba(139, 92, 246, 0.4);
9202
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
+ }
9203
9228
 
9204
9229
  /* Condition header - drug label row */
9205
9230
  .mint-well-plate__condition-label {
@@ -14357,850 +14382,2291 @@ to {
14357
14382
  line-height: 0;
14358
14383
  color: var(--text-secondary);
14359
14384
  }
14360
- /* AuditTrail Component Styles */
14361
- .mint-audit-trail {
14362
- position: relative;
14385
+ .mint-sequence-progress {
14386
+ display: flex;
14387
+ flex-direction: column;
14388
+ gap: 0.25rem;
14389
+ min-width: 0;
14363
14390
  }
14364
- .mint-audit-trail__filters {
14391
+ .mint-sequence-progress__header {
14365
14392
  display: flex;
14366
- gap: 0.5rem;
14367
- margin-bottom: 1rem;
14393
+ align-items: center;
14394
+ justify-content: space-between;
14395
+ gap: 0.75rem;
14396
+ min-width: 0;
14368
14397
  }
14369
- .mint-audit-trail__filter-select {
14370
- padding: 0.375rem 0.625rem;
14371
- border-radius: var(--radius);
14372
- border: 1px solid var(--border-color);
14373
- background-color: var(--bg-secondary);
14374
- 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);
14375
14403
  font-size: 0.75rem;
14404
+ text-overflow: ellipsis;
14405
+ white-space: nowrap;
14376
14406
  }
14377
- .mint-audit-trail__list {
14378
- position: relative;
14379
- 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;
14380
14413
  }
14381
- .mint-audit-trail__line {
14382
- position: absolute;
14383
- left: 0.4375rem;
14384
- top: 0;
14385
- bottom: 0;
14386
- width: 2px;
14387
- 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;
14388
14420
  }
14389
- .mint-audit-trail__entry {
14390
- position: relative;
14391
- padding-bottom: 1.25rem;
14392
- 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;
14393
14429
  }
14394
- .mint-audit-trail__entry:last-child {
14395
- 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;
14396
14441
  }
14397
- .mint-audit-trail__dot {
14398
- position: absolute;
14399
- left: -1.5rem;
14400
- top: 0.25rem;
14401
- width: 0.625rem;
14402
- height: 0.625rem;
14403
- border-radius: 9999px;
14404
- border: 2px solid var(--bg-primary);
14405
- 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;
14406
14453
  }
14407
-
14408
- /* Dot colors by type */
14409
- .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);
14410
14457
  }
14411
- .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);
14412
14461
  }
14413
- .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);
14414
14465
  }
14415
- .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);
14416
14469
  }
14417
- .mint-audit-trail__content {
14418
- /* entry content container */
14470
+ .mint-instrument-state--muted {
14471
+ background: var(--bg-secondary, #f1f5f9);
14472
+ color: var(--text-muted, #64748b);
14419
14473
  }
14420
- .mint-audit-trail__header {
14421
- display: flex;
14422
- align-items: center;
14423
- gap: 0.5rem;
14424
- margin-bottom: 0.25rem;
14474
+ .mint-instrument-state--offline {
14475
+ border: 1px dashed var(--border-color, #e2e8f0);
14425
14476
  }
14426
- .mint-audit-trail__avatar {
14427
- width: 1.25rem;
14428
- height: 1.25rem;
14429
- border-radius: 9999px;
14430
- background-color: var(--bg-tertiary);
14431
- color: var(--text-secondary);
14432
- font-size: 0.5rem;
14433
- 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 {
14434
14485
  display: flex;
14435
- align-items: center;
14436
- justify-content: center;
14437
- 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;
14438
14494
  }
14439
- .mint-audit-trail__user {
14440
- font-size: 0.75rem;
14441
- font-weight: 500;
14442
- 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);
14443
14498
  }
14444
- .mint-audit-trail__timestamp {
14445
- font-size: 0.6875rem;
14446
- color: var(--text-muted);
14447
- 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);
14448
14502
  }
14449
- .mint-audit-trail__action {
14450
- font-size: 0.8125rem;
14451
- color: var(--text-primary);
14452
- font-weight: 500;
14503
+ .mint-instrument-card--connected {
14504
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
14453
14505
  }
14454
- .mint-audit-trail__detail {
14455
- font-size: 0.75rem;
14456
- color: var(--text-secondary);
14457
- margin-top: 0.125rem;
14506
+ .mint-instrument-card--disconnected {
14507
+ border-style: dashed;
14508
+ opacity: 0.68;
14458
14509
  }
14459
- .mint-audit-trail__metadata {
14460
- 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 {
14461
14515
  display: flex;
14462
- flex-wrap: wrap;
14463
- gap: 0.5rem;
14464
- font-size: 0.6875rem;
14465
- }
14466
- .mint-audit-trail__metadata-item {
14467
- color: var(--text-secondary);
14516
+ align-items: center;
14468
14517
  }
14469
- .mint-audit-trail__metadata-key {
14470
- color: var(--text-muted);
14471
- margin-right: 0.125rem;
14518
+ .mint-instrument-card__header {
14519
+ gap: 0.625rem;
14520
+ min-width: 0;
14472
14521
  }
14473
- .mint-audit-trail__empty {
14474
- text-align: center;
14475
- padding: 2rem;
14476
- color: var(--text-muted);
14477
- 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;
14478
14527
  }
14479
-
14480
- /* Size variants */
14481
- .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);
14482
14531
  }
14483
- .mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.6875rem;
14532
+ .mint-instrument-card__dot--warning {
14533
+ background: var(--mint-warning, #eab308);
14484
14534
  }
14485
- .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);
14486
14538
  }
14487
- .mint-audit-trail--lg .mint-audit-trail__action { font-size: 0.9375rem;
14539
+ .mint-instrument-card__dot--info {
14540
+ background: var(--mint-info, #3b82f6);
14488
14541
  }
14489
- .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;
14490
14545
  }
14491
- .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;
14492
14555
  }
14493
- /* BatchProgressList Component Styles */
14494
- .mint-batch-progress {
14556
+ .mint-instrument-card__sample {
14495
14557
  display: flex;
14496
14558
  flex-direction: column;
14497
- gap: 0.75rem;
14498
- }
14499
- .mint-batch-progress__header {
14500
- display: flex;
14501
- align-items: center;
14502
- 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;
14503
14564
  }
14504
- .mint-batch-progress__title {
14505
- font-weight: 600;
14506
- font-size: 0.875rem;
14507
- 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;
14508
14571
  }
14509
- .mint-batch-progress__percent {
14510
- font-size: 0.75rem;
14511
- font-weight: 500;
14512
- color: var(--text-muted);
14572
+ .mint-instrument-card__sample-row {
14573
+ gap: 0.375rem;
14574
+ min-width: 0;
14513
14575
  }
14514
- .mint-batch-progress__overall {
14515
- width: 100%;
14576
+ .mint-instrument-card__sample-dot {
14577
+ width: 0.375rem;
14516
14578
  height: 0.375rem;
14517
- background-color: var(--bg-tertiary);
14518
- border-radius: 9999px;
14519
- overflow: hidden;
14579
+ flex: 0 0 auto;
14580
+ border-radius: 999px;
14581
+ background: var(--mint-success, #22c55e);
14520
14582
  }
14521
- .mint-batch-progress__overall-bar {
14522
- height: 100%;
14523
- background-color: var(--color-primary);
14524
- border-radius: 9999px;
14525
- 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;
14526
14590
  }
14527
- .mint-batch-progress__summary {
14528
- display: flex;
14529
- flex-wrap: wrap;
14530
- 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;
14531
14597
  }
14532
- .mint-batch-progress__summary-item {
14533
- display: inline-flex;
14534
- align-items: center;
14535
- 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);
14536
14604
  font-size: 0.75rem;
14537
- padding: 0.125rem 0.5rem;
14538
- border-radius: 9999px;
14539
14605
  }
14540
- .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;
14541
14609
  }
14542
- .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;
14543
14615
  }
14544
- .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;
14545
14621
  }
14546
- .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;
14547
14627
  }
14548
- .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;
14549
14633
  }
14550
- .mint-batch-progress__list {
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;
14639
+ }
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 {
14551
14655
  display: flex;
14656
+ min-height: 0;
14552
14657
  flex-direction: column;
14553
- gap: 0.25rem;
14554
14658
  }
14555
- .mint-batch-progress__item {
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 {
14556
14670
  display: flex;
14557
14671
  flex-direction: column;
14558
- padding: 0.5rem 0.75rem;
14559
- border-radius: var(--radius);
14560
- background-color: var(--bg-secondary);
14561
- border: 1px solid var(--border-color);
14562
- transition: background-color 0.15s ease;
14672
+ gap: 0.375rem;
14673
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
14674
+ padding: 0 0.75rem 0.625rem;
14563
14675
  }
14564
- .mint-batch-progress__item-row {
14676
+ .mint-instrument-alert-log__filter-row {
14565
14677
  display: flex;
14678
+ flex-wrap: wrap;
14679
+ gap: 0.3125rem;
14680
+ }
14681
+ .mint-instrument-alert-log__filter {
14682
+ display: inline-flex;
14566
14683
  align-items: center;
14567
- 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;
14568
14695
  }
14569
- .mint-batch-progress__item--processing {
14570
- border-color: rgba(59, 130, 246, 0.3);
14571
- 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;
14572
14701
  }
14573
- .mint-batch-progress__item--error {
14574
- border-color: rgba(239, 68, 68, 0.3);
14702
+ .mint-instrument-alert-log__filter:hover {
14703
+ opacity: 0.86;
14575
14704
  }
14576
- .mint-batch-progress__item--completed {
14577
- opacity: 0.7;
14705
+ .mint-instrument-alert-log__filter--active:hover {
14706
+ opacity: 1;
14578
14707
  }
14579
- .mint-batch-progress__item-icon {
14580
- flex-shrink: 0;
14581
- width: 1rem;
14582
- 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;
14583
14713
  }
14584
- .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;
14585
14720
  }
14586
- .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;
14587
14729
  }
14588
- .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;
14589
14737
  }
14590
- .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);
14591
14741
  }
14592
- .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);
14593
14745
  }
14594
- @keyframes mint-batch-spin {
14595
- 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);
14596
14749
  }
14597
- to { transform: rotate(360deg);
14750
+ .mint-instrument-alert--acknowledged {
14751
+ opacity: 0.52;
14598
14752
  }
14753
+ .mint-instrument-alert__header {
14754
+ gap: 0.375rem;
14755
+ margin-bottom: 0.1875rem;
14756
+ min-width: 0;
14599
14757
  }
14600
- .mint-batch-progress__item-label {
14601
- flex: 1;
14602
- font-size: 0.8125rem;
14603
- color: var(--text-primary);
14758
+ .mint-instrument-alert__instrument {
14604
14759
  min-width: 0;
14605
14760
  overflow: hidden;
14761
+ color: var(--text-primary, #0f172a);
14762
+ font-size: 0.8125rem;
14763
+ font-weight: 700;
14606
14764
  text-overflow: ellipsis;
14607
14765
  white-space: nowrap;
14608
14766
  }
14609
- .mint-batch-progress__item-progress {
14610
- width: 4rem;
14611
- height: 0.25rem;
14612
- background-color: var(--bg-tertiary);
14613
- border-radius: 9999px;
14614
- overflow: hidden;
14615
- 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;
14616
14777
  }
14617
- .mint-batch-progress__item-progress-bar {
14618
- height: 100%;
14619
- background-color: var(--color-primary);
14620
- 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;
14621
14784
  }
14622
- .mint-batch-progress__item-error {
14623
- 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;
14624
14790
  }
14625
- .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);
14626
14801
  font-size: 0.6875rem;
14627
- color: var(--text-muted);
14628
- background: none;
14629
- 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 {
14630
14809
  cursor: pointer;
14631
- padding: 0;
14632
- text-decoration: underline;
14810
+ transition: background 150ms ease-out, color 150ms ease-out;
14633
14811
  }
14634
- .mint-batch-progress__error-toggle:hover {
14635
- color: var(--text-secondary);
14812
+ .mint-instrument-alert__ack:hover {
14813
+ background: var(--bg-primary, #fff);
14814
+ color: var(--text-primary, #0f172a);
14636
14815
  }
14637
- .mint-batch-progress__item-message {
14638
- font-size: 0.75rem;
14639
- color: var(--mint-error);
14640
- 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;
14641
14821
  }
14642
- .mint-batch-progress__item-actions {
14643
- display: flex;
14644
- gap: 0.25rem;
14645
- flex-shrink: 0;
14822
+ .mint-instrument-alert-enter-active {
14823
+ transition: opacity 0.2s ease-out;
14646
14824
  }
14647
- .mint-batch-progress__retry-btn,
14648
- .mint-batch-progress__cancel-btn {
14649
- padding: 0.125rem 0.5rem;
14650
- font-size: 0.6875rem;
14651
- border-radius: var(--radius-sm);
14652
- border: none;
14653
- cursor: pointer;
14654
- font-weight: 500;
14655
- transition: background-color 0.15s ease;
14825
+ .mint-instrument-alert-leave-active {
14826
+ transition: opacity 0.15s ease-in;
14656
14827
  }
14657
- .mint-batch-progress__retry-btn {
14658
- background-color: var(--mint-warning-bg);
14659
- color: var(--mint-warning);
14828
+ .mint-instrument-alert-enter-from,
14829
+ .mint-instrument-alert-leave-to {
14830
+ opacity: 0;
14660
14831
  }
14661
- .mint-batch-progress__retry-btn:hover {
14662
- 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;
14663
14836
  }
14664
- .mint-batch-progress__cancel-btn {
14665
- background-color: var(--bg-tertiary);
14666
- color: var(--text-muted);
14837
+ 50% {
14838
+ opacity: 0.72;
14839
+ box-shadow: 0 0 0 3px transparent;
14667
14840
  }
14668
- .mint-batch-progress__cancel-btn:hover {
14669
- background-color: var(--bg-hover);
14670
- color: var(--text-primary);
14671
14841
  }
14672
- .mint-data-viewer {
14673
- border: 1px solid var(--border-color);
14674
- border-radius: var(--radius-md);
14675
- 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;
14676
14848
  }
14677
- .mint-data-viewer__header {
14678
- display: flex;
14849
+ }
14850
+ .mint-instrument-state {
14851
+ display: inline-flex;
14679
14852
  align-items: center;
14680
- justify-content: space-between;
14681
- padding: 8px 12px;
14682
- border-bottom: 1px solid var(--border-color);
14683
- background: var(--bg-secondary);
14684
- 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;
14685
14861
  }
14686
- .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);
14687
14865
  }
14688
- .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);
14689
14869
  }
14690
- .mint-data-viewer__content {
14691
- padding: 12px;
14692
- max-height: 600px;
14693
- 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);
14694
14873
  }
14695
- .mint-data-viewer__loading {
14696
- 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);
14697
14877
  }
14698
- .mint-data-viewer__skeleton {
14699
- display: flex;
14700
- flex-direction: column;
14701
- gap: 12px;
14878
+ .mint-instrument-state--muted {
14879
+ background: var(--bg-secondary, #f1f5f9);
14880
+ color: var(--text-muted, #64748b);
14702
14881
  }
14703
- .mint-data-viewer__empty {
14704
- text-align: center;
14705
- padding: 32px;
14706
- color: var(--text-muted);
14882
+ .mint-instrument-state--offline {
14883
+ border: 1px dashed var(--border-color, #e2e8f0);
14707
14884
  }
14708
- /* Summary view */
14709
- .mint-summary {
14710
- display: flex;
14711
- flex-direction: column;
14712
- gap: 16px;
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;
14713
14891
  }
14714
- /* Metadata pills row */
14715
- .mint-summary__metadata {
14892
+ .mint-instrument-card {
14716
14893
  display: flex;
14717
- flex-wrap: wrap;
14718
- gap: 6px;
14894
+ min-width: 0;
14895
+ flex-direction: column;
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;
14719
14902
  }
14720
- .mint-summary__pill {
14721
- display: inline-flex;
14722
- align-items: center;
14723
- border-radius: 6px;
14724
- overflow: hidden;
14725
- font-size: 0.8125rem;
14726
- line-height: 1;
14727
- border: 1px solid var(--border-color);
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);
14728
14906
  }
14729
- .mint-summary__pill--sm {
14730
- font-size: 0.75rem;
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);
14731
14910
  }
14732
- .mint-summary__pill-key {
14733
- padding: 4px 8px;
14734
- background: var(--bg-secondary);
14735
- color: var(--text-muted);
14736
- text-transform: capitalize;
14737
- font-weight: 500;
14911
+ .mint-instrument-card--connected {
14912
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
14738
14913
  }
14739
- .mint-summary__pill-value {
14740
- padding: 4px 8px;
14741
- color: var(--text-primary);
14914
+ .mint-instrument-card--disconnected {
14915
+ border-style: dashed;
14916
+ opacity: 0.68;
14742
14917
  }
14743
- /* Section */
14744
- .mint-summary__section {
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 {
14745
14923
  display: flex;
14746
- flex-direction: column;
14747
- gap: 12px;
14924
+ align-items: center;
14748
14925
  }
14749
- .mint-summary__section-label {
14750
- font-weight: 600;
14751
- font-size: 0.875rem;
14752
- color: var(--text-primary);
14926
+ .mint-instrument-card__header {
14927
+ gap: 0.625rem;
14928
+ min-width: 0;
14753
14929
  }
14754
- .mint-summary__section-count {
14755
- font-size: 0.75rem;
14756
- color: var(--text-muted);
14757
- margin-left: 8px;
14930
+ .mint-instrument-card__dot {
14931
+ width: 0.75rem;
14932
+ height: 0.75rem;
14933
+ flex: 0 0 auto;
14934
+ border-radius: 999px;
14758
14935
  }
14759
- .mint-summary__table-header {
14760
- display: flex;
14761
- align-items: baseline;
14762
- gap: 4px;
14936
+ .mint-instrument-card__dot--success {
14937
+ background: var(--mint-success, #22c55e);
14938
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
14763
14939
  }
14764
- /* Group cards */
14765
- .mint-summary__group-card {
14766
- border: 1px solid var(--border-color);
14767
- border-radius: var(--radius-md);
14768
- overflow: hidden;
14940
+ .mint-instrument-card__dot--warning {
14941
+ background: var(--mint-warning, #eab308);
14769
14942
  }
14770
- .mint-summary__group-header {
14771
- display: flex;
14772
- align-items: center;
14773
- justify-content: space-between;
14774
- padding: 10px 14px;
14775
- background: var(--bg-secondary);
14776
- border-bottom: 1px solid var(--border-color);
14943
+ .mint-instrument-card__dot--error {
14944
+ background: var(--mint-error, #ef4444);
14945
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
14777
14946
  }
14778
- .mint-summary__group-label {
14779
- font-weight: 600;
14780
- font-size: 0.875rem;
14781
- color: var(--text-primary);
14947
+ .mint-instrument-card__dot--info {
14948
+ background: var(--mint-info, #3b82f6);
14782
14949
  }
14783
- .mint-summary__group-count {
14784
- font-size: 0.75rem;
14785
- color: var(--text-muted);
14786
- background: var(--bg-tertiary);
14787
- padding: 2px 8px;
14788
- border-radius: 10px;
14950
+ .mint-instrument-card__dot--muted {
14951
+ background: var(--text-muted, #64748b);
14952
+ opacity: 0.38;
14789
14953
  }
14790
- .mint-summary__group-meta {
14791
- display: flex;
14792
- flex-wrap: wrap;
14793
- gap: 6px;
14794
- padding: 8px 14px;
14795
- border-bottom: 1px solid var(--border-color);
14954
+ .mint-instrument-card__name {
14955
+ min-width: 0;
14956
+ flex: 1 1 auto;
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;
14796
14963
  }
14797
- /* TimeRangeInput Component Styles */
14798
- .mint-time-range {
14964
+ .mint-instrument-card__sample {
14799
14965
  display: flex;
14800
- align-items: center;
14801
- gap: 0.5rem;
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;
14802
14972
  }
14803
- .mint-time-range__start,
14804
- .mint-time-range__end {
14805
- flex: 1;
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;
14979
+ }
14980
+ .mint-instrument-card__sample-row {
14981
+ gap: 0.375rem;
14806
14982
  min-width: 0;
14807
14983
  }
14808
- .mint-time-range__separator {
14809
- display: flex;
14810
- align-items: center;
14811
- gap: 0.5rem;
14812
- flex-shrink: 0;
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);
14813
14990
  }
14814
- .mint-time-range__separator::before,
14815
- .mint-time-range__separator::after {
14816
- content: '';
14817
- display: block;
14818
- width: 1rem;
14819
- height: 2px;
14820
- background-color: var(--border-color);
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;
14821
14998
  }
14822
- .mint-time-range__duration {
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);
14823
15012
  font-size: 0.75rem;
14824
- color: var(--text-muted);
14825
- background-color: var(--bg-tertiary);
14826
- border-radius: var(--radius, 0.375rem);
14827
- padding: 0.125rem 0.5rem;
14828
- white-space: nowrap;
14829
15013
  }
14830
- .mint-time-range__duration--error {
14831
- color: var(--mint-error);
15014
+ .mint-instrument-card__sample-vial {
15015
+ flex: 0 0 auto;
15016
+ font-size: 0.6875rem;
14832
15017
  }
14833
- /* ResourceCard Component Styles */
14834
- .mint-resource-card {
14835
- background-color: var(--bg-card);
14836
- border: 1px solid var(--border-color);
14837
- border-radius: var(--radius-lg);
14838
- box-shadow: var(--shadow-sm);
14839
- cursor: pointer;
14840
- transition: box-shadow 0.15s ease, border-color 0.15s ease;
14841
- overflow: hidden;
15018
+ .mint-instrument-card__eta {
15019
+ gap: 0.5rem;
15020
+ border-radius: 0.5rem;
15021
+ background: var(--bg-secondary, #f1f5f9);
15022
+ padding: 0.5rem 0.625rem;
14842
15023
  }
14843
- .mint-resource-card:hover {
14844
- box-shadow: var(--shadow-md);
14845
- border-color: rgba(59, 130, 246, 0.3);
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;
14846
15029
  }
14847
-
14848
- /* Compact mode */
14849
- .mint-resource-card--compact {
14850
- border-radius: 0;
14851
- box-shadow: none;
14852
- border: none;
14853
- border-bottom: 1px solid var(--border-color);
14854
- display: flex;
14855
- align-items: center;
14856
- gap: 0.75rem;
14857
- padding: 0.5rem 0.75rem;
14858
- min-height: 40px;
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;
14859
15035
  }
14860
- .mint-resource-card--compact:hover {
14861
- box-shadow: none;
14862
- border-color: var(--border-color);
14863
- background-color: var(--bg-hover);
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;
14864
15041
  }
14865
-
14866
- /* Card layout (non-compact) */
14867
- .mint-resource-card__header {
14868
- display: flex;
14869
- align-items: flex-start;
14870
- gap: 0.75rem;
14871
- padding: 1rem;
14872
- padding-bottom: 0;
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;
14873
15047
  }
14874
-
14875
- /* Size variants for header padding */
14876
- .mint-resource-card--sm .mint-resource-card__header {
14877
- padding: 0.75rem;
14878
- padding-bottom: 0;
14879
- gap: 0.625rem;
15048
+ .mint-instrument-card__error-message {
15049
+ color: var(--mint-error, #ef4444);
15050
+ font-size: 0.8125rem;
15051
+ font-weight: 700;
14880
15052
  }
14881
- .mint-resource-card--lg .mint-resource-card__header {
14882
- padding: 1.25rem;
14883
- padding-bottom: 0;
14884
- gap: 1rem;
15053
+ .mint-instrument-card__error-detail {
15054
+ margin-top: 0.25rem;
15055
+ color: var(--text-muted, #64748b);
15056
+ font-size: 0.75rem;
14885
15057
  }
14886
-
14887
- /* Image / fallback icon */
14888
- .mint-resource-card__image {
14889
- width: 64px;
14890
- height: 64px;
14891
- border-radius: var(--radius-md);
14892
- overflow: hidden;
14893
- flex-shrink: 0;
15058
+ .mint-instrument-card__placeholder {
15059
+ display: grid;
15060
+ gap: 0.625rem;
14894
15061
  }
14895
- .mint-resource-card--sm .mint-resource-card__image {
14896
- width: 48px;
14897
- height: 48px;
15062
+ .mint-instrument-alert-log {
15063
+ display: flex;
15064
+ min-height: 0;
15065
+ flex-direction: column;
14898
15066
  }
14899
- .mint-resource-card--lg .mint-resource-card__image {
14900
- width: 80px;
14901
- height: 80px;
15067
+ .mint-instrument-alert-log__header {
15068
+ padding: 0.875rem 1rem 0.625rem;
14902
15069
  }
14903
- .mint-resource-card__image img {
14904
- width: 100%;
14905
- height: 100%;
14906
- object-fit: cover;
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;
14907
15076
  }
14908
- .mint-resource-card__image-fallback {
14909
- width: 100%;
14910
- height: 100%;
15077
+ .mint-instrument-alert-log__filters {
15078
+ display: flex;
15079
+ flex-direction: column;
15080
+ gap: 0.375rem;
15081
+ border-bottom: 1px solid var(--border-color, #e2e8f0);
15082
+ padding: 0 0.75rem 0.625rem;
15083
+ }
15084
+ .mint-instrument-alert-log__filter-row {
14911
15085
  display: flex;
15086
+ flex-wrap: wrap;
15087
+ gap: 0.3125rem;
15088
+ }
15089
+ .mint-instrument-alert-log__filter {
15090
+ display: inline-flex;
14912
15091
  align-items: center;
14913
- justify-content: center;
14914
- background-color: var(--bg-tertiary);
14915
- color: var(--text-muted);
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;
14916
15103
  }
14917
- .mint-resource-card__image-fallback svg {
14918
- width: 50%;
14919
- height: 50%;
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;
14920
15109
  }
14921
-
14922
- /* Body section */
14923
- .mint-resource-card__body {
14924
- flex: 1;
14925
- min-width: 0;
15110
+ .mint-instrument-alert-log__filter:hover {
15111
+ opacity: 0.86;
14926
15112
  }
14927
- .mint-resource-card__title-row {
14928
- display: flex;
14929
- align-items: center;
14930
- justify-content: space-between;
14931
- gap: 0.75rem;
15113
+ .mint-instrument-alert-log__filter--active:hover {
15114
+ opacity: 1;
14932
15115
  }
14933
- .mint-resource-card__name {
14934
- font-size: 0.9375rem;
14935
- font-weight: 600;
14936
- color: var(--text-primary);
14937
- margin-top: 0 !important;
14938
- margin-bottom: 0 !important;
14939
- margin-left: 0;
14940
- margin-right: 0;
14941
- padding: 0 !important;
14942
- line-height: 1.3;
14943
- overflow: hidden;
14944
- text-overflow: ellipsis;
14945
- white-space: nowrap;
15116
+ .mint-instrument-alert-log__filter-dot {
15117
+ width: 0.375rem;
15118
+ height: 0.375rem;
15119
+ flex: 0 0 auto;
15120
+ border-radius: 999px;
14946
15121
  }
14947
- .mint-resource-card--sm .mint-resource-card__name {
14948
- font-size: 0.8125rem;
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;
14949
15128
  }
14950
- .mint-resource-card--lg .mint-resource-card__name {
14951
- font-size: 1.0625rem;
15129
+ .mint-instrument-alert-log__list {
15130
+ display: flex;
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;
14952
15137
  }
14953
- .mint-resource-card__description {
15138
+ .mint-instrument-alert {
15139
+ border-left: 3px solid transparent;
15140
+ border-radius: 0.375rem;
14954
15141
  font-size: 0.8125rem;
14955
- color: var(--text-secondary);
14956
- margin-top: 0.125rem !important;
14957
- margin-bottom: 0 !important;
14958
- margin-left: 0;
14959
- margin-right: 0;
14960
- padding: 0 !important;
14961
15142
  line-height: 1.4;
14962
- overflow: hidden;
14963
- text-overflow: ellipsis;
14964
- white-space: nowrap;
14965
- }
14966
- .mint-resource-card__location {
14967
- font-size: 0.75rem;
14968
- color: var(--text-muted);
14969
- margin-top: 0.25rem !important;
14970
- margin-bottom: 0 !important;
14971
- margin-left: 0;
14972
- margin-right: 0;
14973
- padding: 0 !important;
15143
+ padding: 0.625rem 0.75rem;
15144
+ transition: opacity 150ms ease-out;
14974
15145
  }
14975
-
14976
- /* Status indicator */
14977
- .mint-resource-card__status {
14978
- display: inline-flex;
14979
- align-items: center;
14980
- gap: 0.375rem;
14981
- flex-shrink: 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);
14982
15149
  }
14983
- .mint-resource-card__status-dot {
14984
- width: 8px;
14985
- height: 8px;
14986
- border-radius: 50%;
14987
- flex-shrink: 0;
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);
14988
15153
  }
14989
- .mint-resource-card__status-dot--available {
14990
- background-color: var(--mint-success);
14991
- color: var(--mint-success);
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);
14992
15157
  }
14993
- .mint-resource-card__status-dot--in-use {
14994
- background-color: var(--color-primary);
14995
- color: var(--color-primary);
14996
- animation: mint-resource-pulse 2s ease-in-out infinite;
15158
+ .mint-instrument-alert--acknowledged {
15159
+ opacity: 0.52;
14997
15160
  }
14998
- .mint-resource-card__status-dot--maintenance {
14999
- background-color: var(--mint-warning);
15000
- color: var(--mint-warning);
15161
+ .mint-instrument-alert__header {
15162
+ gap: 0.375rem;
15163
+ margin-bottom: 0.1875rem;
15164
+ min-width: 0;
15001
15165
  }
15002
- .mint-resource-card__status-dot--offline {
15003
- background-color: var(--mint-error);
15004
- color: var(--mint-error);
15166
+ .mint-instrument-alert__instrument {
15167
+ min-width: 0;
15168
+ overflow: hidden;
15169
+ color: var(--text-primary, #0f172a);
15170
+ font-size: 0.8125rem;
15171
+ font-weight: 700;
15172
+ text-overflow: ellipsis;
15173
+ white-space: nowrap;
15005
15174
  }
15006
- .mint-resource-card__status-label {
15007
- font-size: 0.75rem;
15008
- font-weight: 500;
15009
- color: var(--text-secondary);
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;
15010
15185
  }
15011
-
15012
- /* Compact status: colored text only */
15013
- .mint-resource-card--compact .mint-resource-card__status-label--available {
15014
- color: var(--mint-success);
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;
15015
15192
  }
15016
- .mint-resource-card--compact .mint-resource-card__status-label--in-use {
15017
- color: var(--color-primary);
15193
+ .mint-instrument-alert__detail {
15194
+ color: var(--text-secondary, #475569);
15195
+ font-size: 0.8125rem;
15196
+ line-height: 1.5;
15197
+ overflow-wrap: break-word;
15018
15198
  }
15019
- .mint-resource-card--compact .mint-resource-card__status-label--maintenance {
15020
- color: var(--mint-warning);
15199
+ .mint-instrument-alert__footer {
15200
+ gap: 0.5rem;
15201
+ margin-top: 0.375rem;
15021
15202
  }
15022
- .mint-resource-card--compact .mint-resource-card__status-label--offline {
15023
- color: var(--mint-error);
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;
15024
15211
  }
15025
- .mint-resource-card__next-available {
15026
- font-size: 0.75rem;
15027
- color: var(--text-muted);
15028
- margin-top: 0.125rem !important;
15029
- margin-bottom: 0 !important;
15030
- margin-left: 0;
15031
- margin-right: 0;
15032
- padding: 0 !important;
15212
+ .mint-instrument-alert__code {
15213
+ font-family: var(--font-mono, 'Fira Code', monospace);
15214
+ font-weight: 700;
15033
15215
  }
15034
-
15035
- /* Specs grid */
15036
- .mint-resource-card__specs {
15037
- display: grid;
15038
- grid-template-columns: repeat(2, 1fr);
15039
- gap: 0.5rem 1rem;
15040
- padding: 0.75rem 1rem;
15216
+ .mint-instrument-alert__ack {
15217
+ cursor: pointer;
15218
+ transition: background 150ms ease-out, color 150ms ease-out;
15041
15219
  }
15042
- .mint-resource-card--sm .mint-resource-card__specs {
15043
- padding: 0.5rem 0.75rem;
15044
- gap: 0.375rem 0.75rem;
15220
+ .mint-instrument-alert__ack:hover {
15221
+ background: var(--bg-primary, #fff);
15222
+ color: var(--text-primary, #0f172a);
15045
15223
  }
15046
- .mint-resource-card--lg .mint-resource-card__specs {
15047
- padding: 0.75rem 1.25rem;
15048
- gap: 0.5rem 1.25rem;
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;
15049
15229
  }
15050
- .mint-resource-card__spec {
15051
- display: flex;
15052
- flex-direction: column;
15053
- gap: 0.0625rem;
15230
+ .mint-instrument-alert-enter-active {
15231
+ transition: opacity 0.2s ease-out;
15054
15232
  }
15055
- .mint-resource-card__spec-label {
15056
- font-size: 0.6875rem;
15057
- color: var(--text-muted);
15058
- text-transform: uppercase;
15059
- letter-spacing: 0.025em;
15233
+ .mint-instrument-alert-leave-active {
15234
+ transition: opacity 0.15s ease-in;
15060
15235
  }
15061
- .mint-resource-card__spec-value {
15062
- font-size: 0.8125rem;
15063
- font-weight: 500;
15064
- color: var(--text-primary);
15236
+ .mint-instrument-alert-enter-from,
15237
+ .mint-instrument-alert-leave-to {
15238
+ opacity: 0;
15065
15239
  }
15066
-
15067
- /* Footer (tags + action) */
15068
- .mint-resource-card__footer {
15069
- display: flex;
15070
- align-items: center;
15071
- justify-content: space-between;
15072
- gap: 0.75rem;
15073
- padding: 0.75rem 1rem;
15074
- padding-top: 0;
15240
+ @keyframes mint-instrument-pulse {
15241
+ 0%, 100% {
15242
+ opacity: 1;
15243
+ box-shadow: 0 0 0 0 currentColor;
15075
15244
  }
15076
- .mint-resource-card--sm .mint-resource-card__footer {
15077
- padding: 0.5rem 0.75rem;
15078
- padding-top: 0;
15245
+ 50% {
15246
+ opacity: 0.72;
15247
+ box-shadow: 0 0 0 3px transparent;
15079
15248
  }
15080
- .mint-resource-card--lg .mint-resource-card__footer {
15081
- padding: 0.75rem 1.25rem;
15082
- padding-top: 0;
15083
15249
  }
15084
- .mint-resource-card__tags {
15085
- display: flex;
15086
- flex-wrap: wrap;
15087
- gap: 0.375rem;
15088
- flex: 1;
15089
- min-width: 0;
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;
15090
15256
  }
15091
- .mint-resource-card__action {
15092
- flex-shrink: 0;
15093
15257
  }
15094
-
15095
- /* Book button */
15096
- .mint-resource-card__book-btn {
15258
+ .mint-instrument-state {
15097
15259
  display: inline-flex;
15098
15260
  align-items: center;
15099
- gap: 0.25rem;
15100
- padding: 0.375rem 0.75rem;
15101
- background-color: var(--color-primary);
15102
- color: white;
15103
- border: none;
15104
- border-radius: var(--radius);
15105
- font-size: 0.8125rem;
15106
- font-weight: 500;
15107
- cursor: pointer;
15108
- transition: background-color 0.15s ease;
15109
- font-family: inherit;
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;
15110
15268
  white-space: nowrap;
15111
15269
  }
15112
- .mint-resource-card__book-btn:hover {
15113
- background-color: var(--color-primary-hover);
15114
- }
15115
-
15116
- /* Compact book button: ghost style */
15117
- .mint-resource-card--compact .mint-resource-card__book-btn {
15118
- background-color: transparent;
15119
- color: var(--color-primary);
15120
- font-size: 0.75rem;
15121
- padding: 0.25rem 0.5rem;
15122
- border-radius: var(--radius-sm);
15123
- }
15124
- .mint-resource-card--compact .mint-resource-card__book-btn:hover {
15125
- background-color: rgba(59, 130, 246, 0.1);
15126
- }
15127
-
15128
- /* Compact layout overrides */
15129
- .mint-resource-card--compact .mint-resource-card__name {
15130
- font-size: 0.875rem;
15131
- flex: 1;
15132
- min-width: 0;
15270
+ .mint-instrument-state--success {
15271
+ background: color-mix(in srgb, var(--mint-success, #22c55e) 12%, transparent);
15272
+ color: var(--mint-success, #22c55e);
15133
15273
  }
15134
-
15135
- /* Spacer between header and specs/footer */
15136
- .mint-resource-card__content {
15137
- display: flex;
15138
- flex-direction: column;
15274
+ .mint-instrument-state--warning {
15275
+ background: color-mix(in srgb, var(--mint-warning, #eab308) 12%, transparent);
15276
+ color: var(--mint-warning, #eab308);
15139
15277
  }
15140
-
15141
- /* Pulse animation for in-use status */
15142
- @keyframes mint-resource-pulse {
15143
- 0%, 100% {
15144
- box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
15278
+ .mint-instrument-state--error {
15279
+ background: color-mix(in srgb, var(--mint-error, #ef4444) 12%, transparent);
15280
+ color: var(--mint-error, #ef4444);
15145
15281
  }
15146
- 50% {
15147
- box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
15282
+ .mint-instrument-state--info {
15283
+ background: color-mix(in srgb, var(--mint-info, #3b82f6) 12%, transparent);
15284
+ color: var(--mint-info, #3b82f6);
15148
15285
  }
15286
+ .mint-instrument-state--muted {
15287
+ background: var(--bg-secondary, #f1f5f9);
15288
+ color: var(--text-muted, #64748b);
15149
15289
  }
15150
-
15151
- /* Reduced motion */
15152
- @media (prefers-reduced-motion: reduce) {
15153
- .mint-resource-card__status-dot--in-use {
15154
- animation: none;
15290
+ .mint-instrument-state--offline {
15291
+ border: 1px dashed var(--border-color, #e2e8f0);
15155
15292
  }
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;
15156
15299
  }
15157
- /* FitPanel Component Styles */
15158
- .mint-fit-panel {
15300
+ .mint-instrument-card {
15159
15301
  display: flex;
15302
+ min-width: 0;
15160
15303
  flex-direction: column;
15161
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;
15162
15310
  }
15163
-
15164
- /* Action bar */
15165
- .mint-fit-panel__actions {
15166
- display: flex;
15167
- gap: 0.5rem;
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);
15168
15314
  }
15169
-
15170
- /* Progress */
15171
- .mint-fit-panel__progress {
15172
- padding: 0.25rem 0;
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);
15173
15318
  }
15174
-
15175
- /* Result list */
15176
- .mint-fit-panel__results {
15177
- border: 1px solid var(--border-color);
15178
- border-radius: var(--radius-sm);
15179
- overflow: hidden;
15319
+ .mint-instrument-card--connected {
15320
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
15180
15321
  }
15181
- .mint-fit-panel__result-list {
15182
- display: flex;
15183
- flex-direction: column;
15322
+ .mint-instrument-card--disconnected {
15323
+ border-style: dashed;
15324
+ opacity: 0.68;
15184
15325
  }
15185
- .mint-fit-panel__result-row {
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 {
15186
15331
  display: flex;
15187
- justify-content: space-between;
15188
15332
  align-items: center;
15189
- padding: 0.5rem 0.75rem;
15190
- border-bottom: 1px solid var(--border-color);
15191
15333
  }
15192
- .mint-fit-panel__result-row:last-child {
15193
- border-bottom: none;
15334
+ .mint-instrument-card__header {
15335
+ gap: 0.625rem;
15336
+ min-width: 0;
15194
15337
  }
15195
- .mint-fit-panel__result-label {
15196
- font-size: 0.8125rem;
15197
- color: var(--text-secondary);
15338
+ .mint-instrument-card__dot {
15339
+ width: 0.75rem;
15340
+ height: 0.75rem;
15341
+ flex: 0 0 auto;
15342
+ border-radius: 999px;
15198
15343
  }
15199
- .mint-fit-panel__result-value {
15200
- font-size: 0.8125rem;
15201
- font-weight: 500;
15202
- color: var(--text-primary);
15203
- font-variant-numeric: tabular-nums;
15344
+ .mint-instrument-card__dot--success {
15345
+ background: var(--mint-success, #22c55e);
15346
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
15347
+ }
15348
+ .mint-instrument-card__dot--warning {
15349
+ background: var(--mint-warning, #eab308);
15350
+ }
15351
+ .mint-instrument-card__dot--error {
15352
+ background: var(--mint-error, #ef4444);
15353
+ box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
15354
+ }
15355
+ .mint-instrument-card__dot--info {
15356
+ background: var(--mint-info, #3b82f6);
15357
+ }
15358
+ .mint-instrument-card__dot--muted {
15359
+ background: var(--text-muted, #64748b);
15360
+ opacity: 0.38;
15361
+ }
15362
+ .mint-instrument-card__name {
15363
+ min-width: 0;
15364
+ flex: 1 1 auto;
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;
15371
+ }
15372
+ .mint-instrument-card__sample {
15373
+ display: flex;
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;
15380
+ }
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;
16655
+ padding: 0.5rem 0.75rem;
16656
+ border-bottom: 1px solid var(--border-color);
16657
+ }
16658
+ .mint-fit-panel__result-row:last-child {
16659
+ border-bottom: none;
16660
+ }
16661
+ .mint-fit-panel__result-label {
16662
+ font-size: 0.8125rem;
16663
+ color: var(--text-secondary);
16664
+ }
16665
+ .mint-fit-panel__result-value {
16666
+ font-size: 0.8125rem;
16667
+ font-weight: 500;
16668
+ color: var(--text-primary);
16669
+ font-variant-numeric: tabular-nums;
15204
16670
  }
15205
16671
 
15206
16672
  /* Result value variants */
@@ -18076,551 +19542,959 @@ code, pre {
18076
19542
  .mint-timeline__spacer--vertical {
18077
19543
  height: 1rem;
18078
19544
  }
18079
- .mint-timeline__spacer--horizontal {
18080
- width: 2rem;
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;
19594
+ }
19595
+ .mint-timeline__add-end--md {
19596
+ padding: 0.75rem;
19597
+ }
19598
+ .mint-timeline__add-end--lg {
19599
+ padding: 1rem;
19600
+ }
19601
+ .mint-timeline--horizontal .mint-timeline__add-end {
19602
+ min-width: 120px;
19603
+ flex-shrink: 0;
19604
+ }
19605
+ .mint-timeline--vertical .mint-timeline__add-end {
19606
+ width: 100%;
19607
+ margin-top: 1rem;
19608
+ }
19609
+ .mint-timeline__add-end:hover {
19610
+ color: var(--color-primary);
19611
+ border-color: var(--color-primary);
19612
+ }
19613
+ .mint-timeline__add-end svg {
19614
+ width: 1rem;
19615
+ height: 1rem;
19616
+ }
19617
+ .mint-timeline__add-end-text--sm {
19618
+ font-size: 0.75rem;
19619
+ }
19620
+ .mint-timeline__add-end-text--md {
19621
+ font-size: 0.875rem;
19622
+ }
19623
+ .mint-timeline__add-end-text--lg {
19624
+ font-size: 1rem;
19625
+ }
19626
+ /* ==========================================================================
19627
+ FileUploader Component Styles
19628
+ ========================================================================== */
19629
+ .mint-file-uploader {
19630
+ display: flex;
19631
+ flex-direction: column;
19632
+ gap: 0.75rem;
19633
+ }
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;
19644
+ }
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));
19648
+ }
19649
+ .mint-file-uploader__dropzone:focus-visible {
19650
+ outline: 2px solid var(--color-primary);
19651
+ outline-offset: 2px;
19652
+ }
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));
19656
+ }
19657
+ .mint-file-uploader__dropzone--disabled {
19658
+ opacity: var(--mint-disabled-opacity);
19659
+ cursor: not-allowed;
19660
+ }
19661
+ .mint-file-uploader__dropzone--sm {
19662
+ padding: 1.25rem;
19663
+ }
19664
+ .mint-file-uploader__dropzone--md {
19665
+ padding: 1.5rem;
19666
+ }
19667
+ .mint-file-uploader__dropzone--lg {
19668
+ padding: 2rem;
19669
+ }
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;
19678
+ }
19679
+ .mint-file-uploader__input {
19680
+ display: none;
19681
+ }
19682
+ .mint-file-uploader__icon {
19683
+ width: 2rem;
19684
+ height: 2rem;
19685
+ color: var(--text-muted);
19686
+ margin-bottom: 0.5rem;
19687
+ }
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);
19691
+ }
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;
19698
+ }
19699
+ /* ==========================================================================
19700
+ Actions slot
19701
+ ========================================================================== */
19702
+ .mint-file-uploader__actions {
19703
+ display: flex;
19704
+ gap: 0.5rem;
19705
+ }
19706
+ /* ==========================================================================
19707
+ File list with transitions
19708
+ ========================================================================== */
19709
+ .mint-file-uploader__list {
19710
+ display: flex;
19711
+ flex-direction: column;
19712
+ gap: 0.375rem;
19713
+ list-style: none;
19714
+ margin: 0;
19715
+ padding: 0;
19716
+ }
19717
+ .mint-file-uploader-item-enter-active {
19718
+ transition: all 0.2s ease-out;
19719
+ }
19720
+ .mint-file-uploader-item-leave-active {
19721
+ transition: all 0.15s ease-in;
19722
+ }
19723
+ .mint-file-uploader-item-enter-from {
19724
+ opacity: 0;
19725
+ transform: translateX(-8px);
19726
+ }
19727
+ .mint-file-uploader-item-leave-to {
19728
+ opacity: 0;
19729
+ transform: translateX(8px);
19730
+ }
19731
+ .mint-file-uploader-item-move {
19732
+ transition: transform 0.2s ease-out;
19733
+ }
19734
+ /* File row */
19735
+ .mint-file-uploader__file {
19736
+ display: flex;
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;
19745
+ }
19746
+ .mint-file-uploader__file:hover {
19747
+ border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
18081
19748
  }
18082
- /* Empty state */
18083
- .mint-timeline__empty {
19749
+ .mint-file-uploader__file-info {
18084
19750
  display: flex;
18085
19751
  align-items: center;
18086
- justify-content: center;
18087
- padding: 2rem;
18088
- border: 2px dashed var(--border-color);
18089
- border-radius: var(--radius-md);
19752
+ gap: 0.625rem;
19753
+ min-width: 0;
19754
+ flex: 1;
18090
19755
  }
18091
- .mint-timeline__empty-content {
18092
- text-align: center;
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);
18093
19773
  }
18094
- .mint-timeline__empty-text {
18095
- color: var(--text-muted);
18096
- margin-top: 0 !important;
18097
- margin-bottom: 0.5rem !important;
18098
- padding: 0 !important;
19774
+ .mint-file-uploader__file-meta {
19775
+ display: flex;
19776
+ flex-direction: column;
19777
+ gap: 0.0625rem;
19778
+ min-width: 0;
18099
19779
  }
18100
- .mint-timeline__empty-btn {
18101
- padding: 0.375rem 0.75rem;
18102
- font-size: 0.875rem;
18103
- background-color: var(--color-primary);
18104
- color: white;
18105
- border: none;
18106
- border-radius: var(--radius-md);
18107
- cursor: pointer;
18108
- transition: background-color 0.15s ease;
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;
18109
19787
  }
18110
- .mint-timeline__empty-btn:hover {
18111
- opacity: 0.9;
19788
+ .mint-file-uploader__file-size {
19789
+ font-size: 0.6875rem;
19790
+ color: var(--text-muted);
19791
+ font-family: 'Fira Code', monospace;
18112
19792
  }
18113
- /* Add step button (end) */
18114
- .mint-timeline__add-end {
19793
+ /* ==========================================================================
19794
+ Remove button (shared between file rows and folder summary)
19795
+ ========================================================================== */
19796
+ .mint-file-uploader__remove-btn {
18115
19797
  display: flex;
18116
19798
  align-items: center;
18117
19799
  justify-content: center;
18118
- gap: 0.5rem;
18119
- border: 2px dashed var(--border-color);
18120
- border-radius: var(--radius-md);
19800
+ flex-shrink: 0;
19801
+ width: 1.75rem;
19802
+ height: 1.75rem;
19803
+ padding: 0;
19804
+ border-radius: var(--radius-sm);
18121
19805
  color: var(--text-muted);
18122
19806
  background: transparent;
19807
+ border: none;
18123
19808
  cursor: pointer;
18124
- transition: color 0.15s ease, border-color 0.15s ease;
19809
+ transition: color 0.15s ease, background-color 0.15s ease;
18125
19810
  }
18126
- .mint-timeline__add-end--sm {
18127
- padding: 0.5rem;
19811
+ .mint-file-uploader__remove-btn:hover {
19812
+ color: var(--mint-error);
19813
+ background-color: var(--mint-error-bg);
18128
19814
  }
18129
- .mint-timeline__add-end--md {
19815
+ .mint-file-uploader__remove-icon {
19816
+ width: 0.875rem;
19817
+ height: 0.875rem;
19818
+ }
19819
+ /* ==========================================================================
19820
+ Folder summary
19821
+ ========================================================================== */
19822
+ .mint-file-uploader__folder-summary {
19823
+ display: flex;
19824
+ align-items: center;
19825
+ justify-content: space-between;
18130
19826
  padding: 0.75rem;
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;
18131
19831
  }
18132
- .mint-timeline__add-end--lg {
18133
- padding: 1rem;
19832
+ .mint-file-uploader__folder-summary:hover {
19833
+ border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
18134
19834
  }
18135
- .mint-timeline--horizontal .mint-timeline__add-end {
18136
- min-width: 120px;
18137
- flex-shrink: 0;
19835
+ .mint-file-uploader__folder-info {
19836
+ display: flex;
19837
+ align-items: center;
19838
+ gap: 0.75rem;
19839
+ min-width: 0;
18138
19840
  }
18139
- .mint-timeline--vertical .mint-timeline__add-end {
18140
- width: 100%;
18141
- margin-top: 1rem;
19841
+ .mint-file-uploader__folder-icon-wrapper {
19842
+ display: flex;
19843
+ align-items: center;
19844
+ justify-content: center;
19845
+ width: 2.25rem;
19846
+ height: 2.25rem;
19847
+ flex-shrink: 0;
19848
+ border-radius: var(--radius-sm);
19849
+ background: color-mix(in srgb, var(--color-primary) 8%, transparent);
18142
19850
  }
18143
- .mint-timeline__add-end:hover {
19851
+ .mint-file-uploader__folder-icon {
19852
+ width: 1.25rem;
19853
+ height: 1.25rem;
18144
19854
  color: var(--color-primary);
18145
- border-color: var(--color-primary);
18146
- }
18147
- .mint-timeline__add-end svg {
18148
- width: 1rem;
18149
- height: 1rem;
18150
19855
  }
18151
- .mint-timeline__add-end-text--sm {
18152
- 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;
18153
19861
  }
18154
- .mint-timeline__add-end-text--md {
18155
- 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;
18156
19869
  }
18157
- .mint-timeline__add-end-text--lg {
18158
- 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;
18159
19874
  }
18160
19875
  /* ==========================================================================
18161
- FileUploader Component Styles
19876
+ Reduced motion
18162
19877
  ========================================================================== */
18163
- .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 {
18164
19891
  display: flex;
18165
19892
  flex-direction: column;
18166
- gap: 0.75rem;
19893
+ gap: 0.375rem;
18167
19894
  }
18168
- /* ==========================================================================
18169
- Dropzone
18170
- ========================================================================== */
18171
- .mint-file-uploader__dropzone {
18172
- position: relative;
18173
- border: 2px dashed var(--border-color);
18174
- 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));
18175
19945
  cursor: pointer;
18176
- background: var(--bg-secondary);
18177
- transition: border-color 0.15s ease, background-color 0.15s ease;
19946
+ border: none;
19947
+ box-sizing: border-box;
19948
+ transform: translateY(0);
18178
19949
  }
18179
- .mint-file-uploader__dropzone:hover {
18180
- border-color: var(--color-primary);
18181
- background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
19950
+ .mint-icon-button:hover:not(.mint-icon-button--disabled) {
19951
+ transform: translateY(-1px);
18182
19952
  }
18183
- .mint-file-uploader__dropzone:focus-visible {
18184
- outline: 2px solid var(--color-primary);
18185
- outline-offset: 2px;
19953
+ .mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost) {
19954
+ box-shadow: var(--shadow-sm);
19955
+ }
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;
18186
19961
  }
18187
- .mint-file-uploader__dropzone--dragover {
18188
- border-color: var(--color-primary);
18189
- 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);
18190
19965
  }
18191
- .mint-file-uploader__dropzone--disabled {
19966
+ .mint-icon-button--disabled {
18192
19967
  opacity: var(--mint-disabled-opacity);
18193
19968
  cursor: not-allowed;
18194
19969
  }
18195
- .mint-file-uploader__dropzone--sm {
18196
- 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);
18197
19978
  }
18198
- .mint-file-uploader__dropzone--md {
18199
- 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
+ );
18200
19989
  }
18201
- .mint-file-uploader__dropzone--lg {
18202
- padding: 2rem;
19990
+ /* Variants */
19991
+ .mint-icon-button--primary {
19992
+ background-color: var(--color-primary);
19993
+ color: white;
18203
19994
  }
18204
- /* ==========================================================================
18205
- Content area
18206
- ========================================================================== */
18207
- .mint-file-uploader__content {
18208
- display: flex;
18209
- flex-direction: column;
18210
- align-items: center;
18211
- text-align: center;
19995
+ .mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
19996
+ background-color: var(--color-primary-hover);
18212
19997
  }
18213
- .mint-file-uploader__input {
18214
- 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);
18215
20002
  }
18216
- .mint-file-uploader__icon {
18217
- width: 2rem;
18218
- height: 2rem;
18219
- color: var(--text-muted);
18220
- margin-bottom: 0.5rem;
20003
+ .mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
20004
+ background-color: var(--bg-tertiary);
18221
20005
  }
18222
- .mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
18223
- .mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
18224
- color: var(--color-primary);
20006
+ .mint-icon-button--cta {
20007
+ background-color: var(--color-cta);
20008
+ color: white;
18225
20009
  }
18226
- .mint-file-uploader__text {
18227
- color: var(--text-secondary);
18228
- font-size: 0.8125rem;
18229
- font-weight: 500;
18230
- margin: 0;
18231
- padding: 0;
20010
+ .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
20011
+ background-color: var(--color-cta-hover);
18232
20012
  }
18233
- /* ==========================================================================
18234
- Actions slot
18235
- ========================================================================== */
18236
- .mint-file-uploader__actions {
18237
- display: flex;
18238
- gap: 0.5rem;
20013
+ .mint-icon-button--danger {
20014
+ background-color: var(--mint-error);
20015
+ color: white;
18239
20016
  }
18240
- /* ==========================================================================
18241
- File list with transitions
18242
- ========================================================================== */
18243
- .mint-file-uploader__list {
18244
- display: flex;
18245
- flex-direction: column;
18246
- gap: 0.375rem;
18247
- list-style: none;
18248
- margin: 0;
18249
- padding: 0;
20017
+ .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
20018
+ background-color: var(--mint-error-hover);
18250
20019
  }
18251
- .mint-file-uploader-item-enter-active {
18252
- transition: all 0.2s ease-out;
20020
+ .mint-icon-button--success {
20021
+ background-color: var(--mint-success);
20022
+ color: white;
18253
20023
  }
18254
- .mint-file-uploader-item-leave-active {
18255
- transition: all 0.15s ease-in;
20024
+ .mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
20025
+ background-color: var(--mint-success-hover);
18256
20026
  }
18257
- .mint-file-uploader-item-enter-from {
18258
- opacity: 0;
18259
- transform: translateX(-8px);
20027
+ .mint-icon-button--ghost {
20028
+ background-color: transparent;
20029
+ color: var(--text-secondary);
18260
20030
  }
18261
- .mint-file-uploader-item-leave-to {
18262
- opacity: 0;
18263
- 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);
18264
20034
  }
18265
- .mint-file-uploader-item-move {
18266
- transition: transform 0.2s ease-out;
20035
+ /* Sizes */
20036
+ .mint-icon-button--sm {
20037
+ padding: 0.375rem;
20038
+ min-height: var(--form-height-sm);
18267
20039
  }
18268
- /* File row */
18269
- .mint-file-uploader__file {
18270
- display: flex;
18271
- align-items: center;
18272
- justify-content: space-between;
18273
- gap: 0.5rem;
18274
- padding: 0.5rem 0.625rem;
18275
- border-radius: var(--radius-md);
18276
- background-color: var(--bg-secondary);
18277
- border: 1px solid var(--border-color);
18278
- transition: border-color 0.15s ease;
20040
+ .mint-icon-button--md {
20041
+ padding: 0.5rem;
20042
+ min-height: var(--form-height-md);
18279
20043
  }
18280
- .mint-file-uploader__file:hover {
18281
- 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);
18282
20047
  }
18283
- .mint-file-uploader__file-info {
18284
- display: flex;
20048
+ .mint-icon-button__icon--sm,
20049
+ .mint-icon-button__icon--md,
20050
+ .mint-icon-button__icon--lg {
20051
+ display: inline-flex;
18285
20052
  align-items: center;
18286
- gap: 0.625rem;
18287
- min-width: 0;
18288
- flex: 1;
20053
+ justify-content: center;
18289
20054
  }
18290
- /* File type badge */
18291
- .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 {
18292
20093
  display: inline-flex;
18293
20094
  align-items: center;
18294
- justify-content: center;
18295
- flex-shrink: 0;
18296
- min-width: 2.75rem;
18297
- padding: 0.1875rem 0.5rem;
18298
- border-radius: var(--radius-sm);
18299
- font-size: 0.625rem;
20095
+ gap: 0.3125rem;
20096
+ border-radius: 999px;
20097
+ font-size: 0.6875rem;
18300
20098
  font-weight: 700;
18301
- font-family: 'Fira Code', monospace;
18302
- letter-spacing: 0.025em;
18303
- text-transform: uppercase;
18304
- color: var(--badge-color);
18305
- background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
18306
- 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;
18307
20103
  }
18308
- .mint-file-uploader__file-meta {
18309
- display: flex;
18310
- flex-direction: column;
18311
- gap: 0.0625rem;
18312
- 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);
18313
20107
  }
18314
- .mint-file-uploader__file-name {
18315
- font-size: 0.8125rem;
18316
- font-weight: 500;
18317
- color: var(--text-primary);
18318
- white-space: nowrap;
18319
- overflow: hidden;
18320
- 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);
18321
20111
  }
18322
- .mint-file-uploader__file-size {
18323
- font-size: 0.6875rem;
18324
- color: var(--text-muted);
18325
- 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);
18326
20115
  }
18327
- /* ==========================================================================
18328
- Remove button (shared between file rows and folder summary)
18329
- ========================================================================== */
18330
- .mint-file-uploader__remove-btn {
18331
- display: flex;
18332
- align-items: center;
18333
- justify-content: center;
18334
- flex-shrink: 0;
18335
- width: 1.75rem;
18336
- height: 1.75rem;
18337
- padding: 0;
18338
- border-radius: var(--radius-sm);
18339
- color: var(--text-muted);
18340
- background: transparent;
18341
- border: none;
18342
- cursor: pointer;
18343
- 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);
18344
20119
  }
18345
- .mint-file-uploader__remove-btn:hover {
18346
- color: var(--mint-error);
18347
- 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);
20126
+ }
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;
20133
+ }
20134
+ .mint-instrument-card {
20135
+ display: flex;
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;
18348
20144
  }
18349
- .mint-file-uploader__remove-icon {
18350
- width: 0.875rem;
18351
- height: 0.875rem;
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);
18352
20148
  }
18353
- /* ==========================================================================
18354
- Folder summary
18355
- ========================================================================== */
18356
- .mint-file-uploader__folder-summary {
18357
- display: flex;
18358
- align-items: center;
18359
- justify-content: space-between;
18360
- padding: 0.75rem;
18361
- border-radius: var(--radius-md);
18362
- background-color: var(--bg-secondary);
18363
- border: 1px solid var(--border-color);
18364
- transition: border-color 0.15s ease;
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);
18365
20152
  }
18366
- .mint-file-uploader__folder-summary:hover {
18367
- border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
20153
+ .mint-instrument-card--connected {
20154
+ border-color: color-mix(in srgb, var(--mint-info, #3b82f6) 25%, var(--border-color, #e2e8f0));
18368
20155
  }
18369
- .mint-file-uploader__folder-info {
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 {
18370
20165
  display: flex;
18371
20166
  align-items: center;
18372
- gap: 0.75rem;
20167
+ }
20168
+ .mint-instrument-card__header {
20169
+ gap: 0.625rem;
18373
20170
  min-width: 0;
18374
20171
  }
18375
- .mint-file-uploader__folder-icon-wrapper {
18376
- display: flex;
18377
- align-items: center;
18378
- justify-content: center;
18379
- width: 2.25rem;
18380
- height: 2.25rem;
18381
- flex-shrink: 0;
18382
- border-radius: var(--radius-sm);
18383
- 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;
18384
20177
  }
18385
- .mint-file-uploader__folder-icon {
18386
- width: 1.25rem;
18387
- height: 1.25rem;
18388
- 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);
18389
20181
  }
18390
- .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 {
18391
20207
  display: flex;
18392
20208
  flex-direction: column;
18393
- 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;
18394
20224
  min-width: 0;
18395
20225
  }
18396
- .mint-file-uploader__folder-name {
18397
- font-size: 0.8125rem;
18398
- font-weight: 600;
18399
- color: var(--text-primary);
18400
- 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;
18401
20237
  overflow: hidden;
18402
20238
  text-overflow: ellipsis;
20239
+ white-space: nowrap;
18403
20240
  }
18404
- .mint-file-uploader__folder-count {
18405
- font-size: 0.6875rem;
18406
- color: var(--text-muted);
18407
- 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;
18408
20247
  }
18409
- /* ==========================================================================
18410
- Reduced motion
18411
- ========================================================================== */
18412
- @media (prefers-reduced-motion: reduce) {
18413
- .mint-file-uploader__dropzone {
18414
- transition: none;
18415
- }
18416
-
18417
- .mint-file-uploader-item-enter-active,
18418
- .mint-file-uploader-item-leave-active,
18419
- .mint-file-uploader-item-move {
18420
- transition: none;
18421
- }
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;
18422
20255
  }
18423
- /* FormField Component Styles */
18424
- .mint-form-field {
18425
- display: flex;
18426
- flex-direction: column;
18427
- gap: 0.375rem;
20256
+ .mint-instrument-card__sample-vial {
20257
+ flex: 0 0 auto;
20258
+ font-size: 0.6875rem;
18428
20259
  }
18429
- .mint-form-field__label-row {
18430
- display: flex;
18431
- align-items: baseline;
18432
- 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;
18433
20265
  }
18434
- .mint-form-field__label {
18435
- display: block;
18436
- font-size: 0.6875rem;
18437
- font-weight: 600;
18438
- text-transform: uppercase;
20266
+ .mint-instrument-card__eta-label {
20267
+ color: var(--text-muted, #64748b);
20268
+ font-size: 0.625rem;
20269
+ font-weight: 700;
18439
20270
  letter-spacing: 0.05em;
18440
- color: var(--text-secondary);
18441
20271
  }
18442
- .mint-form-field__required {
18443
- color: var(--mint-error);
18444
- 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;
18445
20277
  }
18446
- .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);
18447
20282
  font-size: 0.6875rem;
18448
- font-weight: 500;
18449
- color: var(--text-muted);
18450
- font-style: italic;
18451
- letter-spacing: 0;
18452
- text-transform: none;
18453
20283
  }
18454
- .mint-form-field__error {
18455
- font-size: 0.8125rem;
18456
- color: var(--mint-error);
18457
- 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;
18458
20289
  }
18459
- .mint-form-field__hint {
20290
+ .mint-instrument-card__error-message {
20291
+ color: var(--mint-error, #ef4444);
18460
20292
  font-size: 0.8125rem;
18461
- color: var(--text-muted);
18462
- margin: 0 !important;
20293
+ font-weight: 700;
18463
20294
  }
18464
- /* IconButton Component Styles */
18465
- .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 {
18466
20332
  display: inline-flex;
18467
20333
  align-items: center;
18468
- justify-content: center;
18469
- border-radius: var(--radius-md);
18470
- /* Mirrors BaseButton's tactile-physicality system: gradient overlay on filled
18471
- variants (see rule below), hover lift, press-to-flat. See also button.css. */
18472
- transition:
18473
- color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18474
- background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18475
- border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18476
- box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18477
- transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
18478
- 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);
18479
20339
  cursor: pointer;
18480
- border: none;
18481
- box-sizing: border-box;
18482
- transform: translateY(0);
18483
- }
18484
- .mint-icon-button:hover:not(.mint-icon-button--disabled) {
18485
- transform: translateY(-1px);
18486
- }
18487
- .mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost) {
18488
- 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;
18489
20345
  }
18490
- .mint-icon-button:active:not(.mint-icon-button--disabled) {
18491
- transform: translateY(0);
18492
- box-shadow: none;
18493
- background-image: none;
18494
- 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;
18495
20351
  }
18496
- .mint-icon-button:focus-visible {
18497
- outline: none;
18498
- box-shadow: var(--focus-ring);
20352
+ .mint-instrument-alert-log__filter:hover {
20353
+ opacity: 0.86;
18499
20354
  }
18500
- .mint-icon-button--disabled {
18501
- opacity: var(--mint-disabled-opacity);
18502
- cursor: not-allowed;
20355
+ .mint-instrument-alert-log__filter--active:hover {
20356
+ opacity: 1;
18503
20357
  }
18504
- /* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
18505
- .mint-icon-button--primary.mint-icon-button--disabled,
18506
- .mint-icon-button--cta.mint-icon-button--disabled,
18507
- .mint-icon-button--danger.mint-icon-button--disabled,
18508
- .mint-icon-button--success.mint-icon-button--disabled {
18509
- background-color: var(--bg-tertiary);
18510
- background-image: none;
18511
- 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;
18512
20363
  }
18513
- /* Subtle top-to-bottom highlight on filled variants — catch of light. */
18514
- .mint-icon-button--primary,
18515
- .mint-icon-button--cta,
18516
- .mint-icon-button--danger,
18517
- .mint-icon-button--success {
18518
- background-image: linear-gradient(
18519
- to bottom,
18520
- rgba(255, 255, 255, 0.12),
18521
- rgba(255, 255, 255, 0)
18522
- );
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;
18523
20370
  }
18524
- /* Variants */
18525
- .mint-icon-button--primary {
18526
- background-color: var(--color-primary);
18527
- 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;
18528
20379
  }
18529
- .mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
18530
- 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;
18531
20387
  }
18532
- .mint-icon-button--secondary {
18533
- background-color: var(--bg-secondary);
18534
- color: var(--text-primary);
18535
- 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);
18536
20391
  }
18537
- .mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
18538
- 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);
18539
20395
  }
18540
- .mint-icon-button--cta {
18541
- background-color: var(--color-cta);
18542
- 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);
18543
20399
  }
18544
- .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
18545
- background-color: var(--color-cta-hover);
20400
+ .mint-instrument-alert--acknowledged {
20401
+ opacity: 0.52;
18546
20402
  }
18547
- .mint-icon-button--danger {
18548
- background-color: var(--mint-error);
18549
- color: white;
20403
+ .mint-instrument-alert__header {
20404
+ gap: 0.375rem;
20405
+ margin-bottom: 0.1875rem;
20406
+ min-width: 0;
18550
20407
  }
18551
- .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
18552
- 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;
18553
20416
  }
18554
- .mint-icon-button--success {
18555
- background-color: var(--mint-success);
18556
- 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;
18557
20427
  }
18558
- .mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
18559
- 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;
18560
20434
  }
18561
- .mint-icon-button--ghost {
18562
- background-color: transparent;
18563
- 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;
18564
20440
  }
18565
- .mint-icon-button--ghost:hover:not(.mint-icon-button--disabled) {
18566
- background-color: var(--bg-tertiary);
18567
- color: var(--text-primary);
20441
+ .mint-instrument-alert__footer {
20442
+ gap: 0.5rem;
20443
+ margin-top: 0.375rem;
18568
20444
  }
18569
- /* Sizes */
18570
- .mint-icon-button--sm {
18571
- padding: 0.375rem;
18572
- 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;
18573
20453
  }
18574
- .mint-icon-button--md {
18575
- padding: 0.5rem;
18576
- min-height: var(--form-height-md);
20454
+ .mint-instrument-alert__code {
20455
+ font-family: var(--font-mono, 'Fira Code', monospace);
20456
+ font-weight: 700;
18577
20457
  }
18578
- .mint-icon-button--lg {
18579
- padding: 0.75rem;
18580
- min-height: var(--form-height-lg);
20458
+ .mint-instrument-alert__ack {
20459
+ cursor: pointer;
20460
+ transition: background 150ms ease-out, color 150ms ease-out;
18581
20461
  }
18582
- .mint-icon-button__icon--sm,
18583
- .mint-icon-button__icon--md,
18584
- .mint-icon-button__icon--lg {
18585
- display: inline-flex;
18586
- align-items: center;
18587
- justify-content: center;
20462
+ .mint-instrument-alert__ack:hover {
20463
+ background: var(--bg-primary, #fff);
20464
+ color: var(--text-primary, #0f172a);
18588
20465
  }
18589
- .mint-icon-button__icon--sm {
18590
- width: 1rem;
18591
- 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;
18592
20471
  }
18593
- .mint-icon-button__icon--md {
18594
- width: 1.25rem;
18595
- height: 1.25rem;
20472
+ .mint-instrument-alert-enter-active {
20473
+ transition: opacity 0.2s ease-out;
18596
20474
  }
18597
- .mint-icon-button__icon--lg {
18598
- width: 1.5rem;
18599
- height: 1.5rem;
20475
+ .mint-instrument-alert-leave-active {
20476
+ transition: opacity 0.15s ease-in;
18600
20477
  }
18601
- /* Spinner */
18602
- .mint-icon-button__spinner {
18603
- animation: mint-spin 1s linear infinite;
20478
+ .mint-instrument-alert-enter-from,
20479
+ .mint-instrument-alert-leave-to {
20480
+ opacity: 0;
18604
20481
  }
18605
- @keyframes mint-spin {
18606
- from {
18607
- transform: rotate(0deg);
20482
+ @keyframes mint-instrument-pulse {
20483
+ 0%, 100% {
20484
+ opacity: 1;
20485
+ box-shadow: 0 0 0 0 currentColor;
18608
20486
  }
18609
- to {
18610
- transform: rotate(360deg);
20487
+ 50% {
20488
+ opacity: 0.72;
20489
+ box-shadow: 0 0 0 3px transparent;
18611
20490
  }
18612
20491
  }
18613
20492
  @media (prefers-reduced-motion: reduce) {
18614
- .mint-icon-button {
18615
- transition:
18616
- color 0.15s ease,
18617
- background-color 0.15s ease,
18618
- border-color 0.15s ease,
18619
- box-shadow 0.15s ease;
18620
- }
18621
- .mint-icon-button:hover:not(.mint-icon-button--disabled),
18622
- .mint-icon-button:active:not(.mint-icon-button--disabled) {
18623
- 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;
18624
20498
  }
18625
20499
  }
18626
20500
  /* BaseInput Component Styles */
@@ -20100,10 +21974,13 @@ code, pre {
20100
21974
  border-bottom: 1px solid var(--border-color);
20101
21975
  }
20102
21976
  .mint-tabs--pills {
21977
+ width: fit-content;
21978
+ max-width: 100%;
20103
21979
  gap: 0.5rem;
20104
21980
  padding: 0.25rem;
20105
21981
  background-color: var(--bg-tertiary);
20106
21982
  border-radius: var(--radius-md);
21983
+ overflow-x: auto;
20107
21984
  }
20108
21985
  .mint-tab {
20109
21986
  padding: 0.5rem 1rem;
@@ -20162,6 +22039,11 @@ code, pre {
20162
22039
  .mint-tab__icon {
20163
22040
  color: currentColor;
20164
22041
  }
22042
+ .mint-tab__icon--svg {
22043
+ width: 1rem;
22044
+ height: 1rem;
22045
+ flex-shrink: 0;
22046
+ }
20165
22047
  .mint-tab__badge {
20166
22048
  margin-left: 0.25rem;
20167
22049
  padding: 0.125rem 0.375rem;
@@ -20757,6 +22639,10 @@ html.dark .mint-toast__item .mint-toast__message {
20757
22639
  background-color: rgba(139, 92, 246, 0.15);
20758
22640
  border: 1px solid rgba(139, 92, 246, 0.4);
20759
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
+ }
20760
22646
  /* Condition header - drug label row */
20761
22647
  .mint-well-plate__condition-label {
20762
22648
  font-weight: 600;
@@ -23818,6 +25704,63 @@ html.dark .mint-toast__item .mint-toast__message {
23818
25704
  .mint-segmented-control__option--lg .mint-segmented-control__description {
23819
25705
  font-size: 0.875rem;
23820
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
+ }
23821
25764
  /* MultiSelect Component Styles */
23822
25765
  .mint-multi-select {
23823
25766
  display: flex;
@@ -24911,7 +26854,7 @@ html.dark .mint-dataframe__loading {
24911
26854
  /* Sample type buttons */
24912
26855
  .mint-well-edit-popup__type-grid {
24913
26856
  display: grid;
24914
- grid-template-columns: repeat(3, 1fr);
26857
+ grid-template-columns: repeat(4, 1fr);
24915
26858
  gap: 0.25rem;
24916
26859
  }
24917
26860
  .mint-well-edit-popup__type-btn {
@@ -24940,6 +26883,11 @@ html.dark .mint-dataframe__loading {
24940
26883
  border-color: rgba(139, 92, 246, 0.4);
24941
26884
  color: #8b5cf6;
24942
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
+ }
24943
26891
  /* Injection count buttons */
24944
26892
  .mint-well-edit-popup__count-grid {
24945
26893
  display: grid;
@@ -25311,6 +27259,166 @@ html.dark .mint-dataframe__loading {
25311
27259
  transform: rotate(360deg);
25312
27260
  }
25313
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
+ }
25314
27422
  /* Divider Component Styles */
25315
27423
  .mint-divider {
25316
27424
  display: flex;
@@ -26146,6 +28254,14 @@ html.dark .mint-settings-modal__option-btn--active {
26146
28254
  margin-bottom: 0 !important;
26147
28255
  padding: 0 !important;
26148
28256
  }
28257
+ .mint-settings-modal__footer {
28258
+ display: flex;
28259
+ flex-direction: column;
28260
+ gap: 0.75rem;
28261
+ margin-top: 1rem;
28262
+ padding-top: 1rem;
28263
+ border-top: 1px solid var(--border-light);
28264
+ }
26149
28265
  /* ─────────────────────────────────────────────────────────────────────
26150
28266
  * Schema-driven content grid (used by both layouts)
26151
28267
  * Cols come from `--mint-settings-cols` set inline by the component;