@crewlethq/ui 0.2.0 → 0.3.0

package/dist/DataTable-3GALZUW2.css

@@ -1,1593 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
- * Default variant.
- *
- * Every rule is scoped under the variant root, so the table's
- * internals never match an application's own class names and the
- * compact variant's rules further down never leak into this one.
- * ───────────────────────────────────────────────────────────────── */
-.crewlet-data-table--default {
-  width: 100%;
-  position: relative;
-  overflow-x: auto;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table {
-  width: 100%;
-  border-collapse: collapse;
-  background: transparent;
-  display: table;
-  table-layout: auto;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table thead {
-  border-bottom: 1px solid var(--color-border-default);
-  display: table-header-group;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table tbody {
-  display: table-row-group;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table tr {
-  display: table-row;
-}
-
-/*
- * Header cells hold the absolutely positioned resize handle, so they
- * are the positioning context, and the right padding is kept tight so
- * the handle sits against the label rather than a gutter.
- */
-.crewlet-data-table--default .crewlet-data-table__table th {
-  padding: 2px 4px 2px 16px;
-  text-align: left;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  position: relative;
-  user-select: none;
-  display: table-cell;
-  white-space: nowrap;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table td {
-  padding: 12px 16px;
-  font-size: 14px;
-  color: var(--color-text-primary);
-  border-bottom: 1px solid var(--color-border-default);
-  display: table-cell;
-  text-align: left;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-/*
- * Column separator on the header row only. The th already declares
- * position: relative for the resize handle, so the pseudo can hang
- * off the right edge without extra wrapping.
- */
-.crewlet-data-table--default .crewlet-data-table__table thead th:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  right: 0;
-  width: 1px;
-  background: var(--color-border-default);
-  pointer-events: none;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table tbody tr {
-  background: var(--color-surface-subtle);
-  transition: background-color 0.2s ease;
-}
-
-.crewlet-data-table--default .crewlet-data-table__table tbody tr:hover {
-  background: var(--color-surface-elevated);
-}
-
-.crewlet-data-table--default .crewlet-data-table__empty {
-  color: var(--color-text-secondary);
-  font-style: italic;
-  text-align: center;
-  padding: 40px 20px;
-}
-
-/* Resizable columns */
-.crewlet-data-table--default .crewlet-data-table__column-resizer {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  cursor: col-resize;
-  user-select: none;
-  z-index: 10;
-}
-
-.crewlet-data-table--default .crewlet-data-table__column-resizer:hover {
-  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.3);
-}
-
-/* Set on <body> while a column is being dragged, so the resize cursor
-   and the text-selection lock hold even when the pointer leaves the
-   header cell. */
-body.crewlet-data-table-resizing {
-  cursor: col-resize;
-  user-select: none;
-}
-
-/* Sortable headers */
-.crewlet-data-table--default .crewlet-data-table__th--sortable {
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-.crewlet-data-table--default .crewlet-data-table__th--sortable:hover {
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  padding-right: 0;
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-content > span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.crewlet-data-table--default .crewlet-data-table__sort-icon {
-  font-size: 16px;
-  flex-shrink: 0;
-  opacity: 0.5;
-  transition: opacity 0.2s ease;
-}
-
-.crewlet-data-table--default .crewlet-data-table__th--sortable:hover .crewlet-data-table__sort-icon {
-  opacity: 0.8;
-}
-
-.crewlet-data-table--default .crewlet-data-table__sort-icon.is-active {
-  opacity: 1;
-  color: var(--color-text-primary);
-}
-
-/* Row action button */
-.crewlet-data-table--default .crewlet-data-table__action-btn {
-  background: transparent;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.crewlet-data-table--default .crewlet-data-table__action-btn:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-}
-
-.crewlet-data-table--default .crewlet-data-table__action-btn .material-symbols-outlined {
-  font-size: 18px;
-}
-
-/* Settings and reset buttons in the Actions column header */
-.crewlet-data-table--default .crewlet-data-table__header-btn {
-  position: absolute;
-  top: 4px;
-  background: transparent;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-btn:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-btn .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-btn--settings {
-  right: 4px;
-}
-
-.crewlet-data-table--default .crewlet-data-table__header-btn--reset {
-  right: 28px;
-}
-
-/*
- * The settings modal is uilet's Modal primitive, composed in
- * DataTable.tsx. Its inner controls (the settings sections, the
- * items-per-page chips and the column toggles) have no uilet
- * equivalent and are styled below, namespaced under
- * .crewlet-data-table__ so they never collide with an application's
- * own class names.
- */
-
-.crewlet-data-table__settings-section {
-  margin-bottom: 24px;
-  position: relative;
-}
-
-.crewlet-data-table__settings-section:last-child {
-  margin-bottom: 0;
-}
-
-.crewlet-data-table__settings-section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 12px 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.crewlet-data-table__settings-section-hint {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  margin: 0 0 12px 0;
-}
-
-/* Items Per Page Options */
-/*
- * Settings modal footer layout. Reset on the left, Cancel + Apply on
- * the right, sharing the modal's footer row via space-between. Modal's
- * default footer is justify-content: flex-end, so the wrapper takes
- * over the row to anchor Reset on the left.
- */
-.crewlet-data-table__settings-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.crewlet-data-table__settings-footer-right {
-  display: flex;
-  gap: 8px;
-}
-
-/*
- * Reset to Default checkmark confirmation. Renders briefly inside the
- * Button's leadingIcon slot after a click so the operator sees the
- * reset landed; auto-clears after ~1.5s. The colour tracks the
- * theme's success token (with a sensible fallback) so it reads as a
- * positive affordance rather than chrome.
- */
-.crewlet-data-table__reset-confirm-icon {
-  font-size: 16px;
-  color: var(--color-feedback-success, #22c55e);
-}
-
-.crewlet-data-table__items-per-page-options {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.crewlet-data-table__items-per-page-btn {
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  color: var(--color-text-primary);
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.crewlet-data-table__items-per-page-btn:hover {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-text-secondary);
-}
-
-.crewlet-data-table__items-per-page-btn.is-active {
-  background: var(--color-brand-accent);
-  border-color: var(--color-brand-accent);
-  color: #ffffff;
-}
-
-/* Column Toggles */
-.crewlet-data-table__column-toggles {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 350px;
-}
-
-.crewlet-data-table__column-toggle-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: 6px;
-  cursor: move;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  min-height: 42px;
-  box-sizing: border-box;
-}
-
-.crewlet-data-table__column-toggle-item:hover:not(.is-dragging) {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-text-secondary);
-}
-
-.crewlet-data-table__column-toggles:has(.is-dragging) .crewlet-data-table__column-toggle-item:not(.is-dragging):hover {
-  background: var(--color-surface-subtle);
-  border-color: var(--color-border-default);
-}
-
-.crewlet-data-table__column-toggle-item.is-dragging {
-  opacity: 0.5;
-}
-
-.crewlet-data-table__column-drag-handle {
-  color: var(--color-text-secondary);
-  cursor: grab;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.crewlet-data-table__column-drag-handle:active {
-  cursor: grabbing;
-}
-
-.crewlet-data-table__column-toggle-checkbox {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: 2px solid var(--color-border-default);
-  border-radius: 4px;
-  background: var(--color-surface-background);
-  position: relative;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.crewlet-data-table__column-toggle-checkbox:hover {
-  border-color: var(--color-brand-accent);
-  opacity: 1;
-}
-
-.crewlet-data-table__column-toggle-checkbox:checked {
-  background: var(--color-brand-accent);
-  border-color: var(--color-brand-accent);
-}
-
-.crewlet-data-table__column-toggle-checkbox:checked::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 4px;
-  height: 8px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: translate(-50%, -60%) rotate(45deg);
-}
-
-.crewlet-data-table__column-toggle-checkbox:focus {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.32));
-}
-
-.crewlet-data-table__column-toggle-label {
-  font-size: 14px;
-  color: var(--color-text-primary);
-  user-select: none;
-  flex: 1;
-  text-align: left;
-}
-
-/* Modal footer buttons are uilet <Button> primitives composed in DataTable.tsx. */
-
-/*
- * Light theme: the column-toggle checkbox needs higher contrast than
- * --color-border-default on a white surface, so the unchecked state
- * stays visible. The underlying surface / border / text tokens are
- * flipped automatically by @crewlethq/tokens/css/themes.
- */
-body.theme-light .crewlet-data-table__column-toggle-checkbox {
-  border-color: rgba(0, 0, 0, 0.4);
-}
-
-/*
- * Compact settings modal widgets: the Wrap lines toggle. The page-size
- * control reuses the rich modal's .crewlet-data-table__items-per-page-*
- * chip styles so both modal shapes share one control vocabulary; only
- * the section heading ("Page size" vs "Items per page") differs.
- */
-.crewlet-data-table__toggle-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 6px 4px;
-  cursor: pointer;
-}
-
-.crewlet-data-table__toggle-checkbox {
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: 2px solid var(--color-border-default);
-  border-radius: 4px;
-  background: var(--color-surface-background);
-  position: relative;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-  margin-top: 1px;
-}
-
-.crewlet-data-table__toggle-checkbox:hover {
-  border-color: var(--color-brand-accent);
-}
-
-.crewlet-data-table__toggle-checkbox:checked {
-  background: var(--color-brand-accent);
-  border-color: var(--color-brand-accent);
-}
-
-.crewlet-data-table__toggle-checkbox:checked::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 4px;
-  height: 8px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: translate(-50%, -60%) rotate(45deg);
-}
-
-.crewlet-data-table__toggle-checkbox:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.32));
-}
-
-.crewlet-data-table__toggle-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  user-select: none;
-}
-
-.crewlet-data-table__toggle-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table__toggle-hint {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-body.theme-light .crewlet-data-table__toggle-checkbox {
-  border-color: rgba(0, 0, 0, 0.4);
-}
-
-/*
- * Cursor-pagination footer: centered Load more button rendered when
- * the caller passes hasMore + onLoadMore. The terminal state is
- * intentionally silent; an "End of feed" indicator was retired so
- * exhausted tables collapse to nothing rather than a dead label.
- */
-.crewlet-data-table__load-more {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 0;
-  min-height: 32px;
-}
-
-/* ─────────────────────────────────────────────────────────────────
- * Compact variant.
- *
- * Lighter table chrome for dense list pages: tight padding, uppercase
- * headers, full-row loading and error states, and the settings cog in
- * the toolbar rather than the header row.
- * Designed to sit inside an external Toolbar + Footer that the host
- * page owns.
- *
- * Tokens declared on the root element are overridable by the host,
- * from a rule that targets the root through the table's className or
- * an ancestor selector (for example `.my-page .crewlet-data-table--compact`),
- * so the active-sort color, the row hover and the archived-row tint
- * can match a non-default palette without uilet needing to know about
- * the host's tokens.
- * ───────────────────────────────────────────────────────────────── */
-.crewlet-data-table--compact {
-  --crewlet-data-table-row-hover-bg: var(--color-surface-elevated);
-  --crewlet-data-table-active-sort-color: var(--color-brand-accent);
-  --crewlet-data-table-archived-tint-rgb: 196, 96, 96;
-  width: 100%;
-}
-
-/*
- * Horizontal-scroll wrapper around the <table> element only. The
- * header (title + description + cog + pagination), toolbar (filter
- * slot), and Load more footer sit OUTSIDE this scroll viewport so
- * they stay anchored when the table overflows on narrow viewports.
- */
-.crewlet-data-table__rail {
-  /*
-   * Positioning context for the scrollbar mask. The rail wraps the
-   * scroll viewport so the mask can be placed at the rail's bottom-
-   * right corner without interfering with the table's natural flow.
-   * Width matches the scroll viewport inside.
-   */
-  position: relative;
-  width: 100%;
-}
-
-/*
- * Scrollbar mask. When the table holds one or more sticky-right
- * columns, the horizontal scrollbar inside the scroll viewport
- * physically spans the full pane width, including the area visually
- * occupied by the sticky cells. The mask overlays the rightmost
- * portion of that scrollbar with the sticky background so the visible
- * scroll track ends exactly at the left border of the sticky cells.
- * Width is sourced from --crewlet-data-table-sticky-pane-width, which
- * the component sets inline from the live sticky column widths so
- * resize and Reset stay in sync. The default of 0 keeps the mask
- * invisible on tables without a sticky pane.
- *
- * Height is sized to cover the tallest common horizontal scrollbar
- * (Windows / X11 classic) without intruding into the rows above it
- * on macOS overlay scrollbars where the bar is thinner. The mask is
- * pointer-events: none so it never swallows clicks targeted at the
- * underlying cells, even though those clicks already land on the
- * sticky cell that sits above.
- */
-.crewlet-data-table__rail::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: var(--crewlet-data-table-sticky-pane-width, 0);
-  height: 16px;
-  background: var(
-    --crewlet-data-table-sticky-bg,
-    var(--color-surface-elevated, #1f2128)
-  );
-  pointer-events: none;
-  z-index: 2;
-}
-
-/*
- * Frozen variant: tables that carry a sticky-right action column.
- * The fit pass guarantees the regular columns redistribute to fit
- * the container at every container-size change, so a horizontal
- * scrollbar is never needed and would only signal a layout that
- * already lost. Locking overflow to hidden also removes the
- * scrollbar mask requirement (no scrollbar means nothing to mask),
- * so the rail drops its ::after pseudo to keep the bottom-right
- * corner clean across surfaces that use a different sticky-bg.
- */
-.crewlet-data-table__rail--frozen .crewlet-data-table__scroll {
-  overflow-x: hidden;
-}
-
-.crewlet-data-table__rail--frozen::after {
-  display: none;
-}
-
-.crewlet-data-table__scroll {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table {
-  /*
-   * width: 100% + table-layout: fixed + a trailing spacer column
-   * lets the table fill the container at minimum, while still
-   * letting the column-resize handle write widths 1:1. The spacer
-   * column has no explicit width so it absorbs all the leftover
-   * space; user-resized columns stay at their exact widths. When
-   * the sum of column widths exceeds the container, the spacer
-   * collapses to zero and the horizontal-scroll wrapper handles
-   * overflow.
-   */
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.crewlet-data-table__th--spacer,
-.crewlet-data-table__td--spacer {
-  /*
-   * Trailing spacer column: invisible, padding-free, takes whatever
-   * width is left over after the user-defined columns claim theirs.
-   * No padding so it never adds to the natural minimum width; no
-   * border on the right so the table's right edge stays clean.
-   */
-  padding: 0;
-  border: 0;
-  background: transparent;
-  min-width: 0;
-  width: auto;
-}
-
-/*
- * When the table carries a sticky-right action column, the spacer
- * sits BETWEEN the rightmost regular cell and the pinned action
- * cell. Force a minimum gutter on it so the regular content never
- * touches the action column, even if a state mutation bypasses the
- * fit pass (visibility toggle, controlled column-width override,
- * etc.). The fit pass also reserves this same 16px in its chrome
- * accounting so the gutter and the proportional grow stay in sync.
- */
-.crewlet-data-table--compact
-  .crewlet-data-table__table:has(.crewlet-data-table__th--sticky-right)
-  .crewlet-data-table__th--spacer,
-.crewlet-data-table--compact
-  .crewlet-data-table__table:has(.crewlet-data-table__th--sticky-right)
-  .crewlet-data-table__td--spacer {
-  min-width: 24px;
-  width: 24px;
-}
-
-/*
- * Row actions column: pinned to the viewport's right edge with
- * position: sticky so the kebab affordance stays visible during
- * horizontal scroll AND keeps a fixed visual position regardless of
- * how the operator resizes the data columns. The cell intentionally
- * has no background so it blends with the surrounding row tone
- * (default, hover, archived), the parent card surface remains
- * visible underneath. The z-index keeps the kebab above the column
- * separators painted on data cells.
- */
-.crewlet-data-table__th--actions,
-.crewlet-data-table__td--actions {
-  position: sticky;
-  right: 0;
-  z-index: 2;
-  background: transparent;
-}
-
-/*
- * Opt-in sticky-right modifier for caller-defined columns. Pins the
- * column to the right edge of the scroll container so a trailing
- * action (a Details link, Edit chip, etc.) stays visible regardless
- * of horizontal scroll or how the operator resizes earlier data
- * columns. The cell paints an opaque background sourced from a
- * theme-overridable token so content scrolling behind the cell does
- * not bleed through the link text. The header z-index sits a layer
- * above body cells so the column boundary remains crisp at the
- * sticky edge. Callers tinting the surface re-bind the token via a
- * wrapper rule (a card-style className on the table, for example).
- */
-.crewlet-data-table__th--sticky-right,
-.crewlet-data-table__td--sticky-right {
-  position: sticky;
-  right: 0;
-  z-index: 2;
-  background: var(--crewlet-data-table-sticky-bg, var(--color-surface-elevated, #1f2128));
-}
-
-/*
- * Sticky cells are the row's trailing action area; the affordance
- * they hold sits centered inside the sticky pane so the chip reads
- * as the focal point of the pane rather than tucked against either
- * edge. The base compact cell rule pins text-align: left at higher
- * specificity, so the override is written with the full selector
- * chain to win the cascade. Inline-flex content (the typical action
- * chip pattern) respects the cell's text-align so this is sufficient
- * on its own, no display change to the table-cell needed.
- */
-.crewlet-data-table--compact .crewlet-data-table__table th.crewlet-data-table__th--sticky-right,
-.crewlet-data-table--compact .crewlet-data-table__table td.crewlet-data-table__td--sticky-right {
-  text-align: center;
-}
-
-.crewlet-data-table__th--sticky-right {
-  z-index: 3;
-  background: var(
-    --crewlet-data-table-sticky-header-bg,
-    var(--crewlet-data-table-sticky-bg, var(--color-surface-elevated, #1f2128))
-  );
-}
-
-/*
- * Row hover + expanded states change the <tr> background, but cells
- * with their own background (the sticky-right column needs one so
- * scrolled content does not bleed through) do not pick that change
- * up automatically. Mirror the row-state colors onto the sticky
- * cell so the right edge stays visually attached to the row it
- * belongs to instead of standing out as a different shade.
- */
-.crewlet-data-table--compact tbody tr:hover .crewlet-data-table__td--sticky-right,
-.crewlet-data-table--compact .crewlet-data-table__row--expandable.is-expanded .crewlet-data-table__td--sticky-right {
-  background: var(--crewlet-data-table-row-hover-bg);
-}
-
-/*
- * Unstyled button-as-link cells (an agent name that navigates, a
- * schedule that opens a drawer) must read as table text. Browsers
- * center button text by their UA stylesheet, so a cell value that
- * wraps onto multiple lines would center-align its lines instead of
- * following the cell's alignment. Inherit pins buttons to whatever
- * the cell declares; components that center via flex (Button,
- * IconButton) are unaffected because their alignment comes from
- * justify-content, not text-align.
- */
-.crewlet-data-table__table td button {
-  text-align: inherit;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table th,
-.crewlet-data-table--compact .crewlet-data-table__table td {
-  padding: 10px 12px;
-  text-align: left;
-  font-size: 13px;
-  border-bottom: 1px solid var(--color-border-default);
-  /*
-   * Center cells against the row's tallest cell. Tables like an
-   * activity feed mix short cells ("4h ago", "success") with tall
-   * identity blocks (avatar + name + id stacked vertically),
-   * so middle alignment keeps the short cells from sticking to
-   * the top while the multi-line ones sit at the row's full height.
-   */
-  vertical-align: middle;
-  /*
-   * Default to truncate-with-ellipsis (AWS-style data tables). The
-   * Wrap lines toggle in the compact settings modal flips this on
-   * by adding .crewlet-data-table--wrap-lines on the root, which
-   * the override below re-enables wrapping for. Long unbroken
-   * tokens (UUIDs) get clipped with an ellipsis instead of pushing
-   * the column wider. (max-width is intentionally NOT set here:
-   * table-layout: fixed already takes the th's width as the column
-   * width, and forcing max-width: 0 collapses the column to zero
-   * under some browser implementations.)
-   */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/*
- * Wrap-lines toggle only affects BODY cells. Headers always keep
- * their content on a single line; a narrow column truncates the
- * label with an ellipsis instead of wrapping onto two lines, which
- * would change row heights every time someone resizes a column.
- */
-.crewlet-data-table--compact.crewlet-data-table--wrap-lines .crewlet-data-table__table td {
-  white-space: normal;
-  overflow: visible;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  max-width: none;
-}
-
-/*
- * Force-pin the header cells (and their inner sort-button label) to
- * single-line truncate, even when --wrap-lines is on. The sort
- * button is a flex row [label | arrow]; the label takes whatever
- * space is left, then ellipsises.
- */
-.crewlet-data-table--compact .crewlet-data-table__table th,
-.crewlet-data-table--compact.crewlet-data-table--wrap-lines .crewlet-data-table__table th {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button {
-  overflow: hidden;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button > span:first-child {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table th {
-  color: var(--color-text-tertiary);
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  font-size: 11px;
-  /* Headers must read as a single tight line; never wrap onto two lines
-     because the next column is unusually narrow. */
-  white-space: nowrap;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table tbody tr:hover {
-  background: var(--crewlet-data-table-row-hover-bg);
-}
-
-/*
- * Thin vertical separator between column headers. Painted as an
- * absolutely positioned pseudo-element on the right edge of every
- * thead th, with three exclusions:
- *   1. The literal last th (no trailing separator at the row's edge).
- *   2. Chrome columns themselves (the --chrome modifier on the
- *      empty actions / expand-chevron headers) skip the separator
- *      regardless of position. This matters when the expand chevron
- *      sits at the left edge.
- *   3. A th whose next sibling is a chrome column also skips the
- *      separator, so the last data column never has a line dividing
- *      it from a trailing chrome column.
- * The line is inset 6px from top and bottom so it reads as a column
- * delimiter rather than a horizontal border. Only the header row
- * carries separators; data rows stay clean.
- */
-.crewlet-data-table--compact .crewlet-data-table__table thead th {
-  position: relative;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table thead th:not(:last-child):not(.crewlet-data-table__th--chrome):not(:has(+ .crewlet-data-table__th--chrome))::after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  right: 0;
-  width: 1px;
-  background: var(--color-border-default);
-  pointer-events: none;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__row--clickable {
-  cursor: pointer;
-}
-
-/*
- * Pagination + settings controls live in the toolbar-end zone (see
- * the toolbar rules higher up); these rules style the buttons
- * themselves.
- */
-.crewlet-data-table__pagination {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-/*
- * Thin vertical separator between the pagination chevrons and the
- * settings cog. Painted as a pseudo-element on the left edge of the
- * settings button (inset 4px from top/bottom so it reads as a
- * delimiter, not a border). Only renders when the settings button
- * sits adjacent to the pagination block.
- */
-.crewlet-data-table__pagination + .crewlet-data-table__settings-btn {
-  position: relative;
-  /*
-   * Widen the gap between the pagination cluster and the settings
-   * cog so the separator can sit close to the pagination side with
-   * comfortable breathing room before the cog.
-   */
-  margin-left: 14px;
-}
-
-.crewlet-data-table__pagination + .crewlet-data-table__settings-btn::before {
-  content: '';
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  /*
-   * Anchor the line ~2px past the pagination block's right edge
-   * (12px from the settings button's left edge) so it reads as the
-   * closer of the pagination cluster, not a divider centered in
-   * the gap.
-   */
-  left: -12px;
-  width: 1px;
-  background: var(--color-border-default);
-}
-
-.crewlet-data-table__page-btn,
-.crewlet-data-table__settings-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
-}
-
-.crewlet-data-table__page-btn:hover:not(:disabled),
-.crewlet-data-table__settings-btn:hover {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border-default);
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table__page-btn:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.crewlet-data-table__page-btn .material-symbols-outlined,
-.crewlet-data-table__settings-btn .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.crewlet-data-table__page-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  padding: 0 6px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-primary);
-}
-
-/* ─── Toolbar slot (filter bars, search, batch actions) ────────── */
-/*
- * Two-zone toolbar: the caller's content (filter pills, search) sits
- * on the LEFT (toolbar-start); the table's own controls (pagination
- * chevrons + settings cog) sit on the RIGHT (toolbar-end). Either
- * zone can be absent; the toolbar only renders when at least one
- * has content. Toolbar-end always aligns to the right edge so the
- * cog and chevrons hold a consistent position across pages.
- */
-/*
- * Optional header block. Sits above the toolbar and renders the
- * table's title (section name) and description (one-line context)
- * when callers pass either prop. Folds what used to be a per-page
- * <section><header><h2/><p/></header><DataTable/></section> pattern
- * into the primitive so the entire surface shares one card.
- */
-/*
- * Header row layout. Icon (optional) + title/description stack on the
- * left, right-side controls (pagination + settings cog) on the right.
- * Wraps on narrow viewports so the controls drop below the text rather
- * than colliding with a long description.
- */
-.crewlet-data-table__header {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 14px 16px 12px;
-  border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-subtle);
-}
-
-.crewlet-data-table__header-icon {
-  font-size: 22px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.crewlet-data-table__header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-}
-
-.crewlet-data-table__header .crewlet-data-table__toolbar-end {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.crewlet-data-table__title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  letter-spacing: -0.005em;
-}
-
-.crewlet-data-table__description {
-  margin: 0;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-}
-
-/*
- * When the header and the toolbar are both present, the toolbar's
- * top edge already meets the header's bottom border, so the toolbar
- * keeps its own bottom border (table head delimiter) without painting
- * a second top border.
- */
-.crewlet-data-table__toolbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-subtle);
-}
-
-.crewlet-data-table__toolbar-start {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: 12px;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-/*
- * Loading skeleton. Shimmer bars painted inside the real table body
- * while `loading` is true and no rows exist. The pulse mirrors the
- * Skeleton primitive's timing so mixed pages (skeleton cards above a
- * loading table) breathe in sync.
- */
-@keyframes crewlet-data-table-skeleton-pulse {
-  0%, 100% { opacity: 1; }
-  50%      { opacity: 0.45; }
-}
-
-.crewlet-data-table__skeleton-bar {
-  display: inline-block;
-  height: 12px;
-  border-radius: 4px;
-  background: var(--color-surface-elevated, var(--color-surface-muted));
-  animation: crewlet-data-table-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  vertical-align: middle;
-}
-
-/*
- * Clear-filters link. Sits at the end of the filter slot, baseline-
- * aligned with the filter controls (the slot uses align-items:
- * flex-end, so the bottom padding tucks the text to the same line
- * as the Select triggers). Rendered only while a filter is active.
- */
-.crewlet-data-table__clear-filters {
-  background: none;
-  border: none;
-  padding: 0 0 7px;
-  font-size: 12.5px;
-  font-family: inherit;
-  color: var(--color-brand-accent);
-  cursor: pointer;
-  white-space: nowrap;
-  align-self: flex-end;
-  /* Pin to the right edge of the toolbar row (before the pagination
-     cluster when present) so the affordance sits in the same place
-     on every table, regardless of the filter slot's own layout. */
-  margin-left: auto;
-  flex: 0 0 auto;
-}
-
-.crewlet-data-table__clear-filters:hover {
-  text-decoration: underline;
-}
-
-/*
- * Pagination + settings cog. Always pinned to the right edge of the
- * toolbar row, even when:
- *   - the toolbar has no filter slot (solo right-side controls)
- *   - the row wraps onto two lines on narrow viewports
- * `margin-left: auto` consumes the leftover row space, pushing the
- * cluster past the filter slot (or to the row's right edge when it
- * is alone). justify-content: space-between alone is not enough,
- * since space-between with one item left-aligns it.
- */
-.crewlet-data-table__toolbar-end {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* ─── Expandable rows ──────────────────────────────────────────── */
-
-/*
- * Chevron column: fixed 32px width, zero horizontal padding on both
- * the header and the body cells. With the same padding on both, the
- * `>` glyph in every data row lines up vertically beneath the
- * expand-all `>` in the header row.
- */
-.crewlet-data-table__expand-header,
-.crewlet-data-table--compact .crewlet-data-table__table th.crewlet-data-table__expand-header {
-  width: 32px;
-  text-align: center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table td.crewlet-data-table__expand-cell {
-  width: 32px;
-  text-align: center;
-  color: var(--color-text-tertiary);
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/*
- * Expand-all header button. Sits inside the chevron column header
- * cell, paints the right-pointing chevron, rotates to point down when
- * every visible row is expanded. Clicking toggles between expand-all
- * and collapse-all.
- */
-.crewlet-data-table__expand-all-btn {
-  /*
-   * Tight 22x22 hit target around the chevron glyph so the hover
-   * highlight reads as a small square button rather than filling the
-   * whole header cell. The parent header centers it horizontally.
-   */
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--color-text-tertiary);
-  border-radius: 4px;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.crewlet-data-table__expand-all-btn:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table__expand-all-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.32));
-}
-
-.crewlet-data-table__chevron {
-  font-size: 18px;
-  line-height: 1;
-  transition: transform 0.18s ease;
-  display: inline-block;
-}
-
-/*
- * `chevron_right` glyph points right by default; rotating 90deg
- * makes it point down to signal "expanded". Both the per-row
- * chevron and the expand-all header chevron share this transition.
- */
-.crewlet-data-table__chevron.is-open {
-  transform: rotate(90deg);
-}
-
-.crewlet-data-table--compact .crewlet-data-table__row--expandable.is-expanded {
-  background: var(--crewlet-data-table-row-hover-bg);
-}
-
-.crewlet-data-table__expanded-row td.crewlet-data-table__expanded-cell {
-  padding: 16px 14px;
-  background: var(--color-surface-subtle);
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-/* In comfortable density, the expanded panel inherits the same outer
-   24px margin as its parent row so the detail content lines up with
-   the row's first and last columns. */
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__expanded-row td.crewlet-data-table__expanded-cell {
-  padding: 16px 24px;
-}
-
-/*
- * Density="comfortable" overrides. Used by surfaces that live inside a
- * section card with 24px inner padding, where the
- * canonical compact density (13px font, 10/12px cell padding) looks
- * cramped against the surrounding card chrome. The font and cell
- * padding bump up; the first / last column gain extra outer padding
- * so the row aligns with the card's left and right edges.
- */
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table {
-  font-size: 14px;
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table th,
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table td {
-  padding: 14px 14px;
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table th {
-  padding: 12px 14px;
-  background: var(--color-surface-subtle);
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table th:first-child,
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table td:first-child {
-  padding-left: 24px;
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table th:last-child,
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__table td:last-child {
-  padding-right: 24px;
-}
-
-/*
- * Sortable-header button inside the comfortable density needs the same
- * horizontal padding bumps so the label sits flush with adjacent cells
- * (the button supplants the th's padding when sortable=true).
- */
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__sort-button {
-  padding: 12px 14px;
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__th--sortable:first-child .crewlet-data-table__sort-button {
-  padding-left: 24px;
-}
-
-.crewlet-data-table--compact.crewlet-data-table--density-comfortable .crewlet-data-table__th--sortable:last-child .crewlet-data-table__sort-button {
-  padding-right: 24px;
-}
-
-/* Sortable header. The button hosts the click target so the arrow icon
-   is part of the same hit region as the label. */
-.crewlet-data-table--compact .crewlet-data-table__th--sortable {
-  padding: 0 !important;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button {
-  display: inline-flex;
-  align-items: center;
-  /*
-   * Label on the left, sort arrow pinned to the right edge of the
-   * column. justify-content: space-between with gap stretches the
-   * row so the arrow always sits flush against the column boundary
-   * regardless of label length. The flex behaviour also makes the
-   * label and arrow share one hit region.
-   */
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  color: inherit;
-  font: inherit;
-  text-transform: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  text-align: left;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button > span:first-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button .material-symbols-outlined {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button:hover {
-  color: var(--color-text-secondary);
-}
-
-.crewlet-data-table--compact .crewlet-data-table__sort-button .material-symbols-outlined {
-  font-size: 14px;
-  opacity: 0.45;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__th--sortable.is-active .crewlet-data-table__sort-button {
-  color: var(--crewlet-data-table-active-sort-color);
-}
-
-.crewlet-data-table--compact .crewlet-data-table__th--sortable.is-active .crewlet-data-table__sort-button .material-symbols-outlined {
-  opacity: 1;
-}
-
-/*
- * Compact column resizer. A wide hit area straddling the column's
- * right edge: 8px total, centered on the boundary (4px into the
- * cell, 4px past). Hovering reveals a soft accent strip so the
- * operator can find the handle without it cluttering the default
- * header. mousedown wiring is owned by the JSX; this rule just
- * paints the affordance and sets the resize cursor.
- */
-.crewlet-data-table__resizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  /*
-   * Wide hit area straddling the column boundary: 16px total, 8px
-   * on each side. Gives the operator a generous grab zone so the
-   * drag doesn't drop out when the mouse drifts a few pixels off
-   * the visible separator line.
-   */
-  right: -8px;
-  width: 16px;
-  cursor: col-resize;
-  user-select: none;
-  z-index: 2;
-}
-
-.crewlet-data-table__resizer::before {
-  content: '';
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  left: 50%;
-  width: 2px;
-  transform: translateX(-50%);
-  background: transparent;
-  border-radius: 1px;
-  transition: background-color 0.15s ease;
-}
-
-.crewlet-data-table__resizer:hover::before,
-.crewlet-data-table__resizer:active::before {
-  background: var(--color-brand-accent);
-}
-
-.crewlet-data-table--compact .crewlet-data-table__empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--color-text-tertiary);
-  font-size: 13px;
-}
-
-/* Archived row treatment: subdued tone plus a left edge accent in the
-   tint colour so the row reads as "still here for context but not
-   active". A host flips --crewlet-data-table-archived-tint-rgb to pick
-   its own palette (for example a muted warning red). */
-.crewlet-data-table--compact .crewlet-data-table__table tbody tr.crewlet-data-table__row--archived td {
-  opacity: 0.55;
-  background: linear-gradient(
-    90deg,
-    rgba(var(--crewlet-data-table-archived-tint-rgb), 0.05),
-    transparent 60%
-  );
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table tbody tr.crewlet-data-table__row--archived td:first-child {
-  position: relative;
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table tbody tr.crewlet-data-table__row--archived td:first-child::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 2px;
-  background: rgba(var(--crewlet-data-table-archived-tint-rgb), 0.5);
-}
-
-.crewlet-data-table--compact .crewlet-data-table__table tbody tr.crewlet-data-table__row--archived:hover td {
-  opacity: 0.75;
-}
-
-/* ─── Copyable cell affordance ─────────────────────────────────── */
-.crewlet-data-table__copy-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-}
-
-.crewlet-data-table__copy-cell-value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-data-table__copy-cell-button {
-  flex-shrink: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
-}
-
-.crewlet-data-table__copy-cell-button .material-symbols-outlined {
-  font-size: 14px;
-  line-height: 1;
-}
-
-/* Reveal the copy button when the parent row is hovered (compact tables
-   only) or when the cell itself is hovered / focus-visible. The cell
-   selector keeps the affordance reachable outside a table context too. */
-.crewlet-data-table--compact tbody tr:hover .crewlet-data-table__copy-cell-button,
-.crewlet-data-table__copy-cell-button:focus-visible,
-.crewlet-data-table__copy-cell:hover .crewlet-data-table__copy-cell-button {
-  opacity: 1;
-}
-
-.crewlet-data-table__copy-cell-button:hover {
-  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.10);
-  border-color: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.32);
-  color: var(--color-brand-accent);
-}
-
-.crewlet-data-table__copy-cell-button.is-copied {
-  color: var(--color-brand-accent);
-  opacity: 1;
-}
-
-/* ─── Row actions kebab menu ──────────────────────────────────── */
-.crewlet-data-table__row-actions-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-}
-
-.crewlet-data-table__row-actions-trigger:hover,
-.crewlet-data-table__row-actions-trigger.is-open {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border-default);
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table__row-actions-trigger:focus-visible {
-  outline: none;
-  border-color: var(--crewlet-data-table-active-sort-color, var(--color-brand-accent));
-  box-shadow: 0 0 0 3px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.18);
-}
-
-.crewlet-data-table__row-actions-trigger .material-symbols-outlined {
-  font-size: 18px;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
-.crewlet-data-table__row-actions-popover {
-  min-width: 220px;
-  padding: 4px;
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: 10px;
-  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.45));
-}
-
-.crewlet-data-table__row-actions-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.crewlet-data-table__row-actions-divider {
-  height: 1px;
-  margin: 4px 6px;
-  background: var(--color-border-default);
-}
-
-.crewlet-data-table__row-actions-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  background: transparent;
-  border: 0;
-  border-radius: 6px;
-  color: var(--color-text-primary);
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-
-.crewlet-data-table__row-actions-item:hover:not(.is-disabled) {
-  background: var(--color-surface-elevated);
-}
-
-.crewlet-data-table__row-actions-item.is-disabled {
-  cursor: not-allowed;
-  color: var(--color-text-tertiary);
-  opacity: 0.55;
-}
-
-.crewlet-data-table__row-actions-item-icon {
-  flex-shrink: 0;
-  font-size: 18px;
-  line-height: 1.1;
-  color: var(--color-text-secondary);
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
-.crewlet-data-table__row-actions-item:hover:not(.is-disabled) .crewlet-data-table__row-actions-item-icon {
-  color: var(--color-text-primary);
-}
-
-.crewlet-data-table__row-actions-item-text {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex: 1;
-}
-
-.crewlet-data-table__row-actions-item-label {
-  font-weight: 500;
-}
-
-.crewlet-data-table__row-actions-item-description {
-  font-size: 11.5px;
-  color: var(--color-text-tertiary);
-  margin-top: 2px;
-}
-
-/* Primary action: tinted with the active-sort accent so it reads as the
-   headline action. A host overrides the custom property to substitute
-   its own accent. */
-.crewlet-data-table__row-actions-item--primary {
-  color: var(--crewlet-data-table-active-sort-color, var(--color-brand-accent));
-}
-
-.crewlet-data-table__row-actions-item--primary .crewlet-data-table__row-actions-item-icon {
-  color: var(--crewlet-data-table-active-sort-color, var(--color-brand-accent));
-}
-
-/* Danger action: tinted with the feedback-danger token so destructive
-   actions read as deliberate without screaming. */
-.crewlet-data-table__row-actions-item--danger {
-  color: var(--color-feedback-danger);
-}
-
-.crewlet-data-table__row-actions-item--danger .crewlet-data-table__row-actions-item-icon {
-  color: var(--color-feedback-danger);
-}
-
-.crewlet-data-table__row-actions-item--danger:hover:not(.is-disabled) {
-  background: rgba(239, 68, 68, 0.10);
-}