/**
 * Marked Extended Tables - Structural SCSS
 * Minimal SCSS required for table layout and responsive behavior.
 *
 * Import this file if you want the basic table structure:
 * @import '@fsegurai/marked-extended-tables/styles/tables.scss';
 */

.marked-extended-table-wrapper,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  table-layout: auto;

  caption {
    padding: 0.5rem 0.75rem;
    text-align: left;
    caption-side: top;
  }

  th, td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
  }

  // Keep spanning cells readable without visual theming.
  th[colspan], td[colspan], th[rowspan], td[rowspan] {
    font-weight: 600;
  }
}

@media (max-width: 768px) {
  table { font-size: 0.875rem; }
  table th, table td { padding: 0.5rem; }
}