/* ── Mobile Card Overrides ───────────────────────────────────────────────────
   Converts data-tables into stacked cards on screens < 640px.
   Uses the existing CSS-variable system (--sd-*, --major-link, etc.)
   Append to app/assets/stylesheets/zmobile.css  (or a new mobile_cards.css)
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* ── Shared: hide the thead, let tbody rows become cards ──────────────── */
  .mobile-card-table thead {
    display: none;
  }

  .mobile-card-table,
  .mobile-card-table tbody {
    display: block;
    width: 100%;
  }

  .mobile-card-table tr {
    display: flex;
    flex-direction: column;
    background: rgba(17, 25, 40, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    gap: 0.4rem;
  }

  /* Row highlight states still work */
  .mobile-card-table tr.row-critical { background: var(--sd-danger-lt, #fee2e2) !important; }
  .mobile-card-table tr.row-warning  { background: var(--sd-warning-lt, #fef3c7) !important; }

  .mobile-card-table td {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: none;
    font-size: 0.83rem;
    line-height: 1.4;
  }

  /* Each td gets a label from data-label attribute */
  .mobile-card-table td::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-text-muted, #7a7870);
    min-width: 90px;
    flex-shrink: 0;
    padding-top: 0.1rem;
  }

  /* Cells with no label (icon-only, action cells) */
  .mobile-card-table td[data-label=""] {
    justify-content: flex-end;
  }
  .mobile-card-table td[data-label=""]::before {
    display: none;
  }

  /* First cell = card title — larger */
  .mobile-card-table td:first-child {
    font-weight: 700;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 0.1rem;
  }
  .mobile-card-table td:first-child::before {
    display: none;
  }

  /* Actions row — right-aligned buttons */
  .mobile-card-table td.card-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 0.25rem;
  }
  .mobile-card-table td.card-actions::before { display: none; }

  /* ── reports-table (legacy class used in _reports.html.erb) ───────────── */
  .reports-table {
    width: 100%;
  }
  .reports-table thead { display: none; }
  .reports-table,
  .reports-table tbody { display: block; width: 100%; }

  .reports-table tr.table-row {
    display: flex;
    flex-direction: column;
    background: rgba(17, 25, 40, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .reports-table td {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.2rem 0;
    border: none;
    font-size: 0.83rem;
  }

  .reports-table td::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-text-muted, #7a7870);
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 0.15rem;
  }

  .reports-table td:first-child::before { display: none; }
  .reports-table td:first-child {
    font-weight: 700;
    font-size: 0.92rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* ── KPI strips: 2-col on mobile ─────────────────────────────────────── */
  .kpi-strip,
  .kpi-strip--4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── table-wrapper: allow horizontal scroll as fallback ──────────────── */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Attendance rows in modal ─────────────────────────────────────────── */
  .attendance-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* ── Activity detail inner: single column ───────────────────────────── */
  .site-activity-detail__inner {
    grid-template-columns: 1fr !important;
  }

  /* ── action-grid: 2 columns ──────────────────────────────────────────── */
  .action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── rs-browse / sd-browse: already stacked via existing CSS ─────────── */
}