/* Site-wide responsive table styles */

/* Default: keep regular table appearance on medium+ screens */
@media (min-width: 641px) {
  table.responsive-table { width: 100%; }
}

/* Mobile stacked table cards */
@media (max-width: 640px) {
  table.responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
    width: 100%;
  }
  .responsive-table thead { display: none; }
  .responsive-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.5rem; /* rounded */
    background: #ffffff;
    overflow: hidden;
  }
  .dark .responsive-table tr {
    background: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
  }
  .responsive-table td {
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    padding: 0.5rem 0.75rem;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    gap: 0.5rem;
  }
  .dark .responsive-table td { border-color: #374151; }
  .responsive-table td:last-child { border-bottom: none; }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280; /* gray-500 */
  }
}