/* ============================================================
   TABLES: Data table styles for project write-ups
   Amber-on-dark terminal aesthetic, monospace, compact
   ============================================================ */

/* Responsive scroll wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
}

/* Base table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-accent-amber, #ffcc00);
  background: var(--color-bg, #0a0a0e);
  border: 1px solid var(--color-accent-cyan, #cc8800);
}

/* Caption */
.data-table caption {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 1.1rem;
  color: var(--color-accent-amber, #ffcc00);
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-accent-cyan, #cc8800);
  border-bottom: none;
  background: var(--win-face, #1c1810);
  caption-side: top;
}

/* Header cells */
.data-table thead th {
  color: var(--color-accent-amber, #ffcc00);
  background: var(--win-face, #1c1810);
  border-bottom: 1px solid var(--color-accent-cyan, #cc8800);
  padding: 0.35rem 0.6rem;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
}

/* Body cells */
.data-table tbody td {
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid rgba(204, 136, 0, 0.2);
  vertical-align: top;
}

/* Section header rows (sub-headings within tables) */
.data-table .section-header {
  color: var(--color-accent-amber, #ffcc00);
  background: rgba(204, 136, 0, 0.08);
  border-bottom: 1px solid rgba(204, 136, 0, 0.3);
  border-top: 1px solid rgba(204, 136, 0, 0.3);
  padding: 0.3rem 0.6rem;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0.03em;
}

/* Footer cells (notes, footnotes) */
.data-table tfoot td {
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--color-accent-cyan, #cc8800);
  color: var(--color-dim, #7a6b52);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Highlight row (agentmemory results, >>> markers) */
.data-table .highlight td {
  background: rgba(255, 204, 0, 0.12);
  border-top: 1px solid var(--color-accent-amber, #ffcc00);
  border-bottom: 1px solid var(--color-accent-amber, #ffcc00);
  color: var(--color-accent-amber, #ffcc00);
  font-weight: normal;
}

/* Alternating row hint (subtle) */
.data-table tbody tr:nth-child(even):not(.highlight) td {
  background: rgba(204, 136, 0, 0.03);
}

/* Hover state */
.data-table tbody tr:hover td {
  background: rgba(255, 204, 0, 0.06);
}

/* Numeric columns: right-align when desired (add class="num" to td) */
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile: smaller font, tighter padding */
@media (max-width: 600px) {
  .data-table {
    font-size: 0.85rem;
  }

  .data-table caption {
    font-size: 0.95rem;
  }

  .data-table thead th,
  .data-table tbody td,
  .data-table tfoot td,
  .data-table .section-header {
    padding: 0.2rem 0.4rem;
  }
}