/* tables.css */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: .55rem .6rem; border: 1px solid var(--border); vertical-align: top; }
thead th { background: #00000010; text-align: left; }
tbody tr:nth-child(odd) { background: #00000006; }
tbody tr:hover { background: #00000012; }
.status-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; margin-right: .5rem; vertical-align: middle; }
.status-ok { background: var(--success); }
.status-warn { background: var(--warning); }
.status-err { background: #e74c3c; }
 tbody tr.highlight { background: color-mix(in oklab, #2ecc71 20%, transparent); transition: background .8s ease-out; }
 td.query-col, th.query-col {
    min-width: 200px;
    white-space: normal;
    word-break: break-word;  /* or break-all if it's still too long */
}

/* Responsive stacked rows for small screens */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr { display:block; }
  thead { display:none; }
  tr { margin-bottom: .75rem; background: var(--card-bg); border-radius: 8px; padding:.6rem; }
  td { display:flex; justify-content:space-between; padding:.4rem 0; border:none; }
  td::before { content: attr(data-label); flex: 0 0 40%; color:var(--muted); font-size:.85rem; padding-right:.5rem; }
  /* keep actions visually grouped */
  td.actions-col { display:flex; gap:.5rem; justify-content:flex-end; }

  /* Stack badges under the variable name on small screens */
  td[data-label="Variable name"] {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  td[data-label="Variable name"] .badge {
    display: inline-block; /* ensure badges wrap beneath the name */
    margin-left: 0;
  }

  /* On very small screens make the action buttons center and allow wrapping */
  td.actions-col .actions-row { justify-content: center; flex-wrap: wrap; gap: .4rem; }
  td.actions-col { justify-content: center; }
  /* Ensure forms and buttons inside the actions column center correctly on phones */
  td.actions-col form.inline-form { display: flex; justify-content: center; width: 100%; }
  td.actions-col form.inline-form .btn-mod,
  td.actions-col form.inline-form button { margin: 0; max-width: 100%; box-sizing: border-box; }
}

/* Fallback: allow horizontal scrolling inside a wrapper */
.table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }