/* =========================================================
   File: css/components/table.css
   Title: Token-Driven Tables (Light/Dark Surface Safe)
   Version: 2025-11-18
   Author: Invent City
   ---------------------------------------------------------
   PURPOSE
   • Provides a unified, token-driven table system
   • Works cleanly on both light and dark backgrounds
   • Matches Invent City's minimal dotted-rule table style
   • Zero conflict with layout.css or subgrids.css

   LOAD ORDER (HTML)
   1) variables.css   ← table tokens originate here
   2) typography.css
   3) table.css       ← this file
========================================================= */


/* ---------------------------------------------------------
   1) BASE STRUCTURE
   ---------------------------------------------------------
   Core semantic table styling.
--------------------------------------------------------- */
.table {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  font-family: var(--table-font, var(--font-base));
  font-size: var(--table-fs, 1rem);
  line-height: var(--table-lh, 1.5);
  font-weight: var(--table-fw, 400);
  color: var(--table-text-color, var(--color-text));
  background: transparent;

  /* Bridge to Bootstrap variables */
  --bs-table-bg: transparent;
}

.table :is(thead, tbody, tfoot, tr, th, td, caption) {
  font-family: inherit;
  color: inherit;
}


/* ---------------------------------------------------------
   2) CELL SPACING
   ---------------------------------------------------------
   Token-based padding, mobile adjustable via variables.css.
--------------------------------------------------------- */
.table th,
.table td {
  padding-block: var(--table-pad-y, 0.75rem);
  padding-inline: var(--table-pad-x, 1rem);
  vertical-align: middle;
  text-align: left;
}


/* ---------------------------------------------------------
   3) CAPTION
--------------------------------------------------------- */
.table caption {
  caption-side: top;
  font-weight: var(--table-caption-fw, 500);
  font-size: var(--table-caption-fs, 0.9rem);
  line-height: var(--table-caption-lh, 1.4);
  margin-bottom: var(--table-caption-mb, 0.5rem);
  background: transparent;
}


/* ---------------------------------------------------------
   4) SIZE VARIANT — .table-sm
--------------------------------------------------------- */
.table-sm :is(th, td) {
  padding-block: calc(var(--table-pad-y, 0.75rem) * 0.75);
  padding-inline: calc(var(--table-pad-x, 1rem) * 0.75);
}


/* ---------------------------------------------------------
   5) LAYOUT HELPERS
--------------------------------------------------------- */
.table-fixed { table-layout: fixed; max-width: 100%; }
.table + .table { margin-top: var(--table-stack-gap, 2rem); }

.text-end { text-align: right; }

.right-last-1 td:last-child,
.right-last-1 th:last-child { text-align: right; }

/* 2-,3-,4-,5-,6-column right-align helpers */
.right-last-2 td:nth-last-child(-n+2),
.right-last-2 th:nth-last-child(-n+2) { text-align: right; }

.right-last-3 td:nth-last-child(-n+3),
.right-last-3 th:nth-last-child(-n+3) { text-align: right; }

.right-last-4 td:nth-last-child(-n+4),
.right-last-4 th:nth-last-child(-n+4) { text-align: right; }

.right-last-5 td:nth-last-child(-n+5),
.right-last-5 th:nth-last-child(-n+5) { text-align: right; }

.right-last-6 td:nth-last-child(-n+6),
.right-last-6 th:nth-last-child(-n+6) { text-align: right; }


/* ---------------------------------------------------------
   6) ALIGN-2 / ALIGN-3 (simple presets)
--------------------------------------------------------- */
.table.align-2 th:first-child,
.table.align-2 td:first-child { text-align: left; }
.table.align-2 th:last-child,
.table.align-2 td:last-child { text-align: right; }

.table.align-3 th:first-child,
.table.align-3 td:first-child { text-align: left; }
.table.align-3 th:nth-child(2),
.table.align-3 td:nth-child(2),
.table.align-3 th:nth-child(3),
.table.align-3 td:nth-child(3) { text-align: right; }


/* ---------------------------------------------------------
   7) MINIMAL DOTTED-RULE INVENT CITY TABLE STYLE
--------------------------------------------------------- */
.table thead th {
  font-weight: var(--table-th-fw, 600) !important;
  border-top: none !important;
}

.table,
.table :is(th, td) {
  border-left: none !important;
  border-right: none !important;
}

.table :is(th, td) {
  border-top: none !important;
  border-bottom: 1px dotted var(--table-border-color, currentColor);
}

.table tbody tr:last-child :is(th, td) {
  border-bottom: none !important;
}


/* ---------------------------------------------------------
   8) DARK SURFACE MODE
--------------------------------------------------------- */
.pane-dark .table :is(th, td),
.theme-dark .table :is(th, td),
.scheme-dark .table :is(th, td) {
  border-bottom: 1px dotted var(--table-border-color) !important;
}

.pane-dark .table tbody tr:last-child :is(th, td),
.theme-dark .table tbody tr:last-child :is(th, td),
.scheme-dark .table tbody tr:last-child :is(th, td) {
  border-bottom: none !important;
}


/* ---------------------------------------------------------
   9) MOBILE — COLUMN SHOW/HIDE LOGIC (table-mobile)
--------------------------------------------------------- */
@media (max-width: 640px) {

  .table-mobile th,
  .table-mobile td {
    display: none;
  }

  .table-mobile th[data-mobile="show"],
  .table-mobile td[data-mobile="show"] {
    display: table-cell;
  }

  .table-mobile td[data-m]::after {
    content: attr(data-m);
  }

  .table-mobile td[data-m] {
    color: transparent;
  }
}


/* ---------------------------------------------------------
   10) FOOTNOTE
--------------------------------------------------------- */
.table-footnote {
  font-family: var(--font-base);
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* =========================================================
   TABLE BOX WRAPPER — Optional visual frame
   ---------------------------------------------------------
   Usage:
     <div class="table-box">
       <table class="table ...">...</table>
     </div>
========================================================= */

.table-box {
  border: 1px dotted white;
  padding: 1rem;
  border-radius: var(--radius-md, 0);
  background: transparent;
}

/* Dark mode harmony */
.pane-dark .table-box {
  border-color: white !important;
}

/* =========================================================
   END OF FILE: css/components/table.css
========================================================= */