:root {
  --ms-qc-pass: #68a77b;
  --ms-qc-warn: #d39a36;
  --ms-qc-fail: #c45b5b;
  --ms-qc-unknown: #b7c0c8;
  --ms-qc-border: #dfe5ea;
}

.ms-qc-table-cell { display: inline-flex; flex-direction: column; gap: 4px; }
.ms-qc-table-line { display: flex; align-items: center; gap: 7px; }
.ms-qc-score { font-size: 12px; font-weight: 650; color: #475467; white-space: nowrap; }

.ms-qc-table-line {
  flex-wrap: nowrap;
}
.ms-qc-borat {
  display: flex;
  flex-wrap: nowrap;
  width: max-content !important;
  max-width: none !important;
  flex-shrink: 0;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.ms-qc-borat[role="button"] { cursor: pointer; }
.ms-qc-fastqc-group {
  overflow: visible !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 98px;
  transform: none !important;
}
.ms-qc-fastqc-grid,
.ms-qc-borat .seq-borat-qc-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  gap: 3px !important;
  box-sizing: content-box !important;
  flex-shrink: 0 !important;
  contain: strict;
  overflow: hidden;
}
.ms-qc-fastqc-grid {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
}
.ms-qc-coverage .seq-borat-qc-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
}
.ms-qc-fastqc-grid > .seq-borat-qc-tile,
.ms-qc-borat .seq-borat-qc-grid > .seq-borat-qc-tile {
  display: block !important;
  float: none !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  box-sizing: border-box !important;
}
.ms-qc-table-cell .ms-qc-fastqc-group,
.ms-qc-detail-mosaic .ms-qc-fastqc-group,
.rt-td .ms-qc-fastqc-group,
table .ms-qc-fastqc-group {
  min-width: 98px;
  padding: 5px 6px 6px 8px;
}

.rt-td:has(.ms-qc-borat),
td:has(.ms-qc-borat) {
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

.rt-td .seq-borat-qc-group,
table td .seq-borat-qc-group,
.ms-qc-borat .seq-borat-qc-group,
.ms-qc-borat .seq-borat-qc-group:hover,
.ms-qc-borat[role="button"]:hover .ms-qc-fastqc-group {
  overflow: visible !important;
  transform: none !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
}

.ms-qc-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 10px);
  gap: 2px;
  width: fit-content;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--ms-qc-border);
  border-radius: 7px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ms-qc-mosaic[role="button"] { cursor: pointer; }
.ms-qc-mosaic[role="button"]:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16,24,40,.09); }
.ms-qc-mosaic.is-warn { border-color: #e3bd72; }
.ms-qc-mosaic.is-fail { border-color: var(--ms-qc-fail); box-shadow: 0 0 0 1px rgba(196,91,91,.08); }

.ms-qc-tile { display: block; width: 10px; height: 10px; border-radius: 3px; }
.ms-qc-tile.is-pass { background: var(--ms-qc-pass); }
.ms-qc-tile.is-warn { background: var(--ms-qc-warn); }
.ms-qc-tile.is-fail { background: var(--ms-qc-fail); }
.ms-qc-tile.is-unknown { background: var(--ms-qc-unknown); }

.ms-fastqc-links { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.1; }
.ms-fastqc-links > span:first-child { color: #667085; }
.ms-fastqc-links a { font-weight: 600; text-decoration: none; }
.ms-fastqc-link-sep { color: #98a2b3; }
.ms-fastqc-report-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.ms-qc-detail-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafb; }
.ms-qc-detail-mosaic { display: flex; align-items: center; gap: 8px; }
.ms-qc-detail-meta { display: flex; flex-direction: column; gap: 2px; color: #667085; }
.ms-qc-processing { margin: 0 0 18px; }
.ms-qc-processing h4 { margin: 16px 0 8px; color: #07554f; }
.ms-qc-processing-block { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafb; }
.ms-qc-processing-block h5 { margin: 0 0 8px; color: #07554f; }
.ms-qc-processing-table { margin: 0; }
.ms-qc-processing-table th { width: 180px; color: #667085; font-weight: 650; }
.ms-qc-processing-table td code { font-size: 12px; word-break: break-all; }
.ms-qc-scope-note { color: #9a6700; font-size: 12px; }
.ms-qc-badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .025em; }
.ms-qc-badge.is-pass { background: #eaf4ed; color: #39734b; }
.ms-qc-badge.is-warn { background: #fbf3df; color: #8a6116; }
.ms-qc-badge.is-fail { background: #f9eaea; color: #9d3737; }
.ms-qc-badge.is-unknown { background: #eef1f3; color: #667085; }