/*
 * leadity-Bibliothek · kanonischer Data-Kern
 * Quellen: Figma 5022:1766, 5049:8671, 5418:5051, 5559:4153,
 * 7755:1503 sowie produktive BaseDataTable-/BaseTreeTable-Tokens.
 * Laden nach tokens, actions.css und overlays.css.
 */

:where(.data-table, .data-column-toggle, .data-with-label) {
  box-sizing: border-box;
  color: var(--leadity-text-default);
  font-family: var(--leadity-font-body);
}

.data-table-shell {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.data-table-shell:focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font-variant-numeric: tabular-nums;
}

.data-table :where(th, td) {
  padding: var(--leadity-space-3) var(--leadity-space-4);
  border: 0;
  border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  vertical-align: middle;
  text-align: left;
}

.data-table thead th {
  height: 45px;
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 600 16px/1.3 var(--leadity-font-body);
  letter-spacing: .08px;
}

.data-table tbody :where(th, td) {
  height: 48px;
  background: var(--leadity-white);
  font: 400 16px/1.5 var(--leadity-font-body);
  letter-spacing: .08px;
}

.data-table-sm thead th {
  height: 42px;
  font-size: 16px;
  letter-spacing: .08px;
}

.data-table-sm tbody :where(th, td) {
  height: 45px;
  font-size: 16px;
  letter-spacing: .08px;
}

.data-table :where(.is-center, [data-align="center"]) { text-align: center; }
.data-table :where(.is-number, [data-align="right"]) { text-align: right; }
.data-table .is-light { color: var(--leadity-text-light); }
.data-table .is-error { color: var(--leadity-state-error-text); }

.data-table[data-row-hover="true"] tbody tr:hover > *,
.data-table tbody tr:focus-within > * {
  background: var(--leadity-neutral-20);
}

.data-table tbody tr[aria-selected="true"] > * {
  background: var(--leadity-neutral-10);
}

.data-table tbody tr[aria-selected="true"]:hover > * {
  background: var(--leadity-neutral-20);
}

.data-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table-header-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-1);
}

.data-table-header-content.is-center { justify-content: center; }
.data-table-header-content.is-number { justify-content: flex-end; }
.data-table-header-content.has-info-action { gap: var(--leadity-space-3); }
.data-table-header-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table-header-error { color: var(--leadity-state-error-text); }
.data-table-header-spacer { flex: 1 1 auto; }

.data-table-header-button,
.data-table-header-accordion,
.data-tree-toggle,
.data-column-toggle-button,
.data-column-token-remove {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--leadity-neutral-80);
  font: inherit;
  cursor: pointer;
}

.data-table-header-button {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  padding: 0;
}

.data-table-header-button::after,
.data-table-header-accordion::after,
.data-tree-toggle::after,
.data-column-token-remove::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.data-table-header-button:hover,
.data-table-header-accordion:hover,
.data-tree-toggle:hover,
.data-column-toggle-button:hover,
.data-column-token-remove:hover { color: var(--leadity-text-dark); }

:where(.data-table-header-button, .data-table-header-accordion, .data-tree-toggle, .data-column-toggle-button, .data-column-token-remove):focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

.data-table-header-button i { font-size: 16px; }

.data-table-header-accordion {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-2);
  padding: 0;
  color: var(--leadity-text-default);
  font: 600 16px/1.3 var(--leadity-font-body);
  letter-spacing: .08px;
  text-align: left;
}

.data-table-header-accordion-cell { padding-block: 0 !important; }

.data-table-header-accordion i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  font-size: 16px;
}

.data-table-header-turned {
  width: 45px;
  min-width: 45px;
  height: 122px !important;
  padding: var(--leadity-space-3) var(--leadity-space-4) !important;
  vertical-align: bottom !important;
}

.data-table-sm .data-table-header-turned {
  width: 42px;
  min-width: 42px;
}

.data-table-header-turned-label {
  width: 21px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.data-cell-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
}

.data-cell-content.is-center { justify-content: center; }
.data-cell-content.is-number { justify-content: flex-end; }

.data-cell-link {
  color: var(--leadity-text-default);
  text-decoration: none;
}

.data-cell-link:hover,
.data-cell-link:focus-visible { text-decoration: underline; }

.data-cell-empty {
  color: var(--leadity-text-light);
  text-align: left;
}

.data-cell-empty-action {
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--leadity-neutral-80);
}

.data-cell-empty-action:focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

.data-cell-error-note {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--leadity-space-2);
  color: var(--leadity-state-error-text);
  font-size: 16px;
  white-space: nowrap;
}

.data-cell-control {
  min-width: 180px;
  padding-block: var(--leadity-space-2) !important;
}

.data-cell-control :where(.leadity-field, .leadity-select-shell) { width: 100%; }
.data-cell-control .leadity-textarea { min-height: 40px; height: 40px; resize: vertical; }

.data-cell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--leadity-space-3);
}

.data-cell-actions[data-size="default"] { gap: var(--leadity-space-4); }

/* Registrierte Data-Primitives aus Figma 5022:1766 */
.data-rating-host,
.data-ai-review-host,
leadity-sustainability-dimension,
leadity-emission-factor {
  min-width: 0;
  display: inline-flex;
}

.data-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--leadity-space-2);
}

.data-rating-star {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--leadity-neutral-80);
  cursor: pointer;
}

