/* data-table.css: Data table (component 11). Owner: group C (P2.T6). Tokens only (L-01), logical properties only (L-04), box-shadow only var(--shadow-overlay) on overlays (L-03).
   Also holds the small shared pieces group C uses in its other three partials: the 32 px button and icon button recipes, the checkbox box, the action menu
   and the popover surface (class names start with data-table), because a library Button and Menu are built by other groups. */

[data-component="data-table"] {
  display: block;
  flex: 1 1 100%;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-region);
  color: var(--text);
}

/* ---- toolbar and bulk action bar: one 48 px slot --------------------------------------------------------------- */
.data-table__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--size-toolbar);
  padding-inline: var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
}
.data-table__bar--bulk { justify-content: flex-start; background: var(--brand-subtle); }
.data-table__bar-group { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.data-table__bar-group--end { margin-inline-start: auto; }
.data-table__bulk-count { margin-inline-end: var(--space-3); white-space: nowrap; font: var(--type-button); color: var(--text); }
.data-table__search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control-sm);
  inline-size: var(--size-field-mid);
  max-inline-size: 100%;
  padding-inline: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
}
.data-table__search:focus-within { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-2); }
.data-table__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: var(--type-body);
  color: var(--text);
}
.data-table__search-input::placeholder { color: var(--text-muted); }

/* ---- buttons drawn here until the library Button is the only source (same recipe as 02 Button, 32 px) ------------ */
.data-table__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: var(--size-control-sm);
  min-inline-size: var(--size-target-min);
  padding-inline: var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: var(--type-button);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.data-table__btn--secondary { background: var(--surface); border-color: var(--border-control); }
.data-table__btn--primary { background: var(--brand); color: var(--brand-contrast); }
.data-table__btn--primary:hover, .data-table__btn--primary[data-force="hover"], .data-table__btn--primary:active { background: var(--brand-hover); }
.data-table__btn--primary .icon { color: var(--brand-contrast); }
.data-table__btn--md { min-block-size: var(--size-control); padding-inline: var(--space-5); min-inline-size: var(--size-target-min); }
.data-table__btn:hover, .data-table__btn[data-force="hover"] { background: var(--surface-hover); }
.data-table__btn:active, .data-table__btn[data-force="active"] { background: var(--border); }
.data-table__btn[aria-disabled="true"] { background: var(--surface-sunken); border-color: transparent; color: var(--text-disabled); cursor: not-allowed; }
.data-table__btn[data-force="focus-visible"], .data-table__icon-btn[data-force="focus-visible"] { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-2); }
.data-table__btn .icon { color: var(--text-secondary); }
.data-table__icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.data-table__icon-btn:hover, .data-table__icon-btn[data-force="hover"], .data-table__icon-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.data-table__icon-btn:active { background: var(--border); }
.data-table__icon-btn .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.data-table__link-btn {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font: var(--type-button);
}
.data-table__link-btn:hover { text-decoration: underline; }

