.heading-actions,
.tracking-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.tracking-intro {
  max-width: 850px;
  margin: -.65rem 0 1.2rem;
  color: #5d716d;
}

.tracking-metrics {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  max-width: 900px;
}

.tracking-workspace {
  padding: 0;
  overflow: hidden;
}

.tracking-controls {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(160px, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  padding: 1rem;
  border-bottom: 1px solid #d8e5e1;
  background: #f8fbfa;
}

.tracking-controls label {
  display: grid;
  gap: .35rem;
  color: #536c67;
  font-size: .78rem;
  font-weight: 750;
}

.tracking-controls input,
.tracking-controls select {
  min-width: 0;
  border: 1px solid #b8cbc7;
  border-radius: 9px;
  padding: .72rem;
  background: #fff;
  color: #17233a;
}

.tracking-results {
  display: grid;
}

.tracking-row {
  border-left: 5px solid #8fb9ad;
  border-bottom: 1px solid #d8e5e1;
  background: #fff;
}

.tracking-row:last-child {
  border-bottom: 0;
}

.tracking-row.ok {
  border-left-color: #2d9968;
}

.tracking-row.review {
  border-left-color: #d09b31;
}

.tracking-row-summary {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .65fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.tracking-identity {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.tracking-identity small {
  color: #55716b;
  font-weight: 800;
  text-transform: uppercase;
}

.tracking-identity code {
  overflow-wrap: anywhere;
  color: #526763;
}

.tracking-current {
  display: grid;
  justify-items: start;
  gap: .3rem;
}

.tracking-current small {
  color: #687a77;
}

.status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: .35rem .6rem;
  background: #e7efec;
  color: #35534d;
  font-size: .78rem;
  font-weight: 800;
}

.status-pill.ok {
  background: #e0f6e8;
  color: #196240;
}

.status-pill.review {
  background: #fff0cf;
  color: #87590e;
}

.tracking-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
}

.tracking-row-actions a {
  border: 1px solid #aac6bf;
  border-radius: 10px;
  padding: .68rem .8rem;
  color: #244a46;
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.tracking-detail-button {
  padding: .7rem .85rem;
}

.tracking-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: .25rem 1rem 1rem;
}

.tracking-progress span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .25rem;
  color: #879793;
}

.tracking-progress span::before {
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #d7e2df;
  content: "";
}

.tracking-progress span:first-child::before {
  display: none;
}

.tracking-progress i {
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 3px solid #d7e2df;
  border-radius: 50%;
  background: #fff;
}

.tracking-progress .reached::before {
  background: #58a38f;
}

.tracking-progress .reached i {
  border-color: #58a38f;
  background: #58a38f;
}

.tracking-progress .current {
  color: #1e6355;
  font-weight: 800;
}

.tracking-progress small {
  text-align: center;
}

.tracking-special-status {
  margin: 0 1rem 1rem;
  border-radius: 9px;
  padding: .65rem;
  background: #edf3f1;
  color: #365650;
  font-weight: 800;
}

.tracking-special-status.review {
  background: #fff4de;
  color: #87590e;
}

.tracking-details {
  border-top: 1px solid #e1eae7;
  padding: 1rem 1.25rem;
  background: #f8fbfa;
}

.tracking-timeline {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracking-timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
}

.tracking-timeline li > i {
  width: 11px;
  height: 11px;
  margin-top: .35rem;
  border-radius: 50%;
  background: #8fb9ad;
}

.tracking-timeline li > i.ok {
  background: #2d9968;
}

.tracking-timeline li > i.review {
  background: #d09b31;
}

.tracking-timeline li div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem 1rem;
}

.tracking-timeline small {
  grid-column: 1 / -1;
  color: #627672;
}

.tracking-timeline time {
  color: #627672;
  font-size: .84rem;
}

.tracking-connections-card {
  margin-top: 1rem;
}

.tracking-section-heading h2 {
  margin: .2rem 0 1rem;
}

.tracking-connections {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: .7rem;
}

.tracking-connections article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .35rem .8rem;
  border: 1px solid #d8e5e1;
  border-radius: 12px;
  padding: .8rem;
  background: #f8fbfa;
}

.tracking-connections article div {
  display: grid;
}

.tracking-connections article small {
  color: #627672;
}

.tracking-connections article > span:nth-child(2) {
  grid-column: 1;
  color: #627672;
  font-size: .8rem;
}

.tracking-connections article .status-pill {
  grid-column: 2;
  grid-row: 1 / 3;
}

.tracking-workspace > p {
  padding: 1rem;
}

@media (max-width: 900px) {
  .tracking-heading,
  .heading-actions,
  .tracking-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .tracking-controls {
    grid-template-columns: 1fr 1fr;
  }

  .tracking-search {
    grid-column: 1 / -1;
  }

  .tracking-controls button {
    grid-column: 1 / -1;
  }

  .tracking-row-summary {
    grid-template-columns: 1fr;
  }

  .tracking-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tracking-progress small {
    font-size: .66rem;
  }

  .tracking-connections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .tracking-controls {
    grid-template-columns: 1fr;
  }

  .tracking-search {
    grid-column: auto;
  }

  .tracking-progress {
    padding-inline: .3rem;
  }

  .tracking-progress small {
    font-size: .55rem;
  }

  .tracking-row-actions a,
  .tracking-row-actions button {
    flex: 1;
    text-align: center;
  }

  .tracking-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}