/* ============================================================
   URBINO · TABLE
   Molecule. The base table primitive — thead + tbody + cells +
   sort/filter affordances + density + zebra + special cells +
   empty/loading states.

   This is intentionally NOT a full DataTable organism. The
   toolbar, bulk-action bar, filter popover, and column chooser
   that wrap a real DataTable are downstream concerns — compose
   them from .u-toolbar, .u-popover, .u-popover--menu, and
   .u-chip--filter as the product needs.

   See docs/components/table.md → "How to compose a DataTable"
   for the recommended composition recipe.
   ============================================================ */


/* ============================================================
   THE TABLE
   ============================================================ */

.u-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--u-font-sans);
  font-size: 14px;
  color: var(--u-fg-1);
  background: var(--u-surface);
}


/* ============================================================
   HEAD
   ============================================================ */

.u-table thead th {
  background: var(--u-surface-alt);
  color: var(--u-fg-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px var(--u-space-3);
  border-bottom: 1px solid var(--u-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: var(--u-z-sticky);
}

.u-table__th { position: relative; user-select: none; }
.u-table__th-inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Sortable column — wraps the label in a button */
.u-table__th-sortable {
  cursor: pointer;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-1);
  border-radius: var(--u-radius-xs);
}
.u-table__th-sortable:hover { color: var(--u-fg-1); }
.u-table__th-sortable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--u-primary);
}

.u-table__th-sort {
  display: inline-flex;
  width: 12px; height: 12px;
  color: currentColor;
  opacity: 0.4;
}
.u-table__th-sortable:hover .u-table__th-sort { opacity: 0.8; }
.u-table__th.is-sorted .u-table__th-sort,
.u-table__th[aria-sort="ascending"] .u-table__th-sort,
.u-table__th[aria-sort="descending"] .u-table__th-sort {
  opacity: 1;
  color: var(--u-fg-2);
}

/* Filter funnel button — opens a Popover with the column's filter rules */
.u-table__th-filter {
  width: 22px; height: 22px;
  border-radius: var(--u-radius-xs);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--u-fg-4);
  margin-left: var(--u-space-1);
}
.u-table__th-filter:hover { background: var(--u-surface-sunk); color: var(--u-fg-2); }
.u-table__th-filter.is-active {
  color: var(--u-primary);
  background: var(--u-primary-soft);
}
.u-table__th-filter img,
.u-table__th-filter svg { width: 12px; height: 12px; }


/* ============================================================
   BODY
   ============================================================ */

.u-table tbody td {
  padding: var(--u-space-3);
  border-bottom: 1px solid var(--u-divider);
  vertical-align: middle;
}
.u-table tbody tr {
  transition: background var(--u-dur-fast) var(--u-ease-out);
  cursor: default;
}
.u-table tbody tr.is-clickable,
.u-table tbody tr[data-clickable] { cursor: pointer; }
.u-table tbody tr.is-clickable:hover,
.u-table tbody tr[data-clickable]:hover {
  background: var(--u-primary-soft);
}
.u-table tbody tr.is-selected {
  background: var(--u-primary-soft);
}
.u-table tbody tr.is-selected:hover { background: var(--u-blue-100); }

/* Zebra (off by default) */
.u-table--zebra tbody tr:nth-child(even):not(.is-selected) {
  background: var(--u-slate-25);
}
.u-table--zebra tbody tr:nth-child(even):not(.is-selected):hover { background: var(--u-primary-soft); }


/* ============================================================
   DENSITY
   --compact (8 / 10), default (10 / 12), --cozy (12 / 14)
   Aligns with [data-density] values from tokens/density.css
   when the table sits inside a density scope.
   ============================================================ */

.u-table--compact thead th { padding: var(--u-space-2) 10px; font-size: 11px; }
.u-table--compact tbody td { padding: var(--u-space-2) 10px; font-size: 13px; }
.u-table--cozy thead th { padding: var(--u-space-3) 14px; }
.u-table--cozy tbody td { padding: 14px; }


/* ============================================================
   SPECIAL CELLS
   ============================================================ */

/* Checkbox column — small fixed width */
.u-table__check {
  width: 40px;
  padding-left: 14px !important;
  padding-right: 0 !important;
}

/* Action column — chevron / overflow at the row end */
.u-table__action {
  width: 36px;
  text-align: right;
  color: var(--u-fg-4);
  padding-right: 14px !important;
}

/* Numeric — right-aligned, tabular nums */
.u-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mono — for IDs and codes */
.u-table__mono {
  font-family: var(--u-font-mono);
  font-size: 12px;
  color: var(--u-fg-2);
}

/* Empty state cell — single row spanning all columns */
.u-table__empty {
  padding: var(--u-space-10) var(--u-space-5) !important;
  text-align: center;
  color: var(--u-fg-3);
}