/* ---- scroll container, table, header ---------------------------------------------------------------------------- */
.data-table__scroll {
  overflow: auto;
  max-block-size: calc(100dvh - var(--sticky-offset, var(--size-topbar)) - var(--size-toolbar) - var(--size-toolbar) - var(--space-7));
  scroll-padding-block-start: var(--size-header-row);
  scroll-padding-inline-start: var(--col-id);
}
.data-table__scroll:focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }
.data-table__table {
  inline-size: 100%;
  min-inline-size: var(--w);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
col[data-w="select"] { inline-size: var(--col-select); }
col[data-w="icon"] { inline-size: var(--col-icon); }
col[data-w="actions"] { inline-size: var(--col-actions); }
col[data-w="id"] { inline-size: var(--col-id); }
col[data-w="status"] { inline-size: var(--col-status); }
col[data-w="date"] { inline-size: var(--col-date); }
col[data-w="money"] { inline-size: var(--col-money); }
col[data-w="meter"] { inline-size: var(--col-meter); }
col[data-w="chips"] { inline-size: var(--col-chips); }
col[data-w="text"] { inline-size: var(--col-text); }
col[data-w="wide"] { inline-size: var(--col-wide); }
col[data-w="name"] { min-inline-size: var(--col-name); }

.data-table__th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  block-size: var(--size-header-row);
  padding: 0;
  overflow: hidden;
  background: var(--surface-sunken);
  border-block-end: var(--border-width) solid var(--border);
  font: var(--type-label);
  color: var(--text-secondary);
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.data-table__th[aria-sort="ascending"], .data-table__th[aria-sort="descending"] { color: var(--text); }
.data-table__sort, .data-table__head-static {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: calc(var(--size-header-row) - var(--border-width));
  padding-block: 0;
  padding-inline: var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
.data-table__th:first-child > .data-table__sort, .data-table__th:first-child > .data-table__head-static { padding-inline: var(--space-5); }
.data-table__th:last-child > .data-table__sort, .data-table__th:last-child > .data-table__head-static { padding-inline-end: var(--space-5); }
.data-table__sort { cursor: pointer; }
.data-table__sort:hover, .data-table__sort[data-force="hover"] { background: var(--surface-hover); color: var(--text); }
.data-table__sort:active, .data-table__sort[data-force="active"] { background: var(--border); color: var(--text); }
.data-table__sort[data-force="focus-visible"] { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); }
.data-table__sort[data-force="hover"] .data-table__sort-icon, .data-table__sort[data-force="active"] .data-table__sort-icon { opacity: 1; }
.data-table__th[data-type="num"] > .data-table__sort, .data-table__th[data-type="num"] > .data-table__head-static { justify-content: flex-end; }
.data-table__head-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.data-table__sort-icon { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.data-table__sort:hover .data-table__sort-icon, .data-table__sort:focus-visible .data-table__sort-icon,
.data-table__th[aria-sort="ascending"] .data-table__sort-icon, .data-table__th[aria-sort="descending"] .data-table__sort-icon { opacity: 1; }
.data-table__sort:focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }
.data-table__th.data-table__th--select, .data-table__th.data-table__th--icon, .data-table__th.data-table__th--actions { padding-inline: var(--space-4) var(--space-3); text-align: start; }
.data-table__th.data-table__th--icon, .data-table__th.data-table__th--actions { padding-inline: var(--space-2); }

/* ---- body rows and cells ------------------------------------------------------------------------------------------ */
.data-table__row { background: var(--surface); }
.data-table__td {
  block-size: var(--size-row);
  padding-inline: var(--space-4);
  overflow: hidden;
  background-color: inherit;
  border-block-end: var(--border-width) solid var(--border);
  font: var(--type-table);
  color: var(--text);
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
:root[data-density="comfortable"] [data-component="data-table"]:not([data-density]) .data-table__td,
[data-component="data-table"][data-density="comfortable"] .data-table__td { block-size: var(--size-row-comfortable); font: var(--type-body); }
[data-component="data-table"][data-density="compact"] .data-table__td { block-size: var(--size-row-compact); font: var(--type-table); }
/* Field list rows follow the same density (02 says min 36; the comfortable 44 and 14/20 type is an owner-pending extension, CL-145). */
:root[data-density="comfortable"] [data-component="data-table"]:not([data-density]) .data-table__value,
[data-component="data-table"][data-density="comfortable"] .data-table__value { font: var(--type-body); }
[data-component="data-table"][data-density="comfortable"] .data-table__term,
[data-component="data-table"][data-density="comfortable"] .data-table__value { block-size: var(--size-row-comfortable); }
[data-component="data-table"][data-density="compact"] .data-table__term,
[data-component="data-table"][data-density="compact"] .data-table__value { block-size: var(--size-row-compact); }
[data-component="data-table"] .data-table__td[data-type="num"], [data-component="data-table"] .data-table__th[data-type="num"] { font-variant-numeric: tabular-nums lining-nums; } /* after the font shorthands above, which reset it */
.data-table__td[data-type="num"], .data-table__th[data-type="num"] { font-variant-numeric: tabular-nums lining-nums; }
.data-table__td:first-child { padding-inline-start: var(--space-5); border-inline-start: var(--border-width-thick) solid transparent; }
.data-table__td:last-child { padding-inline-end: var(--space-5); }
.data-table__td.data-table__td--select { padding-inline-start: calc(var(--space-4) - var(--border-width-thick)); padding-inline-end: var(--space-3); }
.data-table__td.data-table__td--icon, .data-table__td.data-table__td--actions { padding-inline: var(--space-2); text-align: center; }
.data-table__text { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table__td[data-primary="true"] a { color: var(--brand); font-weight: 500; }
.data-table__td a:hover { text-decoration: underline; }
.data-table__td a:focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }

tbody > .data-table__row:hover { background: var(--surface-hover); }
.data-table__row[data-selected="true"], .data-table__row[data-selected="true"]:hover, .data-table__row[data-open="true"], .data-table__row[data-open="true"]:hover { background: var(--brand-subtle); }
.data-table__row[data-open="true"] > .data-table__td:first-child { border-inline-start-color: var(--brand); }
.data-table__row:focus-visible { outline: none; }
/* the keyboard ring is drawn on the row's cells (an outline on a row is painted under its cells), inside the edge */
.data-table__row:focus-visible > .data-table__td, .data-table__row[data-force="focus-visible"] > .data-table__td { border-block: var(--border-width-thick) solid var(--focus-ring); }
.data-table__row:focus-visible > .data-table__td:first-child, .data-table__row[data-force="focus-visible"] > .data-table__td:first-child { border-inline-start-color: var(--focus-ring); }
.data-table__row:focus-visible > .data-table__td:last-child, .data-table__row[data-force="focus-visible"] > .data-table__td:last-child { border-inline-end: var(--border-width-thick) solid var(--focus-ring); }
.data-table__row[data-force="hover"] { background: var(--surface-hover); }
.data-table__row--skeleton:hover { background: var(--surface); }
.data-table__body:last-of-type > .data-table__row:last-child > .data-table__td { border-block-end: 0; }

/* sticky first column: the select and chevron cells, then the primary column, with a hairline once the table scrolls sideways */
.data-table__td[data-stick], .data-table__th[data-stick] { position: sticky; z-index: calc(var(--z-sticky) - 1); }
.data-table__th[data-stick] { z-index: calc(var(--z-sticky) + 1); }
[data-stick="select"] { inset-inline-start: 0; }
[data-lead="icon"] [data-stick="icon"] { inset-inline-start: 0; }
[data-lead="both"] [data-stick="icon"] { inset-inline-start: var(--col-select); }
[data-lead="none"] [data-stick="primary"] { inset-inline-start: 0; }
[data-lead="select"] [data-stick="primary"] { inset-inline-start: var(--col-select); }
[data-lead="icon"] [data-stick="primary"] { inset-inline-start: var(--col-icon); }
[data-lead="both"] [data-stick="primary"] { inset-inline-start: calc(var(--col-select) + var(--col-icon)); }
.data-table__scroll[data-overflow-x="true"] [data-stick="primary"] { border-inline-end: var(--border-width) solid var(--border); }

/* group header rows (pinned declines, deadlines within 5 days) */
.data-table__group-cell {
  block-size: var(--size-header-slim);
  padding-inline: var(--space-5);
  background: var(--surface-sunken);
  border-block-end: var(--border-width) solid var(--border);
  font: var(--type-label);
  color: var(--text);
  text-align: start;
}

/* expansion row: full width on the surface, hairlines above and below, aligned to the second column */
.data-table__expansion > td { background: var(--surface); border-block-end: var(--border-width) solid var(--border); }
.data-table__expansion-spacer { padding: 0; }
.data-table__expansion-cell { padding: var(--space-5); white-space: normal; }

/* tree variant */
.data-table__tree-cell { display: flex; align-items: center; min-inline-size: 0; }
.data-table__tree-cell > .data-table__text { flex: 0 1 auto; }
.data-table__indent { flex: none; }
.data-table__chevron-spacer { flex: none; inline-size: var(--size-target-min); block-size: var(--size-target-min); }
.data-table__child-count { flex: none; margin-inline-start: var(--space-3); color: var(--text-secondary); font: var(--type-caption); font-variant-numeric: tabular-nums lining-nums; }
.data-table__row[data-group="true"] .data-table__text { font-weight: 600; }
.data-table__row--more .data-table__td { background: var(--surface); }
.data-table__chevron {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
}
.data-table__chevron:hover { background: var(--surface-hover); color: var(--text); }

/* checkbox: the native input keeps keyboard and screen reader behaviour; its 16 px box is drawn next to it, hit area 24 */
.data-table__check { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--size-target-min); block-size: var(--size-target-min); vertical-align: middle; }
.data-table__check-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.data-table__box {
  display: grid;
  place-items: center;
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  background: var(--surface);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-chip);
  color: var(--brand-contrast);
  pointer-events: none;
}
.data-table__box .icon { grid-area: 1 / 1; opacity: 0; }
.data-table__check-input:checked + .data-table__box, .data-table__check-input:indeterminate + .data-table__box { background: var(--brand); border-color: var(--brand); }
.data-table__check-input:checked + .data-table__box .icon:first-child { opacity: 1; }
.data-table__check-input:indeterminate + .data-table__box .icon:first-child { opacity: 0; }
.data-table__check-input:indeterminate + .data-table__box .icon:last-child { opacity: 1; }
.data-table__check-input[aria-disabled="true"] { cursor: not-allowed; }
.data-table__check-input[aria-disabled="true"] + .data-table__box { background: var(--surface-sunken); border-color: var(--border); }
.data-table__check-input[aria-disabled="true"]:checked + .data-table__box { background: var(--text-disabled); border-color: var(--text-disabled); }
.data-table__check-input:focus-visible + .data-table__box { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-2); }

