/**
 * FEM Design System - Tables
 * Table styling and responsive mobile card fallback
 *
 * Version: 1.0.0
 * Date: April 2026
 */

/* ============================================
   1. TABLE BASE
   ============================================ */

.fem-table {
  width: 100%;
  border-collapse: collapse;
}

.fem-table th,
.fem-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--fem-warm-border);
  font-size: 14px;
}

.fem-table th {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #faf8f6;
}

.fem-table tr:hover td {
  background: var(--fem-accent-light);
}

/* Clickable rows */
.fem-table tr.clickable {
  cursor: pointer;
}

/* ============================================
   2. MOBILE CARD FALLBACK
   ============================================ */

@media (max-width: 600px) {
  .fem-table th,
  .fem-table td {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Transform table to card layout on mobile */
  .fem-table-mobile-cards {
    display: block;
  }

  .fem-table-mobile-cards thead {
    display: none;
  }

  .fem-table-mobile-cards tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .fem-table-mobile-cards tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px;
    background: #faf8f6;
    border-radius: var(--fem-radius-sm);
    border-bottom: none !important;
  }

  .fem-table-mobile-cards td {
    border-bottom: none;
    padding: 2px 0;
    font-size: 14px;
  }

  .fem-table-mobile-cards td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    display: block;
  }
}