src/components/ComparisonTable/styles.module.css

/**
 * Comparison Table Styles
 *
 * Table component for comparing Apache Ignite with alternatives.
 */

.tableWrapper {
  overflow-x: auto;
  margin: var(--ai-spacing-xl) 0;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 1.8rem;
}

.table thead {
  background: var(--blue, #1b2d93);
  color: #fff;
}

.table th,
.table td {
  padding: var(--ai-spacing-sm) var(--ai-spacing-md);
  text-align: left;
  border: 1px solid var(--grey2, #ddd);
}

.featureHeader {
  font-weight: bold;
  min-width: 200px;
}

.productHeader {
  font-weight: bold;
  text-align: center;
  min-width: 150px;
}

.featureCell {
  font-weight: 500;
}

.valueCell {
  text-align: center;
  vertical-align: middle;
}

.checkmark {
  color: #28a745;
  font-size: 2.4rem;
  font-weight: bold;
}

.cross {
  color: #dc3545;
  font-size: 2rem;
  font-weight: bold;
}

.table tbody tr:nth-child(even) {
  background: var(--grey, #f1f1f1);
}

.table tbody tr:hover {
  background: #e8e8e8;
}

@media (max-width: 767px) {
  .table {
    font-size: 1.6rem;
  }

  .table th,
  .table td {
    padding: var(--ai-spacing-sm);
  }

  .featureHeader {
    min-width: 150px;
  }

  .productHeader {
    min-width: 100px;
  }
}