/* ---- footer ------------------------------------------------------------------------------------------------------ */
.data-table__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--space-9);
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border-block-start: var(--border-width) solid var(--border);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.data-table__note { flex: 1 1 100%; color: var(--text-secondary); font: var(--type-caption); }

/* ---- loading, empty, error, no results ---------------------------------------------------------------------------- */
.data-table__bar-skeleton {
  display: block;
  max-inline-size: var(--size-skeleton-value-w);
  block-size: var(--size-skeleton-line);
  background: var(--surface-sunken);
  border-radius: var(--radius-chip);
  animation: data-table-pulse var(--duration-pulse) var(--ease-standard) infinite alternate;
}
@keyframes data-table-pulse { from { opacity: 1; } to { opacity: .5; } }
.data-table__message-cell { padding: var(--space-7) var(--space-5); border: 0; text-align: start; white-space: normal; }
.data-table__empty, .data-table__no-results { display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-5); text-align: center; color: var(--text-secondary); }
.data-table__empty-sentence { font: var(--type-sub); color: var(--text); }
.data-table__empty-detail { font: var(--type-body); }
.data-table__empty .icon { color: var(--good); }
.data-table__error {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--critical-subtle);
  border: var(--border-width) solid var(--border);
  border-inline-start: var(--border-width-accent) solid var(--critical);
  border-radius: var(--radius-control);
  color: var(--text);
  white-space: normal;
}
.data-table__error .icon { color: var(--critical); }
.data-table__error-text { display: grid; flex: 1 1 auto; font: var(--type-body); }
.data-table__error-text strong { font: var(--type-button); }
.data-table__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.data-table__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-chip-control);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
  color: var(--text);
  font: var(--type-label);
}
.data-table__chip:hover { background: var(--border); }

