/* V4.6.6: component table semantics, PDF navigation and compact wizard */
.component-wizard-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.component-wizard-step[data-component-step="1"]
  + .component-wizard-step[data-component-step="1"] {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #dfe7e2;
}

.component-table-legends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 10px;
  margin: 0 0 14px;
}

.component-table-legends .coverage-status-legend {
  margin: 0;
}

.component-conformity-badge,
.component-food-contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.component-conformity-badge.is-conform,
.component-food-contact-badge.is-yes {
  border-color: #b9d7c2;
  color: #17643a;
  background: #e8f6ec;
}

.component-conformity-badge.is-attention,
.component-conformity-badge.is-pending,
.component-food-contact-badge.is-pending {
  border-color: #e2c985;
  color: #795a00;
  background: #fff5d9;
}

.component-conformity-badge.is-error {
  border-color: #e5b9b4;
  color: #922f27;
  background: #fff0ee;
}

.component-conformity-badge.is-na,
.component-food-contact-badge.is-no {
  border-color: #d7ded9;
  color: #66736b;
  background: #f0f2f1;
}

.component-data-table {
  min-width: 1280px;
}

.component-data-table th:nth-child(1) { width: 10%; }
.component-data-table th:nth-child(2) { width: 8%; }
.component-data-table th:nth-child(3) { width: 11%; }
.component-data-table th:nth-child(4) { width: 7%; }
.component-data-table th:nth-child(5) { width: 7%; }
.component-data-table th:nth-child(6) { width: 14%; }
.component-data-table th:nth-child(7) { width: 20%; }
.component-data-table th:nth-child(8) { width: 5%; }
.component-data-table th:nth-child(9) { width: 6%; }
.component-data-table th:nth-child(10) { width: 12%; }

.component-food-contact-cell {
  text-align: center !important;
}

.component-food-contact-cell,
.component-conformity-cell {
  min-width: 0;
  white-space: normal !important;
}

.component-food-contact-badge.is-pending {
  white-space: normal;
}

.component-conformity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 5px;
}

.component-conformity-grid .component-conformity-badge {
  min-width: 0;
  padding-inline: 5px;
}

@media (max-width: 1050px) {
  .component-table-legends {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .component-wizard-progress {
    grid-template-columns: 1fr;
  }
}