.data-rating-star i { font-size: 16px; }
.data-rating[data-disabled="true"] .data-rating-star { color: var(--leadity-neutral-40); cursor: default; }
.data-rating-star:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: var(--leadity-focus-offset); }

.data-ai-review {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3);
  border: 0;
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-10);
  color: var(--leadity-neutral-80);
  font: 400 14px/16px var(--leadity-font-body);
  cursor: pointer;
}

.data-ai-review:hover { background: var(--leadity-neutral-20); color: var(--leadity-text-default); }
.data-ai-review:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: var(--leadity-focus-offset); }
.data-ai-review-icon { width: 14px; height: 14px; display: block; flex: 0 0 14px; }

.data-sustainability-dimension {
  min-height: 24px;
  align-items: center;
  gap: var(--leadity-space-4);
  color: var(--leadity-text-default);
  font: 400 16px/1.5 var(--leadity-font-body);
  letter-spacing: .08px;
}

.data-sustainability-dimension-icon { width: 16px; height: 16px; display: block; flex: 0 0 16px; }

.data-emission-factor {
  min-height: 32px;
  max-width: 100%;
  position: relative;
  align-items: center;
  gap: var(--leadity-space-3);
}

.data-emission-factor-link {
  min-width: 0;
  color: var(--leadity-text-default);
  font: 400 16px/1.5 var(--leadity-font-body);
  letter-spacing: .08px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-emission-factor.is-truncated .data-emission-factor-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table-selection {
  width: 44px;
  text-align: center !important;
}

/* TreeTable */
.data-tree-cell {
  --tree-level: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
  padding-left: calc((var(--tree-level) - 1) * 20px);
}

.data-tree-cell[data-tree-level="1"] { --tree-level: 1; }
.data-tree-cell[data-tree-level="2"] { --tree-level: 2; }
.data-tree-cell[data-tree-level="3"] { --tree-level: 3; }
.data-tree-cell[data-tree-level="4"] { --tree-level: 4; }
.data-tree-cell[data-tree-level="5"] { --tree-level: 5; }
.data-tree-cell[data-tree-level="6"] { --tree-level: 6; }

.data-tree-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  margin-block: -8px;
  padding: 0;
  border-radius: var(--leadity-radius-full);
}

.data-tree-toggle:hover { background: var(--leadity-neutral-20); }
.data-tree-toggle i { font-size: 16px; transition: transform 140ms ease; }
.data-tree-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.data-tree-toggle-placeholder { width: 40px; flex: 0 0 40px; }
.data-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-tree-label.is-group { font-weight: 600; }

/* DataTableColumnToggle */
.data-column-toggle {
  width: min(100%, 605px);
  position: relative;
}

.data-column-toggle-control {
  width: 100%;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-4);
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
}

.data-column-tokens {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--leadity-space-3);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
  padding-right: 40px;
}

.data-column-tokens::-webkit-scrollbar { display: none; }

.data-column-placeholder {
  color: var(--leadity-text-light);
  font: 400 16px/1.5 var(--leadity-font-body);
}

.data-column-token {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-10);
  color: var(--leadity-neutral-80);
  font: 400 14px/16px var(--leadity-font-body);
  flex: 0 0 auto;
}

.data-column-token-remove {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 14px;
  padding: 0;
  z-index: 3;
}

.data-column-token-remove i { font-size: 12px; }

.data-column-toggle-button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 0 var(--leadity-space-4);
  border-radius: var(--leadity-radius-sm);
}

.data-column-toggle-button:hover { background: var(--leadity-neutral-10); }
.data-column-toggle-button:focus-visible { outline-offset: var(--leadity-focus-offset); }

.data-column-toggle-button[aria-expanded="true"] i { transform: rotate(180deg); }
.data-column-toggle-button i { transition: transform 140ms ease; }

.data-column-options {
  width: 100%;
  position: absolute;
  z-index: 120;
  top: calc(100% + var(--leadity-space-2));
  left: 0;
  display: grid;
  gap: var(--leadity-space-2);
  padding: var(--leadity-space-3);
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-floating);
}

.data-column-options[hidden] { display: none; }

.data-column-option {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3) var(--leadity-space-4);
  border-radius: var(--leadity-radius-sm);
  cursor: pointer;
}

.data-column-option:hover { background: var(--leadity-neutral-10); }
.data-column-option .leadity-choice-control { flex: 0 0 auto; }
.data-column-option .leadity-choice-meta { color: var(--leadity-text-light); font-size: 14px; }

/* DataWithLabel */
.data-with-label {
  min-height: 40px;
  max-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.data-with-label-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-2);
  color: var(--leadity-text-light);
  font: 400 14px/1.5 var(--leadity-font-body);
  letter-spacing: .07px;
}

.data-with-label-value {
  min-width: 0;
  color: var(--leadity-text-default);
  font: 400 16px/1.5 var(--leadity-font-body);
  letter-spacing: .08px;
}

.data-with-label[data-max-width="true"] .data-with-label-value {
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-with-label[data-max-width="true"] { width: 100%; max-width: 280px; }

@media (max-width: 720px) {
  .data-table { min-width: 680px; }
}

@media (prefers-reduced-motion: reduce) {
  .data-tree-toggle i,
  .data-column-toggle-button i { transition: none; }
}