/* Workspace UI V2 page migration: Todo is the first converted surface. */
body.surface-workspace.workspace-v2.todos-active .todo-v2 {
  --todo-v2-columns: minmax(0, 1fr);
  font-family: var(--w2-font-ui);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--w2-space-4);
  min-height: 74px;
  margin: 0 0 var(--w2-space-4);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-title-block {
  min-width: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .page-title {
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 820;
  line-height: 1;
  text-shadow: 0 10px 30px rgba(18, 26, 58, .22);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .page-title span {
  color: rgba(217, 244, 255, .98);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .page-title svg {
  width: .78em;
  height: .78em;
  margin-left: 8px;
  color: rgba(255, 236, 200, .92);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-topbar p {
  max-width: 560px;
  margin: var(--w2-space-2) 0 0;
  color: rgba(247, 251, 255, .78);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  text-shadow: 0 8px 26px rgba(18, 26, 58, .20);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-backend-meta {
  max-width: min(360px, 36vw);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--w2-radius-pill);
  background: rgba(255, 255, 255, .16);
  box-shadow: var(--w2-inset);
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-backend-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-card.todo-create-card {
  display: grid;
  gap: var(--w2-space-3);
  min-height: 0;
  padding: var(--w2-space-4);
  border-bottom-color: rgba(255, 255, 255, .22);
  border-radius: var(--w2-radius-lg) var(--w2-radius-lg) 0 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-create-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--w2-space-3);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-quick-input {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 label {
  color: var(--w2-ink-muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.1;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-btn {
  width: max-content;
  min-width: 116px;
  max-width: 160px;
  min-height: 40px;
  justify-self: end;
  padding-inline: 15px;
  border-radius: var(--w2-radius-md);
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, .72), transparent 46%),
    linear-gradient(135deg, rgba(240, 247, 252, .52), rgba(194, 215, 229, .36) 54%, rgba(158, 181, 211, .30)),
    rgba(255, 255, 255, .24);
  border-color: rgba(125, 147, 176, .30);
  color: rgba(33, 52, 74, .92);
  font-size: 13px;
  white-space: nowrap;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-btn:hover {
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, .82), transparent 46%),
    linear-gradient(135deg, rgba(245, 250, 254, .60), rgba(202, 222, 235, .42) 54%, rgba(166, 189, 218, .34)),
    rgba(255, 255, 255, .30);
  border-color: rgba(117, 140, 170, .38);
  color: rgba(28, 47, 70, .96);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options {
  min-width: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options summary {
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--w2-space-2);
  color: var(--w2-ink-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  list-style: none;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options summary::-webkit-details-marker {
  display: none;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options summary::before {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76, 91, 119, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .58);
  color: var(--w2-teal);
  font-size: 16px;
  line-height: 1;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options[open] summary::before {
  content: "-";
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options summary small {
  min-width: 0;
  color: var(--w2-ink-muted);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-form-grid.todo-advanced-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: var(--w2-space-3);
  margin: var(--w2-space-3) 0 0;
  padding: var(--w2-space-3);
  border: 1px solid rgba(76, 91, 119, .12);
  border-radius: var(--w2-radius-md);
  background: rgba(255, 255, 255, .24);
  box-shadow: none;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-form-grid .form-group {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-note-field {
  grid-column: 1 / -1;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-list-card.todo-queue-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--w2-space-3);
  min-height: 0;
  padding: var(--w2-space-4);
  border-top: 0;
  border-radius: 0 0 var(--w2-radius-lg) var(--w2-radius-lg);
  background:
    radial-gradient(ellipse at 78% 4%, rgba(255, 255, 255, .46), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .14) 46%, rgba(210, 231, 255, .22)),
    rgba(226, 239, 250, .18);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-list-head {
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--w2-space-4);
  margin: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .card-title {
  color: var(--w2-ink);
  font-size: 18px;
  font-weight: 820;
  line-height: 1.2;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .mem-count {
  display: block;
  margin-top: var(--w2-space-1);
  color: var(--w2-ink-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(118px, 150px) auto auto;
  align-items: center;
  gap: var(--w2-space-2);
  min-width: 0;
  padding: var(--w2-space-2);
  border: 1px solid rgba(76, 91, 119, .12);
  border-radius: var(--w2-radius-md);
  background: rgba(255, 255, 255, .24);
  box-shadow: none;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar input,
body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar select,
body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar .btn {
  min-height: 36px;
  font-size: 13px;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-batch-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--w2-space-2);
  margin: 0;
  padding: var(--w2-space-2);
  border: 1px dashed rgba(76, 91, 119, .14);
  border-radius: var(--w2-radius-md);
  background: rgba(255, 255, 255, .18);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list {
  display: grid;
  gap: var(--w2-space-3);
  min-width: 0;
  min-height: 0;
  padding: 0 0 var(--w2-space-1);
  overflow: visible;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--w2-space-3);
  min-width: 0;
  padding: var(--w2-space-4);
  border: 1px solid rgba(76, 91, 119, .14);
  border-radius: var(--w2-radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .38);
  box-shadow:
    0 8px 26px rgba(18, 28, 62, .08),
    inset 0 1px 1px rgba(255, 255, 255, .68);
  color: var(--w2-ink);
  opacity: 1;
  overflow: visible;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: var(--w2-radius-pill);
  background: rgba(71, 119, 181, .36);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item.is-overdue::before,
body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item.todo-status-cancelled::before {
  background: rgba(181, 90, 102, .52);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item.is-due-soon::before {
  background: rgba(169, 119, 52, .56);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item.todo-status-done::before {
  background: rgba(39, 143, 127, .48);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-check {
  padding-top: 2px;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--w2-teal);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-main {
  min-width: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-title {
  color: var(--w2-ink);
  font-size: 16px;
  font-weight: 820;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--w2-space-2);
  color: var(--w2-ink-muted);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-note {
  margin-top: var(--w2-space-3);
  padding: var(--w2-space-3);
  border: 1px solid rgba(76, 91, 119, .12);
  border-radius: var(--w2-radius-sm);
  background: rgba(255, 255, 255, .34);
  color: var(--w2-ink-soft);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  justify-self: end;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-actions .btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-list-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    gap: var(--w2-space-2);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .page-title {
    font-size: clamp(30px, 10vw, 38px);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-topbar p {
    font-size: 14px;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-backend-meta {
    max-width: 100%;
    width: fit-content;
    padding: 8px 10px;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-card.todo-create-card,
  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-list-card.todo-queue-card {
    padding: var(--w2-space-3);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-card.todo-create-card {
    border-radius: var(--w2-radius-md) var(--w2-radius-md) 0 0;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-list-card.todo-queue-card {
    border-radius: 0 0 var(--w2-radius-md) var(--w2-radius-md);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-create-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-btn {
    width: max-content;
    min-width: 112px;
    justify-self: end;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-more-options summary {
    width: 100%;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-form-grid.todo-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 136px);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar .btn {
    width: 100%;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-batch-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-batch-row .tag {
    grid-column: 1 / -1;
    justify-content: center;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-batch-row .btn {
    width: 100%;
    padding-inline: 8px;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 #todo-list .todo-item {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--w2-space-2);
    padding: var(--w2-space-3);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-actions {
    grid-column: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: var(--w2-space-2);
  }
}

@media (max-width: 430px) {
  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-filterbar .btn {
    min-height: 38px;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-actions .btn {
    min-height: 30px;
    padding-inline: 9px;
  }
}