.row {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 map.get($spacing-scale, 'md');
  border-bottom: 1px solid var(--color-grey-soft);

  @include transition(background-color);
}

.statusCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
}

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.idCell {
  width: 80px;
  flex-shrink: 0;
  padding: 0 map.get($spacing-scale, 's-2');
}

.idText {
  @include caption-regular;
  color: var(--color-text-secondary);
}

.titleCell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 0 map.get($spacing-scale, 's-2');
}

.titleText {
  @include body-small-medium;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.urlText {
  @include metadata-regular;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  text-decoration: none;

  &:hover {
    color: var(--color-brand-primary);
    text-decoration: underline;
  }
}

.errorText {
  @include metadata-regular;
  color: var(--color-semantic-danger);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typeCell {
  width: 100px;
  flex-shrink: 0;
  padding: 0 map.get($spacing-scale, 's-2');
}

.typeText {
  @include caption-regular;
  color: var(--color-text-secondary);
}

.dateCell {
  width: 160px;
  flex-shrink: 0;
  padding: 0 map.get($spacing-scale, 's-2');
  display: flex;
  align-items: center;
}

.dateText {
  @include caption-regular;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

// Expiry date badge — shown below the Last Synced date
.expiryBadge {
  @include metadata-regular;
  color: var(--color-semantic-warning);
}

.expiryBadgeExpired {
  @include metadata-regular;
  color: var(--color-semantic-danger);
  font-weight: 600;
}

.actionsCell {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 's-1');
  width: 100px;
  flex-shrink: 0;
  justify-content: flex-end;
}

// ── Excluded row ────────────────────────────────────
.rowExcluded {
  opacity: 0.6;
}

// ── Expired row ─────────────────────────────────────
.rowExpired {
  border-left: 3px solid var(--color-semantic-warning);
}

.excludedBadge {
  @include caption-regular;
  color: var(--color-text-tertiary);
  font-style: italic;
}

// Re-enable button visible but faded when row is not hovered
.actionFaded {
  opacity: 0.4;
  @include transition(opacity);

  &:hover {
    opacity: 1;
  }
}

// Exclude button — orange icon, default grey hover background
.actionExclude {
  color: var(--color-semantic-warning);
}

// Reinclude button — orange icon, default grey hover background
.actionInclude {
  color: var(--color-semantic-warning);
}