/* ---- field list variant ------------------------------------------------------------------------------------------ */
.data-table__table--fields { min-inline-size: 0; table-layout: auto; }
.data-table__term {
  inline-size: var(--size-field-short);
  block-size: var(--size-row);
  padding: var(--space-3) var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
  font: var(--type-label);
  color: var(--text-secondary);
  text-align: start;
  vertical-align: top;
}
.data-table__value {
  block-size: var(--size-row);
  padding: var(--space-3) var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
  font: var(--type-table);
  color: var(--text);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.data-table__value.num { font-variant-numeric: tabular-nums lining-nums; }
.data-table__field-row:last-child > * { border-block-end: 0; }

/* ---- popovers and the action menu (opened through the overlay manager, so they carry data-overlay) -------------------- */
.data-table-popover {
  display: grid;
  min-inline-size: var(--size-popover-sm);
  padding: var(--space-2);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
}
.data-table-popover--columns { inline-size: var(--size-popover-md); padding: 0; }
.data-table-popover__head { display: flex; align-items: center; min-block-size: var(--size-toolbar); padding-inline: var(--space-5); border-block-end: var(--border-width) solid var(--border); }
.data-table-popover__title { font: var(--type-sub); }
.data-table-popover__list { display: grid; max-block-size: var(--size-listbox-max-h); overflow-y: auto; padding: var(--space-2); }
.data-table-popover__row { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--size-menu-item); padding-inline: var(--space-3); border-radius: var(--radius-control); font: var(--type-body); cursor: pointer; }
.data-table-popover__row:hover { background: var(--surface-hover); }
.data-table-popover__foot { display: flex; align-items: center; min-block-size: var(--size-toolbar); padding-inline: var(--space-5); border-block-start: var(--border-width) solid var(--border); }

/* ---- responsive --------------------------------------------------------------------------------------------------- */
@media (width < 768px) {
  .data-table__bar { flex-wrap: wrap; padding-block: var(--space-3); }
  .data-table__search { inline-size: 100%; }
  .data-table__bar-group:first-child { flex: 1 1 100%; }
}
@media (width < 768px) and (pointer: coarse) {
  .data-table__td { block-size: var(--size-control-touch); }
}

/* kitchen sink: a narrow frame so a long name has to truncate (ED-01) */
.data-table-demo__narrow { inline-size: 100%; max-inline-size: var(--size-popover-lg); }
.data-table-demo__readout { min-block-size: var(--size-target-min); }