/* table.css
   Stili per il componente table.
   Usa esclusivamente variabili da tokens.css e theme-default.css.
*/

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  color: var(--color-text);
}

.table__head {
  background-color: var(--grey-100);
}

.table__header-row {
  border-bottom: var(--border-width) solid var(--color-border);
}

.table__header-cell {
  padding: var(--space-12) var(--space-16);
  font-weight: var(--fw-600);
  text-align: left;
  text-transform: uppercase;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
  vertical-align: top;
}

.table__header-cell--checkbox {
  width: 40px;
  text-align: center;
}

.table__header-cell--sortable {
  cursor: pointer;
  user-select: none;
}

.table__header-cell--sortable:hover {
  color: var(--color-text);
}

.table__header-cell:has(.table__header-input) {
  white-space: normal;
}

.table__header-input {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-8);
  font-size: var(--fs-12);
  font-weight: var(--fw-400);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background-color: var(--color-background);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-4);
  outline: none;
  transition: border-color var(--transition-150);
}

.table__header-input::placeholder {
  color: var(--color-text-muted);
}

.table__header-input:focus {
  border-color: var(--color-primary);
}

.table__sort-icon {
  margin-left: var(--space-4);
  display: inline-flex;
  vertical-align: middle;
  transition: transform var(--transition-150);
}

.table__header-cell--sort-desc .table__sort-icon {
  transform: rotate(180deg);
}

.table__body {
  background-color: var(--color-background);
}

.table__row {
  border-bottom: var(--border-width) solid var(--color-border);
}

.table__cell {
  padding: var(--space-12) var(--space-16);
  vertical-align: top;
  line-height: var(--line-height-16);
}

.table__cell--checkbox {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

.table__cell--empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-24);
}

.table__cell .badge {
  white-space: nowrap;
}

.table__cell p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-12);
  line-height: var(--line-height-14);
}