/* Shared list tables only. Editors, charts and mobile cards retain native layouts. */
.crm-data-table {
  --crm-table-surface: var(--surface-solid, var(--surface));
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
  background: var(--crm-table-surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgb(var(--lift-lo) / .025) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
:is(.crm-data-table, .dr-table) > .tbl {
  border-collapse: separate !important;
  border-spacing: 0;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
:is(.crm-data-table, .dr-table) > .tbl > thead > tr > th {
  padding-block: 12px !important;
  padding-inline: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-solid, var(--surface)) !important;
  border-bottom: 1px solid var(--line) !important;
  z-index: 2;
}
/* Leave room for the native, always reachable column menu. */
.crm-data-table > .tbl > thead > tr > th:has([data-cols-btn]) {
  padding-inline-end: 52px !important;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr {
  border-bottom: 0 !important;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr > td {
  padding-block: 12px !important;
  padding-inline: 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--line);
  border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
  transition: background-color 140ms ease;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr:last-child > td {
  border-bottom: 0;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr > :is(td[data-col="name"], td[data-col="title"], td[data-col="doc"]) {
  font-weight: 600;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr > td[colspan]:only-child {
  padding-block: 12px !important;
}
/* Keep the native empty/error message and actions, without a large illustration pad. */
.crm-data-table td .crm-table-empty { padding: 12px 16px !important; gap: 4px !important; }
.crm-data-table td .crm-table-empty > span[aria-hidden="true"] { display: none !important; }
.crm-data-table th > [role="separator"][aria-orientation="vertical"] {
  right: 0 !important;
}

.crm-data-table [role="separator"][aria-orientation="vertical"] > span {
  opacity: 0;
  transition: opacity 140ms ease;
}
.crm-data-table [data-cols-btn] {
  width: 32px !important;
  height: 32px !important;
  right: 8px !important;
  border-radius: 8px !important;
}
.crm-data-table [data-cols-btn]:hover,
.crm-data-table [data-cols-btn][aria-expanded="true"] {
  background: var(--accent-wash) !important;
  color: var(--accent) !important;
}
.crm-data-table :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr:focus-within > td {
  background: var(--accent-wash);
}
@media (hover: hover) {
  :is(.crm-data-table, .dr-table) > .tbl > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-solid, var(--surface)));
  }
  .crm-data-table th:hover [role="separator"][aria-orientation="vertical"] > span,
  .so-resizing .crm-data-table [role="separator"][aria-orientation="vertical"] > span {
    opacity: 1;
  }
}
/* A selected row keeps a stronger cue than ordinary hover. */
:is(.crm-data-table, .dr-table) > .tbl > tbody > tr:is([aria-selected="true"], :has(input[type="checkbox"]:checked)) > td {
  background: var(--accent-wash);
}
@media (pointer: coarse) {
  .crm-data-table [data-cols-btn] { width: 44px !important; height: 44px !important; }
  .crm-data-table > .tbl > thead > tr > th { padding-block: 14px !important; }
  .crm-data-table > .tbl > thead > tr > th:has([data-cols-btn]) { padding-inline-end: 60px !important; }
  .crm-data-table [role="separator"][aria-orientation="vertical"] > span { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-data-table *, .dr-table > .tbl > tbody > tr > td { transition: none !important; }
}
@media print {
  .crm-data-table { max-height: none !important; overflow: visible !important; box-shadow: none !important; }
}