/* Breakpoint-specific adjustments: mobile nav, tighter spacing, table->card helpers. */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-header-inner { position: relative; flex-wrap: wrap; }
  .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: 10px; display: none; gap: 2px;
    box-shadow: var(--shadow-card);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { width: 100%; }
}

@media (max-width: 640px) {
  .hero { padding-block: 40px 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .panel { padding: 16px; }
  .controls-row { flex-direction: column; align-items: stretch; }
  .field-select-input { width: 100%; }
}

/* Generic responsive data table: becomes a stack of labeled rows below the breakpoint. */
@media (max-width: 720px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; padding: 10px 14px; background: var(--bg-card);
  }
  .data-table td {
    display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: none; text-align: end;
  }
  .data-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.82rem; text-align: start; }
}