cs249r_book/shared/styles/partials/_tables.scss

// =============================================================================
// TABLE STYLES — Clean academic tables with zebra striping
// =============================================================================

// Table styling - clean and readable
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;

  th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid #e9ecef;
  }

  td {
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
  }

  // Zebra striping for readability
  tbody tr:nth-child(even) {
    background-color: #f8f9fa;
  }

  // Hover effect for interactivity
  tbody tr:hover {
    background-color: #e9ecef;
  }
}

// Table captions - left aligned with Bootstrap override
.table-caption,
table caption,
div.caption,
.caption-text,
.table>caption,
.table-responsive>.table>caption,
div[id^="tbl-"] .caption,
div[id^="tbl-"] p,
.cell-output-display .caption,
.cell-output-display>p:first-child,
.quarto-float-caption-top,
.quarto-float-caption,
.quarto-float-tbl,
figcaption.quarto-float-caption-top,
figcaption[id*="caption"] {
  text-align: left !important;
  caption-side: top !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 1.5rem !important;
  color: #495057 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: block !important;
}

// Target Quarto-specific table caption structure
.quarto-figure .figure-caption,
.panel-caption,
.tbl-cap,
.quarto-float-caption-top,
.quarto-float-caption,
.quarto-float-tbl,
figcaption.quarto-float-caption-top {
  text-align: left !important;
  text-align-last: left !important;
  display: block !important;
}

// Better table styling for academic content
.table-container,
.cell-output-display,
#tbl-paradigm-evolution {
  margin: 2rem 0;
  overflow-x: auto; // Handle mobile responsiveness

  table {
    font-size: 0.85rem;
    line-height: 1.4;
    min-width: 100%;

    th {
      background-color: #f8f9fa;
      font-weight: 500;
      text-align: left;
      padding: 14px 12px;
      border-bottom: 2px solid $accent;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: #2c3e50;
      white-space: nowrap; // Prevent header wrapping
    }

    // Special treatment for technology comparison headers (not row labels)
    th:not(:first-child) {
      background-color: rgba($accent, 0.04);
      border-bottom: 3px solid $accent;
      font-weight: 600;
      color: darken(#2c3e50, 10%);
    }

    td {
      text-align: left;
      padding: 12px 12px;
      border-bottom: 1px solid #e9ecef;
      vertical-align: top;
      font-weight: 300; // Lighter text for better readability
      color: #5a6369; // Slightly lighter than default

      // Better text wrapping and readability
      word-wrap: break-word;
      hyphens: auto;
      max-width: 200px; // Prevent overly wide cells
    }

    // First column (Aspect) - make it stand out as row headers
    td:first-child,
    th:first-child {
      font-weight: 500;
      color: #2c3e50;
      background-color: #f8f9fa;
      border-right: 1px solid #e9ecef;
      min-width: 120px;
    }

    // Improve zebra striping contrast
    tbody tr:nth-child(even) {
      background-color: #fafbfc;

      td:first-child {
        background-color: #f1f3f4; // Keep first column slightly different
      }
    }

    tbody tr:hover {
      background-color: #f1f3f4;
      transition: background-color 0.2s ease;

      td:first-child {
        background-color: #e9ecef;
      }
    }
  }
}

// Responsive table behavior
@media (max-width: 768px) {
  .table-container,
  .cell-output-display {
    table {
      font-size: 0.75rem;

      th,
      td {
        padding: 8px 6px;
      }
    }
  }
}