/* ============================================================
   TABLE.CSS — HARBOR‑DELTA MODULAR TABLE SYSTEM
   ============================================================ */

/* ------------------------------------------------------------
   A. Root Variables (Theme‑Agnostic Baseline)
   ------------------------------------------------------------ */
:root {
  --table-border: #ccc;
  --table-bg: #ffffff;
  --table-header-bg: #f5f5f5;
  --table-text: #222;
  --table-padding: 0.5em 0.75em;
  --table-radius: 4px;
}

/* ------------------------------------------------------------
   B. Global Responsive Table Behavior (Baseline Only)
   ------------------------------------------------------------ */
table {
  display: block;            /* break intrinsic layout */
  max-width: 100%;           /* allow shrink */
  margin: 1.5rem auto;       /* center */
  overflow-x: auto;          /* enable scroll */
  overflow-y: hidden;        /* preserve radius */
  border-collapse: collapse; /* consistent geometry */
}

/* ------------------------------------------------------------
   C. Global Base Table Styling (Neutral Defaults)
   ------------------------------------------------------------ */
table th,
table td {
  padding: var(--table-padding);
  border: 1px solid var(--table-border);
  text-align: left;
  color: var(--table-text);
  white-space: nowrap;       /* prevents vertical accordion */
}

table thead tr {
  background-color: var(--table-header-bg);
  font-weight: bold;
}

table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* ------------------------------------------------------------
   D. Variant: .table-basic
   ------------------------------------------------------------ */
.table-basic {
  background-color: var(--table-bg);
  border-radius: var(--table-radius);
  overflow: hidden;
}

/* ------------------------------------------------------------
   E. Variant: .table-compact
   ------------------------------------------------------------ */
.table-compact th,
.table-compact td {
  padding: 0.35em 0.5em;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------
   F. Variant: .table-wide
   ------------------------------------------------------------ */
.table-wide {
  min-width: 700px; /* forces scroll on narrow screens */
}

/* ------------------------------------------------------------
   G. Variant: .table-nowrap
   ------------------------------------------------------------ */
.table-nowrap th,
.table-nowrap td {
  white-space: nowrap;
}

/* ------------------------------------------------------------
   H. Variant: .table-scroll
   ------------------------------------------------------------ */
.table-scroll {
  overflow-x: scroll;
}

/* ============================================================
   I. THEME LAYER — DELTA CLASSIC: VERSUS TABLE
   (Placed AFTER all global rules so it overrides them cleanly)
   ============================================================ */

:root {
  --versus-table-border: #660000;
  --versus-table-bg: #fdf8f0;
  --versus-table-header-bg: #f7eedd;
  --versus-table-text: #330000;
  --versus-table-padding: 0.5em 0.75em;
  --versus-table-radius: 4px;
}

.versus-table {
  display: block;
  max-width: 100%;
  margin: 1.25rem auto;
  overflow-x: auto;
  overflow-y: hidden;
  border-collapse: collapse;

  background-color: var(--versus-table-bg);
  color: var(--versus-table-text);
  border: 1px solid var(--versus-table-border);
  border-radius: var(--versus-table-radius);
}

/* Full gridlines restored */
.versus-table th,
.versus-table td {
  border: 1px solid var(--versus-table-border);
  padding: var(--versus-table-padding);
  white-space: nowrap;
}

.versus-table thead tr {
  background-color: var(--versus-table-header-bg);
  border-bottom: 2px solid var(--versus-table-border);
}

.versus-table tbody tr:last-child td {
  border-bottom: none;
}

.versus-table tbody tr:nth-child(even) {
  background-color: #fffaf4;
}

/* ------------------------------------------------------------
   J. Responsive Stacking (Mobile)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .versus-table thead {
    display: none;
  }

  .versus-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--versus-table-border);
    border-radius: var(--versus-table-radius);
    padding: 0.5rem;
    background-color: var(--versus-table-bg);
  }

  .versus-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.25rem;
    border-bottom: none;
  }

  .versus-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: var(--versus-table-text);
  }
}

.table-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.table-scrollbox {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 640px) {
  .versus-table tr {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 480px; /* optional: keeps rows tidy */
  }
}