.product-todo {
  margin-top: var(--pds-space-3, 24px);
}
.product-todo .todo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pds-space-1, 8px);
  align-items: center;
  margin: 16px 0;
}
.product-todo .todo-scroll {
  overflow-x: auto;
}
.product-todo table {
  width: 100%;
  border-collapse: collapse;
}
.product-todo th,
.product-todo td {
  padding: 8px;
  border-bottom: 1px solid var(--pds-color-border);
  text-align: left;
  vertical-align: top;
}
.product-todo td input,
.product-todo td select {
  min-width: 130px;
  width: 100%;
}
.product-todo td textarea {
  min-width: 180px;
  width: 100%;
  min-height: 44px;
}
.product-todo .todo-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.product-todo .todo-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-todo .todo-options input {
  width: auto;
}
.product-todo [role="status"] {
  min-height: 24px;
  margin-top: 8px;
}
.product-todo .todo-preview {
  padding: 16px;
  border: 1px solid var(--pds-color-border);
  background: var(--pds-color-surface-soft);
  margin: 16px 0;
}
.product-todo .todo-preview label {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}
.product-todo .todo-preview input {
  width: auto;
}
.product-todo .todo-failed {
  outline: 2px solid var(--pds-color-danger);
}
@media (max-width: 700px) {
  .product-todo .todo-table,
  .product-todo .todo-table tbody,
  .product-todo .todo-table tr,
  .product-todo .todo-table td {
    display: block;
  }
  .product-todo .todo-table thead {
    display: none;
  }
  .product-todo .todo-table tr {
    border: 1px solid var(--pds-color-border);
    margin-bottom: 12px;
    padding: 8px;
    border-radius: var(--pds-radius-md);
  }
  .product-todo .todo-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--pds-color-text-muted);
  }
}