.data-table {
  width: 100%;
}

.data-table__scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--secan-divider);
  border-radius: var(--secan-radius-3);
  box-shadow: var(--secan-shadow-1);
  background: var(--secan-white);
}

.data-table__scroll:focus-visible {
  outline: none;
  box-shadow: var(--secan-focus-ring), var(--secan-shadow-1);
}

.data-table__table {
  width: 100%;
  min-width: var(--data-table-min-width);
  border-collapse: collapse;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body-medium);
  line-height: var(--secan-lh-body-medium);
  color: var(--secan-black);
}

.data-table__heading {
  padding: var(--secan-space-xs) var(--secan-space-s);
  background: var(--secan-blue);
  color: var(--secan-white);
  font-weight: var(--secan-fw-bold);
  white-space: nowrap;
}

.data-table__heading--left,
.data-table__cell--left {
  text-align: left;
}

.data-table__heading--right,
.data-table__cell--right {
  text-align: right;
}

.data-table__row {
  border-top: 1px solid var(--secan-divider);
  background: var(--secan-white);
}

.data-table__row:nth-child(even) {
  background: var(--secan-input-bg);
}

.data-table__row--total,
.data-table__row--total:nth-child(even) {
  background: var(--secan-chip-bg);
  font-weight: var(--secan-fw-bold);
}

.data-table__cell {
  padding: var(--secan-space-xs) var(--secan-space-s);
  vertical-align: middle;
}

.data-table__cell--right {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-table__link {
  color: var(--secan-red);
  font-weight: var(--secan-fw-bold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.data-table__link:focus-visible {
  outline: none;
  border-radius: var(--secan-radius-3);
  box-shadow: var(--secan-focus-ring);
}

.data-table__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--secan-space-xxxs) var(--secan-space-xs);
  border-radius: var(--secan-radius-pill);
  background: var(--secan-chip-bg);
  color: var(--secan-gray-dark);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-medium);
  white-space: nowrap;
}

.data-table__pill--prerelease {
  background: var(--secan-tab-bg);
  color: var(--secan-red-active);
}

.data-table__pill--registered {
  background: var(--secan-modal-bg);
  color: var(--secan-blue);
}

.data-table__pill--commercial {
  background: var(--secan-chip-bg);
  color: var(--secan-black);
}

.data-table__pill--retired {
  background: var(--secan-input-bg);
  color: var(--secan-gray);
}

.data-table__empty {
  padding: var(--secan-space-3xl) var(--secan-space-s);
  color: var(--secan-gray);
  text-align: center;
}

.data-table__footnote {
  margin: var(--secan-space-xs) 0 0;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
}

@media (max-width: 480px) {
  .data-table__heading,
  .data-table__cell {
    padding: var(--secan-space-xs);
  }
}

/* Columns Figma drops at smaller breakpoints (member Production & Sales). */
@media (max-width: 1023px) {
  .data-table__col--hide-tablet {
    display: none;
  }
}

@media (max-width: 600px) {
  .data-table__col--hide-mobile {
    display: none;
  }
}