/*
 * leadity-Bibliothek · Task-Flächen und Sammelaktionen
 * Quellen: Figma 5944:11547, 5974:7449, 6156:50004, 8138:2304,
 * 8803:10071 sowie produktive TaskListCard-/BulkActionsBar-Komponenten.
 * Laden nach tokens, actions.css, overlays.css und data.css.
 */

:where(.heading-button-combination, .task-list, .task-list-card, .bulk-actions-bar) {
  box-sizing: border-box;
  color: var(--leadity-text-default);
  font-family: var(--leadity-font-body);
}

/* Gruppierende Überschrift mit höchstens drei kompakten Aktionen. */
.heading-button-combination {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--leadity-space-6);
}

.heading-button-combination-title {
  min-width: 0;
  margin: 0;
  color: var(--leadity-text-dark);
  font: 600 18px/1.5 var(--leadity-font-body);
  letter-spacing: .09px;
}

.heading-button-combination-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--leadity-space-4);
}

/* TaskListTable ist visuell tabellarisch, semantisch aber eine Aufgabenliste. */
.task-list {
  min-width: 0;
  padding: var(--leadity-space-7);
  border-radius: var(--leadity-radius-xl);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.task-list-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.task-list-rows {
  min-width: 1080px;
  display: grid;
}

.task-list-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 44px 40px minmax(260px, 1fr) 60px 94px 120px 150px 40px;
  align-items: stretch;
  border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  background: var(--leadity-white);
  transition: background-color 140ms ease;
}

.task-list-row:last-child { border-bottom: 0; }
.task-list-row[hidden] { display: none; }
.task-list-row:hover { background: var(--leadity-neutral-20); }
.task-list-row[aria-selected="true"] { background: var(--leadity-neutral-10); }
.task-list-row[aria-selected="true"]:hover { background: var(--leadity-neutral-20); }

.task-list-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--leadity-space-3) var(--leadity-space-4);
}

.task-list-cell.is-compact {
  justify-content: center;
  padding-inline: var(--leadity-space-3);
}

.task-list-expander:focus-visible,
.task-row-title:focus-visible,
.task-pm-control:focus-visible,
.bulk-actions-close:focus-visible {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

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

.task-list-title-cell {
  gap: var(--leadity-space-3);
}

.task-list-row[data-task-depth="1"] .task-list-title-cell {
  padding-left: calc(var(--leadity-space-4) + var(--leadity-space-7));
}

.task-list-expander {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  margin-left: calc(var(--leadity-space-4) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--leadity-radius-full);
  background: transparent;
  color: var(--leadity-neutral-80);
  cursor: pointer;
}

.task-list-expander:hover { background: var(--leadity-neutral-10); }
.task-list-expander i { font-size: 16px; transition: transform 140ms ease; }
.task-list-expander[aria-expanded="false"] i { transform: rotate(-90deg); }

.task-row-title {
  min-width: 0;
  overflow: hidden;
  color: var(--leadity-text-default);
  font: 500 16px/1.3 var(--leadity-font-body);
  letter-spacing: .08px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row-title:hover { text-decoration: underline; }

/* Projektmanagement bleibt ein Integrationsslot; die Schale belegt nur Größe und Ausrichtung. */
.task-pm-control {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--leadity-radius-sm);
  background: transparent;
  color: var(--leadity-neutral-80);
  font: 400 14px/16px var(--leadity-font-body);
  cursor: pointer;
}

.task-pm-control:hover .task-pm-chip { background: var(--leadity-neutral-20); }

.task-pm-chip {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-3);
  padding-inline: var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-10);
  color: var(--leadity-neutral-80);
  white-space: nowrap;
}

.task-pm-chip img {
  width: 16px;
  height: 16px;
  display: block;
}

.task-status-chip {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  font: 400 14px/16px var(--leadity-font-body);
  white-space: nowrap;
}

.task-status-chip[data-status="open"] {
  background: var(--leadity-state-open-background-light);
  color: var(--leadity-state-open-text);
}

.task-status-chip[data-status="progress"] {
  background: var(--leadity-status-progress-surface);
  color: var(--leadity-status-progress-text);
}

.task-status-chip[data-status="review"] {
  background: var(--leadity-state-check-background-light);
  color: var(--leadity-state-check-text);
}

.task-status-chip[data-status="complete"] {
  background: var(--leadity-state-success-background-light);
  color: var(--leadity-state-success-text);
}

.task-avatar-stack {
  width: 70px;
  height: 40px;
  display: flex;
  align-items: center;
}

