/* Todo-Detail: Popup mittig, native Checkboxen, Ziehen über die Zeile/den Griff. */

.todo-modal-backdrop.trello-card-backdrop {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  overflow: auto !important;
  padding: 28px 16px !important;
}

.todo-modal.trello-card-modal {
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  max-height: min(92vh, 860px);
}

.todo-checklist-item {
  cursor: grab;
}

.todo-checklist-handle {
  pointer-events: none !important;
  cursor: grab !important;
}

.todo-modal .todo-checklist-item label,
.trello-card-modal .todo-checklist-item label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
  pointer-events: auto !important;
}

.todo-modal .todo-checklist-item input[type="checkbox"],
.trello-card-modal .todo-checklist-item input[type="checkbox"],
.todo-modal .todo-checklist input[type="checkbox"] {
  all: revert !important;
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  box-sizing: border-box !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  background: Canvas !important;
  background-image: none !important;
  border-style: inset !important;
  border-width: 1px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 16px !important;
  line-height: normal !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 3 !important;
  accent-color: #4c9aff !important;
}

.todo-modal .todo-checklist-item select,
.trello-card-modal .todo-checklist-item select {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Action row in todo detail: keep icon + label on one line. */
.trello-card-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.trello-card-buttons button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.trello-card-buttons button svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
}