/* table.css — table utilities + monday-like cells (no details/summary picker) */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  overflow: hidden;
}

.th, .td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
  vertical-align: middle;
  white-space: nowrap;
  text-align: center; /* Center all cell content */
}

/* Explicit left align for first column usually helpful, but user asked for all centered. 
   Will keep generic 'center' unless specific class overrides. 
   If user wants title column left aligned, they can use .cell-left or specific styles later.
   But for now, complying with "all body cells content should be centered".
*/
.cell-left { text-align: left; } /* Added utility if needed */

.th {
  color: var(--muted);
  font-weight: 700;
  background: color-mix(in srgb, var(--panel) 80%, var(--bg));
  padding: 3px;
  font-size: var(--fs-12);
}

.tr:hover .td {
  background: color-mix(in srgb, var(--muted) 4%, var(--panel));
}

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

/* Cell sizing utilities */
.cell-sm { width: 120px; }
.cell-md { width: 180px; }
.cell-lg { width: 280px; }
.cell-xl { width: 360px; }

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

/* “Board” row height feel */
.row-compact .td { padding-block: 5px; }
.row-roomy .td { padding-block: 15px; }


/* “Table cell content layout” utilities */
.cell-stack { display: flex; flex-direction: column; gap: 6px; }
.cell-title { font-weight: 700; }
.cell-sub { font-size: var(--fs-12); color: var(--muted); }

/* Sticky header utility (optional) */
.sticky-head .th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Allow dropdown to extend outside cell */
.table {
  overflow: visible;
}
.table .td {
  overflow: visible;
  position: relative;
}