/* ============================================================================
   TABLE v3 — canonical table styling, supersedes app.css/polish.css/v2 rules
   ----------------------------------------------------------------------------
   Load AFTER legacy-shim.css. Uses tokens.css + v2/system_tokens.css.
   No !important. Specificity max 0,2,0 (only :hover/:nth-child pseudo).
   Uses limited single-level descendant on .table thead/tbody (CSS structural
   pseudo-elements are necessary for table semantics — kept to .table > * only).
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════
   WRAPPER — rounded surface that clips overflow
   ══════════════════════════════════════════════════════════════════════════ */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ══════════════════════════════════════════════════════════════════════════
   BASE TABLE — borderless, 13px body, collapsed borders
   ══════════════════════════════════════════════════════════════════════════ */

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

/* Header cells — token-driven; single-level child of .table */
.table thead th {
  padding: 10px var(--space-3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--text-2);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

/* Body cells */
.table tbody td {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--text);
}

.table tbody tr {
  transition: var(--tr-colors);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

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


/* ══════════════════════════════════════════════════════════════════════════
   CELL UTILITIES — alignment, numeric, actions
   ══════════════════════════════════════════════════════════════════════════ */

.table-cell-right {
  text-align: right;
}
.table-cell-center {
  text-align: center;
}

.table-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

.table-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

.table-cell-truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   DENSITY & STYLE VARIANTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Compact — tighter rows */
.table-compact thead th,
.table-compact tbody td {
  padding: 6px var(--space-2);
  font-size: 12px;
}

/* Comfortable — looser rows */
.table-comfortable thead th,
.table-comfortable tbody td {
  padding: var(--space-3) var(--space-4);
}

/* Bordered — visible cell borders */
.table-bordered {
  border: 1px solid var(--border);
}
.table-bordered thead th,
.table-bordered tbody td {
  border-right: 1px solid var(--border-soft);
}
.table-bordered thead th:last-child,
.table-bordered tbody td:last-child {
  border-right: none;
}

/* Striped — alternate row backgrounds */
.table-striped tbody tr:nth-child(odd) {
  background: var(--surface-soft);
}
.table-striped tbody tr:hover {
  background: var(--bg-hover);
}

/* Flush — no horizontal padding on edges */
.table-flush thead th:first-child,
.table-flush tbody td:first-child {
  padding-left: 0;
}
.table-flush thead th:last-child,
.table-flush tbody td:last-child {
  padding-right: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   STICKY HEADER — locks thead when scrolling .table-scroll
   ══════════════════════════════════════════════════════════════════════════ */

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-soft);
}


/* ══════════════════════════════════════════════════════════════════════════
   SORTABLE HEADER — visual affordance for sortable columns
   ══════════════════════════════════════════════════════════════════════════ */

.table-sortable {
  cursor: pointer;
  user-select: none;
  transition: var(--tr-colors);
}
.table-sortable:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.table-sortable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   ROW STATES — selected, disabled
   ══════════════════════════════════════════════════════════════════════════ */

.table-row-selected {
  background: var(--brand-fade);
}
.table-row-selected:hover {
  background: var(--brand-fade);
}

.table-row-disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE row inside table
   ══════════════════════════════════════════════════════════════════════════ */

.table-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STACK — transform table to card-stack on narrow viewports
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .table-stack thead {
    display: none;
  }
  .table-stack tbody tr {
    display: block;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .table-stack tbody tr:last-child {
    border-bottom: none;
  }
  .table-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 0;
    border-bottom: none;
    text-align: right;
  }
  .table-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-2);
    text-align: left;
    flex-shrink: 0;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   WIRE-UP INSTRUCTIONS:
   Add to static/index.html inside <head>, AFTER legacy-shim.css so this
   file wins the cascade (override priority):

     <link rel="stylesheet" href="/css/v3/table.css?v=1">

   Recommended placement order (top -> bottom in <head>):
     1. tokens.css
     2. v2/system_tokens.css
     3. (all other v2/*.css and app.css)
     4. v2/legacy-shim.css
     5. v3/components.css
     6. v3/modal.css
     7. v3/table.css              <-- here

   USAGE:
     <div class="table-wrap table-scroll">
       <table class="table table-sticky">
         <thead><tr><th>Name</th><th class="table-cell-num">Count</th></tr></thead>
         <tbody>
           <tr>
             <td data-label="Name">Foo</td>
             <td class="table-cell-num" data-label="Count">42</td>
           </tr>
         </tbody>
       </table>
     </div>

   For mobile stack mode, add `table-stack` and ensure each <td data-label="…">.
   ══════════════════════════════════════════════════════════════════════════ */