.task-avatar {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  border: var(--leadity-line-xs) solid var(--leadity-white);
  border-radius: var(--leadity-radius-full);
  background: var(--leadity-neutral-20);
  color: var(--leadity-text-default);
  font: 400 14px/1 var(--leadity-font-body);
  letter-spacing: .1px;
}

.task-avatar + .task-avatar { margin-left: -10px; }

/* TaskListCard */
.task-list-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--leadity-space-6) var(--leadity-space-7) var(--leadity-space-7);
  border-radius: var(--leadity-radius-xl);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.task-list-card[aria-selected="true"] {
  box-shadow: 0 0 0 var(--leadity-line-sm) var(--leadity-neutral-80), var(--leadity-shadow-default);
}

.task-list-card-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--leadity-space-8);
  padding-bottom: var(--leadity-space-6);
}

.task-list-card-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-4);
  padding-top: var(--leadity-space-3);
}

.task-list-card-heading-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 24px;
}

.task-list-card-title {
  min-width: 0;
  margin: 0;
  color: var(--leadity-text-dark);
  font: 600 18px/1.5 var(--leadity-font-body);
  letter-spacing: .09px;
}

.task-list-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--leadity-space-5);
}

.task-list-card-content {
  min-width: 0;
}

.task-list-card-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: var(--leadity-space-6);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-light);
  text-align: center;
}

.task-list-card-footer {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--leadity-space-6);
  padding-top: var(--leadity-space-6);
}

.task-list-card-footer-slot {
  min-width: 0;
  color: var(--leadity-text-light);
  font: 400 14px/21px var(--leadity-font-body);
}

.task-editor-step .leadity-editor { width: 100%; }
.task-editor-step-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--leadity-space-3); }

/* Floating BulkActionsBar. Outer bottom 64 px + inner margin 16 px = 80 px sichtbarer Abstand. */
.bulk-actions-layer {
  width: 100%;
  position: fixed;
  z-index: 130;
  right: 0;
  bottom: var(--leadity-space-9);
  left: 0;
  pointer-events: none;
}

.bulk-actions-layer[hidden] { display: none; }

.bulk-actions-bar {
  width: fit-content;
  max-width: calc(100vw - 32px);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-6);
  margin: var(--leadity-space-5) auto;
  padding: var(--leadity-space-5);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-neutral-80);
  color: var(--leadity-neutral-10);
  box-shadow: var(--leadity-shadow-floating);
  pointer-events: auto;
}

.bulk-actions-summary {
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
  flex: 0 0 auto;
  white-space: nowrap;
}

.bulk-actions-count {
  color: var(--leadity-neutral-10);
  font: 400 14px/1.5 var(--leadity-font-body);
  letter-spacing: .07px;
}

.bulk-actions-buttons {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.bulk-actions-buttons > * { flex: 0 0 auto; }

.bulk-actions-close {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-radius: var(--leadity-radius-full);
  background: transparent;
  color: var(--leadity-neutral-10);
  cursor: pointer;
}

.bulk-actions-close:hover { background: var(--leadity-neutral-100); }
.bulk-actions-close i { font-size: 16px; }

@media (max-width: 1023px) {
  .task-list-card-header { gap: var(--leadity-space-6); }
  .task-list-card-meta { max-width: 440px; }
}

@media (max-width: 767px) {
  .heading-button-combination { align-items: flex-start; flex-direction: column; }
  .heading-button-combination-actions { width: 100%; justify-content: flex-start; }
  .task-list { padding: var(--leadity-space-5); }
  .task-list-card { padding: var(--leadity-space-6); }
  .task-list-card-header { flex-direction: column; }
  .task-list-card-meta { max-width: none; justify-content: flex-start; }
  .task-list-card-footer { align-items: flex-start; flex-direction: column; }
  .task-editor-step-actions { width: 100%; justify-content: flex-start; }
  .bulk-actions-bar { width: calc(100vw - 32px); gap: var(--leadity-space-4); }
  .bulk-actions-summary { min-width: 136px; }
}

@media (max-width: 479px) {
  .heading-button-combination-actions .btn { width: 100%; }
  .task-list-card-meta { gap: var(--leadity-space-3); }
  .bulk-actions-layer { bottom: var(--leadity-space-5); }
  .bulk-actions-bar { margin-block: 0; padding: var(--leadity-space-4); }
  .bulk-actions-summary { min-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .task-list-row,
  .task-list-expander i { transition: